:root {
  --village-tint: #000;
  --ui-panel: #000;
  --ui-button: #000;
  --ui-hover: #000;
  --ui-border: #625e55;
  --ui-highlight: #b6ab91;
  color-scheme: dark;
  font-family: system-ui, sans-serif;
  color: #f2e8ce;
  background: #000;
}
@supports (background: color-mix(in srgb, black, white)) {
  :root {
    --ui-panel: color-mix(in srgb, var(--village-tint) 8%, black);
    --ui-button: color-mix(in srgb, var(--village-tint) 13%, black);
    --ui-hover: color-mix(in srgb, var(--village-tint) 20%, black);
    --ui-border: color-mix(in srgb, var(--village-tint) 26%, #858073);
    --ui-highlight: color-mix(in srgb, var(--village-tint) 26%, #eadcb9);
  }
}
* { box-sizing: border-box; }
html, body, main { margin: 0; width: 100%; height: 100%; overflow: hidden; }
main { position: relative; }
canvas { display: block; width: 100%; height: 100%; background: #000; touch-action: none; cursor: grab; }
canvas:active { cursor: grabbing; }
canvas:focus-visible { outline: 2px solid #f0d594; outline-offset: -3px; }
@media (any-pointer: fine) {
  html, html *, dialog::backdrop { cursor: var(--viewer-cursor, auto) !important; }
}
.peer-cursors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.peer-cursors img { position: absolute; top: 0; left: 0; width: 24px; height: 28px; }
.loading {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: #000;
  text-align: center;
  font-size: 14px;
}
.loading[hidden], html[lang="en"] .loading [lang="es"], html[lang="es"] .loading [lang="en"] { display: none; }
.loading svg {
  display: block;
  width: clamp(70px, 18vw, 96px);
  margin: 0 auto 10px;
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: loading-spin 1s linear infinite;
}
@keyframes loading-spin { to { transform: rotate(360deg); } }
.hud, .controls { position: absolute; inset-inline: 12px; pointer-events: none; }
.hud {
  top: max(12px, env(safe-area-inset-top));
  display: flex;
  right: 64px;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.hud[hidden], .resource[hidden], .round-clock[hidden] { display: none; }
.resources, .world-clock {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 8px;
  background: var(--ui-panel);
  border: 1px solid var(--ui-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px #0006;
}
.resources { flex-wrap: wrap; column-gap: 12px; }
.world-clock { white-space: nowrap; }
.resource { display: flex; align-items: center; gap: 4px; pointer-events: auto; }
.hud svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #e8cf92;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.camera, .towns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.controls {
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}
main[inert] .controls { visibility: hidden; }
button {
  pointer-events: auto;
  cursor: pointer;
  border: 1px solid var(--ui-border);
  border-radius: 7px;
  background: var(--ui-button);
  color: inherit;
  padding: 8px 11px;
  min-height: 42px;
  font: inherit;
  font-size: 13px;
}
button:hover, button:focus-visible { background: var(--ui-hover); border-color: var(--ui-highlight); }
button:focus-visible, #settings select:focus-visible, .menu-language select:focus-visible { outline: 2px solid var(--ui-highlight); outline-offset: 2px; }
button:disabled { opacity: .55; cursor: default; }

.settings-button {
  position: fixed;
  z-index: 4;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 8px;
}
.settings-button svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
#settings {
  width: min(360px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  padding: 22px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-panel);
  color: inherit;
  box-shadow: 0 12px 38px #0009;
}
#settings[open] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 12px; }
#settings::backdrop { background: #000b; }
#settings h2, #settings form { grid-column: 1 / -1; }
#settings h2 { margin: 0 0 7px; font: 700 24px Georgia, serif; }
#settings select, .menu-language select { min-height: 40px; padding: 6px 8px; border: 1px solid var(--ui-border); border-radius: 7px; color: inherit; background: var(--ui-button); font: inherit; }
#settings select:hover, .menu-language select:hover { background: var(--ui-hover); border-color: var(--ui-highlight); }
#settings form { margin-top: 8px; }
#settings form button { width: 100%; }

.camera button { min-width: 42px; }
.current-town {
  display: grid;
  place-items: center;
  width: 46px;
  height: 56px;
  padding: 0;
  background: var(--ui-button);
  border: 1px solid var(--ui-border);
  border-radius: 7px;
}
.current-town[hidden] { display: none; }
.current-town .banner { width: auto; height: 48px; }
.town-map-control { position: relative; display: flex; align-items: center; gap: 6px; --map-town: var(--village-tint); }
.town-map-tools { display: flex; gap: 6px; }
.town-map-tools[hidden], .town-map-legend[hidden] { display: none; }
.town-map-tools button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
.town-map-tools button[aria-pressed="true"], .current-town[aria-expanded="true"] { background: var(--ui-hover); border-color: var(--ui-highlight); }
.town-map-tools svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.town-map-tools .zone-tile { fill: var(--village-tint); }
.town-map-legend {
  position: absolute; bottom: calc(100% + 6px); left: 0; display: flex; flex-wrap: wrap; gap: 6px 11px;
  width: max-content; max-width: min(260px, calc(100vw - 32px)); padding: 8px 10px;
  border: 1px solid var(--ui-border); border-radius: 8px; background: var(--ui-panel); font-size: 12px;
}
.town-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.town-map-legend b { display: grid; place-items: center; min-width: 12px; min-height: 12px; border-radius: 3px; color: var(--map-key); }
.town-map-legend b:empty { background: var(--map-key); }
@media (prefers-reduced-motion: no-preference) { .town-map-tools:not([hidden]) { animation: town-map-in .16s ease-out both; } }
@keyframes town-map-in { from { opacity: 0; transform: translateX(-6px); } }
@media (max-width: 410px) {
  .town-map-legend { bottom: calc(100% + 56px); }
}
@media (max-width: 410px) {
  .hud { font-size: 12px; }
  .resources { column-gap: 7px; }
  .controls { align-items: flex-start; flex-direction: column-reverse; }
  .camera { align-self: flex-end; }
}
.entry, .defeat {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  align-items: safe center;
  overflow: auto;
  background: #000;
  padding: 20px 12px max(64px, calc(env(safe-area-inset-bottom) + 52px));
  opacity: 1;
  visibility: visible;
}
.entry {
  transition: opacity .55s ease, visibility .55s;
}
.entry.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.entry[hidden], .defeat[hidden], .fallen-banner[hidden] { display: none; }
.menu-language {
  position: fixed;
  z-index: 1;
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
}
.menu-language svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.entry-content, .round-menu { max-width: 100%; text-align: center; }
.entry-title { margin: 0 0 6px; color: #bba37e; font: 700 clamp(17px, 3vw, 22px) Georgia, serif; }
.entry h2, .defeat h2 { margin: 0 0 22px; color: #f5e7c7; font: 700 clamp(25px, 5vw, 42px) Georgia, serif; }
#entry-status { color: #d4c5a8; min-height: 1.5em; margin: 12px 0 0; font-size: 13px; }
.towns { justify-content: center; gap: clamp(4px, 2vw, 22px); }
.banner-button {
  display: grid;
  place-items: center;
  min-width: 0;
  width: clamp(72px, 26vw, 144px);
  padding: 6px 3px 10px;
  background: transparent;
  border-color: transparent;
}
.banner-button:enabled:is(:hover, :focus-visible) { background: var(--ui-hover); }
.banner { width: 100%; max-width: 108px; height: auto; }
.banner-cloth { fill: var(--town-color, #596850); }
.banner-border { fill: none; stroke: #f1d797; stroke-width: 1.4; }
.banner-rail { stroke: #ccad76; stroke-width: 3; }
.banner-finial { fill: #ccad76; }
.banner-emblem { fill: #fff2cb; fill-rule: evenodd; }
.defeat { z-index: 3; animation: darken .35s ease-out both; }
.round-menu { text-align: center; }
.round-heading {
  --clock-size: clamp(82px, 20vw, 108px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 15px;
}
.next-round .round-heading { min-height: var(--clock-size); }
.round-heading[hidden], .round-clock[hidden] { display: none; }
.defeat .defeat-notice h2 { margin: 0 0 6px; font-size: clamp(19px, 4vw, 30px); }
.defeat-notice p { margin: 0; color: #d4c5a8; font-size: 13px; }
.round-clock {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--clock-size);
  color: #f5e7c7;
  font: 700 clamp(24px, 6vw, 33px) Georgia, serif;
  font-variant-numeric: tabular-nums;
}
.round-clock > * { grid-area: 1 / 1; }
.round-clock svg { width: 100%; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.round-track { stroke: #665a41; }
#round-progress { stroke: #e8cf92; stroke-dasharray: 30; }
.round-arrow { stroke: #e8cf92; }
.next-round .banner-button { width: clamp(58px, 20vw, 102px); }
.next-round .banner { max-width: 76px; }
.round-menu .banner-button[aria-pressed="true"] { background: var(--ui-hover); border-color: var(--ui-highlight); }
.round-menu .banner-button[aria-pressed="true"]:disabled { opacity: 1; }
.towns:has(> :nth-child(4)) {
  --town-width: min(13vw, 102px);
  --town-gap: clamp(4px, 1.1vw, 14px);
  max-width: calc(6 * var(--town-width) + 5 * var(--town-gap) + 1px);
  margin-inline: auto;
  gap: var(--town-gap);
}
.next-round .towns:has(> :nth-child(4)) { --town-width: min(13vw, 88px); }
.towns:has(> :nth-child(4)) > .banner-button { width: var(--town-width); padding: 4px 3px 6px; }
@media (max-width: 560px) {
  .towns:has(> :nth-child(4)) { --town-width: 21vw; max-width: calc(4 * var(--town-width) + 3 * var(--town-gap) + 1px); }
  .next-round .towns:has(> :nth-child(4)) { --town-width: min(21vw, 72px); }
}
@media (max-height: 500px) {
  .towns:has(> :nth-child(4)) .banner { width: auto; max-width: 100%; height: min(20vh, 74px); }
  .round-heading { --clock-size: min(19vh, 82px); margin-bottom: 6px; }
}
.screen-reader-only, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fallen-banner {
  display: grid;
  place-items: center;
  width: min(42vw, 188px);
}
.fallen-banner .banner {
  grid-area: 1 / 1;
  max-width: none;
  animation: break-banner 1.9s ease both;
}
.banner-left {
  --split: -7px;
  --fall: -46px;
  --tilt: -24deg;
  clip-path: polygon(0 0, 50% 0, 54% 22%, 47% 39%, 53% 52%, 47% 68%, 52% 81%, 49% 100%, 0 100%);
}
.banner-right {
  --split: 7px;
  --fall: 46px;
  --tilt: 24deg;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 49% 100%, 52% 81%, 47% 68%, 53% 52%, 47% 39%, 54% 22%);
}
@keyframes darken { from { background: transparent; } }
@keyframes break-banner {
  0%, 12% { opacity: 0; }
  30%, 50% { opacity: 1; transform: none; }
  62% { opacity: 1; transform: translateX(var(--split)); }
  100% { opacity: 0; transform: translate(var(--fall), 64px) rotate(var(--tilt)); }
}
@keyframes show-broken-banner {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}
.building-panel {
  position: absolute;
  top: 96px;
  right: 12px;
  width: min(320px, calc(100% - 24px));
  max-height: calc(100dvh - 160px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 12px 12px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-panel);
  box-shadow: 0 4px 16px #0006;
}
.building-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.building-heading h2 { margin: 0; font: 700 17px Georgia, serif; }
#close-building, #buildingTooltipClose { min-width: 38px; min-height: 38px; padding: 2px; font-size: 22px; line-height: 1; }
#building-status { margin: 7px 0 0; font-size: 13px; }
.building-health { display: flex; align-items: center; gap: 7px; margin: 2px 0 9px; font-size: 12px; }
.building-health > svg { width: 16px; height: 16px; color: #dba4a1; }
.building-health strong { white-space: nowrap; font-variant-numeric: tabular-nums; }
.building-health[data-critical="true"] { color: #f09589; }
.building-health .building-name { display: none; }
.building-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 7px; }
.building-slot {
  --fill: 0%;
  position: relative;
  min-width: 0;
  min-height: 44px;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  touch-action: manipulation;
}
.building-slot[aria-expanded="true"] { background: var(--ui-hover); border-color: var(--ui-highlight); }
.slot-art-dark, .slot-art-lit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.slot-art-dark { opacity: .52; }
.slot-art-lit { clip-path: inset(calc(100% - var(--fill)) 0 0 0); transition: clip-path .2s linear; }
.slot-art-dark > img, .slot-art-lit > img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
.slot-art-dark > svg, .slot-art-lit > svg { width: 65%; height: 65%; }
.building-slot[data-state="locked"] .slot-art-dark { opacity: .22; filter: grayscale(1); }
.building-slot[data-state="complete"] .slot-art-dark { opacity: .88; }
.slot-fill-line {
  position: absolute;
  inset-inline: 0;
  bottom: var(--fill);
  height: 1px;
  background: #f1d797;
  display: none;
  pointer-events: none;
  transition: bottom .2s linear;
}
.building-slot[data-state="active"] .slot-fill-line, .building-slot[data-state="paused"] .slot-fill-line { display: block; }
.slot-lock, .slot-check, .slot-pause, .slot-kind, .slot-count { position: absolute; place-items: center; pointer-events: none; }
.slot-lock { display: none; inset: 0; color: #ddd4bd; }
.slot-lock > svg { width: 18px; height: 18px; }
.slot-check, .slot-pause, .slot-count { display: none; right: 3px; border-radius: 4px; background: var(--ui-panel); }
.slot-check, .slot-pause { bottom: 3px; width: 16px; height: 16px; }
.slot-check > svg, .slot-pause > svg { width: 12px; height: 12px; }
.slot-count:not([hidden]) { display: grid; top: 3px; padding: 1px 3px; font-size: 10px; }
.slot-kind { display: grid; top: 4px; left: 4px; color: #e2cc97; }
.slot-kind > svg { width: 10px; height: 10px; }
.building-slot[data-state="locked"] .slot-lock,
.building-slot[data-state="complete"] .slot-check,
.building-slot[data-state="paused"] .slot-pause { display: grid; }
.slot-trade-pair { position: relative; display: grid; place-items: center; width: 68%; }
.slot-trade-pair > svg { width: 100%; }
.slot-trade-pair > span { position: absolute; right: 0; bottom: 0; display: grid; place-items: center; background: var(--ui-panel); border-radius: 4px; padding: 2px; }
.slot-trade-pair > span > svg { width: 11px; height: 11px; }
.building-tooltip {
  position: fixed;
  z-index: 1;
  width: min(320px, calc(100vw - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 13px;
  border: 1px solid var(--ui-border);
  border-radius: 10px;
  background: var(--ui-panel);
  box-shadow: 0 8px 24px #0008;
  font-size: 12px;
}
#buildingTooltipClose { position: absolute; top: 6px; right: 6px; }
.building-tooltip-heading { display: flex; align-items: center; gap: 9px; padding-right: 38px; min-height: 34px; }
.building-tooltip-art { display: grid; place-items: center; width: 36px; height: 36px; flex: none; }
.building-tooltip-art > img, .building-tooltip-art > svg { width: 100%; height: 100%; object-fit: contain; }
.building-tooltip-state { display: block; margin-top: 3px; color: #d0c6ad; }
.building-tooltip-cost { display: flex; flex-wrap: wrap; gap: 8px; margin: 9px 0; }
.building-tooltip-cost > span { display: flex; align-items: center; gap: 4px; }
.building-tooltip-cost svg { width: 16px; height: 16px; color: #e8cf92; }
.building-tooltip-stats { margin: 6px 0; }
.building-tooltip-stats > div { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px solid #ffffff17; }
.building-tooltip-stats dt, .building-tooltip-note, .building-tooltip-reasons { color: #d0c6ad; }
.building-tooltip-stats dd { margin: 0; text-align: right; }
.building-tooltip-note, .building-tooltip-reasons, .building-tooltip-progress { margin: 8px 0 0; }
.building-tooltip-reasons { padding-left: 17px; }
.building-tooltip-progress .detail-track { height: 4px; margin: 5px 0; background: #ffffff20; }
.building-tooltip-progress .detail-track i { display: block; height: 100%; background: #e8cf92; }
@media (prefers-reduced-motion: reduce) {
  .entry, .slot-art-lit, .slot-fill-line { transition: none; }
  .defeat { animation: none; }
  .loading svg { animation: none; }
  .fallen-banner .banner { transform: translateX(var(--split)); animation: show-broken-banner .8s ease both; }
}