/* HeroRPG remake — theme ported from reference/site/theme_inline.css (authentic 2008 palette). */

body {
  background: #1b2127;
  color: #bec7cc;
  font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

table {
  font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  border-collapse: collapse;
}

td {
  font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

a:link, a:visited {
  color: #c4bb4b;
  text-decoration: none;
}

a:hover, a:active {
  color: #ffffff;
  text-decoration: underline;
}

/* .page = outer body panel */
.page {
  background-color: #3d5056;
  color: #1b2129;
  max-width: 900px;
  margin: 0 auto;
}

/* category header bar — gold bold text on dark blue-grey */
.tcat {
  color: #c4bb4b;
  font-weight: bold;
  background: #34404b;
  border-bottom: 1px solid #313131;
  padding: 3px 6px;
}

.tcat2, .tcatdet {
  color: #c4bb4b;
  font-weight: bold;
  background: #34404b;
  padding: 3px;
  border: 1px solid #313131;
}

.tcatdet {
  border-bottom: none;
}

/* sub-header row */
.thead {
  background: #3c4a56;
  color: #c4bb4b;
  font-weight: bold;
  font-family: tahoma, verdana, sans-serif;
  padding: 2px 4px;
  border-bottom: 1px solid #313131;
}

.alt0 { background-color: #72838b; }
.alt1 { background: #192229; color: #bec7cc; }

/* light content panel */
.panel, .smallpanel {
  background: #bec7cc;
  color: #1b2129;
  padding: 5px;
  border: 1px solid #313131;
}

.smallestpanel {
  background: #bec7cc;
  color: #1b2129;
  padding: 2px;
  border: 1px solid #313131;
}

.panelsurround {
  background-color: #72838b;
}

.panelborder { border: 1px solid #313131; }
.darkborder, .lightborder { border: 1px solid #313131; }
.contentpage { border: 1px solid #313131; }

.battlefield {
  background: #0B0F15;
  color: #bec7cc;
  padding: 6px;
}

.nav { border: 1px solid #313131; }

.button, button.hrpg {
  color: #c4bb4b;
  background: #3c4a56;
  font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  border: 1px solid #313131;
  padding: 2px 6px;
  cursor: pointer;
}

.button:hover, button.hrpg:hover {
  background: #4a5a68;
}

.button:disabled, button.hrpg:disabled {
  color: #777;
  cursor: default;
  background: #333;
}

select, input[type="text"], textarea, .bginput {
  color: #c4bb4b;
  font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  background: #3c4a56;
  border: 1px solid #313131;
}

.smallfont { font: 10px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; }
.tinyfont { font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif; }

.whitetext { color: #bec7cc; }
.greentext { color: darkgreen; font-weight: 600; }
.orangetext { color: #de9700; }
.time { color: #c4bb4b; }
.line { color: #313131; border-top: 1px solid #313131; height: 1px; }

/* ===== App shell layout (Phase 1 invention on top of ported classes; Phase 8: reworked to a
   centered fixed-width page — the original 2008 site's ".page" look — instead of hugging the
   top-left corner) ===== */

body {
  background: #1b2127;
}

#app {
  min-height: 100vh;
  background: #3d5056; /* .page background (reference/site theme_inline.css) so the app reads as
                           the classic site page floating on the dark #1b2127 body */
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 12px;
  box-sizing: border-box;
}

#titlebar {
  color: #c4bb4b;
  font-weight: bold;
  font-size: 16px;
  font-family: tahoma, verdana, sans-serif;
  padding: 4px 8px;
  margin-bottom: 6px;
}

#layout {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  max-width: none;
}

#leftcol {
  width: 200px;
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#maincol {
  flex: 1 1 480px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Narrow windows: stack the left column above the main column instead of squeezing both. */
@media (max-width: 800px) {
  #leftcol {
    width: 100%;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  #leftcol > div {
    flex: 1 1 200px;
  }
  #maincol {
    flex: 1 1 100%;
  }
}

.navlist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navlist li {
  border-bottom: 1px solid #313131;
}

.navlist li:last-child {
  border-bottom: none;
}

.navlist a {
  display: block;
  padding: 3px 8px;
  color: #1b2129;
}

.navlist a:hover {
  background: #a9b4bb;
}

.navlist a.active {
  background: #9aa6ad;
  font-weight: bold;
}

/* status bar cluster (HP/Energy/XP + weight) */
#statusbars {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.statbar-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.statbar-label {
  width: 42px;
  flex: 0 0 42px;
  color: #c4bb4b;
  font-weight: bold;
  text-align: right;
}

.statbar-track {
  flex: 1 1 auto;
  height: 12px;
  background: #0B0F15;
  border: 1px solid #313131;
  position: relative;
}

.statbar-fill {
  /* Fills are <span>s (index.html barRow); inline spans ignore width, so without this the
     top HP/Energy/XP bars rendered zero-width (no color). Battle bars only worked because
     screens.js sets display:block inline on the same class. */
  display: block;
  height: 100%;
}

.statbar-fill.hp { background: #a02020; }
.statbar-fill.energy { background: #2c9c3a; }
.statbar-fill.xp { background: #6a3d9a; }

.statbar-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  line-height: 12px;
  color: #ffffff;
  font-size: 9px;
  text-shadow: 1px 1px 1px #000;
}

.weight-readout {
  color: #bec7cc;
  padding: 2px 4px 0 46px;
}

/* generic content table */
.hrpg-table {
  width: 100%;
  border-collapse: collapse;
}

.hrpg-table td, .hrpg-table th {
  padding: 3px 5px;
  border-bottom: 1px solid #313131;
}

.skill-xp-track {
  width: 80px;
  height: 8px;
  background: #72838b;
  border: 1px solid #313131;
  display: inline-block;
  vertical-align: middle;
}

.skill-xp-fill {
  height: 100%;
  background: #6a3d9a;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.stat-row .stat-name {
  width: 90px;
  flex: 0 0 90px;
  font-weight: bold;
}

.stat-row .stat-value {
  width: 40px;
  flex: 0 0 40px;
  text-align: right;
}

.race-choice {
  border: 1px solid #313131;
  padding: 6px;
  margin-bottom: 6px;
  cursor: pointer;
  background: #a9b4bb;
}

.race-choice.selected {
  background: #9aa6ad;
  border: 1px solid #34404b;
}

.race-choice h3 {
  margin: 0 0 4px 0;
  color: #34404b;
}

.skillpoint-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.skillpoint-row .sp-name {
  width: 110px;
  flex: 0 0 110px;
}

.wizard-footer {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}

.center { text-align: center; }
.right { text-align: right; }
.mt4 { margin-top: 4px; }
.mt8 { margin-top: 8px; }
.mb8 { margin-bottom: 8px; }

/* ===== Phase 2: Inventory & items ===== */

/* unmet item requirements (New_Player_Guide.md: "If there are any listed in red, you cannot
   use the item.") */
.req-bad {
  color: #cc3333 !important;
  font-weight: bold;
}

/* Phase 9: unique (monster-only) equipment — gold-colored line in the item infobox, reusing the
   theme's category-header gold (#c4bb4b, see the .tcat rules above). */
.item-unique {
  color: #c4bb4b;
  font-weight: bold;
}

.equip-slot-label {
  flex: 1 1 auto;
}

.dropbox-row {
  display: flex;
  gap: 6px;
}

.dropbox {
  flex: 1 1 0;
  min-height: 40px;
  border: 2px dashed #313131;
  background: #a9b4bb;
  color: #1b2129;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6px;
}

.dropbox.drop-hover {
  background: #9aa6ad;
  border-color: #34404b;
}

.stat-row.dragging {
  opacity: 0.5;
}

.infobox-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.infobox {
  width: 320px;
  max-width: 90vw;
}

.infobox-close {
  float: right;
  cursor: pointer;
}

.infobox-tabs {
  display: flex;
  background: #3c4a56;
  border-bottom: 1px solid #313131;
}

.infobox-tab {
  padding: 3px 10px;
  cursor: pointer;
  color: #c4bb4b;
  font-weight: bold;
}

.infobox-tab.active {
  background: #bec7cc;
  color: #1b2129;
}

.infobox-body {
  max-height: 60vh;
  overflow-y: auto;
}

/* ===== Phase 3: Battle & Techs ===== */

.statbar-fill.fear { background: #d4c832; } /* yellow Fear bar (New_Player_Guide.md, Fear.md) */

/* Feature B (user-directed): persistent afflictions (Haunting) shown in dark red on Status and
   the battle "Your Vitality" panel — deliberately darker/less saturated than .req-bad (#cc3333,
   which flags unmet item requirements) so the two read as distinct signals. */
.affliction-red {
  color: #8b1a1a;
  font-weight: bold;
}

.battle-layout {
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.battle-left {
  width: 240px;
  flex: 0 0 240px;
}

.battle-right {
  flex: 1 1 auto;
  min-width: 0;
}

.battle-right .battlefield {
  border: 1px solid #313131;
  min-height: 120px;
}

.battle-actions {
  display: flex;
  gap: 4px;
}

.battle-action {
  flex: 1 1 0;
  padding: 4px 2px;
}

.battle-log {
  max-height: 160px;
  overflow-y: auto;
}

.techset-tabs {
  display: flex;
  background: #3c4a56;
  border: 1px solid #313131;
}

.techset-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.tech-slot {
  position: relative;
  width: 32px;
  height: 32px;
  border: 1px solid #313131;
  background: #72838b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.tech-slot.filled {
  background: #3c4a56;
}

.tech-slot.castable:hover {
  border-color: #c4bb4b;
}

.tech-glyph {
  font-size: 16px;
  line-height: 1;
}

.grade-Fire { color: #d06030; }
.grade-Water { color: #4090d0; }
.grade-Wind { color: #70c0a0; }
.grade-Earth { color: #a08040; }
.grade-Star { color: #d0c040; }
.grade-Light { color: #f0ead0; }
.grade-Dark { color: #8050a0; }
.grade-none { color: #bec7cc; }

.tech-row {
  cursor: pointer;
}

.tech-row.selected {
  background: #9aa6ad;
  outline: 1px solid #34404b;
}

.loot-icon {
  font-weight: bold;
}

/* ===== Phase 4: World & towns ===== */

/* Already-known Academy techs render greyed out (spec: "learned greyed"). */
.greyed {
  opacity: 0.55;
}

/* Footer homage — the original's "Powered by RadiantWeb and RadiantRPG" credit line
   (archived: homepage_2007.md / homepage_2008a.md); tooltip quotes the 2008-03-11 farewell. */
#footer {
  color: #72838b;
  text-align: center;
  padding: 10px 0 14px 0;
}

/* ===== Phase 8: pixel-art icons (Dungeon Crawl 32x32 tiles, CC0 — assets/CREDITS.md) ===== */

.icon32 {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
  vertical-align: middle;
}

.icon64 {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  vertical-align: middle;
}

/* Statusbars row spans the top at full app width (Phase 8: previously capped at 960px). */
#statusbars {
  max-width: none !important;
}

/* ===== Phase 8: Actions panel links (Explore/Hunt/Camp/facility quick links) ===== */

.actions-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.actions-list li {
  border-bottom: 1px solid #313131;
}

.actions-list li:last-child {
  border-bottom: none;
}

.actions-list a {
  display: block;
  padding: 3px 8px;
  color: #1b2129;
}

.actions-list a:hover {
  background: #a9b4bb;
}

.actions-sub {
  padding-left: 16px;
  font-size: 9px;
}

/* ===== v1.4 Mobile M0: foundation hygiene (docs/SPEC-MOBILE-UI.md §4 M0) =====
   Appended per the spec's containment strategy: all mobile work lives at the end of this file;
   nothing above this line is edited. These three rules are visually inert on desktop. */

html { -webkit-text-size-adjust: 100%; } /* stop iOS Safari auto-inflating the 10px verdana */
button, a { touch-action: manipulation; } /* kill the 300ms tap delay / double-tap zoom */
#app { min-height: 100dvh; } /* overrides the 100vh rule above only where dvh exists (mobile
  browser chrome); engines without dvh drop this declaration and keep the 100vh fallback */

/* ===== v1.4 Mobile M1: bottom tab bar base rule (SPEC-MOBILE-UI.md §3/§4) =====
   Lives OUTSIDE the media query, per the spec, so desktop (and any width above 640px) never
   shows the tab bar even before the query below is parsed. */
#mobiletabs { display: none; }

/* ===== v1.4 Mobile M1: responsive shell (docs/SPEC-MOBILE-UI.md §3/§4) =====
   Everything below is scoped to this single media query, appended after every rule above
   (including the M0 block) — containment strategy per the spec's risk section: desktop stays
   pixel-identical, the 800px tablet breakpoint above is untouched, and this block only ever
   ADDS or overrides rules for screens <= 640px wide. */
@media (max-width: 640px) {

  /* ---- A. Bottom tab bar ---- */
  #mobiletabs {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48px;
    background: #34404b; /* same slate as .tcat/.navlist chrome */
    border-top: 1px solid #313131;
    z-index: 20;
  }

  #mobiletabs a, #mobiletabs span {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #c4bb4b; /* gold-on-slate, matching .navlist's gold link color */
    font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    padding: 2px 3px;
    border-right: 1px solid #313131;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }

  #mobiletabs a:last-child, #mobiletabs span:last-child {
    border-right: none;
  }

  #mobiletabs a:hover {
    background: #4a5a68;
  }

  #mobiletabs a.active {
    background: #3c4a56;
    color: #ffffff;
    font-weight: bold;
  }

  /* Room at the bottom of the page so content never hides behind the fixed tab bar. */
  #app {
    padding-bottom: 56px;
  }

  /* ---- B. Layout re-flow ---- */

  /* #leftcol becomes a transparent grouping node: its three panels (Navigation/Actions/Save)
     flow as direct flex items of #layout so each can be independently ordered/hidden below,
     rather than moving as one fixed block (the desktop and 800px-tablet behavior). */
  #layout {
    display: flex;
    flex-direction: column;
  }
  #leftcol {
    display: contents;
  }

  /* Navigation panel hidden — #mobiletabs replaces it. */
  #navwrap {
    display: none;
  }

  /* Design call (M1 report): the Actions chip row is contextual game content (Explore/Hunt/Camp/
     quest tokens), not chrome, so it renders directly above #maincontent per SPEC-MOBILE-UI.md
     §3. The Save panel (rarely used mid-session) is chrome, relocated BELOW #maincontent via
     flex order rather than hidden, per the brief's fallback option (a 7th tab-bar slot was
     rejected — §3/§4 both specify "6 equal slots" for the 6 NAV_ITEMS, and a 7th narrow slot for
     "⚙ Save" would either break that 6-slot grid or squeeze every label under ~45px). */
  #actionswrap { order: 1; }
  #maincol { order: 2; }
  #savewrap { order: 3; }

  /* Status bars: sticky top, compressed. */
  #statusbars {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .statbar-label {
    width: 34px;
    flex: 0 0 34px;
    font-size: 9px;
  }
  .statbar-track {
    height: 9px;
  }
  .statbar-text {
    line-height: 9px;
    font-size: 8px;
  }
  .weight-readout {
    display: inline-block;
    padding: 2px 4px 0 4px; /* drop the desktop 46px label-alignment indent */
    font-size: 9px;
  }

  /* Actions panel -> horizontal chip row, CSS re-flow only (same DOM, same render function). */
  #actionswrap .tcat {
    font-size: 9px;
    padding: 2px 6px;
  }
  #actionspanel {
    padding: 4px;
  }
  .actions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .actions-list li {
    border-bottom: none;
  }
  .actions-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 4px 10px;
    border: 1px solid #313131;
    background: #a9b4bb;
    white-space: nowrap;
    box-sizing: border-box;
  }
  .actions-sub {
    padding-left: 0; /* indentation dropped on mobile (chips carry no hierarchy cue) */
  }

  /* Save panel: relocated (see above), buttons enlarged to thumb-sized full-width. */
  #savewrap .tcat {
    font-size: 9px;
    padding: 2px 6px;
  }
  #savepanel button {
    display: block;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    margin: 4px 0 !important; /* overrides the inline marginRight set by index.html's JS */
  }

  /* ---- C. Battle layout ---- */
  /* [revised] user-directed (2026-07-12): keep the vitality/actions column and the monster
     battlefield SIDE BY SIDE on phones (the first M1 pass stacked them full-width; the user
     wants the desktop's two-window feel preserved). The desktop's fixed 240px left column
     becomes a proportional 45% so both windows fit a ~360-430px viewport; row direction is
     inherited from the desktop .battle-layout rule (no flex-direction override). */
  .battle-layout {
    gap: 4px;
  }
  .battle-left {
    width: 45%;
    flex: 0 0 45%;
    min-width: 0;
  }
  .battle-right {
    min-width: 0; /* desktop rule already flexes it; this guards against overflow at ~200px */
  }
  .battle-actions {
    display: grid;
    grid-template-columns: 1fr; /* one 44px button per row inside the narrow left column */
    gap: 6px;
  }
  .battle-action {
    width: 100%;
    min-height: 44px;
    display: block;
    box-sizing: border-box;
    font-size: 12px;
  }
  .battle-log {
    max-height: 220px;
  }
}

/* ===== v1.4: status-header character summary (user-directed 2026-07-12) =====
   One compact gold line above the HP/Energy/XP bars: name, calling, level, kills.
   Applies at every viewport (it rides inside the sticky #statusbars header on mobile). */

.charinfo-row {
  color: #c4bb4b;
  font-weight: bold;
  padding: 0 4px 3px 4px;
}

/* ===== v1.4 Mobile M2: wide-table scroll containment (docs/SPEC-MOBILE-UI.md §4 M2, audit A9)
   =====
   Base rule (not scoped to any media query) — wraps a wide row-panel (shop/exchange/synthesis/
   academy/inventory/journal listings) so IT scrolls sideways on a narrow viewport instead of the
   whole page. Applied in js/ui/screens.js via a small `scrollX(node)` helper. No-op on desktop:
   those panels already fit inside #maincol there. */
.scroll-x {
  overflow-x: auto;
}

/* ===== v1.4 Mobile M2: touch ergonomics (docs/SPEC-MOBILE-UI.md §4 M2) =====
   Scoped to `pointer: coarse` (any touch-primary input — including a touch-screen laptop at full
   desktop width, which still deserves real tap targets) rather than a viewport-width query.
   Appended after the M1 responsive-shell block above (never edited — see that block's own
   comment); a mouse/trackpad device (`pointer: fine`) at any width is untouched. */
@media (pointer: coarse) {

  /* ---- Tap targets: ~44px minimum (audit A3) ---- */
  .navlist a, .actions-list a, #mobiletabs a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .button, button.hrpg {
    padding: 10px 14px;
    font-size: 12px;
  }

  /* ---- Kill iOS Safari's input focus-zoom (audit A4) ---- */
  select, input[type="text"], textarea, .bginput {
    font-size: 16px;
  }

  /* ---- Tech slots: 44x44 touch target; the 32px icon stays centered (flex rule set above) ---- */
  .tech-slot {
    width: 44px;
    height: 44px;
  }

  /* ---- v1.4 UX transparency pass: enlarge the small ⓘ affordances for touch (audit A3 same
     44px-ish spirit; kept modest here since these are secondary/corner badges, not primary
     targets) ---- */
  .info-btn {
    min-width: 20px;
    min-height: 20px;
    font-size: 12px;
  }
  .tech-slot-info {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 11px;
  }

  /* ---- Battle log: a real scrollable touch area instead of a cramped 160px sliver ---- */
  .battle-log {
    min-height: 200px;
  }

  /* ---- Drag-and-drop never fires on touch (audit A2) — hide the now-useless drop boxes. Every
     drop-box action already has an always-visible button equivalent (audited — see the
     equip/unequip/discard buttons wired alongside each Game.DragDrop call in screens.js). ---- */
  .dropbox-row {
    display: none;
  }

  /* ---- Hover-only cues have no touch equivalent (audit A7): add :active feedback, and give
     castable tech slots a static outline so castability reads without ever hovering. ---- */
  .navlist a:active, .actions-list a:active {
    background: #a9b4bb;
  }

  #mobiletabs a:active {
    background: #4a5a68;
  }

  .button:active, button.hrpg:active {
    background: #4a5a68;
  }

  .tech-slot.castable {
    outline: 1px solid #c4bb4b;
  }
}

/* ===== v1.4 Mobile M2: supplementary small-screen font scale (docs/SPEC-MOBILE-UI.md §4 M2) =====
   A SECOND @media (max-width: 640px) block, appended after the M1 block above (never edited —
   per the spec's containment strategy, cascade/source order lets a later block override the
   same selectors, e.g. .statbar-text below). Desktop stays the archived 10px verdana; only this
   query's small-screen presentation is bumped for legibility. */
@media (max-width: 640px) {
  body {
    font: 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  }

  .smallfont {
    font: 13px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  }

  .tinyfont {
    font: 11px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  }

  /* Structural spots that hardcode a small font-size in the M1 block above (not editable there)
     get a small bump here — still capped by their unchanged mobile container sizes (the 9px-tall
     .statbar-track, the 48px-tall #mobiletabs bar). */
  .statbar-text {
    font-size: 9px; /* up from M1's 8px */
  }

  #mobiletabs a, #mobiletabs span {
    font-size: 10px; /* up from M1's 9px */
  }
}

/* ===== v1.4 Mobile M3: inline toast (docs/SPEC-MOBILE-UI.md §4 M3) =====
   Base rule (NOT scoped to a media query — the spec explicitly allows the toast at every
   viewport, since prompt()/alert() were flagged "miserable" primarily on mobile but the
   dismissable-banner pattern reads strictly better on desktop too). Replaces alert() for the
   high-frequency Hunt/Camp/Forage/touch-token results (js/ui/screens.js `notify()` / index.html
   `notify()` -> Game.UI.toast). Visibility is a class swap, never an inline .style write (see
   Game.UI.toast's comment on the fakedom .style quirk) — `.toastbar` is the always-present
   hidden base state, `.toastbar-visible` is added alongside it while a message is showing; same
   specificity, so the later rule (this one) wins for any element carrying both classes. */
.toastbar {
  display: none;
}
.toastbar-visible {
  display: block;
  background: #3c4a56;
  color: #c4bb4b;
  border: 1px solid #313131;
  padding: 6px 10px;
  margin-bottom: 6px;
  font-weight: bold;
  cursor: pointer; /* tap-to-dismiss */
}

@media (max-width: 640px) {
  .toastbar-visible {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* ===== v1.4 Mobile M3: save export/import modal (docs/SPEC-MOBILE-UI.md §4 M3, audit A8) =====
   Reuses the existing .infobox/.infobox-overlay/.infobox-body/.infobox-close chrome (defined
   above, unedited) via Game.Infobox.openPanel (js/ui/infobox.js) — these two rules are the only
   new styling the modal needs. `.infobox-wide` widens the box past the item-infobox's 320px (a
   save string needs real room); `.savebox-textarea` sizes/styles the export/import textarea
   itself. Both are plain classes with no media-query scoping because the modal is meant to look
   the same (just strictly better than window.prompt()) at every viewport, per the brief. */
.infobox-wide {
  width: 480px; /* .infobox's own max-width: 90vw (defined above) still caps this on narrow screens */
}
.savebox-textarea {
  width: 100%;
  box-sizing: border-box;
  height: 120px;
  font: 11px monospace;
  resize: vertical;
}

/* ===== v1.4 Mobile M3: landscape-phone sanity (docs/SPEC-MOBILE-UI.md §4 M3) =====
   Reasoned rather than device-tested this pass (no real landscape hardware in this loop — flagged
   for the user's phone-checklist walkthrough below). At a rotated phone's ~360-430px HEIGHT, M1's
   sticky `#statusbars` header plus the fixed 48px `#mobiletabs` bar can together eat roughly 40%
   of the vertical viewport, crowding out #maincontent. Minimal fix: drop the sticky pin in
   landscape ONLY, so the status header scrolls away with the rest of the page instead of
   permanently occupying screen real estate — #mobiletabs is left fixed/48px as-is, since
   thumb-reachable navigation matters at least as much in landscape. Scoped to BOTH the existing
   640px width query AND `orientation: landscape` so portrait phones and desktop are untouched;
   appended after the M1 block so this same-specificity #statusbars rule wins by source order for
   any viewport matching both conditions. */
@media (max-width: 640px) and (orientation: landscape) {
  #statusbars {
    position: static;
  }
}

/* ===== v1.4 UX transparency pass (user-directed 2026-07-12) =====
   "ⓘ" info affordances (Status screen stats, battle actions/tech slots/items) + the Status
   screen's two-column stats/skills reflow + the level-up unspent-points banner. Reuses the
   existing infobox overlay (Game.Infobox.openStat/openPanel, js/ui/infobox.js) — these are just
   the small trigger glyphs and the new layout, no new overlay chrome. */

/* Circular gold "ⓘ" glyph — a plain unicode character (not an icon asset), styled to read as a
   secondary/tappable control next to a stat row, battle-action button, tech slot, or item row.
   Deliberately smaller/lighter than .button so it never competes with the primary action. */
.info-btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  line-height: 14px;
  border: 1px solid #313131;
  border-radius: 50%;
  background: #3c4a56;
  color: #c4bb4b;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

.info-btn:hover {
  background: #4a5a68;
  color: #ffffff;
}

/* Tech-slot variant: a small corner badge overlaid on the 32/44px slot (which is now
   position:relative — see the .tech-slot rule above) instead of a sibling in the flex row, since
   there's no room to spare inside the slot itself. */
.tech-slot-info {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  line-height: 12px;
  font-size: 9px;
}

/* Level-up "you have unspent Stat Points" banner (Status screen, renderStatus). Reuses the gold-
   on-slate chrome color already established by .tcat/.navlist rather than inventing a new accent. */
.levelup-hint {
  background: #3c4a56;
  color: #c4bb4b;
  border: 1px solid #313131;
  padding: 4px 6px;
  font-weight: bold;
}

/* Status screen: left column (Primary + Derived Stats) / right column (Skills). Collapses to a
   single stacked column at the same 640px breakpoint the rest of the mobile layout already uses
   (SPEC-MOBILE-UI.md §3/§4), so this reads as "just another panel" on phones rather than a
   cramped two-up squeeze. */
.status-columns {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.status-col {
  flex: 1 1 0;
  min-width: 0;
}

@media (max-width: 640px) {
  .status-columns {
    flex-direction: column;
  }
}

/* ===== Phase U (v1.7 SPEC-V1.7-CONTENT-UX.md §1): Explore's Destinations card grid, replacing
   the old plain stat-row table. Reuses existing tokens only — .panel's light bg/dark text
   (#bec7cc / #1b2129), the .tcat/.button gold-on-slate accent (#c4bb4b on #34404b) for the
   Town/Wilds badge, and #3c4a56 (already used for .button/.thead) for the level-range line so it
   reads as a distinct sub-label without inventing a new color. Wraps via flexbox so a narrow
   viewport stacks cards to full width instead of causing horizontal page scroll. ===== */
.dest-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dest-card {
  background: #bec7cc;
  color: #1b2129;
  border: 1px solid #313131;
  padding: 6px;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-sizing: border-box;
}

.dest-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dest-card-name {
  font-weight: bold;
}

.dest-badge {
  background: #34404b;
  color: #c4bb4b;
  font-weight: bold;
  font: 9px verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
  padding: 1px 5px;
  border: 1px solid #313131;
  white-space: nowrap;
}

.dest-levels {
  color: #3c4a56;
  font-weight: bold;
}

.dest-card-desc {
  flex: 1 1 auto;
}

.dest-card-action {
  margin-top: 2px;
}

@media (max-width: 640px) {
  .dest-card {
    flex: 1 1 100%;
    max-width: 100%;
  }
}