/* WARWORLD — medieval / early-renaissance interface. Offline, no external assets. */
:root {
  --ink: #241f17;
  --ink-soft: #4c4233;
  --ink-faint: #756b58;
  --parchment: #e8ddc4;
  --parchment-2: #dbcdaa;
  --parchment-3: #cbb993;
  --paper-white: #f3ebd7;
  --gold: #b89a5c;
  --gold-soft: #d0b579;
  --gold-bright: #ead391;
  --gold-dark: #7e6537;
  --oxblood: #6f302c;
  --oxblood-bright: #8f443b;
  --forest: #243329;
  --forest-deep: #151e18;
  --forest-mid: #2f4034;
  --moss: #657e56;
  --steel: #7b8587;
  --line: rgba(91, 72, 42, 0.3);
  --shadow: rgba(8, 10, 8, 0.55);
  --font-title: "Palatino Linotype", "Book Antiqua", "STKaiti", "KaiTi", "STSong", "SimSun", Georgia, serif;
  --font-ui: "Palatino Linotype", "Book Antiqua", "STKaiti", "KaiTi", "STSong", "SimSun", Georgia, serif;
  --font-small: "Palatino Linotype", "Book Antiqua", "SimSun", Georgia, serif;
  --top-h: 5.75rem;
  --hud-pad: 0.875rem;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--forest-deep);
  color: var(--parchment);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { user-select: none; }
button, input, select, textarea { font-family: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 0.0625rem solid var(--gold-bright); outline-offset: 0.125rem; }
svg { width: 1em; height: 1em; fill: currentColor; }
.hidden { display: none !important; }
.muted { color: var(--ink-faint); font-weight: normal; }
.sep { opacity: .45; margin: 0 .25em; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: rgba(170, 136, 75, .35); color: var(--paper-white); }

#world {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background: #1a292b;
  z-index: 0;
}
#game-shell {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
}
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud > * { pointer-events: auto; }

/* Scrollbars */
::-webkit-scrollbar { width: 0.625rem; height: 0.625rem; }
::-webkit-scrollbar-track { background: rgba(34, 28, 19, .12); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #8e7649, #5e4b2e); border: 0.125rem solid transparent; background-clip: padding-box; border-radius: 0.5rem; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #b5975c, #735a38); border: 0.125rem solid transparent; background-clip: padding-box; }

/* =========================================================
   Common ornate elements
   ========================================================= */
.parchment {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 16% 8%, rgba(255, 248, 225, .7), transparent 42%),
    radial-gradient(ellipse at 88% 92%, rgba(137, 109, 67, .12), transparent 50%),
    repeating-linear-gradient(93deg, rgba(101, 80, 47, .026) 0, rgba(101, 80, 47, .026) 0.0625rem, transparent 0.0625rem, transparent 0.25rem),
    linear-gradient(115deg, #e9ddc3 0%, #e4d6b8 46%, #dccdaa 100%);
  border: 0.0625rem solid #7f673c;
  box-shadow:
    inset 0 0 0 0.1875rem #d8c69e,
    inset 0 0 0 0.25rem rgba(78, 58, 28, .65),
    inset 0 0 3.75rem rgba(94, 69, 32, .17),
    0 1.125rem 3.125rem rgba(0, 0, 0, .45);
}
.parchment::before, .parchment::after {
  content: "";
  position: absolute;
  width: 1.375rem; height: 1.375rem;
  pointer-events: none;
  border-color: rgba(99, 76, 42, .65);
}
.parchment::before { top: 0.4375rem; left: 0.4375rem; border-top: 0.0625rem solid; border-left: 0.0625rem solid; }
.parchment::after { right: 0.4375rem; bottom: 0.4375rem; border-right: 0.0625rem solid; border-bottom: 0.0625rem solid; }

.royal-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65em;
  min-height: 2.875rem;
  padding: .65em 1.65em;
  color: #e7d7ab;
  font-size: 0.9375rem;
  letter-spacing: .14em;
  border: 0.0625rem solid rgba(202, 176, 112, .55);
  background:
    linear-gradient(180deg, rgba(240, 222, 169, .12), transparent 34%),
    linear-gradient(180deg, #344335 0%, #263329 58%, #1a231d 100%);
  box-shadow:
    inset 0 0.0625rem 0 rgba(255, 238, 188, .14),
    inset 0 0 0 0.1875rem rgba(15, 20, 16, .75),
    inset 0 0 0 0.25rem rgba(183, 155, 92, .17),
    0 0.375rem 1.125rem rgba(0, 0, 0, .35);
  cursor: pointer;
  transition: color .2s, border-color .2s, transform .16s, box-shadow .2s, background .2s;
  text-shadow: 0 0.0625rem 0.125rem #000;
}
.royal-btn::before, .royal-btn::after {
  content: "";
  position: absolute;
  top: 50%; width: 0.625rem; height: 0.625rem;
  border: 0.0625rem solid rgba(205, 177, 111, .55);
  transform: translateY(-50%) rotate(45deg);
  background: #1b241c;
  pointer-events: none;
}
.royal-btn::before { left: -0.3125rem; }
.royal-btn::after { right: -0.3125rem; }
.royal-btn:hover {
  color: #fff1c7;
  border-color: rgba(228, 203, 142, .9);
  transform: translateY(-0.0625rem);
  box-shadow:
    inset 0 0.0625rem 0 rgba(255, 245, 200, .2),
    inset 0 0 0 0.1875rem rgba(15, 20, 16, .75),
    inset 0 0 0 0.25rem rgba(205, 176, 107, .3),
    0 0.5625rem 1.625rem rgba(0, 0, 0, .45),
    0 0 1.125rem rgba(190, 158, 90, .09);
}
.royal-btn:active { transform: translateY(0); }
.royal-btn.primary {
  color: #241c10;
  border-color: rgba(211, 180, 109, .9);
  background:
    linear-gradient(180deg, rgba(255, 250, 224, .35), transparent 34%),
    linear-gradient(180deg, #d5bd82 0%, #bb9e5f 54%, #95793f 100%);
  text-shadow: 0 0.0625rem 0 rgba(255, 250, 220, .45);
  box-shadow:
    inset 0 0.0625rem 0 rgba(255, 248, 210, .6),
    inset 0 0 0 0.1875rem rgba(87, 65, 31, .22),
    0 0.375rem 1.5rem rgba(0, 0, 0, .4);
}
.royal-btn.primary::before, .royal-btn.primary::after { background: #b79858; border-color: rgba(75, 55, 25, .6); }
.royal-btn.primary:hover {
  color: #160f08;
  background:
    linear-gradient(180deg, rgba(255, 252, 233, .45), transparent 34%),
    linear-gradient(180deg, #e4cd95 0%, #ceb171 54%, #a98a4d 100%);
  box-shadow: inset 0 0.0625rem 0 rgba(255, 248, 210, .7), 0 0.5rem 1.75rem rgba(0, 0, 0, .45), 0 0 1.625rem rgba(218, 186, 113, .22);
}
.royal-btn.ghost { background: transparent; box-shadow: none; border-color: rgba(190, 166, 107, .28); color: var(--gold-soft); }
.royal-btn.ghost::before, .royal-btn.ghost::after { display: none; }
.royal-btn.ghost:hover { background: rgba(210, 184, 118, .07); border-color: var(--gold); }
.royal-btn.slim { min-height: 2.4375rem; padding: .5em 1.25em; font-size: 0.8125rem; }
.royal-btn.wide { min-width: 13.125rem; }
.royal-btn[disabled], .royal-btn.disabled { opacity: .42; pointer-events: none; }
.btn-glyph { color: var(--gold-bright); font-size: .85em; }
.royal-btn.primary .btn-glyph { color: #705329; }

.text-btn {
  background: transparent; border: 0; color: rgba(211, 190, 144, .7);
  font-size: 0.75rem; letter-spacing: .12em; padding: 0.5rem; text-decoration: underline;
  text-underline-offset: 0.25rem; text-decoration-color: rgba(180, 152, 94, .35);
}
.text-btn:hover { color: var(--gold-bright); }

.icon-btn {
  width: 2.375rem; height: 2.375rem;
  display: grid; place-items: center;
  border: 0.0625rem solid rgba(184, 158, 99, .34);
  background: rgba(20, 27, 22, .82);
  color: var(--gold-soft);
  font-size: 1.125rem;
  padding: 0;
  transition: all .18s;
  box-shadow: inset 0 0 0 0.125rem rgba(0, 0, 0, .25);
}
.icon-btn:hover { color: var(--gold-bright); border-color: rgba(222, 194, 129, .7); background: rgba(45, 57, 44, .94); }
.close-btn {
  width: 2.25rem; height: 2.25rem; border: 0.0625rem solid rgba(92, 71, 40, .4);
  background: rgba(94, 72, 42, .08); color: var(--ink-soft);
  display: grid; place-items: center; font-size: 1rem; transition: all .18s;
}
.close-btn:hover { background: var(--oxblood); color: #f3e9d1; border-color: var(--oxblood); }
.mini-btn {
  border: 0.0625rem solid rgba(91, 71, 41, .38);
  background: rgba(96, 73, 42, .09);
  color: var(--ink-soft);
  padding: 0.3125rem 0.625rem;
  font-size: 0.6875rem;
  letter-spacing: .06em;
  transition: all .16s;
}
.mini-btn:hover { background: rgba(100, 76, 44, .18); color: var(--ink); border-color: var(--gold); }
.mini-btn[disabled] { opacity: .4; pointer-events: none; }

.tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 0.0625rem solid rgba(105, 83, 49, .32);
  padding: 0.125rem 0.4375rem;
  font-size: 0.625rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: rgba(120, 95, 56, .07);
  white-space: nowrap;
}
.tag.green { color: #46603c; border-color: rgba(88, 119, 72, .4); background: rgba(103, 137, 82, .09); }
.tag.red { color: var(--oxblood); border-color: rgba(132, 65, 56, .38); background: rgba(140, 66, 54, .08); }
.tag.gold { color: #725b2d; border-color: rgba(158, 128, 67, .45); background: rgba(194, 158, 85, .11); }
.tag.dark { color: #d6c69e; background: rgba(24, 31, 24, .8); border-color: rgba(157, 133, 83, .35); }

/* =========================================================
   Main menu
   ========================================================= */
.screen { position: fixed; inset: 0; z-index: 100; }
.menu-screen { overflow: hidden; background: #111710; }
.menu-scene { position: absolute; inset: 0; overflow: hidden; background: #151c18; }
.scene-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 71% 58%, rgba(223, 185, 110, .28), transparent 34%),
    linear-gradient(180deg, #29342f 0%, #4a5144 24%, #8f805e 50%, #b29a6b 64%, #59604a 80%, #232b23 100%);
}
.scene-sun {
  position: absolute; left: 67%; top: 48%; width: 22vw; height: 22vw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(247, 221, 160, .8) 0%, rgba(234, 201, 138, .35) 23%, rgba(222, 185, 119, 0) 68%);
  filter: blur(0.125rem);
  animation: sunPulse 12s ease-in-out infinite;
}
@keyframes sunPulse { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.scene-cloud {
  position: absolute; height: 11vh; width: 52vw; border-radius: 50%;
  background: radial-gradient(ellipse, rgba(54, 57, 48, .26), transparent 66%);
  filter: blur(1rem); opacity: .8;
}
.cloud-one { top: 19%; left: -13%; animation: cloudDrift 46s linear infinite; }
.cloud-two { top: 29%; right: -22%; height: 14vh; width: 66vw; opacity: .48; animation: cloudDriftBack 62s linear infinite; }
@keyframes cloudDrift { 0% { transform: translateX(-8%); } 100% { transform: translateX(115%); } }
@keyframes cloudDriftBack { 0% { transform: translateX(6%); } 100% { transform: translateX(-65%); } }
.scene-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.castle-group { filter: drop-shadow(0 0.75rem 1.25rem rgba(0, 0, 0, .42)); }
.flag { transform-box: fill-box; transform-origin: left center; animation: flagSway 4.6s ease-in-out infinite; }
.flag-b { animation-delay: -1.2s; animation-duration: 5.4s; }
.flag-c { animation-delay: -2.1s; animation-duration: 3.9s; }
@keyframes flagSway { 0%, 100% { transform: skewY(0deg) scaleX(1); } 35% { transform: skewY(2.5deg) scaleX(.93); } 65% { transform: skewY(-2deg) scaleX(.97); } }
.windows rect { animation: windowFlicker 7s ease-in-out infinite; }
.windows rect:nth-child(2n) { animation-delay: -2s; animation-duration: 9s; }
@keyframes windowFlicker { 0%, 88%, 100% { opacity: .92; } 90% { opacity: .52; } 92% { opacity: .85; } 94% { opacity: .45; } }
.village-lights circle { animation: lightFlicker 8s ease-in-out infinite; }
.village-lights circle:nth-child(2n) { animation-delay: -3s; }
@keyframes lightFlicker { 0%, 80%, 100% { opacity: .5; } 85% { opacity: .1; } 90% { opacity: .65; } }
.scene-mist {
  position: absolute; left: -25%; width: 150%; height: 18vh;
  background: radial-gradient(ellipse, rgba(212, 201, 172, .19), transparent 62%);
  filter: blur(1.125rem);
}
.mist-a { bottom: 18%; animation: mistMove 55s ease-in-out infinite alternate; }
.mist-b { bottom: 5%; height: 11vh; opacity: .6; animation: mistMoveBack 72s ease-in-out infinite alternate; }
@keyframes mistMove { 0% { transform: translateX(-8%); } 100% { transform: translateX(10%); } }
@keyframes mistMoveBack { 0% { transform: translateX(7%); } 100% { transform: translateX(-7%); } }
.scene-vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 13, 10, .9) 0%, rgba(9, 13, 10, .62) 26%, rgba(9, 13, 10, .1) 60%, rgba(9, 13, 10, .36) 100%),
    linear-gradient(0deg, rgba(8, 11, 8, .94) 0%, transparent 34%, transparent 85%, rgba(8, 10, 8, .4) 100%),
    radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0, 0, 0, .4) 100%);
}
.scene-grain {
  position: absolute; inset: 0; opacity: .15; pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0, transparent 0.0625rem, transparent 0.1875rem),
    radial-gradient(circle at 23% 34%, rgba(255, 255, 255, .1) 0 0.0625rem, transparent 0.0625rem),
    radial-gradient(circle at 71% 66%, rgba(0, 0, 0, .12) 0 0.0625rem, transparent 0.0625rem);
  background-size: auto, 0.3125rem 0.4375rem, 0.4375rem 0.5625rem;
  mix-blend-mode: overlay;
}
.scene-embers { position: absolute; inset: 0; pointer-events: none; }
.scene-embers i {
  position: absolute; width: 0.1875rem; height: 0.1875rem; border-radius: 50%;
  background: #e7b45e; box-shadow: 0 0 0.5625rem rgba(231, 175, 78, .8);
  bottom: 12%; opacity: 0;
  animation: emberRise 12s linear infinite;
}
.scene-embers i:nth-child(1) { left: 62%; animation-delay: 0s; }
.scene-embers i:nth-child(2) { left: 71%; animation-delay: -3.2s; animation-duration: 15s; }
.scene-embers i:nth-child(3) { left: 80%; animation-delay: -7.1s; animation-duration: 10s; }
.scene-embers i:nth-child(4) { left: 54%; animation-delay: -4.5s; animation-duration: 16s; }
.scene-embers i:nth-child(5) { left: 88%; animation-delay: -9s; animation-duration: 13s; }
.scene-embers i:nth-child(6) { left: 66%; animation-delay: -6s; animation-duration: 18s; }
.scene-embers i:nth-child(7) { left: 76%; animation-delay: -11s; animation-duration: 14s; }
@keyframes emberRise {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: .8; }
  60% { opacity: .55; }
  100% { transform: translateY(-38vh) translateX(5vw); opacity: 0; }
}
.menu-overlay {
  position: relative; z-index: 2; height: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 4vh 6vw 4vh 7vw;
}
.menu-brand {
  width: min(40rem, 52vw);
  animation: menuReveal 1.1s ease both;
}
@keyframes menuReveal { from { opacity: 0; transform: translateY(1.125rem); } to { opacity: 1; transform: translateY(0); } }
.eyebrow {
  color: #bfa97b; font-size: 0.6875rem; letter-spacing: .28em;
  display: flex; align-items: center; gap: 0.75rem; text-transform: uppercase;
  font-family: var(--font-small);
}
.eyebrow .line { display: inline-block; width: 2.25rem; height: 0.0625rem; background: linear-gradient(90deg, transparent, #b39865); }
.eyebrow .line:last-child { background: linear-gradient(90deg, #b39865, transparent); }
.game-title {
  margin: 1.125rem 0 0;
  font-family: var(--font-title);
  font-size: clamp(4.625rem, 9.6vw, 10rem);
  font-weight: 400;
  line-height: .8;
  letter-spacing: .015em;
  color: #e9d9ad;
  text-shadow: 0 0.125rem 0 #5b4a2d, 0 0.875rem 2.1875rem rgba(0, 0, 0, .55);
  display: flex; align-items: baseline;
}
.game-title span { position: relative; }
.game-title em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 0.075rem rgba(220, 194, 134, .8);
  margin-left: .05em;
  position: relative;
}
.game-title em::after {
  content: ""; position: absolute; left: 4%; right: 2%; bottom: -.07em; height: 0.0625rem;
  background: linear-gradient(90deg, transparent, rgba(218, 188, 119, .65), transparent);
}
.game-title-cn {
  margin-top: 0.875rem;
  font-family: var(--font-title);
  font-size: clamp(1.375rem, 2.6vw, 2.375rem);
  letter-spacing: .55em;
  color: #c9b27c;
  text-indent: .55em;
  text-shadow: 0 0.125rem 0.5rem #000;
}
.title-ornament { display: flex; align-items: center; gap: 0.875rem; width: min(27.5rem, 82%); margin: 1.375rem 0 1rem; color: #a98b51; }
.title-ornament span { flex: 1; height: 0.0625rem; background: linear-gradient(90deg, transparent, rgba(186, 157, 94, .75)); }
.title-ornament span:last-child { background: linear-gradient(90deg, rgba(186, 157, 94, .75), transparent); }
.title-ornament i { font-style: normal; font-size: 0.6875rem; }
.tagline {
  font-size: clamp(1rem, 1.5vw, 1.3125rem);
  color: #ccb98d;
  letter-spacing: .12em;
  margin: 0 0 0.75rem;
  text-shadow: 0 0.125rem 0.5625rem #000;
}
.menu-description {
  max-width: 28.75rem;
  font-size: 0.8125rem;
  line-height: 2;
  letter-spacing: .06em;
  color: rgba(196, 187, 160, .67);
  margin: 0 0 1.75rem;
}
.menu-buttons { display: flex; flex-direction: column; gap: 0.625rem; width: min(22.125rem, 100%); }
.menu-buttons .royal-btn.nowrap { white-space: nowrap; font-size: 0.8125rem; letter-spacing: .055em; }
.menu-buttons .royal-btn.nowrap#btn-new-game { font-size: 0.9375rem; letter-spacing: .18em; }
.menu-buttons .royal-btn.nowrap > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.menu-buttons .royal-btn { justify-content: flex-start; padding-left: 1.35em; letter-spacing: .2em; }
.menu-buttons .royal-btn.primary { justify-content: center; padding-left: 1.65em; }
.menu-row { display: flex; gap: 0.625rem; }
.menu-row .royal-btn { flex: 1; justify-content: center !important; padding-left: 1em !important; letter-spacing: .1em !important; }
.menu-buttons .text-btn { text-align: left; align-self: flex-start; }
.menu-footer {
  margin-top: 1.625rem; display: flex; align-items: center; font-size: 0.625rem;
  letter-spacing: .16em; color: rgba(188, 173, 134, .5); text-transform: uppercase;
}
.menu-aside {
  align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 1.625rem;
  padding-bottom: 1.125rem; animation: menuReveal 1.4s .2s ease both;
}
.menu-quote {
  font-family: var(--font-title);
  color: rgba(222, 207, 170, .7); text-align: right;
  font-size: clamp(0.9375rem, 1.4vw, 1.25rem); line-height: 1.9; letter-spacing: .12em;
  border-right: 0.0625rem solid rgba(176, 149, 92, .45); padding-right: 1.125rem;
  text-shadow: 0 0.125rem 0.625rem #000;
}
.menu-seal {
  width: 4.375rem; height: 4.375rem; border: 0.0625rem solid rgba(205, 175, 109, .55);
  border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 28%, rgba(133, 61, 51, .9), rgba(74, 29, 25, .87));
  color: #dcc18a; font-family: var(--font-title); font-size: 2.125rem;
  box-shadow: 0 0 0 0.25rem rgba(22, 28, 22, .6), 0 0 0 0.3125rem rgba(178, 148, 90, .22), 0 0.3125rem 1.125rem rgba(0, 0, 0, .5);
  transform: rotate(-8deg);
  text-shadow: 0 0.0625rem 0.125rem #2c0f0b;
}

/* =========================================================
   Setup
   ========================================================= */
.setup-screen { background: #171d18; overflow-y: auto; }
.setup-backdrop {
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse at 72% 30%, rgba(179, 148, 88, .17), transparent 36%),
    linear-gradient(160deg, #202a22, #101511 65%);
}
.setup-backdrop::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(90deg, rgba(246, 233, 197, .025) 0.0625rem, transparent 0.0625rem),
    linear-gradient(0deg, rgba(246, 233, 197, .018) 0.0625rem, transparent 0.0625rem);
  background-size: 3.25rem 3.25rem;
  mask-image: radial-gradient(ellipse at center, black, transparent 75%);
}
.setup-backdrop::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 15%, rgba(6, 9, 7, .68) 100%);
}
.setup-wrap {
  position: relative; z-index: 2;
  width: min(70rem, calc(100vw - 3rem));
  margin: 4vh auto;
  color: var(--ink);
  padding: 1.875rem 2.125rem 1.375rem;
  background:
    radial-gradient(ellipse at 14% 3%, rgba(255, 249, 228, .7), transparent 42%),
    repeating-linear-gradient(88deg, rgba(92, 68, 35, .027) 0 0.0625rem, transparent 0.0625rem 0.25rem),
    linear-gradient(112deg, #e9dec5, #ddceac);
  border: 0.0625rem solid #715c35;
  box-shadow: inset 0 0 0 0.25rem #d6c39a, inset 0 0 0 0.3125rem rgba(88, 65, 31, .6), inset 0 0 3.75rem rgba(105, 77, 37, .16), 0 1.75rem 5rem rgba(0, 0, 0, .7);
}
.setup-wrap::before, .setup-wrap::after {
  content: ""; position: absolute; top: 0.875rem; bottom: 0.875rem; width: 0.3125rem;
  background: linear-gradient(180deg, transparent, rgba(115, 89, 48, .35) 20%, rgba(115, 89, 48, .35) 80%, transparent);
}
.setup-wrap::before { left: 0.75rem; border-left: 0.0625rem solid rgba(96, 73, 42, .5); }
.setup-wrap::after { right: 0.75rem; border-right: 0.0625rem solid rgba(96, 73, 42, .5); }
.setup-head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; border-bottom: 0.0625rem solid rgba(93, 71, 39, .3); padding-bottom: 1.25rem; margin-bottom: 1.375rem; }
.setup-head .eyebrow { color: #7d663f; }
.setup-head h2 { font-family: var(--font-title); font-size: 2.5rem; letter-spacing: .16em; font-weight: 400; margin: 0.5rem 0 0.375rem; color: #2e271c; }
.setup-head p { font-size: 0.75rem; color: var(--ink-faint); letter-spacing: .04em; margin: 0; }
.setup-body { display: grid; grid-template-columns: 18.75rem 1fr; gap: 2.25rem; }
.identity-column { border-right: 0.0625rem solid rgba(93, 71, 39, .24); padding-right: 2.125rem; }
.options-column { min-width: 0; }
.section-label { font-size: 0.6875rem; letter-spacing: .18em; color: #6c5837; text-transform: uppercase; margin-bottom: 0.625rem; display: flex; align-items: center; gap: 0.625rem; }
.section-label::after { content: ""; height: 0.0625rem; flex: 1; background: linear-gradient(90deg, rgba(107, 82, 45, .25), transparent); }
.crest-preview {
  position: relative; height: 11.875rem; display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(203, 176, 117, .16), transparent 67%);
  border: 0.0625rem solid rgba(105, 81, 45, .2);
  margin-bottom: 1.125rem;
}
.crest-preview canvas { width: 9.375rem; height: 10.75rem; filter: drop-shadow(0 0.4375rem 0.75rem rgba(61, 43, 21, .35)); }
.crest-preview .mini-btn { position: absolute; right: 0.5625rem; bottom: 0.5625rem; }
.field-label { display: block; font-size: 0.6875rem; color: #6d5838; letter-spacing: .1em; margin-bottom: 0.375rem; }
.name-input-row { display: flex; gap: 0.375rem; }
.name-input-row input, .seed-input {
  flex: 1; min-width: 0;
  color: var(--ink); font-size: 0.875rem; letter-spacing: .05em;
  background: rgba(255, 250, 236, .38);
  border: 0.0625rem solid rgba(103, 79, 44, .36);
  padding: 0.5625rem 0.6875rem;
  border-radius: 0;
}
.name-input-row input::placeholder, .seed-input::placeholder { color: rgba(88, 73, 49, .45); }
.name-input-row input:focus, .seed-input:focus { border-color: #8f7444; background: rgba(255, 251, 239, .65); outline: none; box-shadow: 0 0 0 0.1875rem rgba(171, 139, 78, .1); }
.field-help { font-size: 0.625rem; line-height: 1.75; color: rgba(70, 58, 41, .65); margin: 0.5rem 0 0; letter-spacing: .02em; }
.setup-divider { height: 0.0625rem; margin: 1.25rem 0; background: linear-gradient(90deg, transparent, rgba(105, 80, 44, .28), transparent); }
.world-hint { display: flex; gap: 0.625rem; margin-bottom: 0.875rem; color: #5e4d32; }
.world-hint .hint-icon {
  flex: 0 0 1.6875rem; width: 1.6875rem; height: 1.6875rem; display: grid; place-items: center;
  color: #8a6c39; border: 0.0625rem solid rgba(125, 95, 49, .35); border-radius: 50%; font-size: 0.6875rem;
}
.world-hint strong { display: block; font-size: 0.6875rem; letter-spacing: .08em; margin-bottom: 0.125rem; }
.world-hint p { font-size: 0.625rem; line-height: 1.65; margin: 0; color: rgba(77, 63, 43, .7); }
.setup-group { margin-bottom: 1.375rem; }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.choice-card {
  position: relative; text-align: left; padding: 0.75rem 0.8125rem;
  background: rgba(255, 249, 232, .25);
  border: 0.0625rem solid rgba(98, 73, 39, .25);
  color: #5f4b2d; transition: all .16s;
}
.choice-card strong { display: block; font-family: var(--font-title); font-size: 1.0625rem; letter-spacing: .1em; color: #3d3120; font-weight: 400; }
.choice-card span { display: block; margin-top: 0.25rem; font-size: 0.625rem; letter-spacing: .06em; color: #806b47; }
.choice-card small { display: block; margin-top: 0.3125rem; font-size: 0.5625rem; color: rgba(92, 73, 43, .56); }
.choice-card::after { content: "✓"; position: absolute; top: 0.5rem; right: 0.5625rem; font-size: 0.6875rem; color: #886b37; opacity: 0; }
.choice-card:hover { border-color: rgba(133, 104, 53, .55); background: rgba(255, 250, 239, .55); }
.choice-card.active { background: rgba(117, 88, 45, .12); border-color: #8f7443; box-shadow: inset 0 0 0 0.125rem rgba(183, 153, 89, .18); }
.choice-card.active::after { opacity: 1; }
.difficulty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4375rem; }
.difficulty-card {
  text-align: left; padding: 0.6875rem 0.6875rem 0.625rem;
  border: 0.0625rem solid rgba(98, 73, 39, .23); background: rgba(255, 250, 237, .2);
  color: #5f4b2d; transition: all .16s; position: relative;
}
.diff-mark { display: block; font-size: 0.625rem; color: rgba(108, 86, 47, .55); letter-spacing: .1em; }
.difficulty-card strong { display: block; font-family: var(--font-title); font-weight: 400; font-size: 1rem; letter-spacing: .1em; color: #3c3120; margin: 0.125rem 0; }
.difficulty-card small { font-size: 0.5625rem; display: block; color: rgba(84, 67, 41, .56); line-height: 1.5; }
.difficulty-card:hover { border-color: rgba(133, 104, 53, .5); background: rgba(255, 250, 239, .5); }
.difficulty-card.active { border-color: #8b6f3c; background: rgba(127, 95, 48, .12); box-shadow: inset 0 0 0 0.125rem rgba(172, 143, 81, .16); }
.difficulty-card.active .diff-mark { color: var(--oxblood); }
.setup-row { display: flex; gap: 1.125rem; }
.setup-row .half { flex: 1; }
.range-wrap { display: flex; align-items: center; gap: 0.875rem; }
input[type=range] {
  -webkit-appearance: none; appearance: none; height: 0.1875rem; flex: 1;
  background: linear-gradient(90deg, #8f7442, rgba(123, 97, 53, .2)); outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 0.9375rem; height: 0.9375rem;
  background: #e6d3a6; border: 0.0625rem solid #6d5530; transform: rotate(45deg);
  box-shadow: 0 0.125rem 0.3125rem rgba(58, 41, 19, .35); cursor: pointer;
}
input[type=range]::-moz-range-thumb { width: 0.875rem; height: 0.875rem; background: #e6d3a6; border: 0.0625rem solid #6d5530; border-radius: 0; transform: rotate(45deg); }
.range-value { font-size: 0.625rem; white-space: nowrap; color: #695436; }
.range-value span { font-family: var(--font-title); font-size: 1.1875rem; color: #352b1b; margin-right: 0.125rem; }
.seed-input { width: 100%; padding: 0.5rem 0.625rem; }
.options-bottom { border-top: 0.0625rem solid rgba(101, 77, 42, .2); padding-top: 1rem; }
.toggle-line { display: flex; align-items: center; gap: 0.5625rem; cursor: pointer; color: #55452c; font-size: 0.6875rem; letter-spacing: .03em; }
.toggle-line input { display: none; }
.checkmark { width: 0.9375rem; height: 0.9375rem; border: 0.0625rem solid rgba(100, 77, 42, .5); background: rgba(255, 251, 240, .35); position: relative; }
.toggle-line input:checked + .checkmark::after {
  content: ""; position: absolute; inset: 0.1875rem; background: linear-gradient(135deg, #8d713d, #6d552d);
}
.setup-note { display: flex; gap: 0.4375rem; align-items: center; margin-top: 0.75rem; font-size: 0.625rem; color: rgba(80, 64, 42, .64); }
.setup-note svg { font-size: 0.8125rem; }
.setup-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; border-top: 0.0625rem solid rgba(93, 71, 39, .25); margin-top: 1.375rem; padding-top: 1.125rem; }
.setup-footer .royal-btn.ghost { color: #5e4b2f; border-color: rgba(96, 74, 43, .4); background: rgba(255, 250, 236, .18); }
.setup-footer .royal-btn.ghost:hover { background: rgba(255, 250, 238, .48); color: #2d2417; }
.setup-footer-note { font-size: 0.625rem; letter-spacing: .15em; color: rgba(88, 72, 45, .5); margin-left: auto; margin-right: 0.25rem; }

/* =========================================================
   Loading
   ========================================================= */
.loading-screen {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, #253329, #0d120e 78%);
}
.loading-panel { text-align: center; width: min(26.875rem, 84vw); }
.loading-emblem {
  width: 4.125rem; height: 4.125rem; margin: 0 auto 1.25rem;
  display: grid; place-items: center;
  border: 0.0625rem solid rgba(212, 182, 115, .6); border-radius: 50%;
  color: #e4ce97; font-family: var(--font-title); font-size: 2.125rem;
  box-shadow: 0 0 0 0.3125rem rgba(17, 23, 17, .8), 0 0 0 0.375rem rgba(187, 155, 91, .18), 0 0 2.8125rem rgba(183, 145, 73, .08);
  animation: emblemPulse 3s ease-in-out infinite;
}
@keyframes emblemPulse { 50% { box-shadow: 0 0 0 0.3125rem rgba(17, 23, 17, .8), 0 0 0 0.4375rem rgba(187, 155, 91, .3), 0 0 3.4375rem rgba(183, 145, 73, .16); } }
.loading-panel h3 { font-family: var(--font-title); font-weight: 400; letter-spacing: .28em; font-size: 1.5rem; margin: 0 0 0.625rem; color: #dec99a; }
.loading-panel p { font-size: 0.75rem; color: rgba(202, 190, 157, .56); letter-spacing: .1em; min-height: 1.5em; }
.loading-track { height: 0.125rem; background: rgba(190, 167, 109, .16); margin: 1.5rem 0 0.875rem; overflow: hidden; }
.loading-track i { display: block; height: 100%; width: 5%; background: linear-gradient(90deg, #8d743f, #e0c98f); transition: width .35s ease; box-shadow: 0 0 0.875rem #b99a5e; }
.loading-panel small { font-size: 0.5625rem; letter-spacing: .09em; color: rgba(186, 172, 139, .37); line-height: 1.8; }

/* =========================================================
   Top HUD
   ========================================================= */
.topbar {
  position: absolute; top: var(--hud-pad); left: var(--hud-pad); right: var(--hud-pad);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.625rem; align-items: stretch; height: 4.5rem;
  animation: hudIn .5s ease both;
}
@keyframes hudIn { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: translateY(0); } }
.realm-block {
  display: flex; align-items: center; gap: 0.625rem;
  min-width: 16.75rem; height: 4.5rem; padding: 0.3125rem 1rem 0.3125rem 0.4375rem;
  background:
    linear-gradient(180deg, rgba(45, 58, 46, .95), rgba(18, 26, 20, .94)),
    radial-gradient(ellipse at top left, rgba(203, 172, 109, .1), transparent 60%);
  border: 0.0625rem solid rgba(167, 139, 82, .45);
  box-shadow: inset 0 0 0 0.125rem rgba(7, 10, 7, .5), inset 0 0 0 0.1875rem rgba(155, 128, 75, .14), 0 0.4375rem 1.5rem rgba(0, 0, 0, .35);
  position: relative;
}
.realm-block::after { content: ""; position: absolute; right: 0.375rem; top: 0.4375rem; width: 0.0625rem; height: calc(100% - 0.875rem); background: linear-gradient(transparent, rgba(180, 151, 90, .28), transparent); }
#crest-canvas { width: 3rem; height: 3.4375rem; flex: 0 0 auto; filter: drop-shadow(0 0.1875rem 0.3125rem rgba(0, 0, 0, .5)); }
.realm-text { min-width: 0; overflow: hidden; }
.realm-name { font-family: var(--font-title); font-size: 1.125rem; letter-spacing: .08em; color: #eadcb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0.0625rem 0.1875rem #000; }
.realm-sub { font-size: 0.625rem; color: #a99b78; margin-top: 0.125rem; letter-spacing: .05em; white-space: nowrap; }
.realm-sub #realm-rank { color: #d4bd87; }
.realm-date { margin-top: 0.3125rem; font-size: 0.5625rem; color: rgba(184, 171, 139, .63); letter-spacing: .02em; display: flex; gap: 0.4375rem; }
.realm-date #day-label { color: rgba(205, 190, 155, .4); }
.resource-bar {
  height: 4.5rem; min-width: 0;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0; padding: 0.375rem 0.5rem;
  background: linear-gradient(180deg, rgba(37, 48, 37, .94), rgba(15, 23, 17, .95));
  border: 0.0625rem solid rgba(156, 131, 78, .36);
  box-shadow: inset 0 0 0 0.125rem rgba(4, 8, 5, .38), 0 0.4375rem 1.5rem rgba(0, 0, 0, .3);
  overflow: hidden;
}
.res-group { display: flex; flex-wrap: wrap; height: 100%; align-content: center; flex: 1 1 auto; }
.res-group.ores { flex: 0 1 auto; }
.res-group.refined { flex: 0 1 auto; }
.res-divider { width: 0.0625rem; height: 1.75rem; margin: 0 0.25rem; background: linear-gradient(transparent, rgba(171, 142, 82, .25), transparent); }
.resource-chip {
  display: flex; align-items: center; gap: 0.25rem;
  height: 1.75rem; padding: 0 0.375rem; min-width: 3.625rem;
  cursor: default; position: relative;
  border: 0.0625rem solid transparent;
  transition: background .15s, border-color .15s;
}
.resource-chip:hover { background: rgba(204, 178, 115, .07); border-color: rgba(177, 147, 84, .18); }
.resource-chip .res-svg { flex: 0 0 1.0625rem; width: 1.0625rem; height: 1.0625rem; opacity: .9; filter: drop-shadow(0 0.0625rem 0.0625rem #000); }
.resource-chip .res-value { font-family: var(--font-small); font-size: 0.75rem; letter-spacing: .02em; color: #d9cba8; white-space: nowrap; }
.resource-chip .res-value.full { color: #d9b45b; }
.resource-chip .res-value.low { color: #c88a73; }
.resource-chip .res-name { font-size: 0.5rem; color: rgba(172, 159, 128, .48); letter-spacing: .02em; display: none; }
.resource-chip:hover .res-name { display: block; }
.res-group.basic .resource-chip { min-width: 4.375rem; }
.status-block { display: flex; align-items: center; gap: 0.4375rem; height: 4.5rem; }
.chronicle-btn { position: relative; width: 2.625rem; height: 2.625rem; align-self: center; background: rgba(22, 30, 23, .92); }
.chronicle-btn svg { font-size: 1.0625rem; }
.badge { position: absolute; top: -0.25rem; right: -0.25rem; min-width: 1rem; height: 1rem; padding: 0 0.25rem; display: grid; place-items: center; border-radius: 0.5625rem; background: var(--oxblood); color: #f3e4bd; font-size: 0.5625rem; font-family: var(--font-small); }
.speed-box {
  display: flex; height: 2.625rem; align-self: center; border: 0.0625rem solid rgba(158, 133, 81, .35);
  background: rgba(19, 27, 21, .92); box-shadow: inset 0 0 0 0.125rem rgba(0, 0, 0, .24);
}
.speed-btn {
  width: 2.0625rem; height: 100%; border: 0; border-right: 0.0625rem solid rgba(148, 124, 75, .18);
  background: transparent; color: rgba(190, 178, 145, .6); font-size: 0.6875rem;
  display: grid; place-items: center; padding: 0; transition: all .15s; font-family: var(--font-small);
}
.speed-btn svg { font-size: 0.8125rem; }
.speed-btn:last-child { border-right: 0; }
.speed-btn:hover { color: var(--gold-bright); background: rgba(195, 164, 97, .08); }
.speed-btn.active { color: #211a11; background: linear-gradient(180deg, #d9c28a, #b39657); box-shadow: inset 0 0 0 0.0625rem rgba(255, 244, 206, .25); }
.speed-btn.half { font-size: 0.8125rem; }
.menu-btn { width: 2.625rem; height: 2.625rem; align-self: center; }

/* =========================================================
   Navigation
   ========================================================= */
#main-nav {
  position: absolute; left: var(--hud-pad); top: 6rem;
  display: flex; flex-direction: column; gap: 0.1875rem;
  width: 4rem; padding: 0.375rem;
  background: linear-gradient(180deg, rgba(33, 45, 35, .96), rgba(13, 20, 15, .95));
  border: 0.0625rem solid rgba(158, 133, 81, .4);
  box-shadow: inset 0 0 0 0.125rem rgba(4, 8, 5, .44), 0 0.75rem 1.875rem rgba(0, 0, 0, .36);
}
#main-nav::before { content: ""; position: absolute; top: 0.375rem; bottom: 0.375rem; left: 0.3125rem; width: 0.0625rem; background: linear-gradient(transparent, rgba(181, 151, 89, .22), transparent); }
.nav-btn {
  position: relative; width: 3.25rem; height: 3.1875rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem;
  color: rgba(199, 185, 148, .66); background: transparent; border: 0.0625rem solid transparent;
  transition: all .17s; padding: 0;
}
.nav-btn svg { font-size: 1.25rem; filter: drop-shadow(0 0.0625rem 0.125rem #000); }
.nav-btn span { font-size: 0.5rem; letter-spacing: .08em; font-family: var(--font-small); }
.nav-btn:hover { color: #f0dfb3; background: rgba(197, 165, 96, .08); border-color: rgba(191, 160, 98, .23); }
.nav-btn.active { color: #f1e1b7; background: linear-gradient(180deg, rgba(180, 148, 82, .25), rgba(95, 76, 44, .13)); border-color: rgba(203, 173, 107, .42); box-shadow: inset 0 0 0 0.0625rem rgba(234, 211, 149, .12); }
.nav-btn.active::before { content: ""; position: absolute; left: -0.4375rem; top: 0.625rem; bottom: 0.625rem; width: 0.125rem; background: linear-gradient(transparent, #d4b779, transparent); }
.nav-btn.small { height: 2.4375rem; }
.nav-btn.small svg { font-size: 1rem; }
.nav-btn.small span { font-size: 0.4375rem; }
.nav-rule { height: 0.0625rem; margin: 0.25rem 0.3125rem; background: linear-gradient(90deg, transparent, rgba(169, 139, 81, .28), transparent); }
#main-nav .nav-btn.pulse { animation: navPulse 2.4s ease-in-out infinite; }
@keyframes navPulse { 50% { border-color: rgba(213, 181, 111, .4); background: rgba(191, 158, 93, .08); } }

/* =========================================================
   Adviser / minimap / misc HUD
   ========================================================= */
.adviser-widget {
  position: absolute; left: 5.625rem; bottom: 7.875rem; width: 16rem;
  color: #ddcfac;
  background: linear-gradient(160deg, rgba(41, 53, 42, .96), rgba(18, 27, 21, .96));
  border: 0.0625rem solid rgba(158, 131, 77, .43);
  box-shadow: inset 0 0 0 0.125rem rgba(6, 10, 7, .4), 0 0.5625rem 1.5625rem rgba(0, 0, 0, .35);
  transition: opacity .3s, transform .3s;
}
.adviser-widget.collapsed .adviser-body { display: none; }
.adviser-head {
  display: flex; align-items: center; gap: 0.4375rem; padding: 0.5rem 0.625rem;
  font-size: 0.625rem; letter-spacing: .12em; color: #cbb88c;
  border-bottom: 0.0625rem solid rgba(158, 131, 77, .2);
}
.wax-seal {
  display: inline-grid; place-items: center; width: 1.125rem; height: 1.125rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9e4c40, #5f2824); color: #e3ce9e;
  font-family: var(--font-title); font-size: 0.5625rem; box-shadow: 0 0 0 0.0625rem rgba(173, 86, 72, .25);
}
#adviser-count { margin-left: auto; color: rgba(195, 181, 147, .55); font-family: var(--font-small); font-size: 0.5625rem; }
.adviser-head button { background: transparent; border: 0; color: rgba(201, 185, 147, .5); font-size: 0.875rem; width: 0.875rem; padding: 0; }
.adviser-head button:hover { color: var(--gold-bright); }
.adviser-body { padding: 0.5625rem 0.6875rem 0.625rem; cursor: pointer; }
.advice-title { font-size: 0.6875rem; color: #ead9af; letter-spacing: .05em; margin-bottom: 0.1875rem; }
.advice-text { font-size: 0.5625rem; line-height: 1.65; color: rgba(190, 178, 148, .6); }
.thin-progress { height: 0.125rem; background: rgba(186, 160, 100, .15); margin-top: 0.5rem; }
.thin-progress i { display: block; height: 100%; background: linear-gradient(90deg, #947b44, #ddc387); transition: width .4s; }
.minimap-wrap {
  position: absolute; right: var(--hud-pad); bottom: var(--hud-pad); width: 15.25rem;
  background: linear-gradient(170deg, rgba(37, 49, 38, .97), rgba(13, 20, 15, .97));
  border: 0.0625rem solid rgba(162, 136, 82, .43);
  box-shadow: inset 0 0 0 0.125rem rgba(5, 8, 6, .5), 0 0.625rem 1.625rem rgba(0, 0, 0, .38);
  padding: 0.375rem;
}
.minimap-head { display: flex; justify-content: space-between; align-items: center; padding: 0.0625rem 0.1875rem 0.3125rem; color: rgba(204, 188, 149, .64); font-size: 0.5625rem; letter-spacing: .14em; }
.minimap-head span:last-child { color: rgba(189, 174, 139, .34); font-size: 0.5rem; letter-spacing: .04em; }
#minimap { width: 100%; display: block; aspect-ratio: 300 / 214; cursor: crosshair; border: 0.0625rem solid rgba(158, 131, 78, .25); background: #1a2722; image-rendering: auto; }
.minimap-legend { display: flex; gap: 0.8125rem; padding: 0.375rem 0.1875rem 0.0625rem; color: rgba(186, 173, 140, .5); font-size: 0.5rem; letter-spacing: .05em; }
.dot { display: inline-block; width: 0.3125rem; height: 0.3125rem; margin-right: 0.25rem; transform: rotate(45deg); }
.dot.player { background: #e4ca8d; }
.dot.rival { background: #9b6254; }
.paused-indicator, .waiting-prompt {
  position: absolute; left: 50%; top: 6.0625rem; transform: translateX(-50%);
  padding: 0.3125rem 1.125rem; border: 0.0625rem solid rgba(189, 160, 99, .3);
  background: rgba(18, 24, 18, .84); color: rgba(215, 198, 157, .8);
  font-size: 0.5625rem; letter-spacing: .22em; backdrop-filter: blur(0.25rem);
  pointer-events: none;
}
.paused-indicator { border-color: rgba(186, 157, 97, .45); }
.waiting-prompt { top: 7.5rem; color: #edcf91; animation: waitPulse 2s ease-in-out infinite; }
@keyframes waitPulse { 50% { border-color: rgba(235, 205, 132, .55); background: rgba(38, 38, 24, .88); } }
.zoom-hint {
  position: absolute; left: 50%; bottom: 7.625rem; transform: translateX(-50%);
  font-size: 0.5625rem; letter-spacing: .06em; color: rgba(220, 210, 181, .46);
  background: rgba(17, 23, 17, .6); border: 0.0625rem solid rgba(155, 136, 94, .16);
  padding: 0.3125rem 0.75rem; pointer-events: none; opacity: 1; transition: opacity 1.5s;
}
.zoom-hint.fade { opacity: 0; }
.placement-hint {
  position: absolute; bottom: 7.625rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 1rem; align-items: center;
  padding: 0.5625rem 1.125rem;
  background: rgba(19, 26, 20, .94); border: 0.0625rem solid rgba(194, 163, 98, .55);
  box-shadow: inset 0 0 0 0.125rem rgba(0, 0, 0, .5), 0 0.5rem 1.25rem rgba(0, 0, 0, .35);
  color: #e5d4a7; font-size: 0.6875rem; letter-spacing: .06em;
}
.placement-hint .placement-keys { font-size: 0.5625rem; color: rgba(190, 176, 145, .58); border-left: 0.0625rem solid rgba(186, 157, 97, .23); padding-left: 0.875rem; }

/* =========================================================
   Toasts
   ========================================================= */
.toast-layer {
  position: absolute; top: 6.125rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.375rem;
  width: min(26.875rem, 54vw); pointer-events: none;
}
.toast {
  pointer-events: none;
  width: fit-content; max-width: 100%;
  padding: 0.5rem 0.9375rem 0.5rem 0.75rem;
  background: linear-gradient(180deg, rgba(35, 46, 36, .96), rgba(17, 24, 18, .96));
  border: 0.0625rem solid rgba(167, 139, 83, .32);
  border-left: 0.125rem solid #b99b5e;
  box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, .38), inset 0 0 0 0.0625rem rgba(4, 8, 5, .4);
  color: #d9cba9; font-size: 0.6875rem; line-height: 1.55; letter-spacing: .02em;
  animation: toastIn .35s ease both;
  transition: opacity .4s, transform .4s;
}
.toast.leaving { opacity: 0; transform: translateY(-0.25rem); }
.toast.war, .toast.danger { border-left-color: #a14c40; color: #e3c2a9; }
.toast.rank, .toast.victory { border-left-color: #d6b76c; color: #f0dea9; box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, .38), inset 0 0 0 0.0625rem rgba(178, 145, 78, .17); }
.toast.tech { border-left-color: #7b9b91; color: #c8ded7; }
.toast.civic, .toast.build, .toast.population { border-left-color: #8e9a6c; }
.toast.warn { border-left-color: #bda15b; color: #e3d0a7; }
.toast.trade { border-left-color: #b99458; color: #e2d2ae; }
.toast.tutorial { border-left-color: #a7b58d; color: #dce5cf; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-0.5rem) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.tutorial-toast-layer { position: fixed; inset: 0; pointer-events: none; z-index: 240; }
.tutorial-toast {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
  background: var(--parchment); color: var(--ink); border: 0.0625rem solid #8a6e42;
  padding: 1.125rem 1.625rem; width: min(23.75rem, 80vw);
  box-shadow: inset 0 0 0 0.1875rem rgba(213, 193, 152, .9), inset 0 0 0 0.25rem rgba(94, 72, 39, .4), 0 1rem 2.5rem rgba(0, 0, 0, .45);
}

/* =========================================================
   Build panel
   ========================================================= */
.side-panel {
  color: var(--ink); position: absolute; left: 5.625rem; top: 6rem; bottom: 7.75rem; width: 26.5rem;
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 10% 0%, rgba(255, 250, 230, .68), transparent 45%),
    repeating-linear-gradient(88deg, rgba(105, 83, 48, .025) 0 0.0625rem, transparent 0.0625rem 0.25rem),
    linear-gradient(110deg, #e9dec6, #ddcfb0);
  border: 0.0625rem solid rgba(96, 74, 42, .78);
  box-shadow: inset 0 0 0 0.1875rem #d9c6a0, inset 0 0 0 0.25rem rgba(92, 69, 37, .5), 0 1.125rem 3.125rem rgba(0, 0, 0, .48);
  animation: panelIn .22s ease both;
  z-index: 30;
}
@keyframes panelIn { from { opacity: 0; transform: translateX(-0.625rem); } to { opacity: 1; transform: translateX(0); } }
.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
  padding: 1rem 1.125rem 0.8125rem; border-bottom: 0.0625rem solid rgba(98, 76, 43, .3);
  background: rgba(255, 250, 235, .17);
}
.panel-head .eyebrow { color: rgba(100, 79, 44, .6); font-size: 0.5625rem; letter-spacing: .22em; margin-bottom: 0.25rem; }
.panel-head h3 { font-family: var(--font-title); font-size: 1.5rem; font-weight: 400; letter-spacing: .12em; margin: 0; color: #32281b; }
.panel-head p { margin: 0.25rem 0 0; font-size: 0.625rem; color: rgba(82, 67, 44, .6); line-height: 1.6; }
.panel-close { flex: 0 0 auto; margin-top: 0.125rem; }
.settlement-selector-wrap { display: flex; gap: 0.5rem; align-items: center; }
.settlement-selector-wrap label { font-size: 0.5625rem; letter-spacing: .08em; color: rgba(90, 72, 43, .65); }
.settlement-selector {
  color: var(--ink); background: rgba(255, 250, 236, .45); border: 0.0625rem solid rgba(99, 77, 45, .32);
  padding: 0.375rem 0.5rem; font-size: 0.6875rem; min-width: 0; max-width: 11.25rem;
}
.build-tabs { display: flex; flex-wrap: wrap; padding: 0.5625rem 0.8125rem 0; gap: 0.25rem; border-bottom: 0.0625rem solid rgba(104, 80, 45, .2); }
.build-tab {
  border: 0; border-bottom: 0.125rem solid transparent; background: transparent;
  color: rgba(79, 63, 40, .62); font-size: 0.625rem; padding: 0.4375rem 0.5rem; letter-spacing: .06em;
  display: flex; align-items: center; gap: 0.25rem;
}
.build-tab svg { font-size: 0.8125rem; }
.build-tab:hover { color: var(--ink); background: rgba(110, 84, 47, .06); }
.build-tab.active { color: #3f3120; border-bottom-color: #8b6e3d; background: rgba(119, 92, 51, .07); }
.build-scroll { overflow-y: auto; padding: 0.75rem 0.8125rem 1rem; flex: 1; min-height: 0; }
.build-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4375rem; }
.build-card {
  position: relative; border: 0.0625rem solid rgba(101, 77, 43, .23);
  background: rgba(255, 250, 237, .23);
  padding: 0.4375rem 0.5rem 0.5rem; text-align: left;
  display: flex; flex-direction: column; gap: 0.25rem;
  transition: all .16s; min-height: 8.4375rem;
}
.build-card:hover { background: rgba(255, 250, 239, .55); border-color: rgba(125, 96, 52, .5); box-shadow: 0 0.25rem 0.8125rem rgba(79, 58, 29, .09); }
.build-card.locked { opacity: .52; filter: grayscale(.25); pointer-events: none; }
.build-card.unaffordable { opacity: .8; }
.build-card .card-icon { height: 2.625rem; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse, rgba(118, 92, 55, .08), transparent 68%); }
.build-card .card-icon canvas { width: 4.625rem; height: 3.5rem; }
.build-card h4 { margin: 0; font-weight: 400; font-family: var(--font-title); font-size: 0.8125rem; color: #3c3020; letter-spacing: .04em; line-height: 1.25; }
.build-card .card-level { font-size: 0.5rem; color: rgba(107, 84, 47, .6); letter-spacing: .03em; margin-top: -0.125rem; }
.build-card .cost-line { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.5625rem; color: #655436; margin-top: auto; }
.cost-item { display: inline-flex; align-items: center; gap: 0.125rem; white-space: nowrap; }
.cost-item .res-svg { width: 0.6875rem; height: 0.6875rem; opacity: .8; }
.cost-item.missing { color: #9b4d40; }
.build-card .card-days { font-size: 0.5rem; color: rgba(114, 91, 54, .48); margin-top: 0.0625rem; }
.build-card .lock-note { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.25rem; background: rgba(224, 213, 189, .23); font-size: 0.5625rem; color: #624d31; }
.build-card .uniq-mark { position: absolute; top: 0.3125rem; right: 0.375rem; font-size: 0.5rem; color: rgba(111, 48, 44, .7); letter-spacing: .04em; }
.build-section-title { font-size: 0.5625rem; color: rgba(92, 73, 44, .55); letter-spacing: .14em; margin: 0.75rem 0 0.4375rem; display: flex; align-items: center; gap: 0.5rem; }
.build-section-title::after { content: ""; height: 0.0625rem; background: linear-gradient(90deg, rgba(104, 80, 45, .23), transparent); flex: 1; }
.colony-card {
  display: flex; gap: 0.625rem; align-items: center; width: 100%; margin-top: 0.75rem;
  border: 0.0625rem dashed rgba(101, 77, 43, .4); background: rgba(111, 84, 46, .06);
  padding: 0.625rem 0.75rem; text-align: left; color: var(--ink);
}
.colony-card:hover { background: rgba(111, 84, 46, .12); border-color: rgba(124, 94, 49, .65); }
.colony-card .colony-icon { width: 2.25rem; height: 2.25rem; border: 0.0625rem solid rgba(110, 84, 47, .35); display: grid; place-items: center; color: #7e6337; }
.colony-card strong { display: block; font-family: var(--font-title); font-weight: 400; font-size: 0.875rem; letter-spacing: .06em; }
.colony-card span { display: block; font-size: 0.5625rem; color: rgba(87, 69, 43, .6); line-height: 1.5; margin-top: 0.125rem; }
.build-help { margin-top: 0.8125rem; padding: 0.5625rem 0.625rem; border-left: 0.125rem solid rgba(143, 112, 60, .45); background: rgba(255, 250, 237, .25); font-size: 0.5625rem; color: rgba(86, 68, 42, .65); line-height: 1.7; }

/* =========================================================
   Context drawer
   ========================================================= */
.context-drawer {
  color: var(--ink);
  position: absolute; right: var(--hud-pad); top: 6rem; bottom: 13.25rem; width: 22.25rem;
  overflow-y: auto; overflow-x: hidden;
  background:
    radial-gradient(ellipse at 90% 0%, rgba(255, 250, 229, .65), transparent 42%),
    repeating-linear-gradient(88deg, rgba(102, 79, 45, .023) 0 0.0625rem, transparent 0.0625rem 0.25rem),
    linear-gradient(110deg, #e9dec6, #dccfab);
  border: 0.0625rem solid rgba(96, 74, 42, .75);
  box-shadow: inset 0 0 0 0.1875rem #d9c6a0, inset 0 0 0 0.25rem rgba(92, 69, 37, .48), 0 1.125rem 3.125rem rgba(0, 0, 0, .46);
  animation: drawerIn .2s ease both;
  z-index: 25;
}
@keyframes drawerIn { from { opacity: 0; transform: translateX(0.75rem); } to { opacity: 1; transform: translateX(0); } }
.drawer-head { display: flex; gap: 0.6875rem; align-items: flex-start; padding: 0.9375rem 1rem 0.75rem; border-bottom: 0.0625rem solid rgba(100, 77, 43, .25); background: rgba(255, 250, 234, .17); }
.drawer-head .drawer-icon { flex: 0 0 3.125rem; width: 3.125rem; height: 3rem; display: grid; place-items: center; border: 0.0625rem solid rgba(107, 82, 46, .25); background: rgba(255, 249, 232, .24); }
.drawer-head .drawer-icon canvas { width: 3.25rem; height: 2.8125rem; }
.drawer-head .drawer-title-wrap { min-width: 0; flex: 1; }
.drawer-head h3 { font-family: var(--font-title); font-size: 1.3125rem; font-weight: 400; letter-spacing: .06em; margin: 0 0 0.1875rem; color: #33291c; }
.drawer-head .drawer-sub { font-size: 0.5625rem; color: rgba(84, 68, 43, .62); letter-spacing: .04em; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.drawer-body { padding: 0.75rem 0.9375rem 1.125rem; }
.drawer-tabs { display: flex; border-bottom: 0.0625rem solid rgba(101, 77, 43, .2); padding: 0 0.9375rem; gap: 0.125rem; }
.drawer-tab { background: transparent; border: 0; border-bottom: 0.125rem solid transparent; padding: 0.5rem 0.5625rem; font-size: 0.625rem; color: rgba(84, 67, 42, .6); letter-spacing: .05em; }
.drawer-tab.active { color: #3d301e; border-bottom-color: #8a6d3c; }
.drawer-tab:hover { color: var(--ink); }
.stat-line { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.3125rem 0; font-size: 0.625rem; color: #5f4e34; border-bottom: 0.0625rem dotted rgba(102, 79, 45, .18); }
.stat-line:last-child { border-bottom: 0; }
.stat-line .k { color: rgba(83, 67, 42, .66); letter-spacing: .03em; }
.stat-line .v { font-family: var(--font-small); color: #3c3021; text-align: right; }
.stat-line .v.good { color: #506b41; }
.stat-line .v.bad { color: #94483d; }
.drawer-section { margin-top: 0.875rem; }
.drawer-section h4 { margin: 0 0 0.4375rem; font-size: 0.625rem; letter-spacing: .12em; color: #705b3a; font-weight: normal; display: flex; align-items: center; gap: 0.5rem; }
.drawer-section h4::after { content: ""; flex: 1; height: 0.0625rem; background: linear-gradient(90deg, rgba(104, 80, 45, .22), transparent); }
.description { font-size: 0.625rem; line-height: 1.75; color: rgba(70, 56, 37, .78); margin: 0 0 0.5rem; }
.effect-line { font-size: 0.5625rem; line-height: 1.7; color: rgba(82, 66, 40, .65); background: rgba(120, 93, 53, .06); padding: 0.4375rem 0.5rem; border-left: 0.125rem solid rgba(139, 107, 54, .35); margin-top: 0.375rem; }
.meter-row { margin: 0.4375rem 0; }
.meter-label { display: flex; justify-content: space-between; font-size: 0.5625rem; color: rgba(83, 66, 41, .65); margin-bottom: 0.1875rem; }
.meter-label b { font-weight: normal; color: #4f3f2a; }
.meter { height: 0.3125rem; background: rgba(85, 67, 39, .14); position: relative; overflow: hidden; }
.meter i { display: block; height: 100%; background: linear-gradient(90deg, #82764e, #b3a368); }
.meter.hp i { background: linear-gradient(90deg, #71865a, #94a66c); }
.meter.stability i { background: linear-gradient(90deg, #998346, #c4ad6f); }
.meter.warn i { background: linear-gradient(90deg, #9b4a3f, #b66b52); }
.stability-note { font-size: 0.5rem; color: rgba(88, 70, 43, .57); line-height: 1.6; margin-top: 0.25rem; }
.worker-list { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.375rem; }
.worker-chip {
  display: inline-flex; align-items: center; gap: 0.25rem; border: 0.0625rem solid rgba(105, 81, 45, .25);
  background: rgba(255, 250, 235, .3); padding: 0.125rem 0.3125rem; font-size: 0.5625rem; color: #5a4931;
}
.worker-chip button { background: transparent; border: 0; color: rgba(120, 71, 55, .7); padding: 0 0 0 0.125rem; font-size: 0.625rem; line-height: 1; }
.worker-chip button:hover { color: var(--oxblood); }
.empty-note { font-size: 0.5625rem; color: rgba(91, 73, 45, .45); padding: 0.3125rem 0; font-style: italic; }
.slot-info { font-size: 0.5625rem; color: rgba(78, 62, 38, .64); }
.action-row { display: flex; flex-wrap: wrap; gap: 0.3125rem; margin-top: 0.4375rem; }
.action-btn {
  flex: 1 1 auto; min-width: 5.75rem;
  border: 0.0625rem solid rgba(101, 77, 43, .38);
  background: rgba(103, 79, 45, .08);
  color: #4b3b26; padding: 0.4375rem 0.5625rem; font-size: 0.625rem; letter-spacing: .03em;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem;
  transition: all .15s;
}
.action-btn:hover { background: rgba(107, 80, 43, .17); border-color: rgba(107, 80, 43, .6); }
.action-btn.primary { background: linear-gradient(180deg, #394838, #253128); border-color: rgba(83, 107, 75, .6); color: #e7d8ad; }
.action-btn.primary:hover { background: linear-gradient(180deg, #4b5c47, #303e33); }
.action-btn.danger { border-color: rgba(129, 62, 52, .42); color: #7f3c34; background: rgba(142, 67, 55, .06); }
.action-btn.danger:hover { background: rgba(142, 67, 55, .13); }
.action-btn[disabled] { opacity: .4; pointer-events: none; }
.action-btn svg { font-size: 0.75rem; }
.cost-chips { display: flex; flex-wrap: wrap; gap: 0.3125rem 0.5625rem; margin: 0.4375rem 0; font-size: 0.5625rem; color: #665234; }
.cost-chips .cost-item { background: rgba(101, 78, 44, .06); border: 0.0625rem solid rgba(101, 78, 44, .14); padding: 0.125rem 0.3125rem; }
.cost-chips .cost-item .res-svg { width: 0.6875rem; height: 0.6875rem; }
.training-list, .queue-list { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.3125rem; }
.training-item {
  display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.4375rem;
  border: 0.0625rem solid rgba(101, 77, 43, .18); background: rgba(255, 250, 237, .22);
  font-size: 0.5625rem; color: #5d4b32;
}
.training-item .tr-name { font-size: 0.625rem; color: #423321; min-width: 3.625rem; }
.training-item .tr-cost { flex: 1; color: rgba(90, 72, 46, .65); display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.training-item button { flex: 0 0 auto; }
.queue-item { border-left: 0.125rem solid rgba(142, 110, 58, .5); background: rgba(111, 84, 46, .06); padding: 0.375rem 0.5rem; font-size: 0.5625rem; }
.queue-top { display: flex; justify-content: space-between; gap: 0.5rem; color: #4e3e29; }
.queue-item .meter { margin-top: 0.25rem; height: 0.25rem; }
.recipe-options { display: flex; gap: 0.25rem; }
.recipe-btn { flex: 1; border: 0.0625rem solid rgba(101, 77, 43, .28); background: transparent; padding: 0.3125rem; font-size: 0.5625rem; color: var(--ink-soft); }
.recipe-btn.active { background: rgba(120, 92, 50, .15); border-color: rgba(117, 89, 48, .55); color: #3e301f; }
.unit-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.625rem; margin: 0.25rem 0; }
.unit-stat { font-size: 0.5625rem; color: rgba(81, 64, 40, .65); display: flex; justify-content: space-between; border-bottom: 0.0625rem dotted rgba(95, 73, 41, .15); padding: 0.1875rem 0; }
.unit-stat b { font-weight: normal; color: #493b28; }
.inline-input { display: flex; gap: 0.25rem; margin-top: 0.375rem; }
.inline-input input { flex: 1; min-width: 0; background: rgba(255, 251, 240, .4); border: 0.0625rem solid rgba(101, 77, 43, .3); color: var(--ink); padding: 0.25rem 0.375rem; font-size: 0.625rem; }
.cooldown-note { font-size: 0.5rem; color: rgba(100, 74, 44, .5); margin-top: 0.25rem; }
.warning-note { color: #8c4a3f; background: rgba(145, 70, 58, .07); border-left: 0.125rem solid rgba(143, 74, 61, .5); padding: 0.375rem 0.5rem; font-size: 0.5625rem; line-height: 1.6; margin-top: 0.375rem; }
.nearby-note { font-size: 0.5625rem; color: rgba(83, 67, 42, .55); line-height: 1.6; }

/* =========================================================
   Selection bar
   ========================================================= */
.selection-bar {
  position: absolute; bottom: var(--hud-pad); left: 50%; transform: translateX(-50%);
  width: min(47.5rem, calc(100vw - 25rem)); min-height: 5.75rem;
  display: flex; gap: 0.625rem; align-items: stretch;
  background: linear-gradient(180deg, rgba(34, 47, 37, .97), rgba(13, 21, 15, .97));
  border: 0.0625rem solid rgba(166, 139, 84, .45);
  box-shadow: inset 0 0 0 0.125rem rgba(6, 10, 7, .4), 0 0.75rem 2rem rgba(0, 0, 0, .45);
  padding: 0.5rem;
  z-index: 22; animation: selectionIn .2s ease both;
}
@keyframes selectionIn { from { opacity: 0; transform: translate(-50%, 0.4375rem); } to { opacity: 1; transform: translate(-50%, 0); } }
.selection-cards { flex: 1; min-width: 0; display: flex; gap: 0.375rem; overflow-x: auto; overflow-y: hidden; }
.unit-card {
  position: relative; flex: 0 0 7rem; min-width: 5.5rem;
  display: flex; flex-direction: column; padding: 0.375rem 0.4375rem;
  border: 0.0625rem solid rgba(159, 133, 80, .22); background: rgba(215, 192, 148, .035);
  cursor: pointer; transition: all .15s;
}
.unit-card:hover { border-color: rgba(194, 162, 98, .45); background: rgba(206, 177, 111, .06); }
.unit-card.active { border-color: rgba(211, 181, 116, .55); background: rgba(199, 167, 100, .09); }
.unit-card .portrait { height: 2.125rem; display: flex; align-items: center; justify-content: center; }
.unit-card .portrait canvas { width: 2.75rem; height: 2.125rem; filter: drop-shadow(0 0.125rem 0.1875rem rgba(0, 0, 0, .4)); }
.unit-card .u-name { font-size: 0.625rem; color: #dacda8; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-card .u-kind { font-size: 0.5rem; color: rgba(179, 165, 132, .5); margin-top: 0; }
.unit-card .u-hp { height: 0.1875rem; margin-top: 0.25rem; background: rgba(0, 0, 0, .34); }
.unit-card .u-hp i { display: block; height: 100%; background: #7e9460; }
.selection-actions { flex: 0 0 11rem; display: flex; flex-wrap: wrap; align-content: center; gap: 0.25rem; border-left: 0.0625rem solid rgba(157, 132, 81, .2); padding-left: 0.5625rem; }
.cmd-btn {
  flex: 1 1 calc(50% - 0.25rem);
  border: 0.0625rem solid rgba(156, 132, 80, .25); background: rgba(196, 167, 102, .035);
  color: rgba(211, 196, 159, .78); padding: 0.375rem 0.25rem; font-size: 0.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.125rem; letter-spacing: .04em;
  transition: all .14s;
}
.cmd-btn svg { font-size: 0.8125rem; color: rgba(205, 180, 121, .72); }
.cmd-btn:hover { border-color: rgba(197, 165, 100, .45); color: #f0e2bc; background: rgba(201, 170, 104, .08); }
.cmd-btn.danger { color: #c79284; border-color: rgba(151, 86, 70, .25); }
.selection-note { width: 100%; font-size: 0.5rem; line-height: 1.5; color: rgba(176, 162, 131, .45); text-align: center; }

/* =========================================================
   Modals
   ========================================================= */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 210;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(10, 14, 10, .64), rgba(5, 8, 6, .86));
  backdrop-filter: blur(0.1875rem);
  animation: backdropIn .18s ease both;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  position: relative;
  width: min(70rem, calc(100vw - 4.375rem));
  max-height: calc(100vh - 4rem);
  overflow: hidden;
  display: flex; flex-direction: column;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 251, 233, .72), transparent 42%),
    repeating-linear-gradient(87deg, rgba(99, 76, 43, .026) 0 0.0625rem, transparent 0.0625rem 0.25rem),
    linear-gradient(112deg, #e9dfc7, #ddcfae);
  border: 0.0625rem solid #775f36;
  box-shadow:
    inset 0 0 0 0.1875rem #d9c7a1,
    inset 0 0 0 0.25rem rgba(90, 68, 36, .58),
    inset 0 0 5rem rgba(99, 73, 35, .14),
    0 1.875rem 5.625rem rgba(0, 0, 0, .68);
  animation: modalIn .25s cubic-bezier(.2,.7,.2,1) both;
}
.modal.narrow { width: min(35rem, calc(100vw - 3.75rem)); }
.modal.wide { width: min(78.75rem, calc(100vw - 3.125rem)); }
@keyframes modalIn { from { opacity: 0; transform: translateY(0.875rem) scale(.99); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal::before, .modal::after {
  content: ""; position: absolute; z-index: 4; pointer-events: none;
  width: 2.125rem; height: 2.125rem; border-color: rgba(100, 76, 40, .7);
}
.modal::before { top: 0.5625rem; left: 0.5625rem; border-top: 0.0625rem solid; border-left: 0.0625rem solid; }
.modal::after { right: 0.5625rem; bottom: 0.5625rem; border-right: 0.0625rem solid; border-bottom: 0.0625rem solid; }
.modal-header {
  flex: 0 0 auto; display: flex; justify-content: space-between; gap: 1.25rem; align-items: flex-start;
  padding: 1.375rem 1.75rem 1rem; border-bottom: 0.0625rem solid rgba(97, 74, 41, .28);
  background: rgba(255, 250, 236, .16);
}
.modal-header .eyebrow { color: rgba(99, 77, 42, .6); font-size: 0.5625rem; letter-spacing: .24em; }
.modal-header h2 { margin: 0.3125rem 0 0.25rem; font-family: var(--font-title); font-weight: 400; font-size: 1.9375rem; letter-spacing: .12em; color: #30271a; }
.modal-header p { margin: 0; font-size: 0.625rem; color: rgba(81, 65, 41, .62); letter-spacing: .03em; line-height: 1.6; }
.modal-header .head-actions { display: flex; gap: 0.5rem; align-items: center; flex: 0 0 auto; }
.modal-body { overflow-y: auto; overflow-x: hidden; padding: 1.25rem 1.75rem 1.625rem; min-height: 0; }
.modal-footer { flex: 0 0 auto; display: flex; justify-content: flex-end; align-items: center; gap: 0.625rem; padding: 0.8125rem 1.75rem; border-top: 0.0625rem solid rgba(95, 73, 40, .24); background: rgba(255, 250, 237, .12); }
.modal-footer .note { margin-right: auto; font-size: 0.5625rem; color: rgba(84, 68, 44, .55); }
.section { margin-bottom: 1.3125rem; }
.section-title { margin: 0 0 0.625rem; font-family: var(--font-title); font-weight: 400; font-size: 1rem; letter-spacing: .1em; color: #473927; display: flex; align-items: center; gap: 0.625rem; }
.section-title::after { content: ""; flex: 1; height: 0.0625rem; background: linear-gradient(90deg, rgba(99, 75, 42, .25), transparent); }
.panel-subtitle { font-size: 0.5625rem; color: rgba(87, 69, 43, .58); letter-spacing: .06em; margin: -0.3125rem 0 0.75rem; }
.layout-two { display: grid; grid-template-columns: 16.25rem minmax(0, 1fr); gap: 1.5rem; min-height: 0; }
.layout-three { display: grid; grid-template-columns: 14.375rem minmax(0, 1fr) 18.125rem; gap: 1.375rem; }
.side-list { border-right: 0.0625rem solid rgba(98, 75, 42, .22); padding-right: 1rem; }
.side-list h4 { margin: 0 0 0.5625rem; font-size: 0.5625rem; letter-spacing: .16em; color: rgba(93, 73, 43, .58); font-weight: normal; }
.list-item {
  display: flex; align-items: center; gap: 0.5625rem; width: 100%; text-align: left;
  border: 0.0625rem solid transparent; background: transparent; padding: 0.5rem 0.5rem; margin-bottom: 0.1875rem;
  color: var(--ink-soft); cursor: pointer; transition: all .14s;
}
.list-item:hover { background: rgba(116, 88, 48, .06); border-color: rgba(112, 86, 48, .16); }
.list-item.active { background: rgba(115, 87, 48, .1); border-color: rgba(114, 86, 47, .35); }
.list-item .li-main { flex: 1; min-width: 0; }
.list-item .li-name { font-size: 0.75rem; color: #3e3222; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-item .li-sub { font-size: 0.5rem; color: rgba(87, 70, 44, .55); margin-top: 0.125rem; }
.list-item .li-icon { width: 1.625rem; height: 1.625rem; flex: 0 0 auto; border: 0.0625rem solid rgba(100, 76, 43, .25); display: grid; place-items: center; background: rgba(255, 250, 234, .25); overflow: hidden; }
.list-item canvas { width: 1.875rem; height: 1.5rem; }
.list-item .li-badge { font-size: 0.5rem; color: rgba(100, 79, 45, .62); border: 0.0625rem solid rgba(101, 77, 43, .22); padding: 0.0625rem 0.25rem; white-space: nowrap; }
.empty-state { text-align: center; color: rgba(84, 68, 43, .5); font-size: 0.625rem; padding: 1.875rem 1.25rem; border: 0.0625rem dashed rgba(101, 77, 43, .24); line-height: 1.8; }
.gold-divider { height: 0.0625rem; margin: 0.875rem 0; background: linear-gradient(90deg, transparent, rgba(98, 75, 42, .26), transparent); }
.button-row { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.button-row .action-btn { flex: 0 0 auto; min-width: 6.25rem; }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4375rem; }
.summary-cell { border: 0.0625rem solid rgba(101, 76, 43, .2); padding: 0.5625rem 0.625rem; background: rgba(255, 250, 235, .18); }
.summary-cell .sc-label { font-size: 0.5rem; letter-spacing: .08em; color: rgba(89, 71, 44, .58); }
.summary-cell .sc-value { font-family: var(--font-title); font-size: 1.25rem; color: #3d3020; margin-top: 0.125rem; }
.summary-cell .sc-note { font-size: 0.5rem; color: rgba(93, 74, 45, .5); margin-top: 0.125rem; }
.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3125rem; }
.resource-cell { padding: 0.375rem 0.4375rem; border: 0.0625rem solid rgba(98, 74, 42, .16); background: rgba(255, 250, 235, .16); }
.resource-cell .rc-top { display: flex; justify-content: space-between; gap: 0.375rem; align-items: center; font-size: 0.5625rem; color: #5b4930; }
.resource-cell .rc-label { display: flex; align-items: center; gap: 0.1875rem; }
.resource-cell .rc-label .res-svg { width: 0.75rem; height: 0.75rem; }
.resource-cell .rc-value { font-family: var(--font-small); color: #3d301f; }
.resource-cell .rc-bar { height: 0.125rem; background: rgba(89, 70, 40, .13); margin-top: 0.25rem; }
.resource-cell .rc-bar i { display: block; height: 100%; background: #9b8855; }
.resource-cell.near-full .rc-value { color: #8b5b32; }
.stability-panel { display: flex; gap: 0.875rem; align-items: center; border: 0.0625rem solid rgba(101, 76, 43, .2); background: rgba(255, 250, 235, .2); padding: 0.6875rem 0.75rem; }
.stability-orb {
  flex: 0 0 4.125rem; width: 4.125rem; height: 4.125rem; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(#8f7b45 var(--stability, 70%), rgba(104, 82, 48, .18) 0);
  box-shadow: inset 0 0 0 0.25rem #e1d3b4, inset 0 0 0 0.3125rem rgba(104, 80, 45, .35);
}
.stability-orb::before { content: ""; position: absolute; inset: 0.5625rem; border-radius: 50%; background: linear-gradient(150deg, #eee2c8, #d8c7a3); box-shadow: inset 0 0 0.5rem rgba(100, 76, 42, .16); }
.stability-orb span { position: relative; z-index: 1; font-family: var(--font-title); font-size: 1.3125rem; color: #3e3120; }
.stability-copy { flex: 1; }
.stability-copy strong { display: block; font-size: 0.6875rem; color: #4c3c27; margin-bottom: 0.1875rem; font-weight: normal; letter-spacing: .04em; }
.stability-copy p { font-size: 0.5625rem; line-height: 1.65; color: rgba(78, 62, 39, .65); margin: 0; }
.stability-copy .meter { margin-top: 0.375rem; }
.stage-path { display: flex; gap: 0; align-items: center; margin: 0.25rem 0 0.75rem; }
.stage-step { flex: 1; text-align: center; position: relative; padding: 0.5rem 0.25rem; border: 0.0625rem solid rgba(99, 75, 42, .16); border-right: 0; font-size: 0.5625rem; color: rgba(88, 70, 44, .5); background: rgba(255, 250, 235, .1); }
.stage-step:last-child { border-right: 0.0625rem solid rgba(99, 75, 42, .16); }
.stage-step.current { background: rgba(119, 89, 47, .13); color: #483722; border-color: rgba(109, 82, 44, .4); }
.stage-step.done { color: #556c45; background: rgba(100, 127, 84, .07); }
.stage-step strong { display: block; font-family: var(--font-title); font-weight: 400; font-size: 0.875rem; margin-bottom: 0.0625rem; }
.stage-step small { display: block; font-size: 0.5rem; margin-top: 0.125rem; opacity: .7; }
.building-index { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.3125rem; }
.building-index-row { display: flex; align-items: center; gap: 0.4375rem; border: 0.0625rem solid rgba(100, 75, 42, .17); background: rgba(255, 250, 235, .17); padding: 0.375rem 0.4375rem; cursor: pointer; }
.building-index-row:hover { border-color: rgba(108, 81, 44, .38); background: rgba(255, 250, 238, .38); }
.building-index-row .mini-canvas { width: 2.25rem; height: 1.75rem; flex: 0 0 2.25rem; }
.building-index-row .bi-name { flex: 1; font-size: 0.5625rem; color: #50402b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.building-index-row .bi-level { font-size: 0.5rem; color: rgba(88, 71, 44, .5); }
.split-section { display: grid; grid-template-columns: 1fr 1fr; gap: 1.125rem; }
.mini-title { font-size: 0.5625rem; letter-spacing: .13em; color: rgba(91, 72, 44, .58); margin-bottom: 0.375rem; }
.chip-list { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.chip { border: 0.0625rem solid rgba(101, 77, 43, .22); background: rgba(255, 250, 235, .22); padding: 0.125rem 0.375rem; font-size: 0.5625rem; color: #5d4b32; }
.chip.gold { border-color: rgba(151, 119, 61, .4); background: rgba(187, 153, 85, .1); color: #6e562d; }
.chip.green { border-color: rgba(92, 120, 76, .36); background: rgba(102, 130, 83, .08); color: #49603c; }
.chip.red { border-color: rgba(137, 75, 61, .35); background: rgba(146, 77, 63, .07); color: #7d3f35; }

/* =========================================================
   Internal affairs
   ========================================================= */
.internal-layout { display: grid; grid-template-columns: 15.375rem minmax(0, 1fr); gap: 1.5rem; }
.settlement-list .list-item { padding: 0.5625rem 0.5rem; }
.settlement-row-crest { width: 1.875rem; height: 2rem; flex: 0 0 1.875rem; }
.settlement-row-crest canvas { width: 1.875rem; height: 2.125rem; }
.settlement-main-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.875rem; margin-bottom: 0.75rem; }
.settlement-main-head h3 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 1.875rem; letter-spacing: .1em; color: #33281b; }
.settlement-main-head .sub { font-size: 0.5625rem; color: rgba(86, 68, 43, .58); margin-top: 0.1875rem; letter-spacing: .05em; }
.stage-badge { border: 0.0625rem solid rgba(113, 85, 45, .4); background: rgba(141, 108, 56, .09); padding: 0.25rem 0.625rem; font-size: 0.625rem; letter-spacing: .08em; color: #67502e; }
.governance-actions { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.overview-columns { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.375rem; }
.worker-summary { display: flex; gap: 0.75rem; flex-wrap: wrap; font-size: 0.5625rem; color: rgba(75, 60, 38, .7); }
.worker-summary b { font-family: var(--font-title); font-weight: 400; font-size: 1.125rem; color: #483825; margin-right: 0.1875rem; }
.upkeep-list { display: flex; flex-direction: column; gap: 0.25rem; }
.upkeep-item { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.5625rem; color: #5c4930; border-bottom: 0.0625rem dotted rgba(100, 76, 44, .16); padding: 0.25rem 0; }
.upkeep-item .res-svg { width: 0.75rem; height: 0.75rem; }
.upkeep-item .up-val { margin-left: auto; font-family: var(--font-small); }
.population-line { display: flex; align-items: center; gap: 0.625rem; }
.population-bar { flex: 1; height: 0.5rem; background: rgba(95, 73, 41, .13); position: relative; }
.population-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7e7047, #b5a166); }
.population-line span { font-size: 0.625rem; color: #56442c; }
.stability-meter-large { margin-top: 0.5rem; height: 0.4375rem; background: rgba(93, 70, 39, .13); }
.stability-meter-large i { display: block; height: 100%; background: linear-gradient(90deg, #8a733f, #c7b174); }

/* =========================================================
   Diplomacy
   ========================================================= */
.diplomacy-layout { display: grid; grid-template-columns: 16.25rem minmax(0, 1fr); gap: 1.5rem; }
.faction-list-item { padding: 0.5625rem; }
.faction-list-item .faction-crest { width: 2rem; height: 2.25rem; flex: 0 0 2rem; }
.faction-list-item .faction-crest canvas { width: 2rem; height: 2.3125rem; }
.relation-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.3125rem; font-size: 0.5rem; border: 0.0625rem solid currentColor; opacity: .8; }
.relation-mini { width: 2.8125rem; height: 0.1875rem; background: rgba(98, 74, 41, .14); }
.relation-mini i { display: block; height: 100%; background: currentColor; opacity: .8; }
.diplo-detail-head { display: flex; gap: 1.125rem; align-items: center; padding-bottom: 0.875rem; border-bottom: 0.0625rem solid rgba(98, 75, 42, .22); margin-bottom: 1rem; }
.diplo-crest-large { width: 5.25rem; height: 6rem; flex: 0 0 5.25rem; }
.diplo-crest-large canvas { width: 5.25rem; height: 6rem; }
.diplo-title h3 { margin: 0; font-family: var(--font-title); font-weight: 400; font-size: 1.875rem; letter-spacing: .09em; color: #30271a; }
.diplo-title .diplo-sub { font-size: 0.5625rem; color: rgba(82, 65, 41, .6); margin-top: 0.25rem; line-height: 1.6; }
.diplo-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.relation-block { display: flex; gap: 0.9375rem; align-items: center; border: 0.0625rem solid rgba(99, 75, 42, .2); padding: 0.625rem 0.75rem; background: rgba(255, 250, 235, .16); margin-bottom: 0.9375rem; }
.relation-value { font-family: var(--font-title); font-size: 1.75rem; color: #55442c; min-width: 3.5rem; text-align: center; }
.relation-info { flex: 1; }
.relation-info .rel-label { display: flex; justify-content: space-between; font-size: 0.5625rem; color: rgba(85, 68, 42, .65); margin-bottom: 0.3125rem; }
.relation-track { height: 0.375rem; background: rgba(96, 72, 40, .14); }
.relation-track i { display: block; height: 100%; background: #947a48; transition: width .3s; }
.diplo-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3125rem; }
.diplo-actions .action-btn { min-width: 0; font-size: 0.5625rem; padding: 0.4375rem 0.3125rem; }
.war-panel { border: 0.0625rem solid rgba(130, 72, 55, .28); background: rgba(137, 65, 53, .045); padding: 0.6875rem 0.75rem; margin-bottom: 0.625rem; }
.war-panel .war-head { display: flex; align-items: center; justify-content: space-between; gap: 0.625rem; margin-bottom: 0.3125rem; }
.war-panel .war-title { font-size: 0.6875rem; color: #6e332a; letter-spacing: .03em; }
.war-panel .war-meta { font-size: 0.5625rem; color: rgba(90, 61, 39, .62); line-height: 1.6; }
.war-exhaust { margin-top: 0.375rem; display: flex; align-items: center; gap: 0.4375rem; font-size: 0.5rem; color: rgba(100, 69, 46, .65); }
.war-exhaust .meter { flex: 1; height: 0.1875rem; }
.war-exhaust .meter i { background: #9b5946; }
.trade-panel { border: 0.0625rem solid rgba(109, 86, 47, .25); background: rgba(255, 250, 235, .2); padding: 0.6875rem 0.75rem; }
.trade-head { display: flex; justify-content: space-between; align-items: center; gap: 0.625rem; margin-bottom: 0.5rem; }
.trade-head strong { font-family: var(--font-title); font-weight: 400; font-size: 1rem; letter-spacing: .06em; color: #4d3b25; }
.trade-offer-form { display: flex; gap: 0.3125rem; }
.trade-offer-form select, .trade-offer-form input { min-width: 0; border: 0.0625rem solid rgba(98, 74, 41, .28); background: rgba(255, 250, 236, .42); color: var(--ink); padding: 0.3125rem 0.375rem; font-size: 0.625rem; }
.trade-offer-form input { width: 4.25rem; }
.trade-detail { font-size: 0.5625rem; color: rgba(80, 64, 40, .62); line-height: 1.7; margin: 0.375rem 0; }
.trade-list { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.375rem; }
.trade-row { display: flex; gap: 0.5rem; align-items: center; border-top: 0.0625rem dotted rgba(100, 77, 43, .2); padding-top: 0.3125rem; font-size: 0.5625rem; color: #5b4830; }
.trade-row .tr-main { flex: 1; }
.trade-row .tr-state { font-size: 0.5rem; color: rgba(91, 72, 44, .55); }
.ability-note { font-size: 0.5625rem; color: rgba(86, 68, 42, .55); line-height: 1.7; margin-top: 0.625rem; }

/* =========================================================
   Technology
   ========================================================= */
.tech-status-bar { display: flex; align-items: center; gap: 0.9375rem; border: 0.0625rem solid rgba(100, 77, 44, .22); background: rgba(255, 250, 234, .18); padding: 0.625rem 0.8125rem; margin-bottom: 1rem; }
.tech-status-icon { width: 2.5rem; height: 2.5rem; border: 0.0625rem solid rgba(108, 83, 46, .3); display: grid; place-items: center; color: #776039; font-size: 1.25rem; }
.tech-status-main { flex: 1; }
.tech-status-main .ts-title { font-size: 0.6875rem; color: #4d3c27; letter-spacing: .03em; }
.tech-status-main .ts-sub { font-size: 0.5625rem; color: rgba(83, 67, 42, .55); margin-top: 0.125rem; }
.research-track { height: 0.3125rem; margin-top: 0.4375rem; background: rgba(96, 74, 42, .14); }
.research-track i { display: block; height: 100%; background: linear-gradient(90deg, #6e8262, #a6b485); }
.tech-status-actions { display: flex; gap: 0.3125rem; }
.tech-tree-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 18.125rem; gap: 1.25rem; }
.tech-tree { overflow-x: auto; }
.tech-columns { display: grid; grid-template-columns: 8.125rem repeat(3, minmax(9.375rem, 1fr)); gap: 0.4375rem; align-items: stretch; }
.tech-col-head { text-align: center; font-size: 0.5625rem; color: rgba(88, 70, 43, .6); letter-spacing: .1em; padding: 0.3125rem 0.25rem 0.5rem; border-bottom: 0.0625rem solid rgba(96, 72, 40, .2); }
.tech-col-head strong { display: block; font-family: var(--font-title); font-weight: 400; font-size: 0.9375rem; color: #51402a; margin-bottom: 0.125rem; }
.tech-branch-label { display: flex; flex-direction: column; justify-content: center; padding: 0.5rem 0.375rem; font-size: 0.625rem; color: #4e3d28; }
.tech-branch-label small { font-size: 0.5rem; color: rgba(88, 70, 45, .52); margin-top: 0.125rem; line-height: 1.45; }
.tech-node {
  position: relative; text-align: left;
  min-height: 4.75rem; padding: 0.4375rem 0.5rem; border: 0.0625rem solid rgba(100, 76, 43, .22);
  background: rgba(255, 250, 235, .16); color: var(--ink-soft);
  transition: all .15s;
}
.tech-node:hover { border-color: rgba(118, 89, 49, .5); background: rgba(255, 250, 237, .38); }
.tech-node.locked { opacity: .48; }
.tech-node.done { border-color: rgba(90, 118, 74, .42); background: rgba(95, 124, 79, .09); }
.tech-node.active-research { border-color: rgba(169, 137, 77, .65); box-shadow: inset 0 0 0 0.0625rem rgba(178, 144, 80, .2); }
.tech-node.selected { border-color: #8c6f3c; background: rgba(150, 116, 60, .1); box-shadow: inset 0 0 0 0.0625rem rgba(122, 92, 47, .25); }
.tech-node .tn-tier { font-size: 0.5rem; color: rgba(97, 75, 44, .5); letter-spacing: .06em; display: flex; justify-content: space-between; gap: 0.3125rem; }
.tech-node .tn-name { font-family: var(--font-title); font-size: 0.8125rem; color: #3f3120; margin: 0.1875rem 0; letter-spacing: .03em; }
.tech-node .tn-effect { font-size: 0.5rem; line-height: 1.45; color: rgba(81, 65, 40, .62); }
.tech-node .tn-state { font-size: 0.5rem; margin-top: 0.25rem; color: rgba(100, 77, 45, .5); }
.tech-node.done .tn-state { color: #506b42; }
.tech-node.active-research .tn-state { color: #8b6b35; }
.tech-node .node-check { position: absolute; right: 0.375rem; top: 1.25rem; color: #557245; font-size: 0.8125rem; }
.tech-detail { border-left: 0.0625rem solid rgba(98, 74, 41, .22); padding-left: 1.125rem; align-self: start; position: sticky; top: 0; }
.tech-detail h3 { font-family: var(--font-title); font-weight: 400; font-size: 1.375rem; letter-spacing: .05em; color: #3d2f1f; margin: 0 0 0.3125rem; }
.tech-detail .td-tier { font-size: 0.5625rem; color: rgba(88, 70, 44, .55); margin-bottom: 0.5625rem; }
.tech-detail .td-desc { font-size: 0.625rem; line-height: 1.75; color: rgba(76, 60, 37, .7); }
.tech-detail .td-effect { margin: 0.5625rem 0; padding: 0.5rem 0.5625rem; border-left: 0.125rem solid #8c7445; background: rgba(120, 93, 53, .06); font-size: 0.625rem; color: #5a472e; line-height: 1.6; }
.tech-detail .td-req { font-size: 0.5625rem; color: rgba(86, 68, 42, .58); line-height: 1.7; }
.tech-detail .td-req .missing { color: #8f443a; }
.tech-tiers-note { font-size: 0.5rem; color: rgba(91, 71, 44, .52); line-height: 1.8; margin-top: 0.625rem; }

/* =========================================================
   Military
   ========================================================= */
.military-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 0.9375rem; }
.military-panel-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 1.25rem; }
.army-group { border: 0.0625rem solid rgba(98, 75, 42, .18); padding: 0.5rem 0.625rem; margin-bottom: 0.4375rem; background: rgba(255, 250, 235, .14); }
.army-group-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.army-group-head strong { font-size: 0.6875rem; color: #4b3b27; font-weight: normal; }
.army-group-head span { font-size: 0.5rem; color: rgba(92, 73, 44, .5); }
.army-unit-row { display: flex; align-items: center; gap: 0.4375rem; font-size: 0.5625rem; color: #5b4830; padding: 0.1875rem 0; border-top: 0.0625rem dotted rgba(97, 74, 42, .14); }
.army-unit-row .unit-hp-mini { flex: 1; height: 0.1875rem; background: rgba(94, 72, 41, .13); }
.army-unit-row .unit-hp-mini i { display: block; height: 100%; background: #7b8f60; }
.army-unit-row .unit-state { width: 4.0625rem; color: rgba(88, 70, 44, .52); }
.training-overview { border: 0.0625rem solid rgba(99, 76, 42, .18); padding: 0.5rem 0.625rem; margin-bottom: 0.375rem; background: rgba(255, 250, 235, .13); }
.training-overview .to-head { display: flex; justify-content: space-between; font-size: 0.625rem; color: #4f3e28; margin-bottom: 0.1875rem; }
.training-overview .to-sub { font-size: 0.5rem; color: rgba(93, 73, 44, .5); }
.wars-overview .war-panel { margin-bottom: 0.4375rem; }

/* =========================================================
   Chronicle
   ========================================================= */
.chronicle-toolbar { display: flex; gap: 0.3125rem; align-items: center; margin-bottom: 0.75rem; flex-wrap: wrap; }
.filter-btn { border: 0.0625rem solid rgba(99, 76, 42, .22); background: transparent; padding: 0.3125rem 0.5625rem; font-size: 0.5625rem; color: rgba(82, 65, 41, .62); letter-spacing: .04em; }
.filter-btn.active { background: rgba(117, 88, 48, .1); border-color: rgba(118, 89, 48, .42); color: #473723; }
.chronicle-list { max-height: 62vh; overflow-y: auto; padding-right: 0.3125rem; }
.chronicle-entry { display: flex; gap: 0.875rem; padding: 0.5625rem 0.5rem; border-bottom: 0.0625rem dotted rgba(99, 76, 42, .2); }
.chronicle-entry:hover { background: rgba(255, 250, 235, .16); }
.chronicle-date { flex: 0 0 5.625rem; font-family: var(--font-small); font-size: 0.5625rem; color: rgba(88, 70, 44, .5); padding-top: 0.125rem; }
.chronicle-text { font-size: 0.625rem; line-height: 1.7; color: rgba(66, 52, 34, .82); }
.chronicle-entry.war .chronicle-text { color: #733b31; }
.chronicle-entry.rank .chronicle-text { color: #72562a; font-weight: 600; }
.chronicle-entry.danger .chronicle-text { color: #853b32; }
.chronicle-entry.tech .chronicle-text { color: #415c51; }
.chronicle-badge { display: inline-block; width: 0.3125rem; height: 0.3125rem; margin-right: 0.375rem; transform: rotate(45deg); background: #9d8653; vertical-align: middle; }
.chronicle-entry.war .chronicle-badge { background: #9b5345; }
.chronicle-entry.rank .chronicle-badge { background: #c19f56; }
.chronicle-entry.tech .chronicle-badge { background: #6f8c7e; }

/* =========================================================
   Codex / Help
   ========================================================= */
.codex-layout { display: grid; grid-template-columns: 11.875rem minmax(0, 1fr); gap: 1.375rem; }
.codex-tabs { display: flex; flex-direction: column; gap: 0.125rem; border-right: 0.0625rem solid rgba(98, 75, 42, .22); padding-right: 1rem; }
.codex-tab { text-align: left; border: 0.0625rem solid transparent; background: transparent; padding: 0.5rem 0.5625rem; color: rgba(80, 63, 39, .62); font-size: 0.625rem; letter-spacing: .04em; }
.codex-tab:hover { background: rgba(115, 86, 47, .06); }
.codex-tab.active { background: rgba(115, 86, 47, .1); border-color: rgba(109, 82, 44, .25); color: #3f3020; }
.codex-content { min-width: 0; line-height: 1.8; color: rgba(63, 50, 33, .82); font-size: 0.6875rem; }
.codex-content h3 { font-family: var(--font-title); font-weight: 400; font-size: 1.5625rem; letter-spacing: .08em; color: #34291b; margin: 0 0 0.5rem; }
.codex-content h4 { font-family: var(--font-title); font-weight: 400; font-size: 1rem; letter-spacing: .05em; color: #483823; margin: 1.125rem 0 0.375rem; padding-bottom: 0.25rem; border-bottom: 0.0625rem solid rgba(98, 75, 42, .18); }
.codex-content p { margin: 0.3125rem 0; }
.codex-content ul { margin: 0.25rem 0 0.5rem; padding-left: 1.125rem; }
.codex-content li { margin: 0.1875rem 0; }
.codex-content strong { color: #3d2d1b; font-weight: 600; }
.codex-lead { font-size: 0.75rem; color: #5e4a2f; border-left: 0.125rem solid rgba(139, 108, 58, .5); padding-left: 0.6875rem; margin-bottom: 0.75rem !important; }
.codex-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem 1.125rem; }
.codex-card { border: 0.0625rem solid rgba(99, 75, 42, .18); background: rgba(255, 250, 235, .18); padding: 0.5625rem 0.6875rem; }
.codex-card strong { display: block; font-size: 0.6875rem; margin-bottom: 0.125rem; }
.codex-card span { font-size: 0.5625rem; line-height: 1.65; color: rgba(75, 60, 38, .68); }
.shortcut-table { width: 100%; border-collapse: collapse; font-size: 0.625rem; }
.shortcut-table td { padding: 0.3125rem 0.375rem; border-bottom: 0.0625rem dotted rgba(98, 75, 42, .18); }
.shortcut-table td:first-child { width: 6.875rem; color: #4d3b25; }
kbd {
  display: inline-block; border: 0.0625rem solid rgba(98, 74, 41, .35); border-bottom-width: 0.125rem;
  background: rgba(255, 250, 236, .35); padding: 0.0625rem 0.3125rem; font-family: var(--font-small);
  font-size: 0.5625rem; color: #4b3b26; margin-right: 0.1875rem;
}

/* =========================================================
   Settings
   ========================================================= */
.settings-section { border-bottom: 0.0625rem solid rgba(99, 75, 42, .2); padding: 0 0 1rem; margin-bottom: 1rem; }
.settings-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 0.5rem 0; }
.settings-row label { font-size: 0.6875rem; color: #4e3e29; }
.settings-row .setting-desc { font-size: 0.5625rem; color: rgba(83, 67, 42, .55); }
.settings-control { display: flex; align-items: center; gap: 0.625rem; width: 16.25rem; max-width: 48%; }
.settings-control input[type=range] { flex: 1; }
.settings-value { width: 2.125rem; font-size: 0.5625rem; text-align: right; color: #5f4b2f; }
.toggle-switch { width: 2.375rem; height: 1.25rem; border: 0.0625rem solid rgba(92, 70, 40, .4); background: rgba(94, 72, 40, .1); position: relative; cursor: pointer; transition: background .18s; flex: 0 0 auto; }
.toggle-switch::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 0.875rem; height: 0.875rem; background: #8d7447; transition: transform .18s, background .18s; box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0,.14); }
.toggle-switch.on { background: rgba(99, 125, 82, .18); border-color: rgba(92, 118, 78, .5); }
.toggle-switch.on::after { transform: translateX(1.125rem); background: #5c774b; }
.save-actions { display: flex; flex-wrap: wrap; gap: 0.4375rem; }
.danger-zone .action-btn { color: #813f35; border-color: rgba(133, 65, 53, .3); }
.save-note { font-size: 0.5625rem; color: rgba(85, 68, 43, .52); margin-top: 0.5rem; line-height: 1.6; }

/* =========================================================
   Tooltip
   ========================================================= */
.tooltip {
  position: fixed; z-index: 400; pointer-events: none;
  max-width: 19.375rem; padding: 0.5625rem 0.75rem;
  color: #d8caa4;
  background: linear-gradient(170deg, rgba(39, 51, 40, .98), rgba(13, 21, 15, .98));
  border: 0.0625rem solid rgba(167, 139, 82, .46);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, .45), inset 0 0 0 0.125rem rgba(4, 8, 5, .45);
  font-size: 0.625rem; line-height: 1.65; letter-spacing: .02em;
  animation: tooltipIn .12s ease;
}
@keyframes tooltipIn { from { opacity: 0; transform: translateY(0.1875rem); } to { opacity: 1; transform: translateY(0); } }
.tooltip .tt-title { color: #ecd9a8; font-family: var(--font-title); font-size: 0.875rem; letter-spacing: .05em; margin-bottom: 0.25rem; }
.tooltip .tt-row { display: flex; justify-content: space-between; gap: 0.75rem; color: rgba(192, 180, 148, .65); font-size: 0.5625rem; }
.tooltip .tt-row b { color: #e3d3aa; font-weight: normal; }
.tooltip .tt-desc { font-size: 0.5625rem; color: rgba(184, 173, 144, .62); margin-top: 0.25rem; }
.tooltip .tt-gold { color: #e3c790; }
.tooltip .tt-red { color: #d39882; }
.tooltip .tt-green { color: #aac191; }
.tooltip .tt-sep { height: 0.0625rem; margin: 0.375rem 0; background: linear-gradient(90deg, rgba(174, 145, 87, .3), transparent); }

/* =========================================================
   Diplomacy prompt / letters
   ========================================================= */
.prompt-layer {
  position: fixed; inset: 0; z-index: 230;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(9, 13, 10, .55), rgba(4, 7, 5, .88));
  backdrop-filter: blur(0.25rem);
}
.missive {
  position: relative;
  width: min(33.75rem, calc(100vw - 3.125rem));
  color: var(--ink);
  padding: 1.875rem 2.125rem 1.5rem;
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255, 250, 232, .72), transparent 46%),
    repeating-linear-gradient(0deg, rgba(100, 76, 42, .018) 0 0.0625rem, transparent 0.0625rem 0.25rem),
    linear-gradient(120deg, #eadfc8, #ddceac);
  border: 0.0625rem solid #7b6137;
  box-shadow: inset 0 0 0 0.1875rem #d9c69f, inset 0 0 0 0.25rem rgba(93, 70, 37, .55), 0 2rem 5.625rem rgba(0, 0, 0, .7);
  animation: missiveIn .3s ease both;
}
@keyframes missiveIn { from { opacity: 0; transform: translateY(0.9375rem) rotate(-.3deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
.missive::before { content: ""; position: absolute; inset: 0.75rem; border: 0.0625rem solid rgba(104, 79, 43, .22); pointer-events: none; }
.missive .missive-eyebrow { text-align: center; font-size: 0.5625rem; letter-spacing: .3em; color: rgba(101, 78, 43, .6); }
.missive h2 { text-align: center; font-family: var(--font-title); font-weight: 400; font-size: 1.8125rem; letter-spacing: .13em; color: #362a1a; margin: 0.5rem 0 0.25rem; }
.missive .missive-from { text-align: center; font-size: 0.625rem; letter-spacing: .06em; color: rgba(96, 74, 43, .65); margin-bottom: 1rem; }
.missive p { font-size: 0.75rem; line-height: 1.95; color: rgba(56, 44, 29, .82); margin: 0 0 0.875rem; text-align: justify; }
.missive .missive-ornament { text-align: center; color: rgba(122, 94, 50, .6); font-size: 0.8125rem; letter-spacing: 1em; padding-left: 1em; margin: 0.75rem 0; }
.missive-actions { display: flex; gap: 0.5rem; justify-content: center; margin-top: 0.5rem; }
.missive-actions .action-btn { min-width: 8.125rem; padding: 0.5625rem 0.75rem; font-size: 0.6875rem; }
.missive-actions .accept { background: linear-gradient(180deg, #3d4f3c, #273529); color: #ebe0bb; border-color: rgba(82, 108, 76, .6); }
.missive-actions .decline { background: rgba(140, 67, 54, .06); color: #854338; border-color: rgba(138, 71, 57, .4); }
.wax-stamp {
  position: absolute; right: 1.4375rem; bottom: 1.125rem; width: 3rem; height: 3rem; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #9c4a3f, #5f2722);
  box-shadow: 0 0 0 0.125rem rgba(102, 51, 41, .25), inset 0 0 0 0.25rem rgba(78, 32, 27, .3), 0 0.25rem 0.625rem rgba(67, 37, 22, .3);
  display: grid; place-items: center; color: #ddc694; font-family: var(--font-title); font-size: 1.125rem;
  transform: rotate(-11deg);
}
.prompt-pile { position: absolute; top: 1.0625rem; right: 1.25rem; font-size: 0.5625rem; color: rgba(102, 79, 44, .55); letter-spacing: .06em; }

/* =========================================================
   Subdialogs (trade / war options / inputs)
   ========================================================= */
.subdialog-backdrop {
  position: fixed; inset: 0; z-index: 260;
  display: grid; place-items: center;
  background: rgba(7, 10, 8, .66);
  backdrop-filter: blur(0.1875rem);
}
.subdialog {
  width: min(38.75rem, calc(100vw - 3.125rem));
  color: var(--ink);
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 249, 229, .68), transparent 45%),
    linear-gradient(115deg, #e9dec6, #dbcca9);
  border: 0.0625rem solid #796039;
  box-shadow: inset 0 0 0 0.1875rem #d7c49e, inset 0 0 0 0.25rem rgba(91, 69, 36, .45), 0 1.5rem 4.375rem rgba(0, 0, 0, .65);
  padding: 1.375rem 1.5625rem;
  max-height: calc(100vh - 5rem); overflow-y: auto;
}
.subdialog h3 { margin: 0 0 0.25rem; font-family: var(--font-title); font-weight: 400; font-size: 1.5rem; letter-spacing: .08em; color: #382c1c; }
.subdialog .sub-copy { font-size: 0.625rem; color: rgba(82, 65, 41, .6); line-height: 1.7; margin: 0 0 0.875rem; }
.subdialog .field-label { margin-top: 0.625rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-grid.full { grid-template-columns: 1fr; }
.form-field { display: flex; flex-direction: column; gap: 0.25rem; }
.form-field label { font-size: 0.5625rem; letter-spacing: .06em; color: rgba(87, 69, 43, .65); }
.form-field input, .form-field select {
  background: rgba(255, 250, 236, .45); border: 0.0625rem solid rgba(97, 74, 41, .3);
  padding: 0.4375rem 0.5rem; color: var(--ink); font-size: 0.6875rem; min-width: 0;
}
.form-field select { height: 2.125rem; }
.radio-list { display: flex; flex-direction: column; gap: 0.3125rem; margin: 0.5rem 0; }
.radio-option { display: flex; gap: 0.5rem; align-items: flex-start; border: 0.0625rem solid rgba(98, 74, 42, .2); padding: 0.4375rem 0.5625rem; font-size: 0.625rem; color: #51402a; cursor: pointer; line-height: 1.5; }
.radio-option:hover { background: rgba(255, 250, 236, .26); }
.radio-option input { margin-top: 0.125rem; accent-color: #7a633b; }
.radio-option span small { display: block; font-size: 0.5rem; color: rgba(86, 68, 42, .55); margin-top: 0.0625rem; }
.subdialog-actions { display: flex; justify-content: flex-end; gap: 0.4375rem; margin-top: 1rem; border-top: 0.0625rem solid rgba(98, 74, 41, .2); padding-top: 0.75rem; }
.subdialog-info { padding: 0.5rem 0.625rem; background: rgba(105, 80, 45, .06); border-left: 0.125rem solid rgba(137, 107, 56, .4); font-size: 0.5625rem; line-height: 1.75; color: rgba(74, 59, 38, .68); margin: 0.5rem 0; }
.subdialog-error { color: #8e4037; font-size: 0.5625rem; min-height: 1.3em; margin-top: 0.375rem; }
.war-cause-detail { font-size: 0.5625rem; color: rgba(82, 64, 40, .6); margin-top: 0.1875rem; }

/* =========================================================
   Game over / victory
   ========================================================= */
.gameover-screen {
  position: fixed; inset: 0; z-index: 280;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(21, 22, 17, .92), rgba(6, 7, 5, .98));
}
.gameover-inner {
  text-align: center; width: min(37.5rem, 86vw);
  color: #d8c9a5; position: relative; padding: 2.375rem 2.125rem;
}
.gameover-inner::before { content: ""; position: absolute; inset: 0; border: 0.0625rem solid rgba(175, 142, 82, .28); }
.gameover-inner .go-eyebrow { font-size: 0.5625rem; letter-spacing: .34em; color: rgba(178, 155, 108, .5); }
.gameover-inner h2 { font-family: var(--font-title); font-size: 3.25rem; font-weight: 400; letter-spacing: .16em; margin: 0.75rem 0 0.625rem; color: #e3d0a3; text-shadow: 0 0.25rem 1.375rem #000; }
.gameover-inner p { font-size: 0.75rem; line-height: 2; color: rgba(194, 180, 148, .62); margin: 0 0 1.625rem; }
.gameover-inner .royal-btn { margin: 0 0.3125rem; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1320px) {
  .resource-chip { min-width: 3.25rem; padding: 0 0.25rem; }
  .res-group.basic .resource-chip { min-width: 3.625rem; }
  .resource-chip .res-name { display: none !important; }
  .realm-block { min-width: 14.625rem; }
  .realm-name { font-size: 1rem; }
  .context-drawer { width: 20.625rem; }
  .side-panel { width: 24.75rem; }
  .selection-bar { width: min(41.25rem, calc(100vw - 25rem)); }
}
@media (max-width: 1120px) {
  :root { --hud-pad: 0.625rem; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; height: 4rem; }
  .realm-block { height: 4rem; min-width: 13.125rem; padding-right: 0.625rem; }
  #crest-canvas { width: 2.5625rem; height: 3rem; }
  .realm-date { display: none; }
  .resource-bar { height: 4rem; padding: 0.25rem 0.3125rem; }
  .status-block { height: 4rem; }
  .speed-box, .chronicle-btn, .menu-btn { height: 2.25rem; }
  .speed-box { height: 2.25rem; }
  .speed-btn { width: 1.75rem; }
  .chronicle-btn, .menu-btn { width: 2.25rem; height: 2.25rem; }
  .resource-chip .res-value { font-size: 0.6875rem; }
  .resource-chip { height: 1.5625rem; min-width: 2.8125rem; }
  .resource-chip .res-svg { width: 0.875rem; height: 0.875rem; }
  #main-nav { width: 3.5rem; left: 0.625rem; top: 5.25rem; }
  .nav-btn { width: 2.75rem; height: 2.875rem; }
  .nav-btn span { font-size: 0.4375rem; }
  .nav-btn.small { height: 2.1875rem; }
  .adviser-widget { left: 4.625rem; bottom: 6.875rem; width: 14.5rem; }
  .side-panel { left: 4.625rem; top: 5.25rem; width: 23.75rem; }
  .context-drawer { top: 5.25rem; right: 0.625rem; width: 19.375rem; bottom: 12.875rem; }
  .minimap-wrap { width: 13.125rem; right: 0.625rem; }
  .selection-bar { width: calc(100vw - 25rem); min-height: 5.25rem; }
  .selection-actions { flex-basis: 9.75rem; }
  .unit-card { flex-basis: 6.25rem; }
  .zoom-hint { display: none; }
  .toast-layer { width: min(25rem, 45vw); }
  .tech-tree-wrap { grid-template-columns: minmax(0, 1fr) 15.625rem; }
  .tech-columns { grid-template-columns: 7rem repeat(3, minmax(8.4375rem, 1fr)); }
  .layout-three { grid-template-columns: 13.125rem minmax(0,1fr); }
  .layout-three .tech-detail { grid-column: 1 / -1; border-left: 0; border-top: 0.0625rem solid rgba(98,75,42,.2); padding: 1rem 0 0; position: static; }
  .modal { width: calc(100vw - 2.5rem); max-height: calc(100vh - 2.5rem); }
  .menu-brand { width: 58vw; }
  .menu-aside { display: none; }
}
@media (max-width: 900px) {
  .topbar { grid-template-columns: auto 1fr; height: auto; gap: 0.4375rem; }
  .resource-bar { grid-column: 1 / -1; grid-row: 2; height: auto; min-height: 3rem; flex-wrap: wrap; order: 3; }
  .realm-block { height: 3.625rem; min-width: 11.875rem; }
  .status-block { justify-self: end; height: 3.625rem; }
  .res-group { flex-wrap: wrap; }
  .res-group.basic { flex: 1; }
  .resource-chip { height: 1.4375rem; min-width: 2.9375rem; }
  .resource-chip .res-value { font-size: 0.625rem; }
  .res-divider { display: none; }
  .realm-name { font-size: 0.875rem; }
  .realm-sub { font-size: 0.5625rem; }
  .realm-block { gap: 0.3125rem; }
  #crest-canvas { width: 2.125rem; height: 2.625rem; }
  #main-nav { top: 8.875rem; width: 3.125rem; padding: 0.25rem; }
  .nav-btn { width: 2.5rem; height: 2.4375rem; }
  .nav-btn svg { font-size: 1rem; }
  .nav-btn span { font-size: 0.375rem; }
  .nav-btn.small { height: 2rem; }
  .adviser-widget { display: none; }
  .side-panel { top: 8.875rem; left: 4.25rem; width: min(24.375rem, calc(100vw - 5.5rem)); bottom: 6.25rem; }
  .context-drawer { top: 8.875rem; bottom: auto; max-height: min(52vh, 26.875rem); width: min(20.625rem, calc(100vw - 4.875rem)); }
  .minimap-wrap { display: none; }
  .selection-bar { width: calc(100vw - 4.875rem); left: auto; right: 0.625rem; transform: none; bottom: 0.625rem; }
  @keyframes selectionIn { from { opacity: 0; transform: translateY(0.4375rem); } to { opacity: 1; transform: translateY(0); } }
  .selection-bar { animation-name: selectionInMobile; }
  @keyframes selectionInMobile { from { opacity: 0; transform: translateY(0.4375rem); } to { opacity: 1; transform: translateY(0); } }
  .selection-actions { flex-basis: 9.0625rem; }
  .placement-hint { bottom: 6.75rem; width: calc(100vw - 6.25rem); justify-content: center; font-size: 0.625rem; }
  .toast-layer { top: 9.25rem; width: 60vw; }
  .modal { width: calc(100vw - 1.5rem); max-height: calc(100vh - 1.5rem); }
  .modal-body { padding: 0.875rem 1rem 1.125rem; }
  .modal-header { padding: 1rem 1rem 0.75rem; }
  .modal-header h2 { font-size: 1.5rem; }
  .modal-footer { padding: 0.6875rem 1rem; }
  .internal-layout, .diplomacy-layout { grid-template-columns: 1fr; }
  .side-list { border-right: 0; border-bottom: 0.0625rem solid rgba(98, 75, 42, .22); padding: 0 0 0.625rem; margin-bottom: 0.3125rem; max-height: 10.625rem; overflow-y: auto; }
  .overview-columns, .military-panel-grid { grid-template-columns: 1fr; }
  .tech-tree-wrap { grid-template-columns: 1fr; }
  .tech-detail { border-left: 0; border-top: 0.0625rem solid rgba(98,75,42,.2); padding: 0.9375rem 0 0; }
  .codex-layout { grid-template-columns: 1fr; }
  .codex-tabs { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 0.0625rem solid rgba(98, 75, 42, .22); padding: 0 0 0.5rem; margin-bottom: 0.75rem; }
  .codex-tab { padding: 0.375rem 0.5rem; font-size: 0.5625rem; }
  .setup-body { grid-template-columns: 1fr; gap: 1.125rem; }
  .identity-column { border-right: 0; border-bottom: 0.0625rem solid rgba(93, 71, 39, .24); padding-right: 0; padding-bottom: 1.125rem; display: grid; grid-template-columns: 10.625rem 1fr; gap: 0.75rem 1.25rem; }
  .identity-column > .section-label { grid-column: 1 / -1; }
  .crest-preview { height: 9.375rem; margin: 0; }
  .identity-column .setup-divider, .identity-column .world-hint { display: none; }
  .choice-grid { grid-template-columns: repeat(3, 1fr); }
  .difficulty-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-overlay { padding: 5vh 6vw; }
  .menu-brand { width: 70vw; }
  .game-title { font-size: clamp(3.875rem, 12vw, 6.875rem); }
  .setup-wrap { width: calc(100vw - 1.5rem); margin: 0.875rem auto; padding: 1.375rem 1.375rem 1.125rem; }
  .setup-head h2 { font-size: 1.875rem; }
}
@media (max-width: 620px) {
  .realm-block { min-width: 0; flex: 1; }
  .status-block { gap: 0.25rem; }
  .chronicle-btn { display: none; }
  .speed-btn { width: 1.5rem; }
  .menu-btn { width: 2rem; }
  .realm-date { display: none; }
  .resource-chip { min-width: 2.6875rem; padding: 0 0.1875rem; gap: 0.1875rem; }
  .resource-chip .res-value { font-size: 0.5625rem; }
  .resource-chip .res-svg { width: 0.75rem; height: 0.75rem; flex-basis: 0.75rem; }
  .resource-bar { padding: 0.1875rem 0.25rem; }
  .selection-actions { display: none; }
  .selection-bar { width: calc(100vw - 4.875rem); }
  .context-drawer { width: calc(100vw - 4.875rem); }
  .unit-card { flex-basis: 5rem; min-width: 4.5rem; }
  .build-grid { grid-template-columns: 1fr 1fr; }
  .build-card { min-height: 7.625rem; }
  .side-panel { left: 4.125rem; width: calc(100vw - 4.75rem); }
  .modal-header .head-actions .action-btn { padding: 0.3125rem 0.4375rem; font-size: 0.5625rem; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .difficulty-grid { grid-template-columns: repeat(2, 1fr); }
  .choice-card small { display: none; }
  .setup-row { flex-direction: column; }
  .identity-column { grid-template-columns: 1fr; }
  .crest-preview { width: 100%; }
  .setup-head p { display: none; }
  .setup-footer-note { display: none; }
  .setup-head h2 { font-size: 1.5625rem; }
  .tech-columns { grid-template-columns: 5.75rem repeat(3, minmax(7.625rem, 1fr)); }
  .tech-node { min-height: 5.125rem; }
  .toast-layer { width: 72vw; }
  .prompt-layer .missive { padding: 1.5rem 1.25rem 1.25rem; }
  .missive h2 { font-size: 1.5rem; }
  .diplo-actions { grid-template-columns: repeat(2, 1fr); }
  .game-title { font-size: clamp(3.375rem, 15vw, 5.375rem); }
  .menu-brand { width: 82vw; }
  .menu-buttons { width: 100%; }
  .game-title-cn { font-size: 1.375rem; }
  .setup-wrap { padding: 1.125rem 0.875rem 0.9375rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =========================================================
   Readability, hierarchy & late layout refinements
   ========================================================= */
:root {
  --top-h: 5.125rem;
  --hud-pad: 0.75rem;
}
.topbar {
  top: 0.625rem;
  left: 0.75rem;
  right: 0.75rem;
  height: 5.125rem;
  gap: 0.5rem;
}
.realm-block {
  height: 5.125rem;
  min-width: 18.25rem;
  padding: 0.375rem 1rem 0.375rem 0.5rem;
  overflow: hidden;
}
#crest-canvas { width: 3.375rem; height: 3.875rem; }
.realm-text { display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; }
.realm-name { font-size: 1.25rem; line-height: 1.18; }
.realm-sub { font-size: 0.65625rem; margin-top: 0.1875rem; }
.realm-date { font-size: 0.59375rem; margin-top: 0.25rem; letter-spacing: .03em; }
.resource-bar {
  height: 5.125rem;
  padding: 0.3125rem 0.625rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.375rem;
  overflow: hidden;
}
.res-group {
  flex: 0 0 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 0 0.3125rem;
  position: relative;
  min-width: 0;
}
.res-group + .res-group::before {
  content: "";
  position: absolute;
  left: -0.25rem; top: 18%; height: 64%; width: 0.0625rem;
  background: linear-gradient(transparent, rgba(171, 142, 82, .28), transparent);
}
.res-group-name {
  font-size: 0.46875rem;
  letter-spacing: .18em;
  color: rgba(185, 168, 130, .43);
  padding-left: 0.25rem;
  margin-bottom: 0.125rem;
  line-height: 1;
}
.res-chips { display: flex; align-items: center; gap: 0; }
.resource-chip {
  min-width: 3.875rem;
  width: 3.875rem;
  height: 1.875rem;
  padding: 0 0.1875rem;
  gap: 0.25rem;
  border-radius: 0.0625rem;
}
.resource-chip .res-svg { width: 1rem; height: 1rem; flex: 0 0 1rem; }
.res-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; min-width: 0; }
.resource-chip .res-value { font-size: 0.75rem; line-height: 1.1; }
.resource-chip .res-name { display: block; font-size: 0.46875rem; color: rgba(176, 161, 127, .48); letter-spacing: .02em; margin-top: 0.125rem; white-space: nowrap; }
.resource-chip:hover .res-name { color: rgba(205, 189, 151, .76); }
.status-block { height: 5.125rem; gap: 0.375rem; }
.chronicle-btn, .menu-btn, .speed-box { height: 2.4375rem; }
.speed-box { height: 2.4375rem; }
.speed-btn { width: 2.125rem; font-size: 0.75rem; }
.chronicle-btn, .menu-btn { width: 2.4375rem; height: 2.4375rem; }

#main-nav {
  left: 0.75rem;
  top: 6.25rem;
  width: 4rem;
  gap: 0.125rem;
  padding: 0.375rem;
}
.nav-btn { height: 3.25rem; }
.nav-btn svg { font-size: 1.25rem; }
.nav-btn span { font-size: 0.5625rem; letter-spacing: .1em; color: rgba(206, 192, 156, .7); }
.nav-btn.small { height: 2.4375rem; }
.nav-btn.small span { font-size: 0.5rem; }

.adviser-widget {
  left: 5.5rem; bottom: 7.875rem; width: 18.625rem;
  border-color: rgba(172, 143, 88, .5);
}
.adviser-head { font-size: 0.6875rem; padding: 0.5625rem 0.6875rem; }
#adviser-count { font-size: 0.625rem; }
.adviser-body { padding: 0.625rem 0.75rem 0.6875rem; }
.advice-title { font-size: 0.78125rem; }
.advice-text { font-size: 0.7rem; line-height: 1.7; }
.wax-seal { width: 1.25rem; height: 1.25rem; font-size: 0.625rem; }
.minimap-wrap { width: 15.75rem; padding: 0.4375rem; right: 0.75rem; bottom: 0.75rem; }
.minimap-head { font-size: 0.625rem; }
.minimap-legend { font-size: 0.53125rem; }
.paused-indicator, .waiting-prompt { top: 6.1875rem; font-size: 0.625rem; padding: 0.375rem 1.25rem; }
.waiting-prompt { top: 9.4375rem; }
.zoom-hint { bottom: 7.75rem; font-size: 0.59375rem; }
.toast-layer { top: 8.25rem; width: min(30rem, 54vw); }
.toast { font-size: 0.75rem; padding: 0.5625rem 1rem 0.5625rem 0.8125rem; line-height: 1.6; }
.placement-hint { bottom: 7.75rem; padding: 0.625rem 1.25rem; font-size: 0.75rem; }
.placement-hint .placement-keys { font-size: 0.625rem; }

.tooltip { max-width: 20.625rem; padding: 0.6875rem 0.875rem; font-size: 0.6875rem; line-height: 1.7; }
.tooltip .tt-title { font-size: 1rem; margin-bottom: 0.3125rem; }
.tooltip .tt-row { font-size: 0.625rem; }
.tooltip .tt-desc { font-size: 0.625rem; line-height: 1.65; }

.side-panel {
  left: 5.5rem; top: 6.25rem; bottom: 7.625rem; width: 28.25rem;
}
.panel-head { padding: 1.125rem 1.25rem 0.875rem; }
.panel-head h3 { font-size: 1.6875rem; }
.panel-head p { font-size: 0.6875rem; }
.panel-head .eyebrow { font-size: 0.625rem; }
.build-tabs { padding: 0.625rem 0.9375rem 0; }
.build-tab { font-size: 0.6875rem; padding: 0.5rem 0.5625rem; }
.build-scroll { padding: 0.8125rem 0.9375rem 1.125rem; }
.build-grid { gap: 0.5rem; }
.build-card { min-height: 9.125rem; padding: 0.5rem 0.5625rem 0.625rem; }
.build-card .card-icon { height: 2.8125rem; }
.build-card .card-icon canvas { width: 5.25rem; height: 3.875rem; }
.build-card h4 { font-size: 0.875rem; }
.build-card .card-level { font-size: 0.5625rem; }
.build-card .cost-line { font-size: 0.59375rem; gap: 0.25rem 0.4375rem; }
.build-card .card-days { font-size: 0.53125rem; }
.build-card .lock-note { font-size: 0.625rem; }
.build-help { font-size: 0.625rem; line-height: 1.8; padding: 0.625rem 0.75rem; }
.section-label { font-size: 0.6875rem; }
.colony-card { padding: 0.6875rem 0.8125rem; }
.colony-card strong { font-size: 0.9375rem; }
.colony-card span { font-size: 0.59375rem; }
.build-work-summary {
  display: flex; gap: 0.875rem; align-items: center; flex-wrap: wrap;
  font-size: 0.59375rem; color: rgba(83, 66, 41, .64);
  border-top: 0.0625rem solid rgba(98, 75, 42, .17);
  border-bottom: 0.0625rem solid rgba(98, 75, 42, .17);
  padding: 0.4375rem 0.125rem; margin: 0.125rem 0 0.625rem;
}
.build-work-summary span { display: inline-flex; align-items: center; gap: 0.25rem; }
.build-work-summary svg { font-size: 0.75rem; color: #897042; }
.build-work-summary b { font-family: var(--font-title); font-weight: 400; font-size: 0.875rem; color: #4d3b24; }
.build-crown-card {
  display: grid; grid-template-columns: 8.25rem minmax(0, 1fr); gap: 0.75rem;
  border: 0.0625rem solid rgba(113, 86, 47, .33);
  background: linear-gradient(135deg, rgba(144, 110, 59, .10), rgba(255, 250, 235, .24));
  padding: 0.625rem 0.75rem; margin-bottom: 0.625rem;
}
.build-crown-card .crown-art { display: flex; align-items: center; justify-content: center; border-right: 0.0625rem solid rgba(105, 80, 45, .17); }
.build-crown-card .crown-art canvas { width: 7.5rem; height: 5.5rem; }
.build-crown-card h4 { font-family: var(--font-title); font-size: 1.125rem; font-weight: 400; letter-spacing: .06em; margin: 0.125rem 0 0.25rem; color: #3e3120; }
.build-crown-card p { font-size: 0.59375rem; line-height: 1.6; color: rgba(78, 61, 37, .66); margin: 0 0 0.3125rem; }
.crown-cost { display: flex; flex-wrap: wrap; gap: 0.1875rem 0.5rem; font-size: 0.59375rem; color: #655233; margin: 0.25rem 0; }
.crown-note { font-size: 0.5625rem; line-height: 1.5; color: rgba(88, 68, 42, .58); margin: 0.1875rem 0; }
.crown-actions { display: flex; gap: 0.3125rem; flex-wrap: wrap; margin-top: 0.3125rem; }
.mini-btn.primary-ish { background: rgba(82, 104, 73, .12); border-color: rgba(88, 116, 76, .45); color: #435b3a; }

.context-drawer {
  right: 0.75rem; top: 6.25rem; bottom: 13.375rem; width: 23.875rem;
}
.drawer-head { padding: 1rem 1.0625rem 0.8125rem; }
.drawer-head h3 { font-size: 1.4375rem; }
.drawer-head .drawer-sub { font-size: 0.625rem; }
.drawer-body { padding: 0.875rem 1.0625rem 1.25rem; }
.drawer-section { margin-top: 1rem; }
.drawer-section h4 { font-size: 0.6875rem; }
.description { font-size: 0.71875rem; line-height: 1.8; }
.effect-line { font-size: 0.65625rem; line-height: 1.75; }
.stat-line { font-size: 0.6875rem; padding: 0.375rem 0; }
.stat-line .k { font-size: 0.65625rem; }
.stat-line .v { font-size: 0.6875rem; }
.empty-note { font-size: 0.625rem; }
.meter-label { font-size: 0.625rem; }
.action-row { gap: 0.375rem; margin-top: 0.5rem; }
.action-btn { font-size: 0.6875rem; padding: 0.5rem 0.625rem; min-width: 6.25rem; }
.worker-chip { font-size: 0.625rem; padding: 0.1875rem 0.375rem; }
.training-item { font-size: 0.625rem; padding: 0.4375rem 0.5rem; }
.training-item .tr-name { font-size: 0.6875rem; min-width: 4.125rem; }
.queue-item { font-size: 0.625rem; }
.recipe-btn { font-size: 0.625rem; padding: 0.375rem; }
.unit-stats .unit-stat { font-size: 0.625rem; }
.action-btn svg { font-size: 0.8125rem; }

.selection-bar {
  bottom: 0.75rem;
  width: min(50rem, calc(100vw - 25.625rem));
  min-height: 6rem;
  padding: 0.5625rem;
}
.unit-card { flex-basis: 7.5rem; padding: 0.4375rem 0.5rem; }
.unit-card .portrait { height: 2.1875rem; }
.unit-card .u-name { font-size: 0.6875rem; }
.unit-card .u-kind { font-size: 0.5625rem; }
.cmd-btn { font-size: 0.5625rem; padding: 0.4375rem 0.25rem; }
.cmd-btn svg { font-size: 0.875rem; }
.selection-actions { flex-basis: 12.125rem; }
.selection-note { font-size: 0.53125rem; }

.modal {
  width: min(74.375rem, calc(100vw - 3.75rem));
  max-height: calc(100vh - 3.125rem);
}
.modal.wide { width: min(82.5rem, calc(100vw - 2.875rem)); }
.modal.narrow { width: min(38.125rem, calc(100vw - 3.125rem)); }
.modal-header { padding: 1.5625rem 2rem 1.125rem; }
.modal-header .eyebrow { font-size: 0.625rem; }
.modal-header h2 { font-size: 2.25rem; margin: 0.4375rem 0 0.3125rem; }
.modal-header p { font-size: 0.71875rem; }
.modal-body { padding: 1.4375rem 2rem 1.875rem; font-size: 0.75rem; }
.modal-footer { padding: 0.9375rem 2rem; }
.section-title { font-size: 1.125rem; margin-bottom: 0.6875rem; }
.panel-subtitle { font-size: 0.65625rem; }
.action-btn { font-size: 0.75rem; }
.mini-btn { font-size: 0.6875rem; padding: 0.375rem 0.625rem; }
.list-item { padding: 0.625rem 0.5625rem; }
.list-item .li-name { font-size: 0.8125rem; }
.list-item .li-sub { font-size: 0.59375rem; line-height: 1.5; }
.list-item .li-badge { font-size: 0.5625rem; }
.list-item .li-icon { width: 1.875rem; height: 1.875rem; }
.side-list h4 { font-size: 0.625rem; }
.summary-grid { gap: 0.5rem; }
.summary-cell { padding: 0.6875rem 0.75rem; }
.summary-cell .sc-label { font-size: 0.59375rem; }
.summary-cell .sc-value { font-size: 1.4375rem; }
.summary-cell .sc-note { font-size: 0.5625rem; line-height: 1.5; }
.resource-grid { gap: 0.375rem; }
.resource-cell { padding: 0.4375rem 0.5rem; }
.resource-cell .rc-top { font-size: 0.625rem; }
.resource-cell .rc-value { font-size: 0.65625rem; }
.resource-grid .rc-bar { height: 0.15625rem; }
.stability-copy p { font-size: 0.625rem; }
.stability-copy strong { font-size: 0.75rem; }
.stage-step { font-size: 0.625rem; padding: 0.5625rem 0.3125rem; }
.stage-step strong { font-size: 1rem; }
.stage-step small { font-size: 0.5625rem; }
.worker-summary { font-size: 0.625rem; }
.worker-summary b { font-size: 1.25rem; }
.upkeep-item { font-size: 0.65625rem; }
.population-line span { font-size: 0.6875rem; }
.building-index { gap: 0.375rem; }
.building-index-row { padding: 0.4375rem 0.5rem; }
.building-index-row .bi-name { font-size: 0.65625rem; }
.building-index-row .bi-level { font-size: 0.5625rem; }
.building-index-row .mini-canvas { width: 2.5rem; height: 1.9375rem; flex-basis: 2.5rem; }
.cooldown-note { font-size: 0.5625rem; }
.nearby-note { font-size: 0.625rem; line-height: 1.7; }
.effect-line { font-size: 0.65625rem; }
.gov-note, .stat-line .v.bad { color: #914538; }
.ability-note { font-size: 0.65625rem; }
.war-panel .war-title { font-size: 0.75rem; }
.war-panel .war-meta { font-size: 0.625rem; }
.war-exhaust { font-size: 0.5625rem; }
.trade-head strong { font-size: 1.0625rem; }
.trade-detail { font-size: 0.625rem; }
.trade-row { font-size: 0.625rem; }
.tech-status-main .ts-title { font-size: 0.75rem; }
.tech-status-main .ts-sub { font-size: 0.625rem; }
.tech-columns { grid-template-columns: 8.5rem repeat(3, minmax(9.875rem, 1fr)); gap: 0.5rem; }
.tech-col-head { font-size: 0.625rem; }
.tech-col-head strong { font-size: 1rem; }
.tech-branch-label { font-size: 0.6875rem; }
.tech-branch-label small { font-size: 0.5625rem; }
.tech-node { min-height: 5.25rem; padding: 0.5rem 0.5625rem; }
.tech-node .tn-tier { font-size: 0.53125rem; }
.tech-node .tn-name { font-size: 0.875rem; margin: 0.25rem 0; }
.tech-node .tn-effect { font-size: 0.5625rem; line-height: 1.5; }
.tech-node .tn-state { font-size: 0.53125rem; }
.tech-tree-wrap { grid-template-columns: minmax(0, 1fr) 18.75rem; gap: 1.375rem; }
.tech-detail h3 { font-size: 1.5rem; }
.tech-detail .td-desc { font-size: 0.6875rem; }
.tech-detail .td-effect { font-size: 0.6875rem; }
.tech-detail .td-req { font-size: 0.625rem; }
.tech-tiers-note { font-size: 0.5625rem; }
.military-summary .summary-cell .sc-value { font-size: 1.375rem; }
.army-group-head strong { font-size: 0.75rem; }
.army-unit-row { font-size: 0.625rem; }
.chronicle-text { font-size: 0.71875rem; }
.chronicle-date { font-size: 0.625rem; flex-basis: 6.375rem; }
.codex-content { font-size: 0.75rem; line-height: 1.85; }
.codex-content h3 { font-size: 1.6875rem; }
.codex-content h4 { font-size: 1.0625rem; margin-top: 1.25rem; }
.codex-lead { font-size: 0.8125rem; }
.codex-card strong { font-size: 0.75rem; }
.codex-card span { font-size: 0.65625rem; }
.codex-grid { gap: 0.5625rem 1.25rem; }
.codex-tab { font-size: 0.6875rem; padding: 0.5625rem 0.625rem; }
.codex-tabs { width: auto; }
.shortcut-table { font-size: 0.6875rem; }
.shortcut-table td { padding: 0.375rem 0.4375rem; }
kbd { font-size: 0.625rem; padding: 0.125rem 0.375rem; }
.settings-row label { font-size: 0.75rem; }
.settings-row .setting-desc { font-size: 0.625rem; }
.save-note { font-size: 0.59375rem; }
.missive { width: min(37.5rem, calc(100vw - 3.125rem)); padding: 2.125rem 2.375rem 1.625rem; }
.missive h2 { font-size: 2rem; }
.missive .missive-from { font-size: 0.6875rem; }
.missive p { font-size: 0.8125rem; line-height: 1.9; }
.missive-actions .action-btn { min-width: 9.375rem; font-size: 0.75rem; padding: 0.625rem 0.875rem; }
.subdialog { width: min(42.5rem, calc(100vw - 3.125rem)); padding: 1.5625rem 1.75rem; }
.subdialog h3 { font-size: 1.625rem; }
.subdialog .sub-copy { font-size: 0.6875rem; }
.form-field label { font-size: 0.625rem; }
.form-field input, .form-field select, .trade-offer-form select, .trade-offer-form input { font-size: 0.75rem; padding: 0.5rem 0.5625rem; }
.subdialog-info { font-size: 0.625rem; }
.radio-option { font-size: 0.6875rem; }
.radio-option span small { font-size: 0.5625rem; }
.modal .split-section { gap: 1.375rem; }
.gameover-inner p { font-size: 0.8125rem; }
.gameover-inner h2 { font-size: 3.625rem; }

@media (max-width: 1600px) {
  .resource-chip { width: 3.625rem; min-width: 3.625rem; }
  .resource-chip .res-value { font-size: 0.71875rem; }
  .realm-block { min-width: 16.875rem; }
  .realm-name { font-size: 1.125rem; }
  .context-drawer { width: 22.5rem; }
  .selection-bar { width: min(47.5rem, calc(100vw - 25rem)); }
}
@media (max-width: 1400px) {
  .res-group-name { display: none; }
  .resource-bar { padding-top: 0.25rem; padding-bottom: 0.25rem; }
  .resource-chip { width: 3.3125rem; min-width: 3.3125rem; height: 2.125rem; }
  .resource-chip .res-svg { width: 0.9375rem; height: 0.9375rem; flex-basis: 0.9375rem; }
  .resource-chip .res-name { font-size: 0.4375rem; }
  .resource-chip .res-value { font-size: 0.65625rem; }
  .res-group { padding: 0 0.1875rem; }
  .realm-block { min-width: 15.5rem; }
  .side-panel { width: 26.625rem; }
  .topbar { gap: 0.375rem; }
}
@media (max-width: 1180px) {
  :root { --hud-pad: 0.625rem; }
  .topbar { height: 4.25rem; }
  .realm-block { height: 4.25rem; min-width: 13.75rem; }
  #crest-canvas { width: 2.625rem; height: 3.125rem; }
  .realm-name { font-size: 1rem; }
  .realm-date { display: none; }
  .realm-sub { font-size: 0.5625rem; }
  .resource-bar { height: 4.25rem; padding: 0.1875rem 0.3125rem; }
  .resource-chip { width: 2.875rem; min-width: 2.875rem; height: 1.8125rem; }
  .resource-chip .res-name { display: none; }
  .resource-chip .res-value { font-size: 0.6875rem; }
  .resource-chip .res-svg { width: 0.8125rem; height: 0.8125rem; flex-basis: 0.8125rem; }
  .res-group { padding: 0 0.125rem; }
  .status-block { height: 4.25rem; }
  .speed-btn { width: 1.8125rem; }
  .chronicle-btn, .menu-btn, .speed-box { height: 2.1875rem; }
  .chronicle-btn, .menu-btn { width: 2.1875rem; }
  #main-nav { top: 5.375rem; left: 0.625rem; width: 3.5rem; }
  .nav-btn { width: 2.75rem; height: 2.875rem; }
  .nav-btn span { font-size: 0.5rem; }
  .nav-btn.small { height: 2.1875rem; }
  .side-panel { top: 5.375rem; left: 4.625rem; width: 25.625rem; }
  .context-drawer { top: 5.375rem; right: 0.625rem; width: 20.625rem; bottom: 13rem; }
  .selection-bar { width: calc(100vw - 25rem); }
  .adviser-widget { left: 4.625rem; width: 15.625rem; }
  .minimap-wrap { width: 13.75rem; }
  .tech-tree-wrap { grid-template-columns: minmax(0, 1fr) 16.875rem; }
  .tech-columns { grid-template-columns: 7.5rem repeat(3, minmax(9.0625rem, 1fr)); }
}
@media (max-width: 900px) {
  .topbar { height: auto; }
  .realm-block { height: 3.625rem; min-width: 11.25rem; }
  .resource-bar { grid-column: 1 / -1; grid-row: 2; min-height: 3.125rem; height: auto; }
  .resource-chip { width: 3rem; min-width: 3rem; height: 1.5rem; }
  .resource-chip .res-name { display: none; }
  .resource-chip .res-svg { width: 0.75rem; height: 0.75rem; flex-basis: 0.75rem; }
  .resource-chip .res-value { font-size: 0.625rem; }
  .res-group { flex-direction: row; align-items: center; padding: 0 0.0625rem; }
  .status-block { height: 3.625rem; }
  .chronicle-btn { display: grid; }
  #main-nav { top: 7.875rem; left: 0.625rem; width: 3.125rem; }
  .side-panel { top: 7.875rem; left: 4.25rem; width: min(25.625rem, calc(100vw - 5.5rem)); }
  .context-drawer { top: 7.875rem; width: min(21.875rem, calc(100vw - 4.875rem)); }
  .adviser-widget { display: none; }
  .minimap-wrap { display: none; }
  .selection-bar { width: calc(100vw - 4.875rem); left: auto; right: 0.625rem; transform: none; bottom: 0.625rem; }
  .tech-tree-wrap { grid-template-columns: 1fr; }
  .tech-columns { grid-template-columns: 6.875rem repeat(3, minmax(8.75rem, 1fr)); }
  .modal { width: calc(100vw - 1.5rem); max-height: calc(100vh - 1.5rem); }
  .modal-header { padding: 1.125rem 1.125rem 0.8125rem; }
  .modal-header h2 { font-size: 1.75rem; }
  .modal-body { padding: 1rem 1.125rem 1.375rem; }
  .modal-footer { padding: 0.75rem 1.125rem; }
  .build-crown-card { grid-template-columns: 6.25rem minmax(0, 1fr); }
  .build-crown-card .crown-art canvas { width: 5.875rem; height: 4.625rem; }
}
@media (max-width: 620px) {
  .resource-chip { width: 2.625rem; min-width: 2.625rem; }
  .realm-block { min-width: 0; flex: 1; }
  .side-panel { left: 4.125rem; width: calc(100vw - 4.75rem); top: 7.625rem; bottom: 5.625rem; }
  .context-drawer { top: 7.625rem; width: calc(100vw - 4.875rem); }
  .build-crown-card { grid-template-columns: 1fr; }
  .build-crown-card .crown-art { display: none; }
  .selection-bar { width: calc(100vw - 4.875rem); }
  .modal-header h2 { font-size: 1.5rem; }
  .action-btn { font-size: 0.6875rem; }
}

/* Compact management surfaces */
.context-drawer {
  bottom: auto;
  max-height: calc(100vh - 19.875rem);
}
.selection-actions {
  flex: 0 0 17.875rem;
  align-content: center;
}
.cmd-btn {
  flex: 0 0 3.75rem;
  min-height: 3rem;
  justify-content: center;
}
.selection-note { display: none; }
.selection-bar { min-height: 5.75rem; }
@media (max-width: 1180px) {
  .context-drawer { max-height: calc(100vh - 18.75rem); }
  .selection-actions { flex-basis: 15.625rem; }
  .cmd-btn { flex-basis: 3.5rem; }
}
@media (max-width: 900px) {
  .context-drawer { max-height: 48vh; }
  .selection-actions { flex-basis: 13.125rem; }
  .cmd-btn { flex-basis: 3rem; min-height: 2.6875rem; }
}
@media (max-width: 620px) {
  .selection-actions { flex-basis: 10.5rem; }
  .cmd-btn { flex-basis: 2.625rem; min-height: 2.5rem; font-size: 0.46875rem; }
  .cmd-btn svg { font-size: 0.75rem; }
}

/* Keep resource labels legible on common 1280–1320 px displays. */
@media (min-width: 1181px) and (max-width: 1320px) {
  .resource-chip .res-name { display: block !important; font-size: 0.4625rem; letter-spacing: 0; }
  .resource-chip { height: 2.4375rem; }
  .resource-chip .res-value { font-size: 0.65625rem; }
  .res-group-name { display: block; font-size: 0.425rem; margin-bottom: 0.0625rem; }
}

/* =========================================================
   Larger in-game typography (readability pass)
   ========================================================= */
.realm-name { font-size: 1.375rem; }
.realm-sub { font-size: 0.7375rem; margin-top: 0.25rem; }
.realm-date { font-size: 0.675rem; margin-top: 0.3125rem; }
#adviser-count { font-size: 0.6875rem; }
.resource-chip .res-value { font-size: 0.8375rem; }
.resource-chip .res-name { font-size: 0.55rem; line-height: 1.2; }
.res-group-name { font-size: 0.525rem; letter-spacing: .13em; }
.nav-btn span { font-size: 0.65625rem; }
.nav-btn svg { font-size: 1.1875rem; }
.speed-btn { font-size: 0.8125rem; }
.zoom-hint { font-size: 0.675rem; }
.paused-indicator, .waiting-prompt { font-size: 0.7rem; }
.toast { font-size: 0.8125rem; }
.placement-hint { font-size: 0.8125rem; }
.placement-hint .placement-keys { font-size: 0.675rem; }

.adviser-widget { width: 20.375rem; }
.adviser-head { font-size: 0.75rem; }
.advice-title { font-size: 0.875rem; }
.advice-text { font-size: 0.7875rem; line-height: 1.75; }
.wax-seal { width: 1.375rem; height: 1.375rem; font-size: 0.6875rem; }
.minimap-head { font-size: 0.6875rem; }
.minimap-legend { font-size: 0.59375rem; }

/* Build drawer */
.panel-head h3 { font-size: 1.875rem; }
.panel-head p { font-size: 0.7625rem; line-height: 1.65; }
.panel-head .eyebrow { font-size: 0.6875rem; }
.build-tab { font-size: 0.75rem; }
.build-card { min-height: 9.875rem; }
.build-card .card-icon { height: 3rem; }
.build-card .card-icon canvas { width: 5.5rem; height: 4.125rem; }
.build-card h4 { font-size: 0.96875rem; }
.build-card .card-level { font-size: 0.625rem; }
.build-card .cost-line { font-size: 0.675rem; gap: 0.25rem 0.5rem; }
.build-card .card-days { font-size: 0.6125rem; }
.build-card .lock-note { font-size: 0.6875rem; }
.build-help { font-size: 0.6875rem; line-height: 1.8; }
.section-label { font-size: 0.75rem; }
.colony-card strong { font-size: 1rem; }
.colony-card span { font-size: 0.675rem; }
.build-work-summary { font-size: 0.6625rem; }
.build-work-summary b { font-size: 0.9375rem; }
.build-crown-card h4 { font-size: 1.25rem; }
.build-crown-card p { font-size: 0.6875rem; line-height: 1.65; }
.crown-cost { font-size: 0.675rem; }
.crown-note { font-size: 0.6375rem; line-height: 1.6; }
.mini-btn { font-size: 0.75rem; }

/* Selected object / unit bar */
.drawer-head h3 { font-size: 1.5625rem; }
.drawer-head .drawer-sub { font-size: 0.71875rem; }
.drawer-section h4 { font-size: 0.78125rem; }
.description { font-size: 0.8125rem; }
.effect-line { font-size: 0.7375rem; line-height: 1.75; }
.stat-line { font-size: 0.7625rem; padding: 0.4375rem 0; }
.stat-line .k { font-size: 0.7375rem; }
.stat-line .v { font-size: 0.7625rem; }
.empty-note, .meter-label { font-size: 0.7rem; }
.action-btn { font-size: 0.775rem; padding: 0.5625rem 0.6875rem; min-width: 6.75rem; }
.worker-chip { font-size: 0.7rem; }
.training-item { font-size: 0.7rem; }
.training-item .tr-name { font-size: 0.75rem; }
.queue-item { font-size: 0.7rem; }
.recipe-btn { font-size: 0.7rem; }
.unit-stats .unit-stat { font-size: 0.7rem; }
.action-btn svg { font-size: 0.875rem; }

.selection-bar {
  width: min(57.5rem, calc(100vw - 26.25rem));
  min-height: 6.375rem;
}
.selection-cards { gap: 0.3125rem; }
.unit-card { flex-basis: 7.5rem; }
.unit-card .portrait { height: 2.375rem; }
.unit-card .u-name { font-size: 0.78125rem; }
.unit-card .u-kind { font-size: 0.65625rem; }
.cmd-btn { font-size: 0.64375rem; min-height: 3.125rem; }
.cmd-btn svg { font-size: 0.9375rem; }
.selection-actions { flex-basis: 16.875rem; }
.tooltip { font-size: 0.775rem; line-height: 1.7; max-width: 22.5rem; }
.tooltip .tt-title { font-size: 1.0625rem; }
.tooltip .tt-row { font-size: 0.7rem; }
.tooltip .tt-desc { font-size: 0.71875rem; line-height: 1.7; }

/* Full pages */
.modal-header .eyebrow { font-size: 0.6875rem; }
.modal-header h2 { font-size: 2.375rem; }
.modal-header p { font-size: 0.78125rem; }
.modal-body { font-size: 0.8375rem; line-height: 1.7; }
.section-title { font-size: 1.25rem; }
.panel-subtitle { font-size: 0.7375rem; }
.list-item .li-name { font-size: 0.875rem; }
.list-item .li-sub { font-size: 0.675rem; }
.list-item .li-badge { font-size: 0.625rem; }
.side-list h4 { font-size: 0.6875rem; }
.summary-cell .sc-label { font-size: 0.6625rem; }
.summary-cell .sc-value { font-size: 1.625rem; }
.summary-cell .sc-note { font-size: 0.625rem; line-height: 1.55; }
.resource-cell .rc-top { font-size: 0.7125rem; }
.resource-cell .rc-value { font-size: 0.75rem; }
.stability-copy p { font-size: 0.7125rem; line-height: 1.65; }
.stability-copy strong { font-size: 0.8125rem; }
.stage-step { font-size: 0.7rem; }
.stage-step strong { font-size: 1.0625rem; }
.stage-step small { font-size: 0.625rem; }
.worker-summary { font-size: 0.7125rem; }
.worker-summary b { font-size: 1.375rem; }
.upkeep-item { font-size: 0.7375rem; }
.population-line span { font-size: 0.75rem; }
.building-index-row .bi-name { font-size: 0.7375rem; }
.building-index-row .bi-level { font-size: 0.625rem; }
.cooldown-note, .nearby-note { font-size: 0.6875rem; }
.ability-note { font-size: 0.7375rem; }
.war-panel .war-title { font-size: 0.8125rem; }
.war-panel .war-meta { font-size: 0.6875rem; }
.war-exhaust { font-size: 0.6375rem; }
.trade-head strong { font-size: 1.125rem; }
.trade-detail, .trade-row { font-size: 0.7rem; }
.tech-status-main .ts-title { font-size: 0.84375rem; }
.tech-status-main .ts-sub { font-size: 0.7rem; }
.tech-col-head { font-size: 0.6875rem; }
.tech-branch-label { font-size: 0.75rem; }
.tech-branch-label small { font-size: 0.625rem; }
.tech-node { min-height: 6rem; padding: 0.5625rem 0.625rem; }
.tech-node .tn-tier { font-size: 0.59375rem; }
.tech-node .tn-name { font-size: 0.96875rem; }
.tech-node .tn-effect { font-size: 0.6375rem; line-height: 1.55; }
.tech-node .tn-state { font-size: 0.59375rem; }
.tech-detail h3 { font-size: 1.625rem; }
.tech-detail .td-desc, .tech-detail .td-effect { font-size: 0.7625rem; }
.tech-detail .td-req { font-size: 0.6875rem; }
.tech-tiers-note { font-size: 0.625rem; }
.army-group-head strong { font-size: 0.8125rem; }
.army-unit-row { font-size: 0.7rem; }
.chronicle-text { font-size: 0.8125rem; }
.chronicle-date { font-size: 0.6875rem; flex-basis: 7rem; }
.codex-content { font-size: 0.8375rem; }
.codex-content h3 { font-size: 1.8125rem; }
.codex-content h4 { font-size: 1.125rem; }
.codex-lead { font-size: 0.90625rem; }
.codex-card strong { font-size: 0.8125rem; }
.codex-card span { font-size: 0.71875rem; }
.codex-tab { font-size: 0.75rem; }
.shortcut-table { font-size: 0.75rem; }
kbd { font-size: 0.675rem; }
.settings-row label { font-size: 0.85rem; }
.settings-row .setting-desc { font-size: 0.7125rem; }
.save-note { font-size: 0.6625rem; }

/* Missives, prompts and forms */
.missive h2 { font-size: 2.1875rem; }
.missive .missive-from { font-size: 0.75rem; }
.missive p { font-size: 0.9rem; line-height: 1.9; }
.missive-actions .action-btn { font-size: 0.8125rem; }
.subdialog h3 { font-size: 1.75rem; }
.subdialog .sub-copy { font-size: 0.78125rem; line-height: 1.8; }
.form-field label { font-size: 0.7rem; }
.form-field input, .form-field select, .trade-offer-form select, .trade-offer-form input { font-size: 0.825rem; }
.subdialog-info { font-size: 0.7125rem; line-height: 1.7; }
.radio-option { font-size: 0.78125rem; }
.radio-option span small { font-size: 0.65rem; }
.gameover-inner p { font-size: 0.875rem; }

@media (max-width: 1499px) {
  .adviser-widget { width: 19.25rem; }
  .build-card h4 { font-size: 0.9375rem; }
  .build-card .cost-line { font-size: 0.65rem; }
  .modal-body { font-size: 0.8125rem; }
  .tech-node .tn-name { font-size: 0.9375rem; }
  .selection-actions { flex-basis: 17.875rem; }
}
@media (max-width: 1320px) {
  .realm-name { font-size: 1.25rem; }
  .realm-sub { font-size: 0.6875rem; }
  .realm-date { font-size: 0.625rem; }
  .resource-chip .res-value { font-size: 0.775rem; }
  .resource-chip .res-name { font-size: 0.5rem; }
  .res-group-name { font-size: 0.4625rem; }
  .adviser-widget { width: 17.25rem; }
  .advice-title { font-size: 0.8125rem; }
  .advice-text { font-size: 0.73125rem; }
  .build-card h4 { font-size: 0.90625rem; }
  .build-card .cost-line { font-size: 0.625rem; }
  .build-card { min-height: 9.625rem; }
  .drawer-head h3 { font-size: 1.4375rem; }
  .description { font-size: 0.7625rem; }
  .stat-line { font-size: 0.725rem; }
  .unit-card { flex-basis: 7.75rem; }
  .unit-card .u-name { font-size: 0.75rem; }
  .cmd-btn { font-size: 0.6125rem; }
  .selection-actions { flex-basis: 16.25rem; }
  .modal-body { font-size: 0.8rem; }
  .summary-cell .sc-value { font-size: 1.5rem; }
  .tech-node .tn-name { font-size: 0.90625rem; }
}
@media (max-width: 1180px) {
  .resource-chip .res-value { font-size: 0.7375rem; }
  .realm-name { font-size: 1.125rem; }
  .adviser-widget { width: 15.5rem; }
  .advice-text { font-size: 0.6875rem; }
  .build-card h4 { font-size: 0.875rem; }
  .modal-body { font-size: 0.775rem; }
}

/* =========================================================
   Larger in-game typography — final comfort tuning
   ========================================================= */
.realm-name { font-size: 1.5rem; }
.realm-sub { font-size: 0.78125rem; }
.realm-date { font-size: 0.7125rem; }
.resource-chip .res-value { font-size: 0.875rem; }
.resource-chip .res-name { font-size: 0.59375rem; }
.res-group-name { font-size: 0.5625rem; }
.nav-btn span { font-size: 0.7rem; }
.adviser-head { font-size: 0.7875rem; }
.advice-title { font-size: 0.925rem; }
.advice-text { font-size: 0.825rem; line-height: 1.78; }
.zoom-hint { font-size: 0.7125rem; }
.paused-indicator, .waiting-prompt { font-size: 0.75rem; }
.toast { font-size: 0.85rem; }
.placement-hint { font-size: 0.85rem; }
.minimap-head { font-size: 0.725rem; }
.minimap-legend { font-size: 0.6375rem; }

/* Build drawer */
.panel-head h3 { font-size: 2rem; }
.panel-head p { font-size: 0.8125rem; }
.panel-head .eyebrow { font-size: 0.71875rem; }
.build-tab { font-size: 0.7875rem; }
.build-card { min-height: 10.5rem; }
.build-card h4 { font-size: 1.03125rem; }
.build-card .card-level { font-size: 0.6875rem; }
.build-card .cost-line { font-size: 0.725rem; }
.build-card .card-days { font-size: 0.675rem; }
.build-card .lock-note { font-size: 0.7375rem; }
.build-help { font-size: 0.75rem; line-height: 1.8; }
.section-label { font-size: 0.78125rem; }
.colony-card strong { font-size: 1.0625rem; }
.colony-card span { font-size: 0.725rem; }
.build-work-summary { font-size: 0.7125rem; }
.build-work-summary b { font-size: 1rem; }
.build-crown-card h4 { font-size: 1.3125rem; }
.build-crown-card p { font-size: 0.75rem; }
.crown-cost { font-size: 0.725rem; }
.crown-note { font-size: 0.6875rem; }
.mini-btn { font-size: 0.7875rem; }

/* Drawer */
.drawer-head h3 { font-size: 1.625rem; }
.drawer-head .drawer-sub { font-size: 0.7625rem; }
.drawer-section h4 { font-size: 0.8125rem; }
.description { font-size: 0.8625rem; }
.effect-line { font-size: 0.775rem; }
.stat-line { font-size: 0.8125rem; }
.stat-line .k { font-size: 0.775rem; }
.stat-line .v { font-size: 0.8125rem; }
.empty-note, .meter-label { font-size: 0.7375rem; }
.action-btn { font-size: 0.8125rem; }
.worker-chip { font-size: 0.7375rem; }
.training-item { font-size: 0.7375rem; }
.training-item .tr-name { font-size: 0.7875rem; }
.queue-item { font-size: 0.7375rem; }
.recipe-btn { font-size: 0.7375rem; }
.unit-stats .unit-stat { font-size: 0.7375rem; }

/* Unit bar */
.unit-card .u-name { font-size: 0.8125rem; }
.unit-card .u-kind { font-size: 0.7rem; }
.cmd-btn { font-size: 0.6875rem; }
.cmd-btn svg { font-size: 1rem; }
.tooltip { font-size: 0.8125rem; }
.tooltip .tt-title { font-size: 1.125rem; }
.tooltip .tt-row { font-size: 0.75rem; }
.tooltip .tt-desc { font-size: 0.7625rem; line-height: 1.7; }

/* Pages */
.modal-header .eyebrow { font-size: 0.725rem; }
.modal-header h2 { font-size: 2.5rem; }
.modal-header p { font-size: 0.825rem; }
.modal-body { font-size: 0.8625rem; }
.section-title { font-size: 1.3125rem; }
.panel-subtitle { font-size: 0.775rem; }
.list-item .li-name { font-size: 0.925rem; }
.list-item .li-sub { font-size: 0.75rem; line-height: 1.55; }
.list-item .li-badge { font-size: 0.6625rem; }
.side-list h4, .mini-title { font-size: 0.725rem; }
.summary-cell .sc-label { font-size: 0.7rem; }
.summary-cell .sc-value { font-size: 1.6875rem; }
.summary-cell .sc-note { font-size: 0.6875rem; }
.resource-cell .rc-top { font-size: 0.7625rem; }
.resource-cell .rc-value { font-size: 0.8125rem; }
.resource-cell .rc-value span { font-size: 0.6rem !important; }
.stability-copy p { font-size: 0.7625rem; }
.stability-copy strong { font-size: 0.8625rem; }
.stage-step { font-size: 0.75rem; }
.stage-step strong { font-size: 1.125rem; }
.stage-step small { font-size: 0.6875rem; }
.worker-summary { font-size: 0.7625rem; }
.worker-summary b { font-size: 1.4375rem; }
.upkeep-item { font-size: 0.775rem; }
.population-line span { font-size: 0.8rem; }
.building-index-row .bi-name { font-size: 0.7875rem; }
.building-index-row .bi-level { font-size: 0.675rem; }
.cooldown-note, .nearby-note { font-size: 0.7375rem; }
.ability-note { font-size: 0.775rem; }
.war-panel .war-title { font-size: 0.8625rem; }
.war-panel .war-meta { font-size: 0.7375rem; }
.war-exhaust { font-size: 0.7rem; }
.trade-head strong { font-size: 1.1875rem; }
.trade-detail, .trade-row { font-size: 0.7625rem; }
.tech-status-main .ts-title { font-size: 0.8875rem; }
.tech-status-main .ts-sub { font-size: 0.75rem; }
.tech-col-head { font-size: 0.7375rem; }
.tech-branch-label { font-size: 0.7875rem; }
.tech-branch-label small { font-size: 0.6875rem; }
.tech-node { min-height: 7rem; padding: 0.625rem 0.6875rem; }
.tech-node .tn-tier { font-size: 0.6375rem; }
.tech-node .tn-name { font-size: 1.0125rem; }
.tech-node .tn-effect { font-size: 0.7375rem; line-height: 1.6; }
.tech-node .tn-state { font-size: 0.6625rem; }
.tech-detail h3 { font-size: 1.6875rem; }
.tech-detail .td-desc, .tech-detail .td-effect { font-size: 0.8125rem; }
.tech-detail .td-req { font-size: 0.75rem; }
.tech-tiers-note { font-size: 0.7rem; }
.army-group-head strong { font-size: 0.85rem; }
.army-unit-row { font-size: 0.7625rem; }
.chronicle-text { font-size: 0.8625rem; }
.chronicle-date { font-size: 0.725rem; }
.codex-content { font-size: 0.875rem; }
.codex-content h3 { font-size: 1.875rem; }
.codex-content h4 { font-size: 1.1875rem; }
.codex-lead { font-size: 0.95rem; }
.codex-card strong { font-size: 0.85rem; }
.codex-card span { font-size: 0.7625rem; }
.codex-tab { font-size: 0.7875rem; }
.shortcut-table { font-size: 0.7875rem; }
kbd { font-size: 0.725rem; }
.settings-row label { font-size: 0.9rem; }
.settings-row .setting-desc { font-size: 0.7625rem; }
.save-note { font-size: 0.7125rem; }

/* Forms and prompts */
.missive h2 { font-size: 2.3125rem; }
.missive .missive-from { font-size: 0.7875rem; }
.missive p { font-size: 0.95rem; }
.subdialog h3 { font-size: 1.8125rem; }
.subdialog .sub-copy { font-size: 0.825rem; }
.form-field label { font-size: 0.75rem; }
.form-field input, .form-field select, .trade-offer-form select, .trade-offer-form input { font-size: 0.875rem; }
.subdialog-info { font-size: 0.7625rem; }
.radio-option { font-size: 0.8125rem; }
.radio-option span small { font-size: 0.6875rem; }
.gameover-inner p { font-size: 0.925rem; }

/* Give the wider text a little more room on desktop. */
@media (min-width: 1400px) {
  .side-panel { width: 30.75rem; }
  .context-drawer { width: 26.25rem; }
  .modal.narrow { width: min(43.125rem, calc(100vw - 3.125rem)); }
}
@media (max-width: 1399px) and (min-width: 1181px) {
  .side-panel { width: 29.25rem; }
  .context-drawer { width: 25rem; }
}
@media (max-width: 1320px) {
  .realm-name { font-size: 1.3125rem; }
  .realm-sub { font-size: 0.7125rem; }
  .resource-chip .res-value { font-size: 0.8rem; }
  .resource-chip .res-name { font-size: 0.5375rem; }
  .res-group-name { font-size: 0.5rem; }
  .advice-text { font-size: 0.7625rem; }
  .build-card h4 { font-size: 0.9625rem; }
  .build-card .cost-line { font-size: 0.675rem; }
  .build-card .card-days { font-size: 0.625rem; }
  .drawer-head h3 { font-size: 1.5rem; }
  .description { font-size: 0.8125rem; }
  .stat-line { font-size: 0.7625rem; }
  .stat-line .k, .stat-line .v { font-size: 0.7375rem; }
  .tech-node { min-height: 6.625rem; }
  .tech-node .tn-name { font-size: 0.9375rem; }
  .tech-node .tn-effect { font-size: 0.6875rem; }
  .modal-body { font-size: 0.825rem; }
  .summary-cell .sc-value { font-size: 1.5625rem; }
  .selection-actions { flex-basis: 15.625rem; }
  .unit-card { flex-basis: 7.25rem; }
  .cmd-btn { font-size: 0.6375rem; }
}
@media (max-width: 1180px) {
  .resource-chip .res-value { font-size: 0.75rem; }
  .realm-name { font-size: 1.1875rem; }
  .adviser-widget { width: 16.5rem; }
  .advice-text { font-size: 0.7375rem; }
  .build-card h4 { font-size: 0.925rem; }
  .modal-body { font-size: 0.8rem; }
  .tech-node .tn-name { font-size: 0.9rem; }
}
@media (max-width: 900px) {
  .selection-bar { width: calc(100vw - 5.5rem); }
  .selection-actions { flex-basis: 13rem; }
  .unit-card { flex-basis: 6.75rem; }
  .cmd-btn { font-size: 0.625rem; }
}
@media (max-width: 620px) {
  .selection-actions { flex-basis: 10.875rem; }
  .unit-card { flex-basis: 6rem; }
  .cmd-btn { font-size: 0.5625rem; }
}

/* Remaining secondary labels: keep the readable floor */
.resource-chip { height: 2.125rem; }
.resource-chip .res-value { font-size: 0.8875rem; }
.resource-chip .res-name { font-size: 0.6375rem; }
.res-group-name { font-size: 0.5875rem; }
.tag { font-size: 0.6875rem; padding: 0.1875rem 0.5rem; }
.drawer-tab { font-size: 0.725rem; }
.stability-note { font-size: 0.7rem; line-height: 1.6; }
.slot-info { font-size: 0.7rem; }
.cost-chips { font-size: 0.7rem; }
.build-section-title { font-size: 0.7rem; }
.modal-footer .note { font-size: 0.6875rem; }
.empty-state { font-size: 0.75rem; }
.relation-pill { font-size: 0.625rem; }
.relation-info .rel-label { font-size: 0.6875rem; }
.army-group-head span { font-size: 0.65625rem; }
.trade-row .tr-state { font-size: 0.65625rem; }
.tech-detail .td-tier { font-size: 0.7125rem; }
.tech-node .tn-tier { font-size: 0.6875rem; }
.tech-node .tn-state { font-size: 0.7rem; }
.build-card .card-days { font-size: 0.7rem; }
.build-card .card-level { font-size: 0.725rem; }
.build-card .uniq-mark { font-size: 0.59375rem; }
.resource-cell .rc-value span { font-size: 0.6875rem !important; }
.build-crown-card .crown-note { font-size: 0.7125rem; }
.crown-cost { font-size: 0.75rem; }
.crown-note { font-size: 0.7125rem; }

@media (max-width: 1320px) {
  .resource-chip { height: 2.4375rem; }
  .resource-chip .res-value { font-size: 0.8125rem; }
  .resource-chip .res-name { font-size: 0.575rem; }
  .res-group-name { font-size: 0.525rem; }
  .tag { font-size: 0.65rem; }
  .build-card .cost-line { font-size: 0.7rem; }
  .build-card .card-days { font-size: 0.6625rem; }
}
@media (max-width: 1180px) {
  .resource-chip { height: 1.875rem; }
  .resource-chip .res-value { font-size: 0.7625rem; }
  .resource-chip .res-name { font-size: 0.5625rem; }
}

.diplo-actions .action-btn { font-size: 0.75rem; padding: 0.5rem 0.375rem; min-height: 2.375rem; }
.modal-header .head-actions .action-btn { font-size: 0.75rem; padding: 0.4375rem 0.625rem; }
.settlement-selector-wrap label { font-size: 0.7125rem; }
.settlement-selector { font-size: 0.775rem; padding: 0.4375rem 0.5625rem; max-width: 13.125rem; }
.filter-btn { font-size: 0.75rem; padding: 0.4375rem 0.6875rem; }
.modal-footer .note { font-size: 0.7rem; }
.missive-actions .action-btn { font-size: 0.8125rem; }
.inline-input input { font-size: 0.78125rem; }

/* Selection actions keep their proper two-column width */
.selection-actions .cmd-btn {
  flex: 1 1 calc(50% - 0.3125rem);
  min-width: 0;
  white-space: normal;
  line-height: 1.3;
}
/* Compact the settings page just enough to keep save controls visible */
.settings-section { padding-bottom: 0.625rem; margin-bottom: 0.625rem; }
.settings-row { padding: 0.375rem 0; }
.settings-value, .range-value { font-size: 0.75rem; }
.save-note { font-size: 0.75rem; line-height: 1.6; }
.settings-section .section-title { margin-bottom: 0.5rem; }

.adviser-widget { bottom: 9rem; }


@media (min-width: 1181px) { .context-drawer { max-height: calc(100vh - 23.125rem); } }


/* Setup screen readability */
.setup-head h2 { font-size: 2.625rem; }
.setup-head p { font-size: 0.8375rem; }
.field-label { font-size: 0.7875rem; }
.field-help { font-size: 0.725rem; }
.name-input-row input, .seed-input { font-size: 0.875rem; }
.world-hint strong { font-size: 0.7875rem; }
.world-hint p { font-size: 0.7125rem; line-height: 1.65; }
.choice-card strong { font-size: 1.125rem; }
.choice-card span { font-size: 0.725rem; }
.choice-card small { font-size: 0.6625rem; }
.difficulty-card strong { font-size: 1.0625rem; }
.difficulty-card small { font-size: 0.6625rem; }
.toggle-line { font-size: 0.7875rem; }
.setup-note { font-size: 0.7125rem; }
.setup-footer-note { font-size: 0.6875rem; }
.range-value { font-size: 0.75rem; }

@media (max-width: 1499px) {
  body.unit-selection-active .minimap-wrap { display: none; }
}

@media (max-width: 1320px) { .unit-card { flex-basis: 7rem; } }


/* =========================================================
   Title / settlement HUD / toast stacking refinements
   ========================================================= */
.game-title-main {
  display: block;
  font-size: clamp(3.875rem, 8.2vw, 8.875rem);
  line-height: 1.06;
  letter-spacing: .12em;
  text-indent: .12em;
  color: #e9d9ad;
}
.game-title-en {
  margin-top: 0.75rem;
  font-family: var(--font-title);
  font-size: clamp(0.6875rem, 1.05vw, 1rem);
  letter-spacing: .62em;
  text-indent: .62em;
  text-transform: uppercase;
  color: rgba(201, 178, 124, .72);
  text-shadow: 0 0.125rem 0.5rem #000;
}

.realm-title-row { display: flex; align-items: center; gap: 0.4375rem; min-width: 0; }
.realm-label {
  flex: 0 0 auto;
  padding: 0.0625rem 0.25rem;
  border: 0.0625rem solid rgba(190, 165, 113, .32);
  color: #c3ad7d;
  font-family: var(--font-small);
  font-size: 0.5rem;
  letter-spacing: .12em;
  line-height: 1.5;
}
.realm-name { font-size: clamp(1.0625rem, 1.5vw, 1.5rem); line-height: 1.12; letter-spacing: .06em; }
.realm-faction { color: #d4bd87; font-size: 0.65625rem; }
.realm-sub .sep { color: rgba(180, 162, 125, .45); }

/* Toasts must stay readable above open modals and subdialogs. */
.toast-layer { position: fixed; z-index: 340; }
.toast-count {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0 0.25rem;
  color: #f0d995;
  background: rgba(214, 183, 108, .17);
  border: 0.0625rem solid rgba(214, 183, 108, .26);
  font-size: 0.625rem;
  line-height: 1.45;
  vertical-align: 0.0625rem;
}
.toast-count.hidden { display: none; }
/* When a book page is open, keep toasts clear of its header text. */
body.modal-active .toast-layer { top: auto; bottom: 1.5rem; }
/* Build panel: settlement + build-stage selectors stacked in the header. */
.build-selectors { display: flex; flex-direction: column; gap: 0.3125rem; margin-top: 0.375rem; }
.build-selectors .settlement-selector-wrap { width: 100%; }
.build-selectors .settlement-selector { flex: 1 1 auto; max-width: 14.375rem; }