/* Hallmark · shape: Workbench (a game page: the game is the page) · genre: playful · theme: Hum (deal 1/3, seed fizzmini-candy-jar-tiny-59f4·7d437b13·2026-10-26·r0) · job: try · draw: 6eb34a
 * hero: none (the game fills the screen) · nav: slab bar · footer: none · imagery: the product · signature: the game itself in a phone of paper
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P3 H5 E4 S4 R5 V3 · weakest: P, a player page should not argue; it gets out of the way */
@import url("./tokens.css?v=20261027103229");
@import url("./base.css?v=20261027103229");

@font-face { font-family: "Chillax"; src: url("/assets/fonts/chillax-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root { --bar: 60px; --phone-edge: var(--color-ink); }
html, body { height: 100%; }
body { display: grid; grid-template-rows: var(--bar) minmax(0, 1fr); background: var(--color-paper-2); font-weight: 600; }
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-md); padding-inline: var(--space-lg); background: var(--color-paper); box-shadow: 0 1px 0 var(--color-rule); }
.bar__back { display: inline-flex; align-items: center; gap: var(--space-2xs); justify-self: start; min-height: 44px; padding-right: var(--space-sm); text-decoration: none; }
.bar__back svg { width: 22px; height: 22px; }
.bar__name { font-size: var(--text-lg); max-width: none; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__tiktok { justify-self: end; color: var(--color-accent-2); text-underline-offset: 0.2em; font-size: var(--text-sm); }
.stage { display: grid; justify-items: center; align-content: center; gap: var(--space-sm); padding: var(--space-md); min-height: 0; }
.phone { height: min(calc(100dvh - var(--bar) - 72px), 940px); aspect-ratio: 9 / 19.5; max-width: 100%; padding: var(--space-xs); border-radius: 44px; background: var(--phone-edge); box-shadow: var(--shadow-card); }
.phone { position: relative; }
.phone iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; border-radius: 34px; background: transparent; transition: opacity var(--dur-long) var(--ease-snap); }
.js .phone iframe:not(.is-ready) { opacity: 0; }
.opening { position: absolute; inset: var(--space-xs); display: grid; place-content: center; justify-items: center; gap: var(--space-md); border-radius: 34px; background: var(--color-paper); color: var(--color-ink); }
.opening img { width: 120px; height: 120px; border-radius: 28px; box-shadow: var(--shadow-card); animation: unwrap 1.4s var(--ease-in-out) infinite alternate; }
.opening p { font-size: var(--text-md); }
@keyframes unwrap { from { transform: translateY(-6px) rotate(-4deg); } to { transform: translateY(6px) rotate(4deg); } }
.stage__note { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.turn { display: none; }
@media (max-height: 54rem) and (min-width: 40.01rem) {
  .stage { padding: var(--space-sm); }
  .phone { height: calc(100dvh - var(--bar) - var(--space-lg)); }
  .stage__note { display: none; }
}
/* a phone held sideways: the games are portrait, so ask for upright instead of shrinking the game to a stamp */
@media (orientation: landscape) and (max-height: 32rem) {
  .phone, .stage__note { display: none; }
  .turn { display: grid; justify-items: center; gap: var(--space-sm); text-align: center; }
  .turn svg { width: 56px; height: 56px; color: var(--color-ink); }
}
@media (max-width: 40rem) {
  :root { --bar: 52px; }
  .bar { padding-inline: var(--space-sm); grid-template-columns: auto minmax(0, 1fr); }
  .bar__back span, .bar__tiktok { display: none; }
  .stage { padding: 0; }
  .phone { height: calc(100dvh - var(--bar)); width: 100%; aspect-ratio: auto; padding: 0; border-radius: 0; box-shadow: none; }
  .phone iframe, .opening { border-radius: 0; inset: 0; }
  .stage__note { display: none; }
}