:root {
  --bg: #f3efe6;
  --panel: rgba(255, 252, 247, 0.9);
  --text: #1f2933;
  --muted: #64707d;
  --line: #d7c8af;
  --primary: #194e78;
  --primary-dark: #133d5e;
  --warm: #b08246;
  --success: #2f7d55;
  --success-bg: #edf8f1;
  --error: #b9473a;
  --error-bg: #fff0ed;
  --shadow: 0 20px 40px rgba(48, 43, 34, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.8), transparent 30%),
    linear-gradient(180deg, #f8f4ea 0%, var(--bg) 55%, #ece5d8 100%);
}

.home-page {
  background:
    radial-gradient(circle at top left, rgba(176, 130, 70, 0.14), transparent 24%),
    radial-gradient(circle at top right, rgba(25, 78, 120, 0.1), transparent 24%),
    linear-gradient(180deg, #f8f4ed 0%, #f3eee5 56%, #ebe3d5 100%);
}

img {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

.container {
  width: min(1560px, calc(100% - 28px));
  margin: 0 auto;
  padding: 28px 0 40px;
}

.top-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
  padding: 14px 18px;
  background: rgba(255, 252, 247, 0.78);
  border: 1px solid rgba(164, 139, 99, 0.16);
  border-radius: 22px;
  box-shadow: 0 12px 24px rgba(48, 43, 34, 0.08);
  backdrop-filter: blur(10px);
}

.top-nav-home {
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 252, 247, 0.72);
  border: 1px solid rgba(164, 139, 99, 0.15);
  box-shadow: 0 10px 24px rgba(48, 43, 34, 0.06);
  padding: 10px 18px;
  margin-bottom: 10px;
}

.nav-brand {
  color: var(--text);
  text-decoration: none;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(176, 130, 70, 0.18);
  font-weight: 700;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.nav-link:hover,
.nav-link.is-active {
  background: #fffdf8;
  border-color: rgba(25, 78, 120, 0.28);
  transform: translateY(-1px);
}

.nav-link-external {
  background: rgba(25, 78, 120, 0.08);
  border-color: rgba(25, 78, 120, 0.16);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.8fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

.hub-hero {
  margin-bottom: 24px;
  padding: 34px;
  background: var(--panel);
  border: 1px solid rgba(164, 139, 99, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.home-hero {
  display: block;
  margin-bottom: 24px;
}

.home-copy,
.home-feature {
  background: var(--panel);
  border: 1px solid rgba(164, 139, 99, 0.18);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.home-copy {
  padding: 26px 34px 30px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)),
    rgba(255, 252, 247, 0.92);
}

.home-copy::after {
  content: "";
  position: absolute;
  right: -80px;
  bottom: -170px;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(25, 78, 120, 0.15), rgba(25, 78, 120, 0));
}

.brand-lockup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 172px;
  gap: 20px;
  align-items: start;
}

.brand-text {
  position: relative;
  z-index: 1;
  max-width: 920px;
}

.home-copy h1 {
  margin: 0;
  max-width: none;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(2.9rem, 4.6vw, 5.15rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.brand-portrait {
  position: relative;
  align-self: start;
  width: 172px;
  min-height: 0;
  height: 172px;
  max-width: 172px;
  max-height: 172px;
  overflow: hidden;
  border-radius: 24px;
  margin-left: 0;
  box-shadow: 0 18px 42px rgba(48, 43, 34, 0.12);
}

.brand-portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 252, 247, 0.86) 0%, rgba(255, 252, 247, 0.18) 28%, rgba(255, 252, 247, 0) 56%),
    linear-gradient(180deg, rgba(255, 252, 247, 0.12) 0%, rgba(255, 252, 247, 0) 24%, rgba(255, 252, 247, 0.58) 100%);
  pointer-events: none;
}

.brand-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% top;
  filter: grayscale(100%) contrast(1.06) brightness(1.02);
  opacity: 0.96;
  mix-blend-mode: multiply;
}

.home-subtitle {
  margin: 14px 0 8px;
  max-width: 48ch;
  color: var(--text);
  font-size: clamp(1.22rem, 1rem + 0.52vw, 1.56rem);
  font-weight: 650;
  line-height: 1.44;
  text-wrap: balance;
}

.placeholder-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
  gap: 20px;
  align-items: stretch;
}

.hub-copy {
  max-width: 760px;
}

.hub-sections {
  display: grid;
  gap: 22px;
}

.hub-section {
  display: grid;
  gap: 14px;
}

.hub-section-head {
  padding: 0 4px;
}

.hub-section-head h2 {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.65rem, 2vw, 2.15rem);
  line-height: 1.08;
}

.hub-section-head .eyebrow {
  margin-bottom: 6px;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.hub-grid-single {
  grid-template-columns: minmax(0, 1fr);
}

.hub-card,
.placeholder-card {
  padding: 24px;
  background: rgba(255, 252, 247, 0.9);
  border: 1px solid rgba(164, 139, 99, 0.18);
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(48, 43, 34, 0.1);
}

.hub-card-link {
  color: inherit;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.hub-card-link:hover,
.hub-card-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px rgba(48, 43, 34, 0.12);
  border-color: rgba(25, 78, 120, 0.24);
}

.hub-card h2,
.placeholder-card h2 {
  margin: 0 0 12px;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.55rem;
}

.hub-card-large {
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
}

.hub-card-illustrated {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  isolation: isolate;
}

.hub-card-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hub-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255, 252, 247, 0.98) 0%, rgba(255, 252, 247, 0.88) 30%, rgba(255, 252, 247, 0.54) 54%, rgba(255, 252, 247, 0.22) 72%, rgba(255, 252, 247, 0.04) 100%),
    linear-gradient(180deg, rgba(255, 252, 247, 0.1) 0%, rgba(255, 252, 247, 0.46) 100%);
}

.hub-card-art img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 40%;
  height: 100%;
  object-fit: cover;
  object-position: center 16%;
  filter: grayscale(100%) contrast(1.05) brightness(1.02);
  opacity: 0.72;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.96) 52%, rgba(0, 0, 0, 0.58) 74%, rgba(0, 0, 0, 0.12) 100%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.96) 52%, rgba(0, 0, 0, 0.58) 74%, rgba(0, 0, 0, 0.12) 100%);
}

.hub-card-content {
  position: relative;
  z-index: 1;
  max-width: 62%;
}

.hub-card-cs .hub-card-art img {
  width: 36%;
  object-position: center 15%;
}

.hub-card-ksss .hub-card-art img {
  width: 38%;
  object-position: center 10%;
}

.hub-card-usa .hub-card-art img {
  width: 41%;
  object-position: center 12%;
}

.hub-card-events .hub-card-art img {
  width: 38%;
  object-position: center 10%;
}

.hub-card-nazis .hub-card-art img {
  width: 37%;
  object-position: center 10%;
}

.hub-card-russia .hub-card-art img {
  width: 37%;
  object-position: center 10%;
}

.hub-card-map .hub-card-art img {
  bottom: -18px;
  width: 42%;
  object-position: center;
  filter: grayscale(96%) contrast(1.05) brightness(1.02);
  opacity: 0.64;
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.92) 48%, rgba(0, 0, 0, 0.42) 74%, rgba(0, 0, 0, 0.08) 100%);
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 0.92) 48%, rgba(0, 0, 0, 0.42) 74%, rgba(0, 0, 0, 0.08) 100%);
}

.hub-card-dynasties .hub-card-art img {
  width: 43%;
  object-position: center 52%;
  filter: grayscale(100%) contrast(1.06) brightness(1.02);
  opacity: 0.66;
}

.hub-card-architecture .hub-card-art img {
  width: 46%;
  object-position: center 28%;
  filter: grayscale(100%) contrast(1.08) brightness(1.01);
  opacity: 0.68;
}

.hub-card p,
.placeholder-card p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.6;
}

.support-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  gap: 22px;
  align-items: center;
  margin-top: 8px;
  padding: 22px 24px;
  background: rgba(255, 252, 247, 0.78);
  border: 1px solid rgba(164, 139, 99, 0.18);
  border-radius: 24px;
  box-shadow: 0 16px 34px rgba(48, 43, 34, 0.08);
}

.support-note-copy {
  max-width: 820px;
}

.support-note .eyebrow {
  margin: 0 0 6px;
}

.support-note h2 {
  margin: 0;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(1.55rem, 2vw, 2rem);
  line-height: 1;
}

.support-note p:not(.eyebrow) {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.65;
}

.support-qr {
  width: 132px;
  aspect-ratio: 1;
  padding: 8px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(25, 78, 120, 0.12);
  box-shadow: 0 10px 22px rgba(48, 43, 34, 0.1);
}

.support-qr img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.hero-copy,
.controls-panel,
.panel {
  background: var(--panel);
  border: 1px solid rgba(164, 139, 99, 0.18);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
}

.hero-copy {
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.hero-copy::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -40px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 130, 70, 0.28), rgba(176, 130, 70, 0));
}

.eyebrow,
.panel-label {
  margin: 0 0 10px;
  color: var(--warm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
}

.hero h1 {
  margin: 0;
  max-width: 10ch;
  font-size: clamp(1.9rem, 3vw, 3.1rem);
  line-height: 1.02;
}

.hero-text {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: 0;
  max-width: 76ch;
  border-top: 0;
  color: var(--muted);
  font-size: clamp(1.08rem, 1rem + 0.22vw, 1.2rem);
  font-weight: 500;
  line-height: 1.65;
}

.controls-panel {
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

button {
  appearance: none;
}

.controls button {
  border: none;
  border-radius: 999px;
  padding: 14px 16px;
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  color: white;
  background: linear-gradient(135deg, var(--primary) 0%, #29699b 100%);
  box-shadow: 0 10px 18px rgba(25, 78, 120, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.controls button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(25, 78, 120, 0.28);
  background: linear-gradient(135deg, var(--primary-dark) 0%, #245f8d 100%);
}

.result-message {
  margin: 18px 0 0;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  color: var(--text);
  font-weight: 600;
  line-height: 1.5;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.52fr) minmax(620px, 1.08fr);
  gap: 20px;
  align-items: start;
}

.panel {
  padding: 22px;
}

.panel-head h2 {
  margin: 0 0 18px;
  font-size: 1.45rem;
}

.board-header {
  display: grid;
  grid-template-columns: 54px minmax(76px, 0.33fr) minmax(82px, 0.36fr) 176px;
  gap: 10px;
  margin-bottom: 12px;
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.timeline-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.timeline-row {
  display: grid;
  grid-template-columns: 54px minmax(76px, 0.33fr) minmax(82px, 0.36fr) 176px;
  gap: 10px;
  align-items: center;
}

.timeline-index {
  min-height: 74px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff9ef, #f3e3c7);
  color: var(--warm);
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(176, 130, 70, 0.16);
}

.dropzone {
  min-height: 74px;
  border: 2px dashed var(--line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(249, 244, 236, 0.95));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dropzone[data-kind="name"],
.dropzone[data-kind="period"] {
  justify-content: center;
}

.dropzone::after {
  color: #8a8f99;
  font-size: 0.76rem;
  line-height: 1.25;
}

.dropzone[data-kind="name"]::after {
  content: "Sem jméno";
}

.dropzone[data-kind="period"]::after {
  content: "Sem období";
}

.dropzone[data-kind="portrait"]::after {
  content: "Sem portrét";
}

.dropzone.filled::after {
  content: "";
}

.dropzone.drag-over,
.source-container.drag-over {
  border-color: var(--primary);
  background: linear-gradient(180deg, #f3f8fd, #e7f0f8);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.12);
  transform: translateY(-1px);
}

.portrait-dropzone {
  padding: 6px;
}

.sources {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  position: sticky;
  top: 20px;
}

.portraits-panel {
  min-width: 0;
}

.ksss-page .sources {
  grid-template-columns: 0.92fr 0.92fr 1.16fr;
}

.ksss-page {
  background:
    radial-gradient(circle at top left, rgba(176, 130, 70, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(25, 78, 120, 0.1), transparent 24%),
    linear-gradient(180deg, #f8f3ea 0%, #eee6d9 100%);
}

.ksss-page .top-nav {
  background: rgba(255, 252, 247, 0.82);
  border-color: rgba(164, 139, 99, 0.15);
  box-shadow: 0 10px 24px rgba(48, 43, 34, 0.07);
}

.ksss-page .nav-brand {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.42rem;
  letter-spacing: -0.02em;
}

.ksss-page .hero {
  grid-template-columns: minmax(0, 1.38fr) minmax(310px, 0.82fr);
  gap: 18px;
}

.ksss-page .hero-copy,
.ksss-page .controls-panel,
.ksss-page .panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    rgba(255, 252, 247, 0.92);
  border-color: rgba(164, 139, 99, 0.16);
  box-shadow: 0 18px 36px rgba(48, 43, 34, 0.1);
}

.ksss-page .hero-copy {
  padding: 36px;
}

.ksss-page .hero-copy::after {
  right: -40px;
  top: -30px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(25, 78, 120, 0.14), rgba(25, 78, 120, 0));
}

.ksss-page .eyebrow,
.ksss-page .panel-label {
  color: var(--primary);
}

.ksss-page .hero h1 {
  margin: 0;
  max-width: 10ch;
  font-family: "EB Garamond", Georgia, serif;
  font-size: clamp(2.3rem, 3.2vw, 3.5rem);
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.ksss-page .hero-text {
  margin-top: 12px;
  max-width: 52ch;
  line-height: 1.62;
  font-size: 1rem;
}

.ksss-page .controls-panel {
  padding: 24px;
}

.ksss-page .controls button {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  border: 1px solid rgba(25, 78, 120, 0.14);
  box-shadow: 0 8px 18px rgba(35, 49, 61, 0.08);
}

.ksss-page .controls button:hover {
  background: #fffdf8;
  box-shadow: 0 12px 22px rgba(35, 49, 61, 0.1);
}

.ksss-page .result-message {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(164, 139, 99, 0.14);
}

.ksss-page .panel-head h2 {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.62rem;
}

.ksss-page .board-header {
  padding: 0;
  gap: 12px;
}

.ksss-page .board-header span {
  padding: 0 0 6px;
  border-bottom: 1px solid rgba(164, 139, 99, 0.22);
}

.ksss-page .timeline-index {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.35rem;
  background: linear-gradient(180deg, #fffaf1, #f2e3c9);
}

.ksss-page .dropzone {
  border-color: rgba(164, 139, 99, 0.36);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 241, 232, 0.96));
}

.ksss-page .card,
.ksss-page .period-card,
.ksss-page .portrait-token {
  background: linear-gradient(180deg, #fffefb, #f8f1e5);
  box-shadow: 0 8px 18px rgba(89, 76, 57, 0.08);
}

.ksss-page .dropzone.drag-over,
.ksss-page .source-container.drag-over {
  background: linear-gradient(180deg, #f3f8fd, #eaf1f7);
}

.ksss-page .portraits-source {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ksss-page .portrait-token {
  padding: 9px;
}

.ksss-page .portrait-token img {
  aspect-ratio: 3 / 4;
  border-radius: 13px;
}

.source-container {
  border: 2px dashed transparent;
  border-radius: 18px;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cards-container,
.periods-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.card,
.period-card {
  width: 100%;
  background: linear-gradient(180deg, #fffefb, #f7f1e7);
  border: 1px solid rgba(176, 130, 70, 0.28);
  border-radius: 16px;
  padding: 13px 14px;
  cursor: grab;
  user-select: none;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(89, 76, 57, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  font-size: 0.94rem;
  line-height: 1.25;
}

.period-card {
  text-align: center;
  letter-spacing: 0.02em;
}

.card:hover,
.period-card:hover,
.portrait-token:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(89, 76, 57, 0.11);
  border-color: rgba(25, 78, 120, 0.35);
}

.card:active,
.period-card:active,
.portrait-token:active {
  cursor: grabbing;
}

.portraits-source {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.portrait-token {
  width: 100%;
  border: 1px solid rgba(176, 130, 70, 0.28);
  border-radius: 16px;
  background: linear-gradient(180deg, #fffefb, #f7f1e7);
  padding: 7px;
  cursor: grab;
  box-shadow: 0 10px 18px rgba(89, 76, 57, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.portrait-token img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 11px;
  pointer-events: none;
}

.dropzone .card,
.dropzone .period-card,
.dropzone .portrait-token {
  margin: 0;
}

.dropzone .card,
.dropzone .period-card {
  padding: 8px 6px;
  font-size: 0.76rem;
  line-height: 1.15;
}

.dropzone .portrait-token {
  max-width: 142px;
  padding: 7px;
}

.usa-party-note {
  margin: -2px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.party-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 700;
  color: #16324a;
  background: rgba(255, 255, 255, 0.86);
}

.party-chip-democrat {
  border-left: 6px solid #2a67c7;
}

.party-chip-republican {
  border-left: 6px solid #c53a3a;
}

.usa-page .card,
.usa-page .period-card,
.usa-page .portrait-token {
  position: relative;
  overflow: hidden;
}

.usa-page .card::before,
.usa-page .period-card::before,
.usa-page .portrait-token::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 100%;
  border-radius: 16px 0 0 16px;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.usa-page .card.party-democrat::before,
.usa-page .period-card.party-democrat::before,
.usa-page .portrait-token.party-democrat::before {
  opacity: 1;
  background: linear-gradient(180deg, #3f86ff, #1f5dc6);
}

.usa-page .card.party-republican::before,
.usa-page .period-card.party-republican::before,
.usa-page .portrait-token.party-republican::before {
  opacity: 1;
  background: linear-gradient(180deg, #e45858, #b92e2e);
}

.usa-page .portrait-token::before {
  width: 100%;
  height: 7px;
  border-radius: 16px 16px 0 0;
}

.correct {
  border: 2px solid var(--success) !important;
  background: var(--success-bg) !important;
}

.incorrect {
  border: 2px solid var(--error) !important;
  background: var(--error-bg) !important;
}

@media (max-width: 1320px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .sources {
    position: static;
  }
}

@media (max-width: 980px) {
  .hero,
  .sources,
  .placeholder-hero,
  .hub-grid,
  .home-hero {
    grid-template-columns: 1fr;
  }

  .top-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .brand-lockup {
    grid-template-columns: 1fr;
  }

  .brand-portrait {
    width: min(220px, 100%);
    min-height: 0;
    height: 180px;
    max-width: 220px;
    margin-left: 0;
  }

  .home-copy h1,
  .home-subtitle,
  .hero-text {
    max-width: none;
  }

  .controls {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    max-width: none;
  }

  .board-header {
    display: none;
  }

  .timeline-row {
    grid-template-columns: 1fr;
  }

  .timeline-index {
    min-height: 52px;
  }

  .dropzone {
    min-height: 64px;
  }
}

@media (max-width: 700px) {
  .container {
    width: min(100% - 18px, 680px);
    padding: 18px 0 28px;
  }

  .top-nav,
  .hub-hero {
    padding: 18px;
  }

  .top-nav-home {
    padding: 10px 14px;
  }

  .home-copy,
  .home-feature {
    padding: 24px;
    border-radius: 24px;
  }

  .home-copy h1 {
    max-width: none;
    font-size: clamp(2.4rem, 8vw, 3.6rem);
  }

  .brand-portrait {
    max-width: 220px;
    min-height: 180px;
  }

  .support-note {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 20px;
  }

  .support-qr {
    width: 118px;
  }

  .hero-copy,
  .controls-panel,
  .panel {
    padding: 18px;
    border-radius: 22px;
  }

  .panel-head h2 {
    font-size: 1.24rem;
  }

  .hub-card,
  .placeholder-card {
    padding: 20px;
  }

  .hub-card-content {
    max-width: 68%;
  }

  .portraits-source {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.events-page {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.84), transparent 24%),
    radial-gradient(circle at 88% 8%, rgba(25, 78, 120, 0.12), transparent 18%),
    linear-gradient(180deg, #f7f2e8 0%, #ece4d5 100%);
}

.nazi-page {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 24%),
    linear-gradient(180deg, #f4eee3 0%, #e7dece 100%);
}

.russia-page {
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.72), transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(25, 78, 120, 0.12), transparent 22%),
    linear-gradient(180deg, #f4eee3 0%, #e4ded2 100%);
}

.nazi-copy::after {
  background: radial-gradient(circle, rgba(124, 42, 42, 0.18), rgba(124, 42, 42, 0));
}

.nazi-board-panel,
.nazi-source-panel {
  padding: 24px;
  margin-bottom: 20px;
}

.nazi-page .container {
  width: min(1800px, calc(100% - 22px));
  padding-top: 16px;
  padding-bottom: 18px;
}

.nazi-page .top-nav {
  margin-bottom: 10px;
  padding: 10px 14px;
}

.nazi-hero {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 0.58fr);
  gap: 12px;
  margin-bottom: 12px;
}

.nazi-hero .hero-copy,
.nazi-hero .controls-panel {
  padding: 18px 22px;
  border-radius: 22px;
}

.nazi-hero h1 {
  max-width: none;
  font-size: clamp(1.6rem, 2.4vw, 2.55rem);
}

.nazi-hero .hero-text {
  max-width: 78ch;
  margin-top: 8px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.nazi-hero .controls {
  gap: 8px;
}

.nazi-hero .controls button {
  padding: 10px 12px;
  font-size: 0.9rem;
}

.nazi-hero .result-message {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 0.9rem;
}

.nazi-page .panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.nazi-page .panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
}

.nazi-page .panel-label {
  margin: 0;
  white-space: nowrap;
}

.nazi-board-panel,
.nazi-source-panel {
  padding: 14px;
  margin-bottom: 10px;
  border-radius: 20px;
}

.nazi-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 9px;
}

.russia-page .nazi-grid {
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 16px;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-grid {
  grid-template-columns: repeat(5, minmax(170px, 1fr));
  gap: 16px;
}

.russia-page .names-source,
.russia-page .roles-source {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .names-source,
.nazi-page[data-person-limit="5"]:not(.russia-page) .roles-source {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  gap: 12px;
}

.russia-page .nazi-person-card {
  gap: 10px;
  padding: 12px;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card {
  gap: 10px;
  padding: 12px;
}

.russia-page .nazi-portrait {
  border-radius: 16px;
  aspect-ratio: 1 / 1;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-portrait {
  border-radius: 16px;
  aspect-ratio: 1 / 1;
}

.russia-page .nazi-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  image-rendering: auto;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="josef-hlavka"] .nazi-portrait img {
  object-position: 50% 18%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="frantisek-ladislav-rieger"] .nazi-portrait img {
  object-position: 50% 18%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="josef-manes"] .nazi-portrait img {
  object-position: 52% 15%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="mikolas-ales"] .nazi-portrait img {
  object-position: 50% 12%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="josef-kaizl"] .nazi-portrait img {
  object-position: 50% 12%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="alzbeta-bavorska-sisi"] .nazi-portrait img {
  object-position: 50% 14%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="rudolf-habsbursky"] .nazi-portrait img {
  object-position: 52% 14%;
  transform: scale(1.08);
  transform-origin: 52% 10%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="frantisek-josef-i"] .nazi-portrait img,
.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="frantisek-ferdinand-deste"] .nazi-portrait img {
  object-position: 50% 16%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="frantisek-i-ii"] .nazi-portrait img {
  object-position: 50% 8%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="ferdinand-i-dobrotivy"] .nazi-portrait img {
  object-position: 50% 10%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="frantisek-josef-i"] .nazi-portrait img,
.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="frantisek-ferdinand-deste"] .nazi-portrait img {
  transform: scale(1.08);
  transform-origin: 50% 10%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="napoleon-bonaparte"] .nazi-portrait img,
.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="napoleon-iii"] .nazi-portrait img,
.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="viktor-emanuel-ii"] .nazi-portrait img,
.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="kralovna-viktorie"] .nazi-portrait img {
  object-position: 50% 18%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="napoleon-iii"] .nazi-portrait img {
  transform: scale(1.18);
  transform-origin: 50% 12%;
}

.nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-person-card[data-person="kralovna-viktorie"] .nazi-portrait img {
  object-position: 50% 8%;
}

.nazi-person-card {
  display: grid;
  gap: 7px;
  align-content: start;
  padding: 9px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.94), rgba(247, 240, 228, 0.94));
  border: 1px solid rgba(152, 129, 95, 0.18);
  box-shadow: 0 10px 20px rgba(48, 43, 34, 0.07);
}

.nazi-person-card[hidden] {
  display: none !important;
}

.nazi-portrait {
  overflow: hidden;
  border-radius: 13px;
  aspect-ratio: 1 / 1;
  background: #e7ddce;
}

.nazi-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.name-dropzone,
.role-dropzone {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 7px;
  border-radius: 12px;
  border: 2px dashed rgba(124, 42, 42, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(248, 242, 234, 0.94));
  color: #8a94a1;
  font-size: 0.72rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.15;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.name-dropzone {
  min-height: 36px;
  border-color: rgba(25, 78, 120, 0.2);
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.92), rgba(246, 240, 231, 0.94));
  color: #6f7e8d;
  font-size: 0.76rem;
  font-weight: 700;
}

.name-dropzone.drag-over {
  border-color: rgba(25, 78, 120, 0.42);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.12);
  background: linear-gradient(180deg, rgba(241, 248, 255, 0.98), rgba(248, 242, 234, 0.96));
}

.name-dropzone.filled,
.role-dropzone.filled {
  padding: 0;
  border-style: solid;
}

.role-dropzone.drag-over,
.roles-source.drag-over {
  border-color: rgba(124, 42, 42, 0.4);
  box-shadow: 0 0 0 4px rgba(124, 42, 42, 0.1);
  background: linear-gradient(180deg, rgba(255, 247, 247, 0.96), rgba(248, 242, 234, 0.96));
}

.names-source,
.roles-source {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(152, 129, 95, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(245, 237, 225, 0.88));
}

.name-tile,
.role-tile {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  border-radius: 12px;
  border: 1px solid rgba(152, 129, 95, 0.24);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(249, 242, 232, 0.96));
  box-shadow: 0 8px 16px rgba(62, 51, 36, 0.07);
  cursor: grab;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.15;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.name-tile {
  min-height: 38px;
  border-color: rgba(25, 78, 120, 0.18);
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.96), rgba(248, 242, 232, 0.96));
}

.name-tile:hover,
.role-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 26px rgba(62, 51, 36, 0.11);
}

.name-tile:hover {
  border-color: rgba(25, 78, 120, 0.28);
}

.role-tile:hover {
  border-color: rgba(124, 42, 42, 0.28);
}

.name-tile:active,
.role-tile:active {
  cursor: grabbing;
}

.name-dropzone .name-tile,
.role-dropzone .role-tile {
  width: 100%;
  min-height: 34px;
  margin: 0;
  border-radius: 10px;
  box-shadow: none;
  font-size: 0.68rem;
  padding: 5px 6px;
}

.events-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.8fr);
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

.events-copy,
.events-controls {
  background: rgba(255, 252, 247, 0.92);
  border: 1px solid rgba(164, 139, 99, 0.18);
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.events-copy {
  padding: 34px;
  position: relative;
  overflow: hidden;
}

.events-copy::after {
  content: "";
  position: absolute;
  right: -50px;
  top: -24px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 130, 70, 0.22), rgba(176, 130, 70, 0));
}

.events-copy h1 {
  margin: 0;
  max-width: 14ch;
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  line-height: 0.98;
}

.events-controls {
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.events-layout {
  display: grid;
  grid-template-columns: minmax(0, 680px) minmax(340px, 460px);
  gap: 24px;
  align-items: start;
  justify-content: center;
}

.events-board-panel,
.events-source-panel {
  padding: 24px;
}

.events-board-panel {
  width: 100%;
}

.events-source-panel {
  width: 100%;
}

.events-board {
  display: grid;
  gap: 12px;
}

.event-slot {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.event-slot-index {
  display: grid;
  place-items: center;
  min-height: 56px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8ead1 0%, #f1dfbc 100%);
  border: 1px solid rgba(176, 130, 70, 0.2);
  color: var(--warm);
  font-size: 0.82rem;
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(65, 53, 34, 0.07);
}

.event-dropzone {
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 16px;
  border: 2px dashed rgba(176, 130, 70, 0.4);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(250, 243, 231, 0.92)),
    repeating-linear-gradient(135deg, rgba(176, 130, 70, 0.035) 0 10px, rgba(176, 130, 70, 0) 10px 20px);
  color: #8a94a1;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.event-dropzone.filled {
  padding: 0;
  border-style: solid;
}

.event-dropzone.drag-over,
.events-source.drag-over {
  border-color: rgba(25, 78, 120, 0.5);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.12);
  background: linear-gradient(135deg, rgba(242, 249, 255, 0.95), rgba(250, 244, 233, 0.95));
}

.events-source {
  min-height: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
  padding: 10px;
  border-radius: 26px;
  border: 1px solid rgba(164, 139, 99, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(247, 240, 227, 0.88)),
    radial-gradient(circle at top, rgba(176, 130, 70, 0.08), transparent 42%);
}

.event-card {
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 18px;
  border-radius: 20px;
  border: 1px solid rgba(176, 130, 70, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 243, 231, 0.96)),
    linear-gradient(135deg, rgba(25, 78, 120, 0.04), rgba(176, 130, 70, 0.06));
  box-shadow: 0 16px 26px rgba(62, 51, 36, 0.09);
  cursor: grab;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.24;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.event-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 32px rgba(62, 51, 36, 0.12);
  border-color: rgba(25, 78, 120, 0.24);
}

.event-card:active {
  cursor: grabbing;
}

.event-dropzone .event-card {
  width: 100%;
  min-height: 54px;
  margin: 0;
  border-radius: 14px;
  box-shadow: none;
}

.map-page {
  background:
    radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.82), transparent 24%),
    radial-gradient(circle at 88% 10%, rgba(25, 78, 120, 0.12), transparent 20%),
    linear-gradient(180deg, #f4efe5 0%, #e8dfcf 100%);
}

.map-page .container {
  width: min(1740px, calc(100% - 24px));
}

.map-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.58fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.map-copy,
.map-controls {
  background: rgba(255, 252, 247, 0.92);
  border: 1px solid rgba(164, 139, 99, 0.18);
  border-radius: 26px;
  box-shadow: var(--shadow);
}

.map-copy {
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.map-copy::after {
  content: "";
  position: absolute;
  right: -54px;
  top: -34px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(87, 150, 177, 0.2), rgba(87, 150, 177, 0));
}

.map-copy h1 {
  margin: 0;
  max-width: none;
  font-size: clamp(2rem, 3.5vw, 3.3rem);
  line-height: 0.98;
}

.map-controls {
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.map-workspace {
  display: grid;
  grid-template-columns: minmax(520px, 0.68fr) minmax(420px, 0.32fr);
  gap: 16px;
  align-items: stretch;
}

.map-board-panel,
.map-source-panel {
  min-width: 0;
  padding: 18px;
  border-radius: 24px;
  background: rgba(255, 252, 247, 0.9);
  border: 1px solid rgba(164, 139, 99, 0.18);
  box-shadow: var(--shadow);
}

.map-stage {
  position: relative;
  width: min(100%, 446px);
  aspect-ratio: 446 / 830;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 24px;
  background: #c7e6f2;
  box-shadow: inset 0 0 0 1px rgba(77, 112, 125, 0.18);
}

.map-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}

.map-debug-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(25, 78, 120, 0.16) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(180deg, rgba(25, 78, 120, 0.16) 0 1px, transparent 1px 10%),
    repeating-linear-gradient(90deg, rgba(176, 130, 70, 0.2) 0 2px, transparent 2px 50%),
    repeating-linear-gradient(180deg, rgba(176, 130, 70, 0.2) 0 2px, transparent 2px 50%);
  mix-blend-mode: multiply;
  z-index: 1;
}

.map-sea {
  fill: #c4e4f0;
}

.map-neighbor {
  fill: #dedede;
}

.map-land {
  fill: #f8f7e8;
  stroke: #666;
  stroke-width: 4;
}

.map-west-bank {
  fill: rgba(255, 255, 255, 0.42);
  stroke: #777;
  stroke-width: 3;
  stroke-dasharray: 9 8;
}

.map-gaza {
  fill: rgba(255, 255, 255, 0.5);
  stroke: #777;
  stroke-width: 3;
  stroke-dasharray: 7 7;
}

.map-dead-sea {
  fill: #8cc9de;
  stroke: #5aa7c4;
  stroke-width: 2;
}

.map-coast {
  fill: none;
  stroke: #6db6d3;
  stroke-width: 4;
}

.map-border,
.map-border-strong {
  fill: none;
  stroke: #777;
  stroke-width: 2;
}

.map-border-strong {
  stroke: #575757;
  stroke-width: 3;
}

.dashed {
  stroke-dasharray: 9 8;
}

.map-city {
  fill: #1f2933;
  stroke: #fff;
  stroke-width: 2;
}

.map-dropzone {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, 12%);
  height: var(--h, auto);
  min-height: 18px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  padding: 2px 7px;
  border: 1px solid rgba(25, 78, 120, 0.34);
  border-radius: 999px;
  color: #102a43;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 5px 13px rgba(34, 48, 60, 0.12);
  text-align: center;
  font-size: clamp(0.5rem, 0.62vw, 0.62rem);
  font-weight: 800;
  line-height: 1.12;
  cursor: crosshair;
  z-index: 2;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.map-dropzone::before {
  content: "";
  display: block;
  color: #102a43;
  font-size: inherit;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.map-dropzone.drag-over {
  border-color: rgba(25, 78, 120, 0.72);
  background: rgba(238, 248, 253, 0.98);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.12), 0 14px 22px rgba(40, 58, 65, 0.12);
  transform: translate(-50%, -50%) scale(1.02);
}

.map-dropzone.filled {
  padding: 0;
  border-style: solid;
  background: rgba(255, 255, 255, 0.86);
}

.map-dropzone.filled::before {
  display: none;
}

.map-callout {
  overflow: visible;
  border-style: solid;
}

.map-callout::before {
  position: relative;
  z-index: 3;
}

.map-point {
  width: 34px;
  min-height: 34px;
  border-radius: 999px;
  border-color: rgba(176, 130, 70, 0.48);
  background: rgba(255, 249, 236, 0.88);
}

.sea-label {
  border-color: rgba(55, 128, 160, 0.38);
  background: rgba(237, 249, 255, 0.82);
}

.map-leader-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

.map-leader-halo,
.map-leader {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
}

.map-leader-halo {
  stroke: rgba(255, 255, 255, 0.94);
  stroke-width: 5;
}

.map-leader {
  stroke: rgba(25, 78, 120, 0.68);
  stroke-width: 2;
}

.map-leader-dot {
  fill: rgba(25, 78, 120, 0.86);
  stroke: rgba(255, 255, 255, 0.95);
  stroke-width: 0.45;
  vector-effect: non-scaling-stroke;
}

.map-source-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.map-workspace-wide {
  grid-template-columns: minmax(620px, 0.72fr) minmax(360px, 0.28fr);
}

.map-stage-wide {
  width: min(100%, 860px);
  aspect-ratio: 1280 / 1110;
  background: #d4d4d4;
}

.map-stage-wide .map-dropzone {
  font-size: clamp(0.52rem, 0.7vw, 0.8rem);
}

.yugoslavia-page {
  --yug-panel-bg: rgba(251, 248, 241, 0.92);
  --yug-panel-border: rgba(135, 129, 110, 0.18);
  --yug-ink: #31423d;
  --yug-muted: #687771;
  --yug-left-width: 294px;
  --yug-map-width: 860px;
  --yug-map-height: calc(var(--yug-map-width) * 1110 / 1280);
  --yug-right-width: 404px;
  --yug-side-gap: 16px;
  --yug-country-bg: rgba(247, 244, 234, 0.78);
  --yug-country-border: rgba(103, 119, 108, 0.28);
  --yug-city-bg: rgba(244, 247, 245, 0.7);
  --yug-city-border: rgba(112, 132, 138, 0.24);
  --yug-rs-bg: rgba(198, 210, 191, 0.46);
  --yug-rs-border: rgba(104, 126, 92, 0.3);
  --yug-federation-bg: rgba(188, 202, 182, 0.36);
  --yug-federation-border: rgba(89, 116, 86, 0.28);
  --yug-brcko-bg: rgba(232, 214, 184, 0.5);
  --yug-brcko-border: rgba(180, 135, 76, 0.32);
  --yug-correct-bg: rgba(211, 230, 219, 0.9);
  --yug-correct-border: rgba(85, 129, 103, 0.45);
  --yug-correct-text: #305746;
  --yug-error-bg: rgba(248, 225, 225, 0.95);
  --yug-error-border: rgba(188, 103, 103, 0.48);
}

.yugoslavia-page .map-copy,
.yugoslavia-page .map-controls,
.yugoslavia-page .map-board-panel,
.yugoslavia-page .map-source-panel {
  background: var(--yug-panel-bg);
  border-color: var(--yug-panel-border);
  box-shadow: 0 14px 36px rgba(79, 70, 52, 0.08);
}

.yugoslavia-page .map-copy {
  padding: 30px 32px;
}

.yugoslavia-page .map-copy::after {
  background: radial-gradient(circle, rgba(133, 157, 154, 0.14), rgba(133, 157, 154, 0));
}

.yugoslavia-page .map-copy h1 {
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.02;
}

.yugoslavia-page .map-copy .hero-text {
  max-width: 58ch;
  color: var(--yug-muted);
  line-height: 1.55;
}

.yugoslavia-page .map-controls {
  padding: 20px 22px;
}

.yugoslavia-page .map-workspace-wide {
  grid-template-columns: 1fr;
  gap: 0;
  justify-items: center;
}

.yugoslavia-page .map-board-panel {
  padding: 16px 16px 14px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.yugoslavia-page .map-source-panel {
  gap: 18px;
  padding: 18px;
}

.yugoslavia-page .map-stage-wide {
  background: #d9dbd1;
}

.yugoslavia-page .map-stage-wide .map-dropzone {
  width: calc(var(--w) * 0.66);
  height: calc(var(--h) * 0.66);
  min-height: 11px;
  padding: 1px 3px;
  border-radius: 9px;
  border: 1px solid var(--yug-country-border);
  background: var(--yug-country-bg);
  box-shadow: none;
  color: var(--yug-ink);
  font-size: clamp(0.41rem, 0.44vw, 0.52rem);
  font-weight: 700;
  line-height: 1.05;
}

.yugoslavia-page .map-stage-wide .map-dropzone.drag-over {
  border-color: rgba(84, 109, 112, 0.42);
  background: rgba(242, 246, 243, 0.82);
  box-shadow: 0 0 0 2px rgba(93, 117, 121, 0.08);
}

.yugoslavia-page .map-stage-wide .map-dropzone.filled {
  background: rgba(251, 249, 244, 0.16);
}

.yugoslavia-page .map-stage-wide .map-dropzone .map-term {
  min-height: 100%;
  padding: 1px 4px;
  border-radius: 8px;
  font-size: 0.61rem;
  line-height: 1.05;
  background: rgba(252, 250, 246, 0.85);
}

.yugoslavia-page .map-country {
  background: var(--yug-country-bg);
  border-color: var(--yug-country-border);
  font-weight: 800;
}

.yugoslavia-page .map-subregion {
  background: rgba(231, 236, 233, 0.74);
  border-color: rgba(103, 121, 126, 0.28);
  color: #45565a;
  font-weight: 740;
}

.yugoslavia-page .map-dropzone-city {
  background: var(--yug-city-bg);
  border-color: var(--yug-city-border);
  color: #475d66;
  font-size: clamp(0.38rem, 0.41vw, 0.48rem);
}

.yugoslavia-page .map-bosnia-entity {
  color: #435345;
}

.yugoslavia-page .map-bosnia-rs {
  background: var(--yug-rs-bg);
  border-color: var(--yug-rs-border);
}

.yugoslavia-page .map-bosnia-federation {
  background: var(--yug-federation-bg);
  border-color: var(--yug-federation-border);
}

.yugoslavia-page .map-brcko {
  background: var(--yug-brcko-bg);
  border-color: var(--yug-brcko-border);
  color: #735534;
}

.yugoslavia-page .map-leader-halo {
  stroke: rgba(255, 255, 255, 0.52);
  stroke-width: 2.2;
}

.yugoslavia-page .map-leader {
  stroke: rgba(88, 107, 116, 0.38);
  stroke-width: 0.9;
}

.yugoslavia-page .map-leader-dot {
  fill: rgba(88, 107, 116, 0.48);
  stroke: rgba(255, 255, 255, 0.76);
  stroke-width: 0.26;
}

.map-reference-card {
  margin-top: auto;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid rgba(164, 139, 99, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(244, 237, 226, 0.92)),
    radial-gradient(circle at top, rgba(87, 150, 177, 0.1), transparent 48%);
}

.yugoslavia-page .map-reference-card {
  padding: 14px;
  border-radius: 20px;
}

.map-reference-head {
  margin-bottom: 10px;
}

.yugoslavia-page .map-reference-head {
  margin-bottom: 10px;
}

.map-reference-frame {
  margin: 0;
}

.map-reference-frame img {
  display: block;
  width: 100%;
  border-radius: 18px;
  background: #d4d4d4;
  box-shadow: 0 12px 24px rgba(62, 51, 36, 0.12);
}

.yugoslavia-page .map-reference-frame img {
  border-radius: 18px;
}

.map-reference-caption {
  margin: 10px 2px 0;
  color: #4f5f6e;
  font-size: 0.94rem;
  line-height: 1.35;
}

.yugoslavia-page .map-reference-caption {
  margin-top: 10px;
  font-size: 0.94rem;
  line-height: 1.35;
}

.map-coordinate-readout {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  color: #16324a;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(25, 78, 120, 0.16);
  font-weight: 800;
  text-align: center;
}

.yugoslavia-page .map-coordinate-readout {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--yug-muted);
  background: rgba(248, 245, 238, 0.84);
  border-color: rgba(126, 134, 121, 0.16);
  font-weight: 600;
  font-size: 0.92rem;
}

.map-source-panel .panel-head {
  margin: 0;
}

.map-workspace-numbered {
  grid-template-columns: 1fr;
  align-items: start;
}

.map-board-layout {
  display: grid;
  grid-template-columns: minmax(320px, auto) minmax(180px, 240px);
  gap: 14px;
  align-items: start;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.map-board-layout-wide {
  grid-template-columns: minmax(520px, auto) minmax(180px, 240px);
}

.map-board-layout-sides {
  grid-template-columns: 220px minmax(320px, auto) 220px;
  gap: 12px;
}

.map-board-layout-yugoslavia-sides {
  grid-template-columns: var(--yug-left-width) minmax(0, var(--yug-map-width)) var(--yug-right-width);
  gap: var(--yug-side-gap);
  align-items: stretch;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.map-side-stack {
  display: grid;
  gap: 10px;
  align-content: start;
  width: 220px;
}

.map-stage-numbered {
  box-shadow: inset 0 0 0 1px rgba(77, 112, 125, 0.18), 0 18px 36px rgba(48, 43, 34, 0.08);
}

.map-number-column {
  display: flex;
  align-items: start;
}

.map-number-column .legend-list {
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.map-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1.5px solid rgba(25, 78, 120, 0.68);
  background: rgba(255, 255, 255, 0.92);
  color: #16324a;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 6px 12px rgba(34, 48, 60, 0.11);
  z-index: 2;
}

.map-marker-city {
  transform: translate(calc(-50% + 20px), calc(-50% - 2px));
}

.map-marker-city-tight {
  transform: translate(calc(-50% + 16px), calc(-50% - 2px));
}

.legend-list,
.terms-bank {
  display: grid;
  gap: 6px;
}

.legend-list-double {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
}

.legend-list-double-compact {
  grid-template-rows: repeat(10, minmax(0, 1fr));
  row-gap: 8px;
}

.legend-list-single {
  grid-template-columns: 1fr;
}

.legend-slot {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}

.legend-index {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 11px;
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 900;
  background: linear-gradient(180deg, #fff9ef, #f3e3c7);
  box-shadow: inset 0 0 0 1px rgba(176, 130, 70, 0.16);
}

.legend-dropzone {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 11px;
  border: 1.5px dashed rgba(176, 130, 70, 0.4);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(249, 244, 236, 0.95));
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.legend-dropzone.filled {
  padding: 0;
  border-style: solid;
}

.legend-dropzone.drag-over,
.terms-bank.drag-over {
  border-color: rgba(25, 78, 120, 0.38);
  background: linear-gradient(180deg, #f3f8fd, #e7f0f8);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.12);
  transform: translateY(-1px);
}

.terms-bank {
  padding: 0;
  border-radius: 16px;
  border: 2px dashed transparent;
  background: transparent;
}

.map-page-numbered .map-source-panel {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.map-page-numbered .map-terms {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-height: auto;
  padding: 12px;
  border: 1px solid rgba(164, 139, 99, 0.16);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 237, 225, 0.92));
  box-shadow: var(--shadow);
}

.israel-page .map-side-stack .map-terms {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 8px;
}

.israel-page .map-side-stack .legend-list {
  padding: 8px;
}

.israel-page .map-side-stack .map-term {
  min-height: 44px;
  font-size: 0.84rem;
  line-height: 1.14;
}

.israel-page .legend-list-single .legend-index,
.israel-page .legend-list-single .legend-dropzone {
  min-height: 44px;
}

.israel-page .map-side-stack .map-terms {
  gap: 6px;
}

.map-page-numbered .map-terms.drag-over {
  border: 2px dashed rgba(25, 78, 120, 0.28);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.08);
  padding: 8px;
}

.map-page-numbered .map-term {
  min-height: 58px;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 11px;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.18;
  box-shadow: 0 7px 12px rgba(62, 51, 36, 0.05);
  border-color: rgba(25, 78, 120, 0.18);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 236, 226, 0.98));
}

.legend-dropzone .map-term {
  width: 100%;
  min-height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  justify-content: center;
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.06;
}

.yugoslavia-page .map-marker {
  border-color: rgba(79, 104, 97, 0.68);
  color: var(--yug-ink);
}

.yugoslavia-page .map-note {
  color: var(--yug-ink);
  border-color: rgba(79, 104, 97, 0.16);
}

.yugoslavia-page .legend-dropzone.drag-over,
.yugoslavia-page .terms-bank.drag-over {
  border-color: rgba(79, 104, 97, 0.34);
  background: linear-gradient(180deg, #f2f7f5, #e8efeb);
  box-shadow: 0 0 0 4px rgba(79, 104, 97, 0.1);
}

.yugoslavia-page.map-page-numbered .map-terms {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  border-color: var(--yug-panel-border);
  background: var(--yug-panel-bg);
  box-shadow: 0 14px 36px rgba(79, 70, 52, 0.08);
}

.yugoslavia-page .map-board-layout-yugoslavia-sides .legend-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(10, 1fr);
  gap: 8px 10px;
  padding: 0;
  height: 100%;
  min-height: var(--yug-map-height);
  align-content: stretch;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.yugoslavia-page .map-terms-jugoslavia-side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(10, 1fr);
  gap: 8px 10px;
  padding: 0;
  height: 100%;
  min-height: var(--yug-map-height);
  align-content: stretch;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.yugoslavia-page .map-terms-jugoslavia-side .map-term {
  min-height: 0;
  height: 100%;
  padding: 10px 12px;
  font-size: 0.95rem;
  line-height: 1.14;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  text-wrap: balance;
}

.yugoslavia-page .map-board-layout-yugoslavia-sides .map-side-stack {
  width: 100%;
  min-width: 0;
  height: var(--yug-map-height);
  align-self: stretch;
}

.yugoslavia-page .map-board-layout-yugoslavia-sides .map-stage {
  width: var(--yug-map-width);
  max-width: var(--yug-map-width);
  height: auto;
  margin: 0;
  align-self: start;
}

.yugoslavia-page .legend-list-double-compact .legend-slot {
  min-height: 0;
  height: 100%;
}

.yugoslavia-page .legend-list-double-compact .legend-index,
.yugoslavia-page .legend-list-double-compact .legend-dropzone {
  min-height: 0;
  height: 100%;
}

.yugoslavia-page.map-page-numbered .map-term {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 11px;
  box-shadow: 0 7px 12px rgba(62, 51, 36, 0.05);
  font-size: 0.88rem;
  line-height: 1.16;
  border-color: rgba(25, 78, 120, 0.18);
  background: linear-gradient(180deg, rgba(250, 252, 255, 0.98), rgba(242, 236, 226, 0.98));
  color: var(--text);
}

.map-terms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
  min-height: 100%;
  padding: 10px;
  border-radius: 20px;
  border: 2px dashed transparent;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(245, 237, 225, 0.9)),
    radial-gradient(circle at top, rgba(87, 150, 177, 0.08), transparent 44%);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.map-terms.drag-over {
  border-color: rgba(25, 78, 120, 0.34);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.1);
}

.yugoslavia-page .map-terms {
  gap: 18px;
  padding: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  align-content: start;
}

.yugoslavia-page .map-terms.drag-over {
  border: 0;
  box-shadow: none;
}

.yugoslavia-page .map-term-group {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  align-content: start;
}

.yugoslavia-page .map-term-group + .map-term-group {
  margin-top: 0;
  padding-top: 0;
}

.yugoslavia-page .map-term-group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 18px;
  margin: 0;
  padding: 0 2px;
}

.yugoslavia-page .map-term-group-label {
  display: block;
  margin: 0;
  color: var(--yug-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
}

.yugoslavia-page .map-term-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-content: start;
}

.map-term {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(25, 78, 120, 0.2);
  background: linear-gradient(180deg, rgba(248, 252, 255, 0.98), rgba(248, 241, 230, 0.98));
  box-shadow: 0 12px 20px rgba(62, 51, 36, 0.08);
  color: var(--text);
  cursor: grab;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.16;
  user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.yugoslavia-page .map-term {
  min-height: 50px;
  padding: 11px 10px;
  border-radius: 12px;
  border-color: rgba(124, 132, 118, 0.24);
  background: rgba(252, 250, 246, 0.98);
  box-shadow: none;
  color: var(--yug-ink);
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.16;
}


.map-term:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 24px rgba(62, 51, 36, 0.12);
  border-color: rgba(25, 78, 120, 0.34);
}

.yugoslavia-page .map-term:hover {
  transform: translateY(-1px);
  box-shadow: none;
  border-color: rgba(98, 115, 107, 0.38);
  background: rgba(247, 245, 239, 1);
}

.yugoslavia-page .map-board-layout-yugoslavia-sides .map-terms.map-terms-jugoslavia-side {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(10, 1fr);
  gap: 8px 10px;
}

.yugoslavia-page .map-board-layout-yugoslavia-sides .map-terms.map-terms-jugoslavia-side .map-term {
  min-height: 0;
  height: 100%;
  font-size: 0.9rem;
  line-height: 1.12;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.yugoslavia-page .legend-list-double-compact .legend-index,
.yugoslavia-page .legend-list-double-compact .legend-dropzone {
  min-height: 0;
  height: 100%;
}

.map-term:active {
  cursor: grabbing;
}

.yugoslavia-page .map-term.is-active {
  border-color: rgba(84, 102, 94, 0.5);
  background: rgba(237, 240, 232, 0.98);
}

.yugoslavia-page .map-term.correct {
  border-color: var(--yug-correct-border) !important;
  background: var(--yug-correct-bg) !important;
  color: var(--yug-correct-text) !important;
}

.yugoslavia-page .map-term.incorrect {
  border-color: var(--yug-error-border) !important;
  background: var(--yug-error-bg) !important;
  color: #7d3e3e !important;
}

.map-dropzone .map-term {
  width: 100%;
  min-height: 100%;
  padding: 2px 6px;
  border-radius: 999px;
  box-shadow: none;
  font-size: 0.58rem;
}

.map-point .map-term {
  border-radius: 999px;
}

@media (max-width: 1180px) {
  .events-layout,
  .events-hero {
    grid-template-columns: 1fr;
  }

  .map-hero,
  .map-workspace {
    grid-template-columns: 1fr;
  }

  .map-workspace-numbered {
    grid-template-columns: 1fr;
  }

  .map-board-layout,
  .map-board-layout-wide {
    grid-template-columns: 1fr;
  }

  .map-board-layout-sides {
    grid-template-columns: 1fr;
  }

  .map-board-layout-yugoslavia-sides {
    grid-template-columns: 1fr;
  }

  .map-stage {
    max-height: 78vh;
    width: min(100%, 620px);
  }

  .map-stage-wide {
    width: min(100%, 760px);
    max-height: none;
  }

  .map-number-column {
    width: min(100%, 420px);
    margin: 0 auto;
  }

  .yugoslavia-page .map-workspace-wide {
    grid-template-columns: 1fr;
  }

  .yugoslavia-page .map-source-panel {
    padding-top: 16px;
  }

  .yugoslavia-page .map-term-group-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nazi-hero {
    grid-template-columns: 1fr;
  }

  .nazi-page .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .nazi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .russia-page .nazi-grid,
  .russia-page .names-source,
  .russia-page .roles-source {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .names-source,
  .roles-source {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .yugoslavia-page .map-copy,
  .yugoslavia-page .map-controls,
  .yugoslavia-page .map-board-panel,
  .yugoslavia-page .map-source-panel {
    border-radius: 20px;
  }

  .yugoslavia-page .map-term-group-grid {
    grid-template-columns: 1fr;
  }

  .yugoslavia-page .map-term {
    min-height: 46px;
  }
}

@media (max-width: 760px) {
  .events-source {
    grid-template-columns: 1fr;
  }

  .map-copy,
  .map-controls,
  .map-board-panel,
  .map-source-panel {
    padding: 16px;
    border-radius: 20px;
  }

  .map-stage {
    border-radius: 18px;
    width: 100%;
  }

  .map-workspace-wide {
    grid-template-columns: 1fr;
  }

  .map-stage-wide {
    width: 100%;
  }

  .legend-slot {
    grid-template-columns: 32px minmax(0, 1fr);
  }

  .legend-list-double {
    grid-template-columns: 1fr;
  }

  .map-marker {
    width: 22px;
    height: 22px;
    font-size: 0.64rem;
  }

  .map-marker-city {
    transform: translate(calc(-50% + 16px), calc(-50% - 2px));
  }

  .map-marker-city-tight {
    transform: translate(calc(-50% + 12px), calc(-50% - 2px));
  }

  .map-page-numbered .map-terms,
  .yugoslavia-page.map-page-numbered .map-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .map-page-numbered .map-terms,
  .yugoslavia-page.map-page-numbered .map-terms {
    grid-template-columns: 1fr;
  }

  .map-terms {
    grid-template-columns: 1fr;
  }

  .map-dropzone {
    font-size: 0.6rem;
    padding: 5px;
  }

  .event-slot {
    grid-template-columns: 18px minmax(0, 1fr);
  }

  .event-slot-index,
  .event-dropzone,
  .event-card {
    min-height: 58px;
  }

  .nazi-grid,
  .names-source,
  .roles-source {
    grid-template-columns: 1fr;
  }
}

/* Testovací sjednocení dalších podstránek */
.nazi-page {
  background:
    radial-gradient(circle at top left, rgba(176, 130, 70, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(25, 78, 120, 0.08), transparent 22%),
    linear-gradient(180deg, #f6f1e8 0%, #e9e0d1 100%);
}

.nazi-page .top-nav,
.events-page .top-nav {
  background: rgba(255, 252, 247, 0.82);
  border-color: rgba(164, 139, 99, 0.15);
  box-shadow: 0 10px 24px rgba(48, 43, 34, 0.07);
}

.nazi-page .nav-brand,
.events-page .nav-brand {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.42rem;
  letter-spacing: -0.02em;
}

.nazi-page .hero-copy,
.nazi-page .controls-panel,
.nazi-page .panel,
.events-page .events-copy,
.events-page .events-controls,
.events-page .panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    rgba(255, 252, 247, 0.92);
  border-color: rgba(164, 139, 99, 0.16);
  box-shadow: 0 18px 36px rgba(48, 43, 34, 0.1);
}

.nazi-page .hero-copy {
  padding: 24px 26px;
}

.nazi-page .eyebrow,
.nazi-page .panel-label,
.events-page .eyebrow,
.events-page .panel-label {
  color: var(--primary);
}

.nazi-page .hero h1,
.events-page .events-copy h1 {
  font-family: "EB Garamond", Georgia, serif;
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.nazi-page .hero-text,
.events-page .hero-text {
  line-height: 1.58;
}

.nazi-page .controls button,
.events-page .controls button {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  border: 1px solid rgba(25, 78, 120, 0.14);
  box-shadow: 0 8px 18px rgba(35, 49, 61, 0.08);
}

.nazi-page .controls button:hover,
.events-page .controls button:hover {
  background: #fffdf8;
  box-shadow: 0 12px 22px rgba(35, 49, 61, 0.1);
}

.nazi-page .result-message,
.events-page .result-message {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(164, 139, 99, 0.14);
}

.nazi-page .panel-head h2,
.events-page .panel-head h2 {
  font-family: "EB Garamond", Georgia, serif;
}

.nazi-page .nazi-person-card {
  background: linear-gradient(180deg, rgba(255, 253, 249, 0.96), rgba(247, 240, 228, 0.96));
  border-color: rgba(164, 139, 99, 0.2);
  box-shadow: 0 10px 22px rgba(48, 43, 34, 0.08);
}

.nazi-page .nazi-portrait img {
  filter: grayscale(100%) contrast(1.03) brightness(1.01);
}

.nazi-page .name-dropzone,
.nazi-page .role-dropzone,
.events-page .event-dropzone {
  border-color: rgba(164, 139, 99, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 241, 232, 0.96));
}

.nazi-page .name-tile,
.nazi-page .role-tile,
.events-page .event-card {
  background: linear-gradient(180deg, #fffefb, #f8f1e5);
  border-color: rgba(176, 130, 70, 0.28);
  box-shadow: 0 8px 18px rgba(89, 76, 57, 0.08);
}

.nazi-page .name-tile:hover,
.nazi-page .role-tile:hover,
.events-page .event-card:hover {
  box-shadow: 0 12px 22px rgba(89, 76, 57, 0.1);
}

.category-filter-row {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: #5f5145;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.category-filter {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(80, 66, 52, 0.24);
  border-radius: 8px;
  background: rgba(255, 252, 246, 0.84);
  color: #2d241c;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0;
  padding: 8px 12px;
}

.category-reveal {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.category-reveal[hidden] {
  display: none;
}

.category-badge {
  border: 1px solid rgba(80, 66, 52, 0.18);
  border-radius: 999px;
  background: rgba(255, 252, 246, 0.72);
  color: #5f5145;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 8px;
}

.nazi-page .dropzone.drag-over,
.nazi-page .source-container.drag-over,
.events-page .event-dropzone.drag-over,
.events-page .source-container.drag-over {
  background: linear-gradient(180deg, #f3f8fd, #eaf1f7);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.1);
}

.events-page {
  background:
    radial-gradient(circle at top left, rgba(176, 130, 70, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(25, 78, 120, 0.1), transparent 24%),
    linear-gradient(180deg, #f8f3ea 0%, #ede5d8 100%);
}

.events-page .events-copy::after {
  background: radial-gradient(circle, rgba(25, 78, 120, 0.14), rgba(25, 78, 120, 0));
}

.events-page .events-copy h1 {
  max-width: 13ch;
}

.events-page .event-slot-index {
  font-family: "EB Garamond", Georgia, serif;
  background: linear-gradient(180deg, #fffaf1, #f2e3c9);
  color: var(--warm);
}

@media (max-width: 980px) {
  .nazi-page .nav-brand,
  .events-page .nav-brand {
    font-size: 1.28rem;
  }
}

/* Další sjednocení zbývajících podstránek */
.cs-page {
  background:
    radial-gradient(circle at top left, rgba(176, 130, 70, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(25, 78, 120, 0.1), transparent 24%),
    linear-gradient(180deg, #f8f3ea 0%, #ede5d8 100%);
}

.cs-page .top-nav,
.usa-page .top-nav,
.map-page .top-nav {
  background: rgba(255, 252, 247, 0.82);
  border-color: rgba(164, 139, 99, 0.15);
  box-shadow: 0 10px 24px rgba(48, 43, 34, 0.07);
}

.cs-page .nav-brand,
.usa-page .nav-brand,
.map-page .nav-brand {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 1.42rem;
  letter-spacing: -0.02em;
}

.cs-page .hero-copy,
.cs-page .controls-panel,
.cs-page .panel,
.usa-page .hero-copy,
.usa-page .controls-panel,
.usa-page .panel,
.map-page .hero-copy,
.map-page .controls-panel,
.map-page .panel,
.map-page .map-board-panel,
.map-page .map-source-panel,
.map-page .map-reference-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0)),
    rgba(255, 252, 247, 0.92);
  border-color: rgba(164, 139, 99, 0.16);
  box-shadow: 0 18px 36px rgba(48, 43, 34, 0.1);
}

.cs-page .hero-copy,
.usa-page .hero-copy,
.map-page .map-copy {
  padding: 24px 26px;
}

.cs-page .eyebrow,
.cs-page .panel-label,
.usa-page .eyebrow,
.usa-page .panel-label,
.map-page .eyebrow,
.map-page .panel-label {
  color: var(--primary);
}

.cs-page .hero h1,
.usa-page .hero h1,
.map-page .map-copy h1 {
  font-family: "EB Garamond", Georgia, serif;
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.cs-page .hero-text,
.usa-page .hero-text,
.map-page .hero-text {
  line-height: 1.58;
}

.cs-page .controls button,
.usa-page .controls button,
.map-page .controls button {
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  border: 1px solid rgba(25, 78, 120, 0.14);
  box-shadow: 0 8px 18px rgba(35, 49, 61, 0.08);
}

.cs-page .controls button:hover,
.usa-page .controls button:hover,
.map-page .controls button:hover {
  background: #fffdf8;
  box-shadow: 0 12px 22px rgba(35, 49, 61, 0.1);
}

.cs-page .result-message,
.usa-page .result-message,
.map-page .result-message {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(164, 139, 99, 0.14);
}

.cs-page .panel-head h2,
.usa-page .panel-head h2,
.map-page .panel-head h2 {
  font-family: "EB Garamond", Georgia, serif;
}

.cs-page .timeline-index,
.usa-page .timeline-index {
  font-family: "EB Garamond", Georgia, serif;
  color: var(--warm);
  background: linear-gradient(180deg, #fffaf1, #f2e3c9);
  box-shadow: inset 0 0 0 1px rgba(176, 130, 70, 0.16);
}

.cs-page .dropzone,
.usa-page .dropzone {
  border-color: rgba(164, 139, 99, 0.34);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(247, 241, 232, 0.96));
}

.cs-page .card,
.cs-page .period-card,
.cs-page .portrait-token,
.usa-page .card,
.usa-page .period-card,
.usa-page .portrait-token,
.map-page .map-term {
  background: linear-gradient(180deg, #fffefb, #f8f1e5);
  border-color: rgba(176, 130, 70, 0.28);
  box-shadow: 0 8px 18px rgba(89, 76, 57, 0.08);
}

.cs-page .card:hover,
.cs-page .period-card:hover,
.cs-page .portrait-token:hover,
.usa-page .card:hover,
.usa-page .period-card:hover,
.usa-page .portrait-token:hover,
.map-page .map-term:hover {
  box-shadow: 0 12px 22px rgba(89, 76, 57, 0.1);
}

.cs-page .dropzone.drag-over,
.cs-page .source-container.drag-over,
.usa-page .dropzone.drag-over,
.usa-page .source-container.drag-over,
.map-page .map-dropzone.drag-over,
.map-page .source-container.drag-over {
  background: linear-gradient(180deg, #f3f8fd, #eaf1f7);
  box-shadow: 0 0 0 4px rgba(25, 78, 120, 0.1);
}

.usa-page {
  background:
    radial-gradient(circle at top left, rgba(176, 130, 70, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(25, 78, 120, 0.1), transparent 24%),
    linear-gradient(180deg, #f8f3ea 0%, #ebe4d8 100%);
}

.usa-page .party-chip {
  background: rgba(255, 255, 255, 0.76);
}

.russia-page .nazi-grid {
  grid-template-columns: repeat(5, minmax(170px, 1fr));
}

.russia-page .names-source,
.russia-page .roles-source {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.map-page {
  background:
    radial-gradient(circle at top left, rgba(176, 130, 70, 0.12), transparent 22%),
    radial-gradient(circle at top right, rgba(25, 78, 120, 0.1), transparent 24%),
    linear-gradient(180deg, #f8f3ea 0%, #ece5d8 100%);
}

.map-page .map-stage {
  box-shadow: 0 18px 36px rgba(48, 43, 34, 0.08);
}

.map-page .map-dropzone {
  border-color: rgba(164, 139, 99, 0.36);
}

.map-page .map-coordinate-readout,
.map-page .map-reference-caption {
  color: var(--muted);
}

.yugoslavia-page .map-reference-frame {
  background: rgba(255, 252, 247, 0.72);
  border: 1px solid rgba(164, 139, 99, 0.14);
}

@media (max-width: 980px) {
  .cs-page .nav-brand,
  .usa-page .nav-brand,
  .map-page .nav-brand {
    font-size: 1.28rem;
  }

  .russia-page .nazi-grid,
  .russia-page .names-source,
  .russia-page .roles-source {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-grid,
  .nazi-page[data-person-limit="5"]:not(.russia-page) .names-source,
  .nazi-page[data-person-limit="5"]:not(.russia-page) .roles-source {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .russia-page .nazi-grid,
  .russia-page .names-source,
  .russia-page .roles-source {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1280px) {
  .container,
  .map-page .container,
  .nazi-page .container {
    width: min(100% - 24px, 1180px);
  }

  .workspace,
  .events-workspace,
  .map-workspace,
  .map-workspace-wide {
    grid-template-columns: 1fr;
  }

  .map-hero,
  .hero,
  .events-hero,
  .nazi-hero {
    grid-template-columns: 1fr;
  }

  .map-board-layout-sides,
  .map-board-layout-yugoslavia-sides {
    grid-template-columns: 1fr;
    width: min(100%, 860px);
  }

  .map-side-stack,
  .yugoslavia-page .map-board-layout-yugoslavia-sides .map-side-stack {
    width: min(100%, 860px);
    height: auto;
  }

  .yugoslavia-page .map-board-layout-yugoslavia-sides .legend-list,
  .yugoslavia-page .map-terms-jugoslavia-side {
    min-height: 0;
    height: auto;
  }

  .yugoslavia-page .map-board-layout-yugoslavia-sides .map-stage,
  .map-stage-wide {
    width: min(100%, 860px);
  }
}

@media (max-width: 980px) {
  .top-nav,
  .top-nav-home {
    padding: 14px;
  }

  .nav-links {
    justify-content: center;
  }

  .nav-link,
  .nav-link.nav-link-external {
    width: 100%;
  }

  .hero-copy,
  .controls-panel,
  .panel,
  .map-copy,
  .map-controls,
  .map-board-panel,
  .map-source-panel,
  .events-copy,
  .events-controls,
  .events-board-panel,
  .events-source-panel {
    padding: 18px;
  }

  .controls {
    grid-template-columns: 1fr;
  }

  .cards-grid,
  .periods-grid,
  .portraits-grid,
  .events-source,
  .nazi-grid,
  .names-source,
  .roles-source {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .russia-page .nazi-grid,
  .russia-page .names-source,
  .russia-page .roles-source,
  .nazi-page[data-person-limit="5"]:not(.russia-page) .nazi-grid,
  .nazi-page[data-person-limit="5"]:not(.russia-page) .names-source,
  .nazi-page[data-person-limit="5"]:not(.russia-page) .roles-source {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .map-page-numbered .map-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .israel-page .map-side-stack,
  .yugoslavia-page .map-board-layout-yugoslavia-sides .map-side-stack {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .container,
  .map-page .container,
  .nazi-page .container {
    width: min(100% - 16px, 760px);
    padding: 16px 0 24px;
  }

  .top-nav,
  .top-nav-home {
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
  }

  .nav-brand {
    font-size: 1.18rem;
    text-align: center;
  }

  .hero-copy,
  .controls-panel,
  .panel,
  .map-copy,
  .map-controls,
  .map-board-panel,
  .map-source-panel,
  .events-copy,
  .events-controls,
  .events-board-panel,
  .events-source-panel {
    padding: 16px;
    border-radius: 18px;
  }

  .hero h1,
  .map-copy h1,
  .events-copy h1,
  .nazi-hero h1 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
    line-height: 1;
  }

  .hero-text,
  .map-page .hero-text,
  .events-page .hero-text {
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .cards-grid,
  .periods-grid,
  .portraits-grid,
  .events-source,
  .nazi-grid,
  .names-source,
  .roles-source,
  .map-page-numbered .map-terms {
    grid-template-columns: 1fr;
  }

  .map-stage,
  .map-stage-wide,
  .yugoslavia-page .map-board-layout-yugoslavia-sides .map-stage {
    width: min(100%, 100%);
    max-width: 100%;
  }

  .legend-list-double,
  .yugoslavia-page .map-board-layout-yugoslavia-sides .legend-list,
  .yugoslavia-page .map-terms-jugoslavia-side {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .legend-slot {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .controls button,
  .map-page .controls button,
  .nazi-hero .controls button {
    min-height: 48px;
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  .container,
  .map-page .container,
  .nazi-page .container {
    width: calc(100% - 12px);
    padding: 12px 0 20px;
  }

  .top-nav,
  .top-nav-home {
    padding: 10px;
    border-radius: 16px;
  }

  .hero-copy,
  .controls-panel,
  .panel,
  .map-copy,
  .map-controls,
  .map-board-panel,
  .map-source-panel,
  .events-copy,
  .events-controls,
  .events-board-panel,
  .events-source-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .hero h1,
  .map-copy h1,
  .events-copy h1,
  .nazi-hero h1 {
    font-size: clamp(1.6rem, 8vw, 2rem);
  }

  .legend-index,
  .legend-dropzone,
  .map-page-numbered .map-term,
  .yugoslavia-page .map-term {
    min-height: 44px;
  }
}

.israel-page .map-board-layout-sides {
  grid-template-columns: minmax(320px, auto) minmax(220px, 260px);
  align-items: start;
}

.map-click-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid rgba(176, 130, 70, 0.22);
  border-radius: 12px;
  background: rgba(255, 252, 246, 0.84);
}

.map-prompt,
.map-progress {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
}

.map-progress {
  color: var(--muted);
  white-space: nowrap;
}

.israel-page .map-marker {
  cursor: pointer;
  appearance: none;
  border-width: 2px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.israel-page .map-marker.is-current {
  z-index: 6;
  border-color: #1d5d7f;
  background: #ffe27a;
  color: #17364e;
  box-shadow:
    0 0 0 5px rgba(29, 93, 127, 0.2),
    0 0 0 11px rgba(255, 226, 122, 0.36),
    0 14px 26px rgba(62, 51, 36, 0.18);
}

.israel-page .map-marker.is-filled:not(.is-current) {
  background: #e6d0a3;
  border-color: rgba(120, 106, 72, 0.72);
  color: #17364e;
}

.israel-page .map-marker.correct {
  background: #dff3df;
  border-color: #5f9c68;
  color: #28562d;
}

.israel-page .map-marker.incorrect {
  background: #f6dddd;
  border-color: #ba6262;
  color: #7d3030;
}

.israel-page .map-side-stack .map-terms {
  position: sticky;
  top: 12px;
}

.israel-page .map-term {
  width: 100%;
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: center;
}

.israel-page .map-term.is-used {
  opacity: 1;
  background: #e8d8b6;
  border-color: rgba(120, 106, 72, 0.5);
  color: #514737;
}

.israel-page .map-term.is-selected {
  opacity: 1;
  background: #f4d676;
  border-color: rgba(29, 93, 127, 0.68);
  box-shadow: 0 0 0 4px rgba(29, 93, 127, 0.14);
  color: #17364e;
}

.israel-page .map-term.correct {
  border-color: #5f9c68;
  background: #dff3df;
  color: #28562d;
}

.israel-page .map-term.incorrect {
  border-color: #ba6262;
  background: #f6dddd;
  color: #7d3030;
}

.map-score {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
}

.map-solution-list {
  margin: 8px 0 0;
  padding-left: 18px;
  text-align: left;
  color: var(--muted);
  font-size: 0.9rem;
}

.map-solution-list li + li {
  margin-top: 4px;
}

@media (max-width: 900px) {
  .israel-page .map-board-layout-sides {
    grid-template-columns: 1fr;
  }

  .israel-page .map-side-stack .map-terms {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .map-click-status {
    align-items: flex-start;
    flex-direction: column;
  }

  .israel-page .map-side-stack .map-terms {
    grid-template-columns: 1fr;
  }
}

.yugoslavia-page .map-board-layout-yugoslavia-sides {
  grid-template-columns: minmax(0, var(--yug-map-width)) var(--yug-right-width);
  align-items: stretch;
}

.yugoslavia-page .map-board-layout-yugoslavia-sides .map-side-stack {
  height: var(--yug-map-height);
}

.yugoslavia-page .map-marker {
  cursor: pointer;
  appearance: none;
  border-width: 2px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.yugoslavia-page .map-marker.is-current {
  z-index: 6;
  border-color: #2f675f;
  background: #ffe27a;
  color: #253b35;
  box-shadow:
    0 0 0 5px rgba(47, 103, 95, 0.2),
    0 0 0 11px rgba(255, 226, 122, 0.36),
    0 14px 26px rgba(62, 51, 36, 0.18);
}

.yugoslavia-page .map-marker.is-filled:not(.is-current) {
  background: #e6d0a3;
  border-color: rgba(120, 106, 72, 0.72);
  color: #31423d;
}

.yugoslavia-page .map-marker.correct {
  background: var(--yug-correct-bg);
  border-color: var(--yug-correct-border);
  color: var(--yug-correct-text);
}

.yugoslavia-page .map-marker.incorrect {
  background: var(--yug-error-bg);
  border-color: var(--yug-error-border);
  color: #7d3e3e;
}

.yugoslavia-page .map-term {
  width: 100%;
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: center;
}

.yugoslavia-page .map-term.is-used {
  opacity: 1;
  background: #e8d8b6;
  border-color: rgba(120, 106, 72, 0.5);
  color: #514737;
}

.yugoslavia-page .map-term.is-selected {
  opacity: 1;
  background: #f4d676;
  border-color: rgba(47, 103, 95, 0.68);
  box-shadow: 0 0 0 4px rgba(47, 103, 95, 0.14);
  color: #253b35;
}

@media (max-width: 980px) {
  .yugoslavia-page .map-board-layout-yugoslavia-sides {
    grid-template-columns: 1fr;
  }

  .yugoslavia-page .map-board-layout-yugoslavia-sides .map-side-stack {
    height: auto;
  }

  .yugoslavia-page .map-terms-jugoslavia-side {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
  }
}

@media (max-width: 560px) {
  .yugoslavia-page .map-terms-jugoslavia-side {
    grid-template-columns: 1fr;
  }
}

.wonders-page .map-board-panel {
  width: min(100%, 1340px);
  padding: 18px;
}

.map-board-layout-wonders {
  grid-template-columns: minmax(0, 1fr) minmax(370px, 430px);
  gap: 18px;
  align-items: start;
  justify-items: stretch;
}

.map-stage-wonders {
  width: 100%;
  aspect-ratio: 1600 / 1024;
  background: #d6ecf8;
}

.wonders-page .map-marker {
  cursor: pointer;
  appearance: none;
  border-width: 2px;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.wonders-page .map-marker.is-current {
  z-index: 6;
  border-color: #8e5b20;
  background: #ffe27a;
  color: #4d351d;
  box-shadow:
    0 0 0 5px rgba(142, 91, 32, 0.2),
    0 0 0 11px rgba(255, 226, 122, 0.36),
    0 14px 26px rgba(62, 51, 36, 0.18);
}

.wonders-page .map-marker.is-filled:not(.is-current) {
  background: #e6d0a3;
  border-color: rgba(120, 106, 72, 0.72);
  color: #4d351d;
}

.wonders-page .map-marker.correct {
  background: #dff3df;
  border-color: #5f9c68;
  color: #28562d;
}

.wonders-page .map-marker.incorrect {
  background: #f6dddd;
  border-color: #ba6262;
  color: #7d3030;
}

.wonders-page .wonders-grid {
  width: 100%;
  height: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 12px;
  padding: 10px;
  border: 1px solid rgba(176, 130, 70, 0.18);
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.7);
}

.wonders-page .wonder-card {
  min-height: 0;
  height: auto;
  flex-direction: column;
  justify-content: flex-start;
  gap: 7px;
  padding: 9px;
  border-radius: 12px;
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: center;
}

.wonder-card img {
  width: 100%;
  height: 112px;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  border-radius: 9px;
  background: #fff;
}

.wonder-card span {
  display: grid;
  min-height: 2.35em;
  place-items: center;
  color: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.15;
}

.wonders-page .map-term.is-used {
  opacity: 1;
  background: #e8d8b6;
  border-color: rgba(120, 106, 72, 0.5);
  color: #514737;
}

.wonders-page .map-term.is-selected {
  background: #f4d676;
  border-color: rgba(142, 91, 32, 0.68);
  box-shadow: 0 0 0 4px rgba(142, 91, 32, 0.14);
  color: #4d351d;
}

.wonders-page .map-term.correct {
  border-color: #5f9c68;
  background: #dff3df;
  color: #28562d;
}

.wonders-page .map-term.incorrect {
  border-color: #ba6262;
  background: #f6dddd;
  color: #7d3030;
}

@media (max-width: 980px) {
  .map-board-layout-wonders {
    grid-template-columns: 1fr;
  }

  .wonders-page .wonders-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: auto;
  }
}

@media (max-width: 640px) {
  .wonders-page .wonders-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wonder-card span {
    font-size: 0.78rem;
  }
}

.europe-tensions-page .map-board-panel {
  width: min(100%, 1340px);
  padding: 18px;
}

.map-board-layout-europe-tensions {
  grid-template-columns: minmax(0, 1fr) minmax(390px, 460px);
  gap: 18px;
  align-items: start;
}

.map-stage-europe-tensions {
  width: 100%;
  aspect-ratio: 1378 / 1142;
  background: #d6ecf8;
}

.europe-tensions-page .map-marker {
  cursor: pointer;
  appearance: none;
  border-width: 2px;
  border-color: rgba(70, 82, 92, 0.72);
  background: rgba(255, 255, 255, 0.94);
  color: #24333d;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.europe-tensions-page .map-marker.is-current {
  z-index: 6;
  border-color: #8e5b20;
  background: #ffe27a;
  color: #4d351d;
  box-shadow:
    0 0 0 5px rgba(142, 91, 32, 0.2),
    0 0 0 11px rgba(255, 226, 122, 0.36),
    0 14px 26px rgba(62, 51, 36, 0.18);
}

.europe-tensions-page .map-marker.is-filled:not(.is-current) {
  background: #e6d0a3;
  border-color: rgba(81, 73, 54, 0.66);
}

.europe-tensions-page[data-lock-map-answers="true"] .map-marker.is-filled {
  cursor: default;
}

.europe-tensions-page .map-marker.correct {
  background: #dff3df;
  border-color: #5f9c68;
  color: #28562d;
}

.europe-tensions-page .map-marker.incorrect {
  background: #f6dddd;
  border-color: #ba6262;
  color: #7d3030;
}

.region-teal { --region-color: #78c8bd; }
.region-blue { --region-color: #8fb8e8; }
.region-violet { --region-color: #b8a0da; }
.region-amber { --region-color: #e6c269; }
.region-red { --region-color: #e89183; }
.region-green { --region-color: #95c783; }
.region-orange { --region-color: #e7a15e; }
.region-lime { --region-color: #bfd875; }
.region-purple { --region-color: #c494d3; }
.region-cyan { --region-color: #7fcada; }
.region-pink { --region-color: #e8a4ba; }
.region-gold { --region-color: #d6b55c; }

.europe-tensions-terms {
  width: 100%;
  grid-template-columns: 1fr !important;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(176, 130, 70, 0.18);
  border-radius: 18px;
  background: rgba(255, 252, 246, 0.7);
}

.europe-tensions-page .tension-card {
  min-height: 0;
  display: grid;
  gap: 4px;
  justify-items: start;
  justify-content: stretch;
  padding: 9px 11px;
  border-radius: 11px;
  cursor: pointer;
  appearance: none;
  font: inherit;
  text-align: left;
  white-space: normal;
  overflow: visible;
  word-break: normal;
  overflow-wrap: anywhere;
}

.tension-card strong {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.12;
}

.tension-card span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.25;
}

.europe-tensions-page .map-term.is-used {
  opacity: 1;
  background: #e8d8b6;
  border-color: rgba(120, 106, 72, 0.5);
}

.europe-tensions-page[data-lock-map-answers="true"] .map-term.is-used {
  cursor: default;
}

.europe-tensions-page .map-term.is-selected {
  background: #f4d676;
  border-color: rgba(142, 91, 32, 0.68);
  box-shadow: 0 0 0 4px rgba(142, 91, 32, 0.14);
}

.europe-tensions-page .map-term.correct {
  border-color: #5f9c68;
  background: #dff3df;
  color: #28562d;
}

.europe-tensions-page .map-term.incorrect {
  border-color: #ba6262;
  background: #f6dddd;
  color: #7d3030;
}

@media (max-width: 980px) {
  .map-board-layout-europe-tensions {
    grid-template-columns: 1fr;
  }

  .europe-tensions-terms {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .europe-tensions-terms {
    grid-template-columns: 1fr !important;
  }
}