/* Phone first, and only phone-first: this is played on his iPhone, one thumb, in the dark.
   Three fixed rows — HUD, scrolling log, action dock — using dvh so iOS Safari's collapsing
   toolbar cannot push the dock off the screen or leave a strip of background under it.
   Everything widens gracefully on a desktop by capping the column, not by relayout. */
:root {
  --soil:#0d0b09; --soil2:#17130f; --line:#2b2219;
  --ink:#e8dcc8; --dim:#9b8b74; --amber:#e0a94a; --blood:#b8543c; --moss:#7f9a5c;
  --pad:14px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; }
body {
  background:var(--soil); color:var(--ink);
  font:16px/1.55 ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  overscroll-behavior:none;
}

/* ── HUD ───────────────────────────────────────────────────────────────────── */
#hud {
  flex:0 0 auto; padding:calc(env(safe-area-inset-top) + 10px) var(--pad) 10px;
  background:linear-gradient(#14100c,#0d0b09); border-bottom:1px solid var(--line);
}
.hudtop { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.act { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--amber); }
.day { font-size:13px; color:var(--dim); font-variant-numeric:tabular-nums; }
.bars { display:flex; gap:10px; margin-top:9px; }
.bar {
  position:relative; flex:1; height:26px; border-radius:6px; overflow:hidden;
  background:#231c15; border:1px solid var(--line);
}
.bar b {
  position:absolute; inset:0 auto 0 0; width:0; transition:width .45s ease;
  background:linear-gradient(90deg,#8e3b2a,#c9604a);
}
#bar-res b { background:linear-gradient(90deg,#6d5a2a,#d9b45c); }
.bar label, .bar span {
  position:relative; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  line-height:24px; color:#f2e8d6; text-shadow:0 1px 2px #000a;
}
.bar label { margin-left:8px; }
.bar span { float:right; margin-right:8px; font-variant-numeric:tabular-nums; }
.pips { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.pip {
  font-size:11.5px; padding:3px 8px; border-radius:999px; background:#1d1711;
  border:1px solid var(--line); color:var(--dim); white-space:nowrap;
}
.pip i { font-style:normal; color:var(--ink); font-variant-numeric:tabular-nums; }
.pip.warn { border-color:#5c2f23; color:#e09a86; }
.pip.good { border-color:#3c4a2a; color:#bfd49c; }

/* ── the log ───────────────────────────────────────────────────────────────── */
#log {
  flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:var(--pad) var(--pad) 4px; display:flex; flex-direction:column; gap:14px;
  max-width:680px; width:100%; margin:0 auto;
}
.turn { animation:rise .4s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(6px); } }
@media (prefers-reduced-motion:reduce) { .turn { animation:none; } .bar b { transition:none; } }
.dm { font-size:17px; }
.sys { color:var(--moss); font-size:15.5px; font-style:italic; }
.you {
  color:var(--amber); font-size:13px; letter-spacing:.04em; text-transform:uppercase;
  border-left:2px solid #3a2d1c; padding-left:9px;
}
/* What he typed, in his own case. A sentence in small caps reads as shouting. */
.you.said { text-transform:none; font-size:15px; letter-spacing:0; font-style:italic; }
.facts { margin-top:6px; font-size:12.5px; color:var(--dim); }
.facts span { display:block; }
.engine { color:#7e6f5b; font-size:12px; margin-top:4px; }

/* ── the dock ──────────────────────────────────────────────────────────────── */
#dock {
  flex:0 0 auto; padding:10px var(--pad) calc(env(safe-area-inset-bottom) + 10px);
  background:linear-gradient(#0d0b09,#14100c); border-top:1px solid var(--line);
  max-width:680px; width:100%; margin:0 auto;
}
#choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:359px) { #choices { grid-template-columns:1fr; } }
#choices button {
  font:inherit; font-size:14.5px; color:var(--ink); text-align:left;
  background:#1d1711; border:1px solid #3a2d1c; border-radius:10px;
  padding:12px 11px; min-height:52px; cursor:pointer;
}
#choices button:active { background:#2a2118; transform:scale(.985); }
#choices button:disabled { opacity:.35; }
#free { display:flex; gap:8px; margin-top:9px; }
#text {
  flex:1; font:inherit; font-size:16px; color:var(--ink); background:#120f0b;
  border:1px solid var(--line); border-radius:10px; padding:11px 12px; min-width:0;
}
#text::placeholder { color:#6b5e4d; }
#text:focus { outline:none; border-color:#5a452a; }
#send {
  font:inherit; font-size:19px; width:52px; border-radius:10px; cursor:pointer;
  background:#2a2118; color:var(--amber); border:1px solid #3a2d1c;
}
#send:disabled, #text:disabled { opacity:.4; }
#waiting {
  display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--dim);
  letter-spacing:.05em; padding-bottom:9px;
}
#waitclock { margin-left:auto; font-variant-numeric:tabular-nums; }
.dot {
  width:7px; height:7px; border-radius:50%; background:var(--amber);
  animation:pulse 1.4s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity:.2; transform:scale(.7); } }
#err {
  margin-top:9px; font-size:13px; color:#e09a86; background:#1d110d;
  border:1px solid #4a241b; border-radius:8px; padding:9px 10px;
}

/* ── death ─────────────────────────────────────────────────────────────────── */
/* `display:flex` here beats the HTML `hidden` attribute, so the attribute alone left the
   death card sitting over a live game, blurring it and swallowing every tap. Spell the
   hidden case out. */
#over[hidden], #waiting[hidden], #err[hidden] { display:none; }
#over {
  position:fixed; inset:0; background:#07060590; backdrop-filter:blur(7px);
  display:flex; align-items:center; justify-content:center; padding:24px; z-index:9;
}
#over .card {
  background:#14100c; border:1px solid var(--line); border-radius:16px;
  padding:26px 22px; max-width:400px; width:100%; text-align:center;
}
#over h1 { margin:0 0 12px; font-size:23px; letter-spacing:.02em; color:var(--blood); }
#over p { margin:0 0 9px; font-size:15px; color:var(--ink); }
#over .cause { color:var(--dim); font-size:13.5px; font-style:italic; }
#over .best { color:var(--dim); font-size:12.5px; letter-spacing:.05em; }
#again {
  margin-top:16px; font:inherit; font-size:15px; width:100%; padding:14px;
  background:#2a2118; color:var(--amber); border:1px solid #4a3a22; border-radius:11px;
  cursor:pointer;
}