/* Deadfall — portrait-first survival camp.
   The interface is the world: energy rides above the survivor, the fire's
   life is an arc around the fire, and every action is a badge floating
   over the thing it acts on. What is left in the DOM is the day count,
   the stores, and the build bar, and even those speak in icons. */

:root {
  --night: #141a12;
  --panel: #1d251a;
  --card: #f2ead6;
  --ink: #22201a;
  --muted: #8d9683;
  --pale: #d9dfcd;
  --flame: #e8a33d;
  --green: #7fa860;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--night);
  color: var(--pale);
  display: flex; flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none;
}
.df-dim { color: var(--muted); }

/* ── Header: the day count is the score, so it stays. ─────────────── */
.df-top {
  flex: none; z-index: 20;
  /* Three fixed columns: back, day, restart. Flex let the centre column
     grow and shove the restart button off the right edge. */
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: .4rem;
  padding: calc(.4rem + env(safe-area-inset-top)) .6rem .4rem;
  background: var(--night);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
}
.df-back {
  color: var(--muted); text-decoration: none; font-size: 1.4rem; line-height: 1;
  padding: .3rem .5rem; border-radius: 8px;
}
.df-back:active { background: rgba(255,255,255,.12); }
.df-day {
  min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: .45rem;
}
.df-day canvas { display: block; }
.df-day b {
  font-size: 1.5rem; font-weight: 800; color: var(--flame);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.df-brand {
  font-size: .6rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--muted); line-height: 1.15; text-align: right;
  width: 2.6rem;
}

/* ── Stage ───────────────────────────────────────────────────────── */
.df-stage { position: relative; flex: 1; min-height: 0; }
#camp { display: block; width: 100%; height: 100%; touch-action: none; }

/* ── Stores ──────────────────────────────────────────────────────── */
.df-ledger {
  flex: none; display: flex; align-items: center; gap: .1rem;
  padding: .3rem .7rem; background: var(--panel);
  overflow-x: auto; scrollbar-width: none;
}
.df-ledger::-webkit-scrollbar { display: none; }
.df-res {
  flex: none; display: flex; align-items: center; gap: .1rem;
  padding: .1rem .35rem .1rem .1rem;
}
.df-res canvas { display: block; }
.df-res b {
  font-size: .82rem; font-weight: 700; color: var(--pale);
  font-variant-numeric: tabular-nums;
}
.df-ledger-empty { height: 26px; }

/* ── Build bar ───────────────────────────────────────────────────── */
.df-buildbar { flex: none; background: var(--panel); padding: 0 .45rem .45rem; }
.df-chips {
  display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; padding: .2rem;
}
.df-chips::-webkit-scrollbar { display: none; }
.df-chip {
  position: relative; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: .12rem;
  background: #2a3326; border: 1.5px solid #3d4a36; border-radius: 12px;
  padding: .3rem .4rem .25rem; cursor: pointer;
  font-family: inherit; color: #9aa78d;
  opacity: .55;
}
.df-chip.ok { background: #37452f; border-color: var(--green); opacity: 1; }
.df-chip.auto.ok { border-color: var(--flame); }
.df-chip canvas { display: block; }
.df-chip:active { transform: translateY(1px); }
/* Cost: one small icon per input, with its number. */
.df-cost { display: flex; align-items: center; gap: .18rem; }
.df-cost span { display: flex; align-items: center; gap: .05rem; }
.df-cost i {
  font-style: normal; font-size: .62rem; font-weight: 700;
  font-variant-numeric: tabular-nums; color: #c6d1b6;
}
.df-chip.ok .df-cost i { color: #eaf2dc; }
.df-cost span.short i { color: #e07a5f; }
/* A gear pip marks the builds that retire a chore for you. */
.df-chip.auto::after {
  content: ''; position: absolute; top: .2rem; right: .2rem;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--flame); box-shadow: 0 0 0 2px #2a3326;
}
.df-chip-empty { height: 52px; }

/* ── Footer ──────────────────────────────────────────────────────── */
.df-foot {
  flex: none; display: flex; align-items: center; justify-content: flex-end;
  background: var(--night);
  padding: .2rem .9rem calc(.2rem + env(safe-area-inset-bottom));
}
/* Restart lives in the header, where it can actually be found. */
/* Pinned over the scene's top-right. Kept out of the header grid, which
   kept squeezing it past the right edge of a 430px phone. */
.df-reset {
  position: absolute; top: .5rem; right: .5rem; z-index: 8;
  background: rgba(12,18,10,.72); border: 1px solid rgba(226,236,214,.35);
  color: #e2ecd6; border-radius: 999px;
  padding: .34rem .8rem; font-size: .72rem; font-weight: 700;
  cursor: pointer; font-family: inherit; line-height: 1.2;
}
.df-reset:active { background: rgba(226,236,214,.25); }
.df-reset:active { background: rgba(255,255,255,.1); }

/* ── Refusal cues (Phase A2/A3) ──────────────────────────────────────
   The shake alone cannot tell "you tapped nothing" from "you are too
   tired" or "your hands are full". These sit over the survivor's own
   vitals, positioned in JS each time they fire, and never carry text. */
.df-cue { position: absolute; z-index: 15; pointer-events: none; transform: translate(-50%, -50%); }
.df-cue-tired {
  border-radius: 3px;
  background: #c4452f;
  animation: dfCueTired .34s ease-in-out 2;
}
@keyframes dfCueTired {
  0%   { opacity: 0; }
  50%  { opacity: .92; }
  100% { opacity: 0; }
}
.df-cue-full { display: flex; align-items: center; gap: .3em; }
.df-cue-full span {
  display: block; border-radius: 50%; background: #e2ecd6;
  animation: dfCueDot .85s ease-in-out infinite;
}
.df-cue-full span:nth-child(2) { animation-delay: .1s; }
.df-cue-full span:nth-child(3) { animation-delay: .2s; }
@keyframes dfCueDot {
  0%, 100% { transform: scale(.55); opacity: .35; }
  50%      { transform: scale(1); opacity: 1; }
}

/* ── Floating gains ──────────────────────────────────────────────── */
.df-float {
  position: fixed; z-index: 60; pointer-events: none;
  transform: translate(-50%, 0);
  display: flex; align-items: center; gap: .15rem;
  font-weight: 800; font-size: 1rem; color: #d8ef9e;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
  font-variant-numeric: tabular-nums;
  animation: dfFloat .95s ease-out forwards;
}
.df-float canvas { display: block; }
@keyframes dfFloat {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, -56px); }
}

/* ── Modals ──────────────────────────────────────────────────────── */
.df-modal {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(8,12,8,.72);
  display: flex; align-items: center; justify-content: center; padding: 1.1rem;
}
.df-modal[hidden] { display: none; }
.df-card {
  background: var(--card); color: var(--ink);
  border-radius: 16px; padding: 1.3rem 1.15rem;
  max-width: 350px; width: 100%; text-align: center;
  box-shadow: 0 12px 44px rgba(0,0,0,.55);
}
.df-card.wide { max-width: 430px; text-align: left; max-height: 88dvh; display: flex; flex-direction: column; }
.df-card h3 { color: #6f4f2a; margin-bottom: .5rem; font-size: 1.12rem; }
.df-card p { font-size: .86rem; color: #5c5344; line-height: 1.45; margin-bottom: .5rem; }
.df-card p b { color: #7a4a1c; }
.df-btn {
  margin-top: .7rem; width: 100%;
  background: #6f4f2a; color: #fdf5e4; border: none; cursor: pointer;
  font-family: inherit; font-weight: 700; font-size: .95rem; border-radius: 12px;
  padding: .72rem 1.2rem; min-height: 50px;
  box-shadow: 0 2px 0 #46301a;
}
.df-btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.df-btn:disabled { background: #b3a68f; box-shadow: none; cursor: default; }
.df-btn b { font-variant-numeric: tabular-nums; }

/* ── Kit picker ──────────────────────────────────────────────────── */
.df-kitlist {
  display: flex; flex-direction: column; gap: .34rem;
  overflow-y: auto; margin: .4rem -.2rem 0; padding: .2rem;
  flex: 1 1 auto; min-height: 0;
}
.df-kit {
  display: flex; flex-direction: column; gap: .12rem;
  background: #e6dcc4; border: 2px solid #d6c9aa; border-radius: 10px;
  padding: .45rem .6rem; cursor: pointer; text-align: left;
  font-family: inherit; color: #5c5344;
}
.df-kit b { font-size: .84rem; color: #4b3a1f; }
.df-kit span { font-size: .7rem; line-height: 1.3; }
.df-kit.on { background: #cfe0b4; border-color: #6f8f45; }
.df-kit.on b { color: #3c5220; }