* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1d4f8a;
  font: 13px/1.35 system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #f3ead8;
}
#game canvas {
  display: block;
}
#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.panel {
  pointer-events: auto;
  background: rgba(38, 28, 18, 0.88);
  border: 1px solid #7a5a30;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
h3 {
  margin: 8px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #e9c98a;
}
button {
  font: inherit;
  color: inherit;
  background: #4a3620;
  border: 1px solid #7a5a30;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
}
button:hover {
  background: #5d4428;
}
button.on {
  background: #b9852f;
  border-color: #ffd98a;
  color: #1c140a;
}
kbd {
  font-size: 10px;
  opacity: 0.7;
}
b {
  color: #fff;
}
.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  margin-right: 3px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  vertical-align: -1px;
}
.bad,
.bad b {
  color: #ff8c7a;
}

#topbar {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  padding: 6px 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 14px;
}
#goods,
#pop {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

#left {
  position: absolute;
  top: 56px;
  left: 8px;
  width: 196px;
  max-height: calc(100% - 120px);
  overflow-y: auto;
  padding: 2px 8px 8px;
}
.tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.builds {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.builds button {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-rows: auto auto;
  text-align: left;
  column-gap: 4px;
}
.bi {
  grid-row: span 2;
  font-size: 16px;
  align-self: center;
}
.bc {
  font-size: 11px;
  opacity: 0.85;
}

#right {
  position: absolute;
  top: 56px;
  right: 8px;
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#goals,
#info {
  padding: 2px 10px 10px;
}
#goals ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#goals li {
  margin: 3px 0;
}
#goals li.done {
  opacity: 0.6;
  text-decoration: line-through;
}
#info p {
  margin: 4px 0;
}
.desc {
  opacity: 0.8;
  font-size: 12px;
}
.stock {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}
.items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 4px 0 8px;
}
.bar {
  height: 6px;
  background: #222;
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0 8px;
}
.bar div {
  height: 100%;
  background: #6fd36f;
}

#bottombar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 10px;
}
#bottombar button { white-space: nowrap; }
.speed,
.files {
  display: flex;
  gap: 4px;
}
#clock {
  min-width: 150px;
  text-align: center;
}
#hint {
  position: absolute;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 640px;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
}
#toasts {
  position: absolute;
  bottom: 92px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.toast {
  background: rgba(38, 28, 18, 0.95);
  border: 1px solid #b9852f;
  padding: 6px 12px;
  border-radius: 6px;
  transition: opacity 0.5s;
}
.toast.warn {
  border-color: #e05555;
}
.toast.out {
  opacity: 0;
}

/* ---------- Goden, spelers, modals ---------- */
#gods,
#players {
  padding: 2px 10px 10px;
}
#gods p {
  margin: 4px 0;
}
#right {
  max-height: calc(100% - 120px);
  overflow-y: auto;
}
.powers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 6px 0;
}
.power {
  display: flex;
  justify-content: space-between;
  background: #5a4410;
  border-color: #c9a23a;
}
.power.off {
  opacity: 0.55;
}
.power span {
  font-size: 11px;
  opacity: 0.85;
}
.reqs {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  margin: 4px 0 6px;
}
.reqs .ok {
  color: #9de89d;
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
.pl {
  margin: 3px 0;
}
#modal:empty {
  display: none;
}
#modal {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.modal-box {
  max-width: 560px;
  padding: 8px 16px 16px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}
.card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 10px;
}
.ci {
  font-size: 26px;
}
.cd {
  font-size: 12px;
  opacity: 0.85;
}
.god {
  color: #ffd84a;
}

/* ---------- Lobby ---------- */
#lobby {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: radial-gradient(circle at 30% 20%, #3a6b3a, #1d4f8a 70%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 40px 16px;
}
.lobby-box {
  width: 100%;
  max-width: 720px;
  background: rgba(38, 28, 18, 0.92);
  border: 1px solid #7a5a30;
  border-radius: 12px;
  padding: 12px 24px 24px;
}
.lobby-box h1 {
  margin: 8px 0 0;
  font-size: 32px;
  color: #ffd98a;
}
.lobby-box .sub {
  opacity: 0.85;
}
.lobby-box input {
  font: inherit;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #7a5a30;
  background: #1c140a;
  color: inherit;
}
.lobby-box label {
  display: flex;
  gap: 8px;
  align-items: center;
}
#lcode {
  width: 80px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
#llink {
  width: 320px;
  max-width: 100%;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.big {
  font-size: 15px;
  padding: 8px 16px;
}
.code {
  letter-spacing: 0.15em;
  color: #fff;
}
.players {
  padding-left: 18px;
}

/* ---------- Handel en aanwezigheid ---------- */
#trade {
  padding: 2px 10px 10px;
}
.tradeform {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin-top: 6px;
}
.tradeform input,
.tradeform select {
  font: inherit;
  background: #1c140a;
  color: inherit;
  border: 1px solid #7a5a30;
  border-radius: 4px;
  padding: 2px 4px;
}
.tradeform input {
  width: 46px;
}
.offer {
  margin: 4px 0;
  padding: 4px 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.offer .desc {
  display: block;
}
.on-dot {
  color: #6fd36f;
}
.off-dot {
  color: #777;
}

/* Lobby: tip voor wie voor het eerst speelt. */
.tut-hint {
  background: rgba(255, 216, 74, 0.15);
  border: 1px solid #ffd84a;
  border-radius: 8px;
  padding: 8px 10px;
}
.disconnected {
  background: rgba(214, 58, 58, 0.18);
  border: 1px solid #d63a3a;
  border-radius: 6px;
  padding: 6px 8px;
}
button.off {
  opacity: 0.45;
  text-decoration: line-through;
}
.bd {
  grid-column: 2;
  font-size: 11px;
  color: #e9c98a;
}
.builds button.locked {
  opacity: 0.55;
}
.lock {
  font-size: 11px;
}
#workers {
  padding: 2px 10px 10px;
}
.job {
  display: grid;
  grid-template-columns: 1fr 50px 34px 22px 22px;
  gap: 4px;
  align-items: center;
  margin: 3px 0;
  font-size: 12px;
}
.job button {
  padding: 0 4px;
  font-size: 10px;
}
.jb {
  height: 6px;
  background: #222;
  border-radius: 3px;
  overflow: hidden;
}
.jb span {
  display: block;
  height: 100%;
}
.jc {
  text-align: right;
}
#info .actions {
  margin-top: 6px;
}

/* ---------- Inklappen ---------- */
h3[data-fold],
h3.foldable {
  cursor: pointer;
  user-select: none;
}
h3[data-fold]::before,
h3.foldable::before {
  content: '▾ ';
  color: #b9852f;
}
h3.folded::before {
  content: '▸ ';
}
.hidden {
  display: none !important;
}
#right > .panel.collapsed > :not(h3) {
  display: none !important;
}
.builds button {
  grid-template-rows: auto auto auto;
}
.bc {
  grid-column: 2;
}
.bc .dot {
  margin-left: 4px;
}
.job {
  grid-template-columns: 1fr 30px auto auto;
}
.jq {
  display: inline-grid;
  grid-template-columns: 18px 30px 18px 18px;
  gap: 2px;
  align-items: center;
}
.jq button,
.jp button {
  padding: 0 3px;
  font-size: 11px;
}
.jv {
  text-align: center;
  font-size: 11px;
  opacity: 0.7;
}
.jv.set {
  opacity: 1;
  color: #ffd84a;
  font-weight: bold;
}
.jn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
#right {
  width: 290px;
}
.goal {
  margin: 6px 0 2px;
  color: #ffd98a;
}
.step {
  margin: 6px 0 2px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(90, 180, 255, 0.15);
  border: 1px solid #5ab4ff;
  font-size: 12px;
}

/* ---------- Bouwmenu: tabbladen met tegels ---------- */
#left {
  width: 214px;
  padding: 8px;
  max-height: none;
  overflow: visible;
}
#left .tools {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
#left .tools button {
  font-size: 17px;
  padding: 4px 0;
}
.tabs {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
  margin-top: 8px;
}
.tabs button {
  position: relative;
  font-size: 15px;
  padding: 4px 0;
}
.tab-dot {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 4px #ff5a5a;
}
.tabs button.new .tab-dot {
  display: block;
}
.tab-title {
  margin: 8px 0 6px;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 6px 2px 4px;
  min-height: 70px;
}
.tile .ti {
  font-size: 21px;
  line-height: 1.1;
}
.tile .tn {
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tile .bc {
  font-size: 10px;
  opacity: 0.85;
  white-space: nowrap;
}
.tile .bc .dot {
  margin-left: 2px;
  width: 7px;
  height: 7px;
}
.tile .lock {
  position: absolute;
  top: 1px;
  right: 1px;
  font-size: 8.5px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  padding: 0 3px;
}
.tile .lock:empty {
  display: none;
}
.tile.locked {
  opacity: 0.5;
}
.tile.locked .ti {
  filter: grayscale(0.8);
}
.jtype {
  display: grid;
  grid-template-columns: 1fr 34px 20px 20px;
  gap: 3px;
  align-items: center;
  margin: 2px 0 2px 14px;
  font-size: 11.5px;
}
.jtype button {
  padding: 0 3px;
  font-size: 11px;
}
.job {
  grid-template-columns: 1fr 34px auto;
  margin-top: 6px;
}
.tools-line {
  font-size: 12px;
  margin: 4px 0;
}
.staff {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 6px 0 2px;
}
.staff button {
  padding: 0 7px;
}

/* Opdrachten */
.quest { margin: 6px 0 8px; }
.quest .qtop { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.quest .qtop button { padding: 0 6px; font-size: 12px; line-height: 18px; }
.quest .qsub { font-size: 11px; opacity: 0.8; margin-top: 2px; }

/* ======================================================================
   Thema: hout en ijzer als basis, per volk een eigen materiaal en letter.
   Variabelen worden gezet op #hud[data-culture]; --accent komt van de god.
   ====================================================================== */
:root {
  --panel1: #3a2a1a;
  --panel2: #22180e;
  --grain: rgba(255, 220, 160, 0.015);
  --edge: #8a6434;
  --edge-in: rgba(255, 225, 170, 0.14);
  --rivet: #c9a06a;
  --text: #fbf5e8;
  --muted: #e2d4b8;
  --head-font: 'Cinzel', Georgia, serif;
  --btn1: #5a4026;
  --btn2: #3e2c18;
  --btn-edge: #8a6434;
  --accent: #e9c98a;
  --accent2: #b9852f;
  --pattern: repeating-linear-gradient(90deg, var(--accent2) 0 6px, transparent 6px 9px);
}
#hud[data-culture='grieks'] {
  /* Marmer en diep Egeïsch blauw, met een meanderrand. */
  --panel1: #233047;
  --panel2: #141b29;
  --grain: rgba(255, 255, 255, 0.015);
  --edge: #cbb789;
  --edge-in: rgba(255, 250, 230, 0.16);
  --rivet: #efe3c0;
  --muted: #dfe4ee;
  --head-font: 'Cinzel', Georgia, serif;
  --btn1: #3e5070;
  --btn2: #283650;
  --btn-edge: #9a8a66;
  --pattern: repeating-linear-gradient(90deg, var(--accent2) 0 2px, transparent 2px 4px, var(--accent2) 4px 10px, transparent 10px 12px);
}
#hud[data-culture='noors'] {
  /* Donker eikenhout met ijzerbeslag en een vlechtrand. */
  --panel1: #2e2219;
  --panel2: #18110b;
  --grain: rgba(255, 230, 190, 0.018);
  --edge: #6e6a66;
  --edge-in: rgba(200, 210, 220, 0.12);
  --rivet: #a8a8a8;
  --muted: #e4d6bc;
  --head-font: 'Uncial Antiqua', Georgia, serif;
  --btn1: #4a3828;
  --btn2: #2e2218;
  --btn-edge: #75706a;
  --pattern: repeating-linear-gradient(135deg, var(--accent2) 0 3px, transparent 3px 6px), repeating-linear-gradient(45deg, var(--accent2) 0 3px, transparent 3px 6px);
}
#hud[data-culture='egyptisch'] {
  /* Zandsteen met lapis-lazuli en goud, en een zigzagrand. */
  --panel1: #3a2b17;
  --panel2: #22190c;
  --grain: rgba(255, 220, 140, 0.018);
  --edge: #d8b060;
  --edge-in: rgba(90, 150, 230, 0.22);
  --rivet: #3a7ad0;
  --muted: #efe0bc;
  --head-font: 'Marcellus SC', Georgia, serif;
  --btn1: #6a5028;
  --btn2: #4a3618;
  --btn-edge: #c89a48;
  --pattern: repeating-linear-gradient(90deg, var(--accent2) 0 4px, #2f6fb0 4px 8px);
}

/* Gewone tekst in een helder schermlettertype; het sierlettertype van het volk alleen voor kopjes. */
html,
body {
  font: 13.5px/1.4 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
#hud {
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
#hud .panel {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55);
}
.panel {
  background:
    repeating-linear-gradient(0deg, var(--grain) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--panel1), var(--panel2));
  border: 2px solid var(--edge);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px var(--edge-in),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 6px 18px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
}
/* Klinknagels in de hoeken van de grote panelen. */
#left,
#right > .panel,
#bottombar,
#topbar,
.modal-box {
  position: relative;
}
#right > .panel,
#bottombar,
#topbar,
#left {
  background-image:
    radial-gradient(circle at 7px 7px, var(--rivet) 0 1.6px, transparent 2.2px),
    radial-gradient(circle at calc(100% - 7px) 7px, var(--rivet) 0 1.6px, transparent 2.2px),
    repeating-linear-gradient(0deg, var(--grain) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--panel1), var(--panel2));
}
#left {
  position: absolute;
}
#right > .panel {
  position: relative;
}
#bottombar,
#topbar {
  position: absolute;
}
h3 {
  font-family: var(--head-font);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  padding-bottom: 5px;
  margin: 10px 0 8px;
  position: relative;
}
h3::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--pattern);
  opacity: 0.55;
  border-radius: 2px;
}
h3[data-fold]::before,
h3.foldable::before {
  color: var(--accent2);
}
b {
  color: #fff8e8;
}
.desc,
.cd,
.bc,
.qsub {
  color: var(--muted);
  opacity: 1;
}

/* Knoppen: bolle houten of stenen plaatjes met een licht randje. */
button {
  background: linear-gradient(180deg, var(--btn1), var(--btn2));
  border: 1px solid var(--btn-edge);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s, filter 0.12s, box-shadow 0.12s;
}
button:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--btn1), var(--btn2));
  filter: brightness(1.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px var(--accent2), 0 2px 6px rgba(0, 0, 0, 0.45);
}
button:active:not(:disabled) {
  transform: translateY(1px);
  filter: brightness(0.95);
}
button.on {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-color: var(--accent);
  color: #1c140a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent);
}
button.on b {
  color: #1c140a;
}

/* Bovenbalk: elk goed als een klein schildje. */
#topbar {
  padding: 6px 12px;
  gap: 6px 14px;
}
#goods {
  gap: 4px 6px;
}
#goods .good {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--edge-in);
  border-radius: 999px;
  padding: 1px 8px 1px 5px;
  white-space: nowrap;
}
#pop {
  gap: 4px 12px;
}

/* Balken: ingelegd met een glanzende vulling. */
.bar,
.jb {
  height: 8px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 0 var(--edge-in);
  border-radius: 5px;
}
.bar div,
.jb span {
  border-radius: 4px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 60%) !important;
  background-color: #6fd36f;
  transition: width 0.4s ease;
}
/* De inline kleuren van de balken (gunst, tevredenheid) blijven werken via background-color. */

/* Bouwmenu-tegels. */
.tile {
  min-height: 74px;
  border-radius: 8px;
}
.tile .ti {
  font-size: 23px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.6));
}
.tile .tn {
  font-size: 11px;
  font-weight: 600;
}
.tile .bc,
.qsub,
.desc {
  font-size: 12px;
}
.tabs button {
  border-radius: 6px 6px 3px 3px;
}
.tab-title {
  font-family: var(--head-font);
}

/* Opdrachten als perkamentbriefjes. */
.quest {
  background: linear-gradient(180deg, #efe1bf, #dcc79a);
  color: #3a2a18;
  border-radius: 6px;
  padding: 6px 8px 5px;
  box-shadow: inset 0 0 0 1px rgba(120, 80, 30, 0.35), 0 2px 4px rgba(0, 0, 0, 0.35);
  transform: rotate(-0.4deg);
}
.quest:nth-child(odd) {
  transform: rotate(0.4deg);
}
.quest,
.quest * {
  text-shadow: none !important;
}
.quest b {
  color: #2a1e10;
  font-weight: 700;
}
.quest .qsub {
  color: #4a3618;
  font-size: 12px;
}
.quest .bar {
  background: rgba(90, 60, 20, 0.25);
  border-color: rgba(90, 60, 20, 0.35);
  box-shadow: inset 0 1px 2px rgba(90, 60, 20, 0.4);
  margin: 4px 0 3px;
}
.quest .bar div {
  background-color: #b9852f !important;
}
.quest .qtop button {
  background: rgba(90, 60, 20, 0.15);
  border-color: rgba(90, 60, 20, 0.4);
  color: #3a2a18;
  box-shadow: none;
}

/* Toasts en hint. */
.toast {
  background: linear-gradient(180deg, var(--panel1), var(--panel2));
  border: 1px solid var(--accent2);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  animation: toast-in 0.25s ease-out;
}
@keyframes toast-in {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
}
#hint {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--edge-in);
  border-radius: 999px;
  padding: 4px 14px;
}

/* Modals: groter kader met een sierrand. */
#modal {
  background: radial-gradient(circle, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(2px);
}
.modal-box {
  border-width: 3px;
  padding: 10px 20px 18px;
  animation: modal-in 0.2s ease-out;
}
.modal-box h3 {
  font-size: 18px;
  text-align: center;
}
@keyframes modal-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
}
.card {
  border-radius: 10px;
}

/* Godenkrachten glanzen in de kleur van de god. */
.power {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent2) 55%, #2a1e10), color-mix(in srgb, var(--accent2) 30%, #1a120a));
  border-color: var(--accent);
}
.god {
  color: var(--accent);
}
.goal {
  color: var(--accent);
}

/* Schuifbalken in stijl. */
#right::-webkit-scrollbar {
  width: 6px;
}
#right::-webkit-scrollbar-thumb {
  background: var(--edge);
  border-radius: 3px;
}
#left,
#right {
  top: calc(var(--topbar, 40px) + 16px);
}
#right {
  max-height: calc(100% - var(--topbar, 40px) - 90px);
}

/* Rechterkolom met tabbladen: één paneel tegelijk, zodat je niet hoeft te scrollen. */
.rhide {
  display: none !important;
}
.rtabs {
  display: flex;
  gap: 3px;
  padding: 4px;
}
.rtabs button {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 3px 2px 2px;
  font-size: 15px;
  line-height: 1.1;
}
.rtabs button span {
  font-size: 10px;
  font-weight: 600;
}
.rbadge {
  display: none;
  position: absolute;
  top: 2px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 5px #ff5a5a;
}
.rbadge.show {
  display: block;
}
/* Compactere opdrachten. */
.quest {
  margin: 4px 0 6px;
  padding: 4px 7px 3px;
}
.quest .qtop b {
  font-size: 13px;
}
.quest .bar {
  height: 6px;
  margin: 3px 0 2px;
}
.quest .qtop button {
  padding: 0 5px;
  line-height: 16px;
}
#right > .panel > h3:first-child {
  margin-top: 8px;
}

/* Gebeurtenis-kaart onderin */
#card {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}
#card:empty {
  display: none;
}
.ecard {
  display: flex;
  gap: 10px;
  width: 400px;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  background: linear-gradient(180deg, #f2e4c2, #dcc596);
  color: #3a2a18;
  border: 2px solid #8a6434;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  animation: card-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}
@keyframes card-in {
  from {
    transform: translateY(30px) scale(0.9);
    opacity: 0;
  }
}
.ecard b {
  color: #2a1e10;
}
.ecard p {
  margin: 3px 0;
  font-size: 13px;
}
.eicon {
  font-size: 34px;
  line-height: 1;
}
.ebody {
  flex: 1;
}
.ebody > b {
  font-family: var(--head-font);
  font-size: 15px;
}
.edeal {
  background: rgba(120, 80, 30, 0.12);
  border-radius: 6px;
  padding: 3px 6px;
}
.ecard .bar {
  background: rgba(90, 60, 20, 0.25);
  border-color: rgba(90, 60, 20, 0.35);
  height: 5px;
  margin: 5px 0;
}
.eact {
  display: flex;
  gap: 6px;
  align-items: center;
}
.eact .desc {
  color: #6a5030;
  margin-left: auto;
}
.ecard button:not(.on) {
  background: rgba(90, 60, 20, 0.15);
  border-color: rgba(90, 60, 20, 0.45);
  color: #3a2a18;
  box-shadow: none;
}
/* Meldingen bovenaan het scherm, zodat ze de gebeurtenis-kaart onderin niet bedekken. */
#toasts {
  top: calc(var(--topbar, 40px) + 18px);
  bottom: auto;
}

/* Selectievak voor eenheden (shift + slepen) */
#selbox {
  position: fixed;
  display: none;
  border: 1.5px solid #ffe14a;
  background: rgba(255, 225, 74, 0.12);
  pointer-events: none;
  z-index: 15;
}
/* Trainknoppen in kazerne en tempel */
.trains {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 6px;
}
.trainbtn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 1px;
}
.trainbtn .desc {
  font-size: 11.5px;
}

/* Monstermelding aanklikbaar, en een pijl naar monsters buiten beeld */
.toast.alarm {
  pointer-events: auto;
  cursor: pointer;
  border-color: #e05a4a;
  box-shadow: 0 0 12px rgba(224, 90, 74, 0.6);
}
#monster-arrow {
  position: fixed;
  z-index: 12;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(150, 30, 20, 0.85);
  border: 2px solid #ffb0a0;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: ma-pulse 0.9s ease-in-out infinite;
}
#monster-arrow .ma-dir {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 1px;
  color: #fff;
  font-size: 15px;
}
#monster-arrow .ma-ic {
  font-size: 16px;
}
@keyframes ma-pulse {
  50% {
    box-shadow: 0 0 16px 4px rgba(255, 90, 70, 0.7);
  }
}

/* Balans per minuut in de bovenbalk */
.good .rate {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  margin-left: 3px;
  padding: 0 4px;
  border-radius: 6px;
}
.good .rate.up {
  color: #9de89d;
  background: rgba(60, 160, 60, 0.18);
}
.good .rate.down {
  color: #ff9a8a;
  background: rgba(200, 60, 40, 0.2);
}
.good .rate.flat {
  color: var(--muted);
  opacity: 0.7;
}

/* Vaste bovenbalk: goederen en bevolking altijd op een eigen regel, en de balanstekentjes een vaste breedte.
   Zo springt de balk niet tussen één en twee regels (en schuiven de panelen eronder niet mee). */
#topbar {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 4px;
}
#goods .good {
  white-space: nowrap;
}
.good .rate {
  display: inline-block;
  min-width: 28px;
  text-align: center;
}

/* Startplek kiezen */
#settle {
  position: absolute;
  top: calc(var(--topbar, 40px) + 18px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 5;
}
#settle:empty {
  display: none;
}
.settlebar {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  max-width: min(720px, calc(100vw - 32px));
}
.settlebar span {
  font-size: 13px;
  color: var(--muted);
}
.settlebar button {
  white-space: nowrap;
}
.settlebar > b {
  white-space: nowrap;
}

/* ======================= Telefoon en smalle schermen ======================= */
#game canvas {
  touch-action: none;
}
.mobile-only {
  display: none;
}
@media (max-width: 760px), (max-height: 520px) {
  html,
  body {
    font-size: 12.5px;
  }
  .mobile-only {
    display: inline-block;
  }
  /* Bovenbalk: één regel per rij, opzij vegen. */
  #topbar {
    left: 4px;
    right: 4px;
    top: 4px;
    padding: 4px 8px;
  }
  #goods,
  #pop {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
  }
  #goods::-webkit-scrollbar,
  #pop::-webkit-scrollbar {
    display: none;
  }
  #pop > span {
    white-space: nowrap;
  }
  /* Zoals op de laptop: bouwmenu altijd links, panelen altijd rechts, alleen smaller. */
  #left,
  #right {
    top: calc(var(--topbar, 40px) + 6px);
    bottom: calc(var(--bottombar, 46px) + 6px + env(safe-area-inset-bottom));
    max-height: none;
    overflow-y: auto;
    z-index: 8;
    scrollbar-width: none;
  }
  #left {
    left: 4px;
    width: 128px;
    padding: 4px;
    bottom: auto;
    max-height: calc(100% - var(--topbar, 40px) - var(--bottombar, 46px) - 12px - env(safe-area-inset-bottom));
  }
  #left .tile {
    min-width: 0;
    overflow: hidden;
  }
  #right {
    right: 4px;
    width: min(42vw, 250px);
    gap: 4px;
  }
  #left::-webkit-scrollbar,
  #right::-webkit-scrollbar {
    display: none;
  }
  #hud.m-left-off #left,
  #hud.m-right-off #right {
    display: none;
  }
  #left .tools {
    grid-template-columns: 1fr 1fr;
  }
  #left .tools button {
    font-size: 14px;
    padding: 2px 0;
  }
  #left .tabs {
    grid-template-columns: repeat(4, 1fr);
    margin-top: 4px;
  }
  #left .tabs button {
    font-size: 13px;
    padding: 2px 0;
  }
  #left .tab-title {
    font-size: 10px !important;
    margin: 4px 0 3px !important;
  }
  #left .tiles {
    grid-template-columns: 1fr 1fr;
    gap: 3px;
  }
  #left .tile {
    min-height: 0 !important;
    padding: 3px 1px 2px !important;
  }
  #left .tile .ti {
    font-size: 17px !important;
  }
  #left .tile .tn {
    font-size: 8.5px !important;
    line-height: 1.05;
  }
  #left .tile .bc {
    font-size: 8.5px !important;
  }
  #right .panel {
    font-size: 11px;
  }
  #info {
    max-height: none;
  }
  .rtabs button span {
    display: none;
  }
  .rtabs {
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 3px;
    padding: 3px !important;
  }
  /* Onderbalk: over de hele breedte, alleen pictogrammen. */
  #bottombar {
    left: 4px;
    right: 4px;
    transform: none;
    bottom: calc(4px + env(safe-area-inset-bottom));
    gap: 4px;
    padding: 4px 6px;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  #bottombar .files button {
    padding: 5px 7px;
  }
  #bottombar .files button[data-act='save'],
  #bottombar .files button[data-act='load'],
  #bottombar .files button[data-act='new'],
  #bottombar .files button[data-act='music'] {
    display: none;
  }
  #clock {
    min-width: 0;
    font-size: 11px;
  }
  #hint {
    display: none;
  }
  #toasts {
    width: 92vw;
    font-size: 12px;
  }
  #card {
    bottom: calc(var(--bottombar, 56px) + 10px + env(safe-area-inset-bottom));
    width: calc(100vw - 12px);
  }
  .ecard {
    width: 100%;
  }
  .settlebar {
    flex-wrap: wrap;
    font-size: 12px;
  }
  #settle {
    width: calc(100vw - 12px);
  }
  .tut-bubble {
    width: min(320px, calc(100vw - 24px)) !important;
  }
  .modal-box {
    max-width: calc(100vw - 16px);
  }
  #monster-arrow {
    width: 38px;
    height: 38px;
  }
}

/* Telefoon dwars: iets bredere kolommen, onderbalk op één regel. */
@media (max-height: 520px) and (min-width: 561px) {
  #topbar {
    padding: 3px 8px;
    gap: 2px;
  }
  #left {
    width: 150px;
  }
  #right {
    width: min(34vw, 280px);
  }
  #bottombar {
    flex-wrap: nowrap;
    padding: 3px 6px;
  }
  #bottombar button {
    padding: 3px 7px;
  }
}

/* ---------- Telefoon: compact ---------- */
.mclose {
  display: none;
}
@media (max-width: 760px), (max-height: 520px) {
  #hud .panel h3 {
    font-size: 12px;
    margin: 6px 0 5px;
    padding-bottom: 4px;
  }
  #hud .panel p {
    margin: 3px 0;
  }
  #hud button {
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 6px;
  }
  #hud .desc,
  #hud .qsub,
  #hud .bc {
    font-size: 11px;
  }
  #info,
  #gods,
  #workers,
  #trade,
  #players,
  #quests {
    padding: 2px 8px 8px;
  }
  #right {
    gap: 6px;
  }
  /* Sluitknop bovenaan elke lade. */
  #hud.m-info #right .mclose {
    display: block;
    position: sticky;
    top: 0;
    margin-left: auto;
    z-index: 2;
    padding: 2px 10px;
    font-size: 14px;
  }
  /* Iets geselecteerd: alleen de info, niet de tabbladen eronder. */
  #hud.m-info #right .rtabs,
  #hud.m-info #right [data-rpanel] {
    display: none !important;
  }
  /* Bovenbalk kleiner. */
  #goods .good {
    font-size: 11px;
    padding: 0 6px 0 4px;
  }
  .good .rate {
    font-size: 9px;
    min-width: 22px;
    padding: 0 2px;
  }
  #pop {
    font-size: 11px;
    gap: 2px 8px;
  }
  .tile {
    min-height: 58px;
    padding: 4px 2px 3px;
  }
  .tile .ti {
    font-size: 19px;
  }
  .tile .tn {
    font-size: 10px;
  }
  .rtabs button {
    padding: 2px 1px;
    font-size: 13px;
  }
  .quest {
    padding: 3px 6px;
  }
  .quest .qtop b {
    font-size: 12px;
  }
}
@media (max-height: 520px) and (min-width: 561px) {
  .rtabs button span {
    display: none;
  }
  #hud .panel h3 {
    font-size: 11px;
  }
}
.toast.jump {
  pointer-events: auto;
  cursor: pointer;
}
.toast.jump:hover {
  filter: brightness(1.15);
}

/* Venster per goed (klik in de bovenbalk) */
#goodinfo {
  position: absolute;
  top: calc(var(--topbar, 40px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  z-index: 9;
}
#goodinfo:empty {
  display: none;
}
.goodbox {
  position: relative;
  width: min(440px, calc(100vw - 16px));
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px 12px 10px;
}
.goodbox ul {
  margin: 2px 0 6px;
  padding-left: 18px;
}
.goodbox li {
  margin: 3px 0;
  font-size: 12.5px;
}
.gclose {
  position: absolute;
  top: 6px;
  right: 8px;
  padding: 1px 8px;
}
#goods .good {
  cursor: pointer;
}
#goods .good.full {
  border-color: #f2a83a;
  box-shadow: inset 0 0 0 1px rgba(242, 168, 58, 0.6);
}

/* Telefoon: wat boven de kolommen moet liggen, staat onderin boven de knoppenbalk. */
@media (max-width: 760px), (max-height: 520px) {
  #settle,
  #toasts,
  #card {
    top: auto;
    left: 6px;
    right: 6px;
    transform: none;
    bottom: calc(var(--bottombar, 46px) + 10px + env(safe-area-inset-bottom));
    z-index: 9;
  }
  #toasts {
    width: auto;
    align-items: stretch;
  }
  #settle .settlebar {
    max-width: none;
  }
  #goodinfo {
    z-index: 10;
  }
  /* Nog onderweg met de kar: er valt nog niets te bouwen. */
  #hud.trekking #left {
    display: none;
  }
  #left .tile .tn {
    font-size: 8px !important;
    letter-spacing: -0.2px;
  }
  .quest .qtop b,
  .quest b {
    font-size: 11px !important;
  }
  .quest .qsub {
    font-size: 10px !important;
  }
  .quest {
    margin: 3px 0 4px !important;
  }
}

/* Telefoon dwars: meldingen, kaarten en de reisbalk tussen de kolommen in, zodat de menu's vrij blijven. */
@media (max-height: 520px) and (min-width: 561px) {
  #hud {
    --lw: 140px;
    --rw: min(30vw, 250px);
  }
  #left {
    width: var(--lw);
  }
  #right {
    width: var(--rw);
  }
  #settle,
  #toasts,
  #card {
    left: calc(var(--lw) + 12px);
    right: calc(var(--rw) + 12px);
  }
  #toasts .toast {
    font-size: 11px;
    padding: 4px 8px;
  }
  #goods .good {
    font-size: 10.5px;
  }
  #pop {
    font-size: 10.5px;
  }
  #left .tools button {
    font-size: 13px;
    padding: 1px 0;
  }
}

/* iOS maakt tekst groter als je de telefoon dwars houdt: uitzetten, wij kiezen zelf de maten. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Telefoon: korte, kleine vensters die de kaart zo min mogelijk bedekken. */
@media (max-width: 760px), (max-height: 520px) {
  #settle {
    width: auto;
  }
  .settlebar {
    padding: 5px 8px;
    gap: 4px 8px;
    font-size: 11.5px;
  }
  .settlebar span {
    font-size: 11px;
  }
  .settlebar button {
    padding: 3px 10px;
  }
  #info {
    font-size: 11px;
  }
  #info p {
    line-height: 1.3;
  }
  .tut-bubble {
    width: min(260px, calc(100vw - 24px)) !important;
    padding: 6px 10px;
    font-size: 11.5px;
  }
  .tut-bubble p {
    margin: 2px 0 6px;
    line-height: 1.35;
  }
  .modal-box {
    font-size: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    padding: 4px 10px 10px;
  }
  .ecard {
    padding: 6px 8px;
    gap: 6px;
    font-size: 11.5px;
  }
  .goodbox {
    font-size: 11.5px;
    max-height: 50vh;
  }
  .goodbox li {
    font-size: 11px;
  }
}

/* ======================= Telefoon: pictogrambalken met uitklapvakken =======================
   Links een smalle balk met bouwcategorieën, rechts een met de panelen. Tik = vak open, nog eens of op de
   kaart = dicht. Een geselecteerd gebouw staat als kort kaartje onderin. Zo blijft het scherm vooral kaart. */
.fly {
  display: contents;
}
#left .gn,
#topbar .pl {
  display: inline;
}
@media (max-width: 760px), (max-height: 520px) {
  #topbar .gn,
  #topbar .pl {
    display: none;
  }
  #goods .good {
    padding: 0 5px 0 3px;
  }
  #hud {
    --side: 46px;
    --top: calc(var(--topbar, 40px) + 6px);
    --free: calc(100vh - var(--topbar, 40px) - var(--bottombar, 46px) - 22px - env(safe-area-inset-bottom));
  }
  #left,
  #hud #left {
    top: var(--top);
    left: 4px;
    bottom: auto;
    width: var(--side) !important;
    max-height: none;
    overflow: visible;
    padding: 3px;
  }
  #left .tools,
  #left .tabs {
    grid-template-columns: 1fr !important;
    gap: 3px;
    margin-top: 3px;
  }
  #left .tools {
    margin-top: 0;
  }
  #left .tools button,
  #left .tabs button {
    font-size: 16px !important;
    padding: 5px 0 !important;
  }
  #left .fly {
    display: none;
    position: absolute;
    left: calc(var(--side) + 6px);
    top: 0;
    width: min(64vw, 250px);
    max-height: var(--free);
    overflow-y: auto;
    padding: 2px 6px 6px;
    background: linear-gradient(180deg, var(--panel1), var(--panel2));
    border: 1px solid var(--accent2);
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
  #hud.m-fly #left .fly {
    display: block;
  }
  #left .fly .tiles {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  #left .fly .tile .tn {
    font-size: 9px !important;
  }
  #right,
  #hud #right {
    top: var(--top);
    right: 4px;
    bottom: auto;
    width: var(--side) !important;
    max-height: none;
    overflow: visible;
    gap: 0;
  }
  #right .rtabs,
  #hud.m-info #right .rtabs {
    display: grid !important;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 3px !important;
  }
  #right .rtabs button {
    font-size: 16px;
    padding: 5px 0;
  }
  #right .rtabs button span {
    display: none;
  }
  #hud:not(.m-rp) #right [data-rpanel] {
    display: none !important;
  }
  #hud.m-rp #right [data-rpanel],
  #hud.m-rp.m-info #right [data-rpanel]:not(.rhide) {
    display: block !important;
    position: fixed;
    right: calc(var(--side) + 10px);
    top: var(--top);
    width: min(72vw, 300px);
    max-height: var(--free);
    overflow-y: auto;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
  #hud.m-rp #right [data-rpanel].rhide {
    display: none !important;
  }
  /* Geselecteerd gebouw of bouwkeuze: kort kaartje onderin, tussen de balken. */
  #hud #right > #info {
    position: fixed;
    width: auto;
    margin: 0;
    left: calc(var(--side) + 10px);
    right: calc(var(--side) + 10px);
    bottom: calc(var(--bottombar, 46px) + 10px + env(safe-area-inset-bottom));
    max-height: 34vh;
    overflow-y: auto;
    z-index: 9;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  }
  #hud #right > #info:empty {
    display: none;
  }
  #hud #right .mclose {
    display: none !important;
  }
  #info details.more summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 11px;
    margin: 2px 0;
  }
  /* Meldingen, kaarten en de reisbalk ook tussen de balken. */
  #settle,
  #toasts,
  #card {
    left: calc(var(--side) + 10px) !important;
    right: calc(var(--side) + 10px) !important;
  }
  /* Onderbalk: één rij, zonder de oude laden-knoppen. */
  #bottombar button[data-act='m-build'],
  #bottombar button[data-act='m-panels'] {
    display: none !important;
  }
  #bottombar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
  }
  #bottombar button {
    padding: 3px 7px;
  }
}
@media (max-height: 520px) and (min-width: 561px) {
  #left .tools button,
  #left .tabs button,
  #right .rtabs button {
    font-size: 14px !important;
    padding: 2px 0 !important;
  }
  #left .tools,
  #left .tabs {
    gap: 2px;
  }
  /* Dwars: het kaartje rechts onderin, niet over de hele breedte. */
  #hud #right > #info {
    left: auto;
    width: min(360px, 45vw);
    max-height: 48vh;
  }
}

/* iPhone dwars: de inkeping (notch / Dynamic Island) zit links of rechts. De kaart loopt eronder door,
   maar alle knoppen en panelen blijven in het veilige gebied. transform maakt van #hud het kader voor
   ook de vaste (position: fixed) panelen, zodat die meeschuiven. */
#hud {
  top: env(safe-area-inset-top, 0px);
  left: env(safe-area-inset-left, 0px);
  right: env(safe-area-inset-right, 0px);
  bottom: 0;
  transform: translateZ(0);
}

/* Telefoon: niets over elkaar. Meldingen boven (hooguit 2), keuzekaart onderin, infokaartje erboven. */
@media (max-width: 760px), (max-height: 520px) {
  #hud #toasts {
    top: calc(var(--topbar, 40px) + 8px) !important;
    bottom: auto !important;
    gap: 3px;
  }
  #hud #toasts .toast {
    font-size: 11px;
    padding: 4px 8px;
    line-height: 1.3;
  }
  #hud #toasts .toast:nth-last-child(n + 3) {
    display: none;
  }
  #hud #card {
    width: auto !important;
  }
  #hud #card .ecard {
    width: 100% !important;
    max-width: none;
    box-sizing: border-box;
    font-size: 11px;
    padding: 6px 8px;
  }
  #hud #card .ecard p {
    margin: 2px 0 4px;
    line-height: 1.3;
  }
  #hud #card .ecard b {
    font-size: 12.5px;
  }
  #hud #right > #info {
    bottom: calc(var(--bottombar, 46px) + 10px + var(--cardh, 0px) + env(safe-area-inset-bottom));
    max-height: 30vh;
  }
}
@media (max-width: 760px), (max-height: 520px) {
  /* Een open vak gaat voor: dan geen meldingen eroverheen. */
  #hud.m-fly #toasts,
  #hud.m-rp #toasts {
    display: none;
  }
}

/* Bondgenootschap in het spelerspaneel */
.ally {
  margin: 3px 0 6px 14px;
  font-size: 12px;
}
.allyq {
  margin-top: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(111, 211, 111, 0.1);
  border: 1px solid rgba(111, 211, 111, 0.35);
}
#pop .idle-hint b {
  color: #9de89d;
}

/* Intro: varend schip in de schemering */
#intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0e2440;
  cursor: pointer;
  transition: opacity 0.7s;
}
#intro.out {
  opacity: 0;
}
#intro canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.intro-text {
  position: absolute;
  left: 0;
  right: 0;
  top: 9%;
  text-align: center;
  color: #fff6e0;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}
.intro-text h1 {
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(38px, 8vw, 84px);
  letter-spacing: 0.08em;
  animation: introIn 1.6s ease-out both;
}
.intro-text p {
  margin: 6px 0 0;
  font-size: clamp(13px, 2.2vw, 18px);
  opacity: 0.9;
  animation: introIn 2.2s ease-out both;
}
.intro-skip {
  display: inline-block;
  margin-top: 14px;
  font-size: 12px;
  opacity: 0.7;
  animation: introPulse 1.6s ease-in-out infinite;
}
@keyframes introIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@keyframes introPulse {
  50% {
    opacity: 0.25;
  }
}

/* Onder de opdrachten: gift, expeditie, hulp en kroniek */
.extra {
  margin: 6px 0;
  padding: 5px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 12px;
}
.extra button {
  margin: 2px 2px 0 0;
}
.chron {
  font-size: 11px;
  opacity: 0.85;
  margin: 3px 0;
  line-height: 1.3;
}
.coin {
  font-size: 0.95em;
  margin-right: 1px;
}

/* Prijzen op een bouwtegel: passen altijd (zo nodig over twee regels), nooit buiten de tegel. */
.tile {
  overflow: hidden;
}
.tile .bc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 4px;
  max-width: 100%;
  line-height: 1.25;
  font-size: 10px;
}
.tile .bc > span {
  white-space: nowrap;
}
.tile .bc .dot {
  width: 7px;
  height: 7px;
  margin-right: 2px;
}
.tile .bc .coin {
  font-size: 9px;
}

/* Groot scherm bij een nieuw tijdperk */
#agescreen {
  position: fixed;
  inset: 0;
  z-index: 90;
  transition: opacity 0.6s;
}
#agescreen.out {
  opacity: 0;
}
#agescreen canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.age-box {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 24px));
  max-height: 55vh;
  overflow-y: auto;
  padding: 14px 18px 16px;
  text-align: center;
  color: #fff6e0;
  background: rgba(20, 16, 12, 0.72);
  border: 1px solid #d9a441;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  animation: introIn 1.2s ease-out both;
}
.age-kicker {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.8;
}
.age-box h1 {
  margin: 4px 0 6px;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(26px, 5vw, 46px);
  color: #ffd98a;
}
.age-god {
  margin: 0 0 10px;
  font-size: 14px;
}
.age-new {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}
.age-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 84px;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
}
.age-item span {
  font-size: 24px;
}
.age-item small {
  opacity: 0.7;
  font-size: 10px;
}

/* ======================= Startscherm, nieuw ======================= */
#lobby {
  background: #0e2440;
  padding: 0;
  display: block;
}
.lobby-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.lobby-wrap {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 24px;
  box-sizing: border-box;
}
.lobby-head {
  text-align: center;
  margin-bottom: 14px;
  animation: introIn 0.6s ease-out both;
}
.lobby-head h1 {
  margin: 0;
  font-family: 'Cinzel', Georgia, serif;
  font-size: clamp(44px, 9vw, 92px);
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #fff2c4, #e8b450 60%, #b07a2a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 18px rgba(255, 200, 110, 0.35));
}
.lobby-head .tag {
  margin: 2px 0 0;
  color: #fff3dc;
  font-size: clamp(12px, 2vw, 16px);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  letter-spacing: 0.04em;
}
.lobby-box {
  max-width: 1020px;
  width: 100%;
  background: rgba(18, 14, 10, 0.64);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(217, 164, 65, 0.6);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  padding: 16px 22px 20px;
  animation: introIn 0.7s ease-out both;
}
.lobby-cols {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 22px;
}
@media (max-width: 800px) {
  .lobby-cols {
    grid-template-columns: 1fr;
  }
}
.lobby-box h3 {
  margin: 12px 0 8px;
  font-family: 'Cinzel', Georgia, serif;
  color: #ffd98a;
  letter-spacing: 0.06em;
}
.lname {
  font-weight: 600;
}
.lname input {
  flex: 1;
  max-width: 260px;
  font-size: 15px;
}
/* Volkskaarten met eigen kleur; de gekozen kaart gloeit. */
.lobby-box .cards {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.lobby-box .card {
  --cc: #d9a441;
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 12px;
  color: #f4ead6;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
}
.lobby-box .card:hover {
  transform: translateY(-2px);
}
.lobby-box .card.cul-grieks {
  --cc: #6aa0e8;
}
.lobby-box .card.cul-noors {
  --cc: #8acb6a;
}
.lobby-box .card.cul-egyptisch {
  --cc: #f2b84a;
}
.lobby-box .card.on {
  border-color: var(--cc);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cc) 30%, transparent), rgba(0, 0, 0, 0.3));
  box-shadow: 0 0 0 1px var(--cc), 0 0 22px color-mix(in srgb, var(--cc) 55%, transparent);
  color: #fffaf0;
}
.lobby-box .card.on .god,
.lobby-box .card .god {
  color: #ffe08a;
}
.lobby-box .card .ci {
  font-size: 34px;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}
.lobby-box .card b {
  font-size: 16px;
}
.lobby-box .card .cd {
  opacity: 0.9;
}
.play-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 4px 14px 14px;
  margin-bottom: 12px;
}
.play-card .actions {
  margin: 6px 0;
}
.play-card .worlds button {
  font-size: 13px;
}
.lobby-box button.wide {
  width: 100%;
  margin-top: 4px;
  padding: 9px;
}
.lobby-box button.big {
  font-size: 16px;
  padding: 9px 18px;
}
.lobby-foot {
  margin-top: 12px;
  color: #fff3dc;
  opacity: 0.85;
  font-size: 13px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  text-align: center;
}
.connecting {
  text-align: center;
  color: #ffd98a;
}
.lobby-box .card b {
  color: #fffaf0;
}
.cdesc {
  display: none;
  font-size: 12.5px;
  margin: 4px 0;
  color: #f4ead6;
}
/* Telefoon: drie compacte kaarten naast elkaar, uitleg van het gekozen volk eronder. */
@media (max-width: 600px) {
  .lobby-wrap {
    padding: 16px 10px;
  }
  .lobby-box {
    padding: 10px 12px 14px;
  }
  .lobby-box .cards {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .lobby-box .card {
    padding: 8px 4px;
    align-items: center;
    text-align: center;
  }
  .lobby-box .card .cd {
    display: none;
  }
  .lobby-box .card .ci {
    font-size: 26px;
  }
  .lobby-box .card b {
    font-size: 13px;
  }
  .lobby-box .card .god {
    font-size: 11px;
  }
  .cdesc {
    display: block;
  }
}
/* Godenportret bovenaan een volkskaart */
.cport {
  width: 100%;
  aspect-ratio: 200 / 130;
  /* Nooit plattrekken: bij een lager vak snijden we bij en blijft het gezicht (bovenin) in beeld. */
  object-fit: cover;
  object-position: center 22%;
  border-radius: 8px;
  display: block;
  margin-bottom: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 3px 10px rgba(0, 0, 0, 0.35);
}
.lobby-box .card.on .cport {
  box-shadow: 0 0 0 2px var(--cc), 0 3px 12px rgba(0, 0, 0, 0.4);
}
/* Aankondiging nieuwe speler: banier bovenin met de kleur van de speler. */
.announce {
  --pc: #d9a441;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 64px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 22px 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(40, 30, 18, 0.95), rgba(18, 14, 10, 0.95));
  border: 1px solid rgba(217, 164, 65, 0.8);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px color-mix(in srgb, var(--pc) 45%, transparent);
  color: #fff6e0;
  cursor: pointer;
  animation: announceIn 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  transition: opacity 0.6s, transform 0.6s;
}
.announce.out {
  opacity: 0;
  transform: translateX(-50%) translateY(-20px);
}
.announce .an-flag {
  width: 30px;
  height: 36px;
  background: var(--pc);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
  flex: none;
}
.announce small {
  display: block;
  font-family: 'Cinzel', Georgia, serif;
  color: #ffd98a;
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
}
.announce b {
  display: block;
  font-size: 20px;
  line-height: 1.1;
}
.announce .an-sub {
  font-size: 12.5px;
  opacity: 0.85;
}
@keyframes announceIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-30px) scale(0.9);
  }
}
/* Eigen icoontjes */
.ico {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.ico .f {
  fill: currentColor;
  fill-opacity: 0.22;
  stroke: none;
}
.ico.lg {
  width: 34px;
  height: 34px;
}
.lobby-box h3 .ico {
  color: #ffd98a;
  width: 1.05em;
  height: 1.05em;
}
.lobby-box .card b .ico {
  color: var(--cc);
}
.lobby-box .card .god .ico {
  color: #ffe08a;
}
.lobby-box .mini {
  margin: 10px 0 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.65;
}
/* Grote knop: meedoen met anderen */
.lobby-box button.quick {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 8px 0 2px;
  padding: 12px 16px;
  text-align: left;
  border-radius: 12px;
}
.lobby-box button.quick b {
  display: block;
  font-size: 18px;
}
.lobby-box button.quick small {
  display: block;
  font-size: 12.5px;
  opacity: 0.85;
  font-weight: 500;
}
.lobby-box button.quick:not(:hover) {
  animation: quickGlow 2.6s ease-in-out infinite;
}
@keyframes quickGlow {
  50% {
    box-shadow: 0 0 0 1px rgba(255, 217, 138, 0.8), 0 0 20px rgba(255, 200, 100, 0.45);
  }
}
.connecting .ico,
.tut-hint .ico {
  color: #ffd98a;
}
/* Sfeer: donkere rand en een vleugje warm zonlicht over de kaart. */
#game::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(0, 0, 0, 0) 58%, rgba(6, 12, 22, 0.42) 100%),
    linear-gradient(160deg, rgba(255, 214, 150, 0.08), rgba(255, 214, 150, 0) 45%);
}
button.linkish {
  background: none;
  border: none;
  box-shadow: none;
  padding: 2px 0;
  font-weight: 700;
  color: inherit;
  cursor: pointer;
}

/* =====================================================================================
   Mobiel-eerst: één tabbalk onderin (Bouwen, Rijk, Stam, Markt, Meer). Elk tabblad opent een paneel
   dat van onderen omhoog schuift, met de kaart erboven. Geen zijbalken meer; bovenin alleen goederen.
   ===================================================================================== */
#mtabs,
#fabs,
#more,
#mpop,
.sheet-grip,
.mlabel {
  display: none;
}
@media (max-width: 760px), (max-height: 520px) {
  #hud {
    --tabh: 60px;
    --bottombar: var(--tabh);
    --sheet: min(62vh, 560px);
  }
  /* Bovenin: alleen een dun strookje goederen. */
  #hud #topbar {
    left: 6px;
    right: 6px;
    top: 6px;
    padding: 3px 6px;
    border-radius: 12px;
  }
  #hud #topbar #pop {
    display: none;
  }
  #hud #bottombar {
    display: none !important;
  }
  /* De tabbalk. */
  #hud #mtabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--tabh);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    box-sizing: content-box;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    pointer-events: auto;
    z-index: 30;
    gap: 4px;
  }
  #hud #mtabs button {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--muted, #c8b894);
    font-size: 11px;
    font-weight: 700;
    border-radius: 12px;
    padding: 4px 0;
  }
  #hud #mtabs button .ico {
    width: 26px;
    height: 26px;
  }
  #hud #mtabs button.on {
    color: var(--accent, #e9c98a);
    background: rgba(255, 255, 255, 0.08);
  }
  #hud #mtabs .rbadge {
    position: absolute;
    top: 4px;
    right: calc(50% - 18px);
  }
  /* Snelknoppen rechts boven de tabbalk: naar huis en je leger. */
  #hud #fabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: fixed;
    right: 10px;
    bottom: calc(var(--tabh) + 14px + env(safe-area-inset-bottom) + var(--cardh, 0px));
    pointer-events: auto;
    z-index: 12;
  }
  #hud #fabs button {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    padding: 0;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  #hud #fabs button .ico {
    width: 24px;
    height: 24px;
  }
  #hud #fabs .hidden,
  #hud.m-fly #fabs,
  #hud.m-rp #fabs,
  #hud.m-more #fabs,
  #hud.m-info #fabs {
    display: none;
  }
  /* Schuifpanelen: gedeelde vorm. */
  #hud #left,
  #hud #right,
  #hud #more {
    display: block;
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: calc(var(--tabh) + 8px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: var(--sheet);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 4px 12px 12px !important;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.45);
    background: linear-gradient(180deg, var(--panel1), var(--panel2));
    border: 1px solid var(--accent2);
    border-bottom: none;
    pointer-events: auto;
    z-index: 25;
    transform: translateY(calc(100% + var(--tabh) + 20px));
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    scrollbar-width: none;
  }
  #hud.m-fly #left,
  #hud.m-rp #right,
  #hud.m-info #right,
  #hud.m-more #more {
    transform: none;
  }
  #hud .sheet-grip {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
    margin: 4px auto 6px;
  }
  /* Bouwen: gereedschap, categorieën en gebouwen onder elkaar, groot genoeg voor een duim. */
  #hud #left .tools {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px;
    margin: 4px 0 6px;
  }
  #hud #left .tools button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 11px !important;
    padding: 7px 2px !important;
  }
  #hud #left .mlabel {
    display: inline;
  }
  #hud #left .tabs {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 4px;
    margin: 0 0 4px;
  }
  #hud #left .tabs button {
    padding: 7px 0 !important;
    font-size: 16px !important;
  }
  #hud #left .tabs button .ico,
  #hud #left .tools button .ico {
    width: 20px;
    height: 20px;
  }
  #hud #left .fly {
    display: block !important;
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  #hud #left .tab-title {
    font-size: 12px !important;
    margin: 6px 0 6px !important;
  }
  #hud #left .fly .tiles {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px;
  }
  #hud #left .tile {
    min-height: 74px !important;
    padding: 6px 2px 4px !important;
    border-radius: 10px;
  }
  #hud #left .tile .ti {
    font-size: 24px !important;
  }
  #hud #left .tile .tn {
    font-size: 10.5px !important;
  }
  #hud #left .tile .bc {
    font-size: 9.5px !important;
  }
  /* Rijk / Stam / Markt: het actieve paneel; bij Rijk eerst je bevolking en de drie onderdelen. */
  #hud #right {
    gap: 6px;
  }
  #hud #right .rtabs {
    display: none !important;
  }
  #hud.m-rp[data-rgroup='rijk'] #right .rtabs {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: 1fr;
    gap: 4px;
    padding: 4px !important;
    margin: 0 0 6px;
  }
  #hud.m-rp[data-rgroup='rijk'] #right .rtabs button[data-rtab='trade'],
  #hud.m-rp[data-rgroup='rijk'] #right .rtabs button[data-rtab='players'] {
    display: none;
  }
  #hud #right .rtabs button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 0 !important;
  }
  #hud #right .rtabs button span {
    display: inline !important;
    font-size: 11px;
  }
  #hud.m-rp[data-rgroup='rijk'] #right #mpop {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    padding: 2px 2px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 6px;
  }
  #hud #right #mpop .pl {
    display: inline;
  }
  #hud.m-rp #right [data-rpanel],
  #hud.m-rp.m-info #right [data-rpanel]:not(.rhide) {
    display: block !important;
    position: static !important;
    width: auto !important;
    max-height: none !important;
    box-shadow: none !important;
    border: none;
    background: none;
    padding: 0 !important;
  }
  #hud.m-rp #right [data-rpanel].rhide,
  #hud:not(.m-rp) #right [data-rpanel] {
    display: none !important;
  }
  /* Iets geselecteerd: het paneel toont alleen wat je koos, met een sluitknop. */
  #hud #right > #info {
    position: static !important;
    max-height: none !important;
    box-shadow: none !important;
    border: none;
    background: none;
    padding: 0 !important;
  }
  #hud.m-rp:not(.m-info) #right > #info,
  #hud:not(.m-info) #right > #info {
    display: none;
  }
  #hud.m-info #right .rtabs,
  #hud.m-info #right [data-rpanel],
  #hud.m-info #right #mpop {
    display: none !important;
  }
  #hud.m-info #right .mclose {
    display: block !important;
    position: sticky;
    top: 0;
    float: right;
    z-index: 2;
    padding: 4px 12px;
    font-size: 15px;
  }
  /* Meer: tijd, opslaan, geluid en uitleg. */
  #hud #more h3 {
    margin-top: 0;
  }
  #hud #more .more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 8px;
  }
  #hud #more .more-grid button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    font-size: 12px;
  }
  #hud #more .more-grid button .ico {
    width: 24px;
    height: 24px;
  }
  #hud #more .more-grid button.off {
    opacity: 0.55;
  }
  #hud #more .more-speed {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
  }
  #hud #more .more-speed button {
    padding: 8px 0;
    font-size: 14px;
  }
  /* Meldingen, keuzekaarten en de reisbalk: over de volle breedte, boven de tabbalk. */
  #hud #settle,
  #hud #card {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(var(--tabh) + 12px + env(safe-area-inset-bottom)) !important;
  }
  #hud #toasts {
    left: 8px !important;
    right: 8px !important;
  }
  #hud.m-more #toasts,
  #hud.m-info #toasts {
    display: none;
  }
  #hud.m-fly #card,
  #hud.m-rp #card,
  #hud.m-more #card,
  #hud.m-info #card {
    display: none;
  }
}
/* Telefoon dwars: panelen niet over de hele breedte, maar als kolom rechts. */
@media (max-height: 520px) and (min-width: 561px) {
  #hud {
    --tabh: 50px;
    --sheet: calc(100vh - var(--tabh) - 70px);
  }
  #hud #left,
  #hud #right,
  #hud #more {
    left: auto !important;
    right: 8px !important;
    width: min(440px, 60vw) !important;
    border-radius: 18px;
    border-bottom: 1px solid var(--accent2);
  }
  #hud #mtabs {
    left: 50%;
    right: auto;
    width: min(520px, 70vw);
    transform: translateX(-50%);
  }
  #hud #mtabs button {
    flex-direction: row;
    gap: 6px;
  }
}
/* Welkom terug: op de telefoon een paneel van onderen, zoals de andere. */
@media (max-width: 760px), (max-height: 520px) {
  #hud #modal .modal-box.away {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding: 4px 16px calc(16px + env(safe-area-inset-bottom));
    z-index: 40;
    animation: sheetUp 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  }
  #hud #modal .modal-box.away button.wide {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    margin-top: 8px;
  }
}
@keyframes sheetUp {
  from {
    transform: translateY(100%);
  }
}
/* Startscherm: als app installeren */
.install-app {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 15px;
}
.install-app .ico {
  width: 20px;
  height: 20px;
}
.install-steps {
  max-width: 420px;
  text-align: center;
  color: #fff3dc;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}
.hidden {
  display: none !important;
}
/* Jouw buurt (Stam-paneel) */
.hood-row {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.hood-row .dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
}
.hood-row button[data-act='goto-tile'] {
  padding: 2px 6px;
  margin-left: 4px;
}
.greets {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}
.greets .greet {
  font-size: 17px;
  padding: 4px 9px;
  border-radius: 999px;
}
/* Handelswaar en luxe (Rijk-paneel) */
.extra.special .luxs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.lux {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  opacity: 0.55;
  cursor: pointer;
}
.lux.on,
.lux.mine {
  opacity: 1;
  background: rgba(232, 194, 74, 0.2);
  box-shadow: inset 0 0 0 1px rgba(232, 194, 74, 0.6);
}
@media (max-width: 760px), (max-height: 520px) {
  #hud #goodinfo {
    z-index: 35;
  }
}
#game::after {
  z-index: 2;
}
/* De lagen van de kaart (papier, rand) blijven onder de knoppen en panelen. */
#game {
  position: relative;
  z-index: 0;
}
/* Startscherm: de levende kaart achter het menu, met een schemerlaag zodat het menu leesbaar blijft. */
.lobby-bg canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.lobby-shade {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(10, 14, 30, 0.15) 0%, rgba(10, 14, 30, 0.55) 70%, rgba(6, 8, 20, 0.8) 100%),
    linear-gradient(180deg, rgba(40, 20, 70, 0.35), rgba(0, 0, 0, 0) 40%, rgba(255, 150, 90, 0.12));
}
/* Eregalerij in het startscherm */
.fame-row {
  font-size: 12.5px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
#agescreen.victory .age-box button + button {
  margin-left: 8px;
}
/* Wereldlijst in het startscherm */
.world-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  margin: 4px 0 8px;
}
.world-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.world-row.mine {
  border-color: rgba(232, 194, 74, 0.6);
  background: rgba(232, 194, 74, 0.1);
}
.world-row .wn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.world-row .wn small {
  font-size: 11.5px;
  opacity: 0.8;
}
.world-row .wn .you {
  color: #ffd98a;
  opacity: 1;
}
.world-row button {
  min-width: 78px;
}
.on-dot {
  color: #6fd36f;
}
/* Boven de levende kaart geen wazig glas: dat tekent in sommige browsers de kaart over het menu heen. */
#lobby .lobby-box {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(16, 12, 9, 0.86);
}
/* Vaste stapelvolgorde: levende kaart onderop, dan de schemerlaag, dan het menu. */
#lobby .lobby-bg {
  z-index: 0;
}
#lobby .lobby-shade {
  z-index: 1;
}
#lobby .lobby-wrap {
  z-index: 2;
}

/* Handelsschip: vaste lijstjes in de haven */
.ord-pick { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 6px; }
.ord-pick button { font-size: 12px; padding: 4px 7px; }
.extra .wrow button[data-act='ord-set'] { min-width: 30px; padding: 3px 6px; margin-left: 2px; }

/* Titelkaart: eilandnaam bij aankomst, of je pas gestichte dorp */
.titlecard { position: fixed; left: 50%; top: 30%; transform: translate(-50%, -50%); z-index: 60; text-align: center; pointer-events: none;
  color: #f6e7c1; text-shadow: 0 2px 0 #3a2410, 0 0 24px rgba(0, 0, 0, 0.6); animation: tc-in 1.1s ease-out both; width: min(92vw, 720px); }
.titlecard small { display: block; font: 600 13px 'Marcellus SC', serif; letter-spacing: 0.35em; text-transform: uppercase; opacity: 0.85; }
.titlecard b { display: block; font: 700 clamp(34px, 8vw, 64px) 'Cinzel', serif; letter-spacing: 0.08em; color: #ffd98a; margin: 4px 0 2px; }
.titlecard span { display: block; font: 600 clamp(13px, 3.2vw, 17px) 'Marcellus SC', serif; letter-spacing: 0.12em; }
.titlecard::before, .titlecard::after { content: ''; display: block; height: 1px; margin: 8px auto; width: 60%; background: linear-gradient(90deg, transparent, #ffd98a, transparent); }
.titlecard.out { opacity: 0; transform: translate(-50%, -56%); transition: opacity 1s ease, transform 1s ease; }
@keyframes tc-in { from { opacity: 0; letter-spacing: 0.4em; transform: translate(-50%, -44%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* Admin in de wereldlijst */
.world-row .adm, .adm-bar .adm { background: #5a1e1a; border-color: #b0453a; color: #ffd8d0; font-size: 12px; padding: 4px 8px; margin-left: 6px; }
.adm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 6px 10px; border: 1px dashed #b0453a; border-radius: 8px; color: #ffd8d0; font-size: 13px; }

/* Bouwmenu: tabs per tijdperk, met groepjes erin */
.tabs.ages { grid-template-columns: repeat(3, 1fr) !important; }
.tabs.ages button { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px !important; font-size: 12px !important; line-height: 1.1; }
.tabs.ages button b { font-family: 'Cinzel', serif; font-size: 14px; color: #ffd98a; }
.tabs.ages button span:not(.tab-dot) { font-size: 11px; white-space: nowrap; }
.tabs.ages button.later { opacity: 0.6; }
.tiles .tgroup { grid-column: 1 / -1; margin: 6px 0 0; font-size: 12px; letter-spacing: 0.05em; color: #e8d6a8; opacity: 0.85; display: flex; align-items: center; gap: 5px; }
.tiles .tgroup:first-child { margin-top: 0; }
.tab-title small { font-size: 0.7em; opacity: 0.75; font-family: inherit; letter-spacing: 0; }

/* Admin kijkt onzichtbaar mee: geen bouw- of startknoppen, wel een kijkbalk */
body.watching #left, body.watching #settle, body.watching #bottombar, body.watching #fabs, body.watching #card { display: none !important; }
#watchbar { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 54px); left: 50%; transform: translateX(-50%); z-index: 55; display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 13px; white-space: nowrap; }
#watchbar select { font-size: 13px; padding: 2px 6px; }
#watchbar button { padding: 3px 8px; font-size: 12px; }

/* Feedback-venster en admin-postvak */
.fb-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(8, 12, 20, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fb-box { width: min(480px, 100%); max-height: 86vh; overflow: auto; padding: 16px 18px; }
.fb-box h3 { margin: 0 0 6px; }
.fb-kinds { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.fb-box textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 15px; padding: 8px; border-radius: 8px; border: 1px solid #6a5a3a; background: #1a1610; color: #f2e6c8; resize: vertical; }
.fb-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.fb-item { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 0; }
.fb-meta { font-size: 12px; opacity: 0.8; }
.fb-text { white-space: pre-wrap; margin: 4px 0; }
.fb-ua { font-size: 10px; opacity: 0.5; }
.fb-link { margin-left: 8px; padding: 3px 10px; font-size: 12px; }

/* Bouwmenu netjes: hele namen (twee regels), compacte groepkoppen, niet selecteerbaar, tabs over de hele breedte */
#left .tile, #left .tabs { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.tile .tn, #left .tile .tn, #hud #left .tile .tn { white-space: normal !important; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: clip; overflow-wrap: normal; word-break: normal; hyphens: auto; line-height: 1.1; min-height: 2.2em; }
#left .tiles .tgroup { font-size: 10.5px; margin: 4px 0 -1px; padding-top: 4px; border-top: 1px solid rgba(232, 214, 168, 0.12); text-transform: uppercase; letter-spacing: 0.08em; }
#left .tiles .tgroup:first-child { border-top: 0; padding-top: 0; }
#left .tabs.ages, #hud #left .tabs.ages { display: grid; grid-template-columns: repeat(3, 1fr) !important; width: 100%; }
#left .tiles { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important; }
@media (min-width: 761px) {
  #left .tile { min-height: 64px; padding: 5px 2px 3px; }
  #left .tile .ti { font-size: 20px; }
  #left .tile .tn { font-size: 10px; }
}

/* Bouwmenu in ketens (zoals Anno): per keten een kopje en de gebouwen op een rij met pijlen */
#left .tiles.chains { display: flex !important; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; grid-template-columns: none !important; }
.chain { display: flex; flex-direction: column; gap: 2px; max-width: 100%; }
.chain h4 { margin: 2px 0 0; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #e8d6a8; opacity: 0.85; white-space: nowrap; }
.chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.chain-row .tile { width: 56px; min-height: 62px !important; padding: 4px 1px 3px !important; flex: none; }
.chain-row .tile .ti { font-size: 19px !important; }
.chain-row .tile .tn { font-size: 9.5px !important; }
.chain-row .sep { font-size: 12px; color: #e8d6a8; opacity: 0.7; width: 8px; text-align: center; }
@media (max-width: 760px), (max-height: 520px) {
  #hud #left .tiles.chains { gap: 8px 12px; }
  #hud #left .chain-row .tile { width: 64px; min-height: 66px !important; }
}
.tile.pulse { animation: tile-pulse 1.2s ease-out 2; }
@keyframes tile-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 217, 138, 0.9); } 100% { box-shadow: 0 0 0 10px rgba(255, 217, 138, 0); } }
.fixbtn { display: block; width: 100%; margin: 4px 0; text-align: left; }
#left .tiles.chains.hidden { display: none !important; }

.chain-row .cstep { display: inline-flex; align-items: center; gap: 2px; }
@media (min-width: 761px) and (min-height: 521px) {
  #hud #left { width: 276px; }
  #hud #left .chain-row .tile { width: 53px !important; min-width: 0 !important; }
  #hud #left .chain-row, #hud #left .chain-row .cstep { gap: 1px; }
  #hud #left .chain-row .sep { width: 6px; font-size: 11px; }
}

/* ===== Desktop: knoppen bovenin rechts, bouwmenu als dock onderaan (zoals Anno) ===== */
@media (min-width: 761px) and (min-height: 521px) {
  #hud #topbar { align-items: center; flex-direction: row; flex-wrap: wrap; z-index: 60; }
  #hud #topbar #goods { flex-basis: 100%; }
  #hud #topbar #pop { flex: 1 1 0; min-width: 0; }
  #hud #topbar #bottombar { position: static; transform: none; margin-left: auto; padding: 0; gap: 8px; background: none; border: 0; box-shadow: none; display: flex; align-items: center; }
  #hud #topbar #bottombar .files { gap: 3px; }
  #hud #topbar #bottombar button { padding: 3px 7px; font-size: 13px; }
  #hud #topbar #clock { min-width: 84px; font-size: 13px; }
  #hud #topbar .speed button { padding: 2px 6px; }
  .ctl-wrap { position: relative; }
  .ctl-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 70; display: flex; flex-direction: column; gap: 4px; padding: 6px; min-width: 170px; background: #1b2232; border: 1px solid #6a5a3a; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }
  .ctl-menu.hidden { display: none; }
  .ctl-menu button { text-align: left; }
  /* Hulpregel alleen als je iets aan het doen bent (bouwen, slopen, een leger). */
  #hint.idle { display: none; }
  #hint { bottom: calc(var(--dockh, 150px) + 18px); }
  /* Het dock: links gereedschap en tijdperken, rechts de ketens naast elkaar. */
  #hud #left {
    top: auto; bottom: 8px; left: 8px; right: 8px; width: auto; max-height: min(230px, 34vh);
    display: grid; grid-template-columns: 196px 1fr; grid-template-rows: auto 1fr; column-gap: 12px;
    overflow: hidden; padding: 8px 10px;
  }
  #hud #left .tools { grid-column: 1; grid-row: 1; }
  #hud #left .tabs { grid-column: 1; grid-row: 2; align-self: start; margin-top: 6px; }
  #hud #left .fly { display: block; grid-column: 2; grid-row: 1 / span 2; overflow-y: auto; max-height: calc(min(230px, 34vh) - 16px); }
  #hud #left .tab-title { margin: 0 0 4px !important; font-size: 12px !important; }
  #hud #left .tiles.chains { gap: 4px 16px; }
  #hud #left.docked-closed { max-height: none; grid-template-rows: auto auto; }
  #hud #left.docked-closed .fly { display: none; }
  #hud #left.docked-closed { right: auto; grid-template-columns: 196px; }
  /* Rechterpaneel stopt boven het dock; de hulpregel staat net boven het dock. */
  #hud #right { max-height: calc(100% - var(--topbar, 40px) - var(--dockh, 150px) - 34px); overflow-y: auto; }
}

/* Laptop: dock gecentreerd en zo breed als de inhoud, grotere tegels, gereedschap met tekst, duidelijk inklappen */
.dock-toggle { display: none; }
@media (min-width: 761px) and (min-height: 521px) {
  #hud #left { left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 16px); grid-template-columns: 188px auto; }
  #hud #left .tools { grid-template-columns: 1fr 1fr !important; gap: 4px; }
  #hud #left .tools button { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 4px 6px; font-size: 12px; }
  #hud #left .tools .mlabel { display: inline !important; font-size: 11.5px; }
  .tile .lock { font-size: 9px; padding: 0 3px; top: 2px; right: 2px; }
  .dock-toggle { display: block; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 44px; height: 18px; padding: 0; line-height: 16px; font-size: 12px; border-radius: 9px 9px 0 0; z-index: 2; }
  #hud #left { overflow: visible; }
  #hud #left.docked-closed .dock-toggle { transform: translateX(-50%) rotate(180deg); border-radius: 0 0 9px 9px; }
  #hud #left.docked-closed { left: 50%; transform: translateX(-50%); grid-template-columns: 188px; }
}
@media (min-width: 1200px) and (min-height: 700px) {
  #hud #left .chain-row .tile { width: 64px !important; min-height: 72px !important; }
  #hud #left .chain-row .tile .ti { font-size: 24px !important; }
  #hud #left .chain-row .tile .tn { font-size: 10.5px !important; }
  #hud #left .chain-row .tile .bc { font-size: 10px !important; }
  #hud #left .chain h4 { font-size: 11px; }
  #hud #left { max-height: min(260px, 36vh); }
  #hud #left .fly { max-height: calc(min(260px, 36vh) - 16px); }
}
@media (min-width: 761px) and (min-height: 521px) { #hud #left.docked-closed .fly, #hud #left.docked-closed .fly > * { display: none !important; } }

/* ===== Laptop-dock, versie 3 (zoals Anno): een slanke balk onderaan met gereedschap en tijdperken.
   Een tijdperk aanklikken opent de ketens erboven; een gebouw kiezen klapt het weer dicht. ===== */
.dock-close { display: none; }
@media (min-width: 761px) and (min-height: 521px) {
  #hud #left {
    display: flex !important; align-items: center; gap: 10px;
    top: auto; bottom: 8px; left: 50%; right: auto; transform: translateX(-50%);
    width: max-content; max-width: calc(100% - 16px); max-height: none; padding: 6px 10px; overflow: visible;
  }
  #hud #left .tools { display: flex !important; gap: 4px; }
  #hud #left .tools button { padding: 6px 10px; }
  #hud #left .tabs.ages { display: flex !important; width: auto; gap: 4px; margin: 0; padding-left: 10px; border-left: 1px solid rgba(232, 214, 168, 0.2); }
  #hud #left .tabs.ages button { flex-direction: row; gap: 6px; padding: 6px 12px !important; min-width: 0; }
  #hud #left .tabs.ages button b { font-size: 13px; }
  #hud #left .tabs.ages button span:not(.tab-dot) { font-size: 12px; }
  #hud #left.menu-open .tabs.ages button.on { box-shadow: 0 -3px 0 #ffd98a inset; }
  #hud #left .fly {
    display: block; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: max-content; max-width: calc(100vw - 32px); max-height: 52vh; overflow-y: auto; padding: 10px 14px 12px;
    background: linear-gradient(#222b3d, #182032); border: 1px solid #8a7448; border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
  #hud #left:not(.menu-open) .fly { display: none !important; }
  #hud #left .fly .tiles.chains { max-width: min(1080px, calc(100vw - 60px)); }
  #hud #left .dock-close { display: block; position: absolute; top: 6px; right: 8px; padding: 1px 7px; font-size: 12px; }
  #hud #left .tab-title { margin: 0 30px 8px 0 !important; }
  #hint { bottom: 66px; }
}
/* Uitklapmenu nooit over het rechterpaneel: gecentreerd, dus aan beide kanten de breedte van dat paneel vrijhouden. */
@media (min-width: 761px) and (min-height: 521px) {
  /* Midden van de vrije ruimte links van het rechterpaneel (310 px breed met marge); #left staat midden in beeld. */
  #hud #left .fly { left: calc(50% - 155px); max-width: calc(100vw - 334px); }
  #hud #left .fly .tiles.chains { max-width: calc(100vw - 364px); }
}
#left .tools button.hidden { display: none !important; }

/* Chat: knop linksonder (laptop) of boven de tabbalk (telefoon), venster erboven */
#chatbtn { position: fixed; left: 8px; bottom: 8px; z-index: 56; width: 46px; height: 46px; padding: 0; font-size: 20px; border-radius: 50%; }
#chatbtn .chat-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #e05a4a; color: #fff; font-size: 11px; line-height: 18px; font-weight: 700; }
#chatbox { position: fixed; left: 8px; bottom: 62px; z-index: 57; width: min(340px, calc(100vw - 16px)); height: min(380px, 55vh); display: flex; flex-direction: column; padding: 8px 10px; }
#chatbox.hidden { display: none; }
.chat-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.chat-head .chat-to { flex: 1; font-size: 12px; }
.chat-head button { padding: 1px 7px; font-size: 12px; }
.chat-list { flex: 1; overflow-y: auto; font-size: 13px; line-height: 1.35; padding-right: 4px; }
.chat-msg { padding: 2px 0; word-wrap: break-word; }
.chat-msg.mine { opacity: 0.9; }
.chat-msg b[data-who] { cursor: pointer; }
.chat-time { font-size: 10px; opacity: 0.5; }
.chat-priv { font-size: 11px; color: #ffd98a; }
.chat-del { padding: 0 4px; font-size: 11px; margin-left: 4px; }
.chat-menu { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 0 4px; }
.chat-menu button { font-size: 11.5px; padding: 2px 6px; }
.chat-quick { display: flex; gap: 4px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: none; }
.chat-quick button { flex: none; font-size: 11.5px; padding: 3px 7px; white-space: nowrap; }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; font: inherit; font-size: 14px; padding: 6px 8px; border-radius: 8px; border: 1px solid #6a5a3a; background: #1a1610; color: #f2e6c8; }
.chat-admin { font-size: 11.5px; margin: 6px 0 0; }
@media (max-width: 760px), (max-height: 520px) {
  #chatbtn { left: 10px; bottom: calc(var(--tabh, 60px) + 14px + env(safe-area-inset-bottom)); width: 44px; height: 44px; }
  #chatbox { left: 8px; right: 8px; width: auto; bottom: calc(var(--tabh, 60px) + 66px + env(safe-area-inset-bottom)); height: min(360px, 50vh); }
}
body.watching #chatbtn { bottom: 8px; }

/* Admin: live overzicht */
.fb-live .fb-box { width: min(760px, 100%); }
.live-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 8px 0; }
.live-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(232, 214, 168, 0.2); border-radius: 10px; padding: 8px 10px; text-align: center; }
.live-card b { display: block; font-size: 26px; color: #ffd98a; font-family: Cinzel, serif; }
.live-card span { font-size: 11.5px; opacity: 0.8; }
.live-world { border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 8px 0; }
.live-wh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.live-n { margin-left: auto; font-size: 12.5px; }
.live-on { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.live-on span { background: rgba(110, 211, 111, 0.15); border: 1px solid rgba(110, 211, 111, 0.4); border-radius: 12px; padding: 1px 8px; font-size: 12px; }
.live-top { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.live-top th { text-align: left; opacity: 0.6; font-weight: 600; padding: 2px 4px; }
.live-top td { padding: 2px 4px; border-top: 1px solid rgba(255, 255, 255, 0.05); }

.live-sec { margin: 6px 0; }
.live-sec summary { cursor: pointer; font-weight: 600; padding: 4px 0; }

/* Lobby: korte bonus per volk, "zo werkt het" en een levend bolletje bij Snel spelen. */
.lobby-box .card .perk {
  align-self: flex-start;
  margin: 4px 0 2px;
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--cc) 28%, rgba(0, 0, 0, 0.35));
  border: 1px solid color-mix(in srgb, var(--cc) 70%, transparent);
  color: #fffaf0;
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}
.lobby-box .card .cport {
  transition: transform 0.25s, filter 0.25s;
}
.lobby-box .card:hover .cport {
  transform: scale(1.03);
  filter: brightness(1.08);
}
.lobby-box .card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 14px color-mix(in srgb, var(--cc) 35%, transparent);
}
.cdesc {
  display: block;
  margin: 10px 0 0;
  padding: 8px 12px;
  border-left: 3px solid #d9a441;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
}
.how {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0 8px;
}
.how > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
  padding: 12px 8px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(217, 164, 65, 0.14), rgba(0, 0, 0, 0.2));
  border: 1px solid rgba(217, 164, 65, 0.3);
  color: #f4ead6;
  font-size: 12.5px;
  line-height: 1.3;
}
.how > div b {
  font-family: 'Cinzel', Georgia, serif;
  color: #ffd98a;
  font-size: 14px;
}
.how > div span {
  opacity: 0.85;
}
.small-note {
  font-size: 12px;
  opacity: 0.7;
}
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: livePulse 1.6s infinite;
  vertical-align: 1px;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (max-width: 600px) {
  .lobby-box .card .perk {
    align-self: center;
    font-size: 10.5px;
    padding: 1px 6px;
    white-space: normal;
  }
  /* Telefoon: de speelknoppen blijven dichtbij, dus geen uitlegstrook. */
  .how {
    display: none;
  }
}

/* Laptops met een laag scherm: de hele lobby past zonder uitzoomen (kleinere kop, lagere portretten, compacte uitleg). */
@media (min-width: 801px) and (max-height: 940px) {
  .lobby-wrap {
    padding: 10px 16px 12px;
  }
  .lobby-head {
    margin-bottom: 6px;
  }
  .lobby-head h1 {
    font-size: clamp(36px, 5.2vw, 58px);
  }
  .lobby-head .tag {
    font-size: 13px;
  }
  .lobby-box {
    padding: 10px 18px 12px;
  }
  .lobby-box h3 {
    margin: 6px 0 6px;
  }
  .tut-hint {
    padding: 5px 10px;
    margin: 0 0 4px;
    font-size: 13px;
  }
  .lobby-box .card {
    padding: 8px;
  }
  .cport {
    aspect-ratio: 200 / 112;
  }
  .cdesc {
    margin-top: 6px;
    padding: 5px 10px;
    font-size: 12.5px;
  }
  .how {
    margin: 8px 0 2px;
  }
  .how > div {
    flex-direction: row;
    justify-content: center;
    padding: 7px 8px;
  }
  .how > div span,
  .small-note {
    display: none;
  }
  .play-card {
    padding: 2px 12px 10px;
    margin-bottom: 8px;
  }
  .play-card > .desc {
    display: none;
  }
  .lobby-box button.quick {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .install-app {
    margin-top: 6px;
    padding: 6px 14px;
  }
  .lobby-foot {
    margin-top: 6px;
  }
}
@media (min-width: 801px) and (max-height: 640px) {
  .how {
    display: none;
  }
}

/* "+N"-knop in de goederenbalk: de rest van je goederen. */
#goods .good.more {
  cursor: pointer;
  font-weight: 700;
  color: #ffd98a;
  min-width: 34px;
  justify-content: center;
}

/* Menu (☰): geluid, muziek en meldingen die uit staan zie je doorgestreept. */
.ctl-menu button {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ctl-menu button.off {
  opacity: 0.55;
  text-decoration: line-through;
}

/* Eerste gebouw: de knop van het bouwmenu pulseert goud, met een labeltje erboven. */
.build-hint {
  position: relative;
  animation: buildHint 1.6s ease-in-out infinite;
  border-color: #ffd98a !important;
}
.build-hint::after {
  content: attr(data-hint);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffd98a;
  color: #2a1a08;
  font: 700 12px/1.3 system-ui, sans-serif;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
  animation: buildHintBob 1.6s ease-in-out infinite;
}
@keyframes buildHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 138, 0.75); }
  50% { box-shadow: 0 0 0 7px rgba(255, 217, 138, 0); }
}
@keyframes buildHintBob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -3px); }
}

/* In het bouwmenu en het rechterpaneel: alleen de gloed, geen label (dat zou buiten de rand vallen). */
.tile.build-hint::after,
.rtabs .build-hint::after,
[data-rtab].build-hint::after {
  display: none;
}
.tile.build-hint {
  outline: 2px solid #ffd98a;
  outline-offset: 1px;
}

/* Age-paneel: de eerste eis voor het volgende tijdperk die je nog niet haalt. */
.reqs span.build-hint {
  display: block;
  margin: 2px -6px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 217, 138, 0.16);
  outline: 1px solid #ffd98a;
  color: #ffe9b8;
  font-weight: 600;
}
.reqs span.build-hint::after {
  display: none;
}

/* Laptop: de tabs van het rechterpaneel blijven bovenin staan, ook als het paneel scrolt. */
@media (min-width: 801px) {
  #right .rtabs {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

/* Goederenbalk met kolonies: van welk eiland je de voorraad ziet. */
#goods .good.isle {
  background: rgba(217, 164, 65, 0.22);
  border-color: #d9a441;
  color: #ffe9b8;
  font-weight: 700;
}

/* Live-paneel: trechter (waar spelers afhaken). */
.fun-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .fun-cols { grid-template-columns: 1fr; } }
.fun-row { display: grid; grid-template-columns: 112px 1fr 34px 40px; align-items: center; gap: 6px; font-size: 12.5px; margin: 3px 0; }
.fun-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.fun-bar i { display: block; height: 100%; background: linear-gradient(90deg, #d9a441, #ffd98a); }
.fun-row b { text-align: right; }
.fun-drop { color: #ff8a7a; }

/* Verhaal: kaartje bovenaan Quests en de verteller (de oppergod van je volk). */
.story-card {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 6px 0 10px;
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(217, 164, 65, 0.22), rgba(0, 0, 0, 0.25));
  border: 1px solid rgba(255, 217, 138, 0.55);
  cursor: pointer;
}
.story-card:hover { border-color: #ffd98a; }
.story-face {
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 2px solid #d9a441;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}
.story-body { flex: 1; min-width: 0; }
.story-body small { display: block; color: #ffd98a; font-family: 'Cinzel', Georgia, serif; font-size: 11px; letter-spacing: 0.04em; }
.story-body b { display: block; margin-bottom: 3px; }
.narrator {
  position: fixed;
  left: 16px;
  bottom: calc(var(--dockh, 70px) + 24px);
  z-index: 80;
  width: min(460px, calc(100vw - 32px));
  display: flex;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d9a441;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
  animation: narratorIn 0.35s ease-out both;
  cursor: pointer;
}
.narrator.out { animation: narratorOut 0.25s ease-in both; }
.narrator-face {
  width: 96px;
  height: 120px;
  flex: none;
  border-radius: 12px;
  object-fit: cover;
  object-position: center 15%;
  border: 2px solid #d9a441;
}
.narrator-name { font-family: 'Cinzel', Georgia, serif; color: #ffd98a; font-size: 17px; font-weight: 700; }
.narrator-name small { font-size: 11px; opacity: 0.8; font-weight: 400; }
.narrator-text { margin: 6px 0; font-size: 14px; line-height: 1.45; min-height: 3.6em; }
.narrator-task { margin: 4px 0 8px; font-weight: 700; color: #ffe9b8; }
.narrator-row { display: flex; justify-content: flex-end; }
@keyframes narratorIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes narratorOut { to { opacity: 0; transform: translateY(12px); } }
@media (max-width: 600px) {
  .narrator { bottom: calc(var(--bottombar, 56px) + 16px); left: 8px; width: calc(100vw - 16px); gap: 10px; padding: 10px; }
  .narrator-face { width: 70px; height: 90px; }
  .narrator-text { font-size: 13px; }
}

/* Feestelijke momenten: icoon dat opspringt met vonkjes, en beloningen die naar de goederenbalk vliegen. */
.floater {
  position: fixed;
  z-index: 70;
  transform: translate(-50%, -50%);
  font-size: 30px;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
  animation: floatPop 1.5s ease-out forwards;
}
@keyframes floatPop {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(0.4); }
  20% { opacity: 1; transform: translate(-50%, -60%) scale(1.25); }
  40% { transform: translate(-50%, -70%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -140%) scale(1); }
}
.floater .spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffe48a;
  box-shadow: 0 0 6px #ffd24a;
  animation: spark 0.9s ease-out forwards;
}
.floater .s1 { --dx: -26px; --dy: -22px; }
.floater .s2 { --dx: 28px; --dy: -18px; }
.floater .s3 { --dx: -18px; --dy: 20px; }
.floater .s4 { --dx: 22px; --dy: 24px; }
@keyframes spark {
  from { opacity: 1; transform: translate(0, 0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
.reward-fly {
  position: fixed;
  z-index: 75;
  transform: translate(-50%, -50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffe9a8, #e8b450);
  color: #2a1a08;
  font: 700 15px/1.2 system-ui, sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  white-space: nowrap;
  animation: rewardIn 0.4s ease-out both;
  transition: left 0.9s cubic-bezier(0.5, 0, 0.8, 0.3), top 0.9s cubic-bezier(0.5, 0, 0.8, 0.3), opacity 0.9s ease-in, transform 0.9s ease-in;
}
.reward-fly.go { opacity: 0.2; transform: translate(-50%, -50%) scale(0.6); }
@keyframes rewardIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Doel-strookje linksboven: de verteller, ingeklapt (mini-portret, opdracht, voortgang). */
.objective {
  position: fixed;
  top: calc(var(--topbar, 40px) + 16px);
  left: 12px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid #d9a441;
  text-align: left;
  cursor: pointer;
  animation: narratorIn 0.3s ease-out both;
}
.objective.hidden { display: none; }
.objective img {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  border: 1.5px solid #d9a441;
}
.objective .obj-t { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 6px; row-gap: 3px; min-width: 0; }
.objective .obj-t b { grid-column: 1 / -1; font-size: 13px; color: #ffe9b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.objective .obj-bar { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.objective .obj-bar i { display: block; height: 100%; background: #e8c24a; }
.objective small { font-size: 11px; opacity: 0.8; }

/* Slanke zee-balk: alleen waar je bent en de knop (de verteller legt uit). */
.settlebar.slim { padding: 6px 8px 6px 14px; gap: 10px; width: auto; max-width: min(560px, calc(100vw - 24px)); }
.settlebar.slim b { font-size: 18px; }
.settlebar.slim span { flex: 1; }

/* Gouden aanwijzing: in balken en panelen alleen de gloed, geen label dat over iets anders valt. */
.settlebar .build-hint::after,
.narrator .build-hint::after,
.ctl-menu .build-hint::after { display: none; }

/* Rechterpaneel nog leeg in het begin (alleen info van wat je aanklikt). */
#hud.rp-off .rtabs,
#hud.rp-off [data-rpanel] { display: none !important; }

/* Een tab die net verschijnt: gouden gloed en "New", tot je hem bekijkt. */
.rtabs button.fresh, #mtabs button.fresh { box-shadow: 0 0 0 1.5px #ffd98a, 0 0 12px rgba(255, 217, 138, 0.6); position: relative; }
.rtabs button.fresh::before {
  content: 'New';
  position: absolute;
  top: -7px;
  right: -4px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ffd98a;
  color: #2a1a08;
  font: 700 9.5px/1.5 system-ui, sans-serif;
}

/* Bouwen: gouden ring op een goede plek. Klikt dwars erdoorheen naar de kaart. */
#place-pin {
  position: fixed;
  left: 0;
  top: 0;
  will-change: transform;
  z-index: 11;
  display: none;
  width: 0;
  height: 0;
  pointer-events: none;
}
#place-pin i {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 3px solid #ffd84a;
  border-radius: 50%;
  background: rgba(255, 216, 74, 0.22);
  box-shadow: 0 0 12px 3px rgba(255, 216, 74, 0.6);
  animation: pp-pulse 1.1s ease-in-out infinite;
}
#place-pin b {
  position: absolute;
  left: 0;
  top: -40px;
  transform: translateX(-50%);
  padding: 3px 9px;
  border-radius: 999px;
  background: #ffd84a;
  color: #3a2608;
  font: 700 12px/1.2 inherit;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
@keyframes pp-pulse {
  50% {
    border-color: #fff3b0;
    box-shadow: 0 0 18px 5px rgba(255, 216, 74, 0.75);
  }
}

/* Halfgod: klein kaartje linksonder (portret met levensring, naam, knop voor de gave). */
#hero-card {
  position: fixed;
  z-index: 11;
  left: 12px;
  bottom: 84px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 5px;
  border-radius: 999px;
}
#hero-card {
  border-radius: 18px;
  padding: 6px 10px 6px 6px;
}
#hero-card .hc-face {
  position: relative;
  flex: none;
  width: 58px;
  height: 58px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #e8c24a;
  background: radial-gradient(circle at 50% 35%, #fff3c4, #c8962e 70%, #6b4a12);
  box-shadow: 0 0 12px rgba(255, 215, 106, 0.55);
  cursor: pointer;
}
#hero-card .hc-face.sel {
  border-color: #fff;
  box-shadow: 0 0 16px 3px rgba(255, 225, 74, 0.9);
}
#hero-card .hc-face span {
  font: 700 26px/54px Georgia, serif;
  color: #3a2608;
}
#hero-card .hc-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
#hero-card .hc-face img + span {
  display: none;
}
#hero-card .hc-body b small {
  font-weight: 400;
  opacity: 0.7;
  font-size: 11px;
}
#hero-card .hc-acts {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}
#hero-card .hc-acts button {
  width: 28px;
  height: 26px;
  padding: 0;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}
#hero-card .hc-acts button.on {
  border-color: #ffe14a;
  box-shadow: 0 0 8px rgba(255, 225, 74, 0.6);
}
#hero-card .hc-face em {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  background: #2a1c08;
  border: 1.5px solid #e8c24a;
  font: 700 12px/17px Georgia, serif;
  font-style: normal;
  color: #ffe9b0;
}
#hero-card .hc-bar {
  display: block;
  width: 128px;
  height: 5px;
  margin-top: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c) calc(var(--f) * 100%), rgba(0, 0, 0, 0.45) 0);
}
#hero-card .hc-bar.hp {
  --c: #6fd36f;
}
#hero-card .hc-bar.xp {
  --c: #e8c24a;
  height: 3px;
}
#hero-card .hc-star {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1.5px solid #ffe14a;
  background: rgba(60, 42, 10, 0.95);
  font-size: 17px;
  cursor: pointer;
  animation: hc-star 1s ease-in-out infinite;
}
@keyframes hc-star {
  50% {
    box-shadow: 0 0 14px 4px rgba(255, 225, 74, 0.8);
  }
}
.bar.xp > div {
  background: #e8c24a;
}
/* Nieuw level: twee zegeningen om uit te kiezen. */
.hero-choice {
  position: fixed;
  z-index: 31;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 24px));
  padding: 16px;
  animation: rc-in 0.3s ease-out;
}
.hero-choice .hcx-top {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.hero-choice .hcx-top img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 10px;
  border: 2px solid #e8c24a;
}
.hero-choice .hcx-top b {
  font: 700 17px/1.2 Georgia, serif;
  color: #f3d48a;
}
.hero-choice .hcx-top p {
  margin: 4px 0 0;
  font-size: 13px;
}
.hero-choice .hcx-opts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hero-choice .hcx-opts button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  border-radius: 12px;
  border: 2px solid #8a6a2a;
  background: linear-gradient(#3a2a12, #22180a);
  color: #ffe9b0;
  cursor: pointer;
}
.hero-choice .hcx-opts button:hover {
  border-color: #ffe14a;
  box-shadow: 0 0 14px rgba(255, 225, 74, 0.5);
}
.hero-choice .hcx-ic {
  font-size: 30px;
}
.hero-choice small {
  font-size: 12px;
  opacity: 0.85;
  text-align: center;
}
.hero-choice em {
  font-style: normal;
  color: #ffd84a;
  letter-spacing: 2px;
}
#hero-card .hc-body {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 13px;
}
#hero-card .hc-body small {
  font-size: 11px;
  opacity: 0.75;
}
#hero-card .hc-pow {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  border: 1.5px solid #e8c24a;
  background: rgba(40, 28, 12, 0.9);
  cursor: pointer;
}
#hero-card .hc-pow:disabled {
  filter: grayscale(0.8);
  opacity: 0.7;
}
#hero-card .hc-pow small {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px/1 inherit;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}
.hero-src {
  display: grid;
  gap: 3px;
  margin: 4px 0 8px;
  font-size: 12.5px;
}
.hero-src span {
  opacity: 0.7;
  font-size: 11.5px;
}
.hero-power {
  width: 100%;
}
@media (max-width: 760px) {
  #hero-card {
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    left: 8px;
  }
  #hero-card .hc-body > b {
    display: none;
  }
  #hero-card .hc-bar {
    width: 112px;
  }
}

/* Oude ruïne: inscriptie op de steen, en de knop om je halfgod te sturen. */
.ruin-card {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(380px, calc(100vw - 32px));
  padding: 16px 18px;
  animation: rc-in 0.25s ease-out;
}
.ruin-card .rc-title {
  font: 700 17px/1.2 Georgia, serif;
  color: #f3d48a;
  margin-bottom: 8px;
}
.ruin-card .rc-title small {
  font-weight: 400;
  opacity: 0.75;
}
.ruin-card .rc-ins {
  font: italic 15px/1.45 Georgia, serif;
  color: #e8e0ff;
  text-shadow: 0 0 8px rgba(127, 230, 255, 0.45);
  margin: 0 0 10px;
}
.ruin-card .rc-row {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
@keyframes rc-in {
  from {
    opacity: 0;
    transform: translate(-50%, -46%);
  }
}

/* Wrak herbouwen: drie fases; eigen schip: upgrades. */
.wreck-row {
  font-size: 13px;
  margin: 3px 0;
  opacity: 0.6;
}
.wreck-row.done,
.wreck-row.now {
  opacity: 1;
}
.wreck-row span {
  font-size: 12px;
  opacity: 0.75;
}
.ship-ups {
  display: grid;
  gap: 6px;
  margin-top: 6px;
}
.ship-up {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}
.ship-up small {
  display: block;
  opacity: 0.7;
  font-size: 11px;
}

/* Storm-intro: drie korte zinnen die na elkaar opkomen en weer verdwijnen. */
.intro-text.storm {
  top: 0;
  bottom: 0;
}
.intro-text.storm .st {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18vh;
  margin: 0;
  text-align: center;
  font: italic 600 clamp(18px, 2.6vw, 30px) / 1.3 Georgia, serif;
  color: #f1e6c8;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.9s ease;
}
.intro-text.storm .st.on {
  opacity: 1;
}

/* Reisdagboek van de halfgod. */
#quests h4 {
  margin: 12px 0 4px;
  font: 700 13px/1.2 Georgia, serif;
  color: #f3d48a;
  letter-spacing: 0.03em;
}
.jr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dashed rgba(232, 194, 74, 0.2);
  font-size: 13px;
}
.jr small {
  display: block;
  opacity: 0.75;
  font-size: 11.5px;
}
.jr.done {
  opacity: 0.6;
}
.jisles {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.jisles span {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(232, 194, 74, 0.15);
  font-size: 12px;
}

.wreck-task {
  margin: 2px 0 0 22px;
  font-size: 12px;
  color: #f3d48a;
}

/* Uitvaren: wat je nu doet, bovenin. */
.voyage-hint {
  position: fixed;
  z-index: 25;
  left: 50%;
  top: calc(var(--topbar, 56px) + 16px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border-color: #ffe14a;
  box-shadow: 0 0 16px rgba(255, 225, 74, 0.5);
  white-space: nowrap;
  animation: rc-in 0.25s ease-out;
}
.voyage-hint button {
  padding: 2px 8px;
}

#hero-card .hc-doing {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #f3d48a;
  white-space: nowrap;
}
#hero-card .hc-acts .hc-stone {
  position: relative;
  border-color: #ffd84a;
  animation: hc-star 1.2s ease-in-out infinite;
}
#hero-card .hc-stone small {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #ffd84a;
  color: #3a2608;
  font: 700 10px/14px inherit;
}
#hero-card .hc-acts .hc-stone {
  position: relative;
  border-color: #ffd84a;
  animation: hc-star 1.2s ease-in-out infinite;
}
#hero-card .hc-stone small {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  background: #ffd84a;
  color: #3a2608;
  font: 700 10px/14px inherit;
}

.jbp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}
.jbp span {
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  opacity: 0.55;
}
.jbp span.on {
  background: rgba(232, 194, 74, 0.18);
  opacity: 1;
}

/* Held als hoofdinterface: in de onderbalk (computer), de dorpspanelen rechts dicht tot je ze opent. */
#left #hero-card.docked {
  position: static;
  margin: -4px 8px -4px -4px;
  padding: 4px 10px 4px 4px;
  border: none;
  border-right: 1px solid rgba(232, 194, 74, 0.35);
  border-radius: 12px 0 0 12px;
  background: linear-gradient(90deg, rgba(232, 194, 74, 0.12), transparent);
  box-shadow: none;
  z-index: auto;
}
#left #hero-card.docked .hc-face {
  width: 52px;
  height: 52px;
}
#left #hero-card.docked .hc-face span {
  line-height: 48px;
}
#left {
  align-items: center;
}
#hud.rp-hidden #right .rtabs,
#hud.rp-hidden #right [data-rpanel] {
  display: none !important;
}
.update-note {
  position: fixed;
  z-index: 60;
  left: 50%;
  top: 40%;
  transform: translateX(-50%);
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(30, 22, 10, 0.95);
  border: 1.5px solid #e8c24a;
  color: #ffe9b0;
  font-weight: 600;
}
.objective .obj-sub {
  display: block;
  font-size: 11px;
  opacity: 0.7;
  font-weight: 400;
}
.objective .obj-go {
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e8c24a;
  color: #2a1c08;
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
}
.ruin-card .rc-now {
  font-size: 14px;
  line-height: 1.4;
  margin: 4px 0 12px;
}
.ruin-card .rc-title small {
  font: 400 12px/1.2 inherit;
  opacity: 0.7;
}

/* ---------- RPG-indeling (eilandenwereld) ---------- */
/* Heldenframe linksboven. */
#hero-card.frame {
  top: calc(var(--topbar, 56px) + 10px);
  bottom: auto;
  left: 10px;
  border-radius: 16px;
}
/* Questtracker rechts. */
#quest-tracker {
  position: fixed;
  z-index: 11;
  top: calc(var(--topbar, 56px) + 92px);
  left: 10px;
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: auto;
}
#quest-tracker .qt-head {
  background: #1c150b;
  border-radius: 10px;
  padding: 4px 6px 4px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #f3d48a;
  font: 700 14px/1.2 Georgia, serif;
  text-shadow: 0 1px 3px #000;
}
#quest-tracker .qt-head button {
  padding: 2px 10px;
  font-size: 12px;
}
#quest-tracker .ql {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid rgba(232, 194, 74, 0.35);
  background: #1c150b;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  color: #f6ecd2;
  font-size: 13px;
  line-height: 1.35;
}
#quest-tracker button.ql {
  cursor: pointer;
}
#quest-tracker button.ql:hover {
  border-color: #ffe14a;
}
#quest-tracker .ql.final {
  font-size: 12px;
  opacity: 0.85;
}
#quest-tracker .ql.main {
  border-color: #e8c24a;
  box-shadow: 0 0 12px rgba(232, 194, 74, 0.25);
}
#quest-tracker .ql i {
  display: block;
  font-style: normal;
  margin-left: 10px;
  font-size: 12.5px;
}
#quest-tracker .ql i .ok {
  color: #9fe39f;
}
#quest-tracker .ql i .now {
  display: inline-block;
  color: #ffe14a;
  font-weight: 700;
  padding: 1px 6px;
  margin: 1px 0 1px -6px;
  border-radius: 6px;
  background: rgba(255, 225, 74, 0.12);
  animation: ql-now 1.6s ease-in-out infinite;
}
#quest-tracker .ql i .now small,
#quest-tracker .ql i .tip {
  font-weight: 400;
  color: #d8c9a4;
  font-size: 11.5px;
}
#quest-tracker .ql i .miss {
  color: #ff8a7a;
}
@keyframes ql-now {
  50% {
    background: rgba(255, 225, 74, 0.26);
  }
}
#quest-tracker .ql i .later {
  opacity: 0.55;
}
#quest-tracker .ql em {
  font-style: normal;
  color: #f3d48a;
}
#quest-tracker .go {
  float: right;
  margin-top: 2px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e8c24a;
  color: #2a1c08;
  font-weight: 700;
  font-size: 11px;
}
#quest-tracker .ql.main .go {
  float: none;
  display: inline-block;
  margin-top: 5px;
}
/* Actiebalk onderin: vaste knoppen met sneltoets. */
#hud.hero-ui #left .tools,
#hud.hero-ui #left > .tabs.ages {
  display: none !important;
}
#actionbar {
  display: flex;
  gap: 6px;
}
#actionbar button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 54px;
  padding: 4px 6px 3px;
  border-radius: 10px;
  cursor: pointer;
}
#actionbar button.on {
  border-color: #ffe14a;
  box-shadow: 0 0 12px rgba(255, 225, 74, 0.5);
}
#actionbar button:disabled {
  opacity: 0.45;
}
#actionbar kbd {
  position: absolute;
  top: 2px;
  left: 4px;
  font: 700 9px/1 inherit;
  opacity: 0.6;
}
#actionbar .ab-ic {
  font-size: 20px;
  line-height: 1.1;
}
#actionbar .ab-t {
  font-size: 10.5px;
  white-space: nowrap;
  opacity: 0.9;
}
/* Bouwmenu: categorieën en slopen bovenin het menu zelf. */
.fly-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.fly-head .tabs.ages {
  display: flex;
  gap: 4px;
}
.fly-head .fly-demolish {
  margin-left: auto;
}
@media (max-width: 760px) {
  #quest-tracker {
    width: min(230px, 60vw);
    top: calc(var(--topbar, 56px) + 76px);
    left: 6px;
  }
  #quest-tracker .ql.final,
  #quest-tracker .ql.side {
    display: none;
  }
  #hero-card.frame {
    top: calc(var(--topbar, 56px) + 6px);
    left: 6px;
  }
}

/* Gekozen vanuit de questtracker: dit gebouw. */
.tile.quest-pick {
  border-color: #ffe14a !important;
  box-shadow: 0 0 0 2px #ffe14a, 0 0 16px 4px rgba(255, 225, 74, 0.7) !important;
  animation: qp 0.9s ease-in-out infinite;
}
@keyframes qp {
  50% {
    box-shadow: 0 0 0 2px #fff3b0, 0 0 24px 8px rgba(255, 225, 74, 0.9);
  }
}

/* Actiebalk: vechten links (1-4), de rest rechts (letters). */
#actionbar .ab-group {
  display: flex;
  gap: 5px;
}
#actionbar .ab-group.combat {
  padding-right: 8px;
  margin-right: 4px;
  border-right: 1px solid rgba(232, 194, 74, 0.35);
}
#actionbar button.ready {
  border-color: #ff9a5a;
  box-shadow: 0 0 12px rgba(255, 140, 80, 0.6);
  animation: ab-ready 1.1s ease-in-out infinite;
}
@keyframes ab-ready {
  50% {
    box-shadow: 0 0 18px rgba(255, 140, 80, 0.9);
  }
}
/* Karakterscherm. */
.char-sheet {
  position: fixed;
  z-index: 30;
  left: 12px;
  top: calc(var(--topbar, 56px) + 90px);
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - var(--topbar, 56px) - 200px);
  overflow-y: auto;
  padding: 14px;
}
.char-sheet .cs-x {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
}
.char-sheet .cs-top {
  display: flex;
  gap: 12px;
  align-items: center;
}
.char-sheet .cs-face {
  position: relative;
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #e8c24a;
  background: radial-gradient(circle at 50% 35%, #fff3c4, #c8962e 70%, #6b4a12);
  font: 700 30px/60px Georgia, serif;
  text-align: center;
  color: #3a2608;
}
.char-sheet .cs-face em {
  position: absolute;
  right: -4px;
  bottom: -4px;
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  background: #2a1c08;
  border: 1.5px solid #e8c24a;
  font: 700 12px/19px Georgia, serif;
  font-style: normal;
  color: #ffe9b0;
}
.char-sheet .cs-name {
  display: block;
  font: 700 18px/1.2 Georgia, serif;
  color: #f3d48a;
}
.char-sheet small {
  display: block;
  font-size: 11.5px;
  opacity: 0.75;
}
.char-sheet .cs-bar {
  display: block;
  width: 200px;
  height: 6px;
  margin: 4px 0 2px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--c) calc(var(--f) * 100%), rgba(0, 0, 0, 0.45) 0);
}
.char-sheet .cs-bar.hp {
  --c: #6fd36f;
}
.char-sheet .cs-bar.xp {
  --c: #e8c24a;
  height: 4px;
}
.char-sheet .cs-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
  margin: 10px 0 4px;
  font-size: 12.5px;
}
.char-sheet h4 {
  margin: 10px 0 5px;
  font: 700 13px/1.2 Georgia, serif;
  color: #f3d48a;
}
.char-sheet .cs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.char-sheet .cs-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 4px;
  border-radius: 10px;
  border: 1px solid rgba(232, 194, 74, 0.25);
  background: rgba(0, 0, 0, 0.3);
  text-align: center;
  opacity: 0.55;
}
.char-sheet .cs-slot.on {
  opacity: 1;
  border-color: rgba(232, 194, 74, 0.6);
}
.char-sheet .cs-slot span {
  font-size: 22px;
}
.char-sheet .cs-slot b {
  font-size: 11.5px;
  line-height: 1.15;
}
.char-sheet .cs-slot small {
  font-size: 10px;
  line-height: 1.15;
}
.char-sheet .cs-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.char-sheet .cs-perks span {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(232, 194, 74, 0.15);
  font-size: 12px;
}

/* Oplaadklok op de vechtknoppen. */
@property --cda {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
#actionbar .cdw {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(rgba(0, 0, 0, 0.68) var(--cda), transparent 0);
  animation-name: cdsweep;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  pointer-events: none;
}
@keyframes cdsweep {
  from {
    --cda: 360deg;
  }
  to {
    --cda: 0deg;
  }
}
#actionbar .cdn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 20px/1 inherit;
  color: #fff;
  text-shadow: 0 1px 4px #000;
  pointer-events: none;
}
#actionbar button:disabled .cdw ~ * {
  opacity: 1;
}
#actionbar button.just {
  animation: ab-just 0.7s ease-out;
}
@keyframes ab-just {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 240, 160, 0.9);
    transform: scale(1.12);
  }
  100% {
    box-shadow: 0 0 0 14px rgba(255, 240, 160, 0);
    transform: scale(1);
  }
}
/* Zwevende schadegetallen. */
.dmg-num {
  position: fixed;
  z-index: 65;
  transform: translate(-50%, -50%);
  font: 800 15px/1 Georgia, serif;
  color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  animation: dmg-rise 1.05s ease-out forwards;
}
.dmg-num.big {
  font-size: 26px;
  color: #ffd84a;
  text-shadow: 0 2px 0 #5a3a08, 0 0 10px rgba(255, 180, 40, 0.9);
}
.dmg-num.hurt {
  color: #ff6a5a;
}
@keyframes dmg-rise {
  0% {
    opacity: 0;
    transform: translate(-50%, -20%) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1.25);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -260%) scale(1);
  }
}

/* Besturing in het kort, boven de actiebalk. */
.controls-hint {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 14px;
  font-size: 13px;
  white-space: nowrap;
  border-color: #e8c24a;
  animation: rc-in 0.3s ease-out;
}
.controls-hint kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 4px;
  margin: 0 1px;
  border-radius: 4px;
  border: 1px solid rgba(232, 194, 74, 0.6);
  background: rgba(0, 0, 0, 0.35);
  font: 700 11px/1.3 inherit;
  text-align: center;
}
.controls-hint button {
  padding: 2px 8px;
}

/* Questlog-venster (Q): Verhaal, Dorp, Avontuur. */
#quest-log {
  position: fixed;
  z-index: 30;
  left: 50%;
  top: calc(var(--topbar, 56px) + 20px);
  transform: translateX(-50%);
  width: min(560px, calc(100vw - 24px));
  max-height: calc(100vh - var(--topbar, 56px) - 150px);
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  animation: rc-in 0.25s ease-out;
}
#quest-log .ql-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(232, 194, 74, 0.3);
}
#quest-log .ql-head b {
  font: 700 17px/1.2 Georgia, serif;
  color: #f3d48a;
}
#quest-log .ql-tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
#quest-log .ql-tabs button.on {
  border-color: #ffe14a;
  background: rgba(232, 194, 74, 0.2);
}
#quest-log .ql-body {
  padding: 10px 14px 14px;
  overflow-y: auto;
}
#quest-log h4 {
  margin: 10px 0 6px;
  font: 700 15px/1.2 Georgia, serif;
  color: #f3d48a;
}
#quest-log .ql-chap {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
#quest-log .ql-intro {
  font: italic 14px/1.45 Georgia, serif;
  opacity: 0.9;
}
#quest-log .ql-done {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#quest-log .ql-done span {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(111, 211, 111, 0.12);
  font-size: 12px;
}
/* Tracker: dorpsopdrachten met beloning. */
#quest-tracker .ql.village .rw {
  display: block;
  font-size: 11px;
  opacity: 0.75;
}
/* Actiebalk: kopjes boven de groepen. */
#actionbar .ab-group {
  position: relative;
  padding-top: 12px;
}
#actionbar .ab-cap {
  position: absolute;
  top: -1px;
  left: 2px;
  font: 700 9.5px/1 inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f3d48a;
  opacity: 0.8;
}

/* Gebeurtenis in de questtracker: tekst, wat het kost en oplevert, en twee kleine knoppen. */
#quest-tracker .ql-event small {
  display: block;
  color: #d8c9a4;
  font-size: 11.5px;
  margin: 1px 0 4px;
}
#quest-tracker .ql-event .qe-acts {
  display: flex;
  gap: 6px;
}
#quest-tracker .ql-event .qe-acts button {
  padding: 3px 10px;
  border-radius: 7px;
  border: 1px solid rgba(232, 194, 74, 0.45);
  background: #2a2012;
  color: #f6ecd2;
  font-size: 12px;
  cursor: pointer;
}
#quest-tracker .ql-event .qe-acts button.on {
  background: #b9852f;
  color: #1c150b;
  font-weight: 700;
}
#quest-tracker .ql-event .qe-acts button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Actie-RPG (concept C): geen bouwspel meer in beeld. Geen grondstoffen, bouwmenu of dorpspanelen. */
body.rpg #goods,
body.rpg #pop,
body.rpg #left .tools,
body.rpg #left .tabs,
body.rpg #left .fly,
body.rpg #right,
body.rpg [data-act="army"] {
  display: none !important;
}
.char-sheet .cs-bag {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.char-sheet .cs-item {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  grid-template-rows: auto auto;
  column-gap: 6px;
  align-items: center;
  padding: 4px 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
}
.char-sheet .cs-item > span {
  grid-row: span 2;
  font-size: 18px;
}
.char-sheet .cs-item b {
  font-size: 12.5px;
}
.char-sheet .cs-item small {
  grid-column: 2;
  font-size: 11px;
  opacity: 0.85;
}
.char-sheet .cs-item small .up {
  color: #9fe39f;
  font-style: normal;
  font-weight: 700;
}
.char-sheet .cs-item button {
  grid-row: span 2;
  padding: 3px 8px;
  border-radius: 7px;
  border: 1px solid rgba(232, 194, 74, 0.45);
  background: #2a2012;
  color: #f6ecd2;
  font-size: 12px;
  cursor: pointer;
}
.char-sheet .cs-item button.on {
  background: #b9852f;
  color: #1c150b;
  font-weight: 700;
}

/* Minimap (actie-RPG): rond, rechtsboven onder de bovenbalk. */
#minimap {
  position: fixed;
  top: 64px;
  right: 14px;
  width: 168px;
  height: 168px;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55);
  cursor: pointer;
  z-index: 30;
  display: none;
}
body.rpg #minimap {
  display: block;
}

/* Doelwitframe (zoals in WoW): rechts naast het heldenframe. */
#target-frame {
  position: fixed;
  top: 74px;
  left: 372px;
  min-width: 200px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 90, 74, 0.6);
  background: #1c150b;
  color: #f6ecd2;
  z-index: 30;
  cursor: pointer;
  font-size: 13px;
}
#target-frame b {
  display: block;
  color: #ff9a8a;
}
#target-frame .tf-bar {
  display: block;
  height: 8px;
  margin: 5px 0 3px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
#target-frame .tf-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(#e2513f, #a52a1d);
}
#target-frame small {
  opacity: 0.8;
}

/* Winkels in de havenstad (handelaar, smid, havenmeester). */
.shop-panel {
  position: fixed;
  top: 90px;
  right: 200px;
  width: 360px;
  max-height: 70vh;
  overflow-y: auto;
  padding: 14px 16px;
  border-radius: 14px;
  background: #1c150b;
  border: 1px solid rgba(232, 194, 74, 0.5);
  color: #f6ecd2;
  z-index: 40;
}
.shop-panel h3 {
  margin: 0 24px 4px 0;
  font: 700 17px/1.2 Georgia, serif;
  color: #f3d48a;
}
.shop-panel h3 small {
  font: 400 12px system-ui;
  color: #d8c9a4;
  margin-left: 6px;
}
.shop-panel h4 {
  margin: 10px 0 4px;
  font: 700 13px/1.2 Georgia, serif;
  color: #f3d48a;
}
.shop-panel .shop-gold {
  font-weight: 700;
  margin-bottom: 6px;
}
.shop-panel .desc {
  font-size: 12px;
  opacity: 0.85;
  font-style: italic;
}
.shop-panel .shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 6px;
  margin: 3px 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 12.5px;
}
.shop-panel .shop-row small {
  display: block;
  opacity: 0.8;
  font-size: 11px;
}
.shop-panel .shop-row .up {
  color: #9fe39f;
  font-style: normal;
  font-weight: 700;
}
.shop-panel button {
  flex: none;
  padding: 4px 10px;
  border-radius: 7px;
  border: 1px solid rgba(232, 194, 74, 0.5);
  background: #b9852f;
  color: #1c150b;
  font-weight: 700;
  cursor: pointer;
}
.shop-panel button:disabled {
  opacity: 0.45;
  cursor: default;
}
.shop-panel .cs-x {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #f6ecd2;
}

/* Zonenaam (actie-RPG): waar je held nu is, onder de minimap. */
#zone {
  position: fixed;
  top: 238px;
  right: 14px;
  width: 168px;
  text-align: center;
  font: 700 12.5px/1.3 Georgia, serif;
  color: #f3d48a;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  z-index: 30;
  display: none;
}
#zone small {
  display: block;
  font: 400 11px system-ui;
  color: #d8c9a4;
}
body.rpg #zone {
  display: block;
}

/* Actie-RPG op een telefoon: joystick linksonder, vechtknoppen rechtsonder, geen bouwbalk. */
#joy {
  position: fixed;
  left: 16px;
  bottom: 18px;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28, 21, 11, 0.55) 0%, rgba(28, 21, 11, 0.75) 100%);
  border: 2px solid rgba(232, 194, 74, 0.6);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  touch-action: none;
  z-index: 35;
}
#joy i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3d48a, #b9852f);
  border: 2px solid #5a3a10;
  pointer-events: none;
}
body.rpg-mob #mtabs,
body.rpg-mob #fabs,
body.rpg-mob #left,
body.rpg-mob .controls-hint {
  display: none !important;
}
body.rpg-mob #actionbar {
  position: fixed;
  right: 8px;
  bottom: 10px;
  left: 152px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: flex-end;
  gap: 6px;
  z-index: 35;
}
body.rpg-mob #actionbar .ab-group {
  display: contents;
}
body.rpg-mob #actionbar .ab-cap,
body.rpg-mob #actionbar kbd,
body.rpg-mob #actionbar .ab-t {
  display: none;
}
body.rpg-mob #actionbar button {
  min-width: 0;
  width: 50px;
  height: 50px;
  padding: 0;
  border-radius: 50%;
  touch-action: manipulation;
}
body.rpg-mob #actionbar button .ab-ic {
  font-size: 22px;
}
body.rpg-mob #actionbar button[data-ab='hit'] {
  width: 64px;
  height: 64px;
}
body.rpg-mob #actionbar button[data-ab='hit'] .ab-ic {
  font-size: 28px;
}
body.rpg-mob #minimap {
  top: 58px;
  right: 8px;
  width: 104px;
  height: 104px;
}
body.rpg-mob #zone {
  top: 166px;
  right: 6px;
  width: 112px;
  font-size: 11px;
}
body.rpg-mob #target-frame {
  top: auto;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 170px;
}
body.rpg-mob .shop-panel {
  top: auto;
  left: 8px;
  right: 8px;
  bottom: 150px;
  width: auto;
  max-height: 52vh;
}
body.rpg-mob #quest-tracker {
  width: min(220px, 52vw);
}

/* "ROLL!": een klap komt eraan. */
#roll-prompt {
  position: fixed;
  left: 50%;
  top: 38%;
  transform: translate(-50%, -50%) scale(0.8);
  font: 900 46px/1 Georgia, serif;
  color: #ffe14a;
  text-shadow: 0 0 18px rgba(255, 90, 60, 0.9), 0 3px 6px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s, transform 0.1s;
  z-index: 45;
}
#roll-prompt small {
  font: 700 16px system-ui;
  color: #fff;
  vertical-align: middle;
}
#roll-prompt.on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.shop-panel .shop-row.goal {
  border: 1px solid #ffe14a;
  box-shadow: 0 0 10px rgba(255, 225, 74, 0.45);
}

/* Interactie-hint (E): onderin, boven de actiebalk. */
#interact-prompt {
  position: fixed;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  padding: 7px 14px;
  border-radius: 12px;
  border: 1px solid #e8c24a;
  background: #1c150b;
  color: #f6ecd2;
  font: 600 14px system-ui;
  box-shadow: 0 0 14px rgba(232, 194, 74, 0.35);
  cursor: pointer;
  z-index: 36;
}
#interact-prompt kbd {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 4px;
  border-radius: 5px;
  background: #e8c24a;
  color: #1c150b;
  font: 700 12px system-ui;
}
body.rpg-mob #interact-prompt {
  bottom: 196px;
  font-size: 16px;
  padding: 10px 18px;
}

/* Inventory en Equipment (zoals in RuneScape): rechtsonder, boven de actiebalk. */
.rs-panel {
  position: fixed;
  right: 14px;
  bottom: 96px;
  width: 236px;
  padding: 8px;
  border-radius: 12px;
  background: #2a2216;
  border: 2px solid #5a4628;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  color: #f6ecd2;
  z-index: 38;
}
.rs-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.rs-tabs button {
  flex: 1;
  padding: 4px;
  border-radius: 7px;
  border: 1px solid #5a4628;
  background: #3a2f1e;
  font-size: 16px;
  cursor: pointer;
}
.rs-tabs button.on {
  background: #6a4f22;
  border-color: #e8c24a;
}
.rs-tabs button[data-bx] {
  flex: 0 0 32px;
  color: #f6ecd2;
  font-size: 13px;
}
.rs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.rs-slot {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: #3a2f1e;
  border: 2px solid var(--rc, #4a3c26);
  font-size: 24px;
  cursor: pointer;
}
.rs-slot.empty {
  border-color: #3f3322;
  cursor: default;
}
.rs-slot.pick {
  box-shadow: 0 0 0 2px #ffe14a;
}
.rs-slot em {
  position: absolute;
  left: 4px;
  top: 1px;
  font: 700 11px system-ui;
  font-style: normal;
  color: #ffe14a;
  text-shadow: 0 1px 2px #000;
}
.rs-slot i {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid #000;
}
.rs-slot .ghost {
  opacity: 0.25;
  filter: grayscale(1);
}
.rs-doll {
  display: grid;
  grid-template-columns: repeat(3, 56px);
  gap: 6px;
  justify-content: center;
  padding: 6px 0;
}
.rs-stats {
  display: grid;
  gap: 2px;
  font-size: 12px;
  padding: 4px 6px;
}
.rs-info {
  margin-top: 6px;
  padding: 6px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.3);
  font-size: 12px;
}
.rs-info b {
  display: block;
}
.rs-info small {
  display: block;
  opacity: 0.85;
}
.rs-info .up {
  color: #9fe39f;
  font-style: normal;
  font-weight: 700;
}
.rs-info span {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}
.rs-info button {
  padding: 3px 10px;
  border-radius: 7px;
  border: 1px solid rgba(232, 194, 74, 0.5);
  background: #3a2f1e;
  color: #f6ecd2;
  font-weight: 700;
  cursor: pointer;
}
.rs-info button.on {
  background: #b9852f;
  color: #1c150b;
}
body.rpg-mob .rs-panel {
  right: 8px;
  left: 8px;
  width: auto;
  bottom: 196px;
  max-height: 55vh;
  overflow-y: auto;
}

/* Actie-RPG: meer diepte. Bovenin een zachte nevel (verte), aan de randen iets donkerder (vignet). */
body.rpg #game::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(170, 200, 230, 0.22) 0%, rgba(170, 200, 230, 0.08) 28%, rgba(0, 0, 0, 0) 50%),
    radial-gradient(ellipse at 50% 58%, rgba(0, 0, 0, 0) 55%, rgba(5, 10, 25, 0.38) 100%);
  z-index: 1;
}

/* Klasse kiezen (level 5). */
.class-pick {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 94vw);
  padding: 18px;
  border-radius: 16px;
  background: #1c150b;
  border: 2px solid #e8c24a;
  color: #f6ecd2;
  z-index: 60;
  text-align: center;
}
.class-pick h3 {
  margin: 0 0 4px;
  font: 700 22px/1.2 Georgia, serif;
  color: #f3d48a;
}
.cp-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.cp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #5a4628;
  background: #2a2216;
  color: #f6ecd2;
  cursor: pointer;
  text-align: center;
}
.cp-card:hover {
  border-color: #ffe14a;
  box-shadow: 0 0 14px rgba(255, 225, 74, 0.4);
}
.cp-card .cp-ic {
  font-size: 34px;
}
.cp-card b {
  font: 700 17px Georgia, serif;
  color: #f3d48a;
}
.cp-card small {
  font-size: 12px;
  opacity: 0.85;
}
.cp-card ul {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 12.5px;
}
.cp-later {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid #5a4628;
  background: #2a2216;
  color: #f6ecd2;
  cursor: pointer;
}