/*
* Canned — shared screen stylesheet (phase 5). Served at /tv/canned.css; the TV pages and the
* phone pages both load it.
*
* Fonts: the five OFL faces the Focus Group kit ships (assets/kits/focus-group-phone/fonts,
* font-info.json) declared once, by the kit manifest's aliases: Display, Condensed, Small, Hand,
* Footer. Every screen kit uses the same five.
*
* Stage: a kit is a fixed native canvas (1672×941 for a TV, 941×1672 for a phone). A page
* renders the whole screen at that native size inside `.canned-stage` and the browser scales it
* uniformly to the viewport (letterboxed; nothing is ever stretched): canned-stage.js sets
* `--canned-scale` from the viewport on load and resize. Kit art (`art/`, `ui/`, `icons/`) is
* placed by the manifest's boxes; every live value is DOM text over it.
*/
@font-face { font-family: "Canned Display"; src: url("/assets/kits/focus-group-phone/fonts/Display.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "Canned Condensed"; src: url("/assets/kits/focus-group-phone/fonts/Condensed.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: block; }
@font-face { font-family: "Canned Small"; src: url("/assets/kits/focus-group-phone/fonts/Small.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Canned Hand"; src: url("/assets/kits/focus-group-phone/fonts/Hand.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }
@font-face { font-family: "Canned Footer"; src: url("/assets/kits/focus-group-phone/fonts/Footer.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: block; }
:root {
--font-display: "Canned Display", "Spicy Rice", Georgia, serif;
--font-condensed: "Canned Condensed", "Barlow Condensed", Impact, sans-serif;
--font-small: "Canned Small", "Barlow Condensed", sans-serif;
--font-hand: "Canned Hand", "Kalam", cursive;
--font-footer: "Canned Footer", "Libre Baskerville", Georgia, serif;
--canned-scale: 1;
/* ---- Design tokens (DESIGN.md §2 Color, §4 Spacing, §6 Motion). Every hex is sampled from a
named source asset; DESIGN.md §2 lists the source next to each token. Do not add a colour
here that is not in an approved asset. */
--canned-paper: #fdf3d8; /* Focus Group phone kit, art/paper-plate.png (golden fg-phone-pitch.png) */
--canned-board: #f7e9c4; /* Park Lobby kit, ui/guest-list-board-blank.png (golden tv-lobby.png) */
--canned-plaque: #f5c050; /* Park Lobby kit, ui/room-code-plaque.png (golden tv-lobby.png) */
--canned-ink: #221209; /* Park Lobby composite, the room-code lettering */
--canned-red: #ab3212; /* Park Lobby composite, "WELCOME TO THE PARK" lettering */
--canned-marquee: #d5561a; /* Focus Group phone kit, ui/option-*-orange.png pressed face */
--canned-teal: #347e73; /* Focus Group phone kit manifest, text_fields player_label color */
--canned-sign-red: #c21b0b; /* canned_closed_sign_v1.png, the sign's lettering */
--canned-sky: #88c2f3; /* canned_park_map_no_txt_v1.png, the map's sky */
--canned-paving: #fee2b8; /* canned_park_map_no_txt_v1.png, the plaza paving */
--canned-surround: #110d0b; /* Estate Sale round-screen composite, the field behind the art */
/* Spacing: one step, the gap the kits leave between a frame and its neighbour (§4). */
--canned-gap: 24px;
/* Motion: one duration, the length of a beat (§6). Nothing here animates longer. */
--canned-beat: 140ms;
}
@media (prefers-reduced-motion: reduce) {
:root { --canned-beat: 0ms; }
}
/* The letterbox: one viewport tall, the stage centred inside it; the page below it scrolls. */
.canned-letterbox {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background: var(--canned-surround);
display: grid;
place-items: center;
}
.canned-stage {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(var(--canned-scale));
transform-origin: center center;
overflow: hidden; /* the lobby's host art hangs off the bottom edge by design: clipped, never stretched */
user-select: none;
}
/* Every kit layer: an ![]()
placed by its manifest box. It never stretches: the box has the
image's aspect (validate_kit.py checks the kit), and object-fit keeps it so regardless. */
.canned-stage .layer {
position: absolute;
display: block;
object-fit: contain;
pointer-events: none;
}
/* Live text over the art: a positioned box; the text never touches the art files. */
.canned-stage .live {
position: absolute;
margin: 0;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
white-space: pre-line;
overflow: hidden;
line-height: 1;
}
.canned-stage .live.left { justify-content: flex-start; text-align: left; }
/* Text that is in the DOM for its meaning (a spec reads it; a reader hears it) but the kit
draws the same thing as art: kept out of sight, never out of the document. */
.canned-sr {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0);
white-space: nowrap; border: 0;
}
/* Everything past the stage (diagnostics, hub controls, the MiP form): unstyled on purpose. */
.canned-backstage {
padding: 1rem;
font-family: system-ui, sans-serif;
background: #111;
color: #eee;
}
.canned-backstage [hidden] { display: none !important; }
/* ------------------------------------------------------------------------------------------
* Hub boards (phase 5, Part B2): the marquee and the credits are hub UI (client/tv/hub.js) and
* appear on the core TV and on every game TV, so their voice lives here and both pages match.
* The voice is the Park Lobby kit's guest list (DESIGN §5): a kit board, a heading over it, and
* one kit row per line with a film reel and the live value as text. No new colour, no new face.
* ---------------------------------------------------------------------------------------- */
/* A board on the stage: the kit frame is an ![]()
underneath; this is the text layer over it. */
.canned-stage [data-testid="marquee"],
.canned-stage [data-testid="credits"] {
position: absolute;
margin: 0;
color: var(--canned-ink);
font-family: var(--font-condensed);
}
.canned-stage [data-testid="marquee"][hidden],
.canned-stage [data-testid="credits"][hidden] { display: none !important; }
/* The marquee: the machine's board, in the guest-list board's slot. */
.canned-stage [data-testid="marquee"] {
left: 1243px; top: 246px; width: 405px; height: 592px;
}
.canned-stage [data-testid="marquee"] .board {
position: absolute; left: 0; top: 0; width: 405px; height: 592px;
object-fit: contain; pointer-events: none;
}
.canned-stage [data-testid="marquee-title"] {
position: absolute; left: 74px; top: 22px; width: 251px; height: 44px;
margin: 0; font: 40px var(--font-condensed); color: var(--canned-paper);
letter-spacing: .04em; text-transform: uppercase; text-align: center; line-height: 44px;
}
.canned-stage [data-testid="marquee-entries"] {
position: absolute; left: 30px; top: 82px; width: 344px; height: 488px;
margin: 0; padding: 0; list-style: none;
}
.canned-stage [data-testid="marquee-entry"] {
position: absolute; left: 0; width: 344px; height: 75px;
display: flex; align-items: center; gap: var(--canned-gap);
}
.canned-stage [data-testid="marquee-entry"] .row { position: absolute; left: 0; top: 0; width: 344px; height: 75px; object-fit: contain; }
.canned-stage [data-testid="marquee-entry"] .reel { position: absolute; left: 15px; top: 6px; width: 62px; height: 62px; object-fit: contain; }
.canned-stage [data-testid="marquee-entry"] .mq-name {
position: absolute; left: 101px; top: 0; width: 160px; height: 75px;
display: flex; align-items: center; overflow: hidden; white-space: nowrap;
font: 40px var(--font-condensed); text-transform: uppercase; color: var(--canned-ink);
}
.canned-stage [data-testid="marquee-entry"] .mq-score {
position: absolute; left: 261px; top: 0; width: 66px; height: 75px;
display: flex; align-items: center; justify-content: flex-end;
font: 40px var(--font-condensed); color: var(--canned-red);
}
.canned-stage [data-testid="marquee-entry"] .mq-mark {
position: absolute; left: 101px; top: 48px; width: 160px; height: 20px;
font: 16px var(--font-small); letter-spacing: .16em; color: var(--canned-teal); display: none;
}
.canned-stage [data-testid="marquee-entry"][data-winner="1"] .mq-mark { display: block; }
.canned-stage [data-testid="marquee-entry"][data-winner="1"] .mq-name { color: var(--canned-red); }
/* The credits: the night's curtain call, on the park's own welcome board over a dimmed stage. */
.canned-stage [data-testid="credits"] {
left: 0; top: 0; width: 1672px; height: 941px;
background: color-mix(in srgb, var(--canned-ink) 74%, transparent);
}
.canned-stage [data-testid="credits"] .board {
position: absolute; left: 477px; top: 149px; width: 750px; height: 647px;
object-fit: contain; pointer-events: none;
}
.canned-stage [data-testid="credits-title"] {
position: absolute; left: 611px; top: 268px; width: 482px; height: 66px;
margin: 0; font: 60px var(--font-display); color: var(--canned-red);
text-align: center; line-height: 66px;
}
.canned-stage [data-testid="credits-items"] {
position: absolute; left: 561px; top: 360px; width: 582px; height: 330px;
margin: 0; padding: 0; list-style: none; overflow: hidden;
}
.canned-stage [data-testid="credits-item"],
.canned-stage [data-testid="credits-empty"] {
position: relative; display: flex; align-items: baseline; gap: 14px;
height: 56px; font: 32px var(--font-condensed); text-transform: uppercase;
color: var(--canned-ink); white-space: nowrap; overflow: hidden;
}
.canned-stage [data-testid="credits-item"] .cr-n { width: 46px; color: var(--canned-red); }
.canned-stage [data-testid="credits-item"] .cr-game { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.canned-stage [data-testid="credits-item"] .cr-rounds { font: 22px var(--font-small); letter-spacing: .1em; color: var(--canned-teal); }
.canned-stage [data-testid="credits-item"] .cr-winner { color: var(--canned-red); }
.canned-stage [data-testid="credits-empty"] { font: italic 30px var(--font-footer); text-transform: none; color: var(--canned-ink); }