:root {
  color-scheme:dark;
  --ink:#e8ecde;
  --muted:#9caea4;
  --gold:#debd75;
  --line:#465348;
  --panel:rgba(17,28,26,.96);
  font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;
  font-size:14px
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:#15251e;
  color:var(--ink);
  overflow:hidden
}
button,select {
  font:inherit;
  color:inherit
}
button {
  cursor:pointer;
  border:1px solid #536052;
  background:#24382f;
  border-radius:4px;
  transition:background .16s,border-color .16s
}
button:hover {
  background:#3a4c3a;
  border-color:#d3b16f
}
button:focus-visible,select:focus-visible,summary:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:3px
}
button:disabled {
  opacity:.4;
  cursor:not-allowed
}
button:active {
  transform:translateY(1px)
}
button[hidden],[hidden] {
  display:none!important
}
#game,#viewport {
  position:fixed;
  inset:0
}
#viewport canvas {
  width:100%;
  height:100%;
  display:block;
  touch-action:none
}
#world-labels {
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden
}
.hp-bar {
  position:absolute;
  left:0;
  top:0;
  width:38px;
  height:5px;
  background:#121d1ad9;
  border:1px solid #0c1412;
  transform:translate(-50%,-50%)
}
.hp-bar i {
  height:100%;
  display:block;
  background:#62b9d5
}
.hp-bar.enemy i {
  background:#ef826c
}
.hp-bar.building {
  width:65px
}
.topbar {
  position:absolute;
  top:0;
  left:0;
  right:0;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 24px;
  background:linear-gradient(#14241f 75%,#14241ff2);
  border-bottom:1px solid #778361;
  box-shadow:0 5px 30px #0003
}
.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
  min-width:195px
}
.crest {
  font-family:Georgia,serif;
  font-size:42px;
  color:var(--gold);
  line-height:1
}
.brand b {
  font-size:19px;
  letter-spacing:2px
}
.brand small {
  display:block;
  font-family:Georgia,serif;
  font-size:10px;
  letter-spacing:2.4px;
  margin-top:4px;
  color:var(--gold)
}
.resources {
  display:flex;
  gap:34px
}
.resources>div {
  display:flex;
  align-items:center;
  gap:12px;
  min-width:83px
}
.resources small {
  display:block;
  font-size:12px;
  color:#aeb6a5;
  margin-bottom:2px
}
.resources strong {
  font-family:Georgia,"Times New Roman",serif;
  font-size:25px;
  font-weight:500;
  font-variant-numeric:tabular-nums
}
.res {
  font-size:30px;
  font-style:normal;
  font-family:Georgia,serif
}
.food {
  color:#e7bb83
}
.wood {
  color:#a6be7d
}
.gold {
  color:#efc665
}
.pop {
  color:#acbdd0
}
.time-tools {
  display:flex;
  align-items:center;
  gap:8px
}
.time-tools button {
  width:35px;
  height:34px;
  background:transparent
}
.clock {
  text-align:right;
  margin-right:12px;
  min-width:82px
}
.clock b {
  display:block;
  font-weight:400;
  font-size:13px;
  color:var(--gold)
}
.clock span {
  font-size:13px;
  font-variant-numeric:tabular-nums;
  letter-spacing:2px;
  line-height:1.8
}
.mission {
  position:absolute;
  top:106px;
  left:25px;
  padding:18px 20px;
  background:linear-gradient(100deg,#15261ee8,#15261ed0);
  border:1px solid #94a27c55;
  border-left:2px solid var(--gold);
  border-radius:2px;
  max-width:375px;
  box-shadow:0 6px 22px #0a150f33
}
.eyebrow {
  font-size:11px;
  letter-spacing:3px;
  color:var(--gold)
}
.mission h1 {
  font-family:Georgia,"Songti SC",SimSun,serif;
  font-size:21px;
  font-weight:500;
  margin:9px 0 12px
}
.mission p {
  font-size:14px;
  color:#d7decb;
  margin:8px 0 15px
}
.objective-mark {
  color:var(--gold);
  margin-right:8px
}
.factions {
  display:flex;
  gap:20px;
  font-size:12px;
  color:#aebba8
}
.factions i {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  margin-right:3px
}
.blue-dot {
  background:#6db9ec
}
.red-dot {
  background:#e08268
}
.mission button {
  font-size:12px;
  margin-top:15px;
  padding:7px 9px;
  background:#0e201b99;
  border-color:#58685080
}
.mission b {
  margin:0 6px;
  color:var(--gold)
}
kbd {
  font:11px system-ui;
  color:#b5bfaa;
  border:1px solid #6d7d6555;
  border-radius:2px;
  padding:0 4px;
  margin-left:8px
}
.camera-tools {
  position:absolute;
  right:24px;
  top:105px;
  display:flex;
  flex-direction:column;
  gap:5px
}
.camera-tools button {
  height:36px;
  width:36px;
  background:#172a24e8;
  font-size:22px;
  color:#dce2ce
}
.command-dock {
  position:absolute;
  left:20px;
  right:20px;
  bottom:18px;
  display:grid;
  grid-template-columns:300px minmax(280px,1fr) 240px;
  gap:10px;
  height:224px;
  filter:drop-shadow(0 5px 14px #0005)
}
.command-dock section {
  background:var(--panel);
  border:1px solid #5f7258;
  border-top:2px solid #af9e65;
  border-radius:4px;
  padding:12px 14px;
  min-width:0
}
.panel-caption {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#a6b69e;
  letter-spacing:.7px;
  height:17px;
  margin-bottom:14px
}
.panel-caption>span:first-child {
  color:var(--gold)
}
.selection-body {
  display:flex;
  gap:15px
}
.selection-copy {
  flex:1;
  min-width:0
}
.selection-copy h2 {
  font-size:18px;
  font-weight:500;
  margin:1px 0 6px
}
.selection-copy #selection-detail {
  font-size:12px;
  color:#bbc4b3;
  line-height:1.6;
  min-height:37px
}
.selection-copy #selection-status {
  font-size:11px;
  color:#96a68e;
  margin-top:6px
}
#portrait {
  height:84px;
  width:66px;
  flex:none;
  background:radial-gradient(ellipse at bottom,#54755b,#233b31);
  border:1px solid #7b8864;
  display:grid;
  place-items:center;
  font:46px Georgia;
  color:var(--gold);
  box-shadow:inset 0 0 25px #030c063d
}
.health-track {
  height:4px;
  background:#53614a;
  margin-top:7px
}
.health-track i {
  display:block;
  height:100%;
  width:100%;
  background:#9cbb75
}
#selected-units {
  display:flex;
  gap:4px;
  margin-top:15px;
  flex-wrap:wrap
}
#selected-units button {
  font-size:18px;
  height:32px;
  min-width:32px
}
.actions-panel {
  display:flex;
  flex-direction:column
}
.actions-panel .panel-caption {
  flex:none
}
#actions {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  align-content:flex-start
}
.action {
  min-width:68px;
  min-height:88px;
  position:relative;
  padding:7px 8px 6px;
  background:linear-gradient(#2b4237,#20372f);
  border-color:#576d53;
  flex:1;
  max-width:104px;
  text-align:center
}
.action .action-icon {
  display:block;
  font-family:Georgia,serif;
  font-size:30px;
  line-height:34px;
  color:#e0c48a
}
.action .action-name {
  font-size:12px;
  display:block;
  white-space:nowrap;
  margin-top:3px
}
.action small {
  display:block;
  font-size:10px;
  color:#bdc6b3;
  margin-top:5px;
  white-space:nowrap
}
.action:hover {
  background:#425340
}
.action.active {
  outline:2px solid var(--gold)
}
#queue {
  display:flex;
  gap:5px;
  align-items:center;
  margin-top:auto;
  padding-top:8px;
  min-height:28px;
  font-size:12px;
  color:var(--muted)
}
.queue-unit {
  height:29px;
  min-width:45px;
  position:relative;
  overflow:hidden;
  font-size:14px;
  background:#20362c
}
.queue-unit i {
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  background:var(--gold)
}
.minimap-panel {
  padding:10px!important
}
.minimap-panel .panel-caption {
  margin-bottom:8px
}
.minimap-panel button {
  padding:2px 6px;
  font-size:11px;
  background:transparent;
  border:0
}
#minimap {
  display:block;
  width:100%;
  height:166px;
  border:1px solid #6d825d;
  cursor:crosshair;
  background:#314533;
  touch-action:none
}
#command-hint {
  position:absolute;
  bottom:253px;
  left:50%;
  transform:translateX(-50%);
  background:#13231dbf;
  border:1px solid #82926a5c;
  padding:7px 14px;
  border-radius:3px;
  color:#d3dcc6;
  font-size:12px;
  white-space:nowrap;
  pointer-events:none
}
.mode-active #command-hint {
  background:#655829;
  color:#fff3cb;
  border-color:#e5c56f
}
#notification {
  position:absolute;
  left:50%;
  top:96px;
  transform:translateX(-50%);
  background:#142a21ee;
  border:1px solid #a6bd855c;
  padding:11px 20px;
  border-radius:4px;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
  max-width:440px;
  text-align:center;
  font-size:14px
}
#notification.show {
  opacity:1
}
#notification.warning {
  border-color:#d09564;
  color:#f4d49d
}
#selection-box {
  position:absolute;
  pointer-events:none;
  border:1px solid #d9ecad;
  background:#cce69b1a;
  display:none
}
#tooltip {
  position:fixed;
  z-index:90;
  background:#14221ffa;
  border:1px solid #b7a772;
  box-shadow:0 8px 28px #0004;
  padding:12px 15px;
  width:270px;
  pointer-events:none;
  display:none;
  font-size:13px;
  line-height:1.7
}
#tooltip b {
  display:block;
  color:var(--gold);
  font-weight:500;
  margin-bottom:3px
}
.modal-backdrop {
  position:fixed;
  inset:0;
  background:#08150e62;
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:50;
  padding:20px
}
.modal-card {
  position:relative;
  width:480px;
  max-height:calc(100dvh - 40px);
  overflow:auto;
  padding:30px 40px 20px;
  text-align:center;
  background:linear-gradient(150deg,#253a30,#111f1c 70%);
  border:1px solid #c4b178;
  box-shadow:0 30px 110px #020c08c9,inset 0 0 0 6px #b3a16b12;
  border-radius:5px
}
.modal-ornament {
  font-family:Georgia,serif;
  font-size:55px;
  line-height:1.1;
  color:var(--gold);
  margin-bottom:13px
}
.modal-card h2 {
  font-family:"Songti SC",SimSun,Georgia,serif;
  font-size:40px;
  letter-spacing:5px;
  font-weight:500;
  margin:11px 0 14px
}
.modal-intro {
  font-size:14px;
  color:#bec9b6;
  line-height:1.85;
  margin-bottom:22px
}
.scenario {
  display:flex;
  justify-content:space-between;
  padding:14px 0;
  border-top:1px solid #81907344;
  border-bottom:1px solid #81907344;
  font-size:12px;
  color:var(--gold)
}
.scenario span+span {
  color:#aab8a0
}
.difficulty-picker {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  margin:19px 0
}
.difficulty-picker select {
  background:#172921;
  border:1px solid #627258;
  border-radius:3px;
  padding:8px;
  font-size:12px
}
.primary {
  width:100%;
  padding:13px 18px;
  background:#d8b76e;
  color:#203024;
  border-color:#e8ce92;
  font-weight:600;
  font-size:15px
}
.primary:hover {
  background:#eed496
}
.primary span {
  float:right
}
.text-button {
  border:0;
  background:none;
  padding:12px;
  color:#c8d2ba;
  font-size:12px
}
.text-button:hover {
  background:none;
  color:#f1d695
}
.prototype-note {
  font-size:11px;
  color:#7f957f;
  margin:18px 0 0
}
details {
  border-top:1px solid #82907244;
  margin-top:8px;
  text-align:left
}
summary {
  cursor:pointer;
  text-align:center;
  padding-top:14px;
  font-size:12px;
  color:#bdc9ae
}
.guide {
  font-size:12px;
  line-height:1.8;
  color:#aebba4
}
.guide b {
  color:#dfc790;
  font-weight:500
}
.menu-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px 0
}
.menu-grid button {
  padding:11px
}
.menu-grid .primary {
  grid-column:span 2
}
.menu-grid #restart {
  color:#e1b899
}
#error-panel {
  position:fixed;
  inset:25%;
  z-index:100;
  background:#1a2e25;
  border:1px solid #ddbd7b;
  padding:32px;
  text-align:center
}
#error-panel button {
  padding:12px
}
.results {
  display:flex;
  justify-content:center;
  gap:30px;
  margin:22px 0;
  color:var(--gold)
}
.results b {
  display:block;
  font-size:27px
}
.results small {
  color:var(--muted)
}
@media(min-width:1600px) {
  .command-dock {
    grid-template-columns:340px minmax(280px,1fr) 260px;
    left:26px;
    right:26px
  }
  .action {
    min-width:82px
  }
  .resources {
    gap:50px
  }
  .mission {
    top:110px
  }
}
@media(max-width:1100px) {
  .topbar {
    gap:10px;
    padding:10px 15px
  }
  .brand {
    min-width:155px;
    gap:6px
  }
  .brand b {
    font-size:16px
  }
  .brand small {
    font-size:8px
  }
  .crest {
    font-size:35px
  }
  .resources {
    gap:14px
  }
  .resources>div {
    min-width:67px;
    gap:7px
  }
  .resources strong {
    font-size:22px
  }
  .res {
    font-size:25px
  }
  .clock {
    display:none
  }
  .command-dock {
    grid-template-columns:240px minmax(220px,1fr) 196px;
    left:12px;
    right:12px;
    height:218px;
    bottom:12px;
    gap:7px
  }
  .command-dock section {
    padding:10px
  }
  .action {
    min-width:53px;
    max-width:90px;
    min-height:80px;
    padding:5px
  }
  .action small {
    font-size:9px
  }
  #portrait {
    width:48px;
    height:74px;
    font-size:36px
  }
  .selection-body {
    gap:9px
  }
  .selection-copy h2 {
    font-size:16px
  }
  .mission {
    max-width:340px;
    padding:13px 15px;
    left:16px
  }
  .mission h1 {
    font-size:18px
  }
  #command-hint {
    bottom:240px
  }
}
@media(max-width:760px) {
  .topbar {
    height:60px;
    min-height:60px;
    padding:7px 10px;
    gap:6px
  }
  .brand {
    min-width:auto
  }
  .brand>span+span {
    display:none
  }
  .crest {
    font-size:33px
  }
  .resources {
    gap:12px;
    flex:1;
    justify-content:center
  }
  .resources>div {
    gap:4px;
    min-width:auto
  }
  .resources small {
    font-size:10px
  }
  .resources strong {
    font-size:18px
  }
  .res {
    font-size:21px
  }
  .time-tools {
    gap:3px
  }
  .time-tools button {
    width:29px;
    height:31px
  }
  .time-tools #pause {
    display:none
  }
  .mission {
    top:74px;
    left:10px;
    max-width:285px;
    padding:10px 12px
  }
  .mission h1 {
    font-size:16px;
    margin:6px 0
  }
  .mission p {
    font-size:12px;
    margin:8px 0
  }
  .mission .factions {
    display:none
  }
  .mission .eyebrow {
    font-size:10px
  }
  .mission button {
    margin-top:3px
  }
  .camera-tools {
    right:10px;
    top:75px
  }
  .camera-tools button {
    width:32px;
    height:32px
  }
  .command-dock {
    left:7px;
    right:7px;
    bottom:7px;
    grid-template-columns:1fr 142px;
    grid-template-rows:83px 107px;
    height:197px;
    gap:6px
  }
  .selection-panel {
    grid-column:1;
    grid-row:1
  }
  .selection-panel .panel-caption,.health-track,#selected-units,#selection-status {
    display:none
  }
  .selection-body {
    height:100%;
    align-items:center
  }
  #portrait {
    height:55px;
    width:42px;
    font-size:29px
  }
  .selection-copy h2 {
    font-size:15px
  }
  .selection-copy #selection-detail {
    font-size:11px;
    min-height:0
  }
  .actions-panel {
    grid-column:1 / 3;
    grid-row:2;
    padding:6px!important
  }
  .actions-panel .panel-caption {
    display:none
  }
  #actions {
    gap:4px;
    flex-wrap:nowrap;
    overflow-x:auto
  }
  .action {
    min-height:68px;
    min-width:60px;
    max-width:96px;
    padding:3px
  }
  .action .action-icon {
    font-size:22px;
    line-height:25px
  }
  .action .action-name {
    font-size:11px
  }
  .action small {
    font-size:9px;
    margin-top:3px
  }
  #queue {
    padding-top:3px;
    min-height:14px;
    font-size:10px
  }
  .queue-unit {
    height:19px
  }
  .minimap-panel {
    grid-column:2;
    grid-row:1;
    padding:4px!important
  }
  .minimap-panel .panel-caption {
    display:none
  }
  #minimap {
    height:73px
  }
  #command-hint {
    font-size:10px;
    bottom:213px;
    padding:5px 7px;
    max-width:95%;
    white-space:normal;
    text-align:center
  }
  .modal-card {
    width:440px;
    padding:20px 24px 18px
  }
  .modal-card h2 {
    font-size:32px
  }
  .modal-ornament {
    font-size:42px
  }
  .modal-intro {
    font-size:13px;
    margin-bottom:14px
  }
  .scenario {
    font-size:10px
  }
  .difficulty-picker {
    font-size:12px
  }
  .difficulty-picker select {
    font-size:11px
  }
  .modal-card .eyebrow {
    font-size:10px
  }
  #notification {
    top:66px;
    max-width:85%;
    font-size:12px;
    z-index:12
  }
  #tooltip {
    max-width:calc(100vw - 24px);
    font-size:12px
  }
}
@media(max-height:650px) and (min-width:761px) {
  .mission {
    padding:10px 15px
  }
  .mission h1 {
    font-size:17px
  }
  .mission .factions {
    display:none
  }
  .mission button {
    margin-top:2px
  }
  .command-dock {
    height:190px;
    bottom:10px
  }
  #minimap {
    height:135px
  }
  .action {
    min-height:75px
  }
  #command-hint {
    bottom:211px
  }
  .modal-card {
    padding:20px 30px
  }
  .modal-ornament {
    font-size:32px;
    margin-bottom:7px
  }
  .modal-card h2 {
    font-size:30px;
    margin:8px 0
  }
  .modal-intro {
    margin-bottom:12px
  }
  .prototype-note {
    margin-top:10px
  }
}
#notification {
  z-index:60
}

/* VII: compact workforce shortcuts and readable multi-kingdom status. */
.worker-shortcuts{display:flex;gap:6px;align-items:stretch;margin-top:10px}.worker-shortcuts #idle{flex:1;margin:0}.worker-shortcuts #smart-gather{padding:8px;border:1px solid #53644e;border-radius:5px;background:#263a33;color:#e6eddd;font-size:13px;cursor:pointer}.worker-shortcuts #smart-gather[aria-pressed="true"]{background:#365e45;border-color:#9bc885}.kingdom-list{margin-top:10px;font-size:13px;color:#c8d5c5}.kingdom-list summary{cursor:pointer}.kingdom-list p{line-height:1.8;margin-top:6px}.coin-change{font-size:12px;color:#d7c28d;margin:5px 0}.mode-note{font-size:13px;line-height:1.55;color:#adbdae;margin:8px 0 12px}.modal-card{max-height:92dvh;overflow-y:auto}
/* V16.6: the victory action remains distinct from surrender on both editions. */
.victory-settlement #return-home{grid-column:1 / -1;border-color:#dbbb6e;background:linear-gradient(135deg,#384832,#203c2d);color:#ffe1a0;font-weight:700;min-height:48px;}
.victory-settlement #resume{border-color:#687962;background:#172a22;}

/* Selection summary remains compact; detail text lives only in the tooltip. */
.selection-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}