/* BYS Holiday Arcade 2026: the shared game frame.
The Start and Finish screens, buttons, the sound toggle, the back-to-arcade button and the
"Have some fun" tick, so they match in every game. Taken from Snowbank Standoff, which now
links this file instead of keeping its own copy (BRIEF.md; README.md has each game's status).
Every game links it after tokens.css and before its own style.css:
and loads shared/frame.js for the behaviour (sound choice, leave double-tap, finish tick).
Selectors sit inside :where(), so they carry no extra weight: anything a game writes in its own
style.css wins. A game keeps only its overrides there, ideally through these variables:
--frame-backdrop what shows over the game world behind the Start and Finish card
--frame-score the size of the big Finish number (#endScore, #endTime or .frame-score)
--frame-card-max the card's width
The one exception is the sound toggle's stacking (see "Sound toggle" below), which must win. */
:root {
--frame-backdrop: rgba(0, 0, 0, .38); /* the game world, dimmed with ink */
--frame-score: 80px;
--frame-card-max: 340px;
--frame-focus: 3px solid var(--green);
--frame-z-screen: 9;
--frame-z-sound: 20;
}
/* No page-to-page view transition. A card morph between the arcade and a game was written here
but never ran (no game linked this file). Once the games linked it, Chromium aborted the
transition at random with a console error, and it was never tried on a phone. See REVIEW.md. */
:where([hidden]) { display: none !important; }
:where(.sr-only) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ------------------------------------------------------------ Start and Finish screens */
:where(.screen) {
position: absolute; inset: 0; z-index: var(--frame-z-screen);
display: flex; align-items: safe center; justify-content: center;
overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
padding: 24px 16px;
background: var(--frame-backdrop);
}
:where(.screen) :where(.card) {
position: relative; width: 100%; max-width: var(--frame-card-max);
padding: 30px 22px 26px; text-align: center;
background: var(--paper); color: var(--ink); border-radius: var(--radius-card);
}
:where(.card) :where(.kicker) { margin: 0 0 8px; font-size: 12px; color: var(--ink-dark); }
:where(.card) :where(h1, h2) { font-family: var(--font-display); font-weight: 400; margin: 0; line-height: 1; letter-spacing: -.01em; }
:where(.card) :where(h1) { font-size: clamp(38px, 11vw, 48px); }
:where(.card) :where(h2) { font-size: 30px; margin-top: 4px; }
:where(.card) :where(.tip) { margin: 14px 0 0; font-size: 16px; font-weight: 500; color: var(--ink-dark); }
:where(.card) :where(.best) { margin: 12px 0 0; font-size: 12px; color: var(--ink-dark); }
/* The Finish result */
:where(.score-big) { margin: 4px 0 6px; display: flex; flex-direction: column; align-items: center; }
:where(#endScore, #endTime, .frame-score) { font-family: var(--font-display); font-size: var(--frame-score); line-height: 1; font-variant-numeric: tabular-nums; }
:where(.score-big) :where(.pts) { font-size: 12px; color: var(--ink-dark); margin-top: 4px; }
:where(.card) :where(.stats) { font-size: 11px; color: var(--ink-dark); margin: 10px 0 0; line-height: 1.6; }
/* The host gnome on a card: body art under the head, sized by the game (see shared/gnomes/index.html). */
:where(.frame-host) { position: relative; display: block; margin: 10px auto 14px; pointer-events: none; }
:where(.frame-host) img { position: absolute; display: block; max-width: none; }
/* The host on the Start card: one of the finished figures in shared/gnomes/v2/ (November 2026). */
:where(.frame-figure) { display: block; height: 176px; width: auto; margin: 10px auto 14px; pointer-events: none; -webkit-user-drag: none; }
/* ------------------------------------------------------------ buttons */
:where(.btn) {
display: block; width: 100%; min-height: 62px;
font-family: var(--font-display); font-size: 24px; line-height: 1.1;
color: var(--white); background: var(--ink);
border: 0; border-radius: var(--radius-button); cursor: pointer;
text-decoration: none; touch-action: manipulation;
}
:where(a.btn) { display: flex; align-items: center; justify-content: center; }
:where(.btn):active { transform: translateY(1px); }
:where(.btn-secondary) {
margin-top: 12px; min-height: 52px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-sans); font-weight: 700; font-size: 17px;
color: var(--ink); background: transparent;
box-shadow: inset 0 0 0 2.5px var(--ink);
}
/* A quiet third choice under the buttons, such as "Admire the Snowflakes" */
:where(.btn-link) {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 8px; padding: 0 8px;
font-family: var(--font-sans); font-weight: 700; font-size: 16px;
color: var(--ink); background: none; border: 0; cursor: pointer;
text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
touch-action: manipulation;
}
:where(.btn, .btn-secondary, .btn-link, .sound-btn, .leave-btn):focus-visible { outline: var(--frame-focus); outline-offset: 3px; }
/* ------------------------------------------------------------ icons (masks, so they take their button's colour) */
:where(.icon) { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
:where(.icon-sound) { --icon: url("ui/icon-sound-off.svg"); }
:where(.sound-btn[aria-pressed="true"]) :where(.icon-sound) { --icon: url("ui/icon-sound-on.svg"); }
:where(.icon-back) { --icon: url("ui/icon-back.svg"); }
/* ------------------------------------------------------------ sound toggle, top right */
:where(.sound-btn) {
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 8px); right: 10px;
width: 48px; height: 48px;
display: grid; place-items: center;
border: 0; border-radius: var(--radius-button);
background: transparent; color: var(--ink); cursor: pointer;
touch-action: manipulation;
}
/* Always above the Start and Finish screens, so it can be tapped there. Written with real weight
(not :where) on purpose: it must beat a game's own z-index until that copy is removed. */
html .sound-btn { z-index: var(--frame-z-sound); }
/* ------------------------------------------------------------ back to the arcade during play */
/* First tap shows "Tap again to leave"; a second tap within 3 seconds follows the link (frame.js). */
:where(.leave-btn) {
position: relative; flex: none; display: grid; place-items: center;
width: 44px; height: 44px;
border-radius: var(--radius-button); color: var(--ink); text-decoration: none;
pointer-events: auto; touch-action: manipulation;
}
:where(.leave-btn) :where(.leave-text) {
display: none; position: absolute; z-index: 9; left: 0; top: calc(100% + 6px);
padding: 6px 10px; white-space: nowrap; border-radius: var(--radius-button);
background: var(--ink); color: var(--white);
font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
:where(.leave-btn.confirm) { background: var(--ink); color: var(--white); }
:where(.leave-btn.confirm) :where(.leave-text) { display: block; }
/* ------------------------------------------------------------ "Have some fun" with its tick */
:where(.todo) { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 20px 0; font-size: 24px; font-weight: 700; }
:where(.tickbox) { position: relative; flex: none; width: 40px; height: 40px; }
:where(.tickbox) img { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* the marker tick is revealed left to right, like it's being drawn */
:where(.todo) :where(.tick) { clip-path: inset(0 100% 0 0); }
:where(.todo.ticked) :where(.tick) { animation: frame-draw .45s .35s cubic-bezier(.3, .7, .3, 1) forwards; }
@keyframes frame-draw { to { clip-path: inset(0 0 0 0); } }
/* ------------------------------------------------------------ the Finish stamp */
/* BYSFrame.finish() adds .frame-stamp to the Finish card (or Snip's finish strip): it lands like a
rubber stamp, a touch big and tilted, then settles. One beat, the same in every game. */
:where(.frame-stamp) { animation: frame-stamp .34s cubic-bezier(.2, 1.35, .4, 1) both; transform-origin: 50% 40%; }
@keyframes frame-stamp {
from { transform: scale(1.14) rotate(-2.5deg); opacity: 0; }
55% { opacity: 1; }
to { transform: none; opacity: 1; }
}
/* ------------------------------------------------------------ high scores (Snowbank Standoff, Cookie Rush) */
:where(.hs-form) { margin: 18px 0 0; padding: 14px 14px 12px; background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-button); }
:where(.hs-new) { margin: 0 0 6px; font-size: 13px; }
:where(.hs-label) { display: block; font-size: 15px; font-weight: 600; margin: 0 0 8px; }
:where(.hs-row) { display: flex; gap: 10px; justify-content: center; }
:where(.hs-input) {
width: 132px; min-height: 52px; padding: 0 8px;
font-family: var(--font-mono); font-weight: 600; font-size: 26px; letter-spacing: .35em; text-indent: .35em;
text-align: center; text-transform: uppercase;
color: var(--ink); background: var(--paper);
border: 2.5px solid var(--ink); border-radius: var(--radius-button);
-webkit-user-select: text; user-select: text; touch-action: manipulation;
}
:where(.hs-input):focus { outline: none; box-shadow: 0 0 0 3px var(--green); }
:where(.hs-input)::placeholder { color: var(--ink-mid); }
:where(.hs-save) { width: auto; min-height: 52px; padding: 0 20px; font-size: 20px; }
:where(.hs-save):disabled { opacity: .5; cursor: progress; }
:where(.hs-err) { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--ink-dark); }
:where(.hs-share) { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin: 8px 0 0; font-size: 15px; font-weight: 600; cursor: pointer; }
:where(.hs-share) input { width: 22px; height: 22px; margin: 0; accent-color: var(--green); cursor: pointer; }
:where(.hs) { margin: 18px 0 0; }
:where(.hs-tabs) { display: flex; justify-content: center; gap: 6px; margin: 0 0 8px; }
:where(.hs-tabs) button {
min-height: 44px; padding: 0 12px;
font-family: var(--font-mono); font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--ink-dark); background: transparent; border: 2px solid transparent; border-radius: var(--radius-button); cursor: pointer;
}
:where(.hs-tabs) button[aria-selected="true"] { color: var(--ink); border-color: var(--ink); }
:where(.hs-tabs) button:focus-visible, :where(.hs-share) input:focus-visible { outline: var(--frame-focus); outline-offset: 2px; }
:where(.hs-title) { margin: 0 0 6px; font-size: 11px; color: var(--ink-dark); }
/* About five rows show; the rest scroll inside the list, so Play Again stays near the fold. */
:where(.hs-list) {
list-style: none; margin: 0 auto; padding: 0; max-width: 220px;
max-height: 150px; overflow-y: auto; overscroll-behavior: contain;
font-family: var(--font-mono); font-weight: 600; font-size: 16px;
}
:where(.hs-list) li { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; padding: 3px 8px; border-radius: var(--radius-button); text-align: left; }
:where(.hs-list) li .r { color: var(--ink-dark); }
:where(.hs-list) li .n { letter-spacing: .2em; }
:where(.hs-list) li.is-new { background: var(--green-lightest); box-shadow: inset 3px 0 0 var(--green); }
:where(.hs-list) li.empty { display: block; text-align: center; color: var(--ink-dark); font-family: var(--font-sans); font-weight: 500; font-size: 14px; }
/* ------------------------------------------------------------ the Finish celebration (shared/celebrate.js) */
:where(.frame-burst) { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }
/* ------------------------------------------------------------ short phones (375 x 667 and below) */
@media (max-height: 700px) {
:root { --frame-score: 56px; }
:where(.screen) { padding: 16px 12px; }
:where(.screen) :where(.card) { padding: 22px 18px 20px; }
:where(.card) :where(h1) { font-size: clamp(34px, 10vw, 42px); }
:where(.todo) { margin: 14px 0; }
:where(.frame-figure) { height: 140px; margin: 6px auto 10px; }
:where(.hs-form, .hs) { margin-top: 12px; }
:where(.hs-list) { max-height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
:where(.frame-stamp) { animation: none; }
:where(.todo.ticked) :where(.tick) { animation: none; clip-path: none; }
}