/* Topside: the pre-alpha page. The page is a building: the top floor first,
   the street at the bottom. Textures come from the game's own atlas and are
   set as --tex-* by main.js. No downloaded fonts: system faces only, so the
   page reads the same in every script and loads anywhere. */

:root {
  --bg: #0f1013;
  --ink: #ebe6da;
  --dim: #a39e92;
  --faint: #6f6b63;
  --amber: #e7a33a;
  --paper: #e9e2cf;
  --paper-ink: #22201b;
  --lume: #c4f7b2;
  --glow: 230, 150, 90;
  --gutter: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: auto; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, canvas, video { display: block; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--paper); color: var(--paper-ink); padding: 8px 12px; }
.skip:focus { left: 8px; }

/* ------------------------------------------------------------------ the lift */

.lift {
  position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); top: 14px; z-index: 40;
  display: flex; align-items: center; gap: 6px; padding: 7px 9px;
  background: #0a0a0b; border: 2px solid #2b2b30; border-radius: 3px;
  box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 0 0 1px #000;
}
.sound {
  position: fixed; right: max(var(--gutter), env(safe-area-inset-right)); top: 58px; z-index: 40;
  font: 600 11px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); background: rgba(10,10,11,.7); border: 1px solid #2b2b30; border-radius: 3px; padding: 6px 8px; cursor: pointer;
}
.sound[aria-pressed="false"] { color: var(--faint); text-decoration: line-through; }

/* ------------------------------------------------------------- the top floor */

.top { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; background: #17181b; isolation: isolate; }
.room { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.glow { position: absolute; z-index: 1; pointer-events: none; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--glow), .30), rgba(var(--glow), .10) 55%, rgba(var(--glow), 0)); }
/* No stacking context here: the window, the planks and the flyer share the
   top floor's, so the planks sit over the window and under the flyer. */
.top-inner { position: relative; display: flex; flex-direction: column; align-items: center; padding: clamp(18px, 3.5vh, 40px) var(--gutter) 90px; }
.boards { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }

.brand { position: relative; z-index: 2; width: min(720px, 100%); text-align: center; }
.wordmark { margin: 0 auto; width: 100%; cursor: pointer; }
.wordmark canvas { margin: 0 auto; }
.tagline { margin: 4px 0 0; color: var(--dim); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }

.scene {
  position: relative; width: min(1400px, 100%); margin-top: clamp(14px, 3vh, 34px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 760px) minmax(290px, 1fr); align-items: center;
}
.window { grid-column: 2; position: relative; z-index: 2; margin: 0; width: 100%; aspect-ratio: 16 / 10; }
.sash {
  position: absolute; inset: 0; padding: clamp(9px, 1.5vw, 16px);
  background: var(--tex-frame) repeat; background-size: 48px; image-rendering: pixelated;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 14px rgba(0,0,0,.6), 0 26px 70px rgba(0,0,0,.65);
}
.view { position: relative; width: 100%; height: 100%; overflow: hidden; background: #221a17; box-shadow: inset 0 0 0 2px #0c0c0d; }
.view video {
  position: absolute; left: 50%; top: 50%; width: 136%; height: 136%; object-fit: cover; object-position: 52% 48%;
  transform: translate(calc(-50% + var(--px, 0px)), calc(-50% + var(--py, 0px)));
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.glass { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 58%, rgba(255,255,255,.05) 64%, rgba(255,255,255,0) 72%),
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 55%, rgba(10,8,6,.45) 100%);
}
.sill {
  position: absolute; left: -3.5%; right: -3.5%; bottom: -20px; height: 22px;
  background: var(--tex-sill) repeat; background-size: 48px; image-rendering: pixelated;
  box-shadow: 0 10px 22px rgba(0,0,0,.6), inset 0 3px 0 rgba(255,255,255,.12), inset 0 -3px 0 rgba(0,0,0,.35);
}

.down {
  position: absolute; left: 50%; bottom: 22px; z-index: 6; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--dim); text-decoration: none;
  padding: 8px 12px; animation: nudge 2.6s ease-in-out infinite;
}
.down:hover { color: var(--ink); }
@keyframes nudge { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } }

/* ------------------------------------------------------------------ the flyer */

.flyer {
  grid-column: 3; justify-self: start; position: relative; z-index: 4; width: 250px; margin: 40px 0 0 36px;
  padding: 20px 18px 0; color: var(--paper-ink);
  background: linear-gradient(180deg, rgba(255,250,235,.25), rgba(120,100,60,.12)), var(--tex-paper) repeat;
  background-size: auto, 48px; image-rendering: auto;
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.45);
  transform: rotate(2.4deg); transform-origin: 50% 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", "Courier New", monospace;
}
.flyer::after { /* the window's light falling on the paper */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(var(--glow), .22), rgba(var(--glow), 0) 60%); mix-blend-mode: multiply;
}
.tape { position: absolute; top: -11px; width: 74px; height: 24px; background: rgba(226,214,176,.62); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.tape-l { left: 8px; transform: rotate(-9deg); }
.tape-r { right: 8px; transform: rotate(7deg); }
.flyer-head { margin: 0; line-height: 1.1; }
.flyer-head canvas { margin: 0 auto; }
.flyer-head-text { display: none; font: 800 24px/1.1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.flyer-head.plain canvas { display: none; }
.flyer-head.plain .flyer-head-text { display: block; }
.flyer-body { font-size: 13px; line-height: 1.5; margin: 12px 0 12px; }
.flyer-form input {
  width: 100%; font: inherit; font-size: 15px; color: var(--paper-ink); background: rgba(255,255,255,.28);
  border: 0; border-bottom: 2px dashed #3b362d; padding: 8px 6px; outline: none; border-radius: 0;
}
.flyer-form input:focus { border-bottom-style: solid; background: rgba(255,255,255,.55); }
.flyer-form input::placeholder { color: #7d7566; }
.flyer-form button {
  margin-top: 10px; width: 100%; padding: 12px 10px; border: 0; border-radius: 0; cursor: pointer;
  font: 700 13px/1 ui-monospace, Consolas, "Courier New", monospace; letter-spacing: .16em; text-transform: uppercase;
  color: #f0e9d6; background: #1f1d19; box-shadow: 0 3px 0 #000;
}
.flyer-form button:hover { background: #3b2d1e; }
.flyer-form button:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.flyer-note { min-height: 0; margin: 8px 0 0; font-size: 12px; }
.flyer-note:empty { display: none; }
.flyer-small { font-size: 10.5px; line-height: 1.45; opacity: .78; margin: 10px 0 12px; }
.tabs { display: flex; margin: 0 -18px; border-top: 2px dashed rgba(0,0,0,.35); }
.tabs span {
  flex: 1; height: 116px; padding: 8px 0; font-size: 9.5px; letter-spacing: .04em; text-align: center; white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg); border-right: 1px dashed rgba(0,0,0,.3);
}
.tabs span.gone { visibility: hidden; }
.stamp { position: absolute; left: 50%; top: 44%; z-index: 3; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) rotate(-11deg) scale(1.7); mix-blend-mode: multiply; }
.flyer.sent .stamp { animation: stamp .3s cubic-bezier(.2,.9,.25,1.15) forwards; }
@keyframes stamp { to { opacity: .92; transform: translate(-50%, -50%) rotate(-11deg) scale(1); } }
.flyer.sent .flyer-form { opacity: .35; pointer-events: none; }
.flyer-form button:disabled { opacity: .6; cursor: progress; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------ the privacy notice */

.notice-wall {
  min-height: 100vh; min-height: 100svh; padding: 56px var(--gutter) 64px;
  display: flex; flex-direction: column; align-items: center; gap: 30px;
}
.notice {
  position: relative; width: min(640px, 100%); padding: 34px clamp(18px, 5vw, 44px) 26px; color: var(--paper-ink);
  background: linear-gradient(180deg, rgba(255,250,235,.25), rgba(120,100,60,.12)), var(--tex-paper) repeat;
  background-size: auto, 48px; background-color: var(--paper);
  box-shadow: 0 16px 34px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.45);
  transform: rotate(-.5deg);
}
.notice h1 { margin: 0; font: 800 30px/1.1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.notice h2 {
  margin: 22px 0 4px; font: 700 12px/1.3 ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  letter-spacing: .14em; text-transform: uppercase;
}
.notice p { margin: 0; font-size: 15px; line-height: 1.6; }
.notice .notice-lead { margin-top: 8px; color: #4a4539; }
.notice a { color: #6b2e14; overflow-wrap: anywhere; }
.notice-back {
  font: 700 13px/1 ui-monospace, Consolas, "Courier New", monospace; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber); text-decoration: none; padding: 12px 14px; border: 1px solid #2b2b30; border-radius: 3px;
}
.notice-back:hover { background: #1a1a1d; }

/* ----------------------------------------------------------------- the floors */

.floor {
  --dark: .35;
  position: relative; min-height: 88vh; padding: 12vh var(--gutter);
  display: grid; grid-template-columns: 150px minmax(0, 440px) minmax(0, 560px); gap: clamp(24px, 4vw, 56px);
  justify-content: center; align-items: center;
  background: linear-gradient(rgba(6,7,8,var(--dark)), rgba(6,7,8,var(--dark))), linear-gradient(180deg, rgba(0,0,0,0) 84%, rgba(0,0,0,.22) 84%), var(--tex-stair) repeat;
  background-size: auto, auto, 64px; image-rendering: auto;
  border-top: 10px solid #0b0c0d; box-shadow: inset 0 18px 30px rgba(0,0,0,.45);
}
.floor.dark-1 { --dark: .5; }
.floor.dark-2 { --dark: .64; }
.floor.dark-3 { --dark: .76; }

.sign {
  width: 150px; padding: 12px 10px 10px; text-align: center; align-self: start; margin-top: 8px;
  font: 800 11px/1.3 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #121412; background: #e9ecdf; border: 3px solid #121412; outline: 2px solid rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.sign canvas { image-rendering: pixelated; }
/* the photoluminescent signs of New York stairwells glow once the lights are gone */
.dark-1 .sign { background: #dff0cf; box-shadow: 0 0 18px rgba(170,255,150,.12); }
.dark-2 .sign { background: #cdf5bc; box-shadow: 0 0 28px rgba(170,255,150,.22); }
.dark-3 .sign { background: var(--lume); box-shadow: 0 0 40px rgba(170,255,150,.32); }

.copy h2 { margin: 0 0 12px; font-size: clamp(30px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -.015em; font-weight: 850; }
.copy p { margin: 0; color: #cfc9bc; font-size: 17px; max-width: 42ch; }

.still { margin: 0; position: relative; }
.still img { width: 100%; height: auto; image-rendering: auto; }
.pinned { background: #ece6d6; padding: 10px 10px 34px; transform: rotate(-1.6deg); box-shadow: 0 18px 40px rgba(0,0,0,.6); }
.pinned.tilt-r { transform: rotate(1.8deg); }
.pinned::before { content: ""; position: absolute; top: -7px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: #b8412f; box-shadow: 0 2px 3px rgba(0,0,0,.5), inset -2px -2px 0 rgba(0,0,0,.25); transform: translateX(-50%); }
.pinned figcaption { position: absolute; left: 12px; right: 12px; bottom: 8px; color: #3a352c; font: 12px/1.3 ui-monospace, Consolas, monospace; }

/* floor 5: the map, a plate on the stairwell wall (MAP.md) */
.map-plate {
  grid-column: 2 / -1; margin: 0; padding: 10px; background: #0b0c0d; border: 1px solid #26272b;
  box-shadow: 0 18px 40px rgba(0,0,0,.6), inset 0 0 0 2px #1a1b1e;
}
.map-view { position: relative; height: clamp(340px, 58vh, 600px); overflow: hidden; background: #16181c; }
.map-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.map-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; cursor: grab; }
.map-view canvas.ready { opacity: 1; }
.map-view canvas:active { cursor: grabbing; }
.map-card {
  position: absolute; left: 12px; bottom: 12px; margin: 0; max-width: 70%; padding: 8px 11px; pointer-events: none;
  background: rgba(12,13,15,.9); border: 1px solid #2b2b30; border-radius: 3px; font-size: 13px; line-height: 1.35;
}
.map-card[hidden] { display: none; }
.map-card strong { display: block; }
.map-card span { color: var(--dim); font-size: 12px; }
.map-hint {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; padding: 10px 14px; pointer-events: none;
  background: rgba(12,13,15,.86); border-radius: 3px; font: 600 13px/1.3 system-ui, sans-serif; text-align: center;
  opacity: 0; transition: opacity .3s;
}
.map-hint.show { opacity: 1; }
.map-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; }
.map-bar button {
  font: 700 11px/1 system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
  background: #1a1b1f; border: 1px solid #2f3035; border-radius: 2px; padding: 9px 11px; cursor: pointer;
}
.map-bar button:hover { background: #26272c; }
.map-bar button[data-go="spawn"] { color: var(--amber); border-color: rgba(231,163,58,.45); }
.map-zoom { display: inline-flex; gap: 4px; }
.map-zoom button { width: 34px; padding: 7px 0; font-size: 15px; letter-spacing: 0; }
.map-credit { margin-left: auto; font-size: 11px; color: var(--faint); }

/* the torch: the stairwell is dark until your light finds it */
.torch { overflow: hidden; border: 2px solid #050506; background: #000; cursor: none; touch-action: pan-y; }
.torch img { filter: brightness(.05) saturate(.4); }
.torch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../media/f4-stairwell.webp") center / cover no-repeat;
  -webkit-mask: radial-gradient(circle var(--r, 110px) at var(--tx, 30%) var(--ty, 45%), #000 0%, rgba(0,0,0,.85) 45%, transparent 100%);
          mask: radial-gradient(circle var(--r, 110px) at var(--tx, 30%) var(--ty, 45%), #000 0%, rgba(0,0,0,.85) 45%, transparent 100%);
  filter: sepia(.25) brightness(1.1);
}
.torch-hint { position: absolute; right: 10px; bottom: 8px; z-index: 2; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.35); }

/* the toy: a building on four columns */
.toy { margin: 0; position: relative; }
.toy canvas { width: 100%; touch-action: manipulation; cursor: crosshair; }
.toy-warn { position: absolute; left: 0; right: 0; top: 10px; margin: 0; text-align: center; font: 700 15px/1.3 system-ui, sans-serif; color: #ffd28a; text-shadow: 0 2px 0 #000, 0 0 12px rgba(0,0,0,.8); }
.toy-warn.bad { color: #ff8f6b; }
.toy-again { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); font: 700 12px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); background: rgba(0,0,0,.6); border: 1px solid #3a3a40; padding: 10px 14px; cursor: pointer; }

/* ----------------------------------------------------------------- the street */

.street {
  position: relative; overflow: hidden; padding: 16vh var(--gutter) 40px; text-align: center;
  background: linear-gradient(180deg, #050506 0%, rgba(5,5,6,.6) 45%, rgba(5,5,6,.35) 100%), var(--tex-asphalt) repeat;
  background-size: auto, 64px; border-top: 10px solid #000;
}
.eyes { position: absolute; left: 0; top: 0; width: 100%; height: 55%; pointer-events: none; }
.post { position: relative; width: 170px; height: 150px; margin: 0 auto 28px; }
.post .pole { position: absolute; left: 50%; top: 34px; bottom: -40px; width: 8px; transform: translateX(-50%); background: linear-gradient(90deg, #3c4a3d, #1f2820); }
.street-sign { position: absolute; left: 50%; image-rendering: pixelated; transform: translateX(-50%); z-index: 1; }
.street-sign.a { top: 0; }
.street-sign.b { top: 36px; transform: translateX(-50%) perspective(300px) rotateY(38deg); filter: brightness(.8); }
.run {
  position: relative; z-index: 2; font: 800 15px/1 system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: #1b1408; background: var(--amber); border: 0; padding: 16px 24px; cursor: pointer; box-shadow: 0 4px 0 #6b4410, 0 0 40px rgba(231,163,58,.25);
}
.run:hover { background: #f3b451; }
.run:active { transform: translateY(3px); box-shadow: 0 1px 0 #6b4410; }
.fine { position: relative; z-index: 2; margin: 46px auto 0; max-width: 62ch; color: var(--faint); font-size: 12.5px; }
.fine p { margin: 6px 0; }
.fine a { color: var(--dim); }
.fine strong { color: var(--dim); }

/* ------------------------------------------------------------------ narrow */

@media (max-width: 1180px) {
  .scene { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .window { grid-column: 1; max-width: 820px; }
  .flyer { grid-column: 1; justify-self: center; margin: 46px 0 0; transform: rotate(-1.4deg); }
}
@media (max-width: 900px) {
  .floor { grid-template-columns: minmax(0, 1fr); padding: 10vh var(--gutter); min-height: 0; gap: 26px; }
  .sign { flex-direction: row; width: auto; align-self: start; justify-self: start; padding: 8px 12px; gap: 12px; margin-top: 0; }
  .copy p { font-size: 16px; }
  .map-plate { grid-column: 1; padding: 6px; }
  .map-view { height: min(62vh, 480px); }
  .map-credit { margin-left: 0; width: 100%; }
}
@media (max-width: 640px) {
  /* on a phone the lift and the sound move to the bottom, off the wordmark */
  .lift { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); padding: 5px 7px; }
  .sound { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); right: 84px; }
  .window { aspect-ratio: 4 / 5; }
  .view video { width: 150%; height: 124%; object-position: 51% 50%; }
  .tagline { font-size: 10.5px; letter-spacing: .16em; }
  .flyer { width: min(300px, 100%); }
}
@media (prefers-reduced-motion: reduce) {
  .down { animation: none; }
  .view video { transition: none; }
}