/* Common Ground — Phase A chrome. Deliberately thin: the canvas is the game,
   and playtest 01 proved that anything competing with it for attention just
   makes the map harder to read. */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: #0a160f; color: #dfe6d8;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#cg-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  display: block; touch-action: none; cursor: crosshair;
}

/* ── top bar ── */
#cg-hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 3;
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  background: linear-gradient(180deg, rgba(8,16,11,0.86), rgba(8,16,11,0));
  pointer-events: none;
}
#cg-hud .grp { display: inline-flex; align-items: baseline; gap: 5px; }
#cg-hud i {
  font-style: normal; font-size: 10px; letter-spacing: 0.09em;
  text-transform: uppercase; color: #7d9484;
}
#cg-hud b { font-size: 15px; font-weight: 600; color: #e8dfc6; }
#cg-reset {
  margin-left: auto; pointer-events: auto;
  background: rgba(30,52,36,0.75); color: #a9c0ad;
  border: 1px solid rgba(150,190,160,0.22); border-radius: 6px;
  padding: 5px 10px; font-size: 11px; cursor: pointer;
}
#cg-reset:hover { background: rgba(44,74,52,0.9); color: #dfe6d8; }

/* ── toast ── */
#cg-toast {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 4;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 54px);
  pointer-events: none; text-align: center; width: min(92vw, 460px);
}
#cg-toast .msg {
  display: inline-block; padding: 7px 14px; border-radius: 8px;
  background: rgba(10,20,14,0.86); border: 1px solid rgba(150,190,160,0.18);
  color: #dfe6d8; font-size: 13px;
}
#cg-toast .msg.good { color: #b8e6a8; border-color: rgba(150,230,140,0.3); }
#cg-toast .msg.bad  { color: #f0b0a0; border-color: rgba(240,150,130,0.3); }

/* ── footer hint ── */
#cg-hint {
  position: fixed; left: 0; right: 0; z-index: 3;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  text-align: center; font-size: 11px; color: #6f8676; pointer-events: none;
}
@media (max-width: 560px) {
  #cg-hud { gap: 10px; }
  #cg-hud b { font-size: 13px; }
  #cg-hint { font-size: 10px; padding: 0 14px; }
}

/* ── the way home ──
   Added after the Phase A playtest: "I do get lost." The needle points in
   SCREEN space, which is the only bearing that means anything on a grid tilted
   45 degrees, and the number is the walk you have left in steps. */
#cg-hud .compass b { display: inline-flex; align-items: center; gap: 5px; }
#hud-arrow {
  width: 14px; height: 14px; display: block;
  fill: #e8dfc6; transform-origin: 50% 50%;
  transition: transform 90ms linear;
}
#hud-dist { min-width: 2ch; }

/* ── the larder ──
   A running tally of what you are carrying. Deliberately a strip rather than a
   panel: it has to be readable at a glance mid-walk without covering the map,
   which is the mistake the v1 UI made. */
#cg-larder {
  position: fixed; left: 0; right: 0; z-index: 3;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 0 12px; pointer-events: none;
}
#cg-larder .itm {
  background: rgba(10,20,14,0.78); border: 1px solid rgba(150,190,160,0.16);
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px; color: #b9cbb4;
}
#cg-larder .itm b { color: #e8dfc6; font-weight: 600; }
#cg-larder .itm.empty { color: #63795f; border-color: rgba(150,190,160,0.08); }
@media (max-width: 560px) { #cg-larder .itm { font-size: 10.5px; padding: 2px 8px; } }

/* Carrying capacity. Turns amber as you fill and red when you must walk home,
   so the limit is felt before it bites rather than only when it refuses. */
#hud-carry.heavy { color: #e8c07a; }
#hud-carry.full  { color: #f0a090; animation: cg-full 1.1s ease-in-out infinite; }
/* A full pair of arms is the one state that silently stops the game working,
   so it gets the only animated element in the whole interface. */
@keyframes cg-full {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
  #hud-carry.full { animation: none; }
}
#cg-larder .itm.at-homestead { background: rgba(28,44,30,0.82); color: #9fc0a4; }

/* Build button. Dim until everything it needs is actually in hand, so the
   difference between someday and now is visible without having to click. */
#cg-build {
  margin-left: auto; pointer-events: auto;
  background: rgba(30,52,36,0.75); color: #8fa894;
  border: 1px solid rgba(150,190,160,0.22); border-radius: 6px;
  padding: 5px 10px; font-size: 11px; cursor: pointer;
}
#cg-build.ready { background: rgba(58,96,50,0.92); color: #e8dfc6; border-color: rgba(190,230,160,0.5); }
#cg-build:not([hidden]) + #cg-reset { margin-left: 8px; }

/* ── the panel ──
   The first real dialog in the game: opened by clicking a staked plot to
   deliver materials, or the lean-to to read the homestead stores. It has to
   feel like it belongs to the same dark valley as the canvas, not like a web
   app landed on top of it, so no drop shadows and no bright chrome. */
#cg-panel {
  position: fixed; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
/* The browser's own [hidden] rule loses to the display:flex above (author
   styles always beat the user-agent sheet), so hidden has to be said again
   here or the panel would render, empty, forever. */
#cg-panel[hidden] { display: none; }

.scrim {
  position: absolute; inset: 0;
  background: rgba(6,12,9,0.55);
  pointer-events: auto;
}

.pnl {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  width: min(94vw, 420px); max-height: 82vh;
  background: rgba(12,24,16,0.97);
  border: 1px solid rgba(150,190,160,0.28);
  border-radius: 12px;
  overflow: hidden; /* body scrolls internally; the card's corners stay clean */
}

.pnl header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 14px 6px 16px;
}
#pnl-title { margin: 0; font-size: 15px; font-weight: 600; color: #e8dfc6; }
#pnl-close {
  flex: none; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: 999px;
  color: #7d9484; font-size: 20px; line-height: 1; cursor: pointer;
}
#pnl-close:hover { background: rgba(150,190,160,0.14); color: #dfe6d8; }

#pnl-sub { margin: 0 16px 8px; font-size: 11.5px; color: #7d9484; }
#pnl-sub:empty { display: none; } /* most panels (build progress) have nothing to say here */

#pnl-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 2px 16px 10px;
}

/* Section headings inside the body. Space above separates one group of rows
   from the next; the first one shouldn't float away from the header. */
.sect {
  margin-top: 14px;
  font-size: 10px; letter-spacing: 0.09em; text-transform: uppercase;
  color: #7d9484;
}
.sect:first-child { margin-top: 0; }

.row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 40px; padding: 8px 2px;
  border-bottom: 1px solid rgba(150,190,160,0.10);
}
.row:last-child { border-bottom: none; }
.nm { flex: 1; min-width: 0; color: #dfe6d8; }
.qty { flex: none; color: #b9cbb4; font-size: 12.5px; font-variant-numeric: tabular-nums; }

/* An optional second line under the name (a short detail, or the progress
   bar below). Works whether it lands nested inside .nm or as a plain sibling
   of .nm/.qty in the row; either way it drops to its own line. */
.sub {
  display: block; margin-top: 2px;
  font-size: 11px; font-weight: 400; color: #7d9484;
}
.row > .sub { flex-basis: 100%; margin-top: 4px; }

/* The main verb of the panel: click a row to hand that material over. It
   needs to read as the most inviting thing in the card, so it gets the only
   raised background among the rows. */
.row.give {
  cursor: pointer;
  padding-left: 8px; padding-right: 8px;
  border-radius: 8px; border-bottom-color: transparent;
  background: rgba(143,196,122,0.12);
  transition: background 120ms ease;
}
.row.give:hover  { background: rgba(143,196,122,0.20); }
.row.give:active { background: rgba(143,196,122,0.28); }

/* Fully delivered: settle down, go green, stop inviting a click. */
.row.done { cursor: default; }
.row.done .nm, .row.done .qty { color: #b8e6a8; }
.row.give.done {
  cursor: default; background: rgba(184,230,168,0.10);
}
.row.give.done:hover, .row.give.done:active { background: rgba(184,230,168,0.10); }

/* Not enough of this in the stores yet. Dim the whole row so the eye skips
   past it, and let the number itself carry the bad news. */
.row.short { opacity: 0.6; }
.row.short .qty { color: #f0b0a0; }

/* A thin fill track for "how much of this requirement is delivered". The
   width of the inner <i> is set inline by the game logic, not here. */
.bar {
  height: 4px; margin-top: 6px; border-radius: 999px;
  background: rgba(150,190,160,0.15);
  overflow: hidden;
}
.bar i { display: block; height: 100%; background: #8fc47a; border-radius: inherit; }
.row > .bar { flex-basis: 100%; }

.hint {
  margin-top: 8px;
  font-size: 11px; font-style: normal; color: #6f8676;
}
.empty {
  padding: 10px 2px;
  font-size: 11px; font-style: normal; color: #6f8676;
}

#pnl-foot {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid rgba(150,190,160,0.14);
}
.btn {
  background: rgba(30,52,36,0.75); color: #a9c0ad;
  border: 1px solid rgba(150,190,160,0.22); border-radius: 6px;
  padding: 8px 12px; font-size: 12px; cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.btn:hover { background: rgba(44,74,52,0.9); color: #dfe6d8; }

/* The loud one: raising the building. Reuses the same green as the ready
   build button in the top bar, so "this is buildable now" always looks the
   same colour everywhere in the game. */
.btn.go {
  background: rgba(58,96,50,0.92); color: #e8dfc6;
  border-color: rgba(190,230,160,0.5);
}
.btn.go:hover { background: rgba(70,112,60,0.96); }

/* The destructive one: abandoning the plot. It hands the materials back, so
   it shouldn't read as scary, just as clearly a different choice. */
.btn.warn { color: #d99a8c; border-color: rgba(240,150,130,0.35); }
.btn.warn:hover { background: rgba(58,30,26,0.4); color: #f0b0a0; }

/* pointer-events:none means a disabled button can never enter :hover in the
   first place, which is a cleaner guarantee of "no hover change" than trying
   to out-specificity every hover rule above. */
.btn[disabled] { opacity: 0.5; cursor: default; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .row.give, .btn { transition: none; }
}

@media (max-width: 560px) {
  /* Phone play is the target: the card becomes a bottom sheet, pinned full
     width so it's comfortable to thumb one-handed. */
  .pnl {
    position: fixed; left: 0; right: 0; bottom: 0;
    width: 100%; max-width: none; max-height: 86vh;
    border-radius: 12px 12px 0 0;
    border-left: none; border-right: none; border-bottom: none;
  }
  #pnl-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .row { min-height: 44px; }
}