/* Hallmark · shape: app screen · genre: playful · theme: Hum (deal 1/3, seed virtual-educational-escape-rooms-4d99·99df24ef·2026-11-05·r0)
 * nav: top bar with room, team and clock · signature: the desk you go through · states: loading, not found, intro, playing, locked out, won, lost
 * axes: light/rounded-sans/chromatic-yellow · posture: full-palette · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: H, a scene holds many equal objects; tags and badges appear only where they carry state */
/* Hallmark · dismissed F4 · .btn is the card-stock secondary and only .btn--primary is filled pear, one per view */
@import url("./tokens.css");
@import url("./tokens-app.css");
@import url("./base.css");
@import url("./paper.css");
@import url("./room.css");
@import url("./desktop.css");
@import url("./puzzles.css");
@import url("./inbox.css");

:root { --control-h: 44px; }

.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-xs) var(--space-md); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); position: relative; z-index: var(--z-sticky); }
.topbar__brand { display: block; width: 40px; height: 40px; border-radius: var(--radius-input); }
.topbar__brand img { width: 40px; height: 40px; }
.topbar__brand:hover { opacity: 0.8; }
.topbar__title { flex: 1; min-width: 10rem; }
.topbar__title h1 { max-width: none; font-size: var(--text-lg); line-height: 1.2; letter-spacing: 0; }
.topbar__title p { margin: 0; }
.topbar__meta { font-size: var(--text-sm); color: var(--color-muted); }

.clock { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-md); border-radius: var(--radius-stock); background: var(--color-paper-3); font-size: var(--text-xl); font-weight: 600; }
.clock.is-low { background: var(--color-accent-3); color: var(--color-ink); }
.clock.is-hidden { display: none; }

.play { display: flex; flex-direction: column; min-height: 100dvh; }
.play__main { flex: 1; display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); }
.play__main { --chrome: 92px; }
.play__main:has(.inventory:not([hidden])) { --chrome: 164px; }
.stage-wrap { width: min(100%, calc((100dvh - var(--chrome)) * 16 / 9)); min-width: min(100%, 44rem); margin-inline: auto; }
.pan-hint { display: none; }

.inventory { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); width: min(100%, calc((100dvh - var(--chrome)) * 16 / 9)); margin-inline: auto; }
.inventory h2 { font-size: var(--text-md); letter-spacing: 0; }
.inventory__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.inventory__item { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-2xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-stock); background: var(--color-card); color: var(--color-ink); cursor: pointer; }
.inventory__item:hover { border-color: var(--color-ink); }
.inventory__item:active { translate: 0 1px; }
.inventory__item img { width: 32px; height: 32px; }

.modal { width: min(44rem, 94vw); max-height: 92dvh; padding: var(--space-md) var(--space-lg) var(--space-lg); border: 0; border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-paper); color: var(--color-ink); box-shadow: var(--shadow-card); overflow-y: auto; }
.modal::backdrop { background: color-mix(in oklab, var(--color-ink) 55%, transparent); }
.modal--paused[open] { display: grid; gap: var(--space-xs); }
.modal--paused h2 { max-width: none; font-size: var(--text-2xl); outline: none; }
.topbar__offline { font-size: var(--text-sm); font-weight: 600; }
.modal__bar { display: flex; justify-content: flex-end; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.modal__back { margin-right: auto; }
.modal__body { display: grid; gap: var(--space-md); justify-items: stretch; }
.modal__body > .btn { justify-self: start; }
.modal__body h2 { max-width: none; font-size: var(--text-2xl); outline: none; }
.modal__body h3 { font-size: var(--text-lg); letter-spacing: 0; }

.sheet { display: grid; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-stock); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.sheet--desk-sticky { background: var(--grain), var(--fibre), var(--color-accent); }
.sheet.is-flipped { background: var(--grain), var(--fibre), var(--color-paper-3); }

.block-image { margin: 0; }
.block-image img { width: 100%; border-radius: var(--radius-input); }
.block-image figcaption, .block-audio figcaption, .block-code figcaption { font-size: var(--text-sm); color: var(--color-muted); }
.block-audio { display: grid; gap: var(--space-xs); margin: 0; }
.block-audio audio { width: 100%; }
.block-code { margin: 0; }
.block-code pre { margin: var(--space-2xs) 0 0; padding: var(--space-md); overflow-x: auto; border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); font: var(--text-sm)/1.5 var(--font-outlier); }
.block-embed { width: 100%; min-height: 20rem; border: 0; border-radius: var(--radius-input); }
.block-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
caption { margin-bottom: var(--space-xs); text-align: left; color: var(--color-muted); font-size: var(--text-sm); }
th { text-align: left; font-weight: 600; font-size: var(--text-sm); color: var(--color-ink-2); }
th, td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: 1px solid var(--color-rule); }
td.num { font-variant-numeric: tabular-nums; }
.sheet td { font-family: var(--font-ipa); }

.nested { display: flex; align-items: center; gap: var(--space-sm); width: 100%; min-height: 56px; padding: var(--space-xs) var(--space-sm); border: 1px solid var(--color-rule); border-radius: var(--radius-stock); background: var(--color-paper); color: var(--color-ink); font-weight: 600; text-align: left; cursor: pointer; transition: translate var(--dur-micro) var(--ease-snap); }
.nested img { width: 48px; height: 48px; }
.nested:hover { border-color: var(--color-ink); translate: 0 -1px; }
.nested:active { translate: 0 1px; }

.notice { display: grid; gap: var(--space-2xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-stock); background: var(--color-sugar); }
.solved { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-stock); background: var(--color-mint); font-weight: 600; }

/* Intro, finish and error screens */
.screen { display: grid; justify-items: center; align-content: start; min-height: 100dvh; padding: var(--space-xl) var(--space-md); }
.screen__sheet { display: grid; gap: var(--space-md); width: min(100%, 44rem); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); }
.screen__sheet h1 { max-width: none; font-size: var(--text-3xl); outline: none; }
.screen__sheet > .btn { justify-self: start; }
.sample { justify-self: start; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-3); font-size: var(--text-sm); }
.intro-form { display: grid; gap: var(--space-2xs); }
.intro-form .btn { justify-self: start; margin-top: var(--space-sm); }
.saved { display: grid; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid var(--color-rule); }
.saved h2 { font-size: var(--text-lg); letter-spacing: 0; }
.saved__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.saved__row span { flex: 1; min-width: 8rem; }
.banner { display: inline-flex; align-items: center; justify-self: start; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-stock); font-size: var(--text-lg); font-weight: 600; }
.banner--won { background: var(--color-mint); }
.banner--lost { background: var(--color-accent-3); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); margin: 0; }
.stats dt { font-size: var(--text-sm); color: var(--color-muted); }
.stats dd { font-variant-numeric: tabular-nums; margin: 0; font-size: var(--text-2xl); font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }

@media (max-width: 40rem) {
  .screen__sheet { padding: var(--space-lg) var(--space-md); }
  .play__main { padding: var(--space-xs); }
  .stage-wrap { min-width: 100%; overflow-x: auto; border-radius: var(--radius-card); }
  .stage { min-width: 46rem; }
  .pan-hint { display: block; font-size: var(--text-sm); color: var(--color-muted); text-align: center; }
  .modal { padding: var(--space-sm) var(--space-md) var(--space-md); }
  .sheet { padding: var(--space-md); }
  .topbar [aria-pressed] { display: none; }
}