/* ══════════════════════════════════════════════════════════════════
   Queendom Farm — the game layer's shared chrome: the three header
   buttons and the five-tab bar. Module styles live in their own files
   (board.css, village.css, guides.css, wire.css, map.css); this one only
   holds what app.js itself draws for them.
   ══════════════════════════════════════════════════════════════════ */

.hdr-btn {
  position: relative; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line, rgba(244,239,229,.14));
  background: var(--card, rgba(244,239,229,.05)); color: inherit;
  padding: 0; cursor: pointer; flex: none;
}
.hdr-btn .ic { width: 18px; height: 18px; }
.hdr-btn > i {
  position: absolute; right: -4px; bottom: -3px; font: 600 9px/1 'JetBrains Mono', monospace;
  font-style: normal; padding: 2px 3px; border-radius: 6px;
  background: var(--bg, #12100d); border: 1px solid currentColor;
}
.hdr-btn.me { overflow: hidden; background: transparent; }
.hdr-btn.me svg { width: 32px; height: 32px; display: block; }
.hdr-btn.bell { color: #e9b44c; }
.hdr-btn.bell.urgent { color: #e4574b; animation: bellpulse 1.6s var(--ease, ease) infinite; }
@keyframes bellpulse { 50% { box-shadow: 0 0 0 6px rgba(228,87,75,.18); } }
@media (prefers-reduced-motion: reduce) { .hdr-btn.bell.urgent { animation: none; } }

/* Five tabs on a phone: the labels shrink before they wrap. */
.tabs button { min-width: 0; font-size: 11px; }
.tabs button span[data-t] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 360px) { .tabs button { font-size: 10px; } }

/* The indicator was sized for four tabs. */
.tabs::before { width: calc(100% / 5); }
.hdr-btn { border-color: var(--line); background: var(--panel); }
.hdr-btn > i { background: var(--bg); }
.hdr-btn.bell { color: var(--solar); }
.hdr-btn.bell.urgent { color: var(--now); }

/* Five controls do not fit beside a 30px title on a phone: "The property"
   wrapped to two lines. The tally becomes two short rows — the points and
   the rank on top, the three game buttons under them — which fits inside
   the height the title and its subtitle already take. */
.bar .tally {
  display: grid; grid-template-columns: repeat(3, auto); grid-auto-flow: row;
  justify-content: end; align-items: center; gap: 5px 6px;
}
.bar .tally .embers { grid-column: 1 / span 2; justify-self: end; }
.bar .tally #lvl { grid-column: 3; grid-row: 1; justify-self: end; }
.bar .tally .hdr-btn { width: 30px; height: 30px; }
.bar .tally .hdr-btn[hidden] { display: none; }
.bar .tally .hdr-btn.me svg { width: 28px; height: 28px; }
.bar h1 { white-space: nowrap; }
.bar.tight .tally .hdr-btn { display: none; }
.bar .tally #bell    { grid-row: 2; grid-column: 1; }
.bar .tally #langbtn { grid-row: 2; grid-column: 2; }
.bar .tally #mebtn   { grid-row: 2; grid-column: 3; }

/* ─── visitors (020, visitor.js) ─────────────────────────────────── */
.vs-card {
  display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--line-2);
  background: var(--panel);
}
.vs-card > div { flex: 1; min-width: 0; }
.vs-card b { display: block; font-weight: 640; }
.vs-card p { margin: 3px 0 0; color: var(--dim); font-size: 13.5px; line-height: 1.4; }
.vs-card.vs-visit { border-color: rgba(191,234,255,.28); background: linear-gradient(135deg, rgba(191,234,255,.07), var(--panel)); }
.vs-card.vs-reqs  { border-color: rgba(227,169,92,.35); background: linear-gradient(135deg, rgba(227,169,92,.08), var(--panel)); }
.vs-card .btn { flex: none; }
.vs-sheet { display: grid; gap: 10px; }
.vs-eyebrow { font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--water); }
.vs-title { margin: 0; font: italic 400 30px/1.1 'Instrument Serif', Georgia, serif; }
.vs-p { margin: 0; color: var(--dim); line-height: 1.5; }
.vs-l { font-size: 13px; color: var(--dim); margin-top: 4px; }
.vs-in { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--bg-2);
         border: 1px solid var(--line-2); border-radius: var(--r); padding: 12px 14px; min-height: 44px; }
.vs-in:focus-visible { outline: 2px solid var(--solar); outline-offset: 2px; }
.vs-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.vs-msg { margin: 0; color: var(--now); min-height: 1em; font-size: 13.5px; }
.vs-req { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-2); }
.vs-mail { color: var(--faint); font: 12.5px 'JetBrains Mono', monospace; overflow-wrap: anywhere; }

/* The publish sheet's calculator (app.js): three levels in a row and the
   line that shows the arithmetic. */
.chips.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; align-items: stretch; }
/* 🪤 A .chip is inline-flex and shrinks to its widest word, so inside a grid
   column it stayed 38px wide and the label ran out over the next row. */
.chips.grid3 > .chip { width: 100%; box-sizing: border-box; }
.chip.big.lvl { flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 10px;
                justify-content: flex-start; overflow-wrap: anywhere; hyphens: auto; }
.chip.big.lvl em {
  font: 600 15px/1 'JetBrains Mono', monospace; font-style: normal; color: var(--solar);
}
.chip.big.lvl b { font-size: 12.5px; line-height: 1.25; }
.chip.big.lvl.on { border-color: var(--solar); background: rgba(227,169,92,.10); }
.chip.big.lvl.on b, .chip.big.lvl.on em { color: var(--solar); }
.blurb.sum { margin: 6px 0 2px; font: 12.5px/1.5 'JetBrains Mono', monospace; color: var(--parchment); }