* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body { background: #0e1a33; }

.page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 32%, rgba(180,205,255,0.65) 0%, rgba(120,160,240,0.35) 30%, rgba(120,160,240,0) 62%),
    linear-gradient(180deg, #142852 0%, #1a3364 38%, #0d1d3d 100%);
  font-family: Verdana, Arial;
  color: #16233f;
}

.portal-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 8%, rgba(180,205,255,0.35) 0%, rgba(120,160,240,0.12) 30%, rgba(120,160,240,0) 60%),
    linear-gradient(180deg, #142852 0%, #1a3364 38%, #0d1d3d 100%);
  font-family: Verdana, Arial;
  color: #16233f;
}
.portal-content {
  flex: 1;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 40px 24px 60px;
  overflow-x: auto;
}

.vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(5,12,30,0) 45%, rgba(5,12,30,0.40) 100%);
  pointer-events: none;
  z-index: 5;
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 6;
}

.decor {
  position: absolute;
  top: 60px;
  width: 420px;
  height: 780px;
  opacity: 0.07;
  z-index: 1;
}
.decor-left { left: -140px; transform: rotate(-8deg); }
.decor-right { right: -140px; transform: scaleX(-1) rotate(-8deg); }

/* ---- top nav ---- */
.topnav {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  padding: 10px 40px;
  background: rgba(10,20,42,0.92);
  box-shadow: 0 6px 16px rgba(2,8,22,0.35);
  border-bottom: 2px solid #1c3260;
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 0 rgba(0,0,0,0.6)); flex-shrink: 0; }
.brand span {
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1px;
  color: #dfe8fa;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
  white-space: nowrap;
}
.brand span b { color: #7fb2ff; font-weight: normal; }

.navlinks {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 34px;
  margin: 0 0 0 56px;
  padding: 0;
  flex: 1;
}
.navlinks li {
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.navlinks a {
  color: #a9bde0;
  text-decoration: none;
}
.navlinks li.active a { color: #ffd23f; }
.navlinks a:hover { color: #ffd23f; }

a.nav-cta, button.nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 5px;
  background: linear-gradient(180deg, #6ea2ff 0%, #3f73e0 45%, #2350b0 100%);
  border: 1px solid #0a1430;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 3px 6px rgba(0,0,0,0.35);
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1px;
  color: #f4f8ff;
  text-decoration: none;
}
a.nav-cta:hover, button.nav-cta:hover { background: linear-gradient(180deg, #86b4ff 0%, #5286ec 45%, #2c5cc4 100%); }
.nav-cta svg { width: 18px; height: 18px; }
button.nav-cta { cursor: pointer; }
.nav-logout { margin: 0; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1px;
}
.lang-switch a {
  padding: 4px 8px;
  color: #a9bde0;
  text-decoration: none;
  border-radius: 4px;
}
.lang-switch a:hover { color: #ffd23f; }
.lang-switch a.active { color: #ffd23f; background: rgba(255,210,63,0.12); }

/* ---- hero ---- */
.hero {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px 80px;
  text-align: center;
}

.hero-logo {
  width: 520px;
  max-width: 90vw;
  height: auto;
  filter: drop-shadow(0 16px 26px rgba(5,12,30,0.40));
}

.flash-error {
  margin: 4px 0 0;
  padding: 10px 22px;
  max-width: 560px;
  background: linear-gradient(180deg, #9c1c1c 0%, #6e1010 100%);
  border: 2px solid #2a0505;
  border-radius: 6px;
  color: #fdeee0;
  font-weight: 600;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

.world-countdown {
  margin: 12px 0 0;
  font-family: Verdana, Arial;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #ffd23f;
}

.tagline {
  margin: 4px 0 0;
  max-width: 560px;
  font-size: 11px;
  font-weight: 500;
  color: #dfe8fa;
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
  line-height: 1.4;
}

.cta-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}

.ribbon {
  width: 46px;
  height: 58px;
  background: linear-gradient(180deg, #1f3f86 0%, #132a5e 100%);
  border: 2px solid #050c1f;
  margin: 0 -6px;
  flex-shrink: 0;
}
.ribbon-left { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transform: rotate(-3deg) translateY(2px); }
.ribbon-right { clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transform: rotate(3deg) translateY(2px); }

a.cta-main {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 46px;
  border-radius: 8px;
  background: linear-gradient(180deg, #6ea2ff 0%, #3f73e0 45%, #2350b0 100%);
  border: 3px solid #0a1430;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.55),
    inset 0 -6px 10px rgba(10,30,90,0.45),
    0 10px 20px rgba(0,0,0,0.5);
  transform: rotate(-2deg);
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 2px;
  color: #f4f8ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
a.cta-main:hover {
  background: linear-gradient(180deg, #86b4ff 0%, #5286ec 45%, #2c5cc4 100%);
  transform: rotate(-2deg) scale(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.6),
    inset 0 -6px 10px rgba(10,30,90,0.45),
    0 14px 26px rgba(0,0,0,0.55);
}
a.cta-main:active { transform: rotate(-2deg) scale(0.98); }
.cta-main svg { width: 26px; height: 26px; flex-shrink: 0; }

/* ---- footer ---- */
.footer {
  position: relative;
  z-index: 20;
  background: rgba(8,17,36,0.92);
  box-shadow: 0 -6px 16px rgba(2,8,22,0.35);
  border-top: 2px solid #1c3260;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 26px;
  padding: 18px 20px;
}
a.discord {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #a3b3d1;
  text-decoration: none;
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1.5px;
}
a.discord:hover { color: #cdd9f0; }
.discord svg { width: 20px; height: 20px; fill: #7f91b5; }
.copy, a.powered, a.footer-link {
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 2px;
  color: #5d6d8c;
}
a.powered, a.footer-link { text-decoration: none; }
a.powered:hover, a.footer-link:hover { color: #7f91b5; }
.footer-dot { color: #3a4a6a; opacity: 0.7; }

/* ---- portal content card (rules / info pages) ---- */
.content-card {
  background: linear-gradient(180deg, #eef3fc 0%, #d9e3f5 100%);
  border: 2px solid #1c3260;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(2,8,22,0.35);
  color: #0f1b33;
  overflow: hidden;
  margin-bottom: 10px;
}

.list-layout {
  display: flex;
  align-items: stretch;
}

.list-sidebar {
  width: 260px;
  flex-shrink: 0;
  padding: 22px 0;
  background: rgba(22,40,80,0.07);
  border-right: 2px solid #a7b8d8;
}
.list-sidebar-title {
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 2px;
  color: #1f3a6e;
  padding: 0 22px 12px;
  border-bottom: 2px solid #a7b8d8;
  margin: 0 0 8px;
}
.list-sidebar ul { list-style: none; margin: 0; padding: 0; }
.list-sidebar li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 20px;
  font-family: Verdana, Arial;
  font-size: 11px;
  font-weight: 500;
  color: #34476b;
  text-decoration: none;
  border-left: 3px solid transparent;
}
.list-sidebar li a:hover { background: rgba(31,79,168,0.08); color: #16233f; }
.list-sidebar li.active a {
  border-left-color: #1f4fa8;
  background: rgba(31,79,168,0.10);
  color: #1f4fa8;
  font-weight: 600;
}
.list-badge {
  flex-shrink: 0;
  font-family: Verdana, Arial;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 10px;
  border: 1px solid #a7b8d8;
  color: #34476b;
  white-space: nowrap;
}
.list-badge.playing {
  border-color: #1f4fa8;
  color: #1f4fa8;
  background: rgba(31,79,168,0.10);
}
.list-badge.closed {
  border-color: #6a7a99;
  color: #6a7a99;
  background: rgba(22,40,80,0.08);
}

/* ---- horizontal tab-bar variant of list-layout/list-sidebar (overzicht) ---- */
.list-layout-horizontal { flex-direction: column; }
.list-sidebar-horizontal {
  width: 100%;
  padding: 0;
  border-right: none;
  border-bottom: 2px solid #a7b8d8;
}
.list-sidebar-horizontal .list-sidebar-title { display: none; }
.list-sidebar-horizontal ul { display: flex; flex-wrap: wrap; }
.list-sidebar-horizontal li { flex: 1; }
.list-sidebar-horizontal li a {
  justify-content: center;
  border-left: none;
  border-bottom: 3px solid transparent;
}
.list-sidebar-horizontal li.active a {
  border-left-color: transparent;
  border-bottom-color: #1f4fa8;
}

.card-main {
  flex: 1;
  min-width: 0;
  padding: 20px;
}
.card-main h1 {
  margin: 0 0 6px;
  font-family: Verdana, Arial;
  font-size: 16px;
  letter-spacing: 1px;
  color: #1f4fa8;
}
.card-main h1:not(:first-child) { margin-top: 24px; }
.card-main h3 {
  margin: 0 0 18px;
  font-family: Verdana, Arial;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: normal;
  color: #1f3a6e;
  border-bottom: 2px solid #a7b8d8;
  padding-bottom: 10px;
}
.worldinfo-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.worldinfo-updated {
  font-size: 10px;
  letter-spacing: 0.5px;
  color: #6a7a99;
  white-space: nowrap;
}
.card-body {
  font-size: 11px;
  line-height: 1.7;
  max-height: 500px; /* rule §3's rendered height - used as the reference for every section */
  overflow-y: auto;
  padding-right: 16px;
  scrollbar-width: thin;
  scrollbar-color: #1f4fa8 rgba(22,40,80,0.08);
}
.card-body p { margin: 0 0 14px; }
.card-body b { color: #143570; }
.card-body ul { margin: 0 0 16px; padding-left: 22px; }
.card-body li { margin-bottom: 8px; }

.card-body::-webkit-scrollbar { width: 10px; }
.card-body::-webkit-scrollbar-track { background: rgba(22,40,80,0.08); border-radius: 6px; }
.card-body::-webkit-scrollbar-thumb {
  background: #1f4fa8;
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.card-body::-webkit-scrollbar-thumb:hover { background: #143570; }

/* Page-specific scroll reference heights - each sized to that page's own current (Beta) content, same mechanism as rules' §3 reference. */
.settings-scroll { max-height: 515px; }

/* ---- resource/troop totals (worldinfo) - icon+count lists as a settings-row's value ---- */
.resource-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 14px;
  white-space: normal;
}
/* Fixed at 3 per row (13 troop types would otherwise wrap unpredictably wide-to-narrow). */
.troop-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(70px, auto));
  justify-content: flex-end;
  gap: 6px 14px;
  white-space: normal;
}
.resource-list-item, .troop-list-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.troop-list-item { justify-content: flex-end; }
.resource-list-item img, .troop-list-item img { width: 18px; height: 18px; }

/* ---- worldinfo: label/value as two left-aligned columns instead of the default space-between/right-aligned rows ---- */
.worldinfo-columns .settings-row { justify-content: flex-start; }
.worldinfo-columns .settings-label { flex: 0 0 280px; }
.worldinfo-columns .settings-value { text-align: left; white-space: normal; }
.worldinfo-columns .resource-list, .worldinfo-columns .troop-list { justify-content: flex-start; }
.worldinfo-columns .troop-list-item { justify-content: flex-start; }

/* ---- settings groups (worldsettings) ---- */
.settings-group { margin-top: 26px; }
.settings-group:first-child { margin-top: 0; }
.settings-group-title {
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1f4fa8;
  padding-bottom: 8px;
  margin-bottom: 4px;
  border-bottom: 2px solid #a7b8d8;
}
.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(22,40,80,0.15);
  font-size: 11px;
}
.settings-row:last-child { border-bottom: none; }
.settings-label { color: #34476b; font-weight: 500; }
.settings-hint { margin: 6px 0 12px; font-size: 10px; color: #6a7a99; }
.settings-value {
  color: #0f1b33;
  font-family: Verdana, Arial;
  letter-spacing: 0.5px;
  font-size: 11px;
  text-align: right;
  white-space: nowrap;
}

/* ---- forms (onboarding) ---- */
.onboard-form { max-width: 420px; }
.form-label {
  display: block;
  margin-top: 10px;
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #34476b;
  margin-bottom: 8px;
}
.form-input {
  width: 100%;
  padding: 12px 14px;
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #0f1b33;
  background: #f5f8fe;
  border: 2px solid #a7b8d8;
  border-radius: 6px;
  outline: none;
}
.form-input:focus { border-color: #1f4fa8; }

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 32px;
  border: 3px solid #0a1430;
  border-radius: 8px;
  background: linear-gradient(180deg, #6ea2ff 0%, #3f73e0 45%, #2350b0 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), inset 0 -6px 10px rgba(10,30,90,0.45), 0 8px 16px rgba(0,0,0,0.4);
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #f4f8ff;
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #86b4ff 0%, #5286ec 45%, #2c5cc4 100%);
  transform: scale(1.03);
}
.btn-primary:active { transform: scale(0.98); }

/* ---- world picker ---- */
.world-card-badge {
  display: inline-block;
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #34476b;
  padding: 3px 10px;
  border: 1px solid #a7b8d8;
  border-radius: 12px;
  white-space: nowrap;
  vertical-align: middle;
}

/* ---- flash success (pairs with .flash-error) ---- */
.flash-success {
  margin: 4px 0 0;
  padding: 10px 22px;
  max-width: 560px;
  background: linear-gradient(180deg, #4a7c2f 0%, #365c22 100%);
  border: 2px solid #1e3210;
  border-radius: 6px;
  color: #f0f6e8;
  font-weight: 600;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}

/* ---- inline add-forms + data tables (in-game instellingen sub-pages) ---- */
.add-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; }
.add-form .form-input { width: 240px; }
.add-form .btn-primary { margin-top: 0; padding: 10px 22px; font-size: 11px; }
.inline-form { display: inline; margin: 0; }

.data-table { width: 100%; border-collapse: collapse; margin-top: 18px; }
.data-table th {
  text-align: left;
  vertical-align: middle;
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #1f3a6e;
  padding: 4px 10px;
  border-bottom: 2px solid #a7b8d8;
}
.data-table td {
  padding: 4px 10px;
  border-bottom: 1px solid rgba(22,40,80,0.15);
  font-size: 11px;
  color: #0f1b33;
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .empty { font-style: italic; color: #4a5c80; }
.data-table a { color: #1f4fa8; }

/* ---- page links under a list, right-aligned (statistieken) ---- */
.pagination { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 4px; margin-top: 12px; font-family: Verdana, Arial; font-size: 11px; }
.pagination a,
.pagination span { min-width: 22px; padding: 3px 7px; text-align: center; border: 1px solid #a7b8d8; border-radius: 4px; color: #1f4fa8; text-decoration: none; }
.pagination a:hover { background: #e6edf9; }
.pagination .current { background: #1f3a6e; border-color: #1f3a6e; color: #fff; font-weight: bold; }
.pagination .disabled { color: #a7b8d8; }
.pagination .gap { border-color: transparent; color: #4a5c80; }
.data-table td.cost-insufficient,
.cost-insufficient { color: #9c1c1c; font-weight: 600; }

.btn-link {
  background: none;
  border: none;
  padding: 0;
  font-family: Verdana, Arial;
  font-size: 11px;
  color: #1f4fa8;
  cursor: pointer;
  text-decoration: underline;
}
.btn-link:hover { color: #143570; }

.card-main textarea.form-input { resize: vertical; min-height: 160px; font-family: Verdana, Arial; }

/* ==== in-game shell ==== */
.game-page {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 50% 5%, rgba(180,205,255,0.35) 0%, rgba(120,160,240,0.12) 30%, rgba(120,160,240,0) 62%),
    linear-gradient(180deg, #2a4a86 0%, #1a3364 32%, #0d1d3d 70%, #070f22 100%);
  font-family: Verdana, Arial;
  color: #16233f;
}

/* illustrated valley horizon - fixed to the viewport bottom so it reads as one continuous backdrop behind every page, however tall */
.game-landscape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  z-index: 0;
  pointer-events: none;
}

.game-header {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 0;
  font-family: Trebuchet MS, Arial;
  font-size: 12px;
}

.game-nav {
  width: 100%;
  max-width: 1050px;
  border-radius: 24px;
  overflow: hidden;
  border: 2px solid #050f2e;
  box-shadow: 0 10px 22px rgba(2,8,22,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  background: linear-gradient(180deg, #2b56b8 0%, #173a8a 55%, #102b6b 100%);
}
.game-nav::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, #bcd2ff 12%, #bcd2ff 88%, transparent);
}
.game-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 11px 28px;
}
.game-nav li { flex: 0 0 auto; }
.game-nav li.game-nav-sep {
  flex: 0 0 auto;
  align-self: stretch;
  width: 1px;
  margin: 2px 0;
  background: rgba(188,210,255,0.35);
}
.game-nav a {
  display: block;
  padding: 0 16px;
  text-align: center;
  white-space: nowrap;
  font-family: Trebuchet MS, Arial;
  font-size: 12px;
  text-transform: uppercase;
  color: #e3ecff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  text-decoration: none;
}
.game-nav a:hover { color: #ffffff; }
.game-nav li.has-unread a { color: #ffffff; padding-bottom: 2px; border-bottom: 2px solid #ffd23f; }

.game-buildnav { width: 100%; max-width: 1050px; }
.game-buildnav ul {
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 0;
  padding: 4px 20px;
}
.game-buildnav a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.game-buildnav a:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.buildnav-icon {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.game-resourcebar {
  width: 100%;
  max-width: 1050px;
  border-radius: 24px;
  border: 2px solid #1c3260;
  box-shadow: 0 10px 22px rgba(2,8,22,0.35), inset 0 1px 0 rgba(255,255,255,0.35);
  background: linear-gradient(180deg, #c9d8f2 0%, #93abd6 100%);
}
.game-resourcebar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 9px 26px;
}
.game-villagenav {
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  font-family: Trebuchet MS, Arial;
  font-size: 12px;
  text-transform: uppercase;
}
.game-villagenav a { color: #1f3460; text-decoration: none; }
.game-villagenav a:hover { color: #1f4fa8; }
.game-villagename a { color: #1f4fa8; }
.game-villagename a:hover { color: #1f3460; }
.game-villagename { color: #1f4fa8; }

.game-resources-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-resources { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.game-resources a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Trebuchet MS, Arial;
  font-size: 12px;
  color: #070f22;
  text-decoration: none;
}
.game-resources a:hover { color: #1f4fa8; }
.game-resources a.full { color: #9c1c1c; font-weight: 600; }
.game-resources a.full:hover { color: #6e1010; }
.game-resources svg, .game-resources img { width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; }
.game-resource-sep { color: rgba(22,40,80,0.3); font-size: 12px; }
.game-resource-divider { width: 1px; height: 16px; background: rgba(22,40,80,0.3); }

.game-troops {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: Trebuchet MS, Arial;
  font-size: 12px;
  letter-spacing: 1px;
  color: #1f4fa8;
  text-decoration: none;
}
.game-troops:hover { color: #143570; }
.game-troops svg { width: 16px; height: 16px; }

.overzicht-resources { display: flex; align-items: center; }
.overzicht-resources span { display: inline-flex; align-items: center; gap: 4px; flex: 1; }
.overzicht-resource-icon { width: 16px; height: 16px; vertical-align: middle; }

.game-content {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 1050px;
  font-size: 11px;
  margin: 0 auto;
  padding: 10px 0 0;
}

/* .game-footer removed - game_shell_close.php now reuses partials/site_footer.php (.footer), identical styling already existed under both names. */

/* ---- content-card + side illustration panel (building pages) ---- */
.content-card-with-side {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 20px;
  margin-bottom: 10px;
}
.content-card-with-side .card-main { padding: 0; flex: 1; min-width: 0; }
.side-image-panel {
  flex-shrink: 0;
  width: 160px;
  background: rgba(22,40,80,0.06);
  border: 1px solid #a7b8d8;
  border-radius: 8px;
  padding: 12px;
}
.side-image-panel img { width: 100%; display: block; border-radius: 6px; }

/* ---- compact input (troop-amount fields, coordinate fields, etc.) - .form-input's padding/font-size are sized for login-style forms and look oversized on small numeric fields ---- */
.qty-input { width: 70px; padding: 6px 8px; font-size: 11px; text-align: center; border: 2px solid #a7b8d8; border-radius: 6px; background: #f5f8fe; color: #0f1b33; outline: none; }
.qty-input:focus { border-color: #1f4fa8; }

/* ---- troop training row: amount + "(max)" fill button + train button, evenly spaced however it was rendered (PHP or troop_training.js) ---- */
.train-form { display: inline-flex; align-items: center; gap: 6px; }
.btn-primary.btn-compact { margin-top: 0; padding: 5px 12px; border-width: 2px; border-radius: 6px; letter-spacing: 0.5px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), 0 2px 4px rgba(0,0,0,0.3); }
.btn-primary.btn-max { background: #e6edf9; border-color: #a7b8d8; color: #1f3a6e; text-shadow: none; box-shadow: 0 1px 2px rgba(0,0,0,0.15); }
.btn-primary.btn-max:hover { background: #d6e2f6; }

/* ---- "next level" muted comparison row ---- */
.settings-row.next .settings-value { color: #6a7a99; }

/* ---- profiel/dorp: village details (left) + owner's profile text (right) ---- */
.profile-columns { display: flex; align-items: flex-start; gap: 28px; }
.profile-col-details { flex: 0 0 36%; min-width: 0; }
.profile-col-text { flex: 1; min-width: 0; }
.profile-actions { list-style: none; margin: 14px 0 0; padding: 0; font-size: 11px; }
.profile-actions li { padding: 6px 2px; border-bottom: 1px solid rgba(22,40,80,0.15); }
.profile-actions li:last-child { border-bottom: none; }
.profile-actions a { color: #1f4fa8; font-weight: bold; text-decoration: none; }
.profile-actions a:hover { color: #143570; }
.profile-text { font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }

/* ---- forum/message thread post ---- */
.thread-post {
  background: rgba(22,40,80,0.05);
  border: 1px solid #a7b8d8;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
}
.thread-post-meta {
  font-family: Verdana, Arial;
  font-size: 11px;
  letter-spacing: 1px;
  color: #34476b;
  margin-bottom: 8px;
}
.thread-post-body { font-size: 11px; line-height: 1.6; }
.thread-post-actions { margin-top: 8px; text-align: right; }

@media (max-width: 720px) {
  .topnav { padding: 14px 20px; justify-content: center; text-align: center; }
  .navlinks { margin-left: 0; justify-content: center; order: 3; flex-basis: 100%; }
  .hero-logo { width: 380px; }
  .cta-main { padding: 16px 32px; font-size: 11px; }
  .decor { display: none; }
  .list-layout { flex-direction: column; }
  .list-sidebar { width: 100%; border-right: none; border-bottom: 2px solid #a7b8d8; }
  .game-nav a { padding: 4px 10px; }
  .content-card-with-side { flex-direction: column; }
  .side-image-panel { width: 100%; }
  .profile-columns { flex-direction: column; }
  .profile-col-details { flex-basis: auto; width: 100%; }
}