/* Kings & Cards — Master UI design system
   Implements the approved royal parchment / dark timber visual language.
   All tokens live here so future screens can share one visual contract. */
:root{
  color-scheme:dark;
  --color-royal-dark:#24221f;
  --color-dark-wood:#403326;
  --color-parchment:#d8c6a0;
  --color-light-parchment:#efe3c8;
  --color-antique-gold:#b99a59;
  --color-bronze:#80633f;
  --color-royal-red:#762f35;
  --color-deep-blue:#344b65;
  --color-forest:#405b43;
  --color-stone:#77736b;
  --ui-ink:#30271e;
  --ui-paper-text:#4b3927;
  --ui-paper-muted:#806d52;
  --ui-dark-1:#1c1a17;
  --ui-dark-2:#29251f;
  --ui-dark-3:#383027;
  --ui-line:rgba(185,154,89,.28);
  --ui-line-strong:rgba(185,154,89,.58);
  --ui-shadow:0 14px 38px rgba(0,0,0,.38);
  --ui-radius-sm:3px;
  --ui-radius-md:6px;
  --ui-radius-lg:9px;
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:24px;
  --ui-title-font:Georgia,"Palatino Linotype","Book Antiqua",serif;
  --ui-body-font:"Segoe UI",Tahoma,Arial,sans-serif;
  --ui-number-font:"Segoe UI",Tahoma,Arial,sans-serif;
}
body{font-family:var(--ui-body-font);background:#171512;color:#eee4d0}
button,input,select,textarea{font-family:var(--ui-body-font)}
button{border-radius:var(--ui-radius-sm);transition:background-color .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease}
button:disabled{cursor:not-allowed;filter:grayscale(.45);opacity:.55}
button:focus-visible,[role=button]:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #e1c47e;outline-offset:2px}
.game-shell{background:radial-gradient(ellipse at 45% -20%,rgba(126,99,63,.17),transparent 55%),linear-gradient(145deg,#24221f,#171512 76%)}
.topbar{min-height:72px;padding:8px 16px;border-bottom:1px solid var(--ui-line-strong);background:linear-gradient(180deg,#373027,#211e19);box-shadow:0 4px 18px #0008}
.brand-mark{border:2px double var(--color-antique-gold);border-radius:4px;background:linear-gradient(145deg,#d8c6a0,#80633f);color:#34281d;box-shadow:inset 0 0 0 3px #eee0bd66,0 3px 9px #0007}
.brand-mark img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 1px 1px #3b291d88)}
.brand-title{font-family:var(--ui-title-font);font-variant:small-caps;letter-spacing:.08em;color:#e5d0a0}
.brand-subtitle{color:#b9a47c;letter-spacing:.17em}
.header-middle{gap:clamp(10px,1.7vw,24px)}
.date-label,.morale-topline{color:#b9a47c}
.date-value{font-family:var(--ui-title-font);color:#f0e3c7}
.morale-track{border:1px solid #8d744d;border-radius:2px;background:#171512}
.morale-track>div{background:linear-gradient(90deg,#762f35,#b99a59,#405b43)}
.player-chip{display:flex;align-items:center;gap:7px;border:1px solid var(--ui-line);border-radius:3px;background:#1c1a17;color:#e6d7b8}
.player-chip svg{width:15px;height:15px;fill:none;stroke:#d6bd8a;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.header-actions{gap:5px}
.control-button,.speed-button{min-height:34px;padding:0 10px;border:1px solid #8b7047;border-radius:3px;background:linear-gradient(#514333,#332a20);color:#ead9b5;font-family:var(--ui-title-font);font-size:10px;font-weight:700;letter-spacing:.07em;box-shadow:inset 0 1px #fff2,0 2px 4px #0006}
.control-button:hover,.speed-button:hover{border-color:#d1b476;background:linear-gradient(#69553a,#403326);color:#fff0c9}
.control-button:active,.speed-button:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #0006}
.speed-button{min-width:36px;padding:0 7px;font-family:var(--ui-number-font)}
.speed-button.is-active{border-color:#e1c17d;background:linear-gradient(#b99a59,#80633f);color:#211b14;box-shadow:inset 0 1px #fff8,0 0 0 1px #3a2b1c}
.realm-resource-strip{display:flex;align-items:center;gap:5px;min-width:0}
.realm-resource-chip{display:flex;align-items:center;gap:6px;min-height:34px;padding:0 8px;border:1px solid var(--ui-line);border-radius:3px;background:#211e19;color:#dfd0b2;cursor:pointer}
.realm-resource-chip:hover{border-color:var(--color-antique-gold);background:#383027}
.realm-resource-chip svg{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:var(--color-antique-gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.realm-resource-chip strong{font:700 12px var(--ui-number-font);font-variant-numeric:tabular-nums;color:#f1e5ce}
.realm-resource-chip small{font-size:8px;letter-spacing:.1em;color:#bba984}
.game-layout{align-items:stretch}
.realm-nav{display:flex;flex:0 0 66px;flex-direction:column;align-items:stretch;gap:4px;padding:10px 6px;border-right:1px solid var(--ui-line-strong);background:linear-gradient(180deg,#332b22,#211e19);box-shadow:4px 0 14px #0005;z-index:5}
.realm-nav-heading{padding:2px 0 8px;text-align:center;color:#bda779;font:700 8px var(--ui-title-font);letter-spacing:.13em;border-bottom:1px solid var(--ui-line);margin-bottom:3px}
.realm-nav-button{display:flex;min-height:49px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 2px;border:1px solid transparent;border-radius:3px;background:transparent;color:#c7b894;cursor:pointer}
.realm-nav-button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.realm-nav-button span{font:700 7px var(--ui-title-font);letter-spacing:.05em;text-transform:uppercase}
.realm-nav-button:hover{border-color:var(--ui-line);background:#4a3b2a;color:#f2dfb6}
.realm-nav-button.is-active{border-color:#b99a59;background:linear-gradient(145deg,#715638,#403326);color:#fff0c9;box-shadow:inset 0 1px #fff3,0 2px 5px #0005}
.realm-nav-spacer{flex:1}
.world-stage{background:#22251f}
.side-panel{flex-basis:330px;min-width:300px;border-left:1px solid var(--ui-line-strong);background:linear-gradient(180deg,#29251f,#1d1a16);box-shadow:-5px 0 20px #0007}
.section-heading,.card-section-heading,.card-section-title{font-family:var(--ui-title-font);letter-spacing:.12em;color:#e2cea5}
.resource-section{background:rgba(0,0,0,.12);border-bottom:1px solid var(--ui-line)}
.resource-card{border:1px solid #80633f;border-radius:3px;background:linear-gradient(145deg,#403326,#29221b);box-shadow:inset 0 1px #fff1,0 2px 5px #0005}
.resource-symbol svg{width:30px;height:30px;display:block;filter:drop-shadow(0 2px 1px #0005)}
.card-cost svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.resource-value{color:#f0e2c2;font:700 18px var(--ui-number-font);font-variant-numeric:tabular-nums}
.resource-name{color:#bba77f;font-family:var(--ui-title-font);letter-spacing:.13em}
.card-section{border-color:var(--ui-line)}
.card-container{border:3px double #a98a52;border-radius:3px;box-shadow:inset 0 0 0 4px #f1e2bf,0 5px 12px #0008}
.card-container:hover{border-color:#d5b76e;transform:translateY(-1px)}
.tabs{background:#211d18;border-color:var(--ui-line-strong)}
.tab-button{color:#c5b28d;font-family:var(--ui-title-font);letter-spacing:.08em}
.tab-button.is-active{background:linear-gradient(#79603d,#493725);color:#fff0cb;box-shadow:inset 0 1px #fff3}
.tab-content{color:#e7d9bb}
.panel-footer{border-color:var(--ui-line);color:#bba984}
.screen-overlay{background:rgba(13,11,9,.78);backdrop-filter:blur(3px)}
.start-panel,.modal-panel,.people-panel,.event-panel{border:4px double #9d7d4b;border-radius:4px;background:radial-gradient(ellipse at 50% 0%,#fff7df55,transparent 55%),repeating-linear-gradient(0deg,#72512608 0 1px,transparent 1px 5px),linear-gradient(145deg,#efe3c8,#d8c6a0);color:var(--ui-paper-text);box-shadow:var(--ui-shadow),inset 0 0 0 4px #fff4d866}
.start-panel h1,.modal-heading h2,.event-panel h2,.command-panel-header h2,.build-header h2{font-family:var(--ui-title-font);font-variant:small-caps;letter-spacing:.06em;color:#3d2d20}
.start-kicker,.command-ribbon{color:#80633f}
.primary-button,.command-policy button,.command-card button,.command-inline button,.command-actions button{border:1px solid #5e2927;border-radius:3px;background:linear-gradient(#8e4540,#762f35);color:#f5e7c9;box-shadow:inset 0 1px #fff4,0 2px 4px #0003}
.primary-button:hover,.command-policy button:hover,.command-card button:hover,.command-inline button:hover,.command-actions button:hover{background:linear-gradient(#a3574c,#84343a);border-color:#b99a59}
.secondary-button,.text-button{border:1px solid #92774e;border-radius:3px;background:linear-gradient(#f0e3c8,#d8c6a0);color:#473523}
.modal-close{border:1px solid #9d7d4b;border-radius:3px;background:#e5d4b1;color:#4b3927}
.command-panel{border:4px double #9d7d4b;border-radius:4px;background:linear-gradient(145deg,#efe3c8,#d8c6a0);color:#3d2d20;box-shadow:var(--ui-shadow)}
.command-panel-header{border:1px solid #a98a52;border-bottom:3px double #9d7d4b;border-radius:2px}
.command-deck{justify-content:flex-start;gap:5px;padding:8px;background:linear-gradient(#4a3a2a,#30271f);border:1px solid #80633f;border-radius:3px}
.command-deck button{min-width:92px;min-height:40px;padding:5px 9px;border:1px solid #92774e;border-radius:3px;background:linear-gradient(#efe3c8,#d8c6a0);color:#463421;box-shadow:inset 0 1px #fff8,0 2px 3px #0003;font:700 9px var(--ui-title-font);letter-spacing:.05em}
.command-deck button:hover,.command-deck button.is-active{transform:translateY(-1px);border-color:#fff0bf;background:linear-gradient(#f6edda,#e1cca0);color:#3b2c1e}
.command-deck svg{width:20px;height:20px;fill:none;stroke:#80633f;stroke-width:1.6}
.command-summary>div,.command-choice,.command-policy,.command-card,.command-resource,.stat-cell,.trade-partner{border:1px solid #b69a68;border-radius:3px;background:linear-gradient(145deg,#f6ecd7,#e3d1ad);color:#4b3927;box-shadow:inset 0 1px #fff7}
.command-summary small,.command-section-title,.command-choice small,.command-policy p,.command-card p,.command-note{color:#806d52}
.command-summary strong,.command-choice strong,.command-policy strong,.command-card strong,.command-resource strong{color:#3d2d20}
.command-section-title{font-family:var(--ui-title-font);letter-spacing:.12em}
.command-meter i{border-radius:2px;background:#c4b18a}
.command-meter i b{border-radius:1px}
.build-panel{border:4px double #9d7d4b;border-radius:4px;background:linear-gradient(145deg,#efe3c8,#d8c6a0);color:#3d2d20;box-shadow:var(--ui-shadow)}
.build-category-tabs{border:1px solid #80633f;border-radius:3px;background:#403326}
.build-category-tabs button{border:1px solid #80633f;border-radius:2px;background:#efe3c8;color:#473523}
.build-category-tabs button.is-active{background:#b99a59;color:#292119}
.build-option{border:2px solid #a18453;border-radius:3px;background:linear-gradient(145deg,#f5ead4,#dfcba5);color:#3d2d20;box-shadow:0 3px 0 #80633f}
.build-option:hover{border-color:#762f35}
.action-toast{border:1px solid #b99a59;border-radius:3px;background:#29251f;color:#efe3c8;box-shadow:var(--ui-shadow)}
@media(max-width:1180px){
 .realm-resource-chip{padding:0 5px}.realm-resource-chip small{display:none}
 .header-actions .control-button{padding:0 7px;font-size:9px}
 .side-panel{flex-basis:310px;min-width:280px}
}
@media(max-width:900px){
 .realm-nav{flex-basis:58px;padding:8px 4px}
 .realm-nav-button{min-height:44px}
 .realm-nav-button span{font-size:6px}
 .realm-resource-strip{gap:3px}
 .realm-resource-chip{min-height:30px}
 .realm-resource-chip strong{font-size:10px}
 .side-panel{flex-basis:285px;min-width:260px}
}
@media(max-width:790px){
 .topbar{gap:7px}
 .realm-resource-strip{order:4;flex-basis:100%;justify-content:center}
 .realm-nav{flex:0 0 auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:4px 6px;border-right:0;border-bottom:1px solid var(--ui-line-strong);box-shadow:0 3px 9px #0006}
 .realm-nav-heading,.realm-nav-spacer{display:none}
 .realm-nav-button{flex:0 0 54px;min-height:44px}
 .game-layout{flex-direction:column}
 .world-stage{min-height:250px}
 .side-panel{flex:0 0 42%;width:100%;min-width:0;max-height:42%;border-left:0;border-top:1px solid var(--ui-line-strong)}
}
@media(max-width:560px){
 .realm-resource-strip{justify-content:space-between}
 .realm-resource-chip{flex:1;justify-content:center}
 .realm-nav-button{flex-basis:48px}
 .side-panel{flex-basis:46%;max-height:46%}
 .command-panel{padding:12px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}


/* Phase 2 — reusable royal UI primitives and contextual action dock. */
.ui-panel{border:1px solid var(--ui-line-strong);border-radius:var(--ui-radius-md);background:linear-gradient(145deg,#302a22,#211e19);box-shadow:inset 0 1px #fff1,0 5px 14px #0005}
.ui-parchment-card{border:1px solid #a98a52;border-radius:var(--ui-radius-sm);background:linear-gradient(145deg,#f4e8d0,#ddc9a2);color:var(--ui-ink);box-shadow:inset 0 1px #fff9,0 3px 8px #0003}
.ui-section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-bottom:1px solid var(--ui-line);font:700 10px var(--ui-title-font);letter-spacing:.12em;color:#e2cea5}
.ui-icon-button{display:inline-grid;place-items:center;min-width:34px;min-height:34px;border:1px solid var(--ui-line-strong);border-radius:3px;background:linear-gradient(#514333,#332a20);color:#ead9b5;cursor:pointer}
.ui-icon-button:hover{border-color:var(--color-antique-gold);background:#69553a}
.ui-icon-button:active{transform:translateY(1px)}
.ui-icon-button[aria-pressed=true],.ui-icon-button.is-selected{border-color:#e1c17d;background:linear-gradient(#b99a59,#80633f);color:#211b14}
[data-tooltip]{position:relative}
[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:30;left:50%;bottom:calc(100% + 8px);width:max-content;max-width:min(260px,70vw);padding:7px 9px;border:1px solid var(--ui-line-strong);border-radius:3px;background:#171512;color:#f0e3c7;font:500 11px/1.4 var(--ui-body-font);letter-spacing:0;white-space:normal;box-shadow:var(--ui-shadow);opacity:0;pointer-events:none;transform:translate(-50%,4px);transition:opacity .12s ease,transform .12s ease}
[data-tooltip]:hover::after,[data-tooltip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.realm-action-dock{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:7px 8px;border-top:1px solid var(--ui-line-strong);border-bottom:1px solid var(--ui-line);background:linear-gradient(180deg,#332b22,#211e19)}
.realm-action-dock button{min-width:0;min-height:31px;padding:4px 3px;border:1px solid #80633f;border-radius:3px;background:linear-gradient(#514333,#332a20);color:#e6d7b8;font:700 8px var(--ui-title-font);letter-spacing:.06em;cursor:pointer}
.realm-action-dock button:hover{border-color:#d1b476;background:linear-gradient(#69553a,#403326);color:#fff0c9}
.realm-action-dock button:active{transform:translateY(1px)}
.save-status{grid-column:1/-1;overflow:hidden;text-align:center;color:#bba984;font:600 8px var(--ui-body-font);letter-spacing:.09em;text-overflow:ellipsis;white-space:nowrap}
.save-status.is-saved{color:#a9c69a}
.save-status.is-error{color:#e0a09a}
.dynasty-root-grid,.dynasty-generation-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.dynasty-tree{display:grid;gap:10px}
.dynasty-generation{position:relative;padding:9px;border:1px solid var(--ui-line);border-radius:3px;background:#17151255}
.dynasty-generation:not(:first-child)::before{content:"";position:absolute;left:50%;bottom:100%;height:11px;border-left:1px solid var(--ui-line-strong)}
.dynasty-generation-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:7px;color:#d9c49a;font:700 9px var(--ui-title-font);letter-spacing:.12em}
.dynasty-generation-heading small{color:#a89572;font:600 8px var(--ui-body-font);letter-spacing:.06em}
.dynasty-person{display:flex;align-items:center;gap:9px;min-width:0;padding:9px;border:1px solid #a98a52;border-radius:3px;background:linear-gradient(145deg,#f4e8d0,#ddc9a2);color:#3d2d20;text-align:left;cursor:pointer;box-shadow:inset 0 1px #fff9,0 2px 5px #0003}
.dynasty-person:hover,.dynasty-person:focus-visible{border-color:#762f35;background:linear-gradient(145deg,#fff0d2,#e8d4aa);transform:translateY(-1px)}
.dynasty-person.is-deceased{filter:saturate(.65)}
.dynasty-person-seal{display:grid;place-items:center;flex:0 0 32px;width:32px;height:38px;border:1px double #9d7d4b;border-radius:45% 45% 4px 4px;background:linear-gradient(145deg,#d8c6a0,#b99a59);color:#403326;font:700 17px var(--ui-title-font)}
.dynasty-person-copy{display:grid;min-width:0;gap:2px}
.dynasty-person-copy strong{overflow:hidden;color:#3d2d20;font:700 12px var(--ui-title-font);text-overflow:ellipsis;white-space:nowrap}
.dynasty-person-copy small{color:#725c3e;font-size:10px}
.dynasty-person-copy em{color:#80633f;font:700 8px var(--ui-body-font);font-style:normal;letter-spacing:.06em}
@media(max-width:790px){.realm-action-dock{grid-template-columns:repeat(5,minmax(0,1fr));padding:6px}.realm-action-dock button{font-size:7px;min-height:34px}.dynasty-root-grid,.dynasty-generation-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){[data-tooltip]::after,.dynasty-person{transition:none}}


/* Phase 3 — data-backed building register and economy ledger. */
.ledger-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;padding:8px;border:1px solid var(--ui-line);border-radius:3px;background:#17151266}
.ledger-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-width:0;padding:7px 8px;border-bottom:1px solid #b99a5926;color:#cdbd9e;font-size:11px}
.ledger-row strong{color:#f0e3c7;font-variant-numeric:tabular-nums;text-align:right}
.command-resource strong.is-positive{color:#a8c991}
.command-resource strong.is-negative{color:#df9991}
.building-type-summary{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.building-type-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 8px;border:1px solid var(--ui-line);border-radius:2px;background:#17151266;color:#d9c49a;font:600 9px var(--ui-body-font)}
.building-type-chip strong{color:#f0e3c7}
.building-search-label{display:block;margin:12px 0 5px;color:#cdbd9e;font:700 9px var(--ui-title-font);letter-spacing:.1em}
.building-search{width:100%;min-height:34px;padding:7px 9px;border:1px solid var(--ui-line-strong);border-radius:3px;background:#171512;color:#f0e3c7;font:12px var(--ui-body-font)}
.building-search:focus-visible{outline:2px solid #d1b476;outline-offset:2px}
.building-register{display:grid;gap:6px;margin-top:9px}
.building-record{overflow:hidden;border:1px solid var(--ui-line);border-radius:3px;background:linear-gradient(145deg,#302a22,#211e19)}
.building-record.is-filtered{display:none}
.building-record>summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 11px;color:#ead9b5;cursor:pointer;list-style:none}
.building-record>summary::-webkit-details-marker{display:none}
.building-record>summary::after{content:"+";margin-left:4px;color:#d1b476;font:700 17px var(--ui-title-font)}
.building-record[open]>summary::after{content:"−"}
.building-record>summary:hover{background:#b99a5912}
.building-record-title{display:grid;min-width:0;gap:3px}
.building-record-title strong{overflow:hidden;color:#f0e3c7;font:700 12px var(--ui-title-font);text-overflow:ellipsis;white-space:nowrap}
.building-record-title small,.building-record-status small{color:#a89572;font-size:9px}
.building-record-status{display:grid;gap:2px;text-align:right}
.building-record-status b{color:#d9c49a;font:700 12px var(--ui-title-font)}
.building-record-details{padding:10px;border-top:1px solid var(--ui-line);background:#17151255}
.building-record-details>p:first-child{margin:0 0 9px;color:#d6c7a8;font-size:11px;line-height:1.5}
.building-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.building-detail-grid>span{display:grid;gap:4px;min-width:0;padding:7px;border:1px solid #b99a5930;border-radius:2px;color:#a89572;font-size:9px}
.building-detail-grid strong{overflow-wrap:anywhere;color:#ead9b5;font-size:10px;font-weight:600}
@media(max-width:790px){.ledger-grid,.building-detail-grid{grid-template-columns:1fr}.building-record>summary{padding:8px}.building-type-summary{gap:4px}}


/* Phase 3 — creature dossiers and searchable royal chronicle. */
.creature-record-list,.chronicle-list{display:grid;gap:7px;margin-top:8px}
.creature-record{overflow:hidden;border:1px solid var(--ui-line);border-radius:3px;background:linear-gradient(145deg,#302a22,#211e19)}
.creature-record>summary{display:flex;align-items:center;gap:10px;padding:9px;color:#ead9b5;cursor:pointer;list-style:none}
.creature-record>summary::-webkit-details-marker{display:none}
.creature-record>summary>img{width:46px;height:46px;object-fit:contain;padding:4px;border:1px solid var(--ui-line);border-radius:3px;background:#171512}
.creature-record>summary>span{display:grid;flex:1;min-width:0;gap:3px}
.creature-record>summary>span strong{overflow:hidden;color:#f0e3c7;font:700 13px var(--ui-title-font);text-overflow:ellipsis;white-space:nowrap}
.creature-record>summary>span small{color:#a89572;font-size:10px}
.creature-record>summary>b{color:#d9c49a;font:700 10px var(--ui-title-font);text-align:right}
.creature-record>summary::after{content:"+";color:#d1b476;font:700 17px var(--ui-title-font)}
.creature-record[open]>summary::after{content:"−"}
.creature-record.is-memorial{border-color:#80633f;background:linear-gradient(145deg,#28241f,#1b1916)}
.creature-dossier{padding:10px;border-top:1px solid var(--ui-line);background:#17151255}
.creature-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.creature-stat-grid>span{display:grid;gap:4px;padding:7px;border:1px solid #b99a5930;color:#a89572;font-size:9px}
.creature-stat-grid strong{color:#ead9b5;font-size:11px}
.creature-chip-list{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0}
.creature-chip{padding:5px 8px;border:1px solid var(--ui-line);border-radius:2px;background:#332b22;color:#d9c49a;font-size:9px}
.creature-memory-list{display:grid;gap:6px;margin:8px 0;padding-left:22px;color:#d6c7a8}
.creature-memory-list li{padding-left:3px;font-size:10px}
.creature-memory-list li strong{display:block;color:#d9c49a;font:700 8px var(--ui-title-font);letter-spacing:.08em}
.creature-memory-list li span{display:block;margin-top:2px;line-height:1.45}
.chronicle-filters{display:grid;grid-template-columns:1fr 180px;gap:5px 8px;align-items:center;margin:10px 0}
.chronicle-filters label{color:#cdbd9e;font:700 9px var(--ui-title-font);letter-spacing:.09em}
.chronicle-filters input,.chronicle-filters select{min-width:0;min-height:34px;padding:7px 9px;border:1px solid var(--ui-line-strong);border-radius:3px;background:#171512;color:#f0e3c7;font:11px var(--ui-body-font)}
.chronicle-filters input{grid-column:1/-1}
.chronicle-filters input:focus-visible,.chronicle-filters select:focus-visible{outline:2px solid #d1b476;outline-offset:2px}
.chronicle-entry{padding:9px 11px;border:1px solid var(--ui-line);border-left:3px solid #80633f;border-radius:3px;background:#17151266}
.chronicle-entry.is-filtered{display:none}
.chronicle-entry-meta{display:flex;justify-content:space-between;gap:10px;color:#a89572;font:700 8px var(--ui-title-font);letter-spacing:.08em}
.chronicle-entry-meta strong{color:#d9c49a}
.chronicle-entry p{margin:6px 0 0;color:#e0d3b8;font-size:11px;line-height:1.45}
.active-issue-card{display:grid;gap:7px;padding:11px;border:1px solid #a98a52;border-left:3px solid #762f35;border-radius:3px;background:linear-gradient(145deg,#3b3025,#241e19)}
.active-issue-card h4{margin:0;color:#f0e3c7;font:700 15px var(--ui-title-font)}
.active-issue-card p{margin:0;color:#d6c7a8;font-size:11px;line-height:1.5}
.active-issue-card small{color:#bba984;font-size:9px}
.active-issue-card button{justify-self:start;min-height:32px;padding:6px 12px;border:1px solid #b99a59;border-radius:3px;background:linear-gradient(#80633f,#51402e);color:#fff0c9;font:700 9px var(--ui-title-font);letter-spacing:.08em;cursor:pointer}
.active-issue-card button:hover{background:linear-gradient(#9b7c4b,#69553a)}
@media(max-width:790px){.creature-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.chronicle-filters{grid-template-columns:1fr}.chronicle-filters input{grid-column:auto}.creature-record>summary{gap:7px;padding:7px}.creature-record>summary>img{width:38px;height:38px}}

.command-creature-art{display:block;width:min(150px,55%);max-height:116px;object-fit:contain;margin:0 auto 10px;filter:drop-shadow(0 5px 8px #0008)}

.event-panel-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.event-panel-topline .modal-close{flex:0 0 34px}


/* Phase 4 — original heraldic character portrait system and illustrated registers. */
.person-list-item{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px}
.person-list-portrait{display:block;width:42px;height:52px;object-fit:cover;border:1px solid #9d7d50;border-radius:3px;background:#e8d5aa}
.person-list-copy{display:grid;min-width:0;gap:3px}
.person-list-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dossier-identity{align-items:center}
.dossier-portrait{display:block;width:84px;height:104px;flex:0 0 84px;border:2px double #9b703a;border-radius:4px;background:#e8d5aa;box-shadow:0 3px 9px #4b392733}
.dossier-identity-copy{min-width:0}
.dossier-related-person{display:grid;width:100%;gap:3px;padding:7px 8px;border:1px solid #a4865b66;background:#fff3d455;color:#4b2e1c;text-align:left;cursor:pointer}
.dossier-related-person:hover,.dossier-related-person:focus-visible{border-color:#762f35;background:#ead3a5}
.dossier-related-person strong{color:#4b2e1c;font-size:10px}
.dossier-related-person span{color:#795c3c;font-size:9px}
.dossier-link-list li{padding:0;border:0;background:transparent}
.dynasty-person-portrait{display:block;flex:0 0 42px;width:42px;height:52px;border:1px solid #9d7d50;border-radius:3px;background:#e8d5aa;object-fit:cover}
.building-record>summary{justify-content:flex-start}
.building-record-art{display:block;flex:0 0 42px;width:42px;height:42px;padding:3px;border:1px solid var(--ui-line);border-radius:3px;background:#171512}
.building-record-status{margin-left:auto;flex:0 0 auto}
@media(max-width:720px){
 .people-browser{grid-template-columns:minmax(0,1fr);overflow:auto}
 .people-roster{max-height:34dvh;overflow:auto}
 .people-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
 .person-list-item{grid-template-columns:34px minmax(0,1fr);padding:5px;gap:6px}
 .person-list-portrait{width:34px;height:42px}
 .person-list-meta{font-size:7px}
 .person-dossier{border-left:0;border-top:1px solid #a4865b;padding:8px 2px}
 .dossier-portrait{width:64px;height:80px;flex-basis:64px}
 .dynasty-person-portrait{width:36px;height:45px;flex-basis:36px}
 .building-record-art{width:36px;height:36px;flex-basis:36px}
}
@media(prefers-reduced-motion:reduce){.person-list-item,.dossier-related-person,.dynasty-person-portrait{transition:none}}


/* Phase 5 — modal semantics, focus containment and compact viewport resilience. */
body.ui-modal-open{overflow:hidden}
.screen-overlay[role="dialog"]{overflow-y:auto;overscroll-behavior:contain}
.start-panel,.modal-panel{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;overscroll-behavior:contain}
.screen-overlay[role="dialog"]>.modal-panel{scrollbar-gutter:stable}
[role="dialog"][aria-modal="true"]:focus{outline:none}
@media(max-width:720px){
 .start-panel,.modal-panel{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);padding:12px}
 .command-panel{width:calc(100vw - 48px);max-width:calc(100vw - 48px)}
 .command-deck{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
 .command-deck button{min-width:0;min-height:38px;padding:5px 4px;font-size:8px}
 .command-panel-content{min-height:0}
}
@media(max-height:700px){
 .start-panel{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px);overflow-y:auto}
 .people-panel,.command-panel,.build-panel,.settings-panel{max-height:calc(100vh - 12px);max-height:calc(100dvh - 12px)}
}


/* Phase 2 completion slice — full-width contextual action bar. */
.realm-action-dock-global{
 display:flex;
 flex:0 0 auto;
 align-items:center;
 justify-content:center;
 flex-wrap:wrap;
 gap:7px;
 min-height:50px;
 padding:7px 16px;
 border-top:2px solid var(--ui-line-strong);
 border-bottom:0;
 background:linear-gradient(180deg,#403326,#211e19);
 box-shadow:0 -4px 14px #0006;
}
.realm-action-dock-global button{
 flex:0 1 132px;
 min-width:78px;
 min-height:34px;
 padding:6px 12px;
 border:1px solid #a98a52;
 border-radius:3px;
 background:linear-gradient(#5b4934,#332a20);
 color:#f0e3c7;
 font:700 9px var(--ui-title-font);
 letter-spacing:.09em;
}
.realm-action-dock-global button:hover{border-color:#f0d99f;background:linear-gradient(#80633f,#493725);color:#fff3d3}
.realm-action-dock-global button:focus-visible{outline:2px solid #f0d99f;outline-offset:2px}
.realm-action-dock-global .save-status{
 flex:1 1 180px;
 min-width:120px;
 text-align:right;
}
@media(max-width:560px){
 .realm-action-dock-global{justify-content:stretch;gap:5px;padding:6px 7px}
 .realm-action-dock-global button{flex:1 1 calc(33.333% - 5px);min-width:0;min-height:32px;font-size:8px}
 .realm-action-dock-global .save-status{flex:1 1 100%;text-align:center}
}

/* Phase 4 — restrained royal title-screen art treatment. */
.start-hero-art{display:block;width:100%;height:176px;margin:10px auto 15px;object-fit:cover;object-position:center;border:1px solid #9d7d4b;border-radius:3px;box-shadow:0 5px 14px #241c1433}