/* ---- Skill window: tree heading, points, and the no-class state ---------------------------------- */
.rpg-tree-title { margin-top: 0; }
.rpg-tree-blurb { margin: -4px 0 12px; font-size: 12px; color: var(--ink-mute); font-style: italic; }
.rpg-panel-sub.has-points { color: var(--gold-hi, #ffd98a); }
.rpg-tree-tabs { display: block; margin: 0 0 6px; }
.rpg-noclass { margin: 24px auto; max-width: 440px; padding: 22px 26px; text-align: center;
  border: 1px solid var(--glass-stroke); border-radius: 12px; background: var(--glass-deep); }
.rpg-noclass-title { margin: 0 0 8px; font-family: var(--font-display); font-size: 20px; color: var(--gold-hi, #ffd98a); }
.rpg-noclass-body { margin: 0 0 14px; color: var(--ink-soft); line-height: 1.5; }
.rpg-noclass-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rpg-noclass-list li { padding: 3px 12px; border-radius: var(--r-pill, 999px); border: 1px solid var(--glass-stroke);
  font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); }
.rpg-skill-body > .rpg-skill-list { margin-top: 10px; }

.rpg-tree { margin-bottom: 14px; }
/* Diamonds and rank badges overhang the last row; give a branched tree room below it. */
.rpg-tree.rpg-tree--branched { margin-bottom: 34px; }

/* ---- Skill window: scalable tree, fixed actions row, skill card --------------------------------- */
/* The tree's tracks are `--node`: at most 64px, shrinking so `--cols` columns fit the window. */
.rpg-skill-body { container-type: inline-size; }
.rpg-tree { --node: min(64px, calc((100cqw - (var(--cols, 3) - 1) * 14px) / var(--cols, 3)));
  column-gap: 14px; row-gap: calc(var(--node) * 0.5); }
.rpg-tree .rpg-node { width: var(--node); height: var(--node); font-size: calc(var(--node) * 0.34); }
.rpg-tree .rpg-node > svg { width: calc(var(--node) * 0.34); height: calc(var(--node) * 0.34); }
.rpg-tree-branch { font-size: clamp(9px, calc(var(--node) * 0.19), 12px); }
.rpg-tree svg.rpg-links { z-index: 0; overflow: visible; }
.rpg-skill-actions { min-height: 38px; display: flex; align-items: center; justify-content: flex-end; }
.rpg-skill-actions.is-empty { visibility: hidden; }
.rpg-skill-actions .rpg-stat-actions { margin: 0; }
.rpg-itemcard.rpg-skillcard { width: 300px; z-index: 60; }
.rpg-skillcard-head { display: flex; align-items: center; gap: 8px; }
.rpg-skillcard-head .rpg-itemcard-name { margin: 8px 0 2px; font-size: 19px; }
.rpg-skillcard-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: none;
  border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-hi, #ffd98a); }
.rpg-skillcard-desc { margin: 8px 0 10px; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.rpg-skillcard-facts { margin-bottom: 8px; }
.rpg-skillcard-ranks { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.rpg-skillcard-rank { display: grid; grid-template-columns: 38px 1fr; gap: 6px; align-items: baseline;
  padding: 4px 8px; border-radius: 6px; font-size: 12px; line-height: 1.35; color: var(--ink-mute);
  border: 1px solid transparent; }
.rpg-skillcard-lv { font-family: var(--font-mono); font-size: 11px; }
.rpg-skillcard-rank.is-owned { color: var(--ink-soft); }
.rpg-skillcard-rank.is-current { color: var(--ink); background: rgba(201,164,110,.16);
  border-color: var(--gold); box-shadow: 0 0 10px -3px var(--gold-glow); }
.rpg-skillcard-rank.is-current .rpg-skillcard-lv { color: var(--gold-hi, #ffd98a); }
.rpg-skillcard-rank.is-staged { color: var(--ink-soft); border-style: dashed; border-color: rgba(201,164,110,.5); }
.rpg-skillcard-note { margin: 10px 0 0; font-size: 12px; color: #ff9c8c; }

/* ---- Party window: inset hp numbers, level beside the bar, buffs, crown on the face ------------- */
.rpg-party-hp--inset .rpg-party-hpbar { height: 14px; }
.rpg-party-hp--inset .rpg-party-hpnum { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; line-height: 1; color: #fff; text-shadow: 0 0 2px #000, 0 1px 1px #000; z-index: 1; }
.rpg-party-hp--inset .rpg-party-lvl { flex: none; min-width: 3.2em; text-align: right; }
.rpg-party-buffs { display: inline-flex; gap: 2px; flex: none; align-self: center; }
.rpg-party-buff { display: inline-grid; place-items: center; width: 14px; height: 14px;
  border-radius: 3px; background: rgba(7,9,26,.7); border: 1px solid currentColor; }
.rpg-party-buff svg { width: 10px; height: 10px; }
/* The portrait no longer clips its children, so the online dot and the crown can overhang it. The
   picture itself is round on its own (`.rpg-party-face img`). */
.rpg-party-face { overflow: visible; }
.rpg-party-win-row { padding-left: 8px; padding-top: 5px; }
.rpg-leader-crown.rpg-leader-crown--face { position: absolute; top: -8px; right: -7px; margin: 0;
  font-size: 12px; line-height: 1; text-shadow: 0 0 3px #000, 0 0 2px #000; pointer-events: none; }

/* ---- Hover cards float ABOVE the hotbar -------------------------------------------------------- */
/* Mounted on <body> (see GameUI.mountCard) so they are outside the HUD's own layer; the zoom keeps
   them the same size as the rest of the interface. */
.rpg-float-layer { position: fixed; z-index: 1000; zoom: var(--ui-zoom, 1); }

/* ── THE HOMESTEAD (land agent, plot workbench, planter) ─────────────────────────────────────────
   These wear the craft window's classes so the benches read alike; this only narrows the window and
   styles the pieces the craft window has no counterpart for (the conversation, the growth bar, the
   harvest slot). */
/* WIDE ENOUGH FOR THE CARD, AND TALL ENOUGH FOR IT (owner, 2026-09-17: "the item card needs a
   scrollbar"). These windows wear the craft window's three-column layout but were narrowed to 820px
   and their grid pinned to 330px — 140 short of the 470px the craft window was MEASURED to need for
   its tallest card, so the middle column overflowed and grew a rail on a card that is not long.
   They now take the craft window's own numbers rather than a second pair: one measured height for
   every bench in the game, and a width that leaves the 300px card column its full span with the
   recipe list and the ingredients rail either side. */
.rpg-panel--homestead { width: min(980px, 94vw); }
.rpg-panel--landagent { width: min(520px, 92vw); }
.rpg-homestead-grid { height: 470px; }
.rpg-homestead-line { margin: var(--sp-2) 0; color: var(--ink); font: 14px/1.45 var(--font-body); }
.rpg-homestead-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.rpg-homestead-secondary { opacity: .85; }
/* NO BESPOKE ITEM SLOT. `.rpg-homestead-crop` / `.rpg-homestead-icon` used to hang a lone 64px
   `.rpg-cell` in the detail column; a bag cell is sized by the grid it belongs to and `.rpg-tile`
   is absolutely inset inside one, so on its own it drew the item small and adrift of its own plate
   ("the carrot image is outside its purple box"). The farming window now puts `ItemDetailCard` in
   that column like every other bench — see `FarmingPanel.render`. */
.rpg-homestead-bar { height: 12px; border-radius: 6px; margin: var(--sp-2) 0; background: rgba(0,0,0,.35);
  border: 1px solid rgba(201,164,110,.45); overflow: hidden; }
.rpg-homestead-bar > div { height: 100%; background: linear-gradient(90deg, #6fae5c, #b9d86a); }

/* ── THE MODAL: the two questions asked in the middle of the screen ───────────────────────────────
   "Type this" (a sign's line) and "are you sure?" (the sledgehammer). See src/ui/modalPrompt.ts.
   It takes the pointer and the keyboard for as long as it is up, which is what makes it a modal
   rather than a panel; the scrim is what does that, not a z-index race. */
.rpg-modal-scrim {
  position: fixed; inset: 0; z-index: 400;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 4, 0.45);
}
.rpg-modal {
  min-width: 300px; max-width: 420px;
  padding: 16px 18px 14px;
  background: linear-gradient(180deg, #2a2118, #1d170f);
  border: 1px solid rgba(240, 217, 164, 0.42);
  border-radius: 10px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  color: #f0e2c2;
  font: 14px/1.45 system-ui, sans-serif;
}
.rpg-modal-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.rpg-modal-body { opacity: 0.85; margin-bottom: 10px; }
.rpg-modal-row:empty { display: none; }
.rpg-modal-text {
  width: 100%; box-sizing: border-box;
  font: inherit; padding: 7px 10px; margin-bottom: 12px;
  color: #f6ecd6; background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(240, 217, 164, 0.45); border-radius: 6px; outline: none;
}
.rpg-modal-text:focus { border-color: rgba(240, 217, 164, 0.9); }
.rpg-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rpg-modal-actions button {
  font: inherit; font-weight: 600; padding: 6px 14px; border-radius: 6px; cursor: pointer;
  color: #f6ecd6; background: #3a2c1c; border: 1px solid #8a6b45;
}
.rpg-modal-actions button:hover { background: #4a3826; }
.rpg-modal-ok { background: #4c3a1f !important; border-color: #c9a55f !important; }

/* ── THE MARKET BOARD (MarketBoardPanel) + its highlight (GameHUD) ─────────────────────────── */
.rpg-panel--market { width: min(620px, 94vw); }
.rpg-panel--market.is-open { display: flex; flex-direction: column; }
.rpg-market-controls { display: flex; gap: 6px; align-items: center; }
.rpg-market-controls .rpg-market-search { flex: 1 1 auto; margin-bottom: 0; }
.rpg-market-list { margin-top: 8px; max-height: min(420px, 60vh); overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.rpg-market-row { display: grid; grid-template-columns: 28px 1fr 48px 64px minmax(90px, 30%); gap: 8px; align-items: center;
  width: 100%; padding: 4px 8px; border: 1px solid transparent; border-radius: var(--r-2); background: rgba(0,0,0,.18);
  color: var(--ink-soft); font: inherit; text-align: left; cursor: pointer; }
.rpg-market-row:hover { border-color: var(--gold); background: rgba(127,227,255,.10); }
.rpg-market-icon .rpg-icon { width: 24px; height: 24px; display: block; }
.rpg-market-name { color: var(--ink, #eee); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpg-market-qty, .rpg-market-price { text-align: right; font-variant-numeric: tabular-nums; }
.rpg-market-price { color: var(--gold); }
.rpg-market-shop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
.rpg-market-empty { padding: 18px 4px; text-align: center; color: var(--ink-dim); }
.rpg-market-row.is-selected { border-color: var(--gold); background: rgba(255,212,94,.14); }
.rpg-market-actions { display: flex; justify-content: flex-end; margin-top: 8px; min-height: 30px; }
.rpg-market-mark[hidden] { display: none; }
.rpg-market-mark.is-active { border-color: var(--gold); color: var(--gold); }
.hud-minimap-market { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #7fe3ff; border: 2px solid #0b2a3a; box-sizing: border-box; pointer-events: none; z-index: 3;
  animation: hudMarketPulse 1s ease-in-out infinite; }
.hud-minimap-market.is-offview { border-radius: 0; border: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@keyframes hudMarketPulse { 50% { box-shadow: 0 0 0 5px rgba(127,227,255,.35); } }
.hud-market-chip { position: absolute; top: 196px; right: 14px; z-index: 17; pointer-events: auto; display: flex; gap: 8px;
  align-items: center; padding: 4px 6px 4px 10px; border-radius: 6px; font-size: 12px; color: #d9f6ff;
  background: rgba(19,24,30,.9); border: 1px solid #7fe3ff88; }
.hud-market-chip button { background: none; border: 0; color: inherit; cursor: pointer; font-size: 13px; padding: 0 4px; }
.hud-market-chip[hidden], .hud-minimap-market[hidden] { display: none; }

/* ---- Fetch status: a list the server has not sent yet (src/game/ui/fetchStatus.ts) ------------ */
.rpg-fetch-status { padding: 18px 4px; text-align: center; font: italic 13px var(--font-quill);
  color: var(--ink-quill); }
.rpg-fetch-status.is-error { font-style: normal; color: var(--ember); }