@charset "UTF-8";

/* One look for every page: dark banners over real game scenes, white rounded cards, game art on tiles. */
:root {
  --banner: #0f2820;
  --banner-text: #f4f1e4;
  --banner-muted: #c9d6c4;
  --banner-line: #ffffff2e;
  --banner-gold: #e6c886;
  --card-radius: 10px;
  --accent: #3c7a5e;
}
[data-district="eras"] { --accent: #4a6f9c; }
[data-district="people"] { --accent: #a4823e; }
[data-district="cities"] { --accent: #3c7a5e; }
[data-district="progress"] { --accent: #9a4b37; }
[data-district="world"] { --accent: #2f7590; }
[data-district="religion"] { --accent: #7458a0; }
[data-district="rules"] { --accent: #6b773f; }

/* Trail at the top of every page. */
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li a, .crumbs li > span[aria-current] { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 4px; border-radius: 4px; }
.crumbs li a { color: var(--teal); }
.crumbs li a:hover { background: #e9f0df; text-decoration: none; }
.crumbs li > span[aria-current] { color: var(--ink); font-weight: 650; }
.crumb-gap { padding: 0 5px; color: #8a9989; }

/* Shared dark banner: a scene behind a gradient, the text above it. */
.plaza-hero, .shelf-banner, .zone-head, .record-header { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--card-radius); background: var(--banner); color: var(--banner-text); }
.plaza-hero-art, .banner-art, .zone-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.plaza-hero::after, .shelf-banner::after, .zone-head::after, .record-header::after { position: absolute; z-index: -1; inset: 0; content: ""; }
.plaza-hero h1, .shelf-banner h1, .zone-head h2, .record-header h1 { color: #fffdf3; }
.plaza-hero .heading-label, .shelf-banner .heading-label, .zone-english { color: var(--banner-gold); }

/* Home: banner with the search. */
.plaza-hero { display: flex; align-items: flex-end; min-height: 400px; margin: 0 0 18px; }
.plaza-hero::after { background: linear-gradient(90deg, #08190fe6 0%, #0b2117c4 42%, #0b211740 100%), linear-gradient(0deg, #08190fcc 0%, #08190f00 55%); }
.plaza-hero-inner { width: min(100%, 760px); padding: 46px 44px 40px; }
.plaza-hero h1 { margin: 0; font-size: clamp(36px, 4.4vw, 54px); letter-spacing: -1.6px; text-shadow: 0 2px 18px #0008; }
.plaza-hero-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 22px; }
.plaza-hero-meta span { display: inline-flex; align-items: center; min-height: 30px; padding: 3px 11px; border: 1px solid var(--banner-line); border-radius: 999px; background: #ffffff14; color: var(--banner-text); font-size: 13px; backdrop-filter: blur(4px); }
.plaza-search .search-form { min-height: 62px; border-color: #ffffff66; border-radius: 12px; box-shadow: 0 10px 30px #0006; }

/* Signpost: every district with its size. */
.plaza-signpost { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 40px; }
.signpost-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; align-items: center; gap: 10px 12px; min-height: 118px; padding: 14px 16px 15px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); color: var(--ink); transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease; }
.signpost-card:hover { border-color: #9cb08f; box-shadow: 0 6px 18px #173d3414; transform: translateY(-1px); }
.signpost-art { display: flex; }
.signpost-art .entity-picture { width: 38px; height: 38px; margin-left: -8px; border: 2px solid var(--surface); border-radius: 50%; }
.signpost-art :where(.entity-picture) { padding: 4px; background: #eef1e7; }
.signpost-art .entity-picture:first-child { margin-left: 0; }
.signpost-art .entity-picture img { border-radius: 50%; }
.signpost-text { grid-column: 1 / -1; align-self: start; min-width: 0; }
.signpost-text strong { display: block; font-size: 16px; line-height: 1.4; }
.signpost-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.5; word-break: keep-all; }
.signpost-count { grid-column: 2; grid-row: 1; color: #5f735d; font-size: 14px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Zones: a district banner, then white shelves. */
.plaza-zone { margin: 0 0 46px; scroll-margin-top: 96px; }
.zone-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-height: 168px; padding: 28px 30px 22px; }
.zone-head::after { background: linear-gradient(90deg, #08190ff0 0%, #0b2117d6 48%, #0b211759 100%); }
.zone-head .zone-art { left: 30%; width: 70%; }
.zone-english { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; }
.zone-head h2 { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: clamp(25px, 2.6vw, 32px); letter-spacing: -.8px; }
.zone-count { color: var(--banner-muted); font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.zone-text p { margin: 6px 0 0; color: var(--banner-muted); font-size: 14px; line-height: 1.6; }
.zone-shelves, .banner-shelves { display: flex; flex-wrap: wrap; gap: 7px; }
.zone-shelves a, .banner-shelves a { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 12px; border: 1px solid var(--banner-line); border-radius: 999px; background: #ffffff12; color: var(--banner-text); font-size: 13px; line-height: 1.4; backdrop-filter: blur(4px); }
.zone-shelves a span, .banner-shelves a span { color: var(--banner-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.zone-shelves a:hover, .banner-shelves a:hover { border-color: #ffffff80; background: #ffffff26; }
.banner-shelves a svg { width: 16px; height: 16px; }
.banner-shelves a[aria-current="page"] { border-color: var(--banner-gold); background: #e6c88629; color: #fff6dc; font-weight: 700; }
.zone-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 14px; }
.plaza-shelf { min-width: 0; padding: 20px 22px 18px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--card-radius); background: var(--surface); }
.shelf-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 0 0 12px; }
.shelf-head h3 { display: flex; align-items: baseline; gap: 2px; margin: 0; font-size: 19px; }
.shelf-head h3 a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.shelf-head h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.shelf-head h3 svg { width: 20px; height: 20px; color: var(--accent); }
.shelf-more { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 36px; color: var(--teal); font-size: 13px; }
.shelf-more svg { width: 16px; height: 16px; }
.shelf-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.shelf-note { margin: -4px 0 12px; color: var(--muted); font-size: 13px; }
.home-progression { margin: 0; padding: 20px 22px; border: 1px solid var(--line); border-top: 3px solid #4a6f9c; border-radius: var(--card-radius); background: var(--surface); }
.home-progression .era-navigation { margin-bottom: 14px; }
.home-progression .development-tracks { margin: 0; }

/* Tiles inside shelves. */
.plaza-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.plaza-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 4px 11px 4px 4px; border: 1px solid var(--line-soft); border-radius: 8px; background: #f7f8f1; color: var(--ink); font-size: 13.5px; line-height: 1.4; word-break: keep-all; }
.plaza-chip:hover { border-color: #9cb08f; background: #ecf2e4; }
.plaza-chip .entity-picture { width: 31px; height: 31px; }
.plaza-chip .entity-picture[data-category='units'], .plaza-chip .entity-picture[data-category='civilizations'], .plaza-chip .entity-picture[data-category='great-people'], .plaza-chip .entity-picture[data-category='city-states'], .plaza-chip .entity-picture[data-monochrome='true'] { padding: 4px; }
.plaza-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: 14px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.plaza-row:first-of-type { border-top: 0; padding-top: 2px; }
.plaza-row-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2px; padding-top: 9px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.plaza-row-label a { color: var(--teal); }
.plaza-row-label a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plaza-row-label small { flex-basis: 100%; color: var(--muted); font-size: 12px; font-weight: 400; }
.plaza-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; }
.plaza-face { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 62px; padding: 6px 10px 6px 6px; border: 1px solid var(--line-soft); border-radius: 8px; background: #f7f8f1; color: var(--ink); }
.plaza-face:hover { border-color: #9cb08f; background: #ecf2e4; }
.plaza-face .entity-picture { width: 48px; height: 48px; }
.plaza-face > span { min-width: 0; }
.plaza-face strong { display: block; font-size: 14px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.plaza-face small { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.plaza-face small img { width: 17px; height: 17px; padding: 2px; border-radius: 50%; background: #355747; object-fit: contain; }
.plaza-tally { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 6px; }
.plaza-tally > a, .plaza-tally > span { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 6px 12px 6px 6px; border: 1px solid var(--line-soft); border-radius: 8px; background: #f7f8f1; color: var(--ink); font-size: 14px; line-height: 1.4; }
.plaza-tally.plain > span { padding-left: 13px; }
.plaza-tally > a:hover { border-color: #9cb08f; background: #ecf2e4; }
.plaza-tally .entity-picture { width: 36px; height: 36px; }
.plaza-tally > * > span:not(.entity-picture):not(.group-count) { flex: 1; min-width: 0; word-break: keep-all; }
.plaza-tally small { display: block; color: var(--muted); font-size: 12px; }
.plaza-tally .group-count { margin-left: auto; }
.district-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.district-card { min-width: 0; padding: 12px; border: 1px solid var(--line-soft); border-radius: 9px; background: #f9faf4; }
.district-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; color: var(--ink); }
.district-card-head .entity-picture { width: 44px; height: 44px; }
.district-card-head strong { font-size: 16px; }
.district-card-head .group-count { margin-left: auto; }
.district-card-head:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.district-card .plaza-chip { background: var(--surface); }
.district-card-empty { margin: 0; color: var(--muted); font-size: 13px; }
.slot-table { display: grid; overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; }
.slot-row { display: grid; grid-template-columns: minmax(130px, 1.6fr) repeat(4, minmax(64px, 1fr)); align-items: center; min-height: 42px; border-top: 1px solid var(--line-soft); font-size: 14px; font-variant-numeric: tabular-nums; }
.slot-row > * { padding: 7px 12px; }
.slot-row > span { text-align: center; }
.slot-row a { color: var(--teal); font-weight: 650; }
.slot-row a:hover { text-decoration: underline; text-underline-offset: 3px; }
.slot-caption { min-height: 36px; border-top: 0; background: #eef1e7; color: #496343; font-size: 13px; font-weight: 650; }
.slot-caption > span:first-child { text-align: left; }
.plaza-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.plaza-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; gap: 10px 12px; min-height: 120px; padding: 16px 18px; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--card-radius); background: var(--surface); color: var(--ink); }
.plaza-card:hover { border-color: #9cb08f; box-shadow: 0 6px 18px #173d3414; }
.plaza-card-art { display: flex; grid-column: 1 / -1; gap: 6px; }
.plaza-card-art .entity-picture { width: 38px; height: 38px; }
.plaza-card-text strong { display: flex; align-items: baseline; font-size: 17px; }
.plaza-card-text small { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
.plaza-card > svg { width: 18px; height: 18px; color: var(--teal); }
.topic-index { display: grid; gap: 0; }
.topic-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 1.7; }
.topic-row:first-child { border-top: 0; padding-top: 0; }
.topic-label { color: var(--ink); font-weight: 700; }
.topic-links { display: flex; flex-wrap: wrap; gap: 2px 0; }
.topic-links a { color: var(--teal); }
.topic-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.topic-links a + a::before { padding: 0 7px; color: #a5b29e; content: "·"; }

/* List pages: the district banner with the shelf's pictures. */
.shelf-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 22px 30px; min-height: 200px; margin: 0 0 22px; padding: 30px 32px; }
.shelf-banner::after { background: linear-gradient(90deg, #08190ff2 0%, #0b2117d9 52%, #0b211780 100%); }
.banner-main { min-width: 0; }
.shelf-banner h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -1px; }
.shelf-banner .heading-count { margin: 0; color: var(--banner-muted); font-size: 17px; }
.banner-summary { margin: 8px 0 0; color: var(--banner-muted); font-size: 15px; line-height: 1.6; }
.banner-shelves { margin-top: 16px; }
.banner-tiles { display: grid; grid-template-columns: repeat(4, 62px); gap: 8px; }
.banner-tiles .entity-picture { width: 62px; height: 62px; padding: 7px; border: 1px solid var(--banner-line); border-radius: 12px; background: #ffffff14; backdrop-filter: blur(4px); }
.banner-tiles .entity-picture[data-category='units'], .banner-tiles .entity-picture[data-category='civilizations'], .banner-tiles .entity-picture[data-category='great-people'], .banner-tiles .entity-picture[data-category='city-states'], .banner-tiles .entity-picture[data-monochrome='true'] { border-radius: 50%; background: #355747cc; padding: 11px; }
.banner-tiles .entity-picture[data-category='leaders'] { padding: 2px; }
.banner-icon { grid-template-columns: 96px; }
.banner-icon .category-picture { width: 96px; height: 96px; border-color: var(--banner-line); background: #ffffff14; color: var(--banner-gold); }
.page-kind-listing .browse-layout, .page-kind-eras .era-navigation { margin-top: 0; }

/* Articles: the record header becomes the district banner. */
.record-header { display: flex; align-items: center; gap: 24px; min-height: 190px; padding: 28px 30px; border-bottom: 0; }
.record-header::after { background: linear-gradient(90deg, #08190ff5 0%, #0b2117e0 55%, #0b211799 100%); }
.record-header .record-art { flex: 0 0 124px; width: 124px; height: 124px; padding: 12px; border: 1px solid var(--banner-line); border-radius: 16px; background: #ffffff12; backdrop-filter: blur(4px); }
.record-header .record-art[data-category='units'], .record-header .record-art[data-category='civilizations'], .record-header .record-art[data-category='great-people'], .record-header .record-art[data-category='city-states'], .record-header .record-art[data-monochrome='true'] { padding: 22px; border-radius: 50%; background: #355747; }
.record-header .record-art[data-category='leaders'] { padding: 4px; }
.record-header h1 { font-size: clamp(32px, 3.2vw, 42px); text-shadow: 0 2px 14px #0007; }
.record-header .detail-kicker { color: var(--banner-gold); font-weight: 650; }
.record-header .detail-kicker a:hover { color: #fff3cf; }
.record-header .english-name { color: var(--banner-muted); }
.record-header .ruleset { border-color: #e6c88666; background: #e6c8861f; color: var(--banner-gold); }
.record-header .classification-link, .record-header .civ-badge { border-color: var(--banner-line); background: #ffffff14; color: var(--banner-text); }
.record-header .classification-link:hover, .record-header .civ-badge:hover { border-color: #ffffff80; background: #ffffff26; color: #fff; }
.record-header .replacement-link { color: var(--banner-muted); }
.record-header .replacement-link .term-link { color: #fff3cf; text-decoration-color: #e6c88699; }
.record-header .term-link:hover { background: transparent; color: #fff; }
.record-era-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.record-era-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--teal); font-size: 13px; }
.record-era-links a:hover { border-color: #9cb08f; background: #ecf2e4; }
.highlight { border-radius: var(--card-radius); background: var(--surface); border-color: var(--line); border-top: 3px solid var(--accent); }
.page-kind-article .highlight { --accent: #6f8866; }
.data-rows, .entry-list, .data-list, .filter-panel, .mobile-toc, .index-tiles, .related-index, .empty-state { border-radius: var(--card-radius); }
.listing-caption { border-radius: var(--card-radius) var(--card-radius) 0 0; }
.listing-caption + .entry-list { border-radius: 0 0 var(--card-radius) var(--card-radius); }
.search-form { border-radius: 10px; }
.index-tiles, .related-index { overflow: hidden; }

/* The end of every article: neighbours on the shelf and the way back to the list. */
.shelf-nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; margin: 46px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.shelf-step, .shelf-home { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 78px; padding: 12px 16px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); color: var(--ink); }
.shelf-step:hover, .shelf-home:hover { border-color: #9cb08f; box-shadow: 0 6px 18px #173d3414; }
.shelf-step.next { flex-direction: row-reverse; text-align: right; }
.shelf-step.is-empty { visibility: hidden; }
.shelf-step .entity-picture { width: 48px; height: 48px; }
.shelf-step > span:last-child { min-width: 0; }
.shelf-step small, .shelf-home small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; }
.shelf-step strong { display: block; font-size: 15px; line-height: 1.45; word-break: keep-all; overflow-wrap: anywhere; }
.shelf-home { justify-content: center; padding-inline: 22px; background: #eef2e6; }
.shelf-home svg { width: 22px; height: 22px; color: var(--teal); }
.shelf-home strong { display: block; font-size: 14px; white-space: nowrap; }
.shelf-home small { font-variant-numeric: tabular-nums; }

/* Religion, pantheon, belief and road icons are light outlines; they share the units' dark disc. */
:is(.entity-picture, .record-art)[data-category='religions'], :is(.entity-picture, .record-art)[data-category='pantheons'], :is(.entity-picture, .record-art)[data-category='beliefs'], :is(.entity-picture, .record-art)[data-category='routes'] { padding: 6px; border-radius: 50%; background: #355747; }
/* Their grey outlines are faint even on the disc; they are drawn white, as the game shows them. */
:is(.entity-picture, .record-art)[data-category='religions'] img, :is(.entity-picture, .record-art)[data-category='pantheons'] img, :is(.entity-picture, .record-art)[data-category='beliefs'] img, .term-icon[data-category='religions'], .term-icon[data-category='pantheons'], .term-icon[data-category='beliefs'] { filter: brightness(0) invert(1) drop-shadow(0 0 .6px #fff); }
.term-icon[data-category='religions'], .term-icon[data-category='pantheons'], .term-icon[data-category='beliefs'], .term-icon[data-category='routes'], .term-icon[data-category='city-states'] { padding: 2px; border-radius: 50%; background: #355747; }
.plaza-chip .entity-picture[data-category='religions'], .plaza-chip .entity-picture[data-category='pantheons'], .plaza-chip .entity-picture[data-category='beliefs'], .plaza-chip .entity-picture[data-category='routes'] { padding: 4px; }
.record-header .record-art[data-category='religions'], .record-header .record-art[data-category='pantheons'], .record-header .record-art[data-category='beliefs'], .record-header .record-art[data-category='routes'] { padding: 20px; border-radius: 50%; background: #355747; }
.banner-tiles .entity-picture[data-category='religions'], .banner-tiles .entity-picture[data-category='pantheons'], .banner-tiles .entity-picture[data-category='beliefs'], .banner-tiles .entity-picture[data-category='routes'] { padding: 11px; border-radius: 50%; background: #355747cc; }

/* City-state glyphs are white outlines; they sit on the colour of their type, as in the game. */
.entity-picture[data-category='city-states'], .record-art[data-category='city-states'] { padding: 7px; border-radius: 50%; background: #4d5a63; }
[data-city-state='과학'] { background: #2f6aa3 !important; }
[data-city-state='문화'] { background: #73449a !important; }
[data-city-state='상업'] { background: #a88320 !important; }
[data-city-state='종교'] { background: #5e6c78 !important; }
[data-city-state='산업'] { background: #b8682a !important; }
[data-city-state='군사'] { background: #9c3333 !important; }

@media (max-width: 1279px) {
  .plaza-signpost { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .plaza-signpost { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .banner-tiles { grid-template-columns: repeat(4, 50px); gap: 6px; }
  .banner-tiles .entity-picture { width: 50px; height: 50px; }
}
@media (max-width: 800px) {
  .shelf-banner { grid-template-columns: minmax(0, 1fr); }
  .banner-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .banner-tiles .entity-picture { width: 100%; height: auto; aspect-ratio: 1; }
  .banner-icon { display: none; }
  .zone-head .zone-art { left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .crumbs li a, .crumbs li > span[aria-current] { min-height: 30px; }
  .plaza-hero { min-height: 0; }
  .plaza-hero-inner { padding: 34px 20px 22px; }
  .plaza-hero h1 { font-size: 34px; }
  .plaza-hero-meta { margin: 10px 0 18px; }
  .plaza-hero-meta span { font-size: 12px; }
  .plaza-signpost { gap: 8px; margin-bottom: 32px; }
  .signpost-card { gap: 8px; min-height: 0; padding: 11px 12px 12px; }
  .signpost-art .entity-picture { width: 32px; height: 32px; }
  .signpost-text strong { font-size: 15px; }
  .signpost-count { font-size: 13px; }
  .zone-head { min-height: 0; padding: 22px 18px 18px; }
  .zone-shelves a { min-height: 40px; }
  .plaza-shelf { padding: 16px 14px 14px; }
  .shelf-head h3 { font-size: 18px; }
  .plaza-row, .topic-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .plaza-row-label { padding-top: 0; }
  .plaza-faces { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
  .plaza-face { gap: 8px; padding-right: 8px; }
  .plaza-face .entity-picture { width: 42px; height: 42px; }
  .plaza-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plaza-tally > a, .plaza-tally > span { gap: 7px; padding-right: 9px; font-size: 13px; }
  .plaza-tally .entity-picture { width: 30px; height: 30px; }
  .district-cards { grid-template-columns: minmax(0, 1fr); }
  .plaza-cards { grid-template-columns: minmax(0, 1fr); }
  .shelf-banner { gap: 16px; min-height: 0; padding: 24px 18px 20px; }
  .shelf-banner h1 { font-size: 30px; }
  .banner-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .banner-tiles .entity-picture:nth-child(n+5) { display: none; }
  .banner-shelves a { min-height: 40px; }
  .record-header { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px 16px; min-height: 0; padding: 22px 18px 20px; }
  .record-header .record-art { grid-row: 1 / span 2; width: 88px; height: 88px; padding: 8px; border-radius: 12px; }
  .record-header .record-art[data-category='units'], .record-header .record-art[data-category='civilizations'], .record-header .record-art[data-category='great-people'], .record-header .record-art[data-category='city-states'], .record-header .record-art[data-monochrome='true'] { padding: 15px; }
  .record-header h1 { font-size: 30px; }
  .record-header > .banner-art + .record-heading, .record-header > .banner-art + .record-heading ~ .ruleset { grid-column: 1 / -1; }
  .shelf-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf-home { grid-column: 1 / -1; grid-row: 1; min-height: 56px; }
  .shelf-step { gap: 9px; min-height: 70px; padding: 10px 11px; }
  .shelf-step .entity-picture { width: 38px; height: 38px; }
  .shelf-step strong { font-size: 14px; }
  .shelf-step.is-empty { display: none; }
}
@media (max-width: 600px) {
  .crumbs, .crumbs ol { flex-wrap: nowrap; overflow: hidden; }
  .crumbs ol { min-width: 0; width: 100%; }
  .crumbs li { flex: 0 0 auto; }
  .crumbs li:last-child { flex: 1; min-width: 0; }
  .crumbs li > span[aria-current] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 480px) {
  .record-header { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .record-header .record-art { grid-column: 1; grid-row: 1; width: 56px; height: 56px; padding: 6px; }
  .record-header .record-art[data-category] { padding: 8px; }
  .record-header .record-heading { display: contents; }
  .record-header .detail-kicker { grid-column: 2; align-self: center; margin: 0; }
  .record-header:not(:has(.record-art)) .detail-kicker { grid-column: 1 / -1; }
  .record-header h1, .record-header .english-name, .record-header .record-connections, .record-header .ruleset { grid-column: 1 / -1; margin: 0; }
  .record-header .record-connections:empty { display: none; }
}
@media print {
  .plaza-hero, .shelf-banner, .zone-head, .record-header { background: #fff; color: #111; }
  .plaza-hero-art, .banner-art, .zone-art, .banner-tiles, .shelf-nav { display: none !important; }
  .plaza-hero::after, .shelf-banner::after, .zone-head::after, .record-header::after { display: none; }
  .plaza-hero h1, .shelf-banner h1, .zone-head h2, .record-header h1 { color: #111; text-shadow: none; }
}