/* Readouts laid over the world: the stats panel and the minimap.
   Both are pointer-transparent — they never steal a tap meant for a tile. */

#hud {
  position:fixed; top:0; left:0; right:0; padding:10px 12px;
  display:flex; gap:10px; align-items:flex-start; pointer-events:none;
  font-variant-numeric:tabular-nums; font-size:12px; line-height:1.45;
}

.panel {
  background:rgba(12,20,28,.55); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.10); border-radius:8px; padding:6px 9px;
}

#stats b { font-weight:600; color:#8fd6a8; }

/* ── Score ─────────────────────────────────────────────────────────
   One row per side once there are two or more (core/teams.js): a colour
   dot, the name, and everything banked in that team's crates. Sits just
   above the minimap in the bottom-right corner, pointer-transparent like
   the rest of the readouts. */
#score {
  position:fixed; right:12px; bottom:124px; z-index:1;
  display:flex; flex-direction:column; gap:1px;
  min-width:104px; max-width:180px; pointer-events:none;
  font-size:12px; line-height:1.45; font-variant-numeric:tabular-nums;
}
#score[hidden] { display:none; }
#score .side {
  display:flex; gap:6px; align-items:center; opacity:.8;
  position:relative; transform-origin:100% 50%;
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
#score .side.mine { opacity:1; font-weight:600; }
#score .side i {
  width:9px; height:9px; border-radius:50%; flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
#score .side span { min-width:4em; }
#score .side b { font-weight:600; color:#8fd6a8; margin-left:auto; }

#minimap {
  position:fixed; right:12px; bottom:12px; width:104px; height:104px;
  border-radius:8px; border:1px solid rgba(255,255,255,.14);
  background:rgba(12,20,28,.55); pointer-events:none; overflow:hidden;
}
#minimap canvas { display:block; width:100%; height:100%; }

/* ── Resources ─────────────────────────────────────────────────────
   One chip per resource showing what the side has in storage. What is still
   in the pack is deliberately not shown — it counts once it is put away. */

#res { display:flex; gap:12px; align-items:center; }

#res .chip {
  display:inline-flex; gap:5px; align-items:center;
  transform-origin:50% 60%;
}
#res .chip b { font-weight:600; color:#8fd6a8; min-width:1.4em; }
/* The same coloured resource glyphs the inspect panel uses (inspect_*.svg),
   painted as images rather than masks so they keep their own colours. */
#res .chip .ric {
  width:16px; height:16px; display:block;
  background:var(--ric) center/contain no-repeat;
}
#res .chip[data-res="wood"]    .ric { --ric:url(../img/icons/inspect_wood.svg); }
#res .chip[data-res="stone"]   .ric { --ric:url(../img/icons/inspect_stone.svg); }
#res .chip[data-res="berries"] .ric { --ric:url(../img/icons/inspect_berries.svg); }

/* A count that changed gets one quick pop, so a gain reads even when the
   player's eyes are on the character rather than the corner. */
#res .chip.bump { animation:resBump .34s ease-out; }
@keyframes resBump {
  0%   { transform:scale(1); }
  35%  { transform:scale(1.28); }
  100% { transform:scale(1); }
}

/* ── Inspect ───────────────────────────────────────────────────────
   A line per fact — an icon and a number — for whatever is picked: for the
   character a heart and health, then what is in the pack by resource and
   the pack's load over its cap; for a tree, rock or bush the resource and
   its yield; for a storage a crate and its fill over its cap
   (client/inspect.js). Stacked above the gear in the lower-left corner,
   and pointer-transparent like the other readouts. */
#inspect {
  display:flex; flex-direction:column; gap:2px; pointer-events:none;
  font-size:13px; line-height:1.45; font-variant-numeric:tabular-nums;
  padding:5px 10px; opacity:.9;
}
#inspect[hidden] { display:none; }
/* Every row is icon, then text, from the left edge: the icon box is a fixed
   width whatever glyph it holds, so all the numbers start on one column. */
#inspect .row { display:flex; gap:6px; align-items:center; justify-content:flex-start; text-align:left; }
#inspect b { font-weight:600; color:#8fd6a8; }
#inspect span { opacity:.55; }
#inspect .iic {
  width:16px; height:16px; flex:none; display:block; background:currentColor;
  -webkit-mask:var(--iic) center/contain no-repeat;
          mask:var(--iic) center/contain no-repeat;
}
#inspect .row[data-ic="heart"]   .iic { --iic:url(../img/icons/inspect_heart.svg); color:#e0504f; }
/* The resources are drawn in their own colours — the crate's wood, the
   rock's grey, the bush's red — so they are painted as images, not masks. */
#inspect .row[data-ic="wood"]    .iic,
#inspect .row[data-ic="stone"]   .iic,
#inspect .row[data-ic="berries"] .iic {
  background:var(--iic) center/contain no-repeat; -webkit-mask:none; mask:none;
}
#inspect .row[data-ic="wood"]    .iic { --iic:url(../img/icons/inspect_wood.svg); }
#inspect .row[data-ic="stone"]   .iic { --iic:url(../img/icons/inspect_stone.svg); }
#inspect .row[data-ic="berries"] .iic { --iic:url(../img/icons/inspect_berries.svg); }
/* The half-full crate stands for any capacity — a storage's, the pack's. */
#inspect .row[data-ic="storage"] .iic { --iic:url(../img/icons/inspect_storage.svg); }

/* ── Notice ───────────────────────────────────────────────────────
   A single transient line for what has to be said rather than shown. */
#notice {
  position:fixed; left:50%; bottom:132px; transform:translate(-50%,6px);
  padding:7px 14px; border-radius:999px; pointer-events:none;
  background:rgba(12,20,28,.78); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12); color:#eef3f7;
  font-size:13px; opacity:0; transition:opacity .2s, transform .2s;
}
#notice.on { opacity:1; transform:translate(-50%,0); }