/* style.css — a phone held in one hand, in the dark.
 *
 * The canvas is the whole screen; everything else floats on it and stays out of the
 * middle, because the middle is where she is. Safe-area insets throughout: this is played
 * on an iPhone with a notch and a home bar, and a button under the home bar is a button
 * that does not work.
 */
:root {
  --ink: #f2e4d2;
  --dim: #b49c82;
  --hot: #e4713f;
  --amber: #e9a63f;
  --pad: 10px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* `hidden` is how every overlay in here is turned off, and a `display` rule on the
 * element itself silently beats it. Everything that can be hidden says so once, loudly. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0a0705; color: var(--ink);
  font: 15px/1.45 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  overscroll-behavior: none; touch-action: none; user-select: none;
  -webkit-user-select: none; -webkit-touch-callout: none;
}

#cv {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; touch-action: none;
}

#loading {
  position: fixed; inset: 0; display: grid; place-items: center;
  color: var(--dim); letter-spacing: .08em; font-size: 14px; z-index: 40;
  background: #0a0705;
}

/* ── the HUD ─────────────────────────────────────────────────────────────────────── */
#hud {
  position: fixed; z-index: 10;
  top: env(safe-area-inset-top, 0); left: 0; right: 0;
  padding: var(--pad) calc(var(--pad) + env(safe-area-inset-left, 0)) 14px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(#0a0705e8 46%, #0a070500);
  pointer-events: none;
}
#hud .row { display: flex; align-items: center; gap: 8px; }
#hud .spacer { flex: 1; }
.act { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.chip {
  font-size: 12px; letter-spacing: .06em; color: var(--dim);
  background: #ffffff0f; border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.chip b { color: var(--ink); font-weight: 600; }
#threatDots { letter-spacing: 1px; font-size: 11px; }
#threatDots.hot { color: var(--hot); }

#bPause {
  pointer-events: auto;
  width: 34px; height: 34px; border-radius: 999px; border: 0;
  background: #ffffff14; color: var(--ink); font: 600 13px/1 system-ui; cursor: pointer;
}

.bars { gap: 12px; }
.gauge { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.gauge .lbl {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); width: 58px; flex: none;
}
.gauge b { font-size: 12px; width: 20px; text-align: right; flex: none; color: var(--ink); }
.track {
  flex: 1; height: 7px; border-radius: 999px; background: #ffffff14; overflow: hidden;
  min-width: 0;
}
.track i { display: block; height: 100%; border-radius: 999px; transition: width .18s linear; }
.hp { background: linear-gradient(90deg, #8d2f23, #d8604a); }
.res { background: linear-gradient(90deg, #6d5420, var(--amber)); }
body.low .hp { animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* ── the ticker: what just happened to her, and nothing else ─────────────────────── */
/* Above the control column, never behind it: the pad is four stacked buttons tall and a
 * line of narration sitting under "Seal in" is a line nobody reads. */
#ticker {
  position: fixed; z-index: 10; left: 0; right: 0;
  bottom: calc(272px + env(safe-area-inset-bottom, 0));
  padding: 0 calc(16px + env(safe-area-inset-left, 0));
  pointer-events: none; text-align: center;
}
#ticker p {
  margin: 4px auto; max-width: 30em; font-size: 13.5px; line-height: 1.4;
  color: var(--ink); text-shadow: 0 1px 10px #000, 0 0 3px #000;
}
#ticker p.reeed { font-style: italic; color: #e8cfa8; }

#trailHint {
  position: fixed; z-index: 11; left: 0; right: 0;
  top: 50%; text-align: center; color: var(--amber); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; pointer-events: none;
  text-shadow: 0 2px 12px #000;
}

/* ── controls ───────────────────────────────────────────────────────────────────── */
#pad {
  position: fixed; z-index: 12;
  right: calc(var(--pad) + env(safe-area-inset-right, 0));
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0));
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
#pad button {
  pointer-events: auto; cursor: pointer;
  min-width: 96px; min-height: 46px; padding: 0 16px;
  border: 1px solid #ffffff1f; border-radius: 14px;
  background: #1a120ccc; color: var(--ink);
  font: 600 14px/1 inherit; letter-spacing: .02em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#pad button.big {
  min-height: 70px; min-width: 124px; font-size: 16px;
  background: #3a2109d9; border-color: #e9a63f55; color: #ffe9c4;
}
#pad button.on { background: #6b3a12; border-color: var(--amber); }
#pad button.off { opacity: .32; }
#pad #bTrail.on { background: #14433f; border-color: #4fd8c2; color: #bff6ec; }

/* ── overlays ───────────────────────────────────────────────────────────────────── */
#paused, #death {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  background: #06040380; backdrop-filter: blur(3px);
}
#paused p { letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
#death { background: #060403ee; }
#death .card { max-width: 23em; padding: 0 28px; text-align: center; }
#death h1 { font-size: 26px; margin: 0 0 10px; font-weight: 700; letter-spacing: -.01em; }
#death .cause { color: var(--dim); font-size: 15px; margin: 0 0 22px; }
#death .score { font-size: 17px; margin: 0 0 6px; }
#death .score b { font-size: 34px; color: var(--amber); font-weight: 700; }
#death .score span { color: var(--dim); font-size: 13px; }
#death .note { color: #7e6a56; font-size: 12.5px; margin: 20px 0 26px; line-height: 1.6; }
#death button {
  min-height: 50px; padding: 0 34px; border: 0; border-radius: 14px;
  background: var(--amber); color: #2a1a05; font: 700 15px/1 inherit; cursor: pointer;
}

/* Landscape on a phone: the HUD has to get out of the way of the thumbs. */
@media (orientation: landscape) and (max-height: 460px) {
  #hud { padding-bottom: 8px; }
  #hud .small { display: none; }
  #ticker { bottom: calc(96px + env(safe-area-inset-bottom, 0)); }
  #pad { flex-direction: row; align-items: flex-end; }
}