/* Threshold Station: the landing page. Colours and type from the Bureau's house style: the game's own font at
   whole-pixel sizes (multiples of 8px), near black ground with a warm lamp pool, manila, paper, worn red stamps. */

@font-face {
  font-family: "Continuity Pixel";
  src: url("fonts/continuity.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ground: #0a0a0c;
  --lamp: #342c22;
  --white: #ffffff;
  --grey: #aaaaaa;
  --yellow: #ffff55;
  --glow: #ffec78;
  --manila: #cca666;
  --manila-in: #ddbf84;
  --manila-edge: #92703e;
  --paper: #eeeade;
  --ink: #242220;
  --ink-grey: #6a645c;
  --red: #b0201c;
  --px: 2px; /* one game pixel at the base size */
  --font: "Continuity Pixel", ui-monospace, "Menlo", "Consolas", monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--ground); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--white);
  font: 16px/1.75 var(--font);
  letter-spacing: 0;
  background:
    radial-gradient(ellipse 70% 46rem at 50% 0, var(--lamp), transparent 72%),
    var(--ground);
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
  padding-block: env(safe-area-inset-top) env(safe-area-inset-bottom);
  overflow-x: clip;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

/* The game's text shadow: the same glyph, a quarter as bright, one pixel down and right. */
.title, .door, .evidence h2, .again, footer, figcaption, .serving {
  text-shadow: var(--px) var(--px) 0 rgba(0, 0, 0, 0.55);
}

h1, h2, h3 { font-weight: normal; margin: 0; }
strong { font-weight: normal; }
em { font-style: normal; }
img { max-width: 100%; height: auto; }
.grey { color: var(--grey); }
.hl { color: var(--yellow); }

.skip {
  position: absolute; left: 16px; top: -64px; z-index: 2;
  background: var(--yellow); color: var(--ink); padding: 8px 16px; text-decoration: none;
}
.skip:focus { top: 16px; }

:focus-visible { outline: var(--px) solid var(--yellow); outline-offset: 4px; }

main, header, footer { max-width: 1120px; margin-inline: auto; }

/* ---- The title card ---- */

.title { text-align: center; padding-block: 64px 24px; }
.logo-wrap { position: relative; width: min(880px, 100%); margin-inline: auto; }
.logo { display: block; width: 100%; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.6)); }
.splash {
  position: absolute; right: -5%; top: 6%; margin: 0;
  color: #ffff00; text-shadow: var(--px) var(--px) 0 #3f3f00;
  font-size: 24px; line-height: 1; white-space: nowrap;
  transform: rotate(-20deg);
  animation: splash 1s ease-in-out infinite alternate;
}
@keyframes splash { from { transform: rotate(-20deg) scale(1); } to { transform: rotate(-20deg) scale(1.08); } }
.file-line { font-size: 24px; margin: 24px 0 0; }
.sq { display: inline-block; width: 8px; height: 8px; background: var(--grey); vertical-align: middle; margin: 0 8px; }

/* ---- The address ---- */

.door { position: relative; text-align: center; padding-block: 40px 64px; }
.hero-prop { display: none; position: absolute; pointer-events: none; filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.7)); }
@media (min-width: 1100px) {
  .hero-prop { display: block; }
  .hero-door { left: 0; top: 8px; width: 170px; transform: rotate(-3deg); }
  .hero-lantern { right: 32px; top: -150px; width: 56px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%); mask-image: linear-gradient(to bottom, transparent, #000 45%); }
}
.kicker { color: var(--grey); margin: 0 0 8px; }
.door h2 { font-size: 32px; line-height: 1.5; }
.door h2 em { color: var(--white); }
.address {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 24px;
  margin: 32px auto 24px; position: relative;
}
.addr {
  font: 40px/1.2 var(--font); color: var(--yellow);
  text-shadow: var(--px) var(--px) 0 #3f3f15, 0 0 24px rgba(255, 236, 120, 0.25);
  padding: 8px 24px; border: var(--px) dashed rgba(255, 255, 85, 0.35);
  animation: breath 2.4s ease-in-out infinite;
  user-select: all;
}
@keyframes breath {
  0%, 100% { text-shadow: var(--px) var(--px) 0 #3f3f15, 0 0 16px rgba(255, 236, 120, 0.15); transform: scale(1); }
  50% { text-shadow: var(--px) var(--px) 0 #3f3f15, 0 0 32px rgba(255, 236, 120, 0.5); transform: scale(1.03); }
}
.copy, .take {
  font: 16px/1 var(--font); color: var(--white); cursor: pointer;
  background: #6f6f6f; padding: 14px 24px;
  border: var(--px) solid #000;
  box-shadow: inset var(--px) var(--px) 0 #a8a8a8, inset calc(-1 * var(--px)) calc(-2 * var(--px)) 0 #4a4a4a;
  text-shadow: var(--px) var(--px) 0 #3f3f3f;
}
.copy:hover, .take:hover { background: #7f86b8; color: var(--yellow); }
.copy:active, .take:active { transform: translateY(var(--px)); }
.copied { position: absolute; top: 100%; left: 0; right: 0; color: var(--grey); min-height: 1.75em; }
.facts { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 32px; color: var(--grey); }
.facts li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--yellow); margin-right: 12px; vertical-align: middle; }

/* ---- The Field Request ---- */

.request { padding-block: 32px; }
.paper {
  position: relative; max-width: 680px; margin-inline: auto;
  background: var(--paper); color: var(--ink);
  padding: 40px clamp(20px, 6vw, 56px) 48px;
  border: 4px solid #d8d2c0;
  box-shadow: 0 0 0 4px var(--manila-edge), 0 24px 48px rgba(0, 0, 0, 0.6);
  transform: rotate(-0.6deg);
}
.paper h2 { font-size: 32px; line-height: 1.4; margin: 8px 0 0; }
.paper h3 { font-size: 16px; color: var(--ink-grey); margin: 24px 0 8px; text-transform: uppercase; }
.paper hr, .record hr { border: 0; border-top: var(--px) solid #bdb6a4; margin: 24px 0 8px; }
.paper .hl { color: var(--ink); background: #fff2a0; padding: 0 4px; }
.ink-grey { color: var(--ink-grey); margin: 0; }
.small { font-size: 16px; }
.steps { margin: 0; padding-left: 32px; }
.steps li { margin-bottom: 8px; padding-left: 8px; }
.steps li::marker { color: var(--ink-grey); }
.steps.quiet { color: var(--ink-grey); }
.stamp {
  display: inline-block; color: var(--red); border: 4px solid var(--red);
  padding: 4px 12px; font-size: 24px; line-height: 1.3; opacity: 0.85;
}
.paper > .stamp { position: absolute; right: 32px; top: 40px; transform: rotate(8deg); }

/* ---- Evidence ---- */

.evidence { padding-block: 80px 32px; }
.evidence h2 { font-size: 32px; text-align: center; margin-bottom: 40px; }
.evidence h2 .grey { font-size: 16px; display: block; }
.exhibits {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 40px 32px;
}
.ex figure { margin: 0; }
.pool {
  height: 280px; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(closest-side, rgba(52, 44, 34, 0.9), rgba(52, 44, 34, 0) 100%);
}
.pool img {
  max-height: 232px; width: auto; object-fit: contain;
  filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.7));
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.ex:hover .pool img { transform: translateY(-8px) rotate(-1.5deg); }
figcaption { color: var(--grey); margin-top: 8px; }
.tag {
  display: table; color: var(--ink); background: var(--manila-in); text-shadow: none;
  padding: 0 8px; margin-bottom: 4px; border-bottom: var(--px) solid var(--manila-edge);
}
.flicker { animation: flicker 3.2s steps(1) infinite; }
.flicker.slow { animation-duration: 5.3s; }
@keyframes flicker {
  0%, 100% { filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.7)) brightness(1); }
  37% { filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.7)) brightness(1.08); }
  41% { filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.7)) brightness(0.94); }
  73% { filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.7)) brightness(1.04); }
}

/* ---- The case file ---- */

.case { padding-block: 80px 32px; }
.folder { position: relative; max-width: 960px; margin: 0 auto; padding-top: 28px; }
.folder-tab {
  position: absolute; right: 48px; top: 0; margin: 0; padding: 0 24px; height: 32px; line-height: 32px;
  background: var(--manila); color: var(--ink); border: 4px solid var(--manila-edge); border-bottom: 0;
}
.folder-inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  background: var(--manila); border: 4px solid var(--manila-edge); padding: 24px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6);
}
.sheet { overflow-wrap: break-word; background: var(--paper); color: var(--ink); padding: 24px 28px; border: 4px solid #c9c2ae; }
.sheet h2 { font-size: 24px; margin: 8px 0 16px; }
.sheet blockquote { margin: 0 0 16px; }
.sheet blockquote p { margin: 0; }
.speaker { color: var(--red); margin-bottom: 8px !important; }
.record .big { font-size: 24px; line-height: 1.4; margin: 8px 0 0; }
.record dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 24px; margin: 16px 0 0; align-items: center; }
.record dt { color: var(--ink); }
.record dd { margin: 0; }
.red-stamp { transform: rotate(-8deg); font-size: 32px; margin-top: 16px; }

.ticket-desk { text-align: center; margin-top: 56px; }
.serving { color: var(--grey); margin: 0 0 16px; }
.serving span { color: #ff5555; }
.ticket {
  display: inline-block; margin: 24px auto 0; padding: 16px 32px;
  background: var(--paper); color: var(--ink);
  border: var(--px) dashed var(--ink-grey); line-height: 1.6;
  animation: print 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.ticket[hidden] { display: none; }
.ticket b { display: block; font-size: 40px; font-weight: normal; line-height: 1.2; }
@keyframes print { from { transform: translateY(-16px) scale(0.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- The end ---- */

.again { text-align: center; padding-block: 96px 64px; }
.again h2 { font-size: 40px; }
.addr-small { color: var(--grey); }

footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px;
  padding-block: 32px 24px;
}
footer p { margin: 0; }
.fine { color: #8c8c8c; flex: 1 1 320px; text-align: center; order: 2; }
.corner:last-child { order: 3; }

/* ---- Phone width ---- */

@media (max-width: 720px) {
  .title { padding-top: 40px; }
  .splash { position: static; display: inline-block; font-size: 16px; margin-top: 16px; transform: rotate(-6deg); }
  @keyframes splash { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(-6deg) scale(1.08); } }
  .file-line { font-size: 16px; }
  .door h2 { font-size: 24px; }
  .addr { font-size: 24px; padding: 8px 16px; }
  .paper h2, .evidence h2, .again h2 { font-size: 24px; }
  .paper > .stamp { position: static; display: inline-block; margin-top: 16px; transform: rotate(-4deg); }
  .folder-inner { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .folder-tab { right: 24px; }
  .sheet { padding: 20px; }
  .red-stamp { font-size: 24px; }
  .exhibits { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 32px 16px; }
  .pool { padding: 12px; height: 180px; }
  .pool img { max-height: 156px; }
  footer { flex-direction: column; align-items: center; text-align: center; }
  .fine { order: 0; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}