@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@600;700&display=swap');

:root {
  color-scheme: dark;
  --bg: #10131b;
  --panel: #181d27;
  --panel-raised: #1d2330;
  --border: #2a3140;
  --text: #ececf0;
  --muted: #929aaa;
  --gold: #e7bb70;
  --gold-soft: #332b21;
  --green: #80c9a1;
  --red: #e77f82;
  --blue: #83aef3;
  font-family: "DM Sans", "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(ellipse at 52% -22%, rgba(83, 104, 143, .17), transparent 58%),
    var(--bg);
}
body:has(#party-dialog[open]), body:has(#camp-dialog[open]) { overflow: hidden; }

button, a { font: inherit; }
button { color: inherit; }

.app-shell { width: calc(100% - 28px); margin: 0 auto; }
.topbar { min-height: 88px; display: flex; align-items: center; justify-content: flex-end; border-bottom: 1px solid rgba(255,255,255,.07); }
.brand { display: flex; align-items: center; gap: 13px; color: var(--text); text-decoration: none; }
.brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(231,187,112,.42); border-radius: 11px; color: var(--gold); font-size: 21px; background: rgba(231,187,112,.08); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 12px; letter-spacing: .13em; }
.brand small { margin-top: 4px; color: var(--muted); font-size: 9px; letter-spacing: .17em; }
.sidebar-brand { align-self: start; justify-self: center; margin-top: 2px; opacity: .2; pointer-events: none; user-select: none; }
.topbar-actions { display: flex; align-items: center; gap: 22px; }
.status-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(128,201,161,.45); }
.icon-button { padding: 9px 13px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: #c4cad4; font-size: 12px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.icon-button:hover { color: var(--text); border-color: #596477; background: rgba(255,255,255,.03); }
.topbar-menu-button { display: inline-flex; align-items: center; gap: 7px; border-color: rgba(231,187,112,.5); background: rgba(231,187,112,.1); color: var(--gold); }
.topbar-menu-button:hover { border-color: var(--gold); background: rgba(231,187,112,.18); color: #f2d39c; }
.topbar-menu-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.saloon-visit-notice { display: inline-flex; align-items: center; gap: 7px; color: #e2cc87; font-size: 12px; line-height: 1.4; user-select: none; }
.saloon-visit-notice::before { content: ""; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #e2cc87; box-shadow: 0 0 8px rgba(226,204,135,.4); }
.saloon-visit-notice[hidden] { display: none; }
.game-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; padding-top: 26px; align-items: start; }
.sidebar, .main-column { display: grid; gap: 18px; min-width: 0; }
.panel { border: 1px solid var(--border); border-radius: 13px; background: linear-gradient(145deg, rgba(28,33,44,.98), rgba(22,27,37,.98)); box-shadow: 0 12px 32px rgba(0,0,0,.12); }
.character-panel { padding: 20px; }
.mounted-horse-panel { padding: 20px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.eyebrow { display: block; color: #909aab; font-size: 9px; font-weight: 700; letter-spacing: .15em; }
h1, h2, p { margin-top: 0; }
h2 { margin: 5px 0 0; font-size: 16px; font-weight: 600; }
.level-badge { padding: 6px 8px; border: 1px solid rgba(231,187,112,.28); border-radius: 6px; background: rgba(231,187,112,.08); color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: .05em; }
.stat-block { margin-top: 20px; }
.stat-label { display: flex; justify-content: space-between; margin-bottom: 7px; color: #c7ccd5; font-size: 11px; }
.stat-label span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.meter { height: 6px; overflow: hidden; border-radius: 10px; background: #10141d; }
.meter span { display: block; width: 0; height: 100%; border-radius: inherit; transition: width .3s ease; }
.hp-meter span { background: linear-gradient(90deg, #b95262, #e77f82); }
.mana-meter span { background: linear-gradient(90deg, #526fc4, #83aef3); }
.fatigue-meter span { background: linear-gradient(90deg, #a87536, #e2bd68); }
.fatigue-meter.fatigued span { background: linear-gradient(90deg, #aa5745, #e18c58); }
.xp-meter span { background: linear-gradient(90deg, #9b7742, #e7bb70); }
.gold-display { display: flex; align-items: center; gap: 7px; margin-top: 21px; padding-top: 15px; border-top: 1px solid var(--border); color: var(--gold); font-size: 13px; font-weight: 700; }
.gold-display span:last-child { color: var(--muted); font-size: 11px; font-weight: 400; }
.item-total { color: var(--muted); font-size: 10px; }
.inventory-list { display: grid; gap: 8px; padding: 0; margin: 16px 0 0; list-style: none; }
.inventory-item { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(255,255,255,.045); border-radius: 8px; background: rgba(255,255,255,.025); }
.item-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: #272b32; font-size: 15px; }
.item-info { min-width: 0; flex: 1; }
.item-info strong, .item-info small { display: block; }
.item-info strong { overflow: hidden; color: #d9dce2; font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.item-info small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.item-quantity { color: #cbd1da; font-size: 11px; }
.sell-button { padding: 5px 7px; border: 1px solid #41434a; border-radius: 5px; background: transparent; color: var(--gold); font-size: 9px; cursor: pointer; }
.sell-button:hover { border-color: var(--gold); }
.empty-state { margin: 16px 0 1px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.craft-icon { color: var(--gold); font-size: 17px; }
.recipe { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--border); }
.recipe-description strong { display: block; font-size: 11px; }
.recipe-description small { display: block; margin-top: 5px; color: var(--muted); font-size: 9px; line-height: 1.5; }
.small-button { padding: 7px 9px; border: 1px solid rgba(231,187,112,.3); border-radius: 6px; background: var(--gold-soft); color: var(--gold); font-size: 10px; font-weight: 600; cursor: pointer; }
.small-button:hover:not(:disabled) { background: #453823; }
button:disabled { opacity: .42; cursor: not-allowed; }
.story-panel { position: relative; overflow: hidden; isolation: isolate; }
.log-area { position: relative; display: flex; min-height: 95px; flex: 1 1 auto; flex-direction: column; overflow: hidden; margin-right: -12px; border-top: 1px solid rgba(154,183,175,.16); }
.log-scene { position: absolute; z-index: 0; inset: 0 0 0 auto; width: 58%; overflow: hidden; opacity: .5; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 76%); mask-image: linear-gradient(to right, transparent 0%, #000 76%); }
.log-scene svg { display: block; width: 100%; height: 100%; filter: saturate(.72); }
.narrative-heading, .scene-banner, .story-content, .log-list { position: relative; z-index: 1; }
.scene-banner { min-height: 128px; display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; padding: 21px 26px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(19,26,37,.36), rgba(19,26,37,.18)), radial-gradient(ellipse at 80% 20%, rgba(119,142,181,.18), transparent 40%), linear-gradient(135deg, #242b38, #1b222e); }
.scene-meta { display: flex; align-items: center; gap: 10px; color: #d7dce6; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.scene-symbol { color: var(--gold); font-size: 19px; }
.chapter-label { color: #a4adbb; font-size: 9px; letter-spacing: .11em; white-space: nowrap; }
.time-flow-status { color: #87b7a6; font-size: 8px; letter-spacing: .04em; white-space: nowrap; }
.time-flow-status.paused { color: #9ba2af; }
.weather-forecast { color: #a8b4c7; font-size: 8px; letter-spacing: .025em; white-space: nowrap; }
.chapter-label span { color: var(--gold); }
.story-content { min-height: 235px; padding: 29px 30px 23px; }
.story-content h1 { margin: 10px 0 13px; font-family: "Playfair Display", Georgia, serif; font-size: clamp(25px, 3vw, 34px); font-weight: 600; letter-spacing: -.025em; }
.story-text { max-width: 690px; margin: 0; color: #b9bfca; font-size: 13px; line-height: 1.85; white-space: pre-line; }
.scene-context { max-width: 720px; margin-top: 12px; padding-left: 9px; border-left: 2px solid rgba(120,184,172,.34); }
.scene-context .eyebrow { color: #779e92; font-size: 8px; }
.scene-context p { margin: 4px 0 0; color: #94aaa3; font-size: 10px; line-height: 1.6; }
.combat-panel { max-width: 420px; margin-top: 23px; padding: 13px 14px; border: 1px solid rgba(231,127,130,.2); border-radius: 9px; background: rgba(94,41,48,.12); }
.enemy-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.enemy-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 8px; background: rgba(231,127,130,.12); color: var(--red); }
.enemy-heading div { flex: 1; }
.enemy-heading strong { display: block; margin-top: 3px; font-size: 11px; }
.enemy-hp { color: #c9a4a5; font-size: 10px; }
.enemy-meter span { background: linear-gradient(90deg, #ab4a56, #e77f82); }
.combat-enemies { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.combat-enemies[hidden] { display: none; }
.enemy-heading[hidden], .enemy-meter[hidden] { display: none; }
.combat-enemy-target { display: grid; width: 100%; gap: 6px; padding: 8px; border: 1px solid rgba(231,127,130,.24); border-radius: 6px; background: rgba(10,14,21,.35); color: inherit; text-align: left; }
.combat-enemy-target[aria-pressed="true"] { border-color: rgba(231,127,130,.72); background: rgba(94,41,48,.32); }
.combat-enemy-target:disabled { opacity: .62; }
.combat-enemy-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.combat-enemy-heading strong { font-size: 9px; }
.combat-enemy-heading small { color: var(--muted); font-size: 8px; }
.combat-enemy-target .meter { margin: 0; }
.combat-allies { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; padding: 0; margin: 12px 0 0; list-style: none; }
.combat-allies > li { display: grid; gap: 5px; padding: 8px; border: 1px solid rgba(255,255,255,.07); border-radius: 7px; background: rgba(10,14,21,.28); }
.combat-allies > li strong { font-size: 9px; }
.combat-allies > li > small { color: var(--muted); font-size: 8px; }
.party-meter { height: 4px; }
.party-hp-meter span { background: linear-gradient(90deg, #b95262, #e77f82); }
.party-energy-meter span { background: linear-gradient(90deg, #526fc4, #83aef3); }
.party-fatigue-meter span { background: linear-gradient(90deg, #a87536, #e2bd68); }
.party-stats { display: grid; gap: 5px; grid-column: 1 / -1; }
.party-stat-label { display: flex; justify-content: space-between; margin-bottom: 3px; color: var(--muted); font-size: 8px; font-variant-numeric: tabular-nums; }
.party-combat-status { color: var(--muted); font-size: 8px; }
.action-area { padding: 17px 30px 24px; border-top: 1px solid var(--border); background: rgba(12,15,22,.19); }
.action-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; gap: 10px; margin-top: 12px; }
.action-category-column { display: grid; align-content: start; gap: 6px; min-width: 0; }
.action-category { min-width: 0; padding: 8px; border: 1px solid rgba(154,183,175,.16); border-radius: 5px; background: rgba(12,15,22,.16); }
.action-category-title { padding-bottom: 6px; margin: 0 0 7px; border-bottom: 1px solid rgba(154,183,175,.14); color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.action-category-buttons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 7px; }
.action-button { display: inline-flex; min-height: 39px; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #343c4b; border-radius: 7px; background: #222936; color: #dce0e7; font-size: 11px; font-weight: 600; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; }
.action-button:hover:not(:disabled) { transform: translateY(-1px); border-color: #68758b; background: #2a3342; }
.action-button.primary { border-color: rgba(231,187,112,.35); background: #352e25; color: #f0c77f; }
.action-button.primary:hover:not(:disabled) { border-color: var(--gold); background: #403626; }
.action-button.danger { border-color: rgba(231,127,130,.28); background: rgba(91,43,49,.24); color: #e99a9c; }
.action-button:disabled { transform: none; }
.action-icon { font-size: 13px; }
.log-panel { padding: 19px 22px 16px; }
.log-heading { padding-bottom: 13px; border-bottom: 1px solid var(--border); }
.log-heading h2 { font-size: 14px; }
.live-indicator { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 8px; letter-spacing: .1em; }
.live-indicator .status-dot { width: 6px; height: 6px; }
.live-indicator.paused .status-dot { background: #9ba2af; box-shadow: none; }
.log-list { display: grid; gap: 0; max-height: 168px; overflow-y: auto; padding: 0; margin: 5px 0 0; list-style: none; }
.log-list li { position: relative; padding: 9px 8px 9px 18px; border-bottom: 1px solid rgba(255,255,255,.045); color: #abb2bf; font-size: 10px; line-height: 1.55; }
.log-list li::before { position: absolute; top: 15px; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: #717e92; content: ""; }
.log-list li:first-child { color: #e2d0aa; }
.log-list li:first-child::before { background: var(--gold); }
.log-list li.log-entry-current { color: #eadbbd; font-size: 13px; font-weight: 600; line-height: 1.5; }
.log-list li.log-entry-previous { color: #c1c7d1; font-size: 11.5px; }
.log-list li.log-entry-older { color: #a0a8b7; }
.log-list li.log-entry-faded { color: #858e9e; }

@media (max-width: 820px) {
  .app-shell { width: calc(100% - 28px); }
  .game-layout { grid-template-columns: 1fr; }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .character-panel { grid-row: span 2; }
  .crafting-panel, .inventory-panel { min-width: 0; }
}

@media (max-width: 540px) {
  .app-shell { width: calc(100% - 28px); }
  .topbar { min-height: 72px; }
  .brand { gap: 9px; }
  .brand-mark { width: 33px; height: 33px; }
  .brand strong { font-size: 10px; }
  .brand small { font-size: 8px; }
  .topbar-actions { gap: 10px; }
  .icon-button { padding: 8px 9px; font-size: 10px; }
  .game-layout { gap: 14px; padding-top: 16px; }
  .sidebar, .main-column { gap: 14px; }
  .sidebar { grid-template-columns: 1fr; }
  .character-panel { grid-row: auto; }
  .character-panel, .inventory-panel, .crafting-panel { padding: 17px; }
  .scene-banner { min-height: 104px; flex-wrap: wrap; padding: 17px 19px; }
  .chapter-label { margin-left: 29px; }
  .story-content { min-height: 0; padding: 23px 20px 21px; }
  .story-content h1 { font-size: 27px; }
  .story-text { font-size: 12px; }
  .action-area { padding: 16px 20px 20px; }
  .action-list { display: grid; grid-template-columns: 1fr; }
  .action-button { justify-content: flex-start; }
  .log-panel { padding: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Compact, framed adventure-console layout. */
:root {
  --bg: #101819;
  --panel: #141e20;
  --panel-raised: #192729;
  --border: #34484a;
  --text: #d9e4df;
  --muted: #91a29e;
  --gold: #dec37e;
  --gold-soft: #292d25;
  --green: #78b8ac;
  --blue: #72b4c5;
}

body {
  background:
    radial-gradient(ellipse at 48% 10%, rgba(73,112,109,.12), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.012) 0, rgba(255,255,255,.012) 1px, transparent 1px, transparent 5px),
    #0d1416;
}

.app-shell { width: calc(100% - 28px); }
.topbar { position: relative; min-height: 66px; justify-content: center; border-bottom-color: #34494a; }
.brand { gap: 0; text-align: center; }
.brand-mark { display: none; }
.brand strong { color: #b5d0cb; font-family: "Playfair Display", Georgia, serif; font-size: 15px; letter-spacing: .08em; }
.brand small { margin-top: 2px; color: #829591; font-size: 10px; letter-spacing: .04em; }
.topbar-actions { position: absolute; right: 0; }
.game-layout { grid-template-columns: minmax(0, 1fr) 318px; gap: 14px; padding-top: 15px; }
.main-column, .sidebar { gap: 10px; }
.main-column { order: 1; }
.sidebar { order: 2; }
.panel { border-radius: 6px; border-color: #35494b; background: linear-gradient(145deg, rgba(23,35,37,.98), rgba(16,26,28,.98)); box-shadow: 0 8px 22px rgba(0,0,0,.18); }
.character-panel, .mounted-horse-panel, .inventory-panel, .crafting-panel { padding: 12px; }
.section-heading { min-height: 24px; }
.section-heading h2 { margin: 0; font-size: 12px; font-weight: 500; }
.narrative-title-wrap { display: flex; align-items: center; gap: 7px; }
.narrative-icon { color: #9cb7b1; font-size: 14px; }
.eyebrow { font-size: 8px; letter-spacing: .1em; }
.character-panel > .section-heading .eyebrow { display: none; }
.level-badge { padding: 4px 6px; border-radius: 4px; font-size: 9px; }
.stat-block { margin-top: 9px; }
.stat-label { margin-bottom: 4px; font-size: 10px; }
.meter { height: 8px; border: 1px solid #344448; border-radius: 3px; background: #0f181a; }
.meter span { border-radius: 2px; }
.hp-meter span { background: linear-gradient(90deg, #9d414b, #ce6868); }
.mana-meter span { background: linear-gradient(90deg, #287187, #55a9bd); }
.fatigue-meter span { background: linear-gradient(90deg, #9d7137, #d6ae58); }
.fatigue-meter.fatigued span { background: linear-gradient(90deg, #a94c3e, #d8804c); }
.sleep-meter span { background: linear-gradient(90deg, #70619c, #b59dd9); }
.sleep-meter.tired span { background: linear-gradient(90deg, #aa7846, #d4ae68); }
.sleep-meter.critical span { background: linear-gradient(90deg, #9d414b, #ce6868); }
.xp-meter span { background: linear-gradient(90deg, #9c8244, #d7bd70); }
.gold-display { justify-content: flex-end; margin-top: 8px; padding-top: 7px; border-top: 0; font-size: 11px; }
.gold-display span:last-child { color: #d4c78f; font-size: 10px; }
.inventory-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; max-height: 188px; overflow-y: auto; padding: 1px 1px 2px; margin: 7px 0 0; }
.inventory-item { position: relative; display: flex; min-height: 67px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 4px 6px; border: 1px solid #354649; border-radius: 3px; background: rgba(10,19,20,.58); }
.item-icon { width: auto; height: auto; min-height: 26px; border-radius: 0; background: transparent; font-size: 21px; }
.inventory-item-name { max-width: 100%; overflow: hidden; color: #c5d1cc; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.item-quantity { position: absolute; top: 3px; right: 4px; color: #c4d1cc; font-size: 8px; }
.sell-button { width: 100%; padding: 4px; font-size: 8px; }
.empty-state { margin: 9px 0 1px; font-size: 10px; }
.item-total { font-size: 9px; }
.recipe-flow { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 9px; }
.recipe-ingredient, .recipe-output { position: relative; display: grid; width: 39px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid #354649; border-radius: 3px; background: rgba(10,19,20,.58); font-size: 20px; }
.recipe-ingredient small { position: absolute; right: 2px; bottom: 1px; color: #b8c8c0; font-size: 8px; }
.recipe-operator { color: #b5c5bd; font-size: 11px; }
.recipe-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; color: #cbd5cf; font-size: 10px; }
.recipe-effect { display: block; margin-top: 4px; color: #9aaba3; font-size: 9px; line-height: 1.4; }
.recipe-status { margin-top: 4px; color: #d8aa72; font-size: 9px; line-height: 1.4; }
.recipe-status:not([hidden]) { display: block; }
.small-button { padding: 5px 8px; border: 1px solid #456664; border-radius: 3px; background: #203436; color: #91c5b9; font-size: 9px; text-transform: uppercase; }
.small-button:hover:not(:disabled) { background: #2a4444; }
.shop-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 7px 0; border-bottom: 1px solid rgba(154,183,175,.13); }
.shop-item:last-child { border-bottom: 0; }
.shop-item-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #354649; border-radius: 3px; background: #101a1c; font-size: 19px; }
.shop-item-info { min-width: 0; }
.shop-item-info strong, .shop-item-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-item-info strong { color: #cad4ce; font-size: 10px; font-weight: 500; }
.shop-item-info small { margin-top: 3px; color: var(--gold); font-size: 9px; }
.shop-price-original { margin-right: 5px; color: #92968a; font-size: 8px; font-weight: 400; }
.shop-price-current { color: #d9c276; font-size: 9px; font-weight: 700; }
.shop-sell-section .shop-price-current { color: #a9c59f; }
.shop-dialog { width: min(560px, calc(100vw - 28px)); }
.smith-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 28px)); overflow-y: auto; border-color: #62543e; background: radial-gradient(ellipse at 85% 0, rgba(190,143,76,.13), transparent 48%), linear-gradient(145deg, #282b29, #171d1d 52%, #1d2220); }
.smith-dialog .map-dialog-header h2 { color: #e2d2aa; }
.smith-dialog .map-dialog-header .eyebrow, .smith-section .shop-section-kicker { color: #bb9b61; }
.smith-intro { margin: 12px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.smith-wallets { margin-bottom: 14px; }
.smith-section { min-width: 0; padding: 10px; border: 1px solid rgba(183,151,92,.22); border-radius: 5px; background: rgba(10,18,19,.35); }
.smith-section + .smith-section { margin-top: 12px; }
.smith-section .shop-section-heading { margin: 0 0 7px; }
.smith-section .shop-section-heading h3 { margin-top: 2px; }
.smith-trade-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.smith-trade-grid .smith-section + .smith-section { margin-top: 0; }
.smith-recipe { display: grid; gap: 7px; padding: 10px; border: 1px solid #554b39; border-radius: 4px; background: rgba(23,28,26,.7); }
.smith-recipe h3, .smith-recipe p { margin: 0; }
.smith-recipe h3 { color: #e2d2aa; font-size: 12px; }
.smith-recipe p { color: var(--muted); font-size: 10px; line-height: 1.45; }
.smith-material-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.smith-material-list li { padding: 5px 7px; border: 1px solid #40585a; border-radius: 3px; color: #a5d3c6; font-size: 9px; }
.smith-material-list li.missing { border-color: #87504c; color: #e58f83; }
.smith-recipe .smith-forge-cost { color: var(--gold); }
.smith-recipe > .small-button { justify-self: start; }
.smith-section .shop-item-info small { white-space: normal; }
.smith-section .empty-state { margin: 8px 0 0; }
.utility-dialog { width: min(560px, calc(100vw - 28px)); }
.utility-dialog-content { margin-top: 12px; }
.utility-dialog .inventory-list { margin-top: 8px; }
.profession-display { display: block; margin-top: 7px; color: #dfc981; font-size: 9px; line-height: 1.5; }
.profession-dialog { display: flex; width: min(1120px, calc(100vw - 28px)); max-height: min(880px, calc(100dvh - 28px)); flex-direction: column; overflow: hidden; padding: 22px; border-color: #756344; border-radius: 9px; background: radial-gradient(ellipse at 88% 0, rgba(190,143,76,.17), transparent 42%), linear-gradient(145deg, #282b29, #171d1d 52%, #1d2220); color: var(--text); box-shadow: 0 28px 90px rgba(0,0,0,.55), inset 0 0 0 1px rgba(231,187,112,.07); }
.profession-dialog:not([open]) { display: none; }
.profession-dialog::backdrop { background: rgba(4,9,10,.82); backdrop-filter: blur(5px) saturate(.75); }
.profession-dialog-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; padding: 0 0 16px; border-bottom: 1px solid rgba(190,143,76,.32); }
.profession-dialog-header .eyebrow { color: #c1a16b; }
.profession-dialog-header h2 { margin-top: 5px; color: #f0dfb6; font-family: "Playfair Display", Georgia, serif; font-size: 24px; letter-spacing: .01em; }
.profession-dialog-subtitle { margin: 5px 0 0; color: #aab3aa; font-size: 11px; line-height: 1.5; }
.profession-dialog-content { display: grid; min-height: 0; gap: 14px; overflow-y: auto; padding: 16px 3px 3px 0; scrollbar-color: #66573e transparent; }
.profession-dialog-content:not(.is-profession-selection) { align-content: start; }
.profession-dialog-content.is-profession-selection { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.profession-choice-intro { grid-column: 1 / -1; padding: 2px 2px 0; }
.profession-choice-intro h3 { margin: 0; color: #e2d3b1; font-family: "Playfair Display", Georgia, serif; font-size: 17px; }
.profession-choice-intro p { margin: 5px 0 0; color: #aab3aa; font-size: 11px; line-height: 1.6; }
.profession-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 12px 10px; min-width: 0; padding: 15px; border: 1px solid rgba(154,183,175,.2); border-radius: 6px; background: linear-gradient(145deg, rgba(29,39,37,.86), rgba(10,18,19,.64)); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.profession-option-explorer { border-top-color: #789f8d; }
.profession-option-hunter { border-top-color: #ba7770; }
.profession-option-artisan { border-top-color: #c1a063; }
.profession-option-seal, .profession-career-seal { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(231,187,112,.35); border-radius: 50%; background: radial-gradient(circle, rgba(231,187,112,.15), rgba(231,187,112,.035) 70%); color: #e8cb91; font-size: 21px; }
.profession-option-content { min-width: 0; }
.profession-option-kicker, .profession-career-kicker, .profession-contract-kicker { display: block; color: #bd9b61; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.profession-option h3, .profession-career-details h3, .profession-contract-card h3 { margin: 4px 0 0; color: #eee0bf; font-size: 14px; font-weight: 600; }
.profession-option p, .profession-career-details p { margin: 7px 0 0; color: #aab3aa; font-size: 10px; line-height: 1.55; }
.profession-option .small-button { grid-column: 1 / -1; justify-self: stretch; min-height: 35px; }
.profession-career-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(145px, .62fr); align-items: center; gap: 14px; padding: 16px; border: 1px solid rgba(190,143,76,.35); border-radius: 6px; background: linear-gradient(110deg, rgba(111,83,43,.22), rgba(10,18,19,.6) 70%); }
.profession-career-hunter .profession-career-seal { border-color: rgba(201,125,117,.45); background: rgba(130,55,51,.2); color: #e4a39a; }
.profession-career-artisan .profession-career-seal { border-color: rgba(201,170,104,.45); background: rgba(130,99,41,.2); color: #e6c579; }
.profession-career-details { min-width: 0; }
.profession-career-details h3 { margin-top: 3px; font-family: "Playfair Display", Georgia, serif; font-size: 19px; }
.profession-career-details p { margin-top: 3px; }
.profession-career-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.profession-career-meta span { padding: 4px 6px; border: 1px solid rgba(190,143,76,.2); border-radius: 3px; background: rgba(8,14,14,.35); color: #c7b895; font-size: 8px; }
.profession-career-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px 10px; color: #aeb5a9; font-size: 9px; }
.profession-career-progress span:nth-child(2) { color: #e5c77f; font-variant-numeric: tabular-nums; }
.profession-career-progress progress, .profession-contract-card > progress { width: 100%; height: 6px; grid-column: 1 / -1; overflow: hidden; border: 0; border-radius: 99px; background: #101715; accent-color: #d0ad65; }
.profession-career-progress progress::-webkit-progress-bar, .profession-contract-card > progress::-webkit-progress-bar { border-radius: 99px; background: #101715; }
.profession-career-progress progress::-webkit-progress-value, .profession-contract-card > progress::-webkit-progress-value { border-radius: 99px; background: linear-gradient(90deg, #8d7040, #e1bd70); }
.profession-career-progress progress::-moz-progress-bar, .profession-contract-card > progress::-moz-progress-bar { border-radius: 99px; background: linear-gradient(90deg, #8d7040, #e1bd70); }
.profession-career-max { justify-self: end; padding: 7px 9px; border: 1px solid rgba(231,187,112,.28); border-radius: 4px; color: #e6c579; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.profession-contract-card { position: relative; display: grid; gap: 12px; padding: 17px; border: 1px solid rgba(154,183,175,.24); border-radius: 6px; background: linear-gradient(135deg, rgba(28,42,39,.82), rgba(10,18,19,.72) 72%); }
.profession-board-notice { margin: 0; padding: 10px 12px; border: 1px solid rgba(190,143,76,.22); border-radius: 4px; background: rgba(113,83,43,.1); color: #c3b38e; font-size: 10px; line-height: 1.55; }
.profession-board-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid rgba(190,143,76,.22); }
.profession-board-section-heading h3 { margin: 0; color: #e2d3b1; font-family: "Playfair Display", Georgia, serif; font-size: 16px; }
.profession-board-section-heading > span { padding: 4px 8px; border: 1px solid rgba(190,143,76,.24); border-radius: 10px; color: #d9bd7c; font-size: 9px; font-variant-numeric: tabular-nums; }
.profession-board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.profession-board-grid > .profession-contract-card { min-width: 0; padding: 14px; }
.profession-active-heading { margin-top: 4px; }
.profession-board-placeholder { display: grid; min-height: 230px; align-content: center; justify-items: center; gap: 13px; padding: 16px; border: 1px dashed rgba(186,155,94,.42); border-radius: 5px; background: repeating-linear-gradient(135deg, rgba(78,61,36,.08) 0 9px, rgba(12,18,17,.2) 9px 18px); text-align: center; }
.profession-board-placeholder-sign { display: grid; min-height: 82px; width: min(100%, 220px); place-items: center; padding: 12px; border: 2px solid #9b7d4d; border-radius: 4px; background: linear-gradient(145deg, #58472f, #302a22); box-shadow: 0 5px 12px rgba(0,0,0,.3), inset 0 0 0 3px rgba(231,187,112,.08); color: #e5cc94; font-family: "Playfair Display", Georgia, serif; font-size: 17px; font-weight: 700; letter-spacing: .06em; text-shadow: 0 2px 4px rgba(0,0,0,.6); transform: rotate(-2deg); }
.profession-board-placeholder small { color: #9da99f; font-size: 9px; }
.profession-contract-offer { border-color: rgba(190,143,76,.42); box-shadow: inset 3px 0 #b99558; }
.profession-contract-active { box-shadow: inset 3px 0 #bd83c9; }
.profession-contract-active.is-ready { border-color: rgba(128,201,161,.42); box-shadow: inset 3px 0 #80c9a1; }
.profession-contract-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.profession-contract-card h3 { margin-top: 4px; font-size: 15px; }
.profession-contract-status { flex: 0 0 auto; padding: 6px 8px; border: 1px solid rgba(189,131,201,.3); border-radius: 3px; background: rgba(112,65,124,.14); color: #d4a7df; font-size: 8px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.profession-contract-offer .profession-contract-status { border-color: rgba(190,143,76,.3); background: rgba(137,100,41,.13); color: #e1c17f; }
.profession-contract-active.is-ready .profession-contract-status { border-color: rgba(128,201,161,.32); background: rgba(61,112,79,.15); color: #9bd5b3; }
.profession-contract-objective { margin: 0; color: #c3ccc3; font-size: 12px; line-height: 1.65; }
.profession-contract-dialogue { display: grid; gap: 6px; margin: 0; padding: 12px 14px; border-left: 2px solid rgba(190,143,76,.65); border-radius: 0 4px 4px 0; background: linear-gradient(100deg, rgba(113,83,43,.17), rgba(10,18,19,.22)); }
.profession-contract-dialogue-label { color: #bd9b61; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.profession-contract-dialogue p { margin: 0; color: #d3d0c3; font-family: "Playfair Display", Georgia, serif; font-size: 13px; font-style: italic; line-height: 1.65; }
.profession-contract-progress-label { display: flex; justify-content: space-between; gap: 10px; margin-bottom: -7px; color: #aab3aa; font-size: 9px; }
.profession-contract-progress-label span:last-child { color: #d9c28e; font-variant-numeric: tabular-nums; }
.profession-contract-card > progress { margin-top: -5px; accent-color: #bd83c9; }
.profession-contract-active > progress::-webkit-progress-value { background: linear-gradient(90deg, #785187, #c493d0); }
.profession-contract-active > progress::-moz-progress-bar { background: linear-gradient(90deg, #785187, #c493d0); }
.profession-contract-active.is-ready > progress { accent-color: #80c9a1; }
.profession-contract-active.is-ready > progress::-webkit-progress-value, .profession-contract-active.is-ready > progress::-moz-progress-bar { background: linear-gradient(90deg, #427c5c, #8bd3a5); }
.profession-contract-rewards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.profession-reward { display: grid; gap: 3px; min-width: 0; padding: 9px; border: 1px solid rgba(190,143,76,.19); border-radius: 4px; background: rgba(8,14,14,.35); }
.profession-reward strong { color: #e5c77f; font-size: 15px; font-variant-numeric: tabular-nums; }
.profession-reward span { color: #9da99f; font-size: 9px; }
.profession-contract-active .profession-reward strong { color: #d3a8df; }
.profession-contract-active.is-ready .profession-reward strong { color: #9bd5b3; }
.profession-contract-card .profession-action-primary { justify-self: stretch; min-height: 39px; border-color: rgba(231,187,112,.5); background: linear-gradient(100deg, #3d3323, #292b23); color: #f0d394; font-size: 10px; letter-spacing: .04em; }
.profession-contract-card .profession-action-primary:hover:not(:disabled) { border-color: #e1bd70; background: #463a25; }
.profession-contract-active.is-ready .profession-action-primary { border-color: rgba(128,201,161,.45); background: #24382e; color: #a9dfbd; }
.profession-empty-state { display: grid; justify-items: center; gap: 7px; padding: 28px 18px; border: 1px dashed rgba(154,183,175,.24); border-radius: 6px; background: rgba(10,18,19,.34); text-align: center; }
.profession-empty-state > span { color: #cfb16f; font-size: 23px; }
.profession-empty-state h3 { margin: 0; color: #e2d3b1; font-family: "Playfair Display", Georgia, serif; font-size: 16px; }
.profession-empty-state p { max-width: 440px; margin: 0; color: #aab3aa; font-size: 11px; line-height: 1.6; }
@media (max-width: 850px) {
  .profession-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.cluebook-dialog { width: min(680px, calc(100vw - 28px)); }
.cluebook-content { display: grid; gap: 14px; }
.clue-group { display: grid; gap: 7px; }
.clue-group h3 { margin: 0; padding-bottom: 6px; border-bottom: 1px solid rgba(154,183,175,.18); color: var(--gold); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.clue-entry { position: relative; padding: 10px 12px; border: 1px solid #35494b; border-radius: 4px; background: rgba(10,18,19,.45); }
.clue-entry.unread { border-color: #617d69; background: rgba(38,59,48,.35); }
.clue-entry strong { display: block; color: var(--text); font-size: 12px; }
.clue-entry p { margin: 6px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.clue-entry small { display: block; margin-top: 7px; color: #86a49b; font-size: 9px; }
.clue-indicator { min-width: 16px; height: 16px; display: inline-grid; place-items: center; padding: 0 4px; border-radius: 10px; background: #a77e37; color: #111715; font-size: 9px; font-weight: 700; line-height: 1; }
.clue-indicator[hidden] { display: none; }
.party-talk-indicator { min-width: 16px; border: 1px solid rgba(131,213,167,.38); background: #376e4d; color: #d7ffe3; box-shadow: 0 0 9px rgba(131,213,167,.28); }
.party-button .party-talk-indicator { font-size: 9px; }
.party-new-talk { display: inline-block; margin-left: 5px; padding: 2px 5px; border: 1px solid rgba(131,213,167,.4); border-radius: 8px; background: rgba(53,110,77,.28); color: #9ce3b5; font-size: 8px; letter-spacing: .06em; vertical-align: middle; }
.clue-open-button { margin-top: 5px; }
.quest-entry .clue-open-button { align-self: start; }
.shop-wallets { display: flex; justify-content: space-between; gap: 10px; padding: 10px; border: 1px solid #35494b; border-radius: 4px; background: rgba(10,18,19,.45); color: var(--muted); font-size: 11px; }
.shop-wallets strong { margin-left: 4px; color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-dialog-heading { margin: 16px 0 4px; color: var(--gold); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.shop-dialog .empty-state { margin: 6px 0 0; }
.shop-buy-button { padding: 5px 6px; font-size: 8px; }
.story-panel { display: flex; min-height: 450px; flex-direction: column; overflow: hidden; padding: 0 12px; }
.narrative-heading { min-height: 34px; flex: 0 0 auto; }
.narrative-heading h2 { text-transform: uppercase; letter-spacing: .03em; }
.scene-banner { min-height: 27px; flex: 0 0 auto; align-items: center; padding: 4px 8px; border: 1px solid #304345; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #17282a, #1d3032); }
.scene-meta { gap: 6px; font-size: 9px; }
.scene-symbol { font-size: 13px; }
.chapter-label { font-size: 8px; }
.scene-world-status { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 3px 10px; margin-left: auto; text-align: right; }
.scene-world-status .chapter-label { margin-left: 0; }
.time-indicator, .season-indicator, .weather-indicator { color: #a8b9b3; font-size: 8px; letter-spacing: .04em; white-space: nowrap; }
.season-indicator { color: #b6c49a; }
.weather-indicator { color: #c2c8aa; }
.story-content { min-height: 0; padding: 13px 10px 12px; }
.story-content h1 { margin: 5px 0 7px; font-family: "DM Sans", "Segoe UI", sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.story-text { max-width: none; color: #c2ccc7; font-size: 12px; line-height: 1.65; }
.scene-context { margin-top: 9px; }
.scene-context p { font-size: 10px; line-height: 1.5; }
.story-content .eyebrow { color: #8fb2a9; }
.combat-panel { margin-top: 12px; padding: 9px; border-radius: 4px; }
.enemy-heading { margin-bottom: 7px; }
.enemy-icon { width: 26px; height: 26px; border-radius: 3px; }
.log-list { display: grid; min-height: 0; max-height: none; flex: 1 1 auto; align-content: start; gap: 0; overflow-y: auto; padding: 0 6px; margin: 0 0 6px; list-style: none; }
.log-list li { padding: 4px 5px 4px 14px; border-bottom: 0; color: #a8b6b0; font-size: 10px; line-height: 1.45; }
.log-list li::before { top: 9px; width: 4px; height: 4px; }
.log-list li:first-child { color: #ded5b8; }
.log-list li.log-entry-current { color: #eadbbd; font-size: 12px; line-height: 1.45; }
.log-list li.log-entry-previous { color: #c1c7d1; font-size: 11px; }
.log-list li.log-entry-older { color: #a0a8b7; font-size: 10px; }
.log-list li.log-entry-faded { color: #858e9e; }
.action-panel { padding: 9px 12px 3px; }
.action-heading { min-height: 24px; }
.action-heading h2 { text-transform: uppercase; letter-spacing: .03em; }
.action-area { padding: 7px 0 9px; border-top: 1px solid rgba(154,183,175,.15); background: transparent; }
.action-list { gap: 6px; margin-top: 7px; }
.action-button { min-height: 29px; gap: 5px; padding: 6px 8px; border-color: #40585a; border-radius: 3px; background: #1b2c2e; color: #a5d3c6; font-size: 10px; font-weight: 500; }
.action-button:hover:not(:disabled) { border-color: #6b9990; background: #243b3d; }
.action-button.primary { border-color: #786846; background: #322f25; color: #dfc981; }
.action-button.danger { border-color: #87504c; background: #362526; color: #e58f83; }
.action-icon { font-size: 11px; }
.story-panel, .action-panel { transition: border-color .25s ease, background .25s ease, box-shadow .25s ease; }
.story-panel.in-combat {
  border-color: rgba(210, 88, 91, .7);
  background: linear-gradient(145deg, rgba(48, 27, 34, .99), rgba(27, 23, 31, .99));
  box-shadow: 0 0 0 1px rgba(210, 88, 91, .12), 0 12px 32px rgba(0, 0, 0, .2);
}
.story-panel.in-combat .scene-banner {
  border-bottom-color: rgba(210, 88, 91, .32);
  background: linear-gradient(90deg, rgba(54, 26, 33, .66), rgba(34, 24, 31, .48)), radial-gradient(ellipse at 80% 20%, rgba(195, 75, 83, .2), transparent 45%), linear-gradient(135deg, #39272e, #241f29);
}
.story-panel.in-combat .narrative-icon,
.story-panel.in-combat .eyebrow { color: #e58f83; }
.action-panel.in-combat {
  border-color: rgba(210, 88, 91, .62);
  background: linear-gradient(145deg, rgba(46, 29, 35, .98), rgba(27, 24, 31, .98));
  box-shadow: 0 0 18px rgba(174, 54, 65, .12);
}
.action-panel.in-combat .narrative-icon { color: #e58f83; }
.action-panel.in-combat .action-area { border-top-color: rgba(210, 88, 91, .28); }
.action-panel.in-combat .action-button:not(.primary):not(.danger) {
  border-color: rgba(184, 97, 101, .48);
  background: #33262d;
  color: #efc2bd;
}
.action-panel.in-combat .action-button:hover:not(:disabled) {
  border-color: #d67578;
  background: #422d35;
}
.meter.critical span { animation: low-status-blink 1s ease-in-out infinite; }
.combat-damage-shake { animation: combat-damage-shake .42s ease-in-out; }
@keyframes low-status-blink {
  50% { opacity: .38; filter: brightness(1.5); }
}
@keyframes combat-damage-shake {
  0%, 100% { transform: translateX(0); }
  18%, 54% { transform: translateX(-5px); }
  36%, 72% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .meter.critical span { animation: none; }
  .combat-damage-shake { animation: none; }
}
.live-indicator { font-size: 7px; }

@media (max-width: 760px) {
  .app-shell { width: calc(100% - 28px); }
  .game-layout { grid-template-columns: 1fr; }
  .log-scene { display: none; }
  .main-column { order: 1; }
  .sidebar { order: 2; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .character-panel { grid-row: span 2; }
}

@media (max-width: 540px) {
  .app-shell { width: calc(100% - 20px); }
  .topbar { min-height: 64px; padding: 6px 0; }
  .brand strong { font-size: 12px; }
  .brand small { font-size: 8px; }
  .topbar-actions { position: static; width: 100%; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
  .game-layout { gap: 10px; padding-top: 10px; }
  .sidebar { grid-template-columns: 1fr 1fr; gap: 8px; }
  .character-panel { grid-column: 1 / -1; grid-row: auto; }
  .story-panel { min-height: 380px; padding: 0 8px; }
  .scene-banner { align-items: flex-start; flex-wrap: wrap; }
  .scene-world-status { width: 100%; justify-content: flex-start; margin-left: 19px; text-align: left; }
  .scene-world-status .chapter-label { margin-left: 0; }
  .log-list { max-height: 180px; }
  .action-panel { padding-right: 9px; padding-left: 9px; }
  .action-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
  .action-category-buttons { display: grid; grid-template-columns: 1fr; }
  .action-button { max-width: 100%; }
  .character-panel, .mounted-horse-panel { padding: 10px; }
  .inventory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cluebook-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 13px; }
}

@media (max-width: 370px) {
  .sidebar { grid-template-columns: 1fr; }
  .character-panel { grid-column: auto; }
  .character-panel { grid-row: auto; }
}

.map-button { display: inline-flex; align-items: center; gap: 6px; border-color: #456664; color: #a5d3c6; }
.map-button span { font-size: 16px; }
.party-button .item-total { font-size: 9px; }
.map-dialog {
  width: min(820px, calc(100vw - 28px));
  max-width: none;
  max-height: min(760px, calc(100dvh - 30px));
  padding: 18px;
  overflow: auto;
  border: 1px solid #496467;
  border-radius: 8px;
  background: linear-gradient(145deg, #172426, #10191b);
  color: var(--text);
  box-shadow: 0 24px 90px rgba(0,0,0,.65);
}
#map-dialog {
  padding: 20px;
  border: 2px solid #59645a;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(29,39,35,.98), rgba(12,20,19,.99));
  box-shadow: 0 24px 90px rgba(0,0,0,.65), inset 0 0 0 1px rgba(218,192,130,.16);
}
.map-dialog::backdrop { background: rgba(4,9,10,.78); backdrop-filter: blur(3px); }
.map-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.map-dialog-header h2 { margin-top: 4px; font-size: 19px; }
#map-dialog .map-dialog-header h2 { color: #ead9ad; font-size: 21px; }
#map-dialog .map-dialog-header .eyebrow { color: #9ca69b; letter-spacing: .12em; }
.map-close { width: 34px; height: 34px; padding: 0; font-size: 22px; }
#camp-dialog {
  width: min(700px, calc(100vw - 28px));
  border-color: #7a6642;
  background: radial-gradient(ellipse at 85% 0, rgba(201,151,78,.13), transparent 48%), linear-gradient(145deg, #282820, #191e1b 55%, #172020);
}
#camp-dialog .map-dialog-header { padding-bottom: 12px; border-bottom: 1px solid rgba(201,171,111,.2); }
#camp-dialog .map-dialog-header h2 { color: #e9d8ad; }
#camp-dialog .map-dialog-header .eyebrow { color: #c3a36a; }
.camp-intro, .camp-section-hint, .camp-rest-preview, .camp-conversation-line { color: #bac4b8; font-size: 11px; line-height: 1.55; }
.camp-intro { margin: 12px 0; }
.camp-section { padding: 12px; border: 1px solid rgba(187,158,103,.22); border-radius: 6px; background: rgba(9,16,15,.42); }
.camp-section + .camp-section { margin-top: 10px; }
.camp-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.camp-section-heading h3 { margin: 0; color: #e0d1a9; font-size: 12px; }
.camp-provisions, .camp-cost { color: #d6c287; font-size: 9px; }
.camp-party-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 7px; }
.camp-member { display: grid; gap: 6px; padding: 8px; border: 1px solid rgba(129,157,132,.22); border-radius: 4px; background: rgba(26,38,32,.54); color: #abb9aa; font-size: 9px; }
.camp-member strong { color: #e2dfc9; font-size: 10px; }
.camp-member-status { color: #89998d; font-size: 8px; }
.camp-member-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 7px; color: #aab6a7; font-size: 8px; }
.camp-mini-meter { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(5,10,8,.72); }
.camp-mini-meter span { display: block; height: 100%; border-radius: inherit; transition: width .25s ease; }
.camp-hp-meter span { background: linear-gradient(90deg, #b95262, #e77f82); }
.camp-energy-meter span { background: linear-gradient(90deg, #378b8a, #77cbc0); }
.camp-fatigue-meter span { background: linear-gradient(90deg, #b87c38, #e5bb62); }
.camp-rest-preview { margin: 0 0 9px; }
.camp-watch-control { display: grid; grid-template-columns: minmax(90px, auto) minmax(120px, 1fr); align-items: center; gap: 6px 10px; margin-bottom: 9px; color: #d8ddc9; font-size: 10px; }
.camp-watch-control select { width: 100%; padding: 6px 8px; border: 1px solid rgba(187,158,103,.35); border-radius: 4px; background: #17201b; color: #e2dfc9; font: inherit; }
.camp-watch-hint { grid-column: 1 / -1; margin: 0; color: #aab6a7; font-size: 9px; line-height: 1.45; }
.camp-risk-summary { display: flex; align-items: center; gap: 6px; margin: 0 0 9px; color: #bac4b8; font-size: 10px; }
.camp-ambush-risk { padding: 2px 7px; border: 1px solid currentColor; border-radius: 99px; font-size: 9px; font-weight: 700; }
.camp-risk-nenhum { color: #8fc49a; }
.camp-risk-baixo { color: #c2c879; }
.camp-risk-medio { color: #e2ad61; }
.camp-risk-alto { color: #e27d72; }
.camp-rest-button { border-color: #796a45; color: #e4d09b; }
.camp-section-hint { margin: -2px 0 9px; }
.camp-recipes { display: grid; gap: 7px; }
.camp-recipe-group { min-width: 0; border: 1px solid rgba(139,157,125,.17); border-radius: 4px; background: rgba(20,29,24,.35); }
.camp-recipe-group > summary { padding: 7px 9px; color: #d8ddc9; cursor: pointer; font-size: 9px; font-weight: 700; }
.camp-recipe-group-missing > summary { color: #aab6a7; }
.camp-recipe-items { display: grid; max-height: 190px; gap: 5px; padding: 0 6px 6px; overflow-y: auto; overscroll-behavior: contain; }
.camp-recipe { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 7px; border: 1px solid rgba(139,157,125,.17); border-radius: 4px; background: rgba(20,29,24,.5); }
.camp-recipe > div { display: grid; gap: 4px; min-width: 0; }
.camp-recipe strong { color: #d8ddc9; font-size: 10px; }
.camp-recipe small { color: #aab6a7; font-size: 9px; line-height: 1.4; }
.camp-recipe button { min-width: 80px; }
.camp-recipe-empty { margin: 0; padding: 8px; color: #aab6a7; font-size: 9px; }
.camp-conversation-line { margin: 0 0 9px; }
.camp-conversation-actions { display: flex; flex-wrap: wrap; gap: 7px; }
@media (max-width: 600px) {
  #camp-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
  .camp-section { padding: 9px; }
  .camp-section-heading { align-items: flex-start; }
  .camp-recipe { gap: 6px; padding: 7px; }
  .camp-recipe button { min-width: 68px; padding-inline: 7px; }
}
#map-dialog .map-close { width: 36px; height: 36px; border-color: #59645a; color: #d6d1bf; }
.map-hint { margin: 10px 0 14px; color: var(--muted); font-size: 11px; line-height: 1.6; }
#map-dialog .map-hint { color: #c4bda7; }
.map-view-controls { display: flex; gap: 6px; margin: 0 0 8px; }
.map-layer-controls { display: flex; gap: 6px; margin: 0 0 12px; }
#map-layer-controls[hidden], .map-stage[hidden] { display: none !important; }
.map-layer-button {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid rgba(201,180,133,.38);
  border-radius: 999px;
  background: rgba(17,26,24,.7);
  color: #c8c1ad;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.map-layer-button:hover { border-color: #c9b47d; color: #ead9ad; }
.map-layer-button[aria-pressed="true"] {
  border-color: #c9b47d;
  background: linear-gradient(145deg, rgba(131,105,60,.6), rgba(67,62,42,.76));
  color: #f3dfad;
  box-shadow: inset 0 0 0 1px rgba(255,231,168,.12);
}
.party-dialog { width: min(680px, calc(100vw - 28px)); }
.settings-dialog { width: min(520px, calc(100vw - 28px)); }
.settings-options { display: grid; gap: 12px; }
.settings-option { display: grid; gap: 5px; width: 100%; text-align: left; }
.settings-option span { color: #d8e1dc; font-size: 13px; font-weight: 600; }
.settings-option small { color: var(--muted); font-size: 10px; }
.audio-dialog { width: min(620px, calc(100vw - 28px)); }
.audio-settings { display: grid; gap: 12px; }
.audio-setting-group { padding: 13px; border: 1px solid rgba(154,183,175,.18); border-radius: 6px; background: rgba(10,19,20,.32); }
.audio-setting-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.audio-setting-heading h3 { margin: 0; color: #cbd5cf; font-size: 13px; font-weight: 600; }
.audio-toggle { min-width: 122px; }
.audio-volume-label { display: flex; justify-content: space-between; gap: 8px; color: #cbd5cf; font-size: 11px; }
.audio-settings input { width: 100%; accent-color: var(--gold); }
.audio-status { min-height: 18px; margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.active-party-section, .party-roster-section { margin-top: 16px; }
.active-party-section h3, .party-roster-section h3 { margin: 0; color: #cbd5cf; font-size: 12px; font-weight: 600; }
.active-party-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 10px 0 0; list-style: none; }
.active-party-member { padding: 7px 10px; border: 1px solid rgba(222,195,126,.35); border-radius: 5px; background: rgba(231,187,112,.08); color: var(--gold); font-size: 11px; }
.active-party-section .empty-state { margin: 10px 0 0; }
.party-roster-section { padding-top: 15px; border-top: 1px solid rgba(154,183,175,.18); }
.party-roster-section > .empty-state { margin: 10px 0 0; }
.party-list { max-height: min(44vh, 360px); }
.map-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border: 1px solid #806d4c;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 48% 44%, rgba(255,245,208,.38), transparent 62%),
    radial-gradient(ellipse at 0 0, rgba(106,72,38,.24), transparent 44%),
    radial-gradient(ellipse at 100% 100%, rgba(106,72,38,.2), transparent 42%),
    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(89,67,40,.13) 40px),
    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(89,67,40,.13) 40px),
    linear-gradient(135deg, #c9b58d, #e0d0aa 48%, #bba47a);
  box-shadow: inset 0 0 36px rgba(70,47,24,.32), inset 0 0 0 6px rgba(92,67,38,.1);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.map-viewport::-webkit-scrollbar { display: none; }
.map-viewport.grabbing { cursor: grabbing; }
.map-viewport.grabbing .map-stage { transition: none; }
.map-viewport::before, .map-viewport::after { position: absolute; z-index: 1; pointer-events: none; content: ""; }
.map-viewport::before { inset: 8px; border: 1px solid rgba(81,61,38,.24); border-radius: 5px; }
.map-viewport::after {
  right: 16px;
  bottom: 14px;
  width: 72px;
  height: 42px;
  opacity: .22;
  background: repeating-radial-gradient(ellipse at 100% 100%, transparent 0 8px, #655638 9px 10px, transparent 11px 17px);
}
.map-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: center center;
  transition: transform .08s ease-out;
  will-change: transform;
}
.map-viewport.world-mode {
  border-color: #6c7a75;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(109,143,128,.22), transparent 48%),
    radial-gradient(ellipse at 18% 30%, rgba(50,84,74,.46), transparent 38%),
    radial-gradient(ellipse at 84% 72%, rgba(45,73,71,.5), transparent 40%),
    repeating-linear-gradient(0deg, transparent 0, transparent 47px, rgba(144,173,157,.06) 48px),
    repeating-linear-gradient(90deg, transparent 0, transparent 47px, rgba(144,173,157,.06) 48px),
    linear-gradient(145deg, #10201e, #182b2a 48%, #0c191a);
  box-shadow: inset 0 0 54px rgba(0,0,0,.48), inset 0 0 0 6px rgba(140,173,157,.06);
}
.world-map-stage { overflow: visible; }
.world-map-stage::before {
  position: absolute;
  z-index: 0;
  inset: -10%;
  background-image:
    repeating-radial-gradient(ellipse at 30% 45%, transparent 0 34px, rgba(156,196,184,.045) 36px 38px, transparent 40px 74px),
    repeating-radial-gradient(ellipse at 72% 68%, transparent 0 46px, rgba(135,183,175,.035) 48px 50px, transparent 52px 98px);
  background-position: 0 0, 0 0;
  background-size: 560px 420px, 680px 520px;
  content: "";
  animation: world-sea-current 32s linear infinite;
  opacity: .48;
  pointer-events: none;
}
.world-map-art { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; user-select: none; }
@keyframes world-sea-current {
  to { background-position: 180px 90px, -140px 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .world-map-stage::before { animation: none; }
}
.world-region-marker, .world-future-label {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 4px;
  width: clamp(76px, 15%, 138px);
  min-height: 48px;
  padding: 7px 5px;
  border: 1px solid rgba(229,204,139,.68);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(31,47,40,.95), rgba(17,31,29,.95));
  color: #ede3c5;
  text-align: center;
  box-shadow: 0 5px 13px rgba(0,0,0,.32), inset 0 0 0 1px rgba(232,210,156,.08);
  transform: translate(-50%, -50%);
}
.world-region-marker {
  top: 28%;
  left: 31%;
  cursor: pointer;
}
.world-region-marker:hover, .world-region-marker:focus-visible {
  border-color: #f2d587;
  background: linear-gradient(145deg, rgba(57,77,56,.98), rgba(24,42,36,.98));
  outline: 2px solid rgba(233,206,143,.35);
  outline-offset: 2px;
}
.world-region-emblem, .world-future-emblem {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(228,204,143,.56);
  border-radius: 50%;
  color: #f0d99e;
  font-size: 15px;
}
.world-region-marker strong, .world-future-label strong { font-size: clamp(7px, .95vw, 10px); line-height: 1.15; }
.world-region-marker small { color: #c2c7b6; font-size: 8px; line-height: 1.2; }
.world-region-status {
  padding: 2px 5px;
  border: 1px solid rgba(160,188,148,.36);
  border-radius: 999px;
  color: #b9d2aa;
  font-size: 7px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.world-future-label {
  border-color: rgba(211,203,164,.38);
  background: linear-gradient(145deg, rgba(28,43,43,.86), rgba(19,31,33,.84));
  opacity: .9;
  pointer-events: none;
}
.world-future-label .world-region-status {
  border-color: rgba(211,203,164,.28);
  color: #c5c2b2;
}
.world-region-coast { top: 26%; left: 61%; }
.world-region-mountain { top: 48%; left: 80%; }
.world-region-fields { top: 48%; left: 55%; }
.world-region-forest { top: 65%; left: 29%; }
.world-region-marsh { top: 79%; left: 57%; }
.world-region-marker { z-index: 2; }
.world-future-label { z-index: 2; }
.world-region-marker .world-region-status {
  border-color: rgba(160,188,148,.48);
  color: #c4dfb5;
}
.world-horse-location { max-width: 100%; color: #f0d99e; font-size: 7px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.map-legend .legend-horse-entry { display: inline-flex !important; }
.world-legend-entry { display: none !important; }
.world-map-legend > span:not(.world-legend-entry) { display: none; }
.world-map-legend .world-legend-entry { display: inline-flex !important; }
.world-map-legend .legend-world-current,
.world-map-legend .legend-world-future {
  width: 11px;
  height: 11px;
  border: 1px solid #d8c58e;
  border-radius: 3px;
  background: #667b61;
}
.world-map-legend .legend-world-future {
  border-color: #c7c1a3;
  background: #64776d;
}
.map-paths, .map-nodes { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-paths { z-index: 0; overflow: visible; }
.map-path-casing, .map-path, .map-path-detail { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.map-path-casing { stroke: rgba(90,64,36,.52); stroke-width: 19; }
.map-path-casing.fog { stroke: rgba(73,63,48,.32); stroke-width: 11; stroke-dasharray: 2 15; }
.map-path-casing.shortcut { stroke: rgba(105,73,31,.65); stroke-width: 14; stroke-dasharray: 2 12; }
.map-path-casing.map-path-transition { stroke: rgba(95,76,113,.7); stroke-width: 16; }
.map-path-casing.map-path-transition.hidden { stroke: rgba(101,88,72,.5); }
.map-path { stroke-width: 13; }
.map-path.known { stroke: #c4ad7e; }
.map-path.fog { stroke: #635e50; stroke-width: 6; stroke-dasharray: 2 15; opacity: .82; }
.map-path.shortcut { stroke: #d7ae59; stroke-dasharray: 2 12; stroke-width: 8; }
.map-path.map-path-transition { stroke: #af8fda; stroke-width: 7; stroke-dasharray: 9 12; opacity: .9; }
.map-path.map-path-transition.hidden { stroke: rgba(181,160,120,.82); }
.map-path-detail { stroke: rgba(91,104,74,.75); stroke-width: 3; stroke-dasharray: 1 8; }
.map-node {
  position: absolute;
  z-index: 1;
  display: flex;
  width: clamp(88px, 14vw, 122px);
  min-height: 68px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 6px;
  transform: translate(-50%, calc(-100% - 10px));
  left: var(--map-x);
  top: var(--map-y);
  border: 1px solid #8a7148;
  border-radius: 7px;
  background: linear-gradient(145deg, #ebddb9, #cdb88c);
  box-shadow: 0 4px 9px rgba(45,34,21,.42), inset 0 0 0 3px rgba(255,246,216,.38);
  color: #433b2b;
  text-align: center;
}
.map-node-layout-probe { position: absolute; visibility: hidden; pointer-events: none; }
.map-node[data-layer="underground"] {
  border-color: #5d6a8f;
  background: linear-gradient(145deg, #dfe8ff, #9baed1);
  box-shadow: 0 4px 9px rgba(20,32,59,.35), inset 0 0 0 3px rgba(224,233,255,.55);
}
.map-node[data-layer="surface"] { border-color: #8a7148; }
button.map-node { font: inherit; cursor: pointer; }
button.map-node:hover { border-color: #f2d587; background: linear-gradient(145deg, #f4e7c6, #ddc594); }
.map-node.current { border-color: #99763a; background: linear-gradient(145deg, #f3e2ad, #d9bd79); box-shadow: 0 0 0 3px rgba(194,153,74,.28), 0 5px 14px rgba(45,34,21,.5), inset 0 0 0 3px rgba(255,250,224,.45); }
.map-node.owned-property { z-index: 2; border: 2px solid #39735d; background: linear-gradient(145deg, #d9efd8, #9cc9a4); box-shadow: 0 0 0 3px rgba(48,112,82,.28), 0 0 18px rgba(45,133,91,.6), 0 5px 14px rgba(30,45,29,.48), inset 0 0 0 3px rgba(244,255,228,.72); }
.map-node.owned-property.current { border-color: #39735d; background: linear-gradient(145deg, #e9efc0, #acd09a); box-shadow: 0 0 0 3px rgba(48,112,82,.3), 0 0 18px rgba(45,133,91,.62), 0 5px 14px rgba(30,45,29,.5), inset 0 0 0 3px rgba(255,255,226,.76); }
.map-node-current-badge { display: inline-block; padding: 2px 6px; border-radius: 8px; background: #4b4936; color: #f0d68b; font-size: 7px; font-weight: 800; letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.map-node-home-badge { display: inline-block; padding: 2px 7px; border: 1px solid rgba(30,83,57,.6); border-radius: 8px; background: #285c45; color: #f4e7a9; font-size: 7px; font-weight: 900; letter-spacing: .1em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.map-node-horse-badge { position: absolute; z-index: 3; top: -8px; right: -9px; display: inline-block; max-width: 95%; overflow: hidden; padding: 2px 6px; border: 1px solid rgba(110,91,51,.65); border-radius: 8px; background: #665432; color: #fff0bd; font-size: 7px; font-weight: 800; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.map-node::after { position: absolute; z-index: 2; bottom: -10px; left: calc(50% - 8px); width: 16px; height: 11px; background: #d3bd90; clip-path: polygon(0 0, 100% 0, 50% 100%); content: ""; filter: drop-shadow(1px 1px 1px rgba(45,34,21,.45)); pointer-events: none; }
.map-node.current::after { background: #dfc582; }
.map-node.owned-property::after, .map-node.owned-property.current::after { background: #a8d2a2; }
.map-node.owned-property .map-node-icon { color: #286848; filter: drop-shadow(0 1px 0 rgba(255,255,223,.85)); }
.map-node.owned-property .map-node-name { color: #214c38; }
.map-node.owned-property.current .map-node-name { color: #214c38; }
.map-node.fogged::after { background: #d8c9a6; }
.map-node.fogged { border: 1px dashed #76684d; border-radius: 5px; background: rgba(216,201,166,.76); box-shadow: none; color: #665b47; }
.map-node-icon { font-size: 24px; line-height: 1; filter: drop-shadow(0 1px 0 rgba(255,248,221,.75)); }
.map-node-name { display: block; max-width: 100%; overflow: hidden; color: #493f2d; font-size: 10px; font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.map-node-layer-transition {
  display: block;
  max-width: 100%;
  overflow: hidden;
  padding: 2px 5px;
  border: 1px solid rgba(78,72,111,.52);
  border-radius: 999px;
  background: rgba(81,73,119,.16);
  color: #51476e;
  font: inherit;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.map-node-layer-transition:hover,
.map-node-layer-transition:focus-visible {
  border-color: #64588a;
  background: rgba(116,99,158,.28);
  outline: 2px solid rgba(100,88,138,.35);
  outline-offset: 1px;
}
.map-node[data-layer="underground"] .map-node-layer-transition {
  border-color: rgba(117,89,51,.55);
  background: rgba(255,229,177,.4);
  color: #574226;
}
.map-node.fogged .map-node-icon { color: #796b4f; font-size: 19px; }
.map-node.fogged .map-node-name { color: #71654f; font-size: 9px; font-weight: 500; }
.map-zoom-controls {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(83,62,35,.3);
  border-radius: 999px;
  background: rgba(35,29,16,.38);
  backdrop-filter: blur(3px);
}
.map-zoom-button {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(226,196,123,.42);
  border-radius: 50%;
  background: rgba(54,46,30,.52);
  color: #f2d99e;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.map-zoom-button:hover { background: rgba(77,66,38,.7); }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 12px; color: #c8c1ad; font-size: 10px; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.map-legend i { display: inline-block; width: 10px; height: 10px; border: 1px solid #b89b61; border-radius: 50%;
 background: #d7bd82; }.map-legend .legend-known { border-color: #729081; background: #729081; }
.map-legend .legend-fog { border-style: dashed; border-color: #aaa18a; background: transparent; }
.map-legend .legend-shortcut { width: 24px; height: 0; border: 0; border-top: 3px dashed #d7ae59; border-radius: 0; background: transparent; }
.map-legend .legend-horse { border-color: #9a7e42; background: #d8bd75; }
.map-legend .legend-layer-transition { border-color: #9781bf; background: #9781bf; box-shadow: 0 0 0 2px rgba(151,129,191,.18); }
.game-modal {
  width: min(440px, calc(100vw - 32px));
  max-width: none;
  padding: 22px;
  border: 1px solid #496467;
  border-radius: 10px;
  background: linear-gradient(145deg, #1c292a, #111a1c);
  color: var(--text);
  box-shadow: 0 24px 90px rgba(0,0,0,.65);
}
.game-modal::backdrop { background: rgba(4,9,10,.78); backdrop-filter: blur(3px); }
.game-modal-header h2 { margin-top: 5px; color: var(--gold); font-family: "Playfair Display", Georgia, serif; font-size: 22px; }
.game-modal-message { margin: 15px 0 20px; color: #c4ccc9; font-size: 13px; line-height: 1.7; }
.game-modal-label { display: block; margin: 16px 0 6px; color: #c4ccc9; font-size: 12px; }
.game-modal-input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #456664; border-radius: 5px; background: #10191b; color: var(--text); font: inherit; }
.game-modal-input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.game-modal-actions { display: flex; justify-content: flex-end; gap: 9px; }
.game-modal-confirm { border-color: #456664; background: #203436; color: #a5d3c6; }
.dialogue-dialog {
  width: min(560px, calc(100vw - 24px));
  max-width: none;
  max-height: calc(100dvh - 24px);
  padding: clamp(18px, 4vw, 30px);
  overflow: auto;
  border: 1px solid #a064da;
  border-radius: 15px;
  background:
    radial-gradient(ellipse at 12% 0, rgba(196,104,255,.28), transparent 42%),
    radial-gradient(ellipse at 100% 100%, rgba(111,73,196,.2), transparent 48%),
    linear-gradient(145deg, #21172f, #171126 62%, #211633);
  color: #f2eaff;
  box-shadow: 0 28px 100px rgba(0,0,0,.78), inset 0 0 0 1px rgba(222,187,255,.12);
}
.dialogue-dialog::backdrop { background: rgba(10,5,20,.82); backdrop-filter: blur(7px) saturate(.7); }
.dialogue-dialog.has-companion-card { width: min(900px, calc(100vw - 24px)); }
.dialogue-layout { display: block; }
.dialogue-dialog.has-companion-card .dialogue-layout { display: grid; grid-template-columns: minmax(205px, .72fr) minmax(0, 1fr); align-items: start; gap: clamp(18px, 3vw, 30px); }
.dialogue-card-panel { position: sticky; top: 0; display: grid; min-width: 0; aspect-ratio: 2 / 3; align-content: end; justify-items: center; overflow: hidden; padding: 14px; border: 1px solid rgba(205,157,82,.56); border-radius: 11px; background: radial-gradient(ellipse at 50% 34%, rgba(170,109,43,.22), transparent 68%), linear-gradient(150deg, #282019, #17131a 72%); box-shadow: 0 12px 34px rgba(0,0,0,.44), inset 0 0 28px rgba(216,154,69,.08); text-align: center; }
.dialogue-card-panel[hidden] { display: none; }
.dialogue-card-panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dialogue-card-panel img[hidden] { display: none; }
.dialogue-card-panel > span, .dialogue-card-panel > small { position: relative; z-index: 1; width: 100%; padding: 4px 6px; background: linear-gradient(90deg, transparent, rgba(12,13,14,.82) 16%, rgba(12,13,14,.82) 84%, transparent); color: #f1d9a2; text-shadow: 0 2px 5px #000; }
.dialogue-card-panel > span { margin-top: auto; font-family: "Playfair Display", Georgia, serif; font-size: 16px; font-weight: 700; }
.dialogue-card-panel > small { color: #dbc89f; font-size: 9px; }
.dialogue-card-placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(227,190,116,.68); font-size: 60px; }
.dialogue-card-placeholder[hidden] { display: none; }
.dialogue-content { min-width: 0; }
.dialogue-header { display: flex; align-items: center; gap: 14px; padding-bottom: 17px; border-bottom: 1px solid rgba(207,159,255,.23); }
.dialogue-mark { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 1px solid #b679ed; border-radius: 14px; background: linear-gradient(145deg, #653d89, #35204e); color: #f2d7ff; font-size: 26px; box-shadow: 0 0 28px rgba(183,105,245,.28), inset 0 0 12px rgba(255,255,255,.1); }
.dialogue-eyebrow { color: #d69cff; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.dialogue-header h2 { margin: 5px 0 0; color: #fff0ff; font-family: "Playfair Display", Georgia, serif; font-size: clamp(21px, 5vw, 27px); }
.dialogue-scene { position: relative; margin-top: 21px; padding: 17px 18px 16px; border: 1px solid rgba(169,130,223,.38); border-left: 3px solid #ca8cff; border-radius: 5px 12px 12px 5px; background: linear-gradient(115deg, rgba(86,58,119,.42), rgba(37,27,56,.7)); }
.dialogue-speaker { color: #e1b4ff; font-size: 9px; font-weight: 800; letter-spacing: .17em; }
.dialogue-trust-badge { float: right; display: inline-flex; align-items: center; gap: 5px; margin: -5px -6px 5px 10px; padding: 5px 9px; border: 1px solid; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.dialogue-trust-badge.trust-low { border-color: rgba(255,131,126,.55); background: rgba(133,44,52,.36); color: #ffaaa5; }
.dialogue-trust-badge.trust-neutral { border-color: rgba(245,194,107,.52); background: rgba(117,79,34,.32); color: #f4d18e; }
.dialogue-trust-badge.trust-high { border-color: rgba(112,220,173,.48); background: rgba(38,104,81,.32); color: #a0edc8; }
.dialogue-trust-badge[hidden] { display: none; }
.dialogue-scene p { margin: 9px 0 0; color: #ede3f8; font-size: 14px; line-height: 1.75; }
.dialogue-scene .dialogue-profession-reaction { padding-top: 9px; border-top: 1px solid rgba(215,162,229,.2); color: #d7c3e6; font-size: 12px; font-style: italic; }
.dialogue-profession-reaction[hidden] { display: none; }
.dialogue-context { margin-top: 12px; padding: 12px 15px; border: 1px solid rgba(245,194,107,.36); border-radius: 9px; background: rgba(117,79,34,.17); }
.dialogue-context[hidden] { display: none; }
.dialogue-context h3 { margin: 0 0 8px; color: #f4d18e; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.dialogue-context p { margin: 4px 0 0; color: #e8dfca; font-size: 12px; line-height: 1.55; }
.dialogue-context p:last-child { color: #bdb2a0; font-size: 11px; }
.dialogue-prompt { margin: 20px 0 9px; color: #d69cff; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.dialogue-replies { display: grid; gap: 9px; }
.dialogue-reply { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid #765594; border-radius: 8px; background: linear-gradient(110deg, rgba(79,55,104,.76), rgba(39,30,55,.96)); color: #eee0ff; font: inherit; font-size: 12px; line-height: 1.5; text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
.dialogue-reply:hover:not(:disabled) { transform: translateY(-1px); border-color: #d39cff; background: linear-gradient(110deg, rgba(120,74,155,.88), rgba(57,39,78,.98)); }
.dialogue-reply.primary { border-color: #cb8cff; background: linear-gradient(110deg, #70418f, #482b69); color: #fff4ff; box-shadow: inset 0 0 0 1px rgba(238,200,255,.11); }
.dialogue-reply.danger { border-color: rgba(222,119,126,.6); background: linear-gradient(110deg, rgba(111,48,63,.8), rgba(55,31,47,.96)); color: #ffc1c0; }
.dialogue-reply:focus-visible { outline: 2px solid #f0cbff; outline-offset: 3px; }
.dialogue-reply:disabled { opacity: .55; cursor: not-allowed; }
.game-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  overflow: visible;
  width: max-content;
  max-width: min(280px, calc(100vw - 24px));
  padding: 6px 9px;
  border-radius: 5px;
  background: #111820;
  color: #f8f9fa;
  box-shadow: 0 3px 12px rgba(0,0,0,.34);
  font-size: 11px;
  line-height: 1.45;
  pointer-events: none;
}
.game-tooltip[hidden] { display: none; }
.game-tooltip::after {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: 5px solid transparent;
  content: "";
}
.game-tooltip[data-placement="top"]::after { top: 100%; border-top-color: #111820; }
.game-tooltip[data-placement="bottom"]::after { bottom: 100%; border-bottom-color: #111820; }
.map-legend { display: flex; flex-wrap: wrap; gap: 14px; padding-top: 12px; color: var(--muted); font-size: 9px; }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 9px; height: 9px; border: 1px solid #609186; border-radius: 50%; background: #243d38; }
.map-legend .legend-current { border-color: #dec37e; background: #dec37e; }
.map-legend .legend-fog { border-style: dashed; border-color: #697168; background: transparent; }
.map-legend .legend-shortcut { width: 20px; height: 0; border: 0; border-top: 3px dashed #d6aa58; border-radius: 0; background: transparent; }
.quest-panel { padding: 12px; }
.quest-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 3px; margin-top: 9px; border: 1px solid rgba(154,183,175,.16); border-radius: 4px; background: rgba(10,19,20,.42); }
.quest-tab { min-width: 0; padding: 7px 5px; border: 1px solid transparent; border-radius: 3px; background: transparent; color: var(--muted); font: inherit; font-size: 9px; font-weight: 700; cursor: pointer; }
.quest-tab:hover { color: #cbd5cf; }
.quest-tab[aria-selected="true"] { border-color: #40585a; background: #1b2c2e; color: #a5d3c6; }
.quest-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.quest-list { display: grid; gap: 6px; max-height: 240px; overflow-y: auto; padding: 0; margin: 8px 0 0; list-style: none; }
.quest-list[hidden] { display: none; }
.quest-empty { padding: 12px 8px; color: var(--muted); font-size: 9px; text-align: center; }
.party-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow-y: auto; padding: 0; margin: 10px 0 0; list-style: none; }
.quest-entry { display: grid; gap: 3px; padding: 7px 8px; border-left: 2px solid #9c8244; background: rgba(10,19,20,.42); }
.quest-entry small { color: var(--gold); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }
.quest-entry strong { color: #cbd5cf; font-size: 10px; font-weight: 600; }
.quest-entry span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.quest-entry.quest-kind-main { border-left-color: #d7ad55; background: linear-gradient(90deg, rgba(111,78,29,.22), rgba(10,19,20,.42) 52%); }
.quest-entry.quest-kind-main small { color: #edc66f; }
.quest-entry.quest-kind-side { border-left-color: #65a99c; background: linear-gradient(90deg, rgba(39,99,87,.19), rgba(10,19,20,.42) 52%); }
.quest-entry.quest-kind-side small { color: #83c8b7; }
.quest-entry.quest-kind-personal { border-left-color: #b986c9; background: linear-gradient(90deg, rgba(104,57,119,.2), rgba(10,19,20,.42) 52%); }
.quest-entry.quest-kind-personal small { color: #d2a6df; }
.quest-entry.quest-kind-companion { border-left-color: #6f9fd2; background: linear-gradient(90deg, rgba(47,83,128,.21), rgba(10,19,20,.42) 52%); }
.quest-entry.quest-kind-companion small { color: #9dc2ec; }
.quest-entry.quest-kind-regional { border-left-color: #c58c57; background: linear-gradient(90deg, rgba(117,70,37,.2), rgba(10,19,20,.42) 52%); }
.quest-entry.quest-kind-regional small { color: #e2ad79; }
.quest-entry.quest-kind-profession { border-left-color: #bd78d1; background: linear-gradient(90deg, rgba(102,49,120,.24), rgba(10,19,20,.42) 52%); }
.quest-entry.quest-kind-profession small { color: #d7a2e5; }
.quest-entry.completed { border-left-color: #78b8ac; opacity: .7; }
.quest-entry.failed { border-left-color: #ce6868; opacity: .7; }
.party-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid #35494b; border-radius: 5px; background: rgba(10,19,20,.42); }
.party-info { min-width: 0; }
.party-info strong, .party-info small { display: block; }
.party-info strong { color: #cbd5cf; font-size: 12px; }
.party-info small, .level-hint { color: var(--muted); font-size: 8px; line-height: 1.4; }
.party-info .party-trust-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.party-trust-help { display: inline-grid; width: 14px; height: 14px; place-items: center; padding: 0; border: 1px solid #617b78; border-radius: 50%; background: transparent; color: #a5d3c6; font-size: 9px; line-height: 1; cursor: help; }
.party-trust-help:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.level-hint { display: block; min-height: 10px; margin-top: 4px; color: #d99688; }
.recipe { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 7px; padding-top: 6px; border-top: 1px solid rgba(154,183,175,.15); }
.recipe:first-child { border-top: 0; }

@media (max-width: 760px) {
  #map-dialog { padding: 14px; }
  .map-viewport { aspect-ratio: 4 / 3; }
  .world-region-marker, .world-future-label { width: clamp(58px, 15%, 108px); }
  .map-node { width: clamp(68px, 19vw, 98px); min-height: 56px; }
  .map-node-icon { font-size: 20px; }
  .map-node-name { font-size: 8px; }
  .map-legend { gap: 8px 12px; font-size: 9px; }
  .topbar-actions { gap: 8px; }
  .quest-panel { min-width: 0; }
}

@media (max-width: 480px) {
  .world-region-marker { gap: 3px; padding: 5px 3px; }
  .world-region-emblem, .world-region-marker small { display: none; }
}

@media (max-width: 380px) {
  .topbar-actions { right: 0; }
  .map-button { padding: 7px; font-size: 10px; }
  .map-dialog { width: calc(100vw - 16px); }
  #map-dialog { padding: 10px; }
  .map-viewport { aspect-ratio: 1 / 1; }
  .map-node { width: 66px; min-height: 48px; padding: 5px 3px; }
  .map-node-current-badge { font-size: 6px; }
  .map-node-icon { font-size: 17px; }
  .map-node-name { font-size: 7px; }
  .map-legend { gap: 7px 10px; font-size: 8px; }
  .audio-setting-group { padding: 10px; }
  .audio-toggle { min-width: 110px; }
}

@media (max-width: 600px) {
  .party-list { grid-template-columns: 1fr; }
}

.section-heading h2 { font-size: 14px; }
.eyebrow { font-size: 9px; }
.level-badge { font-size: 10px; }

#inventory-dialog {
  width: min(900px, calc(100vw - 28px));
  max-height: min(790px, calc(100dvh - 28px));
  border-color: #53636a;
  background:
    radial-gradient(ellipse at 18% 0, rgba(107,137,143,.16), transparent 50%),
    linear-gradient(150deg, #202d32, #111a20 58%, #151d22);
  box-shadow: 0 24px 90px rgba(0,0,0,.7), inset 0 0 0 1px rgba(176,197,195,.08);
}
#inventory-dialog .map-dialog-header h2 { color: #d8e0dc; }
#inventory-dialog .map-dialog-header .eyebrow { color: #94aaa8; }
.inventory-content { display: grid; gap: 16px; margin-top: 16px; }
.inventory-equipment, .inventory-bag, .inventory-details {
  min-width: 0;
  border: 1px solid rgba(145,169,169,.19);
  border-radius: 8px;
  background: rgba(7,14,18,.42);
}
.inventory-equipment { padding: 13px 15px; }
.inventory-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.inventory-section-heading h3 { margin: 0; color: #d7ded8; font-size: 12px; font-weight: 650; }
.inventory-section-heading > span:last-child { color: #8d9e9e; font-size: 9px; }
.equipment-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.equipment-slot {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(65px, .35fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px 11px;
  border: 1px solid #38494f;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(34,48,53,.95), rgba(20,30,35,.95));
  color: #aebcb8;
  text-align: left;
}
.equipment-slot.filled { border-color: rgba(193,159,91,.48); color: #d9c48d; cursor: pointer; }
.equipment-slot.filled:hover { border-color: #d7bd70; background: #29383a; }
.equipment-slot-label { color: #8c9d9b; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }
.equipment-slot-content { display: flex; min-width: 0; align-items: center; gap: 8px; color: #d5ddd7; font-size: 11px; }
.equipment-slot-content > span:first-child { font-size: 20px; }
.equipment-slot-content > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-workbench { display: grid; min-height: 320px; grid-template-columns: minmax(0, 1.3fr) minmax(220px, .8fr); gap: 14px; }
.inventory-bag { display: flex; min-height: 0; flex-direction: column; padding: 13px; }
.inventory-bag .inventory-section-heading { flex: 0 0 auto; }
.inventory-bag .item-total { color: #92a4a0; font-size: 10px; }
.inventory-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.inventory-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid #35474c;
  border-radius: 5px;
  background: rgba(8,15,18,.45);
  color: #a8b5b1;
  font: inherit;
  font-size: 9px;
  cursor: pointer;
}
.inventory-filter span { display: grid; min-width: 15px; height: 15px; place-items: center; border-radius: 8px; background: #2e4145; color: #c0ccc5; font-size: 8px; }
.inventory-filter.active { border-color: #9d8451; background: rgba(175,143,79,.15); color: #e0cb94; }
.inventory-filter.active span { background: #75633d; color: #f0dfad; }
.inventory-bag .inventory-list { display: grid; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: 7px; max-height: 310px; overflow: auto; margin: 10px 0 0; }
.inventory-bag .inventory-list[hidden] { display: none; }
.inventory-item { min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 7px; background: transparent; }
.inventory-item-select {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 91px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 9px 6px 8px;
  border: 1px solid #35464a;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(38,53,57,.8), rgba(18,28,33,.92));
  color: #c3ceca;
  font: inherit;
  cursor: pointer;
}
.inventory-item-select:hover { border-color: #728a86; background: linear-gradient(145deg, #304449, #202e33); }
.inventory-item.selected .inventory-item-select, .inventory-item-select[aria-pressed="true"] { border-color: #c0a260; background: linear-gradient(145deg, rgba(108,91,54,.4), rgba(40,45,40,.95)); box-shadow: inset 0 0 0 1px rgba(214,185,112,.18), 0 0 12px rgba(192,162,96,.1); }
.inventory-item .item-icon { display: grid; width: 38px; height: 38px; min-height: 0; place-items: center; border: 1px solid rgba(151,173,166,.18); border-radius: 10px; background: radial-gradient(circle, rgba(130,158,149,.15), rgba(20,31,34,.2)); font-size: 23px; }
.inventory-item-name { max-width: 100%; color: #c9d3ce; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.inventory-item .item-quantity { position: absolute; top: 5px; right: 6px; display: grid; min-width: 18px; height: 18px; place-items: center; border: 1px solid #48595a; border-radius: 10px; background: #192529; color: #d4ded7; font-size: 9px; }
.inventory-empty { display: grid; flex: 1; justify-items: center; align-content: center; gap: 8px; padding: 18px; color: #a9b8b2; text-align: center; }
.inventory-empty[hidden], .inventory-filter-empty[hidden] { display: none; }
.inventory-empty > span { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid #45595c; border-radius: 16px; background: linear-gradient(145deg, #293c40, #17262b); color: #d1b678; font-size: 27px; box-shadow: inset 0 0 18px rgba(161,185,175,.08); }
.inventory-empty strong { color: #d5ded8; font-size: 12px; }
.inventory-empty p { max-width: 230px; margin: 0; color: #8c9d99; font-size: 10px; line-height: 1.5; }
.inventory-filter-empty { margin: auto 0; padding: 22px 10px; color: #8c9d99; font-size: 10px; text-align: center; }
.inventory-details { position: relative; display: flex; min-height: 0; flex-direction: column; align-items: center; padding: 17px 16px 14px; overflow: hidden; text-align: center; }
.inventory-details::before { position: absolute; top: -55px; right: -42px; width: 135px; height: 135px; border: 1px solid rgba(164,183,170,.08); border-radius: 50%; box-shadow: 0 0 0 12px rgba(164,183,170,.025), 0 0 0 26px rgba(164,183,170,.02); content: ""; pointer-events: none; }
.inventory-details-eyebrow { position: relative; align-self: flex-start; color: #859b97; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.inventory-details-art { display: grid; width: 78px; height: 78px; flex: 0 0 auto; place-items: center; margin-top: 17px; border: 1px solid rgba(187,161,101,.43); border-radius: 18px; background: radial-gradient(circle at 35% 30%, rgba(204,175,108,.2), rgba(31,46,47,.8) 70%); color: #e0c680; font-size: 40px; box-shadow: 0 8px 20px rgba(0,0,0,.2), inset 0 0 15px rgba(218,192,130,.08); }
.inventory-item-category { margin-top: 14px; color: #bb9f63; font-size: 8px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.inventory-details h3 { position: relative; margin: 5px 0 0; color: #e0e5df; font-size: 15px; line-height: 1.35; }
.inventory-details > p { position: relative; margin: 8px 0 0; color: #9fada8; font-size: 10px; line-height: 1.55; }
.inventory-details-effect { width: 100%; margin-top: 12px; padding: 9px; border: 1px solid rgba(148,170,157,.18); border-radius: 6px; background: rgba(45,67,57,.22); color: #b8cdb7; font-size: 9px; line-height: 1.5; }
.inventory-details-effect[hidden] { display: none; }
.inventory-details-footer { display: flex; width: 100%; flex: 1 0 auto; flex-direction: column; justify-content: flex-end; gap: 11px; margin-top: 15px; }
.inventory-details-footer > span { color: #91a39c; font-size: 9px; }
.inventory-details-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.inventory-action-button { flex: 1; min-height: 34px; padding: 7px 9px; border: 1px solid #435a5d; border-radius: 5px; background: #223438; color: #b8d0c5; font: inherit; font-size: 10px; font-weight: 650; cursor: pointer; }
.inventory-action-button.primary { border-color: #8e784b; background: linear-gradient(145deg, #493f2b, #2c322c); color: #e4cb8d; }
.inventory-action-button:hover:not(:disabled) { filter: brightness(1.2); }
.inventory-action-button:disabled { opacity: .45; cursor: not-allowed; }
.inventory-details.is-empty .inventory-details-art { opacity: .65; }

@media (max-width: 650px) {
  #inventory-dialog { width: min(540px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 14px; }
  .inventory-content { gap: 11px; margin-top: 12px; }
  .inventory-workbench { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .inventory-bag .inventory-list { max-height: min(30vh, 230px); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .inventory-item-select { min-height: 79px; }
  .inventory-details { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; column-gap: 11px; padding: 12px; text-align: left; }
  .inventory-details-eyebrow { grid-column: 1 / -1; }
  .inventory-details-art { width: 52px; height: 52px; grid-row: span 3; margin-top: 8px; border-radius: 13px; font-size: 28px; }
  .inventory-item-category { align-self: end; margin-top: 7px; }
  .inventory-details h3 { align-self: start; margin-top: 3px; font-size: 13px; }
  .inventory-details > p, .inventory-details-effect, .inventory-details-footer { grid-column: 1 / -1; }
  .inventory-details > p { margin-top: 8px; }
  .inventory-details-effect { margin-top: 8px; }
  .inventory-details-footer { flex-direction: row; align-items: center; margin-top: 10px; }
  .inventory-details-actions { flex: 1; }
}

@media (max-width: 380px) {
  #inventory-dialog { padding: 10px; }
  .inventory-equipment, .inventory-bag { padding: 10px; }
  .equipment-slots { gap: 6px; }
  .equipment-slot { grid-template-columns: 1fr; gap: 4px; padding: 7px; }
  .equipment-slot-content { font-size: 9px; }
  .inventory-filters { gap: 4px; }
  .inventory-filter { padding: 5px 6px; font-size: 8px; }
  .inventory-bag .inventory-list { gap: 5px; }
  .inventory-item-select { min-height: 72px; padding-inline: 3px; }
  .inventory-item-name { font-size: 8px; }
}
.stat-label { font-size: 12px; }
.gold-display { font-size: 12px; }
.gold-display span:last-child { font-size: 11px; }
.scene-meta { font-size: 10px; }
.chapter-label, .time-indicator, .season-indicator, .weather-indicator { font-size: 9px; }
.story-content h1 { font-size: 18px; }
.story-text { font-size: 14px; }
.scene-context p { font-size: 12px; }
.log-list li { font-size: 12px; line-height: 1.5; }
.log-list li.log-entry-current { font-size: 14px; }
.log-list li.log-entry-previous { font-size: 12px; }
.log-list li.log-entry-older, .log-list li.log-entry-faded { font-size: 11px; }
.quest-entry small { font-size: 9px; }
.quest-entry strong, .party-info strong { font-size: 12px; }
.quest-entry span { font-size: 11px; }
.party-info small, .level-hint { font-size: 10px; }
.action-button { font-size: 12px; }
.inventory-item-name { font-size: 10px; }
.item-quantity, .sell-button, .item-total { font-size: 9px; }
.recipe-footer { font-size: 11px; }
.recipe-effect, .recipe-status { font-size: 10px; }
.live-indicator { font-size: 9px; }

#crafting-dialog {
  width: min(760px, calc(100vw - 28px));
  border-color: #62543e;
  background:
    radial-gradient(ellipse at 85% 0, rgba(190,143,76,.14), transparent 48%),
    linear-gradient(145deg, #282b29, #171d1d 52%, #1d2220);
  box-shadow: 0 24px 90px rgba(0,0,0,.7), inset 0 0 0 1px rgba(208,170,100,.1);
}
#crafting-dialog .map-dialog-header h2 { color: #e2d2aa; }
#crafting-dialog .map-dialog-header .eyebrow { color: #bb9b61; }
.crafting-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 15px 0 17px;
  padding: 12px 14px;
  border: 1px solid rgba(183,151,92,.28);
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(96,70,39,.26), rgba(20,30,30,.54));
}
.crafting-intro-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(197,161,98,.43); border-radius: 11px; background: radial-gradient(circle, rgba(191,149,78,.22), rgba(44,43,34,.5)); color: #dfbd76; font-size: 21px; }
.crafting-intro p { margin: 0; color: #aeb9b0; font-size: 10px; line-height: 1.55; }
.crafting-intro-state { padding: 5px 8px; border: 1px solid rgba(108,151,117,.32); border-radius: 12px; background: rgba(56,92,64,.18); color: #9fbe9d; font-size: 8px; white-space: nowrap; }
.crafting-intro-state::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #8eb17e; content: ""; vertical-align: 1px; }
.crafting-intro-state.blocked { border-color: rgba(197,112,91,.34); background: rgba(105,49,43,.2); color: #d5937e; }
.crafting-intro-state.blocked::before { background: #d47d68; }
.crafting-recipes { display: grid; gap: 12px; }
#crafting-dialog .recipe {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 15px;
  overflow: hidden;
  border: 1px solid #514b3b;
  border-radius: 8px;
  background:
    linear-gradient(130deg, rgba(65,57,41,.28), transparent 46%),
    linear-gradient(145deg, rgba(31,40,38,.98), rgba(20,27,27,.98));
  box-shadow: inset 0 1px 0 rgba(230,204,149,.05), 0 5px 15px rgba(0,0,0,.15);
}
#crafting-dialog .recipe::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: linear-gradient(#c7a05b, rgba(122,92,49,.12)); content: ""; }
#crafting-dialog .recipe.unavailable { border-color: #55403b; }
#crafting-dialog .recipe.unavailable::before { background: linear-gradient(#bf715d, rgba(122,60,49,.12)); }
.recipe-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recipe-heading h3 { margin: 0; color: #e0d6bd; font-size: 13px; font-weight: 650; }
.recipe-yield { color: #9caaa2; font-size: 9px; }
.recipe-workbench { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(110px, .38fr); align-items: center; gap: 12px; }
.recipe-ingredients { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.recipe-ingredient {
  position: relative;
  display: grid;
  min-width: 112px;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 8px;
  padding: 7px 9px;
  border: 1px solid #47534b;
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(48,64,53,.52), rgba(23,35,34,.9));
}
.recipe-ingredient.missing { border-color: #754b43; background: linear-gradient(145deg, rgba(85,50,43,.34), rgba(34,29,28,.9)); }
.recipe-ingredient-icon { display: grid; width: 29px; height: 29px; grid-row: 1 / 3; place-items: center; border: 1px solid rgba(146,171,139,.18); border-radius: 8px; background: rgba(10,20,18,.4); font-size: 18px; }
.recipe-ingredient.ready .recipe-ingredient-icon { border-color: rgba(136,177,123,.33); }
.recipe-ingredient.missing .recipe-ingredient-icon { border-color: rgba(192,115,94,.3); filter: grayscale(.45); }
.recipe-ingredient-name { overflow: hidden; color: #c4d0c4; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.recipe-ingredient-amount { color: #8fa68e; font-size: 8px; font-variant-numeric: tabular-nums; }
.recipe-ingredient.missing .recipe-ingredient-amount { color: #dc917d; }
.recipe-connector { color: #c3a264; font-family: Georgia, serif; font-size: 17px; }
.recipe-transform { display: grid; width: 22px; height: 22px; place-items: center; color: #cdb06f; font-size: 23px; line-height: 1; }
.recipe-output { display: flex; width: auto; height: auto; min-width: 0; min-height: 54px; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(192,158,97,.42); border-radius: 7px; background: linear-gradient(145deg, rgba(99,76,43,.32), rgba(38,38,30,.72)); }
.recipe-output-icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; font-size: 25px; }
.recipe-output-name { overflow: hidden; color: #e1d0a4; font-size: 9px; font-weight: 650; line-height: 1.4; text-overflow: ellipsis; }
#crafting-dialog .recipe-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; }
.recipe-result-effect { display: flex; align-items: flex-start; gap: 7px; color: #aab8ad; font-size: 9px; line-height: 1.5; }
.recipe-result-effect > span:first-child { color: #d2b36e; }
#crafting-dialog .recipe-craft { min-width: 130px; padding: 8px 12px; border-color: #967b47; border-radius: 5px; background: linear-gradient(145deg, #645233, #403a2b); color: #efdaa2; font-size: 9px; letter-spacing: .035em; text-align: center; text-transform: none; }
#crafting-dialog .recipe-craft:hover:not(:disabled) { border-color: #d1b46f; background: linear-gradient(145deg, #79643d, #4e4732); }
#crafting-dialog .recipe-craft:disabled { border-color: #4c4940; background: #303332; color: #858b82; }
#crafting-dialog .recipe-status { margin: 0; color: #d69a7d; font-size: 9px; }
#crafting-dialog .recipe-status:not([hidden]) { display: block; }
#crafting-dialog .recipe-status.success { color: #b8d69f; }
#crafting-dialog .recipe-status.success::before { margin-right: 6px; color: #d8c17c; content: "✦"; }
.recipe-crafting-success .recipe-ingredient:nth-of-type(1) { animation: craft-ingredient-mix .72s ease both; }
.recipe-crafting-success .recipe-ingredient:nth-of-type(2) { animation: craft-ingredient-mix .72s .12s ease both; }
.recipe-crafting-success .recipe-transform { animation: craft-flow .78s .12s ease-in-out both; }
.recipe-crafting-success .recipe-output { animation: craft-result .82s .48s cubic-bezier(.2,.8,.25,1) both; }
.recipe-crafting-success .recipe-output-icon { animation: craft-result-icon .56s .56s cubic-bezier(.2,.8,.25,1) both; }
@keyframes craft-ingredient-mix {
  35% { filter: brightness(1.45); transform: translateX(5px) scale(1.04); box-shadow: 0 0 12px rgba(183,204,127,.26); }
  100% { filter: none; transform: none; box-shadow: none; }
}
@keyframes craft-flow {
  45% { color: #f0d78d; filter: drop-shadow(0 0 5px rgba(235,199,114,.72)); transform: translateX(4px) scale(1.18); }
  100% { filter: none; transform: none; }
}
@keyframes craft-result {
  0% { box-shadow: 0 0 0 rgba(226,194,117,0); transform: scale(.94); }
  55% { border-color: #d2b66f; background-color: rgba(130,104,58,.3); box-shadow: 0 0 22px rgba(226,194,117,.34); transform: scale(1.035); }
  100% { box-shadow: 0 0 8px rgba(226,194,117,.12); transform: scale(1); }
}
@keyframes craft-result-icon {
  0% { transform: scale(.65) rotate(-12deg); }
  70% { transform: scale(1.18) rotate(5deg); }
  100% { transform: scale(1) rotate(0); }
}

@media (max-width: 600px) {
  #crafting-dialog { width: min(540px, calc(100vw - 20px)); max-height: calc(100dvh - 20px); padding: 14px; }
  .crafting-intro { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .crafting-intro-icon { width: 36px; height: 36px; }
  .crafting-intro-state { grid-column: 2; justify-self: start; }
  #crafting-dialog .recipe { gap: 10px; padding: 12px; }
  .recipe-workbench { grid-template-columns: minmax(0, 1fr) 18px minmax(92px, .38fr); gap: 7px; }
  .recipe-ingredients { gap: 5px; }
  .recipe-ingredient { min-width: 95px; grid-template-columns: 25px minmax(0, 1fr); column-gap: 6px; padding: 6px; }
  .recipe-ingredient-icon { width: 25px; height: 25px; font-size: 15px; }
  .recipe-ingredient-name, .recipe-output-name { font-size: 8px; }
  .recipe-output { flex-direction: column; justify-content: center; gap: 4px; padding: 6px; text-align: center; }
  .recipe-output-icon { width: 32px; height: 32px; font-size: 20px; }
  #crafting-dialog .recipe-craft { min-width: 108px; }
}
@media (max-width: 380px) {
  #crafting-dialog { padding: 10px; }
  #crafting-dialog .recipe { padding: 9px; }
  .recipe-workbench { grid-template-columns: minmax(0, 1fr); }
  .recipe-ingredients { justify-content: center; }
  .recipe-transform { justify-self: center; transform: rotate(90deg); }
  .recipe-output { min-height: 42px; flex-direction: row; justify-content: flex-start; }
  #crafting-dialog .recipe-footer { align-items: stretch; flex-direction: column; }
  #crafting-dialog .recipe-craft { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .recipe-crafting-success .recipe-ingredient,
  .recipe-crafting-success .recipe-transform,
  .recipe-crafting-success .recipe-output,
  .recipe-crafting-success .recipe-output-icon { animation: none !important; }
}

#cluebook-dialog {
  width: min(720px, calc(100vw - 28px));
  border-color: #465e63;
  background:
    radial-gradient(ellipse at 0 0, rgba(80,133,132,.13), transparent 48%),
    linear-gradient(145deg, #1c292c, #121b20 58%, #172126);
  box-shadow: 0 24px 90px rgba(0,0,0,.7), inset 0 0 0 1px rgba(135,177,167,.08);
}
#cluebook-dialog .map-dialog-header h2 { color: #dce7df; }
#cluebook-dialog .map-dialog-header .eyebrow { color: #91b4a8; }
#cluebook-dialog .map-close { border-color: #4d6566; color: #c7d8d1; }
.cluebook-overview {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 15px 0 18px;
  padding: 12px 14px;
  border: 1px solid rgba(120,157,153,.25);
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(44,75,77,.35), rgba(16,27,32,.6));
}
.cluebook-overview-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(143,185,171,.34); border-radius: 10px; background: rgba(65,105,103,.2); color: #a8c8b6; font-size: 26px; }
.cluebook-overview-copy { min-width: 0; }
.cluebook-overview-copy > span { color: #91b4a8; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.cluebook-overview-copy p { margin: 4px 0 0; color: #b5c4c0; font-size: 10px; line-height: 1.55; }
.cluebook-total { padding: 6px 9px; border: 1px solid rgba(131,174,163,.24); border-radius: 14px; background: rgba(60,94,91,.18); color: #a9c8ba; font-size: 9px; white-space: nowrap; }
.cluebook-content { display: grid; gap: 18px; }
.clue-group { display: grid; gap: 9px; counter-reset: clue-index; }
.clue-group h3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 2px 8px; border-bottom: 1px solid rgba(125,162,155,.25); color: #d2bd83; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; }
.clue-group-count { padding: 4px 7px; border: 1px solid rgba(141,165,152,.2); border-radius: 10px; color: #95aaa1; font-size: 8px; letter-spacing: 0; text-transform: none; }
.clue-entry {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 11px;
  padding: 12px 14px 12px 11px;
  border: 1px solid rgba(105,137,138,.22);
  border-left: 2px solid #547875;
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(38,57,58,.57), rgba(18,29,33,.72));
  counter-increment: clue-index;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.clue-entry::before { grid-column: 1; grid-row: 1 / 4; align-self: start; padding-top: 1px; color: #8fac9f; content: counter(clue-index, decimal-leading-zero); font-family: Georgia, serif; font-size: 13px; font-variant-numeric: tabular-nums; }
.clue-entry.unread { border-color: rgba(178,154,99,.42); border-left-color: #c5a25e; background: linear-gradient(110deg, rgba(78,66,42,.32), rgba(26,36,36,.86)); }
.clue-entry strong { grid-column: 2; color: #e0e6dc; font-size: 12px; font-weight: 650; line-height: 1.4; }
.clue-entry p { grid-column: 2; margin: 5px 0 0; color: #b2c0bb; font-size: 10px; line-height: 1.65; }
.clue-entry small { grid-column: 2; justify-self: start; margin-top: 9px; padding: 4px 7px; border: 1px solid rgba(119,157,148,.18); border-radius: 4px; background: rgba(77,117,106,.12); color: #95b5a7; font-size: 8px; letter-spacing: .02em; }
.cluebook-dialog .empty-state { margin: 0; padding: 24px 16px; border: 1px dashed rgba(125,162,155,.28); border-radius: 8px; color: #a8b9b2; text-align: center; }

@media (max-width: 540px) {
  #cluebook-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 13px; }
  .cluebook-overview { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .cluebook-overview-icon { width: 36px; height: 36px; }
  .cluebook-total { grid-column: 2; justify-self: start; }
  .clue-entry { grid-template-columns: 25px minmax(0, 1fr); column-gap: 8px; padding: 10px; }
}

#party-dialog {
  width: min(760px, calc(100vw - 28px));
  border-color: #4b6260;
  background:
    radial-gradient(ellipse at 0 0, rgba(94,143,126,.15), transparent 48%),
    linear-gradient(145deg, #1c2928, #121b1c 58%, #172120);
  box-shadow: 0 24px 90px rgba(0,0,0,.7), inset 0 0 0 1px rgba(151,190,153,.08);
}
#party-dialog .map-dialog-header h2 { color: #dce7dc; }
#party-dialog .map-dialog-header .eyebrow { color: #9fbd96; }
#party-dialog .map-close { border-color: #52685d; color: #d0ddce; }
.party-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 15px 0 17px;
  padding: 12px 14px;
  border: 1px solid rgba(132,167,125,.28);
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(53,81,57,.28), rgba(17,29,28,.64));
}
.party-intro-icon { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(155,187,127,.36); border-radius: 10px; background: rgba(84,119,70,.2); color: #c3d49b; font-size: 22px; }
.party-intro p { margin: 0; color: #b7c5b8; font-size: 10px; line-height: 1.55; }
.party-location-state { padding: 5px 8px; border: 1px solid rgba(119,163,107,.3); border-radius: 12px; background: rgba(60,98,53,.18); color: #afc99d; font-size: 8px; white-space: nowrap; }
.party-location-state::before { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #9fbd77; content: ""; vertical-align: 1px; }
.party-location-state.blocked { border-color: rgba(197,137,96,.34); background: rgba(105,70,43,.18); color: #d3ad86; }
.party-location-state.blocked::before { background: #d3a26e; }
.party-card-section { margin: 0 0 18px; padding: 13px; border: 1px solid rgba(179,149,91,.2); border-radius: 9px; background: linear-gradient(140deg, rgba(53,48,36,.36), rgba(17,26,25,.62)); }
.party-card-section .section-heading h3 { margin: 0; color: #e1d3a9; font-size: 12px; font-weight: 650; }
.party-card-gallery { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.party-card-slot { display: grid; min-width: 0; gap: 4px; justify-items: center; padding: 5px 3px; border: 1px solid rgba(181,151,92,.24); border-radius: 6px; background: rgba(20,28,27,.74); color: #b9c4b5; cursor: pointer; }
.party-card-slot:hover:not(:disabled), .party-card-slot.selected { border-color: rgba(222,185,108,.72); background: rgba(87,72,43,.38); color: #f0dca8; }
.party-card-slot:focus-visible { outline: 2px solid #d8bd7b; outline-offset: 2px; }
.party-card-slot:disabled { border-style: dashed; color: #74827a; cursor: default; }
.party-card-slot img, .party-card-slot-sigil { display: grid; width: 100%; height: auto; aspect-ratio: 2 / 3; place-items: center; border-radius: 3px; background: linear-gradient(145deg, #302719, #151b1a); color: #8c9b8b; font-size: 20px; object-fit: contain; }
.party-card-slot small { overflow: hidden; max-width: 100%; color: inherit; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.party-card-preview { display: grid; grid-template-columns: minmax(130px, 190px) minmax(0, 1fr); align-items: center; gap: 16px; margin-top: 11px; padding: 10px; border: 1px solid rgba(198,160,91,.32); border-radius: 7px; background: linear-gradient(130deg, rgba(39,35,27,.72), rgba(18,27,27,.92)); }
.party-card-art { position: relative; display: grid; min-width: 0; aspect-ratio: 2 / 3; align-content: end; justify-items: center; overflow: hidden; margin: 0; border: 1px solid rgba(205,157,82,.52); border-radius: 6px; background: radial-gradient(ellipse at 50% 36%, rgba(170,109,43,.2), transparent 70%), linear-gradient(150deg, #282019, #17131a 72%); box-shadow: 0 8px 24px rgba(0,0,0,.38); }
.party-card-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.party-card-art img[hidden] { display: none; }
.party-card-art figcaption { position: relative; z-index: 1; width: 100%; padding: 5px 3px; background: linear-gradient(90deg, transparent, rgba(10,12,13,.86) 12%, rgba(10,12,13,.86) 88%, transparent); color: #f0d9a0; font-family: "Playfair Display", Georgia, serif; font-size: 11px; font-weight: 700; text-align: center; text-shadow: 0 2px 5px #000; }
.party-card-art figcaption[hidden] { display: none; }
.party-card-placeholder { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(227,190,116,.64); font-size: 42px; }
.party-card-placeholder[hidden] { display: none; }
.party-card-details { min-width: 0; }
.party-card-kicker { color: #c9ac70; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.party-card-details h4 { margin: 6px 0 4px; color: #ecdfbe; font-family: "Playfair Display", Georgia, serif; font-size: 20px; }
.party-card-details > p { margin: 0; color: #aebdb1; font-size: 10px; line-height: 1.55; }
.party-card-stats { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 12px 0; padding: 10px 0; border-top: 1px solid rgba(132,167,148,.18); border-bottom: 1px solid rgba(132,167,148,.18); font-size: 10px; }
.party-card-stats[hidden] { display: none; }
.party-card-stats dt { color: #91a398; }
.party-card-stats dd { margin: 0; color: #e1d3a9; font-variant-numeric: tabular-nums; }
.party-card-details .party-card-skill { padding: 8px 9px; border-left: 2px solid #bd9859; background: rgba(112,83,43,.16); color: #d9c28e; }
.active-party-section, .party-roster-section { margin-top: 0; }
.active-party-section .section-heading h3, .party-roster-section .section-heading h3 { margin: 0; color: #d4dfd4; font-size: 12px; font-weight: 650; }
.active-party-section .section-heading > span { padding: 5px 8px; border: 1px solid rgba(149,174,133,.22); border-radius: 12px; background: rgba(76,99,62,.16); color: #b8caa7; font-size: 9px; }
.active-party-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 0; margin: 10px 0 0; list-style: none; }
.active-party-member {
  display: grid;
  min-height: 58px;
  align-content: center;
  gap: 4px;
  padding: 10px 13px;
  border: 1px solid rgba(183,156,97,.4);
  border-left: 3px solid #b79b5f;
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(78,68,43,.3), rgba(25,35,31,.72));
}
.active-party-member strong { color: #e1d3a9; font-size: 11px; font-weight: 650; }
.active-party-member small { color: #aab9a7; font-size: 9px; }
.active-party-member.empty { min-height: 58px; place-items: center; border: 1px dashed rgba(134,160,140,.26); background: rgba(14,25,24,.32); color: #85978a; font-size: 9px; }
.active-party-section .empty-state { margin: 8px 0 0; }
.active-party-list:has(.active-party-member:not(.empty)) + .empty-state { display: none; }
.party-roster-section { margin-top: 18px; padding-top: 15px; border-top: 1px solid rgba(132,167,148,.2); }
.party-roster-count { padding: 4px 7px; border: 1px solid rgba(130,157,142,.2); border-radius: 10px; color: #9fb3a5; font-size: 8px; }
#party-dialog .party-list { max-height: min(46vh, 390px); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
#party-dialog .party-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  padding: 12px;
  border-color: rgba(105,139,128,.26);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(31,47,43,.86), rgba(18,28,29,.92));
}
#party-dialog .party-info strong { color: #e0e7dd; font-size: 11px; }
#party-dialog .party-info > small:not(.party-trust-row) { margin-top: 4px; color: #a8b9ad; font-size: 9px; line-height: 1.5; }
#party-dialog .party-info .party-request-note { margin-top: 7px; padding: 6px 7px; border-left: 2px solid #c2a160; background: rgba(107,86,46,.16); color: #d6c38f; font-size: 8px; line-height: 1.5; }
#party-dialog .party-info .party-personal-goal, #party-dialog .party-info .party-memory { margin-top: 6px; padding: 6px 7px; border-left: 2px solid rgba(151,177,134,.48); background: rgba(54,78,54,.14); color: #c0cbb6; font-size: 9px; line-height: 1.5; white-space: normal; }
#party-dialog .party-tactic-label { display: grid; max-width: 220px; gap: 4px; margin-top: 8px; color: #aebcab; font-size: 9px; }
#party-dialog .party-tactic-select { min-height: 32px; padding: 5px 8px; border: 1px solid rgba(136,163,139,.28); border-radius: 4px; background: #172321; color: #d6dfd3; font: inherit; }
#party-dialog .party-tactic-select:focus-visible { outline: 2px solid #c8ad67; outline-offset: 2px; }
#party-dialog .party-info .party-trust-row { width: fit-content; margin-top: 8px; padding: 4px 7px; border: 1px solid rgba(136,163,139,.18); border-radius: 5px; background: rgba(74,98,77,.13); color: #a9bba8; font-size: 8px; }
#party-dialog .party-stats { display: grid; grid-column: 1 / -1; gap: 7px; padding-top: 9px; border-top: 1px solid rgba(132,167,148,.14); }
#party-dialog .party-stat-label { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 4px; color: #9eafa4; font-size: 8px; }
#party-dialog .party-stat-label span:last-child { color: #bdcabc; font-variant-numeric: tabular-nums; }
#party-dialog .party-meter { height: 4px; background: rgba(7,15,15,.65); }
#party-dialog .party-hp-meter span { background: linear-gradient(90deg, #a54f50, #d87e69); }
#party-dialog .party-energy-meter span { background: linear-gradient(90deg, #4b7b78, #8fc5a8); }
#party-dialog .party-fatigue-meter span { background: linear-gradient(90deg, #9d7137, #d6ae58); }
#party-dialog .party-combat-status { grid-column: 1 / -1; color: #a0b4a5; font-size: 8px; }
#party-dialog .party-entry-actions { display: grid; grid-column: 2; grid-row: 1; gap: 5px; }
#party-dialog .party-entry-actions .small-button { min-width: 66px; padding: 6px 8px; border-color: rgba(132,176,125,.34); border-radius: 5px; background: rgba(61,91,56,.25); color: #bed4a2; font-size: 8px; line-height: 1.35; }
#party-dialog .party-entry-actions .small-button[aria-pressed="true"] { border-color: rgba(201,175,105,.36); background: rgba(106,88,45,.26); color: #e0ce96; }
#party-dialog .party-entry-actions .party-decline-button { border-color: rgba(194,132,103,.32); background: rgba(100,57,46,.18); color: #d5a08a; }
#party-dialog .party-entry-actions .party-reconcile-button { border-color: rgba(133,174,128,.4); background: rgba(62,101,66,.24); color: #bfd2a9; }
#party-dialog .party-entry-actions .small-button:disabled { opacity: .42; }
#party-dialog .party-roster-section > .empty-state { margin: 10px 0 0; }

@media (max-width: 600px) {
  #party-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 13px; }
  .party-intro { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 10px; }
  .party-intro-icon { width: 36px; height: 36px; }
  .party-location-state { grid-column: 2; justify-self: start; }
  #party-dialog .party-list { grid-template-columns: 1fr; max-height: 42vh; }
}

@media (max-width: 380px) {
  .active-party-list { gap: 6px; }
  .active-party-member { padding: 9px; }
  #party-dialog .party-entry { padding: 10px; }
  #party-dialog .party-entry-actions .small-button { min-width: 58px; }
}

body:has(#shop-dialog[open]) { overflow: hidden; }
#shop-dialog {
  width: min(700px, calc(100vw - 28px));
  max-height: min(760px, calc(100dvh - 28px));
  padding: 20px;
  border: 2px solid #58634c;
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 100% 0, rgba(179,146,72,.15), transparent 43%),
    linear-gradient(145deg, #252b24, #151d1c 55%, #1a2320);
  box-shadow: 0 24px 90px rgba(0,0,0,.72), inset 0 0 0 1px rgba(218,192,130,.12);
}
#shop-dialog::backdrop { background: rgba(5,10,10,.8); backdrop-filter: blur(4px) saturate(.78); }
#shop-dialog .map-dialog-header { padding-bottom: 14px; border-bottom: 1px solid rgba(186,158,93,.2); }
#shop-dialog .map-dialog-header h2 { color: #e8d9b5; font-size: 21px; }
#shop-dialog .map-dialog-header .eyebrow { color: #bca46f; letter-spacing: .13em; }
#shop-dialog .map-close { width: 38px; height: 38px; border-color: #596354; color: #d6d1bf; }
.shop-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 14px 0 12px;
  padding: 11px 13px;
  border: 1px solid rgba(179,155,94,.27);
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(91,78,46,.25), rgba(18,30,26,.66));
}
.shop-intro-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(196,166,95,.42);
  border-radius: 11px;
  background: radial-gradient(circle, rgba(192,155,70,.2), rgba(46,47,34,.48));
  color: #e0c477;
  font-size: 23px;
}
.shop-intro p { margin: 0; color: #c4bdab; font-size: 10px; line-height: 1.6; }
.shop-reputation { margin: 8px 0; color: #cbb77e; font-size: 10px; line-height: 1.5; }
.shop-wallets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
}
.shop-wallet {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(150,145,104,.25);
  border-radius: 7px;
  background: linear-gradient(115deg, rgba(70,66,42,.3), rgba(17,27,24,.72));
}
.shop-wallet-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(202,171,94,.28);
  border-radius: 8px;
  background: rgba(123,97,46,.18);
  color: #e4c56f;
  font-size: 17px;
}
.shop-wallet-icon.merchant { border-color: rgba(126,156,125,.27); background: rgba(57,91,62,.2); color: #acc39d; }
.shop-wallet-label { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; color: #aeb7a8; font-size: 8px; letter-spacing: .04em; text-transform: uppercase; }
.shop-wallet-label strong { color: #ead28c; font-size: 15px; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.shop-section { margin-top: 17px; }
.shop-section-heading { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.shop-section-icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(189,157,83,.3);
  border-radius: 8px;
  background: rgba(101,82,42,.18);
  color: #dfc474;
  font-size: 17px;
}
.shop-section-icon.sell { border-color: rgba(121,159,126,.26); background: rgba(48,87,61,.18); color: #a9c59f; }
.shop-section-kicker { display: block; color: #9d9f87; font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.shop-section-heading h3 { margin: 2px 0 0; color: #e3dcc7; font-size: 12px; font-weight: 650; }
.shop-daily-stock { margin: 0 0 9px; color: #aeb99e; font-size: 9px; line-height: 1.5; }
.shop-search-label { display: block; margin: 8px 0 4px; color: #b6b7a0; font-size: 9px; font-weight: 650; }
.shop-search { width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid rgba(158,158,120,.3); border-radius: 5px; outline: none; background: rgba(8,16,16,.68); color: #e3e3d7; font: inherit; font-size: 10px; }
.shop-search-hint { margin: 4px 0; color: #829187; font-size: 8px; }
.shop-search::placeholder { color: #78877c; }
.shop-search:focus-visible { border-color: #c8ad67; box-shadow: 0 0 0 2px rgba(200,173,103,.15); }
.shop-category-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.shop-category-tab { min-height: 29px; padding: 5px 9px; border: 1px solid rgba(137,157,129,.23); border-radius: 4px; background: rgba(17,29,26,.72); color: #aebbad; font: inherit; font-size: 8px; cursor: pointer; }
.shop-category-tab:hover { border-color: rgba(197,170,99,.5); color: #e0d5b5; }
.shop-category-tab.active, .shop-category-tab[aria-selected="true"] { border-color: rgba(202,174,102,.72); background: rgba(103,83,43,.3); color: #e7cc7f; }
.shop-category-tab:focus-visible { outline: 2px solid #c8ad67; outline-offset: 2px; }
.shop-items-list { display: grid; gap: 6px; }
.shop-item[hidden] { display: none !important; }
#shop-dialog .shop-item {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 58px;
  gap: 11px;
  padding: 8px 10px;
  border: 1px solid rgba(133,147,117,.19);
  border-radius: 7px;
  background: linear-gradient(110deg, rgba(43,53,42,.68), rgba(18,28,25,.8));
  transition: border-color .18s, background .18s, transform .18s;
}
#shop-dialog .shop-item:hover { border-color: rgba(194,164,93,.38); background: linear-gradient(110deg, rgba(59,65,45,.76), rgba(21,33,28,.9)); transform: translateY(-1px); }
#shop-dialog .shop-item:has(.shop-item-summary[aria-expanded="true"]) { border-color: rgba(194,164,93,.4); background: linear-gradient(110deg, rgba(53,61,44,.78), rgba(20,32,28,.94)); }
.shop-item-summary {
  display: grid;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
  grid-template-columns: 38px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.shop-item-summary:focus-visible { outline: 2px solid #d2b86f; outline-offset: 3px; border-radius: 4px; }
.shop-item-expand {
  position: relative;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid rgba(190,164,99,.24);
  border-radius: 50%;
  background: rgba(111,91,48,.12);
  transition: border-color .18s, background .18s;
}
.shop-item-expand::before {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #c9b36f;
  border-bottom: 1.5px solid #c9b36f;
  content: "";
  transform: translateY(-1px) rotate(45deg);
  transition: transform .18s;
}
.shop-item-summary:hover .shop-item-expand,
.shop-item-summary[aria-expanded="true"] .shop-item-expand { border-color: rgba(211,185,111,.5); background: rgba(126,101,47,.3); }
.shop-item-summary[aria-expanded="true"] .shop-item-expand::before { transform: translateY(2px) rotate(225deg); }
#shop-dialog .shop-item-icon { width: 38px; height: 38px; border-color: rgba(161,149,101,.25); border-radius: 8px; background: radial-gradient(circle at 35% 25%, rgba(164,139,78,.18), rgba(13,23,21,.85)); font-size: 21px; }
#shop-dialog .shop-item-info strong { color: #e1e0d2; font-size: 11px; font-weight: 600; }
#shop-dialog .shop-item-info small { color: #d2b86f; font-size: 9px; }
#shop-dialog .shop-sell-section .shop-item-info small { color: #9fbe9e; }
#shop-dialog .shop-item-detail-panel { grid-column: 1 / -1; grid-row: 2; padding: 9px 10px 3px 48px; border-top: 1px solid rgba(169,163,117,.15); }
#shop-dialog .shop-item-detail-panel[hidden] { display: none; }
.shop-item-detail { display: grid; gap: 4px; margin: 0; color: #b7c0b0; font-size: 10px; line-height: 1.55; }
.shop-item-effect { color: #d7c27e; }
#shop-dialog .shop-buy-button {
  min-width: 72px;
  grid-column: 2;
  grid-row: 1;
  padding: 7px 10px;
  border-color: rgba(190,159,83,.38);
  border-radius: 6px;
  background: linear-gradient(145deg, rgba(105,83,42,.52), rgba(60,56,35,.7));
  color: #e6ca79;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .04em;
}
#shop-dialog .shop-buy-button:hover:not(:disabled) { border-color: #cfb46d; background: linear-gradient(145deg, rgba(133,105,51,.62), rgba(74,67,39,.78)); }
#shop-dialog .shop-buy-button:disabled { border-color: rgba(130,128,107,.18); background: rgba(52,59,47,.28); color: #828b7f; opacity: .72; }
#shop-dialog .shop-empty-state { margin: 0; padding: 12px; border: 1px dashed rgba(136,159,131,.23); border-radius: 7px; color: #929d8d; text-align: center; }
#shop-dialog .shop-sell-section { padding-top: 15px; border-top: 1px solid rgba(140,158,126,.18); }

@media (max-width: 600px) {
  #shop-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
  #shop-dialog .map-dialog-header h2 { font-size: 18px; }
  .shop-intro { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; margin: 11px 0 10px; padding: 9px; }
  .shop-intro-icon { width: 36px; height: 36px; }
  .shop-section { margin-top: 14px; }
  .shop-category-tabs { gap: 4px; }
  .shop-category-tab { flex: 1 1 auto; padding-inline: 7px; }
  #shop-dialog .shop-item { min-height: 54px; gap: 8px; padding: 7px; }
  .shop-item-summary { grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 8px; }
  #shop-dialog .shop-item-icon { width: 34px; height: 34px; }
  #shop-dialog .shop-item-detail-panel { padding-left: 42px; }
  #shop-dialog .shop-buy-button { min-width: 64px; padding: 7px; }
}

@media (max-width: 380px) {
  #shop-dialog { padding: 11px; }
  .shop-wallets { gap: 6px; }
  .shop-wallet { gap: 7px; padding: 8px; }
  .shop-wallet-icon { width: 28px; height: 28px; }
  .shop-wallet-label { font-size: 7px; }
  .shop-wallet-label strong { font-size: 13px; }
  #shop-dialog .shop-item { gap: 6px; padding: 6px; }
  .shop-item-summary { grid-template-columns: 32px minmax(0, 1fr) 22px; gap: 6px; }
  #shop-dialog .shop-item-icon { width: 32px; height: 32px; }
  #shop-dialog .shop-item-info strong { font-size: 10px; }
  #shop-dialog .shop-buy-button { min-width: 58px; padding: 6px; }
}

.property-broker-dialog, .property-dialog { width: min(760px, calc(100vw - 28px)); max-height: min(760px, calc(100dvh - 28px)); overflow-y: auto; }
.property-dialog-intro { margin: 10px 0 16px; color: #aebbb1; font-size: 12px; line-height: 1.6; }
.property-offer-list { display: grid; gap: 10px; }
.property-offer { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid rgba(151,174,143,.24); border-radius: 6px; background: rgba(12,22,21,.68); }
.property-offer h3 { margin: 0; color: #e0d2a8; font-size: 13px; }
.property-offer p { margin: 5px 0 0; color: #9eafa2; font-size: 10px; line-height: 1.5; }
.property-offer .property-offer-rooms-heading { margin-top: 9px; color: #d8c996; font-weight: 700; }
.property-offer-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 12px; margin: 4px 0 0; padding-left: 16px; color: #b9c5b8; font-size: 9px; line-height: 1.45; }
.property-offer-price { display: block; margin-top: 6px; color: #ddc27b; font-size: 11px; font-weight: 700; }
.property-offer button { min-width: 96px; }
.property-trade-confirmation { grid-column: 1 / -1; padding: 11px; border: 1px solid rgba(198,167,99,.52); border-left: 3px solid #ddc27b; border-radius: 4px; background: rgba(55,48,31,.5); }
.property-trade-confirmation strong { color: #e5d5a9; font-size: 11px; }
.property-trade-confirmation p { margin: 6px 0 0; color: #c3cbbd; font-size: 10px; line-height: 1.5; }
.property-trade-confirmation p:nth-of-type(2) { color: #e0b58b; }
.property-trade-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.property-trade-actions button:disabled { opacity: .55; }
.property-dialog-status { min-height: 1em; margin: 9px 0 0; color: #d8aa72; font-size: 10px; }
.property-overview { display: flex; justify-content: space-between; gap: 12px; margin: 10px 0 14px; color: #c9d2c8; font-size: 10px; }
.property-calendar { color: #e1d3aa; font-variant-numeric: tabular-nums; }
.property-tabs { display: flex; gap: 6px; padding-bottom: 7px; border-bottom: 1px solid rgba(151,174,143,.22); }
.property-tab { min-width: 98px; padding: 8px 13px; border: 1px solid #3a4d45; border-radius: 5px 5px 0 0; background: #172321; color: #aab9ab; font-size: 10px; }
.property-tab.active, .property-tab[aria-selected="true"] { border-color: #8d8151; background: #302f25; color: #e2cc87; }
.property-panel { padding-top: 14px; }
.property-panel[hidden] { display: none; }
.property-panel h3 { margin: 0; color: #e1d3aa; font-size: 13px; }
.property-panel > p { margin: 6px 0 12px; color: #9eafa2; font-size: 10px; line-height: 1.55; }
.homekeeper-wage-card { display: grid; gap: 3px; margin-top: 10px; padding: 12px 14px; border: 1px solid rgba(223,190,108,.66); border-left: 4px solid #e4c574; border-radius: 7px; background: linear-gradient(105deg, rgba(100,78,37,.42), rgba(39,42,31,.76) 58%, rgba(19,29,27,.82)); box-shadow: 0 4px 18px rgba(0,0,0,.16); }
.homekeeper-wage-label { color: #e3ca83; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.homekeeper-wage-card strong { color: #fff0ba; font-size: 24px; font-variant-numeric: tabular-nums; line-height: 1.1; text-shadow: 0 1px 12px rgba(232,197,112,.2); }
.homekeeper-wage-card p { margin: 2px 0 0; color: #c2c1a8; font-size: 9px; line-height: 1.45; }
.homekeeper-panel > #homekeeper-status { margin: 7px 0 12px; color: #9eafa2; }
.homekeeper-shopping-offer { margin: 10px 0; padding: 11px; border: 1px solid rgba(223,190,108,.48); border-left: 3px solid #d8b45b; border-radius: 6px; background: linear-gradient(110deg, rgba(84,67,35,.34), rgba(15,25,23,.72)); }
.homekeeper-shopping-offer strong { color: #e5cd8a; font-size: 10px; }
.homekeeper-shopping-offer p { margin: 5px 0 8px; color: #c0c7b5; font-size: 9px; line-height: 1.5; }
.homekeeper-shopping-offer .homekeeper-offer-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.homekeeper-shopping-offer button:disabled { opacity: .55; cursor: not-allowed; }
.homekeeper-notes { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 9px; margin: 12px 0; }
.homekeeper-plan, .homekeeper-message-board { min-width: 0; padding: 11px; border: 1px solid rgba(151,174,143,.2); border-radius: 7px; background: rgba(15,25,23,.62); }
.homekeeper-plan { border-color: rgba(185,158,97,.28); background: linear-gradient(145deg, rgba(74,62,39,.22), rgba(15,25,23,.62)); }
.homekeeper-notes h4 { margin: 0 0 7px; color: #d7c487; font-size: 10px; }
.homekeeper-plan p { margin: 0; color: #b8c4b8; font-size: 10px; line-height: 1.55; }
.homekeeper-message-board ol { display: grid; max-height: 160px; gap: 6px; overflow-y: auto; margin: 0; padding: 0 0 0 19px; color: #aab8ad; font-size: 9px; line-height: 1.5; }
.homekeeper-message-board li { padding-left: 2px; }
.homekeeper-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.homekeeper-sector { display: grid; align-content: start; gap: 8px; min-width: 0; margin: 0; padding: 9px 11px 11px; border: 1px solid rgba(151,174,143,.24); border-radius: 7px; background: linear-gradient(145deg, rgba(27,42,36,.8), rgba(13,23,22,.72)); }
.homekeeper-sector legend { padding: 0 6px; color: #dfce93; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.homekeeper-sector-description { margin: 0; color: #94a89a; font-size: 9px; line-height: 1.45; }
.homekeeper-sector-controls { display: grid; gap: 5px; }
.homekeeper-kitchen-settings { grid-column: 1 / -1; }
.homekeeper-toggle, .homekeeper-select-setting { padding: 5px 7px; border: 1px solid rgba(151,174,143,.12); border-radius: 5px; background: rgba(8,16,16,.3); }
.homekeeper-toggle { min-height: 32px; }
.homekeeper-kitchen-settings > .homekeeper-sector-controls > #homekeeper-kitchen-recipes { margin-top: 2px; }
#homekeeper-kitchen-recipes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
.homekeeper-kitchen-recipe { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 7px; padding: 6px; border: 1px solid rgba(151,174,143,.14); border-radius: 4px; background: rgba(8,16,16,.42); }
.homekeeper-kitchen-recipe-info { display: grid; min-width: 0; gap: 2px; }
.homekeeper-kitchen-recipe-info strong { overflow: hidden; color: #c4d0c2; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.homekeeper-kitchen-recipe-info small { color: #8d9d91; font-size: 8px; }
.homekeeper-kitchen-recipe select { flex: 0 0 auto; max-width: 105px; min-height: 27px; padding: 3px 5px; border: 1px solid #42564a; border-radius: 4px; background: #182522; color: #d7e0d5; font: inherit; font-size: 8px; }
.homekeeper-setting { display: flex; min-height: 30px; align-items: center; gap: 8px; color: #b9c5b9; font-size: 10px; }
.homekeeper-setting select { min-height: 28px; margin-left: auto; padding: 4px 7px; border: 1px solid #42564a; border-radius: 4px; background: #182522; color: #d7e0d5; font: inherit; }
.homekeeper-policy { padding: 9px; border-left: 2px solid #86754b; background: rgba(90,76,46,.12); }
.homekeeper-policy, .homekeeper-kitchen-settings > p { line-height: 1.5; }
.homekeeper-panel > [data-action="dismiss-homekeeper"] { margin-top: 4px; }
.house-plan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; margin: 14px auto; padding: 10px; border: 2px solid #8e7950; background: linear-gradient(135deg, rgba(87,71,47,.32), rgba(30,42,34,.65)); }
.house-room { min-height: 76px; border: 1px solid #746646; background: rgba(35,43,34,.82); color: #dac995; font-size: 10px; }
.house-room:hover, .house-room[aria-pressed="true"] { border-color: #ddc27b; background: rgba(103,83,43,.48); }
.house-room .house-room-icon { display: block; margin-bottom: 5px; font-size: 20px; }
.house-room .house-room-name { display: block; }
.house-room-badge { display: block; width: max-content; margin: 5px auto 0; padding: 3px 6px; border: 1px solid rgba(221,194,123,.55); border-radius: 10px; color: #f0d991; background: rgba(103,83,43,.5); font-size: 8px; font-weight: 700; }
.house-room-badge-request { border-color: rgba(244,161,103,.78); color: #ffd3a8; background: rgba(118,64,32,.48); box-shadow: 0 0 10px rgba(244,161,103,.12); }
.room-feedback { margin: 9px 0; padding: 10px 12px; border: 1px solid rgba(174,145,82,.65); border-left: 3px solid #ddc27b; border-radius: 4px; background: rgba(62,52,31,.4); color: #e7d9ad; }
.room-feedback[hidden] { display: none; }
.room-feedback strong { display: block; margin-bottom: 4px; font-size: 11px; }
.room-feedback p { margin: 0; color: #c7d0c3; font-size: 10px; line-height: 1.5; }
.room-description { padding: 9px; border-left: 2px solid #9c8754; background: rgba(12,22,21,.52); }
.room-actions { display: grid; gap: 7px; margin: 9px 0 14px; }
.room-actions-kitchen { display: block; }
.kitchen-board { display: grid; gap: 11px; margin: 9px 0 14px; }
.kitchen-board-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid rgba(190,154,91,.42); border-radius: 6px; background: linear-gradient(120deg, rgba(73,57,31,.55), rgba(30,39,34,.8)); }
.kitchen-board-header h4 { margin: 0; color: #e4d4a5; font-size: 12px; }
.kitchen-recipe-count { padding: 4px 7px; border: 1px solid rgba(190,154,91,.3); border-radius: 12px; color: #d2bd82; font-size: 8px; white-space: nowrap; }
.kitchen-recipe-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.kitchen-recipe-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 11px; border: 1px solid rgba(138,153,132,.26); border-radius: 7px; background: linear-gradient(145deg, rgba(25,39,35,.86), rgba(16,27,27,.94)); }
.kitchen-recipe-card.is-ready { border-color: rgba(123,169,125,.45); }
.kitchen-recipe-card.is-hall-order { border-color: rgba(208,182,107,.8); box-shadow: inset 0 0 0 1px rgba(208,182,107,.16); }
.kitchen-order-label { justify-self: start; padding: 4px 6px; border: 1px solid rgba(208,182,107,.42); border-radius: 4px; background: rgba(111,86,39,.2); color: #e1ca84; font-size: 8px; }
.kitchen-recipe-title { display: flex; min-width: 0; align-items: center; gap: 9px; }
.kitchen-recipe-title h5 { margin: 0; color: #e0d3aa; font-size: 10px; line-height: 1.35; }
.kitchen-recipe-icon { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(190,154,91,.27); border-radius: 7px; background: rgba(95,72,37,.18); font-size: 20px; }
.kitchen-recipe-effect { margin: 0; color: #aebbb1; font-size: 9px; line-height: 1.5; }
.kitchen-recipe-ingredients { display: flex; flex-wrap: wrap; gap: 5px; }
.kitchen-ingredient { padding: 4px 6px; border: 1px solid rgba(123,169,125,.25); border-radius: 4px; background: rgba(53,87,57,.16); color: #b9c9b3; font-size: 8px; }
.kitchen-ingredient.is-missing { border-color: rgba(192,120,91,.28); background: rgba(103,54,43,.16); color: #d6a69a; }
.kitchen-recipe-card > .study-disabled-action, .kitchen-recipe-button { display: block; width: 100%; min-width: 0; }
.kitchen-recipe-card > .study-disabled-action .kitchen-recipe-button { width: 100%; min-width: 0; white-space: normal; }
.kitchen-recipe-button { justify-self: stretch; padding: 8px 9px; border-color: rgba(132,176,125,.34); background: rgba(61,91,56,.25); color: #bed4a2; font-size: 9px; }
.kitchen-recipe-button:disabled { opacity: .56; }
.kitchen-notice { margin: 0; padding: 9px 10px; border-left: 2px solid #bf795b; background: rgba(89,47,38,.2); color: #d8aa9e; font-size: 9px; }
@media (max-width: 600px) {
  .kitchen-recipe-grid { grid-template-columns: minmax(0, 1fr); }
}
.room-actions-storage .storage-item-section { grid-column: 1 / -1; }
.room-actions-storage .room-action-status, .storage-search, .storage-search-empty { grid-column: 1 / -1; }
.storage-search { display: grid; gap: 5px; color: #c9d3ce; font-size: 9px; font-weight: 700; }
.storage-search-input { box-sizing: border-box; width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid #475c50; border-radius: 5px; background: rgba(13,24,24,.9); color: #e1e8df; font: inherit; font-size: 10px; }
.storage-search-input::placeholder { color: #82938a; }
.storage-search-input:focus-visible { outline: 2px solid #d0b66b; outline-offset: 2px; }
.storage-search-empty { margin: 0; padding: 11px; border: 1px dashed rgba(174,190,181,.28); border-radius: 5px; color: #aebbb1; font-size: 9px; text-align: center; }
.study-bestiary-search-label { display: block; margin: 10px 0 5px; color: #c9d3ce; font-size: 9px; font-weight: 700; }
.study-bestiary-search-input { box-sizing: border-box; width: 100%; min-height: 36px; margin-bottom: 9px; padding: 8px 10px; border: 1px solid #475c50; border-radius: 5px; background: rgba(13,24,24,.9); color: #e1e8df; font: inherit; font-size: 10px; }
.study-bestiary-search-input::placeholder { color: #82938a; }
.study-bestiary-search-input:focus-visible { outline: 2px solid #d0b66b; outline-offset: 2px; }
.study-bestiary-empty { margin: 0 0 9px; padding: 11px; border: 1px dashed rgba(174,190,181,.28); border-radius: 5px; color: #aebbb1; font-size: 9px; text-align: center; }
.study-bestiary-entry[hidden], .study-creature-grid > .study-action-entry[hidden] { display: none; }
.storage-item-section { display: grid; gap: 11px; min-width: 0; margin-top: 6px; padding: 12px; border: 1px solid rgba(125,151,141,.34); border-radius: 8px; background: linear-gradient(145deg, rgba(20,34,35,.84), rgba(12,22,24,.92)); }
.storage-item-section-inventory { border-color: rgba(103,166,151,.52); background: linear-gradient(145deg, rgba(24,47,46,.78), rgba(13,27,29,.94)); }
.storage-item-section-storage { border-color: rgba(190,154,91,.48); background: linear-gradient(145deg, rgba(48,40,27,.62), rgba(25,27,25,.94)); }
.storage-item-section[hidden], .storage-item-card[hidden], .storage-item-grid > .study-disabled-action[hidden] { display: none; }
.storage-item-section-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(174,190,181,.16); }
.storage-item-heading { display: flex; align-items: center; gap: 8px; margin: 0; color: #d3e2da; font-size: 11px; font-weight: 700; }
.storage-item-section-storage .storage-item-heading { color: #e5d3a6; }
.storage-item-section-icon { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(120,177,160,.3); border-radius: 6px; background: rgba(54,104,91,.2); font-size: 15px; }
.storage-item-section-storage .storage-item-section-icon { border-color: rgba(202,167,98,.3); background: rgba(126,94,40,.2); }
.storage-item-section-capacity { flex: 0 0 auto; padding: 4px 7px; border: 1px solid rgba(120,177,160,.27); border-radius: 12px; background: rgba(17,34,33,.72); color: #a9c9bc; font-size: 8px; font-variant-numeric: tabular-nums; }
.storage-item-section-storage .storage-item-section-capacity { border-color: rgba(202,167,98,.27); background: rgba(48,39,25,.68); color: #d4bb7d; }
.storage-item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.storage-item-grid > .study-disabled-action { display: block; min-width: 0; }
.storage-item-card { position: relative; display: flex; width: 100%; min-width: 0; min-height: 142px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 9px 6px 7px; border: 1px solid #35464a; border-radius: 7px; background: linear-gradient(145deg, rgba(38,53,57,.8), rgba(18,28,33,.92)); color: #c3ceca; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.storage-item-card[aria-disabled="false"]:hover { transform: translateY(-1px); border-color: #728a86; background: linear-gradient(145deg, #304449, #202e33); }
.storage-item-card[aria-disabled="true"] { opacity: .58; }
.storage-item-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(151,173,166,.18); border-radius: 10px; background: radial-gradient(circle, rgba(130,158,149,.15), rgba(20,31,34,.2)); font-size: 23px; }
.storage-item-name { max-width: 100%; overflow: hidden; color: #c9d3ce; font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.storage-item-quantity { position: absolute; top: 5px; right: 6px; display: grid; min-width: 18px; height: 18px; place-items: center; border: 1px solid #48595a; border-radius: 10px; background: #192529; color: #d4ded7; font-size: 9px; }
.storage-item-controls { display: grid; width: 100%; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.storage-item-amount-label { display: grid; justify-items: center; gap: 2px; width: 100%; color: #aebbb1; font-size: 8px; }
.storage-item-amount { box-sizing: border-box; width: 100%; min-width: 0; padding: 4px 2px; border: 1px solid #475c50; border-radius: 4px; background: #17221d; color: #d3ddcf; font: inherit; font-size: 9px; text-align: center; }
.storage-item-amount:focus-visible, .storage-item-transfer:focus-visible { outline: 2px solid #d0b66b; outline-offset: 2px; }
.storage-item-transfer { box-sizing: border-box; width: 100%; min-width: 0; min-height: 25px; padding: 4px 3px; border: 1px solid rgba(132,176,125,.34); border-radius: 4px; background: rgba(61,91,56,.25); color: #91c5b9; font: inherit; font-size: 8px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.storage-item-transfer:disabled, .storage-item-amount:disabled { cursor: not-allowed; opacity: .58; }
.room-actions-stable { display: block; }
.stable-horse-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; }
.stable-horse-card { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 12px; border: 1px solid rgba(105,139,128,.3); border-radius: 7px; background: linear-gradient(145deg, rgba(31,47,43,.86), rgba(18,28,29,.92)); }
.stable-horse-heading { display: flex; align-items: center; gap: 10px; }
.stable-horse-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(202,171,94,.28); border-radius: 8px; background: rgba(123,97,46,.18); color: #e4c56f; font-size: 21px; }
.stable-horse-title { display: grid; min-width: 0; gap: 4px; }
.stable-horse-title h4 { margin: 0; overflow-wrap: anywhere; color: #e0e7dd; font-size: 12px; }
.stable-horse-status { width: fit-content; padding: 3px 6px; border: 1px solid rgba(136,163,139,.2); border-radius: 4px; background: rgba(74,98,77,.13); color: #a9bba8; font-size: 7px; font-weight: 700; letter-spacing: .06em; }
.stable-horse-status.is-equipped { border-color: rgba(201,175,105,.36); background: rgba(106,88,45,.26); color: #e0ce96; }
.stable-horse-needs { display: grid; gap: 4px; }
.stable-horse-need { display: flex; justify-content: space-between; color: #b7c3b8; font-size: 9px; }
.horse-need-meter { height: 6px; border: 1px solid rgba(132,155,139,.24); background: rgba(8,17,15,.7); }
.horse-need-meter span { transition: width .3s ease; }
.stable-horse-bond { display: grid; gap: 4px; margin-top: 8px; padding: 7px 8px; border: 1px solid rgba(194,164,93,.2); border-radius: 5px; background: rgba(39,34,22,.22); }
.stable-horse-bond .stable-horse-need { align-items: baseline; }
.stable-horse-bond .stable-horse-need strong { color: #e0ce96; font-size: 9px; }
.horse-bond-meter { height: 6px; border: 1px solid rgba(194,164,93,.26); background: rgba(8,17,15,.7); }
.horse-bond-meter span { background: linear-gradient(90deg, #9d8147, #e0ce96); transition: width .3s ease; }
.stable-horse-bond-detail { color: #acb7a7; font-size: 8px; line-height: 1.4; }
.horse-energy-meter span { background: linear-gradient(90deg, #4b7b78, #8fc5a8); }
.horse-hunger-meter span { background: linear-gradient(90deg, #9a8147, #d8bd70); }
.horse-hunger-meter.critical span { background: linear-gradient(90deg, #9d414b, #ce6868); }
.stable-horse-description, .stable-horse-detail { margin: 0; color: #a8b9ad; font-size: 9px; line-height: 1.5; }
.stable-horse-detail { padding: 6px 7px; border-left: 2px solid rgba(151,177,134,.48); background: rgba(54,78,54,.14); color: #c0cbb6; }
.stable-horse-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.disabled-action-tooltip { display: inline-flex; min-width: 0; }
.disabled-action-tooltip:focus-visible { outline: 2px solid #d0b66b; outline-offset: 2px; }
.mounted-horse-actions { margin-top: 9px; }
#mounted-horse-title { display: grid; gap: 2px; }
#mounted-horse-profile { color: #d0b66b; font-size: 9px; font-weight: 600; }
.stable-horse-actions .small-button { min-width: 0; padding: 6px 9px; border-color: rgba(132,176,125,.34); border-radius: 5px; background: rgba(61,91,56,.25); color: #bed4a2; font-size: 8px; }
.stable-horse-actions .small-button:disabled { opacity: .42; }
.town-stable-dialog { width: min(680px, calc(100vw - 28px)); }
.town-stable-intro { display: flex; align-items: center; gap: 12px; margin: 12px 0; padding: 11px; border: 1px solid rgba(151,177,134,.22); border-radius: 6px; background: rgba(24,39,34,.72); }
.town-stable-intro p { margin: 0; color: #b9c6b9; font-size: 10px; line-height: 1.5; }
.town-stable-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(202,171,94,.28); border-radius: 8px; color: #e4c56f; font-size: 22px; }
.town-stable-wallet { display: grid; grid-template-columns: 1fr auto 1fr auto; align-items: center; gap: 5px 10px; padding: 9px 11px; border: 1px solid rgba(194,164,93,.22); border-radius: 5px; background: rgba(10,19,18,.56); color: #aebbb1; font-size: 9px; }
.town-stable-wallet strong { color: #e4d49e; text-align: right; }
.town-stable-tabs { display: flex; gap: 5px; margin: 14px 0 10px; border-bottom: 1px solid rgba(156,135,84,.4); }
.town-stable-tab { padding: 9px 13px; border: 1px solid transparent; border-bottom: 2px solid transparent; background: transparent; color: #aebbb1; font-size: 10px; font-weight: 700; cursor: pointer; }
.town-stable-tab.active { border-bottom-color: #d0b66b; color: #e1d3aa; }
.town-stable-panel[hidden] { display: none; }
.town-stable-status, .town-stable-market-intro { margin: 7px 0 10px; color: #aebbb1; font-size: 10px; line-height: 1.5; }
.town-stable-dialog .stable-horse-list { margin-top: 0; }
.town-stable-market-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(105,139,128,.3); border-radius: 7px; background: linear-gradient(145deg, rgba(31,47,43,.86), rgba(18,28,29,.92)); }
.town-stable-market-icon { color: #d8bd70; font-size: 24px; }
.town-stable-market-item > div { display: grid; gap: 4px; }
.town-stable-market-item strong { color: #e0e7dd; font-size: 11px; }
.town-stable-market-item small { color: #a8b9ad; font-size: 9px; }
.stable-horse-profile { color: #d0b66b; font-size: 9px; }
.town-stable-horse-offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 9px 0 14px; }
.town-stable-horse-offer { display: grid; align-content: start; gap: 9px; min-width: 0; padding: 12px; border: 1px solid rgba(194,164,93,.3); border-radius: 7px; background: linear-gradient(145deg, rgba(44,48,37,.82), rgba(18,28,29,.94)); }
.town-stable-horse-offer-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.town-stable-horse-offer-heading h4 { margin: 0; color: #e1d3aa; font-size: 12px; }
.town-stable-horse-offer-heading strong { color: #d8bd70; font-size: 10px; white-space: nowrap; }
.town-stable-horse-offer > p { margin: 0; color: #aebbb1; font-size: 9px; line-height: 1.5; }
.town-stable-horse-fields { display: grid; gap: 7px; }
.town-stable-horse-fields > div { display: grid; gap: 4px; }
.town-stable-horse-label { color: #d8c996; font-size: 9px; font-weight: 700; }
.town-stable-horse-offer input, .town-stable-horse-offer select { width: 100%; min-width: 0; min-height: 34px; padding: 7px 9px; border: 1px solid rgba(132,176,125,.34); border-radius: 5px; background: rgba(8,16,16,.68); color: #e3e3d7; font: inherit; font-size: 10px; }
.town-stable-horse-offer input:focus-visible, .town-stable-horse-offer select:focus-visible { outline: 2px solid #c8ad67; outline-offset: 2px; }
.town-stable-horse-offer .shop-buy-button { width: 100%; }
.town-stable-dialog .stable-horse-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-stable-dialog .stable-horse-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.town-stable-dialog .stable-horse-actions .small-button { min-height: 32px; }
.town-stable-dialog .stable-horse-actions .stable-horse-sell-button { border-color: rgba(190,111,92,.4); background: rgba(91,48,42,.28); color: #e0aaa0; }
.item-artwork { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.equipment-slot-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; }
.smith-material-list li { display: inline-flex; align-items: center; gap: 5px; }
.smith-material-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; }
.garden-plot-icon .item-artwork { width: 38px; height: 38px; margin: 0 auto; }
.room-actions-storage { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.room-actions-storage .room-action-status { grid-column: 1 / -1; }
.room-actions label { color: #d8c996; font-size: 10px; font-weight: 700; }
.room-actions select { width: 100%; max-width: 260px; padding: 8px; border: 1px solid #55665b; border-radius: 4px; background: #172321; color: #e1e8df; }
.room-actions input[type="text"] { width: 100%; max-width: 320px; padding: 8px; border: 1px solid #55665b; border-radius: 4px; background: #172321; color: #e1e8df; }
.room-action-status { margin: 0; color: #aebbb1; font-size: 10px; line-height: 1.5; }
.study-room-content { margin: 9px 0 14px; }
.study-room-content[hidden], .study-room-panel[hidden] { display: none; }
.study-room-tabs { display: flex; gap: 6px; margin-bottom: 10px; border-bottom: 1px solid rgba(156,135,84,.45); }
.study-room-tab { padding: 8px 11px; border: 1px solid transparent; border-bottom: 2px solid transparent; background: transparent; color: #aebbb1; font-size: 10px; font-weight: 700; cursor: pointer; }
.study-room-tab:hover, .study-room-tab:focus-visible { color: #e1d3aa; }
.study-room-tab.active { border-bottom-color: #d0b66b; color: #e1d3aa; }
.study-room-panel > h4 { margin: 0 0 5px; color: #e1d3aa; font-size: 12px; }
.study-room-panel > p { margin: 0 0 9px; color: #aebbb1; font-size: 10px; line-height: 1.5; }
.study-bestiary-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.study-actions-list { display: grid; gap: 14px; }
.study-action-section { display: grid; gap: 7px; }
.study-action-section h5 { margin: 0; color: #e1d3aa; font-size: 11px; }
.study-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: start; }
.study-action-entry { display: grid; gap: 6px; padding: 9px; border: 1px solid rgba(156,135,84,.35); border-radius: 4px; background: rgba(19,29,26,.45); }
.study-creature-grid > .study-action-entry { grid-column: 1 / -1; }
.study-approach-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.study-approach-options .room-action-button { width: 100%; min-width: 0; white-space: normal; }
.study-expedition-grid > .room-action-button, .study-expedition-grid > .study-disabled-action { width: 100%; min-width: 0; }
.study-expedition-grid .room-action-button { width: 100%; min-width: 0; white-space: normal; }
.study-disabled-action { display: inline-flex; justify-self: start; max-width: 100%; cursor: not-allowed; }
.study-disabled-action > .room-action-button { pointer-events: none; }
.study-disabled-action:focus-visible { outline: 2px solid #d0b66b; outline-offset: 2px; }
.study-section-title { grid-column: 1 / -1; margin-top: 8px; color: #d8c996; }
.study-bestiary-entry { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(156,135,84,.5); border-left: 3px solid #9c8754; border-radius: 4px; background: rgba(19,29,26,.68); }
.study-bestiary-entry h4 { margin: 0; color: #e1d3aa; font-size: 12px; }
.study-entry-detail { padding-left: 9px; border-left: 2px solid rgba(156,135,84,.7); }
.room-action-button { justify-self: start; min-width: 180px; }
.room-actions-storage .room-action-button { width: 100%; min-width: 0; white-space: normal; }
@media (max-width: 600px) {
  .storage-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .town-stable-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
  .town-stable-market-item { grid-template-columns: auto minmax(0, 1fr); }
  .town-stable-market-item .shop-buy-button { grid-column: 1 / -1; width: 100%; }
  .town-stable-horse-offers { grid-template-columns: minmax(0, 1fr); }
  .town-stable-dialog .stable-horse-list { grid-template-columns: minmax(0, 1fr); }
  .smith-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 13px; }
  .smith-trade-grid { grid-template-columns: minmax(0, 1fr); }
  .study-bestiary-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .study-creature-grid > .study-action-entry { grid-column: 1 / -1; }
  .study-approach-options { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .room-actions-storage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stable-horse-list { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .study-bestiary-list { grid-template-columns: minmax(0, 1fr); }
  .study-action-grid { grid-template-columns: minmax(0, 1fr); }
  .study-approach-options { grid-template-columns: minmax(0, 1fr); }
  .room-actions-storage { grid-template-columns: minmax(0, 1fr); }
}
.garden-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.garden-heading p { margin: 5px 0 0; color: #aebbb1; font-size: 10px; line-height: 1.5; }
.garden-cover-tooltip { flex: 0 0 auto; }
.garden-cover-button { width: 100%; }
.garden-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .8fr); gap: 15px; margin-top: 13px; }
.garden-plots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; align-content: start; }
.garden-plot { min-height: 76px; padding: 7px 4px; border: 1px solid #465d49; border-radius: 4px; background: linear-gradient(145deg, #26382c, #18251e); color: #cbd4bd; font-size: 9px; line-height: 1.35; white-space: pre-line; }
.garden-plot:hover, .garden-plot[aria-pressed="true"] { border-color: #d0b66b; box-shadow: inset 0 0 0 1px rgba(208,182,107,.22); }
.garden-plot.withered { border-color: #71524a; color: #d7a99a; }
.garden-locked-plot-tooltip, .garden-expansion-tooltip { display: block; min-width: 0; }
.garden-plot-locked, .garden-plot-locked:disabled { width: 100%; height: 100%; border-style: dashed; border-color: #67716b; background: rgba(29,39,34,.58); color: #aebbb1; opacity: .78; pointer-events: none; }
.garden-locked-plot-tooltip:focus-visible, .garden-expansion-tooltip:focus-visible { outline: 2px solid #d0b66b; outline-offset: 2px; }
.garden-plot-icon { display: block; margin-bottom: 4px; font-size: 21px; }
.garden-details { padding: 12px; border: 1px solid rgba(151,174,143,.24); border-radius: 5px; background: rgba(12,22,21,.6); }
.garden-details h4 { margin: 0 0 8px; color: #e1d3aa; font-size: 11px; }
.garden-details p, .garden-details label { color: #aebbb1; font-size: 10px; line-height: 1.55; }
.garden-details select { width: 100%; margin: 4px 0 9px; padding: 8px; border: 1px solid #475c50; border-radius: 4px; background: #17221d; color: #d3ddcf; font-size: 11px; }
.garden-action-button { width: 100%; margin-top: 5px; }
.garden-action-button[hidden] { display: none; }
.garden-cover-button:disabled { opacity: .65; pointer-events: none; }

@media (max-width: 600px) {
  .profession-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
  .profession-dialog-header { align-items: center; }
  .profession-dialog-header h2 { font-size: 21px; }
  .profession-dialog-content.is-profession-selection { grid-template-columns: minmax(0, 1fr); }
  .profession-board-grid { grid-template-columns: minmax(0, 1fr); }
  .profession-career-card { grid-template-columns: auto minmax(0, 1fr); gap: 11px; padding: 13px; }
  .profession-career-progress, .profession-career-max { grid-column: 1 / -1; }
  .profession-career-progress { width: 100%; }
  .profession-career-max { justify-self: start; }
  .profession-option { grid-template-columns: auto minmax(0, 1fr); }
  .profession-contract-card { padding: 14px; }
  .profession-reward { padding: 7px; }
  .profession-reward strong { font-size: 13px; }
  .profession-reward span { font-size: 8px; }
  .property-broker-dialog, .property-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 14px; }
  .property-offer { grid-template-columns: minmax(0, 1fr); gap: 9px; }
  .property-offer button { justify-self: stretch; }
  .property-offer-rooms { grid-template-columns: minmax(0, 1fr); }
  .property-trade-confirmation { grid-column: 1; }
  .property-overview { flex-direction: column; gap: 5px; }
  .garden-heading { align-items: flex-start; flex-direction: column; }
  .garden-cover-tooltip { width: 100%; }
  .garden-layout { grid-template-columns: minmax(0, 1fr); }
  .garden-plots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .garden-details { grid-row: 2; }
  .house-plan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .homekeeper-notes { grid-template-columns: minmax(0, 1fr); }
  .homekeeper-settings { grid-template-columns: minmax(0, 1fr); }
  .homekeeper-kitchen-settings { grid-column: auto; }
  .homekeeper-setting { align-items: flex-start; flex-wrap: wrap; }
  .homekeeper-setting select { margin-left: auto; }
  #homekeeper-kitchen-recipes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .dialogue-dialog.has-companion-card { width: calc(100vw - 16px); padding: 15px; }
  .dialogue-dialog.has-companion-card .dialogue-layout { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .dialogue-card-panel { position: relative; width: min(190px, 68%); justify-self: center; }
  #party-dialog { width: calc(100vw - 16px); }
  .party-card-gallery { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .party-card-slot { padding: 4px 2px; }
  .party-card-slot img, .party-card-slot-sigil { height: auto; }
  .party-card-slot small { font-size: 7px; }
  .party-card-preview { grid-template-columns: minmax(105px, 36%) minmax(0, 1fr); gap: 10px; padding: 8px; }
  .party-card-details h4 { font-size: 17px; }
}

@media (max-width: 380px) {
  .party-card-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}