/* style.css — an RTS on a phone held in one hand.
 *
 * The canvas is the whole screen. Everything else floats on it and stays out of the
 * middle, because the middle is the map. Safe-area insets throughout: a role button under
 * the home bar is a role 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 here is turned off, and a `display` rule on the element
 * itself silently beats it. Said 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; z-index: 40;
  background: #0a0705; color: var(--dim); letter-spacing: .08em; font-size: 14px;
}

/* ── 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)) 16px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(#0a0705ee 48%, #0a070500);
  pointer-events: none;
}
#hud .row { display: flex; align-items: center; gap: 7px; }
.chip {
  font-size: 11.5px; letter-spacing: .04em; color: var(--dim); white-space: nowrap;
  background: #ffffff0f; border-radius: 999px; padding: 4px 10px;
  display: inline-flex; align-items: center; gap: 5px;
}
.chip b { color: var(--ink); font-weight: 600; }
.chip.dim { color: #8a7259; }

.gauge.food {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px;
  background: #ffffff0f; border-radius: 999px; padding: 4px 11px;
}
.gauge.food b { font-size: 15px; font-weight: 700; color: var(--amber); }
.gauge.food .of { font-size: 11px; color: var(--dim); }
.track {
  flex: 1; min-width: 26px; height: 5px; border-radius: 999px; background: #ffffff1a;
  overflow: hidden; display: block;
}
.track i { display: block; height: 100%; border-radius: 999px;
           background: linear-gradient(90deg, #6d5420, var(--amber)); transition: width .2s; }
.track.q { width: 54px; flex: none; }
.track.q i { background: linear-gradient(90deg, #8d2f23, #d8604a); }
body.low .track i { animation: pulse 1.1s infinite; }
@keyframes pulse { 50% { opacity: .45; } }

#bPause, #bNest {
  pointer-events: auto; cursor: pointer; border: 0; flex: none;
  background: #ffffff14; color: var(--ink); font: 600 12px/1 inherit;
}
#bPause { width: 34px; height: 34px; border-radius: 999px; font-size: 13px; }
#bNest { height: 26px; padding: 0 12px; border-radius: 999px; }

/* ── narration ───────────────────────────────────────────────────────────────────── */
#ticker {
  position: fixed; z-index: 10; left: 0; right: 0;
  top: calc(104px + env(safe-area-inset-top, 0));
  padding: 0 calc(18px + env(safe-area-inset-left, 0));
  pointer-events: none; text-align: center;
}
#ticker p {
  margin: 3px auto; max-width: 30em; font-size: 13px; line-height: 1.4;
  text-shadow: 0 1px 10px #000, 0 0 3px #000;
}
#ticker p.reeed { font-style: italic; color: #e8cfa8; }

#hint {
  position: fixed; z-index: 10; left: 0; right: 0;
  bottom: calc(76px + env(safe-area-inset-bottom, 0));
  margin: 0; text-align: center; font-size: 10.5px; letter-spacing: .05em;
  color: #7e6a56; pointer-events: none;
}

/* ── the command layer: three jobs ───────────────────────────────────────────────── */
#roles {
  position: fixed; z-index: 12; left: 0; right: 0;
  bottom: calc(var(--pad) + env(safe-area-inset-bottom, 0));
  padding: 0 calc(8px + env(safe-area-inset-left, 0));
  display: flex; gap: 6px; justify-content: center;
}
.chip-role {
  flex: 1; max-width: 136px; display: flex; align-items: center;
  background: #1a120cdd; border: 1px solid #ffffff1f; border-radius: 13px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.chip-role.short { border-color: #e9a63f88; }
.chip-role button {
  pointer-events: auto; cursor: pointer; flex: none;
  width: 36px; height: 48px; border: 0; background: #ffffff10;
  color: var(--ink); font: 600 19px/1 inherit;
}
.chip-role button:active { background: #e9a63f44; }
.chip-role .rl {
  flex: 1; min-width: 0; text-align: center; font-size: 9.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--dim); line-height: 1.15; padding: 0 2px;
}
.chip-role .rl b { display: block; font-size: 17px; color: var(--ink); letter-spacing: 0; }
#c_forager .rl b { color: #f0a93c; }
#c_soldier .rl b { color: #e4664c; }
#c_digger  .rl b { color: #d8c9a6; }

/* ── overlays ────────────────────────────────────────────────────────────────────── */
#paused, #end {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center;
  background: #06040380; backdrop-filter: blur(3px);
}
#paused { cursor: pointer; }
#paused p { letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }
#paused p::after { content: '\A tap to resume'; white-space: pre; font-size: 11px;
  letter-spacing: .14em; opacity: .6; }
#end { background: #060403ee; }
#end .card { max-width: 23em; padding: 0 28px; text-align: center; }
#end h1 { font-size: 25px; margin: 0 0 10px; font-weight: 700; }
#end .cause { color: var(--dim); font-size: 15px; margin: 0 0 22px; }
#end .score { font-size: 16px; margin: 0 0 6px; }
#end .score b { font-size: 32px; color: var(--amber); font-weight: 700; }
#end .score span { color: var(--dim); font-size: 13px; }
#end .score span b { font-size: 16px; color: var(--ink); }
#end .note { color: #7e6a56; font-size: 12.5px; margin: 20px 0 26px; line-height: 1.6; }
#end 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 map needs the height back. */
@media (orientation: landscape) and (max-height: 460px) {
  #hud { padding-bottom: 8px; }
  #hud .small .chip.dim { display: none; }
  #ticker { top: calc(74px + env(safe-area-inset-top, 0)); }
  #ticker p:not(:last-child) { display: none; }
  #hint { display: none; }
  .chip-role button { height: 40px; }
}