/* Weather. The Game. The screen keeps its own palette whatever the device's
   theme: it is a game screen, ink on paper with one coral. Everything inside
   is sized in cqw, hundredths of the screen's width, so the layers scale with
   the canvas on any phone. Text is never set below 3.8cqw (about 14px on a
   phone); the pixel face is kept for the large words. */
@font-face { font-family: 'Silkscreen'; font-weight: 400; font-display: swap; src: url(/static/weather-game/silkscreen-400.woff2) format('woff2'); }
@font-face { font-family: 'Silkscreen'; font-weight: 700; font-display: swap; src: url(/static/weather-game/silkscreen-700.woff2) format('woff2'); }

:root {
  --pixel: 'Silkscreen', ui-monospace, Menlo, monospace;
  --sans: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif);
}
/* The game's own palette, on the game alone (.app, which holds the screen and
   every layer): the page around it follows the reader's theme like the rest
   of the site (12 Oct 2026), and these names must not repaint the header. */
.app {
  --paper: #f7f5f0; --ink: #17150f; --ink-2: #57524a; --ink-3: #6f685d;
  --coral: #e83d1a; --coral-strong: #cc3518; --wall: #e4dccd; --line: #d9d3c6; --wash: rgba(232, 61, 26, .10);
  --frame: #17150f;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The page is the Games layout (templates/weather_game.html): the site's
   header, then the game's screen centred in what is left, on the site's page.
   Nothing scrolls; app.js sizes the screen to .app. */
html, body { margin: 0; height: 100%; background: var(--page, #ffffff); }
body.wg-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
/* A game, not a page to read closely: a press anywhere selects nothing, opens
   no magnifier or callout, and a double tap doesn't zoom. app.js cancels the
   touches on the view and the pad as well, which iOS needs for a held finger. */
body.wg-page { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.wg-page * { -webkit-touch-callout: none; }
.screen, .site-header { touch-action: manipulation; }
body { font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
.app { position: relative; flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
/* The screen is the whole space under the header. The view spans its full
   width (app.js: extra width is more of the street); the buttons and the
   text screens keep a phone's column, --colw, so nothing sprawls on a desktop.
   --u is a hundredth of that column, as cqw is inside the layers. */
.screen { position: relative; overflow: hidden; background: var(--paper); width: 288px; height: 576px; display: flex; flex-direction: column; --colw: 288px; --lw: 288px; --u: 2.88px; }
#game { display: block; flex: 0 0 auto; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.pad { flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) max(calc(var(--u) * 4), calc((100% - var(--colw)) / 2 + var(--u) * 4)) calc(var(--u) * 3 + env(safe-area-inset-bottom, 0px)); background: var(--frame); touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pad-btn { font: 700 calc(var(--u) * 7)/1 var(--pixel); color: var(--paper); background: #2b2820; border: 2px solid #4a463c; border-radius: 4px; touch-action: none; cursor: pointer; padding: 0; }
.pad-btn.on { background: var(--coral-strong); border-color: var(--coral-strong); }
.pad-jump { font-size: calc(var(--u) * 6); letter-spacing: .06em; background: var(--coral-strong); border-color: var(--ink); }
.pad-jump.on { background: var(--coral); }
.pad-or { display: none; }
/* A touch screen: ◀ and ▶ at the screen's edges, JUMP in the middle, with
   a clear gap either side so a thumb can't land on the wrong one. The view
   also plays (app.js): hold beside the climber to walk, tap to jump. */
@media (hover: none), (pointer: coarse) {
  .pad { grid-template-columns: calc(var(--colw) * .2) minmax(0, 1fr) calc(var(--colw) * .36) minmax(0, 1fr) calc(var(--colw) * .2);
         column-gap: 0; padding-inline: calc(var(--u) * 4); }
  #pad-left { grid-area: 1 / 1; }
  #pad-jump { grid-area: 1 / 3; }
  #pad-right { grid-area: 1 / 5; }
  .pad-jump { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); padding: 0 calc(var(--u) * 1.5); }
  .pad-or { display: block; font: 600 calc(var(--u) * 3.4)/1.15 var(--sans); letter-spacing: 0; text-wrap: balance; }
}
.stop { position: absolute; top: 0; right: 0; width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); border: 0; background: transparent; font: 400 calc(var(--u) * 7)/1 var(--pixel); color: var(--ink); cursor: pointer; z-index: 2; touch-action: manipulation; }

.layer { position: absolute; top: 0; bottom: 0; left: 50%; width: var(--lw); transform: translateX(-50%); container-type: inline-size; z-index: 3; background: var(--paper); display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 5) calc(var(--u) * 5) calc(var(--u) * 4); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.layer p { margin: 0; }
.brand { font: 700 4.4cqw/1 var(--pixel); letter-spacing: .04em; }
.eyebrow { font-size: 4.2cqw; line-height: 1.3; color: var(--ink-2); }

.loading, .error { justify-content: center; align-items: center; text-align: center; gap: calc(var(--u) * 5); }
.loading-msg, .error-msg { font-size: 4.4cqw; color: var(--ink-2); max-width: 70cqw; }

/* First screen: the weather, then the invitation */
.in-top { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.in-alert { font-size: 3.8cqw; font-weight: 700; line-height: 1.1; color: var(--coral-strong); border: 1px solid currentColor; border-radius: 2px; padding: 1cqw 1.6cqw; }
/* The way back to the rest of the site is the site's header, above the game. */
/* The keys, said only where there is a keyboard to press them. */
.in-date { font-size: 4.2cqw; line-height: 1.3; color: var(--ink-2); margin-top: -1cqw !important; }
.in-now { display: flex; align-items: center; gap: 4cqw; margin-top: 2cqw; }
.in-icon { width: 15cqw; height: 15cqw; image-rendering: pixelated; image-rendering: crisp-edges; }
.in-temps { display: flex; align-items: baseline; gap: 3cqw; font-variant-numeric: tabular-nums; }
.in-hi { font-size: 15cqw; font-weight: 800; line-height: .9; letter-spacing: -.03em; }
.in-lo { font-size: 7.4cqw; font-weight: 600; color: var(--ink-3); }
.in-sum { font-size: 5cqw; line-height: 1.3; }
.in-floors { list-style: none; padding: 1.8cqw 0; margin: 1cqw 0 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-block: 2px solid var(--ink); text-align: center; }
.in-floors li { display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; min-width: 0; }
.in-floors .h { font-size: 3.8cqw; font-weight: 600; line-height: 1; color: var(--ink-2); }
.in-floors canvas { width: 7.2cqw; height: 7.2cqw; image-rendering: pixelated; image-rendering: crisp-edges; }
.in-floors .t { font-size: 4.8cqw; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.intro { background: transparent; padding: 0; gap: 0; }
.in-panel { background: var(--paper); display: flex; flex-direction: column; gap: 2.4cqw; transition: transform .4s cubic-bezier(.55, 0, .75, .2); }
.in-weather { padding: 5cqw 5cqw 3.6cqw; border-bottom: 2px solid var(--ink); }
.in-invite { padding: 3.6cqw 5cqw 4cqw; border-top: 2px solid var(--ink); }
.in-window { flex: 1 1 auto; min-height: 0; position: relative; }
.in-tag { position: absolute; left: 3cqw; bottom: 2.4cqw; margin: 0; font-size: 4cqw; font-weight: 600; line-height: 1; background: var(--paper); border: 2px solid var(--ink); padding: 1.6cqw 2.2cqw; }
.in-tag:empty { display: none; }
.intro.leaving .in-weather { transform: translateY(-110%); }
.intro.leaving .in-invite { transform: translateY(110%); }
.intro.leaving .in-tag { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .in-panel { transition: none; } }
.in-call { font: 700 5.2cqw/1.1 var(--pixel); white-space: nowrap; }
/* an arcade card: each sprite and its word, on one line */
.in-legend { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: center; }
.in-legend li { display: flex; align-items: center; gap: 2.4cqw; font-size: 4.8cqw; font-weight: 700; line-height: 1; }
.in-legend canvas { height: 7cqw; width: auto; image-rendering: pixelated; image-rendering: crisp-edges; }
.in-legend #lg-lives { height: 9cqw; }
.in-keys, .in-touch { display: none; font-size: 3.8cqw; color: var(--ink-2); text-align: center; }
@media (hover: hover) and (pointer: fine) { .in-keys { display: block; } }
@media (hover: none), (pointer: coarse) { .in-touch { display: block; } }
.in-twist { font-size: 4.6cqw; line-height: 1.35; position: relative; padding-left: 4.6cqw; }
.in-twist::before { content: ""; position: absolute; left: 0; top: 1.5cqw; width: 2.4cqw; height: 2.4cqw; background: var(--coral); }
.in-best { font-size: 4.2cqw; line-height: 1.3; color: var(--ink-2); }
.btn-play { font: 700 5.6cqw/1 var(--pixel); letter-spacing: .06em; background: var(--coral-strong); color: var(--paper); border: 2px solid var(--ink); border-radius: 3px; min-height: 14cqw; box-shadow: 0 1.2cqw 0 var(--ink); cursor: pointer; margin: 1cqw 0 1.2cqw; padding: 0 4cqw; touch-action: manipulation; }
.btn-play:active { transform: translateY(1cqw); box-shadow: 0 .2cqw 0 var(--ink); }
.link { font-family: var(--sans); font-size: 4.4cqw; line-height: 1.2; color: var(--ink-2); background: none; border: 0; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; padding: 2cqw; align-self: center; }

/* Result: your climb today, and sharing it */
/* The result: the building where the climb ended, and the score under it. */
.result { background: transparent; padding: 0; gap: 0; justify-content: flex-end; }
.rs-panel { background: var(--paper); border-top: 2px solid var(--ink); display: flex; flex-direction: column; gap: 3cqw; padding: 5cqw 5cqw 4cqw; }
.rs-head { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 3cqw; font-variant-numeric: tabular-nums; }
.rs-num { font-size: 17cqw; font-weight: 800; line-height: .95; letter-spacing: -.03em; }
.rs-unit { font-size: 6.4cqw; font-weight: 600; color: var(--ink-3); }
.rs-sub { font-size: 5cqw; line-height: 1.35; margin-bottom: 2cqw !important; }
.rs-note { font-size: 4.2cqw; color: var(--coral-strong); }
.rs-links { display: flex; justify-content: center; gap: 6cqw; }
.share-msg { font-size: 4.2cqw; color: var(--ink-2); text-align: center; }
.share-msg:empty { display: none; }
.rs-next { font-size: 4.2cqw; color: var(--ink-2); text-align: center; font-variant-numeric: tabular-nums; }

.dialog { left: 0; width: 100%; transform: none; container-type: normal; background: rgba(23, 21, 15, .55); justify-content: center; align-items: center; }
.dialog-box { container-type: inline-size; background: var(--paper); border: 2px solid var(--ink); padding: calc(var(--u) * 5); width: calc(var(--colw) * .8); display: grid; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 4.6); line-height: 1.35; }
.dialog-h { font: 700 calc(var(--u) * 5)/1.1 var(--pixel); }

@media (prefers-reduced-motion: reduce) {
  .btn-play:active { transform: none; }
}