/* One screen, no scrolling.
   Header: brand and GitHub links. Left: the office block (bar, map, how to play, and a bottom bar with the
   gossip line and the crew), pushed against the panel. Right: the pitch, full height. */
:root {
  --sky-top: #FFE8D3;
  --sky-low: #E7DFF5;
  --ink: #332C4A;
  --ink-soft: #5E5878;
  --accent: #D9663F;
  --paper: #FFF7EE;
  --paper-2: #FBEADB;
  --paper-edge: #E3C7B3;
  --slate: #646083;
  --live: #3E9E6E;
  --display: "Fredoka", "Nunito", system-ui, sans-serif;
  --body: "Nunito", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }


html { background: var(--sky-low); }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; background: radial-gradient(120% 100% at 30% 10%, var(--sky-top), var(--sky-low)); overflow: hidden; }
/* stay hidden until fonts, the map and the layout are ready, then fade in once */
.app { transition-property: opacity, translate; transition-duration: .5s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
body.booting .app { opacity: 0; translate: 0 8px; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
[hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; fill: currentColor; flex: none; }
kbd { font: 700 11px var(--body); color: var(--ink); background: var(--paper); border-radius: 5px; min-width: 20px; padding: 1px 6px; text-align: center; box-shadow: 0 2px 0 var(--paper-edge); display: inline-block; }

.app { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 16px; padding-block: max(14px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-bottom, 0px)); padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* header */
.head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.head .links { justify-self: end; }
.brand { justify-self: start; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px 0 6px; border-radius: 999px; font: 700 26px var(--display); letter-spacing: -.01em; transition: background-color .15s; }
.brand:hover { background: rgba(255, 247, 238, .7); }
.brand img { width: 40px; height: 40px; image-rendering: pixelated; }
.links { display: flex; gap: 8px; }
.gh { display: inline-flex; align-items: stretch; min-height: 38px; border-radius: 999px; background: var(--paper); box-shadow: 0 3px 0 var(--paper-edge); font: 600 14px/1 var(--display); overflow: hidden; transition-property: translate, box-shadow, scale; transition-duration: .15s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.gh:hover { translate: 0 -1px; box-shadow: 0 4px 0 var(--paper-edge); }
.gh:active { scale: .96; }
.gh .lbl { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; }
.gh .count { display: inline-flex; align-items: center; padding: 0 12px; border-left: 1px solid var(--paper-edge); background: var(--paper-2); font-variant-numeric: tabular-nums; }
.gh .starI { color: #E0A21B; }

/* middle */
.main { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr); gap: 20px; }

/* the office: bar, map and how-to line up with the map, which sits against the panel */
.office { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; }
.bar { display: flex; align-items: center; gap: 12px; }
.stats { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; padding: 2px 2px 5px; margin: -2px -2px -5px; } /* room so the chips' edges and shadows never get clipped */
.chip { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 999px; background: var(--paper); box-shadow: 0 3px 0 var(--paper-edge); font-size: 14px; color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }

.chip b { color: var(--ink); font-weight: 700; }
.chip.open { color: var(--live); font: 600 14px var(--display); gap: 8px; }
.chip.open::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(62, 158, 110, .2); }
.seg { margin-left: auto; flex: none; display: inline-flex; align-items: center; height: 38px; padding: 3px; border-radius: 999px; background: var(--paper); box-shadow: 0 3px 0 var(--paper-edge); }
.seg button { border: 0; background: transparent; color: var(--ink-soft); font: 600 14px var(--display); border-radius: 999px; min-width: 52px; min-height: 32px; padding: 0 14px; cursor: pointer; transition-property: background-color, color, scale; transition-duration: .2s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.seg button:active { scale: .96; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.fit { display: contents; }
.mapbox { container-type: size; min-height: 0; display: grid; place-items: center; }
/* the map always fits the space left between the bars; 9px margin leaves room for its frame */
.mapfit.real3d #office { visibility: hidden; }
/* zoom: the 2D map scales inside the frame; the 3D view zooms its camera */
.mapfit.zoomed { clip-path: inset(-9px round 25px); }
.mapfit.zoomed #office { cursor: grab; }
.mapfit.grabbing #office { cursor: grabbing; }
#office { transform-origin: 0 0; }
#office, .mapfit .ap3 { transition: opacity .22s cubic-bezier(.2, 0, 0, 1); }
.mapfit.fading #office, .mapfit.fading .ap3 { opacity: 0; }
.zoom { position: absolute; right: 12px; bottom: 12px; z-index: 4; display: grid; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 247, 238, .92); box-shadow: 0 3px 0 var(--paper-edge); }
.zoom button { width: 32px; height: 32px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); font: 700 18px/1 var(--display); cursor: pointer; display: grid; place-items: center; transition-property: background-color, scale; transition-duration: .15s; }
.zoom button:hover { background: var(--paper-2); }
.zoom button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.zoom .rot { display: none; }
.mapfit.real3d .zoom .rot { display: grid; }
.zoom button:active { scale: .92; }
.zoom svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.loading3d { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 4; display: flex; align-items: center; gap: 10px; background: var(--paper); color: var(--ink); font: 600 15px var(--display); padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 0 var(--paper-edge), 0 20px 40px -20px rgba(80, 50, 90, .45); font-variant-numeric: tabular-nums; transition-property: opacity, scale; transition-duration: .2s; }
.loading3d[hidden] { display: flex !important; opacity: 0; scale: .9; pointer-events: none; }
.loading3d .bar { width: 80px; height: 6px; border-radius: 999px; background: var(--paper-2); overflow: hidden; }
.loading3d .bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--accent); border-radius: inherit; transition: width .2s; }
.mapfit { position: relative; width: min(100cqw - 18px, (100cqh - 18px) * 1.5556); margin: 9px; }

/* toasts on the map: the invitation sits in the middle, the rest at the bottom */
.hint { position: absolute; left: 50%; bottom: 12px; translate: -50% 0; z-index: 3; margin: 0; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 0 #1D1830; transition-property: opacity, translate; transition-duration: .2s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.hint.off { opacity: 0; translate: -50% 6px; pointer-events: none; }
.hint kbd { background: var(--paper); box-shadow: none; margin: 0 1px; }
/* the invitation to play sits in the middle of the header until you walk in */
.invite { justify-self: center; display: flex; align-items: center; gap: 10px; min-width: 0; background: var(--accent); color: #fff; padding: 7px 16px 7px 14px; border-radius: 999px; box-shadow: 0 4px 0 #A6472A; white-space: nowrap; pointer-events: none; animation: nudge 2.6s ease-in-out infinite; transition-property: opacity, scale; transition-duration: .25s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.invite b { font: 700 15px/1.1 var(--display); }
.invite span { font-weight: 600; font-size: 13px; opacity: .92; overflow: hidden; text-overflow: ellipsis; }
.invite kbd { background: #fff; box-shadow: none; margin: 0 1px; color: var(--accent); }
.invite.gone { opacity: 0; scale: .9; animation: none; }
@keyframes nudge { 0%, 70%, 100% { translate: 0 0; } 80% { translate: 0 -4px; } 90% { translate: 0 0; } }


/* office view */
.ap-view { position: relative; width: 100%; aspect-ratio: 1792 / 1152; perspective: 1800px; }
.ap-view:not(.tilt) { cursor: pointer; }
.ap-map { position: absolute; inset: 0; background-size: 100% 100%; image-rendering: pixelated; border-radius: 16px; box-shadow: 0 0 0 9px var(--slate), 0 36px 46px -28px rgba(80, 50, 90, .5); transform-style: preserve-3d; transform-origin: 50% 50%; transition: transform .7s cubic-bezier(.2, 0, 0, 1); }
.ap-view.tilt .ap-map { transform: rotateX(48deg) scale(.88); } /* 3D only tilts the map; nothing around it moves */
.ap-actor { position: absolute; aspect-ratio: 48 / 72; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.2, 0, 0, 1); }
.ap-view.tilt .ap-actor { transform: rotateX(-50deg); }
.ap-sp { position: absolute; inset: 0; background-size: 400% 500%; image-rendering: pixelated; }
.ap-ring { position: absolute; left: 16%; right: 16%; bottom: -3%; height: 9%; border-radius: 50%; background: var(--c); opacity: .5; }
.ap-tag { position: absolute; bottom: 100%; left: 50%; translate: -50% 0; white-space: nowrap; font: 700 var(--tag, 11px)/1.45 var(--body); padding: 0 .6em; border-radius: 999px; background: rgba(255, 250, 244, .94); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--c); }
.ap-actor.lift .ap-tag { bottom: calc(100% + var(--tag, 11px) * 1.55); }
.ap-actor.lift .ap-bubble { bottom: calc(100% + var(--tag, 11px) * 3.45); }
.ap-actor.me .ap-tag { background: var(--accent); color: #fff; box-shadow: none; }
.ap-actor.me .ap-ring { opacity: .8; animation: me 1.4s ease-in-out infinite; }
@keyframes me { 50% { scale: 1.25; opacity: .45; } }
.ap-bubble { position: absolute; bottom: calc(100% + var(--tag, 11px) * 1.9); left: 50%; translate: -50% 0; background: #fff; border-radius: 10px; padding: 6px 8px; box-shadow: 0 0 0 1.5px var(--ink), 0 3px 0 rgba(51, 44, 74, .2); opacity: 0; scale: .5; transition-property: opacity, scale; transition-duration: .2s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.ap-bubble.on { opacity: 1; scale: 1; }
/* a spoken line (press E next to an agent) replaces the typing dots */
.ap-bubble .say { display: none; }
.ap-bubble.text { padding: 7px 11px; z-index: 5; }
.ap-bubble.text i { display: none; }
.ap-bubble.text .say { display: block; width: max-content; max-width: 15em; white-space: normal; text-align: center; font: 700 calc(var(--tag, 11px) + 1px)/1.3 var(--body); color: var(--ink); }
/* while the 3D office builds, the map dims behind the progress pill and the invitation steps aside */
#office { transition-property: opacity, filter; }
.mapfit.building #office { opacity: .45; filter: blur(3px) saturate(.8); }
.mapfit.building .hint { opacity: 0; pointer-events: none; }
.ap-bubble i, .dots { display: block; width: 24px; height: 6px; background: url(office/ui/typing.png) 0 0 / 72px 6px; image-rendering: pixelated; animation: dots .9s steps(3) infinite; }
@keyframes dots { to { background-position-x: -72px; } }

/* side panel */
.panel { min-height: 0; overflow-y: auto; background: var(--paper); border-radius: 26px; box-shadow: 0 4px 0 var(--paper-edge), 0 30px 60px -36px rgba(80, 50, 90, .45); padding: 36px 32px 28px; display: flex; flex-direction: column; gap: 28px; scrollbar-width: thin; }
.panel-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.pitch { display: grid; gap: 16px; }
.pitch h1 { font: 700 clamp(28px, min(3.2vw, 5vh), 58px)/1 var(--display); letter-spacing: -.025em; margin: 0; }
.pitch h1 span { display: block; }
.pitch h1 em { font-style: normal; color: var(--accent); display: block; }
.pitch .lede { margin: 0; color: var(--ink-soft); font-size: 16px; text-wrap: pretty; max-width: 40ch; }
.play { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 26px 0 22px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 600 18px/1 var(--display); box-shadow: 0 5px 0 #1D1830; transition-property: scale, translate, box-shadow; transition-duration: .15s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.play:hover { translate: 0 -2px; box-shadow: 0 7px 0 #1D1830; }
.play:active { scale: .96; translate: 0 2px; box-shadow: 0 3px 0 #1D1830; }
.play svg { width: 16px; height: 16px; fill: currentColor; }
.panel h2 { font: 600 16px/1.2 var(--display); margin: 0 0 12px; }
.feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feats li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 12px; border-radius: 16px; background: var(--paper-2); }
.feats .ic { width: 40px; height: 40px; border-radius: 12px; background: var(--paper); display: grid; place-items: center; }
.feats .ic img { width: 32px; height: 32px; image-rendering: pixelated; }
.feats b { font: 600 15px/1.3 var(--display); display: block; margin-top: 1px; }
.feats span { color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; display: block; }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rules li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: center; }
.rules .ic { width: 32px; height: 32px; border-radius: 10px; background: var(--paper-2); display: grid; place-items: center; }
.rules .ic img { width: 24px; height: 24px; image-rendering: pixelated; }
.rules b { font: 600 15px/1.3 var(--display); }
.rules span { color: var(--ink-soft); font-size: 14px; margin-left: 6px; }
.footnote { margin: 0; font-size: 12.5px; color: #8E87A3; text-wrap: pretty; }
.keys { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; color: #8E87A3; white-space: nowrap; }
.keys kbd { min-width: 20px; height: 20px; padding: 0 5px; display: inline-grid; place-items: center; font: 700 10.5px var(--body); color: var(--ink-soft); background: rgba(255, 247, 238, .6); border-radius: 5px; box-shadow: inset 0 0 0 1px var(--paper-edge), 0 1.5px 0 var(--paper-edge); }
.keys .gap { width: 10px; }


.keys + .seg { margin-left: 14px; }

/* bottom bar under the map: gossip on the left, the crew on the right */
.dock { display: grid; grid-template-columns: minmax(200px, 1fr) auto; align-items: center; gap: 14px; background: var(--paper); border-radius: 20px; box-shadow: 0 4px 0 var(--paper-edge); padding: 8px 10px 8px 12px; }
.gossip { min-width: 0; display: flex; align-items: center; gap: 10px; }
.gossip .tag { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--paper); font: 600 12.5px var(--display); padding: 5px 11px; border-radius: 999px; }
.gossip .tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6FD49E; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.gossip .line { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-soft); font-size: 14px; }
.gossip .line b { color: var(--ink); }
.gossip .line.fresh { animation: swap .4s cubic-bezier(.2, 0, 0, 1); }
@keyframes swap { from { opacity: 0; translate: 0 6px; } }
.gossip time { flex: none; font-size: 12px; color: #9A93AE; font-variant-numeric: tabular-nums; }
.crew { list-style: none; margin: 0; padding: 0 0 0 12px; display: flex; gap: 2px; border-left: 1px solid var(--paper-edge); overflow-x: auto; scrollbar-width: none; }
.crew li { position: relative; display: grid; justify-items: center; gap: 2px; width: 56px; padding: 4px 2px; border-radius: 12px; cursor: default; transition: background-color .2s; }
.crew li:hover { background: var(--paper-2); }
.crew .av { position: relative; width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2) no-repeat 50% 18% / 34px 51px; image-rendering: pixelated; box-shadow: inset 0 0 0 2.5px var(--c); }
.crew li.busy .av::after { content: ""; position: absolute; right: -2px; top: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--paper); }
.crew .name { font: 600 11px/1.2 var(--display); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew .tip { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 4px; width: max-content; max-width: 220px; background: var(--ink); color: var(--paper); font-size: 12.5px; line-height: 1.35; padding: 7px 10px; border-radius: 10px; opacity: 0; pointer-events: none; transition-property: opacity, translate; transition-duration: .15s; z-index: 5; }
.crew .tip b { display: block; font: 600 13px var(--display); }
.crew li:hover .tip { opacity: 1; translate: -50% 0; }

@media (max-width: 1280px) { .chip.extra { display: none; } }
@media (max-width: 1500px) { .keys { display: none; } .keys + .seg { margin-left: auto; } }
@media (max-width: 1560px) { .gossip .tag { font-size: 0; gap: 0; padding: 7px; } .crew li { width: 50px; } .crew .name { font-size: 10.5px; } }
@media (max-height: 1000px) { .feats div span, .rules div span, .footnote { display: none; } .panel-body { gap: 22px; } .rules { gap: 6px; } .feats li { align-items: center; padding: 8px 10px; } .feats .ic { width: 32px; height: 32px; border-radius: 10px; } .feats .ic img { width: 24px; height: 24px; } .feats li { grid-template-columns: 32px 1fr; } .panel { gap: 20px; padding-top: 26px; padding-bottom: 22px; } }
@media (max-height: 820px) { .pitch { gap: 12px; } .pitch .lede { font-size: 14.5px; } .play { min-height: 44px; font-size: 16px; } .panel-body { gap: 18px; } .panel h2 { margin-bottom: 8px; } }
@media (max-height: 720px) { .what { display: none; } .brand { font-size: 22px; min-height: 40px; } .brand img { width: 32px; height: 32px; } }
@media (max-width: 1100px) { .dock { grid-template-columns: 1fr; } .crew { border-left: 0; padding: 0; } }
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { height: auto; }
  .main { grid-template-columns: 1fr !important; }
  .mapbox { container-type: inline-size; }
  .mapfit { width: calc(100cqw - 18px); }
  .panel { overflow: visible; }
}
@media (max-width: 560px) { .chip:not(.open) { display: none; } .gh .lbl .t { display: none; } .brand { font-size: 21px; } .brand img { width: 32px; height: 32px; } .invite span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .ap-view, .ap-map, .ap-actor, .ap-bubble, .hint, .invite, .app { transition: none; }
  .ap-bubble i, .dots, .ap-actor.me .ap-ring, .invite, .gossip .tag::before, .gossip .line.fresh { animation: none; }
}

/* intro: a welcome screen over the office. The same name turns into the loader after "Come in",
   while the office loads behind it; then the letters fly off and the office shows. */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: 1fr auto; cursor: pointer; background: radial-gradient(120% 100% at 30% 10%, var(--sky-top), var(--sky-low)); transition-property: opacity, visibility; transition-duration: .45s; transition-delay: .25s; }
.intro.loading { cursor: progress; }
.intro.done { opacity: 0; visibility: hidden; }
.intro .hello { align-self: center; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 0 16px 24px; }
.intro .logo { width: 96px; height: 96px; image-rendering: pixelated; animation: ibob 2.4s ease-in-out infinite; }
@keyframes ibob { 50% { translate: 0 -6px; } }
.word { display: flex; margin: 0; font: 700 clamp(52px, 10vw, 120px)/.95 var(--display); letter-spacing: -.03em; color: var(--ink); }
.word span { display: inline-block; opacity: 0; translate: 0 -120%; animation: drop .6s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(var(--i) * 70ms); }
.word .sp { width: .28em; }
.word .hot { color: var(--accent); }
@keyframes drop { to { opacity: 1; translate: 0 0; } }
/* on Come in: the name shrinks and glides to the middle of the screen; JS sets the exact transform */
.word, .intro .line { transition: transform .75s cubic-bezier(.2, 0, 0, 1); will-change: transform; }
.intro .logo { transition-property: opacity, scale; transition-duration: .35s; }
.intro.loading .logo { opacity: 0; scale: .7; }
.intro.loading .word span { animation: drop .6s cubic-bezier(.3, 1.5, .5, 1) forwards, wave 1.8s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms), calc(var(--i) * 90ms); }
@keyframes wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-10%); } }
.intro.done .word span { animation: none; opacity: 0; translate: 0 0; transform: translateY(-40%); transition: transform .4s cubic-bezier(.5, 0, .75, 0), opacity .3s; transition-delay: calc(var(--i) * 25ms); }
.intro .line { margin: 0; min-height: 1.6em; font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-soft); }
.intro .line.fresh { animation: swap .35s cubic-bezier(.2, 0, 0, 1); }
.intro .enter { margin-top: 18px; display: grid; justify-items: center; gap: 10px; transition-property: opacity, translate; transition-duration: .3s; }
.intro.loading .enter { opacity: 0; translate: 0 8px; pointer-events: none; }
.intro .go { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 32px; border: 0; border-radius: 999px; cursor: pointer; background: var(--ink); color: var(--paper); font: 600 19px/1 var(--display); box-shadow: 0 5px 0 #1D1830; transition-property: scale, translate, box-shadow; transition-duration: .15s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.intro .go:hover { translate: 0 -2px; box-shadow: 0 7px 0 #1D1830; }
.intro .go:active { scale: .96; translate: 0 2px; box-shadow: 0 3px 0 #1D1830; }
.intro .go .arrow { transition: translate .2s cubic-bezier(.2, 0, 0, 1); }
.intro .go:hover .arrow { translate: 3px 0; }
.intro .press { font-size: 14px; color: var(--ink-soft); animation: ipulse 2s ease-in-out infinite; }
@keyframes ipulse { 50% { opacity: .55; } }
.floor { position: relative; height: 150px; overflow-x: clip; overflow-y: visible; transition: opacity .4s; }
/* The parade: small groups on one floor line, all at one speed. app.js spaces the groups for the screen width and
   staggers who talks, so nobody overlaps and only one bubble shows at a time. */
.group { position: absolute; left: 0; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); height: 96px; animation: cross var(--dur, 40s) linear infinite; animation-delay: var(--delay, 0s); }
.group i { position: absolute; bottom: 0; left: calc(var(--k) * 46px); width: 64px; height: 96px; background-size: 400% 500%; background-position-y: 25%; image-rendering: pixelated; transform: scaleX(-1); animation: legs .55s steps(4) infinite; animation-delay: calc(var(--k) * -.18s); }
.group .talk { position: absolute; left: 32px; bottom: calc(100% + 6px); translate: -50% 4px; white-space: nowrap; background: #fff; color: var(--ink); font: 700 12.5px/1.2 var(--body); border-radius: 9px; padding: 5px 9px; box-shadow: 0 0 0 1.5px var(--ink), 0 2px 0 rgba(51, 44, 74, .2); opacity: 0; transition-property: opacity, translate; transition-duration: .3s; transition-timing-function: cubic-bezier(.2, 0, 0, 1); }
.group .talk::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% 0; border: 5px solid transparent; border-top-color: var(--ink); }
.group .talk.on { opacity: 1; translate: -50% 0; }
.intro.loading .floor { opacity: 0; }
.floor::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(26px + env(safe-area-inset-bottom, 0px)); background: #F3CBA9; box-shadow: 0 -4px 0 #E9B892; }
@keyframes cross { from { translate: -80px 0; } to { translate: calc(100vw + 80px) 0; } }
@keyframes legs { from { background-position-x: 0; } to { background-position-x: 133.333%; } }
@media (max-height: 640px) { .floor { height: 100px; } .intro .logo { width: 72px; height: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .intro .logo, .intro .press, .intro .line.fresh { animation: none; }
  .word span, .intro.loading .word span { animation: none; opacity: 1; translate: 0 0; }
  .group, .group i { animation: none; }
  .group .talk { transition: none; }
  .intro, .intro.done .word span, .intro .enter, .word, .intro .line, .intro .logo { transition: none; }
}

/* A big side panel (large screens): the text grows with the panel and the lists spread across it instead of leaving
   space empty, but only as far as the panel's height allows, so it never has to scroll. Container units follow the
   panel's own size (size containment only in the two-column layout, where the grid sets the panel's height). */
.panel { container-type: inline-size; }
@media (min-width: 901px) { .panel { container-type: size; } }
@container (min-width: 560px) {
  .pitch h1 { font-size: clamp(32px, min(8.5cqi, 7.2cqh), 84px); }
  .pitch .lede { font-size: clamp(15px, min(2.4cqi, 2.1cqh), 21px); max-width: 44ch; }
  .play { min-height: clamp(44px, 6cqh, 58px); font-size: clamp(16px, 2.2cqh, 20px); }
}
@container (min-width: 560px) and (min-height: 820px) {
  .panel-body { gap: clamp(28px, 4cqh, 48px); }
  .panel h2 { font-size: 18px; margin-bottom: 14px; }
  .feats { gap: 12px; }
  .feats li { padding: 14px 16px; grid-template-columns: 44px 1fr; align-items: center; }
  .feats .ic { width: 44px; height: 44px; }
  .feats b { font-size: 17px; }
  .feats div span { display: block; font-size: 14px; }
  .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .rules li { grid-template-columns: 1fr; align-items: start; gap: 8px; padding: 14px; border-radius: 16px; background: var(--paper-2); }
  .rules .ic { width: 40px; height: 40px; background: var(--paper); }
  .rules .ic img { width: 32px; height: 32px; }
  .rules b { font-size: 16px; }
  .rules div span { display: block; margin: 2px 0 0; font-size: 13.5px; }
}
@container (min-width: 760px) and (min-height: 820px) {
  .feats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .feats li { grid-template-columns: 1fr; align-items: start; }
}

/* a tall panel: spread the pitch, the features and the rules over the height instead of a cluster in the middle */
@container (min-height: 900px) {
  .panel-body { justify-content: space-evenly; }
  .pitch h1 { font-size: clamp(40px, min(9.5cqi, 7cqh), 88px); }
}
@media (max-width: 1100px) { .invite span { display: none; } }
/* narrow screens: the play invitation takes its own row under the brand and the GitHub links */
@media (max-width: 700px) {
  .head { grid-template-columns: 1fr auto; row-gap: 10px; }
  .invite { grid-row: 2; grid-column: 1 / -1; }
}