/* v0.5：更清晰的策略工作台与金玉视觉系统 */
:root {
  --ink: #241d14;
  --paper: #fbf6e8;
  --paper-deep: #efe3c6;
  --jade: #24756a;
  --jade-dark: #164f49;
  --cinnabar: #9d3429;
  --line: rgba(119, 84, 33, .28);
  --shadow: 0 14px 36px rgba(50, 34, 15, .18);
}

body { font-size: 16px; color: var(--ink); }
.sg-icon { width: 1.35em; height: 1.35em; flex: 0 0 auto; vertical-align: -.25em; }
.panel-title { min-height: 44px; font-size: 16px; background: linear-gradient(180deg, #f8efd9, #ead7ac); }
.panel-title > .sg-icon { color: var(--gold-dark); }
.btn { min-height: 36px; padding: 7px 15px; font-size: 14px; border-radius: 3px; }
.btn .sg-icon { width: 1.1em; height: 1.1em; margin-right: 6px; }
.btn.full { width: 100%; margin-top: 12px; }
.eyebrow { color: var(--gold-dark); font: 700 13px/1.3 var(--body-font); letter-spacing: 3px; text-transform: uppercase; }

#topbar { min-height: 42px; font-size: 14px; gap: 16px; scrollbar-width: thin; }
#tb-faction { min-width: max-content; }
#log-panel { width: 320px; }
#log-body { font-size: 13px; line-height: 1.75; }

.title-box { max-width: 720px; background: linear-gradient(rgba(255,252,242,.94), rgba(243,231,199,.96)); }
.title-sub { color: #5f5039; }
.scenario-tag { display: inline-block; margin-top: -26px; margin-bottom: 30px; padding: 5px 15px; border: 1px solid var(--border); color: var(--cinnabar); letter-spacing: 3px; background: rgba(255,255,255,.5); }

.palace-panel .panel-body { padding: 14px; }
body.has-palace-art .palace-hero {
  background-image: linear-gradient(rgba(24,18,11,.10), rgba(24,18,11,.28)), var(--palace-bg);
}
.palace-dashboard { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: auto auto 1fr; gap: 14px; padding: 18px; align-content: start; }
.ruler-card, .trait-card, .weekly-brief, .resource-grid {
  background: rgba(255, 251, 239, .91); border: 1px solid rgba(202,162,91,.72); box-shadow: 0 8px 28px rgba(40,28,12,.16); backdrop-filter: blur(4px);
}
.ruler-card { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.ruler-mark { width: 58px; height: 58px; display: grid; place-items: center; color: #a56b17; border: 1px solid var(--border); background: linear-gradient(#fff9e8,#ecd08e); transform: rotate(45deg); }
.ruler-mark .sg-icon { width: 30px; height: 30px; transform: rotate(-45deg); }
.ruler-card h2 { margin: 3px 0; color: #684512; font: 700 28px var(--serif); letter-spacing: 5px; }
.ruler-card p, .trait-card p, .weekly-brief p { color: #5c4b33; line-height: 1.75; }
.trait-card { padding: 18px 20px; border-left: 4px solid var(--jade); }
.trait-card h3 { margin: 5px 0; color: var(--jade-dark); font-size: 20px; }
.resource-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, 1fr); overflow: hidden; }
.resource-grid > div { padding: 14px 16px; border-right: 1px solid var(--line); }
.resource-grid > div:last-child { border-right: 0; }
.resource-grid span, .resource-grid small { display: block; color: #746448; font-size: 13px; }
.resource-grid b { display: block; margin: 4px 0 2px; color: #563a12; font-size: 20px; }
.weekly-brief { grid-column: 1 / -1; align-self: start; padding: 15px 20px; }
.rank-seal { margin-left: auto; padding: 4px 12px; color: var(--cinnabar); border: 1px solid currentColor; letter-spacing: 4px; background: rgba(255,255,255,.48); }

.palace-nav { gap: 8px; padding-top: 10px; }
.palace-nav-btn { min-width: 112px; min-height: 72px; padding: 11px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 16px; letter-spacing: 2px; }
.palace-nav-btn .sg-icon { width: 23px; height: 23px; color: #9a681d; }
.palace-nav-btn small { display: block; font: 12px var(--body-font); letter-spacing: 0; color: var(--text-dim); }
.palace-panel.court-mode > .panel-body > .palace-nav { display: none; }
.palace-panel.court-mode > .panel-body { background-image: linear-gradient(rgba(18,13,8,.22), rgba(18,13,8,.38)), var(--court-bg); background-size: cover; background-position: center; }

.court-workspace, .hr-workspace, .subpage { min-height: 100%; padding: 18px; background: rgba(251,246,232,.92); }
.court-heading, .subpage-heading { display: flex; align-items: center; gap: 16px; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.court-heading h2, .subpage-heading h2 { margin-top: 3px; color: #55370f; font: 700 28px var(--serif); letter-spacing: 5px; }
.court-command-grid { display: grid; grid-template-columns: repeat(3, minmax(190px, 1fr)); gap: 14px; margin: 18px 0; }
.court-command-grid .court-btn { position: relative; min-height: 112px; padding: 17px; display: flex; align-items: center; gap: 14px; text-align: left; letter-spacing: 1px; border-radius: 4px; }
.court-command-grid .court-btn > .sg-icon { width: 32px; height: 32px; color: #97651d; }
.court-command-grid .court-btn span { display: flex; flex-direction: column; gap: 6px; }
.court-command-grid .court-btn b { font-size: 18px; letter-spacing: 3px; }
.court-command-grid .court-btn small { color: #786a51; font: 13px/1.5 var(--body-font); }
.court-command-grid .court-btn em { position: absolute; right: 10px; top: 10px; min-width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--cinnabar); font: 700 13px sans-serif; }
.court-command-grid .court-btn i { position: absolute; right: 12px; top: 12px; color: var(--jade); font: 12px var(--body-font); }
.court-command-grid .court-btn.primary { border-color: #ad7a28; background: linear-gradient(135deg,#fff7dd,#e9cb7b); }
.court-footer { display: flex; justify-content: center; margin-top: 22px; }

.hr-grid { display: grid; grid-template-columns: minmax(240px,.75fr) minmax(430px,1.35fr); gap: 14px; margin-top: 16px; }
.positions-column, .appointment-column, .roster-panel { background: rgba(255,252,243,.94); border: 1px solid var(--border-light); box-shadow: 0 5px 18px rgba(60,40,15,.09); }
.positions-column { padding: 12px; max-height: 500px; overflow-y: auto; }
.positions-column h3, .roster-head h3 { margin-bottom: 10px; color: #6c4816; letter-spacing: 3px; }
.position-card { width: 100%; padding: 10px 11px; margin-bottom: 7px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border: 1px solid var(--line); background: #fbf5e5; color: var(--ink); cursor: pointer; text-align: left; }
.position-card b { font-size: 15px; letter-spacing: 2px; }
.position-card small { font: 12px/1.5 var(--body-font); color: #79694e; }
.position-card.active { border-color: var(--jade); box-shadow: inset 4px 0 var(--jade); background: #edf6ef; }
.position-card.locked { opacity: .5; cursor: not-allowed; }
.appointment-column { padding: 16px; min-height: 390px; }
.empty-state { min-height: 330px; display: grid; place-content: center; gap: 8px; text-align: center; color: #7d6c4f; }
.empty-state b { color: #654414; font-size: 19px; }
.appoint-detail h3 { margin: 5px 0; font-size: 23px; color: var(--jade-dark); }
.appoint-detail p { line-height: 1.7; }
.requirement { margin: 10px 0; padding: 9px 12px; background: #f2e7c9; border-left: 3px solid var(--gold); }
.candidate-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 7px; max-height: 250px; overflow-y: auto; }
.candidate-row { min-height: 58px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 10px; text-align: left; border: 1px solid var(--line); background: white; cursor: pointer; }
.candidate-row b { color: var(--jade); font-size: 13px; }
.candidate-row small { grid-column: 1 / -1; color: #807056; }
.candidate-row.selected { border-color: var(--jade); box-shadow: inset 3px 0 var(--jade); }
.city-choice { margin-top: 12px; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.city-choice b { width: 100%; }
.roster-panel { margin-top: 14px; padding: 13px; }
.roster-head { display: flex; justify-content: space-between; align-items: center; }
.table-scroll { overflow-x: auto; }
.name-link { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }

.general-sheet { min-width: min(620px, 80vw); }
.general-sheet-head { display: flex; justify-content: space-between; gap: 20px; align-items: start; }
.general-sheet-head h2 { margin: 4px 0; font: 700 27px var(--serif); letter-spacing: 4px; }
.loyalty-ring { width: 72px; height: 72px; border: 1px solid var(--gold); border-radius: 50%; display: grid; place-content: center; text-align: center; color: #806329; font-size: 12px; }
.loyalty-ring b { display: block; font-size: 22px; }
.attribute-cards { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; margin: 15px 0; }
.attribute-cards > div { padding: 9px; display: grid; gap: 4px; text-align: center; background: #f4ead0; border: 1px solid var(--line); }
.attribute-cards b { font-size: 19px; }
.skill-card, .bio-card { margin-top: 10px; padding: 12px 14px; line-height: 1.75; border: 1px solid var(--line); }
.skill-card { display: flex; gap: 15px; background: #eef5e8; border-left: 4px solid var(--jade); }
.bio-card { background: #fbf5e6; }
.detail-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

.quota { margin-left: auto; padding: 8px 13px; border: 1px solid var(--gold); background: #fff7df; }
.candidate-cards { display: grid; grid-template-columns: repeat(4,minmax(190px,1fr)); gap: 10px; margin-top: 16px; }
.talent-card { padding: 13px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--border-light); background: rgba(255,252,242,.96); box-shadow: 0 4px 12px rgba(60,40,15,.08); }
.talent-card .name-link { text-align: left; font-size: 18px; font-weight: 700; }
.talent-card small { color: #75654c; }
.mini-attrs { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; font-size: 12px; color: #5b4b34; }
.mini-attrs span { padding: 3px; background: #f2e7ca; text-align: center; }
.talent-card .hired { color: var(--jade); padding: 8px 0; }
.trait-preview { margin: 8px 12px 4px; padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; border-left: 3px solid var(--jade); background: rgba(36,117,106,.07); }
.trait-preview b { color: var(--jade-dark); }
.trait-preview span { font-size: 12px; line-height: 1.55; }
.build-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 14px; }
.build-summary > div { padding: 10px 12px; border: 1px solid var(--line); background: #f8efd9; }
.build-summary span { display: block; color: #75654c; font-size: 12px; }
.build-summary b { display: block; margin-top: 3px; color: var(--jade-dark); font-size: 18px; }
.march-brief { margin: 10px 0; padding: 10px 12px; background: #eef4e8; border-left: 4px solid var(--jade); }
.setting-row { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 12px 0; }
.setting-row div { display: flex; flex-direction: column; gap: 3px; }
.setting-row small { color: var(--text-dim); }
.setting-row input { flex: 1; }

@media (max-width: 1180px) {
  #log-panel { width: 250px; }
  .resource-grid { grid-template-columns: repeat(3,1fr); }
  .resource-grid > div:nth-child(3) { border-right: 0; }
  .candidate-cards { grid-template-columns: repeat(3,minmax(180px,1fr)); }
}

@media (max-width: 860px) {
  body { overflow: auto; }
  #app, #game-screen { min-height: 100vh; height: auto; }
  #main-row { display: block; }
  #screen-root { min-height: calc(100vh - 42px); overflow: visible; padding: 8px; }
  #log-panel { width: 100%; max-height: 280px; border-left: 0; border-top: 2px solid var(--border-light); }
  .palace-dashboard, .hr-grid { grid-template-columns: 1fr; }
  .resource-grid { grid-template-columns: repeat(2,1fr); }
  .resource-grid > div { border-bottom: 1px solid var(--line); }
  .court-command-grid { grid-template-columns: repeat(2,minmax(160px,1fr)); }
  .candidate-cards { grid-template-columns: repeat(2,minmax(160px,1fr)); }
  .build-summary { grid-template-columns: repeat(2,1fr); }
  .palace-nav-btn { min-width: 92px; }
  #modal-box { min-width: 0; width: calc(100vw - 24px); padding: 18px; }
}

@media (max-width: 560px) {
  .title-box { margin: 12px; padding: 34px 20px; }
  .game-title { font-size: 36px; letter-spacing: 7px; }
  .title-sub { font-size: 13px; letter-spacing: 3px; }
  .palace-dashboard { padding: 8px; }
  .ruler-card { padding: 14px; }
  .resource-grid { grid-template-columns: 1fr 1fr; }
  .palace-nav { display: grid; grid-template-columns: repeat(3,1fr); }
  .palace-nav-btn { min-width: 0; font-size: 14px; }
  .court-command-grid { grid-template-columns: 1fr; }
  .candidate-cards { grid-template-columns: 1fr; }
  .candidate-list { grid-template-columns: 1fr; }
  .attribute-cards { grid-template-columns: repeat(3,1fr); }
  .court-workspace, .hr-workspace, .subpage { padding: 10px; }
}