:root {
  color-scheme: dark;
  --black: #050403;
  --bone: #e7dfd2;
  --dim: #7c776e;
  --amber: #ffc85a;
  --blood: #ff4b3e;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; }

body {
  overflow: hidden;
  background: var(--black);
  color: var(--bone);
  font-family: Georgia, "Times New Roman", serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

#game-shell { position: relative; width: 100%; height: 100%; overflow: hidden; background: #050403; }

#game { display: block; width: 100%; height: 100%; cursor: none; }

.hud {
  position: fixed;
  z-index: 3;
  inset: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: max(22px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left));
  pointer-events: none;
  mix-blend-mode: screen;
}

.wordmark { font: 700 18px/1 Arial, sans-serif; letter-spacing: .32em; }
.wordmark span { color: var(--amber); letter-spacing: -.08em; }
.run-data { display: flex; gap: clamp(22px, 5vw, 72px); text-align: center; }
.run-data p { margin: 0; }
.run-data span { display: block; color: var(--dim); font: 9px/1 Arial, sans-serif; letter-spacing: .22em; }
.run-data strong { display: block; margin-top: 7px; font: 400 17px/1 Georgia, serif; font-variant-numeric: tabular-nums; }
.text-button { justify-self: end; pointer-events: auto; color: var(--dim); border: 0; background: none; padding: 0; font: 9px/1 Arial, sans-serif; letter-spacing: .18em; cursor: pointer; }
.text-button:hover, .text-button:focus-visible { color: var(--bone); outline: none; }

.curtain {
  position: fixed;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  background: var(--black);
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}
.curtain.visible { opacity: 1; pointer-events: auto; }
.curtain::before {
  content: "";
  position: absolute;
  width: min(78vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(231,223,210,.07);
  border-radius: 50%;
  box-shadow: 0 0 0 12vw rgba(231,223,210,.018), 0 0 0 24vw rgba(231,223,210,.01);
}

.intro-copy, .death-copy { position: relative; width: min(760px, 100%); text-align: center; }
.kicker { margin: 0 0 18px; color: var(--amber); font: 9px/1 Arial, sans-serif; letter-spacing: .42em; }
h1 { margin: 0; font: 400 clamp(92px, 21vw, 240px)/.67 Georgia, serif; letter-spacing: -.12em; }
h1 span { display: inline-block; color: var(--amber); transform: translateY(-.05em) rotate(9deg); }
.thesis { margin: 34px 0 26px; color: #b5aea3; font-size: clamp(17px, 2vw, 24px); line-height: 1.35; font-style: italic; }
.instructions { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 28px; color: var(--dim); font: 9px/1.5 Arial, sans-serif; letter-spacing: .12em; }
.instructions p { margin: 0; }
.instructions b { color: var(--bone); margin-right: 5px; }

.start-button {
  width: min(390px, 100%);
  margin-top: 30px;
  padding: 17px 19px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  color: var(--black);
  background: var(--bone);
  border: 0;
  border-radius: 0;
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: .18em;
  cursor: pointer;
}
.start-button i { opacity: .55; font: italic 12px Georgia, serif; letter-spacing: 0; }
.start-button:hover, .start-button:focus-visible { background: var(--amber); outline: 1px solid var(--amber); outline-offset: 5px; }
.best-line { margin-top: 15px; color: #4f4b45; font: 8px/1 Arial, sans-serif; letter-spacing: .16em; }
.best-line b { color: var(--dim); }

.death-copy h2 { margin: 0; color: var(--blood); font: 400 clamp(74px, 16vw, 180px)/.72 Georgia, serif; letter-spacing: -.09em; }
.death-copy > p:not(.kicker) { margin: 32px 0 0; color: var(--dim); font: 10px/1.8 Arial, sans-serif; letter-spacing: .17em; }

.message {
  position: fixed;
  z-index: 4;
  left: 50%;
  bottom: 14%;
  transform: translate(-50%, 10px);
  color: var(--bone);
  font: italic 18px/1 Georgia, serif;
  opacity: 0;
  transition: opacity .3s, transform .3s;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 2px 12px #000;
}
.message.visible { opacity: 1; transform: translate(-50%, 0); }

.pulse-button {
  position: fixed;
  z-index: 5;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(22px, env(safe-area-inset-bottom));
  width: 76px;
  height: 76px;
  display: none;
  border: 1px solid rgba(231,223,210,.45);
  border-radius: 50%;
  background: rgba(5,4,3,.58);
  color: var(--bone);
  font: 8px Arial, sans-serif;
  letter-spacing: .15em;
  backdrop-filter: blur(4px);
}
.touch-stick { position: fixed; z-index: 5; display: none; width: 86px; height: 86px; border: 1px solid rgba(231,223,210,.16); border-radius: 50%; pointer-events: none; }
.touch-stick i { position: absolute; width: 30px; height: 30px; left: 27px; top: 27px; border-radius: 50%; background: rgba(231,223,210,.25); }

@media (max-width: 700px) {
  .hud { grid-template-columns: 1fr auto; padding-top: max(16px, env(safe-area-inset-top)); }
  .run-data { position: fixed; top: 48px; left: 19px; right: 19px; justify-content: space-between; gap: 4px; }
  .run-data span { font-size: 7px; }
  .run-data strong { font-size: 14px; }
  .instructions { display: grid; gap: 8px; }
  .pulse-button { display: block; }
  .wordmark { font-size: 14px; }
  h1 { font-size: clamp(82px, 31vw, 150px); }
  .thesis { margin-top: 28px; }
}

@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; } }