:root {
  color-scheme: dark;
  --night: #121823;
  --dark: #192332;
  --raised: #222f42;
  --hover: #2c3c52;
  --field: #151e2c;
  --line: #52647c;
  --subtle-line: #92abc43b;
  --gold: #e7bd80;
  --cream: #f5e8ce;
  --muted: #c4cfdf;
  --green: #b6d8a4;
  --paper: #f1e3c5;
  --ink: #34271c;
  --navy-cloth: url("/art/village-navy-cloth.jpg");
  --navy-panel: linear-gradient(155deg, #2739509c, #141e2ccf), var(--navy-cloth) center / 680px var(--dark);
  --serif: "Baskervville", Georgia, serif;
  --sans: "Source Sans 3", system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--night); }
body { margin: 0; color: var(--cream); font: 400 16px/1.5 var(--sans); }
button, select, input { font: inherit; }
button, select { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 2px solid #fae29d; outline-offset: 4px; }
.skip { position: absolute; z-index: 10; left: 16px; top: 10px; padding: 8px 12px; color: var(--ink); background: var(--paper); transform: translateY(-160%); }
.skip:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }

.masthead {
  background: var(--field);
  border-bottom: 1px solid var(--subtle-line);
}
.masthead-inner {
  max-width: 1664px;
  min-height: 70px;
  margin: auto;
  padding: 8px clamp(16px, 4vw, 64px);
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.brand { display: inline-flex; gap: 9px; align-items: center; font: 400 27px/1 var(--serif); letter-spacing: -.045em; white-space: nowrap; text-decoration: none; }
.brand img { width: 37px; height: 42px; object-fit: contain; }
.masthead nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 32px); color: var(--muted); font-size: 14px; }
.masthead nav a { text-decoration: none; }
.masthead nav a:hover, .masthead nav [aria-current] { color: var(--cream); }
.masthead form { margin: 0; }
.language-picker { position: relative; flex: none; }
.language-picker summary { display: grid; place-items: center; width: 34px; height: 34px; cursor: pointer; border: 1px solid var(--line); border-radius: 4px; list-style: none; }
.language-picker summary::-webkit-details-marker { display: none; }
.language-picker ul { position: absolute; z-index: 10; inset: 100% auto auto 0; min-width: max-content; margin: 5px 0 0; padding: 4px; list-style: none; background: var(--dark); border: 1px solid var(--line); border-radius: 4px; }
.language-picker li a { display: flex; align-items: center; gap: 7px; padding: 5px 8px; }
.language-picker li a:is(:hover,[aria-current]) { background: var(--hover); }
.language-flag { display: inline-block; width: 19px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 1px #ffffff51; }
.flag-nl { background: linear-gradient(#ae1c28 0 33%, #fff 33% 66%, #21468b 66%); }
.flag-es { background: linear-gradient(#aa151b 0 25%, #f1bf00 25% 75%, #aa151b 75%); }
.flag-ru { background: linear-gradient(#fff 0 33%, #0039a6 33% 66%, #d52b1e 66%); }
.flag-de { background: linear-gradient(#000 0 33%, #d00 33% 66%, #ffce00 66%); }
.flag-fr { background: linear-gradient(90deg, #002395 0 33%, #fff 33% 66%, #ed2939 66%); }
.flag-en { background: linear-gradient(90deg, transparent 42%, #cf142b 42% 58%, transparent 58%), linear-gradient(transparent 39%, #cf142b 39% 61%, transparent 61%), linear-gradient(90deg, transparent 36%, #fff 36% 64%, transparent 64%), linear-gradient(transparent 32%, #fff 32% 68%, transparent 68%), linear-gradient(33deg, transparent 44%, #fff 44% 56%, transparent 56%), linear-gradient(-33deg, transparent 44%, #fff 44% 56%, transparent 56%), #012169; }
.account-name { color: var(--gold); overflow-wrap: anywhere; }
.game-masthead .masthead-inner {
  width: 100%;
  max-width: none;
  padding: 8px clamp(8px, 1.45vw, 24px) 7px;
  display: grid;
  grid-template-columns: minmax(135px, max-content) minmax(0, 1fr) auto;
  gap: 7px clamp(10px, 1.8vw, 26px);
  background: linear-gradient(#1c29487d, #101725ce), var(--navy-cloth) center top / 760px var(--dark);
  box-shadow: inset 0 1px #9db6d340, inset 0 -1px #8da3c32d, 0 3px 9px #090f1959;
}
.page-village > .game-masthead { position: sticky; top: 0; z-index: 6; }
.construction-bar {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 5px; min-width: 0;
  padding-block-start: 7px; border-top: 1px solid var(--subtle-line); font-size: .8rem;
}
.construction-summary { display: grid; grid-template-columns: max-content max-content; align-items: baseline; gap: 0 7px; }
.construction-summary small { grid-column: 1 / -1; }
.construction-summary strong { color: var(--gold); }
.construction-summary small, #construction-idle { color: var(--muted); }
#construction-orders, #construction-idle, #construction-feedback { grid-column: 2 / -1; }
#construction-feedback:empty { display: none; }
#construction-orders {
  display: flex; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line) var(--field);
}
#construction-orders li {
  flex: 0 0 clamp(13rem, 17vw, 16rem); display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1.2rem; grid-template-rows: auto auto 3px;
  align-items: center; gap: 1px 6px; padding: 2px 6px 4px 8px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--dark);
  box-shadow: inset 0 1px #9db6d330, inset 0 -1px #0e1420;
}
#construction-orders li:not([data-queued]) { border-color: #b89865; background: linear-gradient(140deg, #33445e, var(--raised)); }
.construction-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.construction-building { display: flex; align-items: center; gap: 5px; min-width: 0; }
.construction-icon { flex: none; object-fit: contain; }
.construction-level { color: var(--muted); font-size: .72rem; font-weight: 650; white-space: nowrap; }
.level-short { display: none; }
.construction-state { color: var(--gold); line-height: 1.2; }
.construction-time { grid-column: 2 / -1; font-variant-numeric: tabular-nums; color: var(--gold); text-align: right; white-space: nowrap; }
#construction-orders progress { grid-column: 1 / -1; width: 100%; height: 3px; }
#construction-orders progress::-webkit-progress-bar { background: var(--night); }
#construction-orders progress::-webkit-progress-value { background: var(--gold); }
#construction-orders progress::-moz-progress-bar { background: var(--gold); }
#construction-orders [data-queued] :is(.construction-state, .construction-time) { color: var(--muted); }
.construction-cancel { border: 0; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1.25; padding: 1px; cursor: pointer; }
.construction-cancel:not(:disabled):is(:hover,:focus-visible) { color: #ffb8a3; }
.construction-cancel:disabled { opacity: .45; cursor: default; }
#construction-feedback { grid-column: 1 / -1; color: var(--muted); }
#construction-feedback:empty, #map-preset-status:empty { display: none; }
.game-identity {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  width: fit-content; max-width: 100%;
}
.game-identity img { flex: none; width: 36px; height: 42px; object-fit: contain; }
.game-identity span { display: grid; min-width: 0; }
.game-identity strong, .game-identity small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.game-identity strong { color: var(--cream); font: 400 22px/1.05 var(--serif); }
.guild-banner { display: block; flex: none; width: 1.7rem; height: 1.95rem; }
.game-identity > .guild-banner { width: 36px; height: 42px; }
@media (max-width: 760px) { .game-identity > .guild-banner { width: 29px; height: 34px; } }
.banner-editor { flex-basis: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: .65rem .9rem; min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: .75rem; }
.banner-editor legend { padding: 0 .35rem; }
.banner-preview { display: grid; place-items: center; padding: .65rem; background: var(--dark); border-radius: 4px; }
.banner-preview .guild-banner { width: clamp(2.6rem, 6vw, 4.5rem); height: auto; }
.banner-options { display: flex; align-items: end; flex-wrap: wrap; gap: .45rem .75rem; }
.banner-options input[type="color"] { width: 3rem; height: 2rem; cursor: pointer; }
.banner-presets { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .35rem; }
.banner-presets button { display: grid; place-items: center; padding: .3rem; background: var(--dark); border: 1px solid var(--line);
  border-radius: 4px; cursor: pointer; }
.banner-presets button:is(:hover, [aria-pressed="true"]) { border-color: var(--gold); }
.guild-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.guild-fields, .guild-actions { display: flex; flex-wrap: wrap; align-items: end; gap: .45rem .65rem; }
.guild-fields { margin-block: .65rem; }
.guild-fields label { display: grid; gap: .2rem; }
.guild-field-wide { flex-basis: 100%; }
.guild-fields :is(input, select) { max-width: 100%; color: var(--cream); background: var(--dark); border: 1px solid var(--line); border-radius: 4px; padding: .35rem; }
.guild-fields [name="tag"] { text-transform: uppercase; }
.guild-name, .guild-directory-entry { display: flex; align-items: center; gap: .55rem; }
.guild-list { list-style: none; margin: .4rem 0; padding: 0; }
.guild-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem; padding: .55rem 0; border-bottom: 1px solid var(--subtle-line); }
.guild-list small, #training-next { display: block; color: var(--gold); }
@media (max-width: 760px) { .guild-layout { grid-template-columns: minmax(0, 1fr); } }
.game-identity small { color: var(--gold); font-size: .75rem; }
.village-hud {
  display: grid; gap: 4px; min-width: 0; font-variant-numeric: tabular-nums;
  container: village-hud / inline-size;
}
.hud-resources {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)) minmax(0, 1.4fr);
  gap: 1px; border: 1px solid var(--line); border-radius: 3px;
  background: var(--line);
}
.hud-troops {
  min-width: 0; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line) var(--field);
  border: 1px solid var(--line); border-radius: 3px; background: var(--field);
}
.hud-resource {
  display: flex; align-items: center; gap: clamp(4px, .85cqi, 10px); min-width: 0;
  padding: 4px clamp(4px, .85cqi, 10px); text-decoration: none;
  background: linear-gradient(#2b3a50, var(--dark)); box-shadow: inset 0 1px #abc1db38;
}
.hud-resource-copy {
  display: grid; flex: 1; min-width: 0; line-height: 1.15; container-type: inline-size;
  overflow-wrap: anywhere;
}
.hud-resource strong { color: #fff0cf; font-size: clamp(.76rem, 18cqi, .98rem); line-height: 1.2; }
.hud-resource-population strong { font-size: clamp(.73rem, 13cqi, .98rem); }
.hud-resource-rate { color: var(--muted); font-size: clamp(.65rem, 14cqi, .72rem); }
.hud-resource img {
  width: clamp(18px, 3.4cqi, 28px); height: auto;
  object-fit: contain; flex: none; filter: drop-shadow(0 2px 1px #090f19);
}
a.hud-resource:hover strong { text-decoration: underline; }
.hud-resource-name { color: var(--gold); font-size: clamp(.68rem, 15cqi, .76rem); }
.hud-capacity-separator { color: var(--muted); }
.hud-roster { width: 100%; min-width: 38rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; text-align: center; }
.hud-roster :is(th, td) { padding: 1px 3px; white-space: nowrap; }
.hud-roster th:first-child { position: sticky; inset-inline-start: 0; z-index: 1; width: 5.5rem;
  padding-inline-start: 8px; text-align: left; font-size: .74rem; background: var(--raised); border-inline-end: 1px solid var(--line); }
.hud-roster thead { background: var(--raised); }
.hud-roster thead a { color: var(--gold); }
.hud-roster thead img { margin-inline: auto; object-fit: cover; border: 1px solid var(--line); border-radius: 2px; }
.hud-roster tr [data-group-start] { border-inline-start: 1px solid var(--subtle-line); }
.hud-roster tbody :is(th, td) { border-top: 1px solid var(--subtle-line); line-height: 1.2; }
.hud-roster tbody td { font-size: .85rem; font-weight: 700; }
.hud-roster .hud-away { background: #25354a; color: var(--gold); }
.hud-roster [data-zero] { color: var(--muted); font-weight: 450; }
@media (max-width: 760px) {
  .game-masthead .masthead-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; }
  .game-masthead .masthead-inner nav { grid-column: 2; grid-row: 1; gap: 6px; }
  .village-hud { grid-column: 1 / -1; grid-row: 2; }
  .game-identity img { width: 29px; height: 34px; }
  .construction-bar { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  #construction-orders, #construction-idle, #construction-feedback { grid-column: 1 / -1; }
  #construction-orders li { flex-basis: 11rem; }
  .level-full { display: none; }
  .level-short { display: inline; }
  .construction-summary { grid-template-columns: max-content max-content minmax(0, 1fr); }
  .construction-summary small { grid-column: auto; text-align: end; }
  .page-village > .game-masthead { position: static; }
}
@container village-hud (width < 36rem) {
  .hud-resources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container village-hud (width < 21rem) {
  .hud-resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.text-button { color: inherit; background: none; border: 0; padding: 4px 0; white-space: nowrap; }
.text-button:hover { text-decoration: underline; }
.button {
  display: inline-flex;
  min-height: 46px;
  padding: 10px 17px;
  gap: 15px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;
  text-decoration: none;
}
.button span[aria-hidden] { font-size: 18px; line-height: 1; }
.button-small { min-height: 36px; padding: 8px 12px; font-size: 13px; }
.button-gold { color: #282016; border-color: #ecce9b; background: linear-gradient(180deg, #edcd94, #cea267); box-shadow: inset 0 0 0 1px #a97c3d70; }
.button-gold:hover, .masthead nav .button-gold:hover { color: #282016; background: #f1d6a4; }
.button-outline { color: var(--cream); border-color: var(--line); background: var(--dark); }
.button-outline:hover, .button-outline[aria-pressed="true"] { background: var(--hover); }
.eyebrow { font-size: .73rem; line-height: 1.35; font-weight: 650; text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #a9b68b; margin-right: 5px; vertical-align: 1px; }

body:has(.auth-shell) {
  min-height: 100vh;
  background: linear-gradient(110deg, #1119253c, #11192599), url("/art/willowford-overlook.webp") 32% center / cover no-repeat, var(--night);
}
body:has(.auth-shell) > .masthead { background: #151e2cea; }
.auth-shell {
  width: min(1180px, calc(100% - 48px));
  min-height: 572px;
  margin: clamp(28px, 7vh, 78px) auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(340px, .9fr);
  background: #192332f5;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  box-shadow: 0 18px 50px #0008;
}
.auth-illustration { position: relative; min-height: 0; border-inline-end: 1px solid var(--line); }
.auth-illustration img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 93% center; }
.auth-content { align-self: center; padding: clamp(30px, 4vw, 62px); }
.auth-content h1, .worlds-heading h1, .error-main h1 { font-size: clamp(38px, 5vw, 61px); letter-spacing: -.05em; margin: 9px 0 12px; }
.auth-intro, .auth-switch, .worlds-heading > p, .error-main p { color: var(--muted); }
.auth-content form { margin-top: 24px; display: grid; gap: 6px; }
.auth-content label { font-size: .91rem; font-weight: 600; }
.auth-content label:not(:first-child) { margin-top: 9px; }
.auth-content input {
  width: 100%; min-height: 45px; padding: 8px 12px;
  color: var(--cream); background: var(--field); border: 1px solid var(--line); border-radius: 4px;
}
.auth-content small { font-size: .79rem; color: var(--muted); }
.auth-content button { justify-content: space-between; margin-top: 14px; }
.auth-switch { margin-top: 21px; font-size: .91rem; }
.auth-switch a { color: var(--gold); text-underline-offset: 3px; }
.form-error { color: #ffd4c2; background: #6a332948; border: 1px solid #b27054; border-radius: 4px; padding: 10px 13px; margin-top: 16px; font-size: .9rem; }

.worlds-main { max-width: 1330px; padding: clamp(30px, 6vw, 82px) clamp(16px, 4vw, 50px) 56px; margin: auto; }
.staff-main { display: grid; align-content: start; gap: 16px; }
.staff-main h1 { font-size: clamp(36px, 6vw, 58px); }
.staff-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.staff-tabs a { padding: 8px 13px; border: 1px solid transparent; border-radius: 4px 4px 0 0; text-decoration: none; }
.staff-tabs a:hover { background: var(--raised); }
.staff-tabs a[aria-current] { background: var(--paper); color: var(--ink); border-color: var(--line); }
.staff-panel { display: grid; gap: 10px; padding: 18px; }
.staff-panel form { display: grid; gap: 9px; }
.staff-panel label { display: grid; gap: 4px; }
.staff-panel input, .staff-panel select { min-width: 0; width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 4px; background: var(--night); color: var(--cream); }
.staff-search { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-items: end; }
.staff-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.staff-coordinates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.staff-history { margin: 0; padding-inline-start: 22px; }
.staff-history li { padding-block: 5px; }
.staff-history time { display: block; color: var(--muted); font-size: .84rem; }
.worlds-heading { margin-bottom: 32px; }
.worlds-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(15px, 3vw, 31px); }
.world-card { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--raised); box-shadow: 0 12px 35px #0003; display: grid; grid-template-rows: auto 1fr; }
.world-painting { width: 100%; height: auto; aspect-ratio: 2.15; object-fit: cover; object-position: 60% 48%; border-bottom: 1px solid var(--line); }
.world-painting-stoneford { object-position: 50% 18%; }
.world-content { padding: clamp(20px, 3vw, 34px); display: flex; flex-direction: column; gap: 10px; }
.world-content h2 { font-size: clamp(34px, 4vw, 50px); letter-spacing: -.04em; }
.world-content > p:not(.eyebrow) { color: var(--muted); max-width: 48ch; }
.world-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: auto; padding-top: 13px; }
.world-actions > span { color: var(--muted); font-size: .82rem; }
.error-main { max-width: 950px; margin: auto; padding: 64px 24px; }
.error-main .button { margin-top: 20px; }

.page-village, .page-worlds, .page-error {
  min-height: 100vh;
  background: radial-gradient(ellipse at 40% 0%, #334b6d4d, transparent 70%),
    linear-gradient(#152132bd, #101725e3), var(--navy-cloth) center top / 900px var(--night);
}
.game-main { max-width: 1720px; margin: auto; padding: 18px clamp(14px, 3vw, 48px) 36px; }
.village-heading { display: flex; gap: 14px; align-items: end; justify-content: space-between; margin-bottom: 15px; }
.village-heading h1 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -.055em; margin-top: 2px; }
.village-heading a { text-decoration: none; }
.village-heading a:hover { text-decoration: underline; }
.village-title-row { display: flex; align-items: center; gap: .55rem; }
.village-title-row h1 { overflow-wrap: anywhere; }
.village-rename { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 4px;
  border: 1px solid transparent; background: transparent; cursor: pointer; }
.village-rename:is(:hover, :focus-visible) { border-color: var(--line); background: var(--dark); }
#village-name-dialog { color: var(--cream); padding: 1.2rem; width: min(25rem, calc(100% - 2rem)); }
#village-name-dialog::backdrop { background: #0c111bb8; }
#village-name-dialog label { display: grid; gap: .35rem; margin-block: .7rem; }
#village-name-dialog input { background: var(--dark); color: var(--cream); border: 1px solid var(--line);
  border-radius: 4px; padding: .6rem; min-width: 0; }
#village-name-dialog [role="status"]:empty { display: none; }
[data-profile-village] { font-weight: inherit; }
.view-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .8rem; color: var(--muted); }
.view-tools select { min-height: 36px; padding: 6px; border-radius: 4px; background: var(--dark); color: var(--cream); border: 1px solid var(--line); }
.village-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 330px); gap: 15px; align-items: start; }
.village-view { min-width: 0; background: var(--dark); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.scene-scroll { position: relative; overflow: auto; scrollbar-color: var(--line) var(--field); }
.scene { position: relative; isolation: isolate; container: map / inline-size; margin: 0 auto; width: calc(var(--scene-scale, 1) * 100%); min-width: calc(var(--scene-scale, 1) * 470px); aspect-ratio: 3 / 2; background: #273825; }
.terrain, .scene-art, .river { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.river { z-index: 1; }
.scene-art { z-index: 2; }
.map-pins { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.map-pin {
  position: absolute; left: var(--pin-x); top: var(--pin-y); transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 6px; min-height: 27px; max-width: 140px;
  color: #fcf0d5; background: #192332f5; border: 1px solid #ad956b; border-radius: 4px;
  padding: 2px 4px 2px 7px; box-shadow: 0 2px 5px #111a; pointer-events: auto;
  white-space: nowrap; font-size: clamp(10px, 1vw, 12px); font-weight: 650;
}
.map-pin strong { display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 2px; font-size: 11px; border: 1px solid #b79865; background: #59462c; border-radius: 50%; }
.map-pin[aria-pressed="true"], .map-pin:hover { background: #ebd2a0; color: #2b2318; border-color: #f3dbaf; z-index: 1; }
.map-pin[aria-pressed="true"] strong, .map-pin:hover strong { color: #fff0d4; }
.map-pin[data-empty] strong { background: #42516a; }
.map-pin[data-building] { border-color: #eed290; }
.map-pin img, .map-pins[data-labels="off"] { display: none; }
@container map (width < 620px) {
  .map-pin .pin-name { display: none; }
  .map-pin { min-height: 33px; padding: 3px; gap: 2px; }
  .map-pin img { display: block; width: 21px; height: 21px; object-fit: contain; }
}
.scene-site { cursor: pointer; }
.scene-site .site-ink { transition: filter .18s; }
.scene-site:hover .site-ink { filter: brightness(1.13); }
.scene-site image { pointer-events: auto; }
.scene-site image.worker, .scene-site .smoke { pointer-events: none; }
.worker-frame { animation: pose 2.3s steps(1, end) infinite; opacity: 0; }
.worker-frame:first-child { opacity: 1; }
.worker-frame:nth-child(2) { animation-delay: -1.725s; }
.worker-frame:nth-child(3) { animation-delay: -1.15s; }
.worker-frame:nth-child(4) { animation-delay: -.575s; }
@keyframes pose { 0% { opacity: 1; } 25%, 100% { opacity: 0; } }
.smoke { transform-box: fill-box; animation: drift 5s ease-out infinite; }
.smoke:nth-of-type(2) { animation-delay: -1.7s; }
.smoke:nth-of-type(3) { animation-delay: -3.4s; }
@keyframes drift {
  from { opacity: .31; transform: translate(0, 0) scale(.6); }
  85%, to { opacity: 0; transform: translate(10px, -24px) scale(2); }
}
.building-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-top: 1px solid var(--subtle-line); }
.building-list button { min-height: 38px; padding: 5px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--cream); background: var(--raised); border: 1px solid var(--subtle-line); border-radius: 4px; }
.building-list img { width: 23px; height: 23px; object-fit: contain; }
.building-list span:last-child { color: var(--gold); }
.building-list button:hover, .building-list button[aria-pressed="true"] { background: var(--hover); border-color: #af925e; }
.building-picker { display: none; }
.building-picker select { min-width: 0; min-height: 42px; padding: 5px 8px; border-radius: 4px; border: 1px solid var(--line); background: var(--raised); color: var(--cream); }

.village-side { display: grid; gap: 12px; min-width: 0; }
.building-panel { background: var(--navy-panel); color: var(--cream); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.upgrade-points { color: var(--gold); font-weight: 700; font-size: .84rem; }
progress { display: block; appearance: none; width: 100%; height: 6px; margin: 8px 0 3px; border: 0; border-radius: 2px; background: var(--night); overflow: hidden; color: var(--gold); }
progress::-webkit-progress-bar { background: var(--night); }
progress::-webkit-progress-value { background: var(--gold); }
progress::-moz-progress-bar { background: var(--gold); }
.building-panel:focus-visible { outline-offset: 2px; }
.building-panel:empty { display: none; }
.panel-art { height: 125px; position: relative; background: radial-gradient(ellipse at 50% 75%, var(--hover), var(--field) 80%); border-bottom: 1px solid var(--line); display: grid; place-items: center; }
.panel-scene { display: block; width: 100%; height: 100%; min-height: 0; }
.panel-scene .scene-site { cursor: inherit; pointer-events: none; }
.upgrade-requirements { list-style: none; margin: 8px 0; padding: 0; font-size: .85rem; }
.upgrade-requirements li { display: flex; align-items: baseline; gap: 7px; }
.requirement-mark { width: 1em; color: #ffab9d; font-weight: bold; }
.requirement-mark[data-met="true"] { color: var(--green); }
.panel-level { position: absolute; bottom: 8px; left: 12px; color: var(--cream); background: var(--dark); border: 1px solid #a88954; border-radius: 3px; padding: 2px 7px; font-size: .72rem; }
.panel-copy { padding: 14px 15px 15px; }
.panel-copy .eyebrow { letter-spacing: .105em; font-size: .67rem; margin-bottom: 3px; }
.panel-copy h2 { font-size: 29px; letter-spacing: -.04em; }
.panel-description { color: var(--muted); font-size: .84rem; line-height: 1.45; margin-top: 7px; }
.upgrade { border-top: 1px solid var(--subtle-line); margin-top: 12px; padding-top: 10px; }
.upgrade-heading { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; margin-bottom: 3px; }
.upgrade-heading h3 { font-size: 19px; }
.upgrade-heading span { font-size: .79rem; color: var(--muted); white-space: nowrap; }
.upgrade-effect { font-size: .83rem; color: #ccdfef; }
.upgrade-costs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 62px), 1fr)); gap: 3px; margin: 9px 0; }
.cost { display: flex; align-items: center; gap: 3px; font-size: .79rem; font-weight: 650; padding: 3px 1px; font-variant-numeric: tabular-nums; }
.cost img { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; }
.compact-count { white-space: nowrap; }
.building-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
#building-stats-toggle { color: var(--cream); background: var(--field); border-color: var(--line); }
#building-stats-toggle:hover { background: var(--hover); }
.building-stats-scroll { position: relative; max-height: 17rem; overflow: auto; border: 1px solid var(--line); border-radius: 3px; }
.building-stats-scroll table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8rem; font-variant-numeric: tabular-nums; }
.building-stats-scroll th, .building-stats-scroll td { padding: 5px 7px; text-align: left; }
.building-stats-scroll thead th { position: sticky; top: 0; background: var(--field); box-shadow: 0 1px 0 var(--line); }
.building-stats-scroll tbody tr:nth-child(even) { background: #131b2980; }
.building-stats-scroll tbody tr[aria-current="true"] { background: var(--hover); color: var(--gold); }
.building-stats-scroll tr > :last-child { text-align: right; }
.building-stats-scroll .building-benefit { text-align: center; }
.upgrade-workers { margin: -4px 0 8px; }
.cost[data-short] { color: #ffab9d; text-decoration: underline dotted; text-underline-offset: 3px; }
.upgrade button { width: 100%; color: var(--ink); border-color: #d8b27a; background: linear-gradient(#edcd94, #cea267); }
.upgrade button:hover { background: #f1d6a4; }
.upgrade button:disabled { background: var(--field); color: var(--muted); border-color: var(--line); cursor: default; }
.upgrade-state { font-size: .78rem; color: var(--muted); margin-bottom: 7px; }
.upgrade-state:empty { display: none; }
.notice { color: var(--cream); border: 1px solid var(--subtle-line); border-radius: 4px; padding: 9px 11px; font-size: .84rem; background: var(--raised); }
#notice { color: #ffdbca; border-color: #b17154; }

@media (max-width: 970px) {
  .village-layout { grid-template-columns: minmax(0, 1fr) minmax(255px, 295px); }
}
@media (max-width: 795px) {
  .village-layout { grid-template-columns: minmax(0, 1fr); }
  .building-panel { grid-column: 2; grid-row: span 2; }
  .auth-shell { width: min(100% - 32px, 630px); grid-template-columns: 1fr; min-height: auto; }
  .auth-illustration { height: clamp(184px, 41vw, 300px); border-inline-end: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 575px) {
  .masthead-inner { min-height: 60px; gap: 8px; }
  .brand { font-size: 22px; gap: 4px; }
  .brand img { width: 31px; height: 37px; }
  .masthead nav { gap: 10px; font-size: 12px; }
  .language-picker summary { width: 29px; }
  .masthead .button-small { min-height: 34px; padding: 6px 8px; font-size: 12px; white-space: nowrap; }
  .account-name { display: none; }
  .worlds-grid { grid-template-columns: 1fr; }
  .village-heading { flex-wrap: wrap; }
  .building-panel { grid-column: auto; grid-row: auto; }
  .building-list { display: none; }
  .building-picker { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 10px; border-top: 1px solid var(--subtle-line); font-size: .84rem; }
}

@media (max-width: 375px) {
  .masthead:not(.game-masthead) .masthead-inner { flex-wrap: wrap; }
  .masthead:not(.game-masthead) .masthead-inner > nav:last-child { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
  .smoke { display: none; }
  .worker-frame { animation: none !important; }
}
.game-shell {
  display: grid; grid-template-columns: 168px minmax(0, 1fr);
  max-width: 1888px; min-height: calc(100vh - 65px); margin-inline: auto;
}
.game-shell .game-main { width: 100%; min-width: 0; margin: 0 auto; padding-inline: clamp(12px, 2vw, 32px); }
.game-nav { padding: 16px 8px; background: var(--navy-panel); border-inline-end: 1px solid var(--line); box-shadow: inset -2px 0 #152233; }
.game-nav-staff { border-block-start: 1px solid var(--line); margin-block-start: 10px; padding-block-start: 8px; }
.game-nav a {
  display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 5px 9px;
  border: 1px solid transparent; border-radius: 4px; text-decoration: none; font-size: .86rem; font-weight: 650;
}
.game-nav img { object-fit: contain; }
.game-nav :is(img, .guild-banner) { flex-shrink: 0; }
.game-nav a > span:first-of-type { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.unread-reports {
  margin-inline-start: auto; min-width: 1.45rem; padding: .1rem .35rem; border-radius: .8rem;
  background: #ecc786; color: #281b10; text-align: center; font-size: .75rem; font-variant-numeric: tabular-nums;
}
.game-nav a[aria-current="page"] .unread-reports { background: var(--gold); color: var(--ink); }
.report-message[data-unread] strong::after {
  content: ""; display: inline-block; width: .4rem; height: .4rem; border-radius: 50%;
  margin-inline-start: .45rem; vertical-align: .1em; background: #dfa957;
}
.game-nav a:hover { background: var(--hover); }
.game-nav a[aria-current="page"] { background: var(--hover); border-color: #a98d63; color: #ffe6b7; }
.realm-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 14px; }
.owned-villages { grid-template-columns: repeat(auto-fill, minmax(min(100%, 310px), 1fr)); }
.realm-card, .world-card { background: var(--navy-panel); }
.realm-card { border: 1px solid var(--line); border-radius: 4px; overflow: hidden; text-decoration: none; box-shadow: inset 0 1px #9cb5d02e, 0 2px 6px #0b122366; }
.realm-card > img { display: block; width: 100%; height: auto; aspect-ratio: 2.65; object-fit: cover; }
.realm-cards .realm-card > div, .training-card, .settings-card, .overview-garrison { padding: 15px; }
.realm-card h2 { margin-bottom: 6px; font-size: 1.5rem; }
.realm-card p { color: var(--muted); font-size: .86rem; }
.realm-card .eyebrow { color: var(--gold); }
a.realm-card:hover { border-color: var(--gold); }
.training-card { margin-bottom: 15px; }
#training-status { margin-top: 7px; color: var(--cream); }
#training-progress[hidden] { display: none; }
#cancel-training:not([hidden]) { display: inline-flex; margin-top: .5rem; }
.troop-preset { max-width: 58rem; padding-block: .8rem 1rem; }
.troop-preset > label { display: grid; gap: .25rem; max-width: 22rem; }
.preset-units { display: grid; grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); gap: .4rem .75rem; margin-block: .8rem; }
.preset-units label, .preset-units label span { display: flex; align-items: center; gap: .35rem; }
.preset-units label { justify-content: space-between; }
.preset-units input { width: 4.5rem; }
.preset-units input, .troop-preset > label input, #map-troop-preset { color: var(--cream); background: var(--dark); border: 1px solid var(--line); border-radius: 4px; padding: .3rem; }
#map-preset-control:not([hidden]) { display: grid; gap: .25rem; margin-top: .65rem; }
#map-preset-status, .report-mission { color: var(--muted); font-size: .9rem; }
.report-toolbar, .report-detail-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
.report-toolbar { align-items: start; margin-bottom: .75rem; }
.report-toolbar nav, .report-actions, .report-pages { display: flex; flex-wrap: wrap; gap: .4rem; }
.report-toolbar [aria-current="page"] { border-color: var(--gold); background: var(--hover); }
.report-delete-all summary { cursor: pointer; color: #f5b5a5; padding: .35rem 0; }
.report-delete-all p { margin: 0 0 .45rem; }
.report-delete { color: #f5b5a5; }
.report-favorite { color: var(--gold); }
.report-pages { margin-top: .75rem; }
.report-inbox { display: grid; grid-template-columns: minmax(13rem, 25%) minmax(0, 1fr); align-items: start; gap: 1rem; }
.report-list { display: grid; gap: .45rem; max-height: min(70vh, 46rem); overflow: auto; padding: 1px 4px 4px 1px; }
.report-message { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; column-gap: .6rem; padding: .6rem; text-decoration: none; }
.report-message:is(:hover,[aria-current="true"]) { border-color: var(--gold); background: var(--hover); }
.report-message small { display: block; color: var(--muted); }
.report-message img { border-radius: 3px; object-fit: cover; }
.report-detail { padding: clamp(.85rem, 2vw, 1.5rem); scroll-margin-top: 1rem; }
.report-detail[hidden] { display: none; }
.report-detail h3 { margin-block: .8rem .35rem; }
.report-detail .report-mission { margin-top: .8rem; padding-top: .65rem; border-top: 1px solid var(--subtle-line); }
.report-buildings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: .25rem .8rem; padding-inline-start: 1.3rem; }
.report-forces { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.report-roster { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.report-roster th, .report-roster td { padding: .35rem; border-bottom: 1px solid var(--subtle-line); text-align: right; }
.report-roster th:first-child { text-align: left; }
.report-roster img, .report-loot img { vertical-align: middle; margin-right: .3rem; }
.report-roster img, .report-loot img { display: inline-block; object-fit: cover; }
.report-loot { display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; list-style: none; text-transform: capitalize; }
@media(max-width:720px) {
  .report-inbox { grid-template-columns: minmax(0, 1fr); }
  .report-list { max-height: 13rem; }
}
#recruit-stock { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.unit-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-block: 12px; }
.unit-stats div, .garrison-counts div { padding: 6px 8px; background: var(--field); border-radius: 3px; }
.unit-stats dt, .garrison-counts dt { color: var(--muted); font-size: .76rem; }
.unit-stats dd, .garrison-counts dd { margin: 0; color: var(--cream); font-weight: 650; }
.unit-cost { display: flex; flex-wrap: wrap; gap: 7px 12px; margin-bottom: 8px; }
.unit-cost span { display: flex; align-items: center; gap: 3px; }
.unit-cost .train-population { flex-basis: 100%; }
.unit-cost img { object-fit: contain; }
.train-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px; margin-top: 12px; font-size: .8rem; }
.settings-card select { background: var(--field); border: 1px solid var(--line); border-radius: 3px; color: var(--cream); min-height: 36px; padding: 4px 7px; }
.train-form input { width: 100%; min-width: 0; min-height: 28px; margin: 0; accent-color: var(--gold); }
.train-form .train-number {
  width: 6.5rem; justify-self: end; padding: 3px 6px; border: 1px solid var(--line);
  border-radius: 4px; background: var(--field); color: var(--cream); font-family: ui-monospace, monospace;
}
.train-form button { grid-column: 2; }
.train-limit, .train-hall { grid-column: 1 / -1; }
.train-limit, .game-recruit .unit-requirements { color: #ffab9d; }
.unit-cost .training-short { color: #ffab9d; }
.train-form button:disabled { opacity: .6; cursor: default; }
.realm-leaderboard { width: min(100%, 960px); }
.ranking-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; margin-block: 0 24px; }
.ranking-filters label { display: grid; gap: 4px; max-width: 100%; color: var(--muted); font-size: .9rem; }
.ranking-filters select { min-height: 36px; padding: 4px 10px; color: var(--cream); background: var(--field); border: 1px solid var(--line); border-radius: 3px; }
.ranking-note { margin: 6px 0 0; color: var(--muted); }
.ranking-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(8px, 1.5vw, 16px); margin: 18px 0; padding: 0; list-style: none; }
.ranking-podium-incomplete { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.ranking-medal { --medal: #d9a76c; --metal-shadow: #583422; --medal-wash: #3a2422;
  display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 8.5rem; padding: 12px 8px;
  text-align: center; border: 1px solid var(--medal); border-radius: 8px 8px 2px 2px;
  background: radial-gradient(ellipse at 50% 0, var(--medal-wash), transparent 75%),
    linear-gradient(180deg, #141b2a8c, #121722ec), var(--navy-cloth) center / 420px var(--night);
  box-shadow: inset 0 0 0 3px #111823bd, inset 0 -5px var(--metal-shadow); }
.ranking-medal-1 { --medal: #f0cb87; --metal-shadow: #725024; --medal-wash: #574126; min-height: 11rem; }
.ranking-medal-2 { --medal: #c1d3e5; --metal-shadow: #424d60; --medal-wash: #3a4a63; min-height: 9.5rem; }
.ranking-place { display: grid; place-items: center; width: 2.2rem; aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--medal); background: var(--metal-shadow); box-shadow: inset 0 0 0 2px #141b2a85;
  color: var(--medal); font-size: 1.15rem; font-weight: 700; }
.ranking-player, .ranking-score { max-width: 100%; overflow-wrap: anywhere; }
.ranking-score { color: var(--medal); font-variant-numeric: tabular-nums; }
.ranking-empty { padding: 14px; color: var(--muted); background: var(--raised); border: 1px solid var(--subtle-line); }
.realm-ranking { width: 100%; margin-top: 16px; border-collapse: collapse; text-align: left; background: var(--raised); }
.realm-ranking th, .realm-ranking td { padding: 10px 14px; border-bottom: 1px solid var(--subtle-line); }
.realm-ranking :is(th, td):last-child { text-align: end; }
.realm-ranking th[scope="row"] { text-align: start; overflow-wrap: anywhere; }
@media (min-width: 481px) {
  .ranking-podium:not(.ranking-podium-incomplete) > .ranking-medal-1 { grid-area: 1 / 2; }
  .ranking-podium:not(.ranking-podium-incomplete) > .ranking-medal-2 { grid-area: 1 / 1; }
  .ranking-podium:not(.ranking-podium-incomplete) > .ranking-medal-3 { grid-area: 1 / 3; }
}
@media (max-width: 480px) {
  .ranking-podium { grid-template-columns: minmax(0, 1fr); }
  .ranking-medal { min-height: 4.5rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding-inline: 12px; }
  .ranking-player { justify-self: start; text-align: start; }
}
.settings-card { max-width: 520px; }
.settings-card label { display: block; margin: 12px 0; }
.settings-card + .settings-card { margin-top: 1rem; }
.feedback-card { max-width: 680px; }
.feedback-card h1 { margin-block: .6rem; }
.feedback-card form input, .feedback-card textarea, .feedback-card select { display: block; width: 100%; margin-top: .35rem; }
.feedback-card form input, .feedback-card textarea { padding: .55rem .65rem; font: inherit; color: var(--cream); background: var(--field); border: 1px solid var(--line); border-radius: 3px; }
.feedback-card textarea { resize: vertical; }
.feedback-card form button { margin-top: .6rem; }
.staff-feedback { padding-inline-start: 1.25rem; }
.staff-feedback li { margin-bottom: .6rem; overflow-wrap: anywhere; }
.staff-feedback summary { cursor: pointer; }
.staff-feedback-details { white-space: pre-wrap; }
#game-audio-settings label > span { display: flex; justify-content: space-between; gap: 1rem; }
#game-audio-settings input[type="range"] { width: 100%; accent-color: var(--gold); }
#game-audio-settings output { color: var(--gold); font-variant-numeric: tabular-nums; }
#game-audio-settings #audio-preview { display: block; width: 100%; margin-top: .3rem; }
.overview-garrison { margin-top: 15px; }
.garrison-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.garrison-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 6px; }
.game-build .view-tools, .game-build .scene-scroll { display: none; }
.game-build .building-list { display: grid; border-top: 0; }
.game-build .building-picker { display: none; }
@media (max-width: 1050px) {
  .game-shell { grid-template-columns: 142px minmax(0, 1fr); }
  .game-shell .village-layout { grid-template-columns: minmax(0, 1fr); }
  .game-build .village-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}
@media (max-width: 700px) {
  .game-shell { display: block; }
  .game-nav { display: flex; gap: 4px; overflow-x: auto; padding: 6px; border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .game-nav a { flex: none; padding-inline: 6px; }
  .game-nav-staff { border-block-start: 0; border-inline-start: 1px solid var(--line); margin: 0 0 0 4px; padding: 0 0 0 4px; }
  .game-shell .game-build .village-layout { grid-template-columns: minmax(0, 1fr); }
  #recruit-stock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.village-overview {
  --overview-frame: linear-gradient(155deg, #25375171, #141d2dc5), var(--navy-cloth) center / 680px var(--dark);
  --overview-edge: #627794;
  --overview-inlay: inset 0 1px #a7bed655, inset 0 -2px #101823, 0 2px 5px #080e1887;
  background: radial-gradient(ellipse at center 16%, #415c8738, transparent 68%),
    linear-gradient(#111d2db8, #101725da), var(--navy-cloth) center top / 1000px var(--night);
}
.village-overview .game-nav {
  background: linear-gradient(90deg, #142134a6, #24354da6 74%, #141d2bca), var(--navy-cloth) left top / 660px var(--dark);
  border-color: var(--overview-edge); box-shadow: inset -2px 0 #24364c, inset -3px 0 #a7bed63d;
}
.village-overview .game-nav a { border-radius: 2px; border-block-end-color: var(--subtle-line); text-shadow: 0 1px #101823; }
.village-overview .game-nav a:hover { background: var(--hover); }
.village-overview .game-nav a[aria-current="page"] {
  background: linear-gradient(#405574, #293a53); border-color: #b29770;
  color: #ffe5b8; box-shadow: inset 0 1px #9db6d45c, 0 2px 2px #121c2a;
}
.village-overview .game-overview { padding-block-start: clamp(10px, 1.3vw, 20px); }
.village-overview .village-heading {
  padding: 8px clamp(9px, 1.15vw, 17px) 9px;
  border: 1px solid var(--overview-edge); border-radius: 3px; background: var(--overview-frame); box-shadow: var(--overview-inlay);
}
.village-overview .village-heading h1 { color: var(--cream); font-size: clamp(30px, 3.25vw, 46px); text-shadow: 0 2px 2px #0f1724; }
.village-overview .view-tools :is(select, button), .village-overview .building-picker select {
  color: var(--cream); background: linear-gradient(#303f56, var(--dark)); border-color: var(--line);
  border-radius: 2px; box-shadow: inset 0 1px #9db6d44d;
}
.village-overview .view-tools button:hover, .village-overview .village-rename:hover { background: var(--hover); }
.village-overview .village-view {
  padding: clamp(5px, .56vw, 9px); border: 1px solid var(--overview-edge); border-radius: 3px;
  background: var(--overview-frame); box-shadow: var(--overview-inlay);
}
.village-overview .scene-scroll { border: 1px solid var(--night); outline: 1px solid #a2b9d757; background: var(--night); }
.village-overview .building-list { padding: 7px 0 0; border: 0; gap: 4px; }
.village-overview .building-list button {
  color: var(--cream); background: var(--dark); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: inset 0 1px #9db6d43d; min-height: 32px; padding: 3px 5px;
}
.village-overview .building-list button:is(:hover,[aria-pressed="true"]) { background: var(--hover); border-color: #b29770; }
.village-overview .map-pin { color: var(--cream); background: linear-gradient(var(--hover), var(--dark)); border-color: #849ab1; border-radius: 3px; }
.village-overview .map-pin:is(:hover,[aria-pressed="true"]) {
  color: #ffe5b8; background: #344b69; border-color: #ddbd87;
}
.village-overview .map-pin strong { background: var(--field); border-color: var(--line); }
.village-overview .map-pin[data-building] { border-color: #ffcf80; }
.village-overview .building-panel {
  border: 1px solid var(--overview-edge); border-radius: 3px; outline: 2px solid #182330;
  background: var(--overview-frame);
  box-shadow: var(--overview-inlay);
}
.village-overview .panel-art { border-bottom: 3px double var(--overview-edge); }
.village-overview .panel-copy .button { border-radius: 2px; }
.village-overview :is(.overview-garrison, #village-name-dialog) {
  background: var(--overview-frame); border-color: var(--overview-edge); border-radius: 3px; box-shadow: var(--overview-inlay);
}
.village-overview .garrison-counts { gap: 0; margin-bottom: 0; border: 1px solid var(--line); background: #151e2cc9; }
.village-overview .garrison-counts div { background: none; border: 1px solid var(--subtle-line); border-radius: 0; }
@media (max-width: 700px) {
  .village-overview .game-nav { box-shadow: inset 0 -1px var(--overview-edge); }
}
.map-controls { display:flex; align-items:center; gap:9px; padding:4px 9px; overflow-x:auto; border-bottom:1px solid var(--line); background:var(--raised); font-size:.8rem; white-space:nowrap; }
.map-control-group { display:flex; flex:none; gap:4px; align-items:center; }
.map-control-group + .map-control-group { border-inline-start:1px solid var(--subtle-line); padding-inline-start:9px; }
.map-controls :is(input[type="number"],select) { min-height:28px; background:var(--field); color:var(--cream); border:1px solid var(--line); padding:2px 4px; border-radius:4px; }
.map-controls input[type="number"] { width:56px; }
.map-controls input[type="checkbox"] { margin:0; accent-color:#e4bd78; }
.map-controls label { display:flex; align-items:center; gap:4px; padding-inline:2px; }
.map-controls .button { min-height:28px; padding:2px 7px; font-size:inherit; }
.region-choice { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.region-choice label { display:grid; gap:5px; }
.region-choice select { background:var(--field); color:var(--cream); border:1px solid var(--line); border-radius:4px; padding:8px; }
.page-world-map { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
.page-world-map > .masthead { flex:none; }
.game-shell.map-shell { display:grid; max-width:none; width:100%; min-height:0; flex:1; grid-template-rows:minmax(0,1fr); }
.map-shell .game-nav { overflow:auto; }
.map-shell .game-main { display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; padding:0; max-width:none; }
.world-map-layout { position:relative; min-height:0; container-type:size; }
.world-map-window { position:absolute; inset:0; overflow:auto; overscroll-behavior:contain; }
.map-inspector-drawer, .map-orders { z-index:5; position:absolute; }
.map-inspector-drawer summary, .map-orders summary {
  cursor:pointer; width:max-content; padding:7px 11px; color:var(--cream); background:var(--raised); border:1px solid var(--line); border-radius:5px;
}
.map-inspector-drawer { inset-block:10px auto; inset-inline:auto 16px; max-width:calc(100% - 22px); }
.map-inspector-drawer summary { margin-inline-start:auto; }
.map-inspector-drawer .map-inspector { width:min(350px,100%); margin-inline-start:auto; max-height:calc(100cqh - 61px); overflow:auto; scrollbar-color: var(--line) var(--field); }
.map-shell .game-nav a { min-height:36px; }
@media (max-width:700px) {
  .game-shell.map-shell { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .map-shell .game-nav { padding-block:4px; }
}
.world-grid { --map-tile:104px; position:relative; isolation:isolate; display:grid; grid-template-columns:repeat(32,var(--map-tile)); width:max-content; background:#354332; }
.map-terrain { position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
.map-river-bank { stroke:#625637; stroke-width:13; opacity:.52; }
.map-river-bed { stroke:#354c3d; stroke-width:9; }
.map-river-surface { stroke:url(#map-water); stroke-width:6; opacity:.74; }
.map-river-bank.map-tributary { stroke-width:8; }
.map-river-bed.map-tributary { stroke-width:5; }
.map-river-surface.map-tributary { stroke-width:3; }
.map-river-bank.map-province-river { stroke:#816b43; stroke-width:15; opacity:.72; }
.map-river-bed.map-province-river { stroke:#364f49; stroke-width:10; }
.map-river-surface.map-province-river { stroke-width:6; opacity:.9; }
.map-river-bank.map-border-river { stroke:#907951; stroke-width:25; opacity:.86; }
.map-river-bed.map-border-river { stroke:#24413e; stroke-width:17; }
.map-river-surface.map-border-river { stroke-width:12; opacity:.92; }
.map-grove {
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none;
  filter:brightness(.77) saturate(.67) drop-shadow(3px 4px 2px #15201288);
}
.map-grove.grove-1 { filter:brightness(.67) saturate(.61) hue-rotate(15deg) drop-shadow(3px 4px 2px #15201288); }
.map-grove.grove-2 { filter:brightness(.8) saturate(.62) hue-rotate(-13deg) drop-shadow(3px 4px 2px #15201288); }
.map-grove.grove-3 { filter:brightness(.68) saturate(.54) drop-shadow(2px 4px 2px #15201288); }
.map-grove:is(.grove-1,.grove-3) image { transform-box:fill-box; transform-origin:center; transform:scaleX(-1); }
.world-tile { height:var(--map-tile); display:grid; min-width:0; place-items:center; border:1px solid #e7d8a815; color:#fff3d6; font-size:.68rem; }
.world-tile.continent-edge-x { border-inline-start-color:#b0cfb554; }
.world-tile.continent-edge-y { border-block-start-color:#b0cfb554; }
.world-open { width:100%; height:100%; padding:0; border:0; background:transparent; color:inherit; text-shadow:0 1px 3px #0f1a16; }
.world-open:hover, .world-open:focus-visible { background:#e7d8a822; }
.world-tile { --settlement-size:60%; }
.world-tile:has(.world-settlement) { z-index:2; }
.world-tile:has(.world-settlement:is(:hover, :focus-visible, [aria-pressed="true"])) { z-index:3; }
.world-settlement {
  position:relative; width:100%; height:100%; padding:0; overflow:visible;
  color:var(--cream); background:transparent; border:1px solid transparent;
}
.world-settlement::before, .world-settlement img {
  position:absolute; left:50%; top:50%;
  width:var(--settlement-size); height:calc(var(--settlement-size) * .79);
  transform:translate(-50%, -50%); pointer-events:none;
}
.world-settlement::before {
  content:""; margin-top:8%; border-radius:50%;
  background:radial-gradient(ellipse, #75603e 7%, #9b825865 38%, transparent 72%);
}
.world-settlement img { object-fit:contain; object-position:center; filter:drop-shadow(0 4px 4px #142019a3); }
.world-settlement .map-settlement-label {
  position:absolute; top:calc(50% + var(--settlement-size) * .36);
  left:50%; transform:translateX(-50%); display:grid; justify-items:center;
  width:max-content; max-width:100%; grid-template-columns:minmax(0, 1fr); pointer-events:none;
}
.world-settlement strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; background:var(--dark); border-radius:3px; padding:1px 5px; font-size:.75rem; }
.world-settlement :is(.map-points, strong) { line-height:1.25; }
.world-settlement.castle strong { font-size:.68rem; padding-inline:3px; }
.world-settlement.barbarian img { filter:grayscale(1) brightness(.88) drop-shadow(0 4px 4px #142019a3); }
.world-settlement.barbarian strong { background:#424943; }
.world-settlement.home strong { background:#f3dcab; color:#282319; }
.world-settlement.player strong { background:#2d4353; }
.world-settlement.castle img { filter:saturate(.8) drop-shadow(0 4px 4px #142019a3); }
.world-settlement.castle strong { background:#443225; color:#f9e9cc; border:1px solid #b38e60; }
.map-points { color:#f8eac9; font-size:.65rem; background:#151e2ce8; padding-inline:4px; border-radius:3px; }
.world-tile :is(.world-open > span, .map-coordinate) {
  position:absolute; top:3px; right:4px; opacity:0; pointer-events:none; z-index:2;
  background:#151e2ce8; color:#fff4da; border-radius:3px; padding:0 3px;
}
.world-tile { position:relative; }
.world-tile:hover :is(.world-open > span, .map-coordinate),
.world-tile:focus-within :is(.world-open > span, .map-coordinate) { opacity:1; }
.world-map-window[data-fit="true"] :is(.world-open > span, .map-coordinate) { display:none; }
.world-settlement:is([aria-pressed="true"], :focus-visible) {
  border-color:#f4d080; box-shadow:inset 0 0 0 1px #f4d08080; background:#15203145;
}
.world-settlement:focus-visible { outline:none; }
.map-province-labels, .map-region-labels, .map-region-borders, #map-movements { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.map-region-borders { z-index:0; }
.region-color-0 { fill:#b67e4526; }
.region-color-1 { fill:#7d5f4123; }
.region-color-2 { fill:#667e7626; }
.region-color-3 { fill:#172e1526; }
#map-scout-intel { border-top: 1px solid var(--line); margin-top: .6rem; padding-top: .4rem; }
#map-scout-intel ul { margin: .4rem 0; padding-left: 1.15rem; }
.map-current-region {
  position:absolute; inset:auto auto 18px 12px; z-index:5; padding:5px 10px; border:1px solid var(--line);
  border-radius:5px; color:var(--cream); background:#222f42f2; box-shadow:0 2px 8px #0b122066; font-size:.85rem; pointer-events:none;
}
.map-province-labels, .map-region-labels { z-index:1; }
.map-province-labels text, .map-region-labels text { fill:#fff0ca; stroke:#1b2820; stroke-width:4; paint-order:stroke; text-anchor:middle; font:700 26px var(--serif); letter-spacing:1px; }
.map-region-labels { display:none; }
.map-region-labels text { font-size:78px; stroke-width:11; }
.world-map-window[data-grid-lines="off"] .world-tile { border-color:transparent; }
.world-map-window[data-labels="off"] :is(.map-province-labels,.map-region-labels,.map-settlement-label),
.world-map-window[data-overview="true"] .map-settlement-label { display:none; }
.world-map-window[data-overview="true"] .map-province-labels text { font-size:50px; stroke-width:8; }
.world-map-window[data-fit="true"] .map-province-labels { display:none; }
.world-map-window[data-fit="true"]:not([data-labels="off"]) .map-region-labels { display:block; }
.world-map-window[data-fit="true"] .world-grid { margin-inline:auto; }
.world-map-window[data-dragging] { cursor:grabbing; user-select:none; }
.world-map-window[data-dragging] button { cursor:grabbing; }
#map-movements { z-index:3; }
#map-movements line { stroke:var(--march); stroke-width:2px; stroke-dasharray:6 4; vector-effect:non-scaling-stroke; opacity:.78; }
#map-movements .outgoing, [data-direction="outgoing"] { --march:#f0cc80; }
#map-movements .incoming, [data-direction="incoming"] { --march:#ff927f; }
#map-movements .returning, [data-direction="returning"] { --march:#a9d8a1; }
#map-movements .nearby, [data-direction="nearby"] { --march:#a4d7f2; }
#map-march-markers { position:absolute; inset:0; z-index:4; pointer-events:none; }
#map-combats { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.combat-stack { position: absolute; display: grid; justify-items: center; gap: 3px; transform: translate(-50%,-100%); width: max-content; }
.combat-note { display: flex; align-items: center; gap: 5px; padding: 4px 8px; font-weight: 700; border: 1px solid currentColor; border-radius: 5px; background: var(--dark); box-shadow: 0 2px 5px #0008; }
.combat-note[data-result="win"] { color: #b7e7a2; }
.combat-note[data-result="loss"] { color: #ffaca0; }
.combat-note[data-result="fighting"] { color: var(--gold); }
.clash-swords { position: relative; display: inline-block; width: 26px; height: 22px; }
.clash-swords i { position: absolute; bottom: 1px; left: 7px; width: 3px; height: 20px; transform-origin: 50% 88%; --swing: 37deg; --backswing: 67deg; transform: rotate(var(--swing)); animation: sword-clash .55s ease-in-out infinite alternate; background: linear-gradient(90deg,#a68b61,#ebc785); }
.clash-swords i + i { left: 16px; --swing: -37deg; --backswing: -68deg; }
.clash-swords i::before { content: ""; position: absolute; inset: 0 -1px 6px; background: linear-gradient(90deg,#768b9d,#f7ffff,#a3bbc9); clip-path: polygon(50% 0,100% 25%,100% 100%,0 100%,0 25%); }
.clash-swords i::after { content: ""; position: absolute; height: 2px; bottom: 5px; left: -3px; right: -3px; background: #ebc785; }
@keyframes sword-clash { from { transform: rotate(var(--backswing)); } to { transform: rotate(var(--swing)); } }
@media (prefers-reduced-motion: reduce) { .clash-swords i { animation: none; } }

.icon-list, #map-scout-intel .icon-list { list-style: none; padding-inline-start: 0; }
.icon-list li { display: flex; align-items: center; gap: .45rem; }
.icon-list img { flex: none; object-fit: contain; }
.scout-intelligence { margin-block: .6rem; }
.scout-intelligence summary, #map-scout-intel summary { color: var(--gold); cursor: pointer; font-weight: 700; }
.scout-age { display: block; color: var(--muted); }
.preset-group { min-width: 0; border: 1px solid var(--subtle-line); margin: .55rem 0; }
.preset-group legend { color: var(--gold); padding-inline: .35rem; }
.preset-appearance { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.preset-appearance select { color: var(--cream); background: var(--dark); border: 1px solid var(--line); padding: .25rem; }
.preset-badge { object-fit: cover; vertical-align: middle; border: 2px solid var(--preset-color, var(--gold)); border-radius: 4px; }
.recruit-jumps { display: flex; gap: 5px; flex-wrap: wrap; }
.recruit-jumps a { padding: 3px 6px; }
.recruit-jumps img { object-fit: contain; }
.recruit-group > h2 { scroll-margin-top: 15rem; }
.market-form-sides { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: .65rem; margin-block: .7rem; }
.market-form-sides fieldset { min-width: 0; border: 1px solid var(--subtle-line); }
.market-form-sides fieldset > label { margin-bottom: .35rem; }
.market-exchange, .market-resource-line, .market-exchange p { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.market-exchange p { margin-block: .25rem; }
.feedback-dialog { position: fixed; z-index: 30; inset: 16vh auto auto max(8px, calc(50vw - 270px)); margin: 0; width: min(540px, calc(100vw - 16px)); padding: 0; color: var(--cream); background: var(--dark); }
.feedback-dialog > header { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1rem; cursor: move; touch-action: none; background: var(--raised); }
.feedback-dialog > header button { font-size: 1.2rem; color: var(--cream); background: transparent; border: 0; }
.feedback-dialog > div { padding: 1rem; max-height: min(72vh, 38rem); overflow: auto; }
.feedback-dialog form label { display: block; margin-block: .55rem; }
.feedback-dialog :is(input,select,textarea) { display: block; width: 100%; color: var(--cream); background: var(--field); border: 1px solid var(--line); padding: .4rem; }
.feedback-highlight { outline: 2px solid var(--gold) !important; outline-offset: 1px; }
.map-march {
  position:absolute; transform:translate(-50%,-50%); width:34px; height:34px; padding:2px; pointer-events:auto;
  border:1px solid var(--march); border-radius:8px; background:var(--field); color:var(--cream); box-shadow:0 2px 7px #17130dbb; cursor:pointer;
}
.map-march[hidden] { display:none; }
.map-march:is(:hover,:focus-visible,[aria-expanded="true"]) { z-index:2; }
.march-portrait { display:block; width:100%; height:100%; object-fit:cover; object-position:center 35%; border-radius:5px; }
.march-tooltip {
  display:none; position:absolute; inset-inline-start:50%; bottom:calc(100% + 7px); transform:translateX(-50%);
  width:max-content; max-width:224px; padding:7px 10px; text-align:start; pointer-events:none;
  background:var(--field); color:var(--cream); border:1px solid var(--march); border-radius:5px;
  box-shadow:0 4px 14px #0b1220bb; font-size:.78rem; line-height:1.45;
}
.march-tooltip strong { color:var(--march); }
.march-time { color:var(--cream); font-variant-numeric:tabular-nums; }
.map-march:is(:hover,:focus-visible,[aria-expanded="true"]) .march-tooltip { display:grid; }
.map-orders { inset:10px auto auto 28px; max-width:calc(100% - 44px); }
.map-orders summary span { margin-inline-start:4px; color:var(--gold); }
.map-orders-panel { width:min(272px,100%); padding:10px; max-height:calc(100cqh - 61px); overflow:auto; box-shadow:0 5px 20px #101928aa; }
.march-group + .march-group { border-top:1px solid var(--line); margin-top:9px; padding-top:8px; }
.march-group h3 { font-size:1.12rem; margin:0 0 5px; }
.march-group ul { list-style:none; padding:0; display:grid; gap:5px; }
.march-row { display:grid; grid-template-columns:30px minmax(0, 1fr); align-items:start; gap:7px; font-size:.78rem; }
.march-row img { height:30px; border:1px solid var(--march); }
.march-row :is(.march-summary,.march-time) { display:block; }
.march-summary { color:var(--muted); }
.march-locate { border:0; background:none; padding:0; color:var(--march); font-weight:650; cursor:pointer; text-align:start; }
.march-locate:hover { text-decoration:underline; }
.map-inspector { padding:14px; }
.map-inspector a { margin-top:12px; }
.map-inspector a[hidden] { display:none; }
#siege-form { margin-top:12px; }
#siege-form > label { display:grid; gap:4px; margin-bottom:8px; }
#siege-form select, #siege-form input { background:var(--field); color:var(--cream); border:1px solid var(--line); padding:6px; border-radius:4px; }
#siege-status { margin-top:10px; }
.attack-planner:not([hidden]) { display:grid; gap:8px; margin-top:12px; padding:8px; border:1px solid var(--line); background:#1019279e; }
.attack-planner fieldset { min-width:0; margin:0; padding:0; border:0; }
.attack-mode { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }
.attack-mode label { display:grid; }
.attack-mode input { position:absolute; width:1px; height:1px; clip-path:inset(50%); }
.attack-mode span { padding:6px 4px; text-align:center; border:1px solid var(--line); border-radius:3px; background:var(--navy-panel); font-size:.82rem; cursor:pointer; }
.attack-mode input:checked + span { border-color:var(--gold); color:var(--gold); background:var(--hover); }
.attack-mode input:focus-visible + span { outline:2px solid var(--gold); outline-offset:2px; }
.attack-mode input:disabled + span { opacity:.55; cursor:default; }
.attack-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:0; border:1px solid var(--line); background:var(--navy-panel); }
.attack-summary div { min-width:0; padding:5px 3px; text-align:center; }
.attack-summary div + div { border-inline-start:1px solid var(--subtle-line); }
.attack-summary dt { font-size:.69rem; color:var(--muted); line-height:1.15; }
.attack-summary dd { margin:2px 0 0; font-size:.92rem; font-variant-numeric:tabular-nums; color:var(--gold); font-weight:700; }
.attack-roster { display:grid; gap:5px; }
.attack-planner[data-mode="scout"] .attack-group:not(:has([data-attack-unit="scout"])) { display:none; }
.attack-planner[data-mode="scout"] .attack-group { border:0; margin:0; padding:0; }
#siege-form .attack-unit-row { margin-bottom:8px; }
.attack-unit-row { display:grid; grid-template-columns:minmax(0,1fr) 3.8rem auto; gap:5px; align-items:center; }
.attack-group { display:grid; gap:5px; }
.attack-group + .attack-group, .attack-claim-group { border-top:1px solid var(--line); padding-top:7px; }
.attack-unit-row label, .attack-claim { display:flex; gap:5px; align-items:center; line-height:1.2; font-size:.82rem; }
.attack-unit-row label small { white-space:nowrap; color:var(--muted); }
.attack-unit-row img, .attack-claim img { flex:none; object-fit:cover; object-position:center 35%; border:1px solid var(--line); border-radius:3px; }
#raid-form input[type="number"], #siege-form input[type="number"] { width:100%; min-width:0; padding:4px; color:var(--cream); background:var(--field); border:1px solid var(--line); border-radius:3px; }
.attack-all { border:1px solid var(--line); background:var(--hover); color:var(--cream); padding:4px 6px; border-radius:3px; font-size:.75rem; cursor:pointer; }
.attack-all:disabled { opacity:.45; cursor:default; }
.attack-claim { margin:3px 0; }
#raid-status { margin:8px 0; }
#royal-treasury { margin:12px 0; }
@media(max-width:560px) {
  .map-inspector-drawer { inset-inline-end:8px; }
  .map-orders { inset:10px auto auto 14px; max-width:calc(100% - 22px); }
  .map-orders[open], .map-inspector-drawer[open] { z-index:6; }
}

.recruit-group { margin-top: 24px; }
.recruit-group > h2 { margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.recruit-group .unit-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.game-recruit .unit-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 244px), 1fr)); }
.game-recruit .unit-stats dt { min-height: 2.1em; }
#seal-shop { max-width: 500px; }
#buy-seal { margin-top: 8px; }
.recruit-group .unit-card { display: flex; flex-direction: column; }
.recruit-group .unit-card > .unit-portrait { position: relative; padding: 0; background: var(--field); border-bottom: 1px solid var(--line); }
.unit-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
.unit-portrait[data-unit="ram"] img, .unit-portrait[data-unit="catapult"] img { object-fit: contain; object-position: center; }
.unit-lock { position: absolute; bottom: 9px; right: 9px; padding: 4px 8px; border: 1px solid #8697ac; border-radius: 4px; background: #151e2cea; color: var(--cream); font-size: .75rem; }
.unit-card[data-locked] { background: linear-gradient(#141d2ce0, #141d2ce0), var(--navy-cloth) center / 680px var(--dark); }
.unit-card[data-locked] .unit-portrait img { filter: grayscale(1) brightness(.72); }
.unit-card[data-locked] .eyebrow { color: var(--muted); }
.unit-copy { flex: 1; display: flex; flex-direction: column; }
.unit-copy .train-form { margin-top: auto; padding-top: 10px; }
.unit-copy [data-research] { margin-top: auto; padding-top: 10px; }
.game-academy .requirement-unmet { color: #ffab9d; font-weight: 700; }
.game-academy [data-research] button:disabled { opacity: .62; cursor: not-allowed; }
.game-academy .research-panel { display: block; max-width: 600px; margin-bottom: 18px; padding: 12px 15px; }
.research-panel summary { cursor: pointer; color: var(--gold); font-family: var(--serif); font-size: 1.2rem; }
.research-panel p { margin-top: 6px; font-variant-numeric: tabular-nums; }
#research-progress::-webkit-progress-bar { background: var(--field); }
#research-progress::-webkit-progress-value { background: var(--gold); }
#research-progress::-moz-progress-bar { background: var(--gold); }
.unit-requirements { margin-block: 4px 7px; }