/* Read-only town HUD: fixed inventory slots and a three-priority survival list. */
#topbar { gap: 6px 12px; padding: 8px 12px; }
#res-row { display: flex; align-items: stretch; flex: 1 1 100%; gap: 6px 10px; min-width: 0; }
#core-resources { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; flex: 1 1 0; min-width: 0; }
#core-resources .res { min-width: 0; padding: 5px 8px; border: 1px solid #665743; border-radius: 5px; background: rgba(62, 51, 37, .68); gap: 5px; }
#res-row .res-label { display: inline; color: #d6c9b2; font-size: 12px; }
#res-row .res b { min-width: 0; margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
#res-row .res-icon { flex: 0 0 20px; width: 20px; height: 20px; }
#res-row .res-total { background: rgba(101, 78, 40, .5); border-color: #9b8050; }
#res-row #net-food { min-width: 24px; text-align: right; font-size: 11px; font-variant-numeric: tabular-nums; }
#resource-more { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 4px; min-width: 76px; padding: 5px 8px; border: 1px solid #8b7651; border-radius: 5px; color: #e8dcc0; background: #3c3224; font: inherit; cursor: pointer; }
#resource-more .ui-icon { width: 16px; height: 16px; }
#resource-more[aria-expanded="true"] .ui-icon { transform: rotate(180deg); }
#resource-warning-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 9px; background: #c29b4e; color: #201a12; font-size: 11px; font-weight: 700; }
#resource-more.has-warning { border-color: #c29b4e; }
#resource-more.has-urgent { border-color: #e99b8a; }
#resource-more.has-urgent #resource-warning-count { background: #e99b8a; }
#secondary-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); flex: 1 1 100%; width: 100%; gap: 5px 10px; padding: 8px; max-height: min(190px, 28vh); overflow: auto; overscroll-behavior: contain; border: 1px solid #665743; border-radius: 5px; background: #28231c; }
#secondary-resources .res { min-width: 0; padding: 3px 6px; border: 1px solid transparent; border-radius: 4px; }
#res-row .resource-warning { border-color: #c29b4e; }
#res-row .resource-urgent { border-color: #e99b8a; }
#date { display: flex; align-items: center; gap: 5px; color: #d3bc8f; font-size: 12px; }
#date .ui-icon, #pop > .ui-icon { width: 16px; height: 16px; flex: none; }
#pop { gap: 4px; font-size: 12px; }
#pop small { font-size: 11px; }
#pop .town-health { padding-left: 6px; margin-left: 2px; font-size: 11px; }
#speed { gap: 3px; margin-left: auto; flex: 0 0 auto; }
#speed button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 32px; padding: 4px 6px; font-size: 11px; }
#speed button .ui-icon { width: 14px; height: 14px; }
#sys { gap: 3px; flex: 0 0 auto; }
#sys button, #sys #btn-production-goals { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-height: 32px; padding: 5px; font-size: 11px; }
#sys button .ui-icon { width: 18px; height: 18px; }
#sys .save-attention { border-color: #e4b362; background: #5b4527; }
#save-status { flex: 1 1 100%; color: #ebc483; padding: 4px 7px; border-left: 3px solid #c29b4e; font-size: 12px; line-height: 1.4; }
#survival-guide { width: min(360px, calc(100vw - 24px)); padding: 9px; white-space: normal; pointer-events: auto; background: rgba(28, 25, 20, .95); border-color: #695b44; }
.guide-heading { display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 6px; }
.guide-heading h2 { font-size: 13px; font-weight: 600; color: #e2cfaa; }
#guide-count { color: #efac9a; font-size: 11px; }
#guide-toggle { margin-left: auto; min-height: 28px; padding: 3px 9px; border: 1px solid #79674a; border-radius: 4px; background: #3c3224; color: #dbc9a6; font: inherit; font-size: 11px; cursor: pointer; }
#guide-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
#guide-list li { display: flex; align-items: flex-start; gap: 7px; border-left: 2px solid #888378; border-radius: 2px; padding: 5px 6px; color: #c3beb2; background: rgba(151, 142, 123, .07); line-height: 1.45; font-size: 12px; }
#guide-list .guide-level { flex: 0 0 auto; padding-top: 1px; color: #aaa597; font-size: 11px; }
#guide-list .guide-text { min-width: 0; }
#guide-list li[data-level="urgent"] { border-color: #df8c7a; color: #f0b7a8; background: rgba(157, 67, 48, .13); }
#guide-list li[data-level="urgent"] .guide-level { color: #efac9a; }
#guide-list li[data-level="recommend"] { border-color: #c4a462; color: #e0c68d; background: rgba(165, 128, 55, .1); }
#guide-list li[data-level="recommend"] .guide-level { color: #d8b976; }
#survival-guide.guide-expanded #guide-list { max-height: min(340px, calc(100vh - var(--hud-height) - var(--toolbar-height) - 100px)); overflow-y: auto; overscroll-behavior: contain; padding-right: 3px; }
#topbar [hidden], #survival-guide [hidden], #secondary-resources.hidden, #guide-list .hidden { display: none !important; }
@media (max-width: 1100px) {
  #topbar { gap: 5px 8px; padding: 6px 10px; }
  #core-resources .res { padding: 4px 5px; gap: 4px; }
  #res-row .res-label { font-size: 11px; }
  #res-row #net-food { display: none; }
  #pop .town-health { font-size: 11px; }
  #speed button { padding: 3px 5px; }
}
@media (max-width: 900px) {
  #core-resources { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  #resource-more { flex-direction: column; min-width: 52px; padding: 4px; gap: 2px; }
  #res-row #net-food { display: none; }
  #pop .town-health { border-left: 0; padding-left: 0; margin-left: 5px; }
  #sys { margin-left: 0; }
  #survival-guide { width: min(340px, calc(100vw - 24px)); }
}
@media (max-width: 480px) {
  #topbar { gap: 5px 7px; padding: 6px 8px; }
  #res-row { gap: 5px; }
  #res-row .res-icon { flex-basis: 16px; width: 16px; height: 16px; }
  #res-row .res-label { font-size: 11px; }
  #res-row .res b { font-size: 12px; }
  #core-resources .res { padding: 4px; gap: 3px; }
  #res-row #res-tools .res-label { font-size: 11px; }
  #date { font-size: 11px; }
  #pop { flex: 1 1 100%; font-size: 11px; }
  #speed { margin-left: 0; }
  #sys { margin-left: auto; }
  #speed button { min-height: 32px; gap: 2px; padding: 3px 4px; font-size: 11px; }
  #speed button .ui-icon { width: 12px; height: 12px; }
  #sys button, #sys #btn-production-goals { width: 30px; min-height: 32px; }
  #secondary-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-height: 650px) and (min-width: 761px) {
  #topbar { padding: 4px 8px; gap: 3px 8px; }
  #core-resources .res { padding: 3px 6px; }
  #res-row .res-icon { flex-basis: 18px; width: 18px; height: 18px; }
  #speed button, #sys button, #sys #btn-production-goals { min-height: 28px; height: 28px; }
  #survival-guide { padding: 6px 8px; }
  .guide-heading { min-height: 24px; margin-bottom: 4px; }
  #guide-toggle { min-height: 24px; }
  #guide-list { gap: 3px; }
  #guide-list li { padding: 3px 5px; font-size: 12px; }
}

/* At phone/zoom widths, labels keep a legible line above the quantity. */
@media (max-width: 480px) {
  #core-resources .res { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: center; gap: 1px 4px; }
  #core-resources .res-label { white-space: nowrap; font-size: 11px; }
  #core-resources .res b { grid-column: 1 / -1; justify-self: end; font-size: 13px; }
}
@media (max-width: 360px) {
  #core-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #speed, #sys { margin-left: 0; }
}