/* BLOCKWAVE demo. Palette and buttons come from ../_shared/demo.css. */
body { overflow-x: hidden; }
.wrap { max-width: 1400px; margin: 0 auto; padding: 14px 16px 18px; }
.top { margin-bottom: 12px; }
.top h1 { margin: 2px 0 0; }
code { font-family: var(--mono); font-size: 0.95em; color: var(--text-2); }
.note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.note.mono { font: 12px/1.5 var(--mono); }
.firewall { color: var(--text-2); }
[hidden] { display: none !important; }

/* Poster */
.poster { display: flex; align-items: center; justify-content: center; gap: 36px; min-height: 360px; padding: 28px; }
.poster-img { width: auto; height: min(420px, calc(100vh - 170px)); min-height: 260px; aspect-ratio: 720 / 750; border-radius: 8px; border: 1px solid var(--line); opacity: 0.9; }
.poster-inner { position: relative; z-index: 1; display: grid; justify-items: start; text-align: left; gap: 14px; max-width: 520px; }
.poster-title { margin: 0; font: 600 clamp(16px, 2vw, 20px)/1.35 var(--sans); color: var(--text); }
.poster .size { max-width: 520px; margin: 0; }

/* Tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs [role="tab"] {
  flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  padding: 9px 12px 10px; font: 500 13px/1 var(--sans); cursor: pointer; margin-bottom: -1px;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabs [role="tab"]:hover { color: var(--accent-hi); }

/* Main grid: the game on the left, the readouts on the right; stacked when narrow. */
/* The game column is as wide as the frame can be while its 720x750 aspect still fits the height. */
.panel-grid {
  --stage-w: clamp(300px, calc((100vh - 156px) * 0.96), 760px);
  display: grid; grid-template-columns: minmax(0, var(--stage-w)) minmax(280px, 1fr); gap: 22px; align-items: start;
}
.stage { position: relative; line-height: 0; }
.stage canvas { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); background: #0d0618; }
.stage.small { width: clamp(240px, calc((100vh - 200px) * 0.96), 440px); max-width: 100%; }
.overlay {
  position: absolute; inset: 1px; display: grid; place-items: center; padding: 18px; text-align: center; border-radius: 8px;
  background: rgba(11, 10, 16, 0.72); color: var(--text); font: 500 14px/1.45 var(--sans); line-height: 1.45; border: 0;
}
.overlay.clickable { cursor: pointer; width: calc(100% - 2px); height: calc(100% - 2px); }
.overlay.clickable:hover { color: var(--accent-hi); }

.side { min-width: 0; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.counters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; }
.counters div { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.counters dt { font: 500 10px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.counters dd { margin: 2px 0 0; font: 650 clamp(16px, 2vw, 22px)/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.block { margin-top: 14px; }
.block .label { margin: 0 0 6px; }

/* Action probabilities */
.probs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
.probs li { display: grid; grid-template-columns: 78px minmax(0, 1fr) 40px; align-items: center; gap: 6px; font: 11px/1.6 var(--mono); color: var(--muted); }
.probs .t { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.probs .t i { display: block; height: 100%; width: 0; background: var(--muted); }
.probs .v { text-align: right; font-variant-numeric: tabular-nums; }
.probs li.on { color: var(--text); }
.probs li.on .t i { background: var(--accent); }

.spark { display: block; width: 100%; height: 72px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }

/* Pixel tab */
.pixel-gate { grid-column: 1 / -1; display: grid; justify-items: start; gap: 12px; max-width: 620px; }
.pixel-gate p { margin: 0; color: var(--text-2); }
.pixel-views { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto minmax(240px, 1fr); gap: 18px; align-items: start; }
.pv { margin: 0; min-width: 0; }
.pv figcaption { margin-bottom: 6px; }
#cv-crop { display: block; width: 264px; height: 264px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 6px; background: #000; }
.stack { display: grid; grid-template-columns: repeat(4, 60px); gap: 8px; margin-top: 10px; }
.stack canvas { width: 60px; height: 60px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 4px; background: #000; }
.pv .note { max-width: 264px; }

/* Play tab */
.tabs .short { display: none; }
.pad { display: grid; grid-template-columns: repeat(4, minmax(0, 70px)); gap: 8px; margin-top: 14px; touch-action: none; user-select: none; -webkit-user-select: none; }
.pad button {
  height: 46px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
  font: 500 20px/1 var(--sans); cursor: pointer; touch-action: none;
}
.pad button.txt { font-size: 13px; }
.pad button.wide { grid-column: span 2; }
.pad button.down { background: var(--accent); color: #140f24; border-color: var(--accent); }
kbd { font: 11px/1 var(--mono); padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--text-2); }
.keys { line-height: 2; }

/* README results */
.results { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.results h2 { margin: 0 0 10px; }
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 900px; }
.bars li { display: grid; grid-template-columns: minmax(150px, 290px) minmax(0, 1fr) 56px; gap: 10px; align-items: center; font: 12px/1.4 var(--mono); color: var(--text-2); }
.bars .bt { height: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.bars .bt i { display: block; height: 100%; width: calc(var(--v) / 0.4 * 100%); background: #5b566b; }
.bars .bv { text-align: right; font-variant-numeric: tabular-nums; }
.bars li.live { color: var(--accent-hi); }
.bars li.live .bt i { background: var(--accent); }

@media (max-width: 1100px) {
  .pixel-views { grid-template-columns: auto minmax(0, 1fr); }
  .pixel-views .side { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .panel-grid { grid-template-columns: minmax(0, 1fr); }
  .stage.small { width: 100%; }
  .poster { padding: 0; min-height: 420px; }
  .poster-img { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center 35%; opacity: 0.16; border: 0; }
  .poster-inner { justify-items: center; text-align: center; padding: 32px 18px; }
  .pixel-views { grid-template-columns: minmax(0, 1fr); }
  .counters { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .counters div { padding: 6px 8px; }
  .probs { grid-template-columns: minmax(0, 1fr); }
  .bars li { grid-template-columns: minmax(0, 1fr) 56px; }
  .bars .bt { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 520px) {
  .tabs .long { display: none; }
  .tabs .short { display: inline; }
  .counters dt { font-size: 9px; letter-spacing: 0.04em; }
  #panel-play .counters { display: none; }
  .pad { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 0; }
  .pad button { height: 50px; }
  .pixel-views { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .pixel-views .side { grid-column: 1 / -1; }
  .pv figcaption { font-size: 9.5px; letter-spacing: 0.04em; }
  #cv-crop { width: 100%; height: auto; aspect-ratio: 1; }
  .stack { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .stack canvas { width: 100%; height: auto; aspect-ratio: 1; }
  .pv .note { font-size: 11px; }
}
@media (max-width: 400px) {
  #cv-crop { width: 100%; height: auto; max-width: 264px; aspect-ratio: 1; }
  .stack { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stack canvas { width: 100%; height: auto; aspect-ratio: 1; }
}