/* self-hosted Press Start 2P (no Google Fonts dependency) — latin + latin-ext +
   cyrillic subsets, files under vendor/fonts/ */
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/press-start-2p-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/press-start-2p-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(vendor/fonts/press-start-2p-cyrillic-400-normal.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --panel-bg: rgba(20, 24, 22, 0.88);
  --edge: #5a6356;
  --text: #d4d8cd;
  --dim: #8d957f;
  --accent: #d8cf9a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #11151a;
  font-family: 'Press Start 2P', monospace;
  color: var(--text);
}

#game canvas { display: block; image-rendering: pixelated; cursor: crosshair; }

/* crosshair */
#crosshair {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: rgba(220, 224, 210, 0.6);
  pointer-events: none;
  z-index: 4;
}

/* grave name hint above the panel */
#grave-label {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 26vh;
  transform: translateX(-50%);
  padding: 5px 9px;
  font-size: 10px;
  color: var(--accent);
  background: var(--panel-bg);
  border: 1px solid var(--edge);
  pointer-events: none;
  white-space: nowrap;
  z-index: 5;
}

/* minimal epitaph card, bottom-center */
#panel {
  position: fixed;
  left: 50%;
  bottom: 24px;
  /* hide by full height + fixed clearance, so an empty (short) panel at the very
     start is pushed fully off-screen instead of peeking a dark sliver */
  transform: translate(-50%, calc(100% + 60px));
  width: 460px;
  max-width: calc(100vw - 32px);
  padding: 14px 18px;
  background: var(--panel-bg);
  border: 1px solid var(--edge);
  transition: transform 0.25s steps(6);
  z-index: 10;
  line-height: 1.8;
  text-align: center;
}
#panel.open { transform: translate(-50%, 0); }

.panel-head { font-size: 12px; color: #fff; margin-bottom: 6px; }
.years { font-size: 9px; color: var(--accent); margin-bottom: 8px; }
.epitaph { font-size: 9px; font-style: italic; margin: 0 0 8px; }
.last-words { font-size: 8px; color: var(--text); margin: 0 0 8px; }
.last-words b { color: var(--accent); }
.cause { font-size: 8px; color: var(--dim); margin: 0 0 8px; }

/* paper pickup hint, just under the crosshair */
#pickup-hint {
  display: none;
  position: fixed;
  left: 50%;
  top: 56%;
  transform: translateX(-50%);
  padding: 5px 9px;
  font-size: 9px;
  color: #ffd98e;
  background: rgba(20, 24, 22, 0.8);
  border: 1px solid #8a7a52;
  pointer-events: none;
  white-space: nowrap;
  z-index: 6;
}

/* secret tester mode badge, top-right */
#tester-badge {
  display: none;
  position: fixed;
  top: 18px;
  right: 22px;
  font-size: 11px;
  color: #e07a5f;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  z-index: 14;
}

/* zen mode badge, top-right */
#zen-badge {
  display: none;
  position: fixed;
  top: 18px;
  right: 22px;
  font-size: 11px;
  color: #9ad0c0;
  text-shadow: 2px 2px 0 #000;
  pointer-events: none;
  z-index: 14;
}

/* collected-papers counter, bottom-left, warm gold */
#paper-counter {
  position: fixed;
  left: 26px;
  bottom: 22px;
  font-size: 26px;
  color: #e9b85f;
  text-shadow: 3px 3px 0 #000;
  opacity: 0;
  transition: opacity 1.4s ease;
  pointer-events: none;
  z-index: 12;
}
#paper-counter.show { opacity: 1; }

/* found-text scraps: the panel turns to paper */
#panel.paper {
  background: #d6d0bd;
  border-color: #8a8470;
  color: #2e2a22;
}
#panel.paper .panel-head { color: #2e2a22; }
.scrap-text { font-size: 9px; line-height: 2.1; color: #2e2a22; margin: 0 0 10px; text-align: left; }
.scrap-src { font-size: 7px; color: #6b6452; margin: 0; }

/* ✝ ★ ☠ ✉ aren't in Press Start 2P; render them bigger via fallback serif */
.sym {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.6em;
  line-height: 0;
  vertical-align: -0.12em;
}
.sym-big { font-size: 2.4em; vertical-align: -1px; }

/* quote panel fades out like the counter */
#panel.fading {
  opacity: 0;
  transition: opacity 1.4s ease;
}
.repo-link { font-size: 8px; color: var(--accent); text-decoration: none; }
.repo-link:hover { text-decoration: underline; }

/* phones: a sad face + message over a static graveyard frame */
#mobile-block {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  padding: 28px;
  background: rgba(13, 16, 14, 0.62);
  z-index: 30;
}
#mobile-block.show { display: flex; }
#mobile-block .mb-face {
  font-size: 46px;
  color: var(--accent);
  text-shadow: 4px 4px 0 #000;
}
#mobile-block .mb-text {
  font-size: 12px;
  color: var(--text);
  line-height: 2.1;
  text-shadow: 2px 2px 0 #000;
  margin: 0;
  max-width: 340px;
}

/* intro / pause overlay */
#intro {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background: rgba(13, 16, 14, 0.82);
  z-index: 20;
  text-align: center;
  padding: 24px;
  transition: opacity 0.5s;
  cursor: pointer;
}
#intro.gone { opacity: 0; pointer-events: none; }
#intro h1 { font-size: 24px; color: #fff; margin: 0; text-shadow: 4px 4px 0 #000; }
#intro h1 span { color: var(--accent); }
#intro p { font-size: 10px; color: var(--dim); margin: 0; line-height: 2; }

/* controls list: one command per line, key names drawn as keycaps */
#intro .controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  margin: 4px 0;
}
#intro .ctl {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--dim);
}
#intro .ctl .keys { display: flex; gap: 5px; }
#intro kbd {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1;
  color: var(--text);
  background: #252d28;
  border: 1px solid var(--edge);
  border-bottom: 3px solid #11161200;
  border-bottom-color: #3a4239;
  border-radius: 3px;
  padding: 6px 7px 5px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  min-width: 11px;
  text-align: center;
}
#intro .hint { color: var(--text); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* telegram channel: QR + link, pinned to the bottom of the start screen */
#intro .channel {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8.05px; /* 15% larger than 7px */
  cursor: default;
}
#intro .qr {
  width: 94px;
  height: 94px;
  image-rendering: pixelated;
  border: 4px solid #e8e3d6;
  background: #e8e3d6;
}
#intro .channel-link {
  font-size: 9px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  padding-bottom: 1px;
  cursor: pointer;
}
#intro .channel-link:hover { color: #fff; }

/* end card: the dot.dead logo + dates + hints, fades in at the top once the
   world has fully decayed and the player has wandered the ruin a while */
#endcard {
  position: fixed;
  top: 6vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 22px 34px;
  /* subtle dark backing so the logo reads over the pale, decayed sky */
  background: rgba(13, 16, 14, 0.5);
  border: 1px solid rgba(90, 99, 86, 0.5);
  opacity: 0;
  transition: opacity 2.5s ease;
  pointer-events: none;
  z-index: 18;
}
#endcard.show { opacity: 1; }
#endcard h1 { font-size: 22px; color: #fff; margin: 0; text-shadow: 4px 4px 0 #000; }
#endcard h1 span { color: var(--accent); }
#endcard .endcard-years { font-size: 11px; color: var(--accent); margin: 0; text-shadow: 2px 2px 0 #000; }
#endcard .endcard-hint { font-size: 9px; color: var(--text); margin: 0; line-height: 2; text-shadow: 2px 2px 0 #000; }