@import url("/theme.css");
:root {
  font-family:
    Inter,
    Segoe UI,
    Arial,
    sans-serif;
  color: var(--ui-text);
  background: var(--ui-surface);
  font-synthesis: none;
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-border-subtle);
  --accent: var(--ui-accent);
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header {
  height: 98px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5vw;
  background: var(--ui-surface);
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 2px;
}
.mark {
  font-size: 32px;
  background: var(--ink);
  color: var(--ui-warning);
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-radius: 12px;
}
.brand small {
  display: block;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.7px;
  margin-top: 6px;
}
#identity {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
}
main {
  max-width: 1450px;
  margin: auto;
  padding: 40px 5vw 70px;
}
#auth {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 8vw;
  min-height: 75vh;
  align-items: center;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--accent);
}
h1 {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -2px;
}
.intro h1 {
  font-size: clamp(42px, 5vw, 76px);
  line-height: 1.07;
  margin: 24px 0;
}
.intro p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted);
  max-width: 440px;
}
.pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.pills span {
  border: 1px solid var(--ui-border);
  border-radius: 24px;
  padding: 9px 12px;
  font-size: 11px;
}
.card {
  background: var(--ui-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px;
}
.login {
  padding: 40px;
  box-shadow: 0 12px 35px #284e4710;
}
h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  font-weight: 400;
  margin: 10px 0 22px;
  letter-spacing: -0.5px;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin: 18px 0;
}
input,
select,
textarea {
  display: block;
  width: 100%;
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: 7px;
  padding: 12px;
  margin-top: 9px;
  color: var(--ink);
  font: inherit;
}
textarea {
  min-height: 220px;
  font: 12px monospace;
}
button {
  border: 1px solid transparent;
  background: var(--accent);
  color:var(--ui-text);
  border-radius: 7px;
  padding: 11px 16px;
  cursor: pointer;
  font:
    600 12px Segoe UI,
    sans-serif;
}
button:hover {
  filter: brightness(0.94);
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--ui-border);
}
.actions {
  display: flex;
  gap: 10px;
  margin-top: 25px;
}
.muted {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
}
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.toolbar h1 {
  font-size: 40px;
  margin: 12px 0 28px;
}
.balance {
  text-align: right;
}
.balance small {
  display: block;
  letter-spacing: 1.5px;
  font-size: 10px;
  color: var(--muted);
}
.balance strong {
  font-family: Georgia, serif;
  font-size: 34px;
  display: block;
  margin-top: 6px;
}
nav {
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  margin: 0 0 25px;
  padding-bottom: 12px;
}
nav button {
  background: none;
  color: var(--muted);
}
nav button.selected {
  background: var(--ui-surface);
  color: var(--accent);
}
.quiet {
  margin-left: auto;
}
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 22px;
}
.world-card {
  background: var(--ui-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  align-self: start;
}
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.world-card .section-heading {
  padding: 25px 25px 0;
}
.section-heading h2 {
  margin-bottom: 22px;
}
canvas {
  display: block;
  width: 100%;
  background: var(--ui-surface);
  outline: none;
  touch-action: none;
}
.status {
  font-size: 10px;
  color: var(--accent);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  border-radius: 30px;
  padding: 7px 10px;
}
.map-footer {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--muted);
  padding: 15px 20px;
}
aside {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.inventory-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ui-border);
}
.build-option {
  display: flex;
  text-align: left;
  width: 100%;
  align-items: center;
  gap: 12px;
  background: var(--ui-surface);
  color: var(--ink);
  border: 1px solid var(--line);
  margin-bottom: 10px;
  padding: 10px;
}
.build-option img {
  width: 45px;
  height: 52px;
}
.build-option small {
  display: block;
  color: var(--muted);
  margin-top: 6px;
  font-weight: 400;
}
.holdings {
  grid-column: 1/-1;
}
#buildings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}
.building {
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 18px;
}
.building h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.building p {
  font-size: 12px;
  color: var(--muted);
}
.building .actions {
  margin-top: 12px;
  flex-wrap: wrap;
}
.building input {
  padding: 7px;
  width: 75px;
  margin: 0;
}
.building button {
  padding: 8px 10px;
}
progress {
  width: 100%;
  accent-color: var(--accent);
}
#toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color:var(--ui-text);
  box-shadow: 0 5px 25px #0002;
  border-radius: 9px;
  padding: 14px 24px;
  max-width: 90vw;
  z-index: 10;
  display: none;
}
footer {
  padding: 22px 5vw;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--muted);
}
[hidden] {
  display: none !important;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
th,
td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 12px 8px;
}
td input {
  width: 80px;
  padding: 7px;
  display: inline-block;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 11px;
  background: var(--ui-surface);
  padding: 15px;
  max-height: 280px;
  overflow: auto;
}
.module-card {
  border-top: 1px solid var(--line);
  padding: 18px 0;
}
.module-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}
.inline-form {
  display: flex;
  gap: 12px;
  align-items: end;
  flex-wrap: wrap;
}
.inline-form label {
  flex: 1;
  min-width: 120px;
}
.inline-form button {
  margin-bottom: 18px;
}
a {
  color: var(--accent);
}
@media (max-width: 900px) {
  #auth {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .panel {
    grid-template-columns: 1fr;
  }
  aside {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .toolbar h1 {
    font-size: 31px;
  }
  header {
    padding: 0 5vw;
  }
  .brand {
    font-size: 14px;
  }
  #identity {
    font-size: 9px;
  }
  main {
    padding-top: 25px;
  }
  nav {
    gap: 0;
    flex-wrap: wrap;
  }
  .login {
    padding: 26px;
  }
}
@media (max-width: 540px) {
  aside {
    grid-template-columns: 1fr;
  }
  .intro h1 {
    font-size: 49px;
  }
  .balance strong {
    font-size: 26px;
  }
  footer span {
    display: none;
  }
  .map-footer {
    font-size: 8px;
  }
  th,
  td {
    padding: 8px 4px;
    font-size: 11px;
  }
}
#world {
  height: 600px;
  width: 100%;
  background: var(--ui-surface);
}
body.visual-only #game > :not(#world-panel),
body.visual-only #world-panel > :not(.world-card),
body.visual-only .world-card > :not(#world) { display:none !important; }
body.visual-only #world-panel,body.visual-only .world-card { inset:0; width:100vw; height:100dvh; max-width:none; padding:0; margin:0; }
body.visual-only #world { inset:0; width:100vw; height:100dvh !important; }
#map-data-status {
  padding: 0 18px;
  margin: 0 0 12px;
  font-size: 10px;
}
.maplibregl-ctrl-attrib {
  font-size: 10px;
}
.installation-art {
  object-fit: contain;
  cursor: pointer;
  filter: drop-shadow(0 2px 1px #0003);
}
#property-detail {
  font-size: 12px;
  line-height: 1.6;
}
#property-detail h3 {
  margin: 5px 0;
  font-size: 17px;
}
#property-detail .actions {
  flex-wrap: wrap;
}
#property-detail pre {
  max-height: 180px;
}
#property-detail summary {
  cursor: pointer;
  margin-top: 15px;
}
#property-detail button {
  font-size: 11px;
}
#recenter {
  padding: 4px 8px;
  font-size: 10px;
}
aside {
  max-height: 790px;
  overflow-y: auto;
  padding-right: 3px;
}
@media (max-width: 900px) {
  aside {
    max-height: none;
    overflow: visible;
  }
}
.map-footer {
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 540px) {
  #world {
    height: 440px;
  }
  .maplibregl-ctrl-attrib {
    font-size: 9px;
  }
}
/* Milestone 8: viewport world and floating game HUD. */
:root {
  color-scheme: dark;
  --ink: var(--ui-text);
  --muted: var(--ui-muted);
  --line: var(--ui-border-subtle);
  --accent: var(--ui-accent);
  color: var(--ink);
  background: var(--ui-canvas);
  font-family:
    Segoe UI,
    Arial,
    sans-serif;
  font-size: 13px;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background: var(--ui-canvas);
}
body:has(#game:not([hidden])) {
  overflow: hidden;
  height: 100dvh;
}
body:has(#game:not([hidden])) > header,
body:has(#game:not([hidden])) > footer {
  display: none;
}
#game {
  position: fixed;
  inset: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
#game > .toolbar,
#game > #tabs {
  display: none;
}
#world-panel {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
}
#world-panel > aside {
  display: none;
}
.world-card {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  padding: 0;
}
.world-card > .section-heading,
.world-card > label,
.world-card > select,
.world-card > #map-data-status {
  display: none;
}
#world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100% !important;
  background: transparent;
}
#starfield {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--ui-canvas);
  background-image:
    radial-gradient(1px 1px at 13% 28%, #a6bdcc 70%, transparent),
    radial-gradient(1px 1px at 68% 66%, #b8c9dd 70%, transparent),
    radial-gradient(1px 1px at 46% 80%, #7e9fae 70%, transparent),
    radial-gradient(1px 1px at 87% 12%, #fff 70%, transparent);
  background-size:
    173px 193px,
    271px 239px,
    331px 277px,
    397px 359px;
}
#game {
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--ui-panel) 27%, transparent), transparent 65%);
}
.game-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.game-hud button,
.game-hud nav,
.wallet,
.game-drawer {
  pointer-events: auto;
}
button {
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--ui-border) 7%, transparent);
  border-radius: 9px;
  background: var(--ui-panel);
  color: var(--ui-text);
  font: inherit;
  cursor: pointer;
  padding: 10px 14px;
}
button:hover {
  background: var(--ui-surface);
  border-color: color-mix(in srgb,var(--ui-success) 40%,transparent);
}
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ui-success);
  outline-offset: 3px;
}
button.secondary,
.quiet {
  background: var(--ui-panel);
  color: var(--ui-text);
}
button:disabled {
  opacity: 0.4;
  cursor: default;
}
input,
select,
textarea {
  background: var(--ui-input);
  color: var(--ui-text);
  border: 1px solid color-mix(in srgb, var(--ui-border) 13%, transparent);
  border-radius: 7px;
  min-height: 42px;
  padding: 8px;
  max-width: 100%;
  font: inherit;
}
label {
  color: var(--ui-muted);
  font-size: 12px;
}
a {
  color: var(--ui-accent);
}
h1,
h2,
h3 {
  font-family: inherit;
  letter-spacing: 0;
  color: var(--ui-text);
}
h2 {
  font-size: 19px;
  margin: 8px 0 16px;
}
h3 {
  font-size: 15px;
}
.muted {
  color: var(--muted);
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 1.6px;
  color: var(--ui-muted);
}
.card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  padding: 12px 0;
}
.wallet {
  position: absolute;
  top: max(20px, env(safe-area-inset-top));
  left: max(24px, env(safe-area-inset-left));
  padding: 13px 18px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--ui-input) 73%, transparent);
  backdrop-filter: blur(16px);
  min-width: 245px;
}
#balance {
  font-size: 27px;
  font-weight: 650;
  color: var(--ui-success);
  letter-spacing: -0.7px;
  display: block;
  margin: 3px 0;
}
.wallet-meta {
  display: flex;
  gap: 16px;
  color: var(--ui-muted);
  font-size: 10px;
}
.system-controls {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  top: max(24px, env(safe-area-inset-top));
  display: flex;
  gap: 8px;
}
.system-controls button,
.map-controls button {
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 21px;
  background: color-mix(in srgb, var(--ui-input) 79%, transparent);
  backdrop-filter: blur(12px);
}
.world-caption {
  position: absolute;
  left: 32px;
  bottom: 106px;
  display: grid;
  gap: 8px;
  color: var(--ui-muted);
  font-size: 12px;
}
.world-caption strong {
  font-size: 21px;
  letter-spacing: 0.2px;
  color: var(--ui-text);
  font-weight: 400;
}
.game-dock {
  position: absolute;
  bottom: max(26px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  padding: 7px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-input) 85%, transparent);
  backdrop-filter: blur(20px);
  box-shadow: 0 12px 45px #0007;
}
.game-dock button {
  height: 58px;
  min-width: 64px;
  background: transparent;
  border: 0;
  font-size: 23px;
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 5px 12px;
}
.game-dock button:hover,
.game-dock button[aria-expanded="true"] {
  background: color-mix(in srgb,var(--ui-success) 9%,transparent);
  color: var(--ui-success);
}
.game-dock small {
  font-size: 9px;
  font-weight: 400;
  color: var(--ui-muted);
}
.map-controls {
  position: absolute;
  right: 24px;
  bottom: 110px;
  display: grid;
  gap: 8px;
}
.world-status {
  position: absolute;
  bottom: 15px;
  left: 26px;
  display: flex;
  gap: 14px;
  color: var(--ui-muted);
  font: 10px monospace;
}
.status {
  background: transparent;
  padding: 0;
  color: var(--ui-success);
}
.map-footer {
  position: absolute;
  bottom: 14px;
  right: 190px;
  padding: 0;
  color: var(--ui-muted);
  font: 9px monospace;
}
.map-footer > span:first-child {
  display: none;
}
.maplibregl-ctrl-top-right {
  top: 100px;
  right: 16px;
}
.maplibregl-ctrl-group {
  background: color-mix(in srgb, var(--ui-panel) 80%, transparent) !important;
}
.maplibregl-ctrl-group button {
  width: 42px;
  height: 42px;
}
.maplibregl-ctrl-icon {
  filter: invert(1);
}
.maplibregl-ctrl-attrib {
  background: color-mix(in srgb, var(--ui-input) 75%, transparent) !important;
  color: var(--ui-muted) !important;
  font-size: 9px !important;
}
.maplibregl-ctrl-attrib a {
  color: var(--ui-muted) !important;
}
.maplibregl-popup-content {
  background: var(--ui-panel);
  color: var(--ui-text);
  border-radius: 12px;
}
.maplibregl-popup-tip {
  border-top-color: var(--ui-border-subtle) !important;
}
.game-drawer {
  position: absolute;
  z-index: 6;
  top: 112px;
  right: 24px;
  bottom: 110px;
  width: min(430px, calc(100% - 48px));
  overflow: auto;
  overscroll-behavior: contain;
  background: color-mix(in srgb, var(--ui-input) 93%, transparent);
  backdrop-filter: blur(24px);
  border: 1px solid color-mix(in srgb,var(--ui-accent) 9%,transparent);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 15px 65px #0006;
  animation: panel-enter 0.2s ease-out;
}
.drawer-heading {
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.game-drawer .card {
  padding: 8px 0;
}
.game-drawer #extra-panel {
  padding: 0;
  margin: 0;
}
.game-drawer .holdings {
  grid-column: auto;
}
.game-drawer table {
  display: block;
  overflow: auto;
  width: 100%;
  font-size: 11px;
}
.game-drawer th,
.game-drawer td {
  padding: 8px 5px;
  border-color: color-mix(in srgb, var(--ui-border) 7%, transparent);
}
.game-drawer .inline-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.game-drawer .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.game-drawer .building,
.module-card {
  background: var(--ui-panel);
  border-color: color-mix(in srgb, var(--ui-border) 7%, transparent);
  padding: 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.inventory-row {
  border-color: color-mix(in srgb, var(--ui-border) 7%, transparent);
  padding: 12px 0;
}
.build-option {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: var(--ui-panel);
  margin-bottom: 7px;
}
.build-option img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.build-option small {
  display: block;
  font-size: 10px;
  color: var(--ui-muted);
}
#property-detail pre {
  overflow: auto;
}
#panel-close {
  position: absolute;
  right: 34px;
  top: 121px;
  z-index: 7;
  width: 42px;
  background: var(--ui-panel);
  font-size: 24px;
  padding: 0;
}
.game-drawer .drawer-heading h2 {
  padding-right: 32px;
}
#toast {
  z-index: 20;
  bottom: 110px;
  background: var(--ui-surface);
  color: var(--ui-success);
  max-width: calc(100vw - 32px);
}
@keyframes panel-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#auth {
  min-height: calc(100dvh - 150px);
}
body > header {
  background: var(--ui-input);
  border-color: color-mix(in srgb, var(--ui-border) 7%, transparent);
}
.brand {
  color: var(--ui-text);
}
.mark {
  background: var(--ui-surface);
  color: var(--ui-success);
}
#auth .login {
  background: var(--ui-input);
  padding: 30px;
  border-radius: 18px;
}
body > footer {
  background: var(--ui-input);
  color: var(--ui-muted);
  border-color: color-mix(in srgb, var(--ui-border) 7%, transparent);
}
.pills span {
  background: var(--ui-panel);
  color: var(--ui-muted);
  border-color: color-mix(in srgb, var(--ui-border) 7%, transparent);
}
@media (max-width: 600px) {
  .wallet {
    top: max(12px, env(safe-area-inset-top));
    left: 12px;
    min-width: 0;
    padding: 10px 12px;
  }
  .wallet .eyebrow {
    font-size: 8px;
    letter-spacing: 1px;
  }
  #balance {
    font-size: 22px;
  }
  .wallet-meta {
    gap: 8px;
    font-size: 9px;
  }
  .system-controls {
    top: max(15px, env(safe-area-inset-top));
    right: 12px;
    gap: 4px;
  }
  .system-controls button {
    width: 42px;
    height: 44px;
    font-size: 19px;
  }
  .system-controls button:first-child {
    display: none;
  }
  .world-caption {
    left: 20px;
    bottom: 122px;
  }
  .world-caption strong {
    font-size: 18px;
  }
  .world-caption > span:last-child {
    font-size: 10px;
  }
  .game-dock {
    bottom: max(22px, calc(env(safe-area-inset-bottom) + 8px));
    gap: 1px;
    padding: 5px;
    border-radius: 16px;
  }
  .game-dock button {
    min-width: 59px;
    height: 55px;
    padding: 5px 9px;
  }
  .map-controls {
    right: 12px;
    bottom: 120px;
  }
  .world-status {
    bottom: 5px;
    left: 12px;
    font-size: 8px;
    gap: 8px;
  }
  .map-footer {
    display: none;
  }
  .maplibregl-ctrl-attrib {
    max-width: 230px;
    font-size: 7px !important;
  }
  .maplibregl-ctrl-top-right {
    top: 90px;
    right: 4px;
  }
  .game-drawer {
    top: auto;
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 78px));
    left: 8px;
    right: 8px;
    width: auto;
    max-height: 65dvh;
    padding: 18px;
    border-radius: 18px;
    scrollbar-width: thin;
  }
  #panel-close {
    top: auto;
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 78px));
    right: 16px;
    transform: translateY(-12px);
    background: var(--ui-surface);
  }
  #auth {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  #auth .intro {
    display: none;
  }
  .brand {
    font-size: 14px;
  }
  header {
    height: 76px;
  }
  #auth .login {
    padding: 20px;
  }
  .game-drawer .inline-form {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-drawer {
    animation: none;
  }
}
.world-card {
  height: 100%;
  align-self: stretch;
}
#world canvas {
  background: transparent;
}
#tutorial-screen { position: absolute; inset: 0; z-index: 1; }
#tutorial-screen[hidden] { display: none; }
#tutorial-map { position: absolute; inset: 0; overflow: hidden; }
#drawer-tutorial-guide { z-index: 8; }
#tutorial-guide { padding: 8px 0; }
#tutorial-guide h2 { margin: 5px 0 10px; }
#tutorial-guide p { line-height: 1.5; }
.tutorial-wallet { color: var(--ui-muted); font-size: 13px; }
.tutorial-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tutorial-guide-drawer > #tutorial-exit { margin-top: 10px; }
@media (max-width: 600px) {
  #drawer-tutorial-guide { max-height: 54dvh; }
  #tutorial-guide p { margin: 8px 0; }
  #tutorial-guide .tutorial-actions button { flex: 1 1 100%; }
}
.game-dock {
  margin: 0;
  border: 0;
}
.status {
  border: 0;
}
.maplibregl-canvas:focus-visible {
  outline: 2px solid var(--ui-success);
  outline-offset: -2px;
}
.maplibregl-ctrl-top-right {
  top: 100px !important;
  right: 16px !important;
}
#world:after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 13% 28%, #a6bdcc 70%, transparent),
    radial-gradient(1px 1px at 68% 66%, #b8c9dd 70%, transparent);
  background-size:
    173px 193px,
    271px 239px;
  mask-image: radial-gradient(ellipse at center, transparent 40%, black 75%);
}
@media (max-width: 600px) {
  .maplibregl-ctrl-top-right {
    top: 90px !important;
    right: 4px !important;
  }
}
#world[data-view="city"]:after {
  display: none;
}
.game-dock {
  width: max-content;
  flex-wrap: nowrap;
  max-width: calc(100vw - 24px);
}
.maplibregl-ctrl-group {
  border: 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.maplibregl-ctrl-group button {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.game-hud svg {
  width: 22px;
  height: 22px;
  display: block;
  margin: auto;
}
.game-dock button {
  place-items: center;
}
.map-controls button {
  display: grid;
  place-items: center;
}
@media (max-width: 600px) {
  .world-caption {
    bottom: 115px;
  }
  .world-caption > span:last-child {
    max-width: 270px;
  }
  .game-dock {
    gap: 0;
  }
  .game-dock button {
    width: 59px;
  }
  .system-controls button:first-child {
    display: block;
  }
  .system-controls {
    gap: 2px;
  }
  .system-controls button {
    width: 34px;
    min-width: 34px;
  }
  .wallet {
    max-width: calc(100% - 132px);
  }
}
.game-dock button.selected {
  background: color-mix(in srgb,var(--ui-success) 9%,transparent);
  color: var(--ui-success);
}
#panel-close {
  top: auto;
  bottom: 116px;
  right: 34px;
}
@media (max-width: 600px) {
  #panel-close {
    bottom: max(92px, calc(env(safe-area-inset-bottom) + 78px));
    right: 16px;
  }
  .system-controls button {
    width: 36px;
    min-width: 36px;
    min-height: 44px;
  }
  .wallet {
    max-width: calc(100% - 132px);
  }
}
@media (max-width: 600px) {
  .system-controls button {
    width: 44px;
    min-width: 44px;
  }
  .wallet {
    max-width: calc(100% - 160px);
  }
}
#coverage-status {
  position: absolute;
  z-index: 4;
  top: 128px;
  left: 24px;
  max-width: min(500px, calc(100% - 95px));
  font-size: 10px;
  line-height: 1.5;
  color: var(--ui-muted);
  background: color-mix(in srgb, var(--ui-input) 85%, transparent);
  padding: 7px 11px;
  border-radius: 8px;
  pointer-events: none;
}
#coverage-status[data-state="error"],
#coverage-status[data-state="unavailable"] {
  color: var(--ui-warning);
}
#geo-debug {
  position: absolute;
  z-index: 9;
  left: 24px;
  top: 170px;
  width: min(440px, calc(100% - 48px));
  max-height: 60dvh;
  overflow: auto;
  background: color-mix(in srgb, var(--ui-canvas) 96%, transparent);
  border: 1px solid var(--ui-border-subtle);
  border-radius: 9px;
  padding: 10px;
  font-size: 10px;
}
#geo-debug pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 48dvh;
  overflow: auto;
}
.geographic-label {
  font:
    11px Segoe UI,
    Arial,
    sans-serif;
  color: var(--ui-text);
  text-shadow:
    0 1px 3px #000,
    0 -1px 3px #000;
  pointer-events: none;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#geo-import-workflow pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  #coverage-status {
    top: 108px;
    left: 12px;
    max-width: calc(100% - 80px);
    font-size: 9px;
  }
  #geo-debug {
    top: 165px;
    left: 12px;
    width: calc(100% - 24px);
  }
}
/* Land selection remains available beside the map on touch and desktop. */
.land-control{position:absolute;top:116px;left:18px;z-index:4;display:flex;flex-direction:column;gap:4px;max-width:230px;pointer-events:auto}
.land-control button{min-height:44px;background:var(--ui-panel);border:1px solid var(--ui-border)}
.land-control button[aria-pressed="true"]{background:var(--ui-surface);color:var(--ui-warning)}
.land-control span{font-size:11px;background:color-mix(in srgb, var(--ui-input) 91%, transparent);padding:5px;border-radius:5px}
@media(max-width:600px){.land-control{top:105px;left:12px;max-width:180px}.land-control span{font-size:10px}}
/* Compact land and estate management, Milestone 9.2. */
#drawer-property.land-property-panel{top:100px;bottom:auto;max-height:calc(100dvh - 205px);width:420px;padding:18px;background:color-mix(in srgb, var(--ui-input) 96%, transparent);border-color:color-mix(in srgb,var(--ui-warning) 15%,transparent);backdrop-filter:blur(18px)}
.land-property-panel .drawer-heading,.land-property-panel #property>.eyebrow,.land-property-panel #property>p{display:none}
.land-property-panel #property{margin:0;border:0;background:none;padding:0}
.land-property-panel #property>h2{font-size:10px;letter-spacing:.15em;color:var(--ui-muted);margin:0 0 12px}
.property-title{display:block;position:relative;height:auto;padding:0 42px 0 0;margin:0 0 14px;border:0;background:none}
.property-kind{font-size:9px;letter-spacing:.13em;color:var(--ui-muted)}
#property-detail .property-title h3{font-size:23px;line-height:1.2;margin:7px 0 9px;overflow-wrap:anywhere}
.ownership-pill,.sale-pill{font-size:9px;border-radius:5px;padding:3px 7px;letter-spacing:.1em;color:var(--ui-warning);border:1px solid color-mix(in srgb,var(--ui-warning) 33%,transparent);background:color-mix(in srgb,var(--ui-warning) 7%,transparent)}
.sale-pill,.property-sale{color:var(--ui-success);border-color:color-mix(in srgb,var(--ui-success) 33%,transparent)}
.property-tabs{display:flex;gap:2px;overflow-x:auto;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid color-mix(in srgb, var(--ui-border) 7%, transparent);scrollbar-width:thin}
#property-detail .property-tabs button{flex:1;padding:7px 5px;min-width:max-content;background:transparent;color:var(--ui-muted);border:0;border-radius:5px;font-size:10px}
#property-detail .property-tabs button[aria-selected=true]{background:color-mix(in srgb,var(--ui-warning) 11%,transparent);color:var(--ui-warning)}
.property-tab-content[hidden]{display:none!important}
.property-stat-cards{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:7px;margin-bottom:14px}
.property-stat-cards>div{min-width:0;padding:10px 9px;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 6%, transparent);border-radius:8px}
.property-stat-cards span{display:block;font-size:8px;letter-spacing:.13em;color:var(--ui-muted);margin-bottom:7px}
.property-stat-cards strong{display:block;font-size:14px;line-height:1.35;color:var(--ui-text);overflow-wrap:anywhere}
.property-stat-cards small{display:block;font-size:9px;color:var(--ui-muted);margin-top:4px}
.property-value{margin:12px 0}.property-value>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid color-mix(in srgb, var(--ui-border) 4%, transparent)}.property-value dt{color:var(--ui-muted)}.property-value dd{margin:0;font-weight:600;color:var(--ui-warning);text-align:right}
.land-property-panel #property-detail p{margin:10px 0;line-height:1.55}
.land-property-panel #property-detail button{padding:8px 11px;border-radius:6px;min-height:32px}
.land-property-panel #property-detail input,.land-property-panel #property-detail select{max-width:100%;width:100%;background:var(--ui-input);color:var(--ui-text);border:1px solid color-mix(in srgb, var(--ui-border) 13%, transparent);border-radius:6px;padding:8px}
.land-property-panel #property-detail label{display:block;font-size:11px;color:var(--ui-muted);margin:9px 0}
.land-property-panel #property-detail h4{font-size:12px;color:var(--ui-text);margin:17px 0 8px}
.property-editor-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:15px 0}.property-editor-tools button{text-align:left}.property-editor-tools button:disabled{opacity:.4;cursor:not-allowed}
.property-selection{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid color-mix(in srgb, var(--ui-border) 7%, transparent);margin-top:16px;padding-top:10px;color:var(--ui-muted);font-size:10px}
.property-installation{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:10px 0;border-bottom:1px solid color-mix(in srgb, var(--ui-border) 8%, transparent)}.property-installation span{color:var(--ui-muted);font-size:10px}
.property-history{list-style:none;padding:0}.property-history li{display:flex;gap:12px;justify-content:space-between;padding:9px 0;border-bottom:1px solid color-mix(in srgb, var(--ui-border) 6%, transparent)}.property-history time{color:var(--ui-muted)}
.land-property-panel .business-controls{border-top:1px solid color-mix(in srgb, var(--ui-border) 7%, transparent);padding-top:8px;margin-top:12px}.land-property-panel .business-controls h3{font-size:14px!important}.land-property-panel .business-controls>p.muted{font-size:10px}
.land-property-panel .land-warehouse{margin-top:18px;border-top:1px solid color-mix(in srgb, var(--ui-border) 8%, transparent)}.land-property-panel #catalog{max-height:220px;overflow:auto}
@media(max-width:700px){#drawer-property.land-property-panel{top:auto;bottom:92px;left:8px;right:8px;width:auto;max-height:60dvh;padding:14px}.property-stat-cards{gap:5px}.property-stat-cards>div{padding:9px 7px}.property-stat-cards strong{font-size:12px}#property-detail .property-title h3{font-size:20px}}
/* Height/floor cards use the same property overview, with readable pairs on phones. */
.property-stat-cards:has(>div:nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){.property-stat-cards:has(>div:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}.property-stat-cards:has(>div:nth-child(5))>div:last-child{grid-column:1/-1}}
#building-interior { width:min(96vw,1000px); max-height:95dvh; overflow:auto; background:var(--ui-panel); color:var(--ui-text); border:1px solid var(--ui-border); border-radius:12px; }
#building-interior::backdrop { background:color-mix(in srgb, var(--ui-canvas) 80%, transparent); }
#building-interior header { display:flex; justify-content:space-between; align-items:center; background:var(--ui-panel); color:var(--ui-text); padding:12px; }
#building-interior canvas { width:100%; max-height:60dvh; object-fit:contain; background:var(--ui-surface); }
#building-interior button { min-height:44px; }
#building-interior [data-editor] { padding:12px; border:1px solid var(--ui-border); }

/* Keep property navigation reachable while inspecting on phones. */
#building-interior header{position:sticky;top:0;z-index:1}
#building-interior .actions:has([data-floor]){position:sticky;top:68px;z-index:1;background:var(--ui-panel);padding:6px 0}
/* The interior owns a tile-free MapLibre scene with a compact control overlay. */
#building-interior { position:fixed; inset:0; width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; background:var(--ui-panel); }
#building-interior [data-scene] { position:absolute; inset:0; }
#building-interior canvas { max-height:none; object-fit:initial; background:transparent; }
#building-interior header,#building-interior > .actions,#building-interior > p,#building-interior > button,#building-interior [data-editor] { position:relative; z-index:2; width:fit-content; max-width:calc(100% - 24px); margin:6px 12px; padding:6px 10px; background:color-mix(in srgb, var(--ui-panel) 91%, transparent); border-radius:8px; }
#building-interior header { display:flex; gap:20px; top:0; }
#building-interior .actions:has([data-floor]) { position:relative; top:0; }
#building-interior [data-price] { font-size:11px; max-width:300px; }
#building-interior [data-core] { font-size:12px; }
#building-interior [data-editor] { max-height:45dvh; overflow:auto; }
#building-interior [hidden] { display:none; }

.land-build-toolbar{position:absolute;z-index:8;bottom:72px;left:12px;right:12px;max-width:780px;display:flex;gap:6px;flex-wrap:wrap;padding:10px;background:color-mix(in srgb, var(--ui-panel) 93%, transparent);border:1px solid var(--ui-accent);border-radius:8px}.land-build-toolbar[hidden]{display:none}.land-build-toolbar button,.land-build-toolbar select{padding:7px;font-size:13px}.land-build-toolbar small{width:100%}.land-grid-toggle{position:absolute;right:12px;bottom:22px;z-index:7}
/* Portfolio stays bounded independently of the world camera. */
.portfolio-tabs{display:flex;gap:6px;margin-bottom:10px}
.portfolio-tabs button{flex:1;min-width:0;padding:10px 5px}
.portfolio-tabs [aria-selected="true"]{border-color:var(--ui-warning);color:var(--ui-warning);background:var(--ui-panel)}
.portfolio-list{max-height:55dvh;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
.portfolio-card{display:flex;align-items:center;gap:10px;padding:12px 6px;border-bottom:1px solid color-mix(in srgb, var(--ui-border) 9%, transparent)}
.portfolio-card>div{flex:1;min-width:0;display:grid;gap:4px;font-size:13px}
.portfolio-card strong{overflow-wrap:anywhere;font-size:14px}
.portfolio-card small{color:var(--ui-muted)}
.portfolio-card button{flex-shrink:0;width:44px;height:44px;padding:10px}
.portfolio-card svg{width:22px;height:22px}
.portfolio-pages{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:10px 0}
#drawer-businesses details{margin-top:16px}#drawer-businesses summary{cursor:pointer;padding:12px 0}
/* CapitalRift commodity exchange */
.exchange{min-width:0}.exchange-tabs,.history-ranges,.exchange-filters{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.exchange button,.exchange input,.exchange select{min-height:44px;max-width:100%}.exchange-filters input{flex:1;min-width:120px}.exchange-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}.exchange-item{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;min-width:0}.exchange img,.exchange .icon-fallback{width:48px;height:48px;object-fit:contain}.exchange .icon-fallback{display:inline-flex;align-items:center;justify-content:center;background:var(--ui-surface);border-radius:4px}.exchange [hidden]{display:none!important}.exchange-trading{max-height:72dvh;overflow-y:auto;overscroll-behavior:contain;margin-top:16px;padding:8px;scroll-margin-top:10px}.exchange-trading h3{display:flex;align-items:center;gap:8px}.exchange-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.exchange-form label{display:flex;flex-direction:column;gap:6px;min-width:0}.exchange-confirm{padding:12px 0}.exchange-books{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.exchange-books table{width:100%;font-size:12px}.exchange-books td,.exchange-books th{padding:6px 2px}.exchange-books .asks{color:var(--ui-danger)}.exchange-books .bids{color:var(--ui-success)}.exchange-chart svg{width:100%;height:115px;color:var(--ui-warning)}.exchange-chart p{font-size:12px}.exchange-order{padding:12px 0;border-bottom:1px solid var(--ui-border-subtle)}.exchange-order img{vertical-align:middle;margin-right:8px}.exchange-land{margin-top:20px}
@media(max-width:430px){.exchange-tabs button{flex:1;padding:8px}.history-ranges{gap:4px}.history-ranges button{flex:1;padding:4px}.exchange-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.exchange-books{gap:8px}.exchange-trading{padding:2px;max-height:68dvh}}

/* Compact capital and world chat; transparent HUD leaves the map interactive. */
.wallet{min-width:0;max-width:calc(100% - 268px);padding:8px 12px;background:color-mix(in srgb, var(--ui-input) 70%, transparent);backdrop-filter:none;pointer-events:none}
.wallet-values{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 12px;min-width:0}
#balance{font-size:clamp(13px,2vw,24px);letter-spacing:-.4px;white-space:nowrap;margin:2px 0}
#income{font-size:11px;color:var(--ui-muted);white-space:nowrap}
.world-caption{display:none}
#chat-preview{position:absolute;left:max(16px,env(safe-area-inset-left));bottom:calc(max(26px,env(safe-area-inset-bottom)) + 82px);width:min(460px,calc(100% - 96px));min-height:40px;padding:6px 10px;text-align:left;background:color-mix(in srgb, var(--ui-input) 72%, transparent);border:0;border-radius:7px;color:var(--ui-text);font-size:12px;line-height:19px}
.chat-row{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chat-channel{color:var(--ui-success)}.chat-name{color:var(--ui-accent)}.chat-text{color:var(--ui-text)}
#global-chat{pointer-events:auto;position:absolute;left:max(12px,env(safe-area-inset-left));width:min(460px,calc(100% - 24px));max-height:540px;background:color-mix(in srgb, var(--ui-input) 96%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 14%, transparent);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box}
#global-chat[hidden],#chat-preview[hidden]{display:none}
#global-chat header{display:flex;align-items:center;justify-content:space-between;color:var(--ui-success);font-size:12px}
#global-chat header button{width:44px;font-size:22px}
#chat-history{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;font-size:13px}
#chat-history .chat-row{white-space:normal;overflow-wrap:anywhere;padding:5px 0}
#chat-history time{display:block;font-size:10px;color:var(--ui-muted)}
#global-chat form{display:flex;gap:8px;margin:0;padding-bottom:env(safe-area-inset-bottom)}
#global-chat input{flex:1;min-width:0;font-size:16px;margin:0}
#chat-error{font-size:12px;color:var(--ui-warning);margin:0;min-height:16px}
@media(max-width:600px){
 .wallet{left:max(10px,env(safe-area-inset-left));max-width:calc(100% - 171px);padding:7px 8px}
 #balance{font-size:clamp(11px,3.5vw,18px)}
 .system-controls{gap:3px}.system-controls button{width:32px;min-width:32px}.system-controls button:first-child{display:block}
 #chat-preview{left:max(12px,env(safe-area-inset-left));bottom:calc(max(22px,calc(env(safe-area-inset-bottom) + 8px)) + 75px);width:calc(100% - 84px);font-size:11px;line-height:18px}
}

/* Compact controls over the existing world canvas. */
#building-interior { inset:90px auto auto 12px; width:min(410px,calc(100vw - 24px)); height:auto; max-height:calc(100dvh - 180px); overflow:auto; background:color-mix(in srgb, var(--ui-panel) 91%, transparent); border:1px solid var(--ui-border); border-radius:10px; z-index:15; }
#building-interior [data-scene] { display:none; }
#building-interior header { margin:0; max-width:none; width:auto; gap:6px; flex-wrap:wrap; }
#building-interior > .actions { display:flex; gap:6px; flex-wrap:wrap; }
#building-interior [data-core],#building-interior [data-price] { display:none; }
#building-interior.collapsed > :not(header) { display:none; }
#building-interior [data-editor] { max-height:32dvh; }
@media(max-width:600px) { #building-interior { top:110px; width:calc(100vw - 24px); } #building-interior button { padding:5px 8px; } }

/* Compact inventory; bounded pages keep DOM size independent of quantities. */
#drawer-inventory{width:min(640px,calc(100vw - 24px));background:var(--ui-input)}
#drawer-inventory>.card{padding:0;background:transparent;border:0}
#drawer-inventory>.card>h2,#drawer-inventory>.card>.eyebrow,#drawer-inventory .drawer-heading>.eyebrow{display:none}
.inventory-tabs{display:flex;gap:6px;margin:12px 0}
.inventory-tabs button{flex:1;background:var(--ui-panel);color:var(--ui-muted);border:1px solid var(--ui-border-subtle)}
.inventory-tabs [aria-selected=true]{color:var(--ui-warning);border-color:var(--ui-border-subtle);background:var(--ui-panel)}
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px;max-height:48vh;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.inventory-slot{position:relative;aspect-ratio:1;min-width:0;padding:7px;background:var(--ui-panel);border:1px solid var(--ui-border-subtle);border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--ui-text);overflow:hidden}
.inventory-slot img{width:80%;height:80%;object-fit:contain}.inventory-slot>span{font-size:11px;overflow:hidden}
.inventory-slot small{position:absolute;right:3px;bottom:2px;font-size:11px;color:var(--ui-text);text-shadow:0 1px 3px #000;background:color-mix(in srgb, var(--ui-input) 67%, transparent);padding:0 2px}
.inventory-slot[aria-pressed=true]{border-color:var(--ui-border);background:var(--ui-panel);box-shadow:inset 0 0 8px #a68d4526}
.worker-hire{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.worker-hire p{font-size:12px;color:var(--ui-muted);margin:5px 0}.worker-hire>button{flex-shrink:0}.worker-grid .worker-card{padding:8px 3px 24px}.worker-grid .worker-card strong{font-size:11px}.worker-map-name{min-height:0!important;line-height:1.3!important}
.worker-section-heading,.worker-properties>h3{font-size:13px;margin:18px 0 10px}.worker-properties{border-top:1px solid var(--ui-border-subtle);margin-top:16px}.worker-property{border:1px solid var(--ui-border-subtle);border-radius:8px;margin:10px 0;padding:10px}.worker-property header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.worker-property header strong{font-size:12px}.worker-property header small{display:block;font-size:10px;color:var(--ui-muted);margin-top:4px}.worker-property header button{font-size:10px;padding:5px 8px}.worker-property .worker-property-grid{min-height:0;max-height:none}.worker-property>header{background:transparent;color:inherit;padding:0;margin:0 0 8px;border:0;box-shadow:none;min-height:0;height:auto;position:static;width:auto;max-width:none}.worker-grid:has(.worker-empty){min-height:80px}.worker-map-dot{width:10px!important;height:10px!important;min-width:0!important;min-height:0!important;padding:0!important;border:1px solid var(--ui-border-subtle)!important;border-radius:50%!important;background:var(--ui-surface)!important;box-shadow:0 1px 4px #0008;font-size:0!important}.worker-map-dot.selected{background:var(--ui-accent)!important;box-shadow:0 0 0 3px #45d7cb55}
.worker-roster-actions{display:flex;flex-wrap:wrap;gap:6px}.worker-roster [data-worker-status]{font-size:12px;color:var(--ui-muted);min-height:18px}.worker-grid{grid-template-columns:repeat(4,minmax(0,1fr));min-height:180px;max-height:45vh;user-select:none;padding:3px}.worker-card{aspect-ratio:.8;flex-direction:column;gap:4px;padding:8px 3px 24px;touch-action:pan-y}.worker-card .worker-portrait{height:64%;width:85%;flex:1;min-height:0;pointer-events:none}.worker-card strong{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.worker-card small{right:0;left:0;bottom:5px;text-align:center;background:transparent;color:var(--ui-muted);font-size:10px}.worker-empty{grid-column:1/-1;align-self:center;text-align:center;color:var(--ui-muted);font-size:13px}.worker-details{display:flex;flex-direction:column;gap:4px;font-size:12px;margin-top:14px}.worker-task-details{margin-top:20px}.worker-task-details article{padding:12px 0;border-bottom:1px solid var(--ui-border-subtle)}.worker-task-details select{max-width:100%}.worker-map-name{padding:3px 7px!important;font-size:11px!important;background:var(--ui-panel)!important;color:var(--ui-text)!important;border:1px solid var(--ui-border-subtle)!important;border-radius:6px!important;cursor:pointer}.worker-map-name.selected{border-color:var(--ui-accent)!important;color:var(--ui-accent)!important;box-shadow:0 0 0 2px #45d7cb55}.worker-selection-box{position:fixed;z-index:10000;pointer-events:none;border:1px solid var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 13%,transparent)}.worker-place-cursor{cursor:crosshair!important}#worker-placement-dialog{width:min(360px,90vw);border:1px solid var(--ui-border-subtle);border-radius:12px;background:var(--ui-panel);color:var(--ui-text);padding:20px}#worker-placement-dialog::backdrop{background:color-mix(in srgb, var(--ui-canvas) 40%, transparent)}#worker-placement-dialog header{display:flex;align-items:center;justify-content:space-between}#worker-placement-dialog h3{margin:0}#worker-placement-dialog select{width:100%}#worker-placement-dialog [data-placement-error]{color:var(--ui-warning);font-size:12px}
@media(max-width:600px){.worker-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.worker-card{padding-bottom:22px}.worker-hire{align-items:flex-start}.worker-hire p{max-width:160px}.worker-roster-actions button{font-size:11px}}
.inventory-empty{background:var(--ui-panel)}.inventory-pagination{display:flex;justify-content:space-between;align-items:center;margin:8px 0;font-size:12px}
.inventory-details{border-top:1px solid var(--ui-border-subtle);padding-top:10px;font-size:12px}.inventory-details:empty{display:none}.inventory-details img{width:48px;height:48px;object-fit:contain;float:left;margin:0 10px 5px 0}.inventory-details p{margin:6px 0}
@media(max-width:600px){.inventory-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.inventory-slot{padding:4px}}

/* Shared mounted-window controls and safe-area-aware minimized dock. */
.window-minimized { display: none !important; pointer-events: none !important; }
.window-header { position: relative; padding-right: 88px; touch-action: pan-x; }
.window-controls { position: absolute; top: 0; right: 0; display: flex; gap: 4px; }
.window-controls button { min-width: 40px; min-height: 40px; padding: 0; font-size: 22px; background: var(--ui-panel); }
#minimized-windows { position: fixed; z-index: 8; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; max-width: calc(100vw - 16px); height: 44px; padding: 4px; box-sizing: border-box; overflow-x: auto; border-radius: 10px; background: color-mix(in srgb, var(--ui-input) 91%, transparent); pointer-events: auto; }
#minimized-windows[hidden] { display: none; }
#minimized-windows button { flex: 0 0 auto; padding: 6px 12px; font-size: 12px; white-space: nowrap; }
#panel-close { display: none !important; }
.land-property-panel > .drawer-heading.window-header { display: block; min-height: 40px; margin: 0; border: 0; }
.land-property-panel > .drawer-heading.window-header > :not(.window-controls) { display: none; }
#land-build-toolbar > .window-header { height: auto; min-height: 40px; padding-left: 0; background: transparent; border: 0; }

#building-interior [data-room-management] {padding:12px;position:relative;z-index:2;}
#building-interior [data-room-cards] {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#building-interior [data-room-cards] button {text-align:left;white-space:normal;padding:10px;}
#building-interior [data-room-cards] small {display:block;line-height:1.4;margin-top:5px;}
#building-interior [data-room-cards] [aria-pressed="true"] {border:2px solid var(--ui-warning);background:var(--ui-surface);}
#building-interior [data-rental] label {display:block;margin:12px 0;}
#building-interior [data-rental] select,#building-interior [data-rental] input {width:100%;min-height:44px;}
#building-interior [data-rental-info] {display:grid;grid-template-columns:1fr 1fr;gap:6px;font-size:12px;overflow-wrap:anywhere;}
#building-interior [data-rental-info] dd {margin:0;}
#building-interior [data-rental] .actions {display:flex;flex-wrap:wrap;gap:6px;}
#building-interior header .window-controls {position:static;margin-left:auto;flex-shrink:0;}
#building-interior header > strong {flex:1 1 100%;}

#building-interior[data-placing="true"] [data-editor] { max-height:none; padding:4px 8px; }
#building-interior[data-placing="true"] [data-editor] fieldset { border:0; margin:0; padding:0; }
#building-interior[data-placing="true"] [data-editor] legend, #building-interior[data-placing="true"] [data-furniture], #building-interior[data-placing="true"] [data-select], #building-interior[data-placing="true"] [data-return] { display:none; }
#building-interior [data-placement-status] { font-size:12px; margin:4px 0; }

#building-interior [data-editor] fieldset { border:0; padding:0; margin:0; }
#building-interior [data-editor] legend, #building-interior [data-furniture], #building-interior [data-select], #building-interior [data-return] { display:none; }
#building-interior:not([data-placing="true"]) [data-rotate], #building-interior:not([data-placing="true"]) [data-confirm], #building-interior:not([data-placing="true"]) [data-cancel] { display:none; }
.imported-production { margin: 1rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--ui-border-subtle); }
.production-icon { width: 32px; height: 32px; object-fit: contain; vertical-align: middle; margin-right: .5rem; }
.production-stock span, .production-job span { display: block; margin: .3rem 0; }
.production-job { padding: .7rem 0; border-bottom: 1px solid var(--ui-border-subtle); }
.imported-production select { max-width: 100%; }
.imported-production progress { width: 100%; }

#selected-object { position:fixed; top:90px; right:66px; bottom:116px; width:min(370px,calc(100vw - 24px)); max-height:720px; display:flex; flex-direction:column; gap:0; padding:0; z-index:25; background:color-mix(in srgb, var(--ui-panel) 96%, transparent); color:var(--ui-text); font-size:14px; border:1px solid var(--ui-border); border-radius:10px; box-shadow:0 8px 28px #0005; overflow:hidden; }
#selected-object[hidden] { display:none; }
#selected-object > header { display:flex; justify-content:space-between; align-items:center; flex-shrink:0; height:auto; min-height:60px; padding:8px 12px; background:var(--ui-panel); }
#selected-object button { min-height:44px; white-space:normal; font-size:13px; line-height:1.35; }
#selected-object .object-inspector-body { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:12px; overflow-wrap:anywhere; scrollbar-gutter:stable; }
#selected-object .object-inspector-title { display:flex; align-items:center; gap:12px; }
#selected-object h3,#selected-object h4 { margin:8px 0; }
#selected-object p { line-height:1.5; margin:8px 0; }
#selected-object .object-recipe { padding:10px 0; border-bottom:1px solid color-mix(in srgb, var(--ui-border) 33%, transparent); }
#selected-object .object-inspector-actions { flex-shrink:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; padding:10px; border-top:1px solid var(--ui-border); background:var(--ui-panel); color:inherit; letter-spacing:normal; }
#selected-object select,#selected-object input { max-width:100%; }
@media(max-width:700px) {
 #building-interior { max-height:32dvh; top:90px; }
 #selected-object { top:auto; right:12px; bottom:104px; width:min(370px,calc(100vw - 24px)); max-height:43dvh; }
 #selected-object .object-inspector-body { padding:8px 12px; }
 #selected-object .object-inspector-actions { padding:6px; gap:4px; }
}
#building-interior [aria-pressed="true"] { border-color:var(--ui-warning); }
/* Bounded, reusable ownership controls above the existing geographic renderer. */
.ownership-marker{width:32px;height:32px;border-radius:50%;padding:0;background:var(--ui-surface);color:var(--ui-text);border:2px solid var(--ui-border);font-size:16px;font-weight:700;cursor:pointer;z-index:2;box-shadow:0 2px 7px #0008}
.ownership-marker.mine{background:var(--ui-panel);color:var(--ui-accent);border-color:var(--ui-accent);z-index:3}
.ownership-marker.unowned{background:var(--ui-panel);color:var(--ui-muted);border-style:dashed}
.ownership-marker.selected{border-color:var(--ui-border);z-index:4;box-shadow:0 0 0 3px #37efc98a}
.ownership-marker:focus-visible{outline:3px solid white;outline-offset:3px}
.ownership-filter{display:flex;gap:8px;align-items:center;padding:12px}
.ownership-status{font-size:11px}
.portfolio-search{display:block;width:100%;margin:10px 0}
.property-floor-picker{flex-basis:100%;min-width:0}
.property-floor-picker>div{display:flex;gap:8px;align-items:end;flex-wrap:wrap;padding-top:8px}
#mining-panel { color:var(--ui-text); background:var(--ui-input); border:1px solid var(--ui-border-subtle); border-radius:12px; width:min(560px,calc(100vw - 32px)); max-height:85dvh; overflow:auto; padding:22px; }
#mining-panel::backdrop { background:color-mix(in srgb, var(--ui-canvas) 80%, transparent); }
#mining-panel header { display:flex; align-items:center; justify-content:space-between; gap:16px; background:transparent; color:inherit; padding:0; box-shadow:none; }
#mining-panel h2 { color:inherit; }
#mining-panel .actions { display:flex; flex-wrap:wrap; gap:8px; }
#survey-panel { position:fixed; inset:80px 16px auto auto; margin:0; color:var(--ui-text); background:var(--ui-input); border:1px solid var(--ui-border-subtle); border-radius:12px; width:min(440px,calc(100vw - 32px)); max-height:80dvh; overflow:auto; padding:20px; z-index:50; }
#survey-panel { font:inherit; }
#survey-panel header { position:sticky; top:-20px; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--ui-input); color:inherit; margin:-20px -20px 16px; padding:16px 20px; box-shadow:none; }
#survey-panel header h2 { font-size:17px; }
#survey-panel h2 { color:inherit; }
#survey-panel article { padding:12px 0; border-bottom:1px solid var(--ui-border-subtle); }

.land-drag-rectangle{position:absolute;pointer-events:none;z-index:25;border:2px solid var(--ui-accent);background:rgba(0,255,255,.12)}
.land-bulk-panel{position:absolute;right:16px;top:80px;z-index:30;max-width:310px;padding:16px;background:color-mix(in srgb, var(--ui-panel) 96%, transparent);color:var(--ui-text);border:1px solid var(--ui-border-subtle);border-radius:8px;box-shadow:0 5px 24px #0008}
.land-bulk-panel[hidden],.land-drag-rectangle[hidden]{display:none}
.land-combining .maplibregl-marker{pointer-events:none!important}
.mine-drawing-active .maplibregl-marker{pointer-events:none!important}
.mine-drawing-active .maplibregl-canvas{cursor:crosshair}

#land-development {
  position:fixed; inset:80px auto auto 16px; width:360px;
  max-width:calc(100vw - 32px); max-height:80vh; overflow:auto; z-index:30;
  color:var(--ui-text); background:var(--ui-panel); border:1px solid var(--ui-accent);
  border-radius:9px; padding:12px; font-size:13px;
}
#land-development > header {
  display:flex; align-items:center; justify-content:space-between;
  background:transparent; border:0; padding:0; height:38px; min-height:36px;
}
#land-development h2 { font-size:17px; margin:0; }
#land-development button { min-height:32px; padding:6px 9px; font-size:12px; }
#land-development p { margin:8px 0; }
#land-development > .actions { display:flex; gap:5px; flex-wrap:wrap; }
.land-build-toolbar.embedded-placement { position:static; display:flex; max-width:100%; padding:6px; min-width:0; }
@media (max-width: 700px) {
  #land-development.placement-active {
    top: auto; bottom: calc(92px + env(safe-area-inset-bottom));
    left: 8px; right: 8px; width: auto; max-height: 34vh;
  }
}
.embedded-placement select,.embedded-placement input { width:100%; min-width:0; }
.embedded-placement [hidden] { display:none!important; }
.embedded-placement details { width:100%; }
.embedded-placement [data-choices] { max-height:180px; overflow:auto; }
.embedded-placement [data-choices] button { display:flex; align-items:center; gap:5px; width:100%; text-align:left; font-size:12px; }
#land-development summary { cursor:pointer; padding:8px; border:1px solid var(--ui-border-subtle); border-radius:5px; }
.embedded-placement small { line-height:1.4; }
.embedded-placement > p { font-size:12px; }
.city-search{position:fixed;top:calc(max(24px, env(safe-area-inset-top)) + 54px);right:max(24px, env(safe-area-inset-right));width:min(240px,calc(100vw - 32px));pointer-events:auto;z-index:45}
.city-search input{box-sizing:border-box;width:100%;min-height:40px;background:var(--ui-input);color:var(--ui-text);border:1px solid var(--ui-border-subtle);border-radius:8px;padding:8px 10px;font-size:14px}
#city-results{max-height:45dvh;overflow:auto;background:var(--ui-input);border:1px solid var(--ui-border-subtle);border-radius:8px}
#city-results button{display:block;width:100%;text-align:left;white-space:normal;min-height:44px}
#city-results [aria-selected=true]{background:var(--ui-surface)}
.city-search p{background:var(--ui-input);color:var(--ui-text);margin:0;padding:4px 8px}.city-search p:empty{display:none}
#survey-panel progress{width:100%}
@media(max-width:600px){.city-search{top:calc(max(15px, env(safe-area-inset-top)) + 54px);width:min(210px,calc(100vw - 24px))}#survey-panel{top:136px;max-height:calc(100dvh - 220px)}#survey-panel header{flex-wrap:wrap}}

@media(max-width:600px){#coverage-status{top:130px}#survey-panel{top:166px;max-height:calc(100dvh - 250px)}}

/* iOS zooms the whole viewport when focusing form text smaller than 16px.
   Keep HUD controls inside the viewport without disabling user pinch zoom. */
@media (max-width: 600px), (pointer: coarse) {
  #game input, #game select, #game textarea,
  #auth input, #auth select, #auth textarea {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .city-search {
    left: auto;
    right: max(12px, env(safe-area-inset-right));
    min-width: 0;
    transform: none;
  }
  .city-search input { min-width: 0; max-width: 100%; }
  .game-dock {
    max-width: calc(100% - 16px - env(safe-area-inset-left) - env(safe-area-inset-right));
    overflow-x: auto;
  }
  .game-dock > *, #market-slot { flex-shrink: 0; }
}

.map-controls .map-layers-button{height:auto;min-height:58px;gap:4px;padding:8px;background:color-mix(in srgb, var(--ui-panel) 96%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 5%, transparent);border-radius:10px;color:var(--ui-text)}
.map-layers-button small{font-size:9px;line-height:1.2;color:var(--ui-muted)}
.map-controls .map-layers-button:hover,.map-controls .map-layers-button[aria-expanded=true]{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
.map-layers-content fieldset{display:grid;gap:8px;padding:0;margin:0;border:0;min-width:0}
.map-layers-content legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.map-layers-content label{display:flex;align-items:center;gap:12px;cursor:pointer;padding:12px;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 5%, transparent);border-radius:8px;min-height:44px;margin:0}
.map-layers-content label:has(input:checked){border-color:var(--ui-border);background:var(--ui-surface)}
.map-layers-content strong{color:var(--ui-text);font-size:13px}
.map-layers-content small{display:block;margin-top:4px;color:var(--ui-muted);font-size:11px}
.map-layers-content input[type=radio]{appearance:auto;flex:0 0 18px;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--ui-muted)}
.map-layers-content [role=status]{margin:14px 0;color:var(--ui-muted);font-size:12px}
.map-layers-content .layer-actions{display:flex;flex-wrap:wrap;gap:8px}
.map-layers-content button{min-height:40px;padding:8px 12px;background:var(--ui-panel);color:var(--ui-text);border:1px solid var(--ui-border-subtle);border-radius:6px;font-size:12px}
.map-layers-content button:hover{background:var(--ui-surface);border-color:var(--ui-border)}

.survey-resource-node { border:2px solid var(--ui-warning); border-radius:10px; padding:6px 9px; background:color-mix(in srgb, var(--ui-panel) 93%, transparent); color:var(--ui-warning); box-shadow:0 3px 12px #0007; font:600 12px/1.3 system-ui,sans-serif; white-space:nowrap; pointer-events:none; }
.survey-resource-node[data-resource=concrete] { border-color:var(--ui-border); color:var(--ui-text); }

.social-ranking { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid color-mix(in srgb, var(--ui-border) 9%, transparent); }
.social-ranking strong { overflow-wrap:anywhere; }
.social-economy-summary { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; }
#social-leaderboard { list-style:none; padding:0; }


button.wallet {pointer-events:auto;width:auto;text-transform:none;text-align:left;cursor:pointer;color:inherit;font:inherit} .bank-history time {font-size:12px;color:var(--muted,var(--ui-muted))} .bank-transfer input {width:100%} .bank-history article {padding:12px 0;border-bottom:1px solid color-mix(in srgb, var(--ui-border) 13%, transparent)}

.avatar-name{color:var(--ui-text);background:color-mix(in srgb, var(--ui-panel) 87%, transparent);border-radius:4px;padding:2px 5px;font-size:11px;pointer-events:none}#avatar-customizer{z-index:120;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:16px}#avatar-customizer label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:8px 0}#avatar-customizer label select{min-width:0;max-width:65%}.avatar-preview{display:grid;place-items:center;min-height:180px;margin:12px 0;padding:10px;background:var(--ui-surface);border:1px solid var(--ui-border-subtle);border-radius:var(--ui-radius-md,8px)}.avatar-preview svg{width:112px;height:150px;filter:drop-shadow(0 4px 4px color-mix(in srgb,var(--ui-shadow) 35%,transparent))}#avatar-customizer [data-avatar-status]{min-height:1.4em;color:var(--ui-muted)}

/* Center dock shortcut: miniature of the equipped player avatar. */
.game-dock #player-focus {position:relative;min-width:58px;color:var(--ui-success);}
#player-miniature {display:block;width:30px;height:36px;}
#player-miniature svg {display:block;width:100%;height:100%;filter:drop-shadow(0 2px 2px #0008);}
.game-dock #player-focus[aria-pressed="true"] {background:var(--ui-surface);border-radius:14px;box-shadow:inset 0 0 0 1px #80b49e;}
@media(max-width:600px){.game-dock #player-focus{width:59px;min-width:52px;}}

/* Keep routine map guidance out of the play area. */
#coverage-status:not([data-state="error"]):not([data-state="unavailable"]),
#land-status { display:none; }
.maplibregl-ctrl-top-right { top:126px !important; }
@media(max-width:600px){.maplibregl-ctrl-top-right { top:118px !important; }}
.food-cart-panel{position:fixed;z-index:180;left:50%;top:20%;transform:translateX(-50%);width:min(360px,calc(100vw - 32px));padding:20px;background:var(--panel,var(--ui-input));color:var(--text,var(--ui-text));border:1px solid var(--ui-border-subtle);border-radius:12px;box-shadow:0 12px 40px #0008}
.food-cart-panel [data-close]{float:right}
.food-cart-panel button,[data-placed-carts] button{min-height:44px;margin:4px}
.food-cart-marker{width:58px;height:64px;padding:2px;background:transparent;border:0;cursor:pointer;filter:drop-shadow(0 3px 3px #0009)}
.food-cart-marker img{width:100%;height:100%;object-fit:contain}
[data-placed-carts] article{padding:8px 0}
#inventory-item-menu{position:fixed;z-index:10000;width:310px;max-width:calc(100vw - 16px);padding:7px;background:var(--ui-panel);border:1px solid var(--ui-border-subtle);border-radius:8px;box-shadow:0 12px 35px #0009;color:var(--ui-text)}
#inventory-item-menu button{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;text-align:left;width:100%;min-height:52px;padding:12px;border:0;border-radius:5px;background:transparent;color:inherit;font:inherit;font-size:15px}
#inventory-item-menu button:hover,#inventory-item-menu button:focus-visible{background:var(--ui-surface);outline:2px solid var(--ui-border);outline-offset:-2px}
#inventory-item-menu small{color:var(--ui-muted);font-size:12px}
.food-cart-business{top:50%;transform:translate(-50%,-50%);width:min(560px,calc(100vw - 24px));max-height:min(82dvh,850px);padding:0;display:flex;flex-direction:column;overflow:hidden;background:var(--ui-input);color:var(--ui-text);border-color:var(--ui-border-subtle);border-radius:10px}
.food-cart-business header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--ui-panel);flex-shrink:0}
.food-cart-business header h3{margin:0;font-size:20px;font-weight:500}
.food-cart-business header button{margin:0;min-width:44px}
.cart-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:8px;gap:4px;flex-shrink:0}
.cart-tabs button{margin:0!important;padding:10px 3px;text-transform:uppercase;letter-spacing:.06em;font-size:13px;font-weight:700;background:transparent;border:0;color:var(--ui-muted)}
.cart-tabs button[aria-selected=true]{color:var(--ui-text);background:var(--ui-panel)}
.food-cart-business [data-cart-body]{overflow-y:auto;overscroll-behavior:contain;padding:14px;min-height:0;-webkit-overflow-scrolling:touch}
.food-cart-business footer{display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;padding:6px 12px;border-top:1px solid var(--ui-border-subtle)}
.food-cart-business footer button{margin:0;font-size:13px}
.food-cart-business h2{font-size:23px;margin:4px 0 14px}
.food-cart-business p{line-height:1.5;font-size:14px}
.cart-cuisines{display:grid;gap:9px}
.cart-cuisines button{margin:0;text-align:left;background:var(--ui-panel);border:1px solid var(--ui-border-subtle);padding:14px;border-radius:5px}
.cart-cuisines button[aria-pressed=true]{outline:2px solid var(--ui-border-subtle);border-color:var(--ui-border-subtle)}
.cart-cuisines strong{display:flex;align-items:center;gap:9px;font-size:18px}
.cart-cuisines i{width:19px;height:19px;display:inline-block;border-radius:4px}
.cart-cuisines span{display:block;color:var(--ui-muted);font-size:14px;margin-top:7px;line-height:1.5}
.cart-setup{width:100%;margin:16px 0!important;background:var(--ui-surface);color:var(--ui-text);font-weight:700}
.cart-summary,.cart-operations{background:var(--ui-panel);padding:14px;border-radius:5px;margin-bottom:16px}
.cart-revenue{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cart-revenue strong{font-weight:400;font-size:38px;color:var(--ui-success);white-space:nowrap}
.cart-revenue strong small{font-size:17px}
.cart-revenue>span{color:var(--ui-muted);font-size:18px;text-align:right}
.cart-summary h3,.cart-appeal b{color:var(--ui-warning)}.cart-appeal{color:var(--ui-muted);font-weight:600}
.cart-warning{color:var(--ui-danger);font-weight:600}.cart-fine{color:var(--ui-muted);font-size:12px!important}
.cart-price{display:block;border-top:1px solid var(--ui-border-subtle);padding-top:13px;color:var(--ui-muted);font-size:12px;letter-spacing:.12em}
.cart-price output{float:right;color:var(--ui-text);letter-spacing:0}
.cart-price input{display:block;width:100%;margin:12px 0;accent-color:var(--ui-text);background:linear-gradient(90deg,var(--ui-warning),var(--ui-warning),var(--ui-surface),var(--ui-warning));height:18px;border-radius:20px;cursor:pointer}
.cart-price>span{display:flex;justify-content:space-between;gap:6px;letter-spacing:0}.cart-price b{color:var(--ui-success)}
.cart-rings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.cart-ring{aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--ui-success) var(--fill),var(--ui-surface) 0);padding:9px;display:grid;place-items:center}
.cart-ring>div{width:100%;height:100%;border-radius:50%;background:var(--ui-panel);display:flex;flex-direction:column;align-items:center;justify-content:center}
.cart-ring strong{font-weight:400;font-size:27px;line-height:1.3}.cart-ring small{font-size:10px;color:var(--ui-muted);letter-spacing:.08em}
.cart-operation-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}.cart-operation-actions>div{min-width:0}
.cart-operation-actions button{width:100%;font-size:12px;margin:0!important;padding:8px 2px;text-transform:uppercase;font-weight:700}
.cart-operation-actions p,.cart-operation-actions label{font-size:12px;overflow-wrap:anywhere}.cart-operation-actions small{font-size:11px;display:block;color:var(--ui-muted)}
.cart-operation-actions input{width:100%;box-sizing:border-box;min-width:0}
.cart-stock summary{font-weight:600;font-size:16px;margin:10px 0}.cart-stock>label{display:flex;align-items:center;gap:12px;font-size:13px}.cart-stock>label input{width:90px}
.cart-stock article{display:flex;gap:5px;align-items:center;border-top:1px solid var(--ui-border-subtle);padding:8px 0}.cart-stock article>div{flex:1;min-width:0}.cart-stock strong{font-size:13px}.cart-stock small{display:block;color:var(--ui-muted);font-size:11px}.cart-stock article button{font-size:11px;padding:6px;margin:0}
.cart-upgrades{display:grid;gap:14px}.cart-upgrades>button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;padding:22px 14px;margin:0;background:var(--ui-panel);border:2px dashed var(--ui-border-subtle);color:var(--ui-text)}
.cart-upgrades strong{font-size:19px;font-weight:400}.cart-upgrades p{max-width:340px;color:var(--ui-muted);margin:8px 0}.cart-upgrade-icon{display:block;font-size:36px;color:var(--ui-muted);line-height:1.4}
.cart-level-dots{display:flex;gap:4px;margin:8px 0}.cart-level-dots i{width:9px;height:9px;border-radius:50%;background:var(--ui-surface)}.cart-level-dots .installed{background:var(--ui-success)}
.cart-upgrades b{font-size:12px;letter-spacing:.1em}.cart-upgrade-cost{color:var(--ui-success);font-size:18px}
.cart-worker-card{padding:22px;background:var(--ui-panel);border:2px dashed var(--ui-border-subtle);text-align:center}.cart-worker-card label{display:flex;gap:10px;align-items:center;text-align:left;margin:14px 0}.cart-worker-card select{max-width:100%;flex:1;min-width:0}.cart-worker-card input[type=checkbox]{width:20px;height:20px}
@media(max-width:430px){.food-cart-business{max-height:85dvh}.food-cart-business [data-cart-body]{padding:10px}.cart-summary,.cart-operations{padding:10px}.cart-revenue strong{font-size:30px}.cart-revenue>span{font-size:15px}.cart-ring strong{font-size:22px}.cart-ring{padding:7px}.cart-tabs button{font-size:12px}.cart-operation-actions{gap:5px}.cart-operation-actions button{font-size:10px}}
.cart-price input[type=range]{appearance:none;-webkit-appearance:none;background:linear-gradient(90deg,var(--ui-danger),var(--ui-warning),var(--ui-surface),var(--ui-warning),var(--ui-danger));border:0;outline-offset:4px}
.cart-price input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:16px;height:29px;border-radius:4px;background:var(--ui-surface);box-shadow:0 1px 3px #0008;cursor:grab}
.cart-price input[type=range]::-moz-range-thumb{width:16px;height:29px;border:0;border-radius:4px;background:var(--ui-surface);cursor:grab}
.cart-cuisines em{margin-left:auto;border-radius:20px;background:var(--ui-warning);color:var(--ui-text);padding:3px 9px;font-style:normal;font-size:11px;font-weight:700}
.cart-status-strip{display:flex;gap:12px;margin:0 0 14px}
.cart-status-strip>span{display:flex;flex-direction:column;border-right:1px solid var(--ui-border-subtle);padding-right:12px}
.cart-status-strip>span:last-child{border-right:0}
.cart-status-strip strong{font-size:22px;font-weight:400;color:var(--ui-success)}
.cart-status-strip small{font-size:10px;color:var(--ui-muted);letter-spacing:.1em}
.cultivation-crops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:360px;overflow:auto}
.cultivation-crop{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px;min-width:0}
.cultivation-crop strong{font-size:12px}.cultivation-crop small{font-size:10px;opacity:.75}
.mine-drawing-panel select{max-width:100%;margin:8px 0}
.mine-drawing-panel.cultivation-drawing-panel{left:18px;right:auto;top:110px;max-height:calc(100% - 220px);overflow-y:auto}

/* Land development uses the inventory slots and quantity badges. */
#land-development .inventory-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;max-height:36vh;overflow-y:auto;width:100%}
#land-development [data-choices] .inventory-slot{display:flex;align-items:center;justify-content:center;width:100%;padding:7px;min-height:0;aspect-ratio:1}
#land-development .inventory-slot img{width:80%;height:80%;object-fit:contain}

.boundary-drawing-cancel{position:absolute;bottom:90px;left:16px;z-index:46;min-height:44px;pointer-events:auto}
/* Logistics and cash-flow windows reuse the existing managed drawers. */
.economy-card {border:1px solid var(--ui-border-subtle);border-radius:8px;padding:12px;margin:12px 0;}
.economy-card h4 {margin:4px 0 8px;}
.economy-card form, [data-route] {display:grid;gap:8px;margin:12px 0;padding:8px;background:color-mix(in srgb, var(--ui-panel) 40%, transparent);}
.economy-card label,[data-route] label {display:grid;gap:4px;}
.economy-card select,[data-route] select {max-width:100%;min-width:0;}
.economy-rates {display:grid;grid-template-columns:1fr auto;gap:10px;}
.economy-rates dd {margin:0;font-variant-numeric:tabular-nums;}
.game-dock {max-width:calc(100vw - 20px);overflow-x:auto;}

.wallet-values > button{pointer-events:auto;background:transparent;border:0;border-radius:4px;padding:0;min-width:0;width:auto;color:inherit;font:inherit;text-transform:none;cursor:pointer;text-align:left}
.wallet-values > button:hover{background:transparent;color:var(--accent,var(--ui-accent))}
.wallet-values > button:focus-visible{outline:2px solid var(--accent,var(--ui-accent));outline-offset:4px}
#land-build-toolbar [data-choices] {max-height:310px;overflow-y:auto;}
.structure-options {grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.structure-option {min-width:0;min-height:64px;text-align:left;padding:8px;white-space:normal;}
.structure-option strong,.structure-option small {display:block;position:static;line-height:1.3;}
.structure-option small {margin-top:4px;font-size:10px;color:var(--ui-muted);}
#land-build-toolbar [data-item-info] {white-space:normal;line-height:1.5;}
/* Compact finance flyout anchored to the income rate. */
#drawer-finances.finance-popover{position:fixed;width:300px;min-width:0;max-width:calc(100vw - 16px);padding:12px 14px;background:var(--ui-input);border:1px solid color-mix(in srgb, var(--ui-border) 4%, transparent);border-radius:3px;box-shadow:0 10px 28px #0007;backdrop-filter:none;font-size:11px;color:var(--ui-muted);overflow:auto;z-index:90}
#drawer-finances .drawer-heading{margin:0 0 10px;padding:0;border:0;min-height:0}
#drawer-finances .drawer-heading>.eyebrow,#drawer-finances .window-controls button:first-child{display:none}
#drawer-finances .drawer-heading h2{font-size:12px;line-height:1.3;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ui-text);margin:0}
#drawer-finances .window-controls{top:0;right:0}
#drawer-finances .window-controls button{font-size:15px;width:18px;height:18px;min-height:0;padding:0;border:0;background:transparent;color:var(--ui-muted)}
#drawer-finances .economy-rates{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 12px;margin:0;font-size:11px;line-height:1.35}
#drawer-finances dt,#drawer-finances dd{margin:0;padding:0}
#drawer-finances dd{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
#drawer-finances .finance-positive{color:var(--ui-success)}
#drawer-finances .finance-negative{color:var(--ui-danger)}
#drawer-finances .finance-zero{color:var(--ui-muted)}
#drawer-finances .finance-total{border-top:1px solid color-mix(in srgb, var(--ui-border) 7%, transparent);margin-top:4px;padding-top:7px;font-weight:600}
#drawer-finances .finance-caption{font-size:10px;line-height:1.5;color:var(--ui-muted);margin:8px 0}
#drawer-finances .finance-section{display:flex;justify-content:space-between;font-size:10px;font-weight:600;color:var(--ui-text);border-top:1px solid color-mix(in srgb, var(--ui-border) 8%, transparent);padding-top:10px;margin:10px 0 8px}
#drawer-finances .finance-section span{color:var(--ui-muted);font-weight:400}
#drawer-finances .finance-refresh{display:block;width:auto;padding:0;margin:8px 0 0;border:0;background:transparent;color:var(--ui-muted);font-size:10px;min-height:0;text-transform:none}
#game:has(#drawer-finances:not([hidden]))>#panel-close{display:none}
/* Full-width Capital Rift header. */
.game-topbar{position:absolute;inset:0 0 auto;height:48px;box-sizing:border-box;display:flex;align-items:center;gap:20px;padding:0 max(14px,env(safe-area-inset-right)) 0 max(14px,env(safe-area-inset-left));background:var(--ui-input);border-bottom:1px solid color-mix(in srgb, var(--ui-border) 2%, transparent);pointer-events:auto;z-index:50;font-family:Arial,sans-serif}
.topbar-brand{flex:none;font-size:15px;font-weight:900;letter-spacing:1.4px;white-space:nowrap;background:linear-gradient(100deg,var(--ui-accent),var(--ui-accent));background-clip:text;-webkit-background-clip:text;color:transparent}
.game-topbar .wallet{position:static;flex:0 1 auto;min-width:0;max-width:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.game-topbar .wallet>.eyebrow{display:block;font-size:8px;line-height:10px;letter-spacing:1.2px;color:var(--ui-muted)}
.game-topbar .wallet-values{gap:8px;flex-wrap:nowrap;align-items:baseline}
.game-topbar #balance{font-size:15px;line-height:18px;letter-spacing:-.25px;margin:0;color:var(--ui-success);font-weight:700}
.game-topbar #income{font-size:10px;line-height:18px;color:var(--ui-muted)}
.game-topbar .city-search{position:relative;top:auto;left:auto;right:auto;transform:none;margin:0 0 0 auto;flex:0 1 190px;width:190px;min-width:110px;z-index:55}
.game-topbar .city-search input{min-height:26px;height:26px;border-radius:3px;border:1px solid color-mix(in srgb, var(--ui-border) 1%, transparent);background:var(--ui-panel);color:var(--ui-text);font-size:11px;padding:4px 8px 4px 25px;box-shadow:none}
.game-topbar .city-search:before{content:'';position:absolute;left:9px;top:8px;width:7px;height:7px;border:1px solid var(--ui-border);border-radius:50%;pointer-events:none}
.game-topbar .city-search:after{content:'';position:absolute;left:16px;top:15px;width:4px;height:1px;background:var(--ui-surface);transform:rotate(45deg);pointer-events:none}
.game-topbar .city-search #city-results{position:absolute;top:32px;right:0;width:min(320px,calc(100vw - 24px));background:var(--ui-input);border:1px solid color-mix(in srgb, var(--ui-border) 8%, transparent);border-radius:3px;box-shadow:0 8px 24px #0008}
.game-topbar .city-search p{position:absolute;top:29px;right:0;width:240px;max-width:calc(100vw - 24px);font-size:11px;background:var(--ui-input);border-radius:3px}
.game-topbar .system-controls{position:static;display:flex;flex:none;align-items:center;gap:4px}
.game-topbar .system-controls button{display:block;width:28px;min-width:28px;height:30px;min-height:30px;padding:5px;border:0;border-radius:3px;background:transparent;backdrop-filter:none;color:var(--ui-muted)}
.game-topbar .system-controls button:hover{color:var(--ui-text);background:color-mix(in srgb, var(--ui-surface) 4%, transparent)}
.game-topbar .system-controls svg{width:17px;height:17px}
.game-topbar button:focus-visible,.game-topbar input:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
@media(max-width:760px){.game-topbar{gap:12px}.topbar-brand{font-size:12px;letter-spacing:1px}.game-topbar .city-search{flex-basis:140px}.game-topbar #balance{font-size:13px}.game-topbar #income{font-size:9px}}
@media(max-width:600px){.game-topbar{height:88px;padding:8px 12px;display:grid;grid-template-columns:minmax(80px,1fr) auto;grid-template-rows:30px 30px;gap:8px 10px}.topbar-brand{font-size:12px;letter-spacing:.8px}.game-topbar .wallet{justify-self:end}.game-topbar .wallet-values{gap:6px}.game-topbar #balance{font-size:13px}.game-topbar #income{font-size:9px}.game-topbar .city-search{width:100%;min-width:0;margin:0}.game-topbar .city-search input{height:30px;min-height:30px;font-size:12px}.game-topbar .city-search:before{top:10px}.game-topbar .city-search:after{top:17px}.game-topbar .system-controls{justify-self:end;gap:4px}.game-topbar .system-controls button{width:30px;min-width:30px;height:30px}.game-topbar .city-search p{left:0;right:auto}.game-topbar .city-search #city-results{left:0;right:auto}}
.game-topbar .wallet-values>button{min-height:0;height:auto;line-height:18px;margin:0}
.game-topbar .city-search input{display:block;margin:0}
.game-topbar{margin:0;max-width:none;width:100%;border-radius:0}
@media(max-width:360px){.topbar-brand{font-size:10px;letter-spacing:.5px}.game-topbar{column-gap:6px}.game-topbar #balance{font-size:11px}.game-topbar #income{font-size:8px}.game-topbar .wallet-values{gap:4px}}
.game-topbar .system-controls [data-panel=account]{display:flex;align-items:center;gap:6px;width:auto;max-width:180px;padding:5px}
#topbar-username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--ui-text)}
.game-topbar .system-controls [data-panel=account] svg{flex-shrink:0}
#drawer-account.player-profile{width:min(700px,calc(100vw - 24px));background:var(--ui-input);border-color:color-mix(in srgb, var(--ui-border) 6%, transparent);border-radius:5px;color:var(--ui-muted)}
#drawer-account .drawer-heading>.eyebrow,#drawer-account #identity{display:none}
#drawer-account .profile-summary{display:flex;align-items:center;gap:16px;padding:16px;background:var(--ui-panel);border-radius:4px;margin-bottom:16px}
#drawer-account .profile-summary h3{font-size:22px;font-weight:800;margin:0 0 6px;overflow-wrap:anywhere}
.profile-monogram{display:grid;place-items:center;flex-shrink:0;width:60px;height:60px;border-radius:50%;background:var(--ui-surface);color:var(--ui-warning);font-size:24px;font-weight:900}
.profile-badge{background:var(--ui-surface);padding:4px 8px;border-radius:3px;font-size:10px;letter-spacing:1px}
.profile-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.profile-stats article{padding:14px;background:var(--ui-panel);border-radius:4px;min-width:0}
.profile-stats small{font-size:9px;letter-spacing:1.4px;display:block;min-height:24px;color:var(--ui-muted)}
.profile-stats strong{display:block;font-size:22px;color:var(--ui-text);font-variant-numeric:tabular-nums}
.profile-stats span{display:block;font-size:10px;margin-top:4px;color:var(--ui-muted)}
#drawer-account .profile-form{display:block;margin:22px 0 14px}
#drawer-account .profile-form h3{font-size:18px;margin:0 0 4px}
.profile-form p{font-size:12px;line-height:1.5}
.profile-form label{display:block;font-size:10px;letter-spacing:1px;margin:18px 0 8px}
.profile-form input{display:block;width:100%;box-sizing:border-box;background:var(--ui-canvas);border-radius:3px;border:1px solid color-mix(in srgb, var(--ui-border) 4%, transparent)}
.profile-form>small{display:block;font-size:10px;margin-top:6px;color:var(--ui-muted)}
.profile-form dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;margin:24px 0;font-size:12px}
.profile-form dd{margin:0;text-align:right;color:var(--ui-text);overflow-wrap:anywhere}
.profile-form .profile-id{font-size:10px;font-family:monospace}
#drawer-account .profile-form>button{background:var(--ui-surface);color:var(--ui-text);border:0;border-radius:3px;font-size:12px;font-weight:700;padding:10px 18px}
.profile-message{color:var(--ui-success);min-height:18px}.profile-message.profile-error{color:var(--ui-danger)}
.player-progression{padding:16px;margin:16px 0;background:var(--ui-panel);border:1px solid var(--ui-border-subtle);border-radius:4px;color:var(--ui-text)}
.player-progression h3{margin:0 0 8px;font-size:18px}.player-progression h4{margin:18px 0 6px;font-size:12px}.player-progression p{margin:6px 0;color:var(--ui-muted);font-size:12px;line-height:1.5}
.progress-track{height:8px;overflow:hidden;background:var(--ui-input);border:1px solid var(--ui-border-subtle);border-radius:99px}.progress-track span{display:block;height:100%;background:var(--ui-selected);border-radius:inherit}
.progress-weeks{display:grid;gap:6px;padding:0;margin:8px 0;list-style:none}.progress-week{display:flex;justify-content:space-between;gap:12px;padding:9px 10px;background:var(--ui-surface);border:1px solid var(--ui-border-subtle);border-radius:3px;font-size:11px}.progress-week strong{color:var(--ui-text);text-align:right}.progress-week.is-current{border-color:var(--ui-focus)}.player-progression .progress-note{font-size:10px}
@media(max-width:600px){#topbar-username{display:none}.profile-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-form dl{font-size:11px;gap:14px}#drawer-account .profile-summary h3{font-size:19px}}
/* Community chat: channel rail, conversation and composer. */
#global-chat{position:fixed;left:50%;transform:translateX(-50%);width:min(960px,calc(100vw - 40px));max-height:none;padding:0;gap:0;background:color-mix(in srgb, var(--ui-panel) 94%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 9%, transparent);border-radius:4px;box-shadow:0 18px 60px #0006;backdrop-filter:blur(14px);overflow:hidden;z-index:60;color:var(--ui-text)}
#global-chat>header.community-header{position:static;display:flex;align-items:center;justify-content:space-between;flex:none;box-sizing:border-box;width:100%;max-width:none;height:40px;min-height:40px;margin:0;padding:0 12px;background:color-mix(in srgb, var(--ui-panel) 85%, transparent);border:0;border-bottom:1px solid color-mix(in srgb, var(--ui-border) 3%, transparent);border-radius:0;box-shadow:none;color:var(--ui-text);font-size:14px;letter-spacing:0}
#global-chat>header.community-header strong{font-size:14px;font-weight:600}
#global-chat>header.community-header button{width:24px;min-width:24px;height:28px;min-height:28px;padding:0;background:transparent;border:0;border-radius:3px;color:var(--ui-muted);font-size:22px}
.community-layout{display:grid;grid-template-columns:205px minmax(0,1fr);flex:1;min-height:0}
.community-sidebar{display:flex;flex-direction:column;min-height:0;padding:12px 8px;background:color-mix(in srgb, var(--ui-input) 87%, transparent);border-right:1px solid color-mix(in srgb, var(--ui-border) 2%, transparent);overflow:auto}
.community-sidebar>p{font-size:10px;letter-spacing:1.2px;color:var(--ui-muted);margin:6px 6px 10px}
#global-chat .community-sidebar button{display:flex;align-items:center;gap:10px;width:100%;min-height:32px;padding:7px 10px;margin:0 0 10px;background:transparent;border:0;border-radius:4px;color:var(--ui-muted);text-align:left;font-size:12px;text-transform:none}
#global-chat .community-sidebar button.selected{background:var(--ui-surface);color:var(--ui-text);font-weight:600}
.community-sidebar button span{width:12px;color:var(--ui-muted)}
.community-sidebar-note{margin-top:auto;padding:14px 6px 2px;font-size:11px;color:var(--ui-muted);line-height:1.7}
.community-sidebar-note span{font-size:10px;color:var(--ui-muted)}
.community-conversation{display:flex;flex-direction:column;min-width:0;min-height:0;padding:12px;background:color-mix(in srgb, var(--ui-panel) 33%, transparent)}
.community-channel-heading{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;flex:none}
.community-channel-heading strong{font-size:14px;color:var(--ui-text)}
.community-channel-heading>span{font-size:11px;color:var(--ui-muted)}
#global-chat #chat-history{flex:1;min-height:0;overflow-y:auto;padding-right:8px;scrollbar-width:thin;scrollbar-color:var(--ui-text) transparent}
#global-chat #chat-history .chat-row{padding:0 0 14px;white-space:normal;font-size:12px;line-height:1.55}
.chat-message-meta{display:flex;align-items:baseline;gap:9px;margin-bottom:1px}
#global-chat .chat-name{font-size:12px;font-weight:700;color:var(--ui-success)}
#global-chat #chat-history time{display:inline;font-size:10px;color:var(--ui-muted);white-space:nowrap}
#global-chat .chat-text{color:var(--ui-text);white-space:pre-wrap;overflow-wrap:anywhere}
.chat-empty{color:var(--ui-muted);font-size:12px;padding:20px 0}
#global-chat form{display:flex;flex:none;gap:8px;margin:0;padding:8px 0 0;min-width:0}
#global-chat form input{box-sizing:border-box;min-height:42px;width:0;flex:1;margin:0;padding:10px 12px;background:var(--ui-canvas);border:1px solid color-mix(in srgb, var(--ui-border) 3%, transparent);border-radius:3px;color:var(--ui-text);font-size:12px}
#global-chat form button{flex:none;min-height:42px;padding:8px 18px;border:1px solid var(--ui-border);background:linear-gradient(var(--ui-surface),var(--ui-surface));color:var(--ui-text);font-size:12px;font-weight:700;border-radius:3px}
#global-chat #chat-error{flex:none;min-height:0;margin:0;color:var(--ui-danger);font-size:11px;line-height:1.5}
#global-chat #chat-error:not(:empty){padding-top:6px}
@media(max-width:600px){#global-chat{width:calc(100vw - 16px)}.community-layout{grid-template-columns:100px minmax(0,1fr)}.community-sidebar{padding:10px 5px}.community-sidebar>p{font-size:8px;letter-spacing:.8px;margin-left:4px}#global-chat .community-sidebar button{padding:8px 6px;gap:5px;font-size:11px}.community-sidebar-note{font-size:10px;padding-left:3px}.community-sidebar-note span{font-size:9px}.community-conversation{padding:10px 8px}#global-chat form{gap:5px}#global-chat form button{padding:8px 10px}#global-chat form input{font-size:16px;padding:8px}.community-channel-heading>span{font-size:10px}}
/* Keep map badges behind an open community window. */
.game-hud:has(#global-chat:not([hidden])){z-index:40}
/* Exchange workspace: resize from the bottom-right corner, move by the title bar. */
#drawer-market{position:fixed;left:clamp(8px,8vw,120px);top:90px;right:auto;bottom:auto;width:min(1040px,calc(100vw - 32px));height:min(760px,calc(100dvh - 120px));min-width:min(360px,calc(100vw - 16px));min-height:280px;max-width:100vw;max-height:100dvh;resize:both;padding:0;overflow:hidden;border-radius:12px;background:var(--ui-panel);container-type:inline-size;display:flex;flex-direction:column}
#drawer-market[hidden]{display:none}
#drawer-market>.drawer-heading{flex-shrink:0;position:relative;margin:0;padding:14px 18px;background:var(--ui-panel);border-bottom:1px solid color-mix(in srgb, var(--ui-border) 7%, transparent)}
#drawer-market>.drawer-heading h2{font-size:16px;margin:0;text-transform:uppercase;letter-spacing:1px}
#drawer-market>.card{overflow:auto;min-height:0;flex:1;padding:16px 18px 24px;overscroll-behavior:contain}
.exchange-intro{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.exchange-tabs{position:sticky;top:-16px;z-index:2;background:var(--ui-panel);padding:12px 0;border-bottom:1px solid color-mix(in srgb, var(--ui-border) 7%, transparent)}
.exchange-tabs button{background:transparent;border:0;border-radius:0;color:var(--ui-muted)}
.exchange-tabs button[aria-pressed=true]{color:var(--ui-success);box-shadow:inset 0 -2px #5ce0bc}
.exchange-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:6px}
.exchange-item{background:color-mix(in srgb, var(--ui-surface) 1%, transparent);border:1px solid transparent;padding:10px 4px;color:var(--ui-text)}
.exchange-item:hover{background:color-mix(in srgb, var(--ui-surface) 4%, transparent);border-color:color-mix(in srgb,var(--ui-success) 40%,transparent)}
.exchange-item span{font-size:10px;line-height:1.3}
.exchange-filters select{flex:0 1 220px;min-width:0}
.item-open>.exchange-grid,.item-open>.exchange-filters,.item-open>.more-items{display:none!important}
.exchange-trading{max-height:none;overflow:visible;padding:0;margin:0}
.exchange-trading h3{font-size:24px;margin:16px 0 4px}
.exchange-quotes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:20px 0}
.exchange-quotes article{padding:14px 12px;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 4%, transparent);border-radius:6px;min-width:0}
.exchange-quotes small{display:block;font-size:10px;letter-spacing:1px;color:var(--ui-muted);margin-bottom:8px}
.exchange-quotes strong{font-size:clamp(15px,2.3cqw,24px);overflow-wrap:anywhere}
.exchange .asks{color:var(--ui-danger)}.exchange .bids{color:var(--ui-success)}
.exchange-history{background:var(--ui-input);border-radius:6px;padding:14px;margin-bottom:18px}
.exchange-section-title{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--ui-muted)}
.exchange-section-title h4{margin:0;color:var(--ui-text)}
.exchange-chart svg{height:140px;color:var(--ui-warning)}
.exchange-books section{background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 4%, transparent);border-radius:6px;padding:12px;min-width:0}
.exchange-books h4{margin:0 0 12px;display:flex;justify-content:space-between;gap:8px}
.exchange-books h4 small{font-size:10px;color:var(--ui-muted);font-weight:normal}
.exchange-books tr{background:linear-gradient(to left,color-mix(in srgb,var(--ui-success) 9%,transparent) var(--depth),transparent var(--depth))}
.exchange-books .asks tr{background:linear-gradient(to left,color-mix(in srgb,var(--ui-danger) 9%,transparent) var(--depth),transparent var(--depth))}
.exchange-books td:not(:first-child),.exchange-books th:not(:first-child){text-align:right}
.exchange-sales{margin:16px 0}.exchange-sales table{width:100%;font-size:12px}
.exchange-form{background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 7%, transparent);padding:16px;border-radius:6px;margin-top:18px}
.ticket-title{grid-column:1/-1;margin:0}.exchange-form>button{grid-column:1/-1;background:var(--ui-success);color:var(--ui-text)}
.exchange-order{background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 4%, transparent);border-radius:6px;padding:16px;margin:8px 0}
@container(max-width:600px){.exchange-quotes{grid-template-columns:repeat(2,minmax(0,1fr))}.exchange-books{grid-template-columns:1fr}.exchange-filters{flex-direction:column}.exchange-filters select{flex:auto}.exchange-section-title{align-items:flex-start;flex-direction:column}}
@media(max-width:600px){#drawer-market{left:8px;top:76px;width:calc(100vw - 16px);height:calc(100dvh - 164px);max-height:calc(100dvh - 16px)}#drawer-market>.card{padding:12px}.exchange-form{gap:8px;padding:12px}}

/* Bank window: account overview and transfers. */
#drawer-bank{width:min(590px,calc(100% - 24px));padding:0;background:color-mix(in srgb, var(--ui-panel) 96%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 14%, transparent);border-radius:3px;color:var(--ui-text);backdrop-filter:blur(18px)}
#drawer-bank .drawer-heading{padding:12px 16px;margin:0;background:color-mix(in srgb, var(--ui-surface-raised) 15%, transparent);border-bottom:0;min-height:42px}
#drawer-bank .drawer-heading h2{font-size:15px;letter-spacing:1px;margin:0;font-weight:900;color:var(--ui-text)}
.bank-tabs{display:flex;gap:12px;padding:10px 14px 18px}
#drawer-bank .bank-tabs button{background:none;border:0;border-radius:0;padding:12px 10px;color:var(--ui-muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}
#drawer-bank .bank-tabs button[aria-selected=true]{color:var(--ui-text)}
#bank-accounts,#bank-transfers{padding:0 14px 20px}
#drawer-bank .bank-account{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:20px 16px;margin:0 0 12px;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid transparent;border-radius:4px;color:inherit;text-transform:none}
#drawer-bank .bank-account:hover{background:color-mix(in srgb, var(--ui-surface) 5%, transparent);border-color:color-mix(in srgb, var(--ui-border) 13%, transparent)}
.bank-account-icon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:10px;background:var(--ui-success);color:var(--ui-text);font-size:23px;font-weight:500}
.bank-account-icon.savings{background:var(--ui-warning);color:var(--ui-text)}
.bank-account-name{display:grid;gap:5px;min-width:70px}.bank-account-name strong{font-size:14px}.bank-account-name small,.bank-note,.bank-available{font-size:11px;color:var(--ui-muted);line-height:1.6}
.bank-account-value{margin-left:auto;text-align:right;font-size:clamp(17px,2.1vw,26px);font-variant-numeric:tabular-nums;font-weight:500;overflow-wrap:anywhere}
.bank-account-value small{display:block;color:var(--ui-success);font-size:11px;font-weight:700}
.bank-note{padding:8px 4px}
#drawer-bank .bank-transfer{display:grid;gap:14px;margin:0}
#drawer-bank .bank-transfer label{display:grid;gap:7px;color:var(--ui-muted);font-size:10px;letter-spacing:1.5px;text-transform:uppercase}
#drawer-bank .bank-transfer select,.bank-destination{width:100%;padding:17px 14px;background:color-mix(in srgb, var(--ui-surface) 3%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 4%, transparent);border-radius:4px;color:var(--ui-text);font-size:14px;font-weight:700;letter-spacing:0;text-transform:none}
#drawer-bank .bank-transfer select option{background:var(--ui-panel)}
#drawer-bank .bank-transfer input{box-sizing:border-box;width:100%;padding:14px;background:var(--ui-input);color:var(--ui-text);border:1px solid color-mix(in srgb, var(--ui-border) 4%, transparent);border-radius:4px;font-size:26px}
#drawer-bank .bank-swap{justify-self:center;background:none;border:0;color:var(--ui-muted);padding:0 14px;font-size:20px;min-height:28px}
#drawer-bank .bank-send{padding:15px;background:var(--ui-success);color:var(--ui-text);border:0;border-radius:4px;font-weight:700}
#drawer-bank .bank-send:disabled{opacity:.5}
.bank-available{letter-spacing:0;text-transform:none}
.bank-history-heading{display:flex;align-items:center;justify-content:space-between;margin:24px 0 8px;gap:8px}
.bank-history-heading h3{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--ui-muted);margin:0}
#drawer-bank .bank-refresh,#drawer-bank .bank-more{background:color-mix(in srgb, var(--ui-surface) 3%, transparent);color:var(--ui-muted);border:1px solid color-mix(in srgb, var(--ui-border) 8%, transparent);font-size:11px;padding:7px 10px}
#drawer-bank .bank-history article{display:flex;align-items:center;justify-content:space-between;gap:12px;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:0;border-radius:3px;margin-bottom:7px;padding:12px;font-size:12px}
.bank-history article div{min-width:0}.bank-history strong{display:block;overflow-wrap:anywhere}.bank-history small{display:block;color:var(--ui-muted);font-size:10px;margin-top:4px}.bank-history article>span{flex-shrink:0;font-weight:700;font-variant-numeric:tabular-nums}.bank-positive{color:var(--ui-success)}
#drawer-bank button:focus-visible,#drawer-bank select:focus-visible,#drawer-bank input:focus-visible{outline:2px solid var(--ui-success);outline-offset:2px}
@media(max-width:480px){#drawer-bank .bank-account{padding:16px 10px;gap:8px}.bank-account-value{font-size:17px}.bank-account-name{min-width:58px}.bank-account-name strong{font-size:12px}.bank-history article{flex-wrap:wrap}}
#drawer-bank .bank-details-toggle{width:100%;padding:13px;background:color-mix(in srgb, var(--ui-surface) 4%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 9%, transparent);color:var(--ui-text);border-radius:4px;text-align:left;font-weight:700}
#bank-checking-details{margin-top:20px}#bank-checking-details h3{font-size:14px}
.bank-cashflow{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bank-cashflow>div{display:grid;gap:6px;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);padding:12px;border-radius:4px;min-width:0}.bank-cashflow small{color:var(--ui-muted);font-size:11px}.bank-cashflow strong{font-size:15px;overflow-wrap:anywhere}.bank-negative{color:var(--ui-danger)}
.bank-activity-tools{display:flex;gap:8px;margin:16px 0}.bank-search{min-width:0;flex:1;background:var(--ui-input);color:var(--ui-text);border:1px solid color-mix(in srgb, var(--ui-border) 7%, transparent);border-radius:4px;padding:10px}
.bank-filters{display:flex;align-items:center;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border-radius:4px}#drawer-bank .bank-filters button{padding:9px;border:0;background:none;color:var(--ui-muted);font-size:11px}#drawer-bank .bank-filters button[aria-pressed=true]{background:color-mix(in srgb, var(--ui-surface) 7%, transparent);color:var(--ui-text);border-radius:4px}
#drawer-bank .bank-checking-more{background:color-mix(in srgb, var(--ui-surface) 3%, transparent);color:var(--ui-text);border:1px solid color-mix(in srgb, var(--ui-border) 9%, transparent);padding:10px}
/* Floor purchase card over the live interior scene. */
#building-interior.floor-purchase-mode{width:min(340px,calc(100vw - 24px));background:color-mix(in srgb, var(--ui-panel) 96%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 10%, transparent);border-radius:9px;padding:0;box-shadow:0 16px 60px #0008}
#building-interior.floor-purchase-mode>header{padding:12px 16px;background:var(--ui-panel);border-bottom:1px solid color-mix(in srgb, var(--ui-border) 6%, transparent)}
#building-interior.floor-purchase-mode>header>[data-collapse],#building-interior.floor-purchase-mode>header>button:not([data-close]),#building-interior.floor-purchase-mode>[data-reset],#building-interior.floor-purchase-mode>[data-inspect],#building-interior.floor-purchase-mode>[data-grid],#building-interior.floor-purchase-mode>[data-visit],#building-interior.floor-purchase-mode>[data-services],#building-interior.floor-purchase-mode [data-room-type]{display:none}
#building-interior.floor-purchase-mode>.actions{padding:10px 16px;margin:0;align-items:center}
#building-interior.floor-purchase-mode>.actions:has([data-build]){display:none}
#building-interior [data-floor-offer]{padding:8px 16px 18px;color:var(--ui-text)}
.floor-offer-eyebrow{font-size:10px;letter-spacing:1.4px;color:var(--ui-success)}
#building-interior [data-floor-offer] h2{font-size:21px;margin:8px 0}
.floor-offer-meta,.floor-offer-building{color:var(--ui-muted);font-size:12px;margin:6px 0}
.floor-offer-price{font-size:34px;font-weight:750;letter-spacing:-1px;margin:24px 0 16px;overflow-wrap:anywhere}
.floor-offer-price small{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--ui-muted);margin-top:6px}
.floor-offer-status{display:inline-block;background:color-mix(in srgb,var(--ui-success) 10%,transparent);color:var(--ui-success);padding:6px 9px;border-radius:4px;font-size:12px;font-weight:600}
.floor-offer-owner{font-size:12px;margin:18px 0;color:var(--ui-muted)}
.floor-offer-income{padding:14px;background:color-mix(in srgb,var(--ui-success) 5%,transparent);border:1px solid color-mix(in srgb,var(--ui-success) 10%,transparent);border-radius:6px;font-size:13px}
.floor-offer-income p{margin:10px 0}.floor-offer-income b{color:var(--ui-success)}.floor-offer-income small{color:var(--ui-muted);font-size:11px;line-height:1.5;display:block}
.floor-offer-note{font-size:11px;color:var(--ui-muted);line-height:1.6;margin:16px 0}
#building-interior [data-floor-offer]>[data-buy]{width:100%;min-height:46px;background:var(--ui-success);color:var(--ui-text);border:0;font-weight:650;border-radius:5px}
#building-interior [data-floor-offer][hidden]{display:none}
#building-interior.floor-purchase-mode{max-height:calc(100dvh - 110px)}
#building-interior.floor-purchase-mode>header{height:auto;min-height:36px;border-radius:0;padding:10px 16px}
#building-interior.floor-purchase-mode>header>[data-name]{font-size:13px;letter-spacing:.6px}
#building-interior.floor-purchase-mode .floor-offer-price{margin:18px 0 14px}
/* Movable, resizable business portfolio. */
#drawer-businesses{width:min(760px,calc(100vw - 32px));height:min(720px,calc(100dvh - 160px));min-width:min(350px,calc(100vw - 16px));min-height:260px;bottom:auto;resize:both;max-width:100vw;max-height:100dvh;padding:0 18px 18px;background:color-mix(in srgb, var(--ui-panel) 96%, transparent);border-radius:12px}
#drawer-businesses>.drawer-heading{position:sticky;top:0;z-index:2;background:var(--ui-panel);padding:16px 0 10px;margin-bottom:14px}
#drawer-businesses .drawer-heading>.eyebrow{display:none}
.business-categories{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.business-categories button{padding:9px 12px;font-size:12px;background:var(--ui-panel);color:var(--ui-muted);border:1px solid color-mix(in srgb, var(--ui-border) 5%, transparent);border-radius:6px}
.business-categories [aria-selected=true]{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
.business-toolbar{display:flex;gap:8px}.business-toolbar input{flex:1;min-width:0;background:var(--ui-input);border-color:var(--ui-border-subtle)}.business-toolbar button{font-size:12px}
.business-summary{font-size:11px;color:var(--ui-muted);margin:14px 0;letter-spacing:.03em}
.business-asset{display:flex;align-items:center;gap:12px;padding:14px 12px;margin:8px 0;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 3%, transparent);border-radius:8px}
.business-asset:hover{background:color-mix(in srgb, var(--ui-surface) 4%, transparent)}.business-asset-icon{display:grid;place-items:center;width:36px;height:36px;background:color-mix(in srgb, var(--ui-surface) 4%, transparent);border-radius:6px;color:var(--ui-muted);font-size:23px;flex-shrink:0}
.business-asset>div{flex:1;min-width:0;display:grid;gap:5px}.business-asset strong{font-size:14px;overflow-wrap:anywhere}.business-asset small{font-size:11px;color:var(--ui-muted)}.business-asset-value{font-size:13px;white-space:nowrap;color:var(--ui-text)}.business-asset-value small{display:block;text-align:right}.business-asset>button{padding:6px 10px;background:transparent;color:var(--ui-muted)}
.rental-occupancy{font-size:10px;width:fit-content;padding:3px 7px;border-radius:4px}.rental-occupancy.occupied{color:var(--ui-success);background:color-mix(in srgb, var(--ui-surface) 31%, transparent)}.rental-occupancy.vacant{color:var(--ui-warning);background:color-mix(in srgb, var(--ui-surface) 31%, transparent)}
#drawer-admin-tools .admin-tools-section{margin:14px 0;padding:14px;background:color-mix(in srgb, var(--ui-surface) 2%, transparent);border:1px solid color-mix(in srgb, var(--ui-border) 5%, transparent);border-radius:8px}
#drawer-admin-tools h3{margin:0 0 8px;font-size:14px;color:var(--ui-text)}
#drawer-admin-tools .muted{font-size:12px;color:var(--ui-muted)}
#drawer-admin-tools .admin-tools-section>button{background:var(--ui-panel);color:var(--ui-text);border:1px solid var(--ui-border-subtle);border-radius:6px;font-size:12px}
#drawer-admin-tools #dev-performance-toggle[aria-pressed=true]{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
.developer-performance-readout{margin:12px 0 0;padding:12px;background:var(--ui-input);color:var(--ui-text);border:1px solid var(--ui-border-subtle);border-radius:6px;font:11px/1.6 monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.admin-cash form{display:grid;gap:10px}.admin-cash label{display:grid;gap:6px;color:var(--ui-muted);font-size:11px}.admin-cash input{width:100%;min-width:0;background:var(--ui-input);color:var(--ui-text);border:1px solid var(--ui-border-subtle);border-radius:6px;padding:10px}.admin-player-results{display:grid;gap:2px}.admin-player-results:empty{display:none}.admin-player-results button{display:flex;align-items:center;gap:8px;text-align:left;background:var(--ui-panel);border:0;border-radius:5px;padding:10px 12px;font-size:12px;color:var(--ui-text)}.admin-player-results button:hover,.admin-player-results button:focus-visible{background:var(--ui-surface)}.admin-player-results span{color:var(--ui-warning);font-weight:600}.admin-cash-recipient,.admin-cash-status{font-size:12px;color:var(--ui-text);margin:0}.admin-cash form>button{background:var(--ui-surface);color:var(--ui-text);border:1px solid var(--ui-border);border-radius:6px;font-size:12px}.admin-cash button:disabled{opacity:.45;cursor:default}
@media(max-width:540px){#drawer-businesses{left:8px;right:auto;top:80px;width:calc(100vw - 16px);height:calc(100dvh - 170px);padding:0 12px 12px}.business-categories button{flex:1 0 28%;padding:9px 5px}.business-asset{gap:8px;padding:12px 8px}.business-asset-icon{width:28px;height:30px}.business-asset strong{font-size:12px}}
.game-drawer.radio-dropdown{width:min(340px,calc(100vw - 16px));min-width:0;max-height:calc(100dvh - 110px);box-sizing:border-box}
.radio-dropdown label{display:block;margin:12px 0}
.radio-dropdown select{width:100%;margin-top:6px}
.radio-playback{display:flex;gap:8px;margin-top:16px}
.radio-playback button{flex:1}
.radio-volume output{float:right;color:var(--ui-accent)}
.radio-volume input{display:block;width:100%;margin-top:8px;accent-color:var(--ui-accent)}
.game-topbar .system-controls .radio-playing{color:var(--ui-success)}
/* Shared UI standard: geometry belongs to components; colors belong to theme.css. */
html,body{color:var(--ui-text);background-color:var(--ui-canvas);font-family:var(--ui-font)}
body>header,.card:not(.world-card){background-color:var(--ui-panel);color:var(--ui-text);border-color:var(--ui-border)}
:is(body,#game) :is(.game-drawer,#global-chat,#selected-object,#building-interior,#food-cart-panel,#mining-panel,#survey-panel,#worker-placement-dialog,.production-dialog,.land-bulk-panel,.land-build-toolbar,#land-build-toolbar,#inventory-item-menu,.maplibregl-popup-content){background:var(--ui-panel);color:var(--ui-text);border-color:var(--ui-border);box-shadow:0 15px 55px var(--ui-shadow)}
:is(.game-drawer,#global-chat,#selected-object,#building-interior,#food-cart-panel,#survey-panel) > :is(header,.drawer-heading){background:var(--ui-header);color:var(--ui-text);border-color:var(--ui-border-subtle)}
:is(.game-topbar,.game-dock,#minimized-windows,.wallet,.system-controls){background-color:var(--ui-panel);color:var(--ui-text);border-color:var(--ui-border)}
:is(body, #game, .game-drawer, #global-chat, #building-interior, #food-cart-panel, dialog) :is(input,select,textarea){background-color:var(--ui-input);color:var(--ui-text);border-color:var(--ui-border);accent-color:var(--ui-accent)}
select option{background:var(--ui-input);color:var(--ui-text)}
input::placeholder,textarea::placeholder{color:var(--ui-muted);opacity:1}
:is(body,#game,.game-drawer,#global-chat,#building-interior,#food-cart-panel,dialog) button{background:var(--ui-surface);color:var(--ui-text);border-color:var(--ui-border)}
:is(body,#game,.game-drawer,#global-chat,#building-interior,#food-cart-panel,dialog) button:hover:not(:disabled){background:var(--ui-hover);border-color:var(--ui-accent)}
:is(body,#game,.game-drawer,#global-chat,#building-interior,#food-cart-panel,dialog) button:is([aria-selected=true],[aria-pressed=true],.selected){background:var(--ui-selected);color:var(--ui-text);border-color:var(--ui-accent)}
:is(button,input,select,textarea,a,summary):focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px}
button:disabled{opacity:.45;cursor:default}
:is(dialog,.production-dialog)::backdrop{background:var(--ui-backdrop)}
:is(.muted,.eyebrow,.business-summary,.business-asset small,.profile-form label,.cart-fine,.finance-caption){color:var(--ui-muted)}
:is(.community-sidebar,.community-conversation,.exchange-tabs,.business-categories,.bank-filters){background-color:var(--ui-panel)}
:is(.inventory-slot,.business-asset,.worker-property,.economy-card,.production-job,.profile-stats article,.bank-account,.bank-history article,.exchange-quotes article,.exchange-books section,.exchange-form,.exchange-order){background-color:var(--ui-surface);border-color:var(--ui-border-subtle)}
.rental-occupancy.occupied,.finance-positive,.bank-positive{color:var(--ui-success)}
.rental-occupancy.vacant,.cart-warning{color:var(--ui-warning)}
.finance-negative,.bank-negative,.error{color:var(--ui-danger)}
.rental-occupancy.occupied{background:color-mix(in srgb,var(--ui-success) 14%,var(--ui-panel))}
.rental-occupancy.vacant{background:color-mix(in srgb,var(--ui-warning) 14%,var(--ui-panel))}
*{scrollbar-color:var(--ui-border) var(--ui-input)}

.bank-account-icon{background:var(--ui-success);color:var(--ui-on-accent)}
.bank-account-icon.savings,.cart-cuisines em{background:var(--ui-warning);color:var(--ui-on-accent)}
/* Map controls are interface chrome, separate from the map's visual layers. */
#game :is(.maplibregl-ctrl-group,.maplibregl-ctrl-attrib,.maplibregl-popup-content){background:var(--ui-panel);color:var(--ui-text);border-color:var(--ui-border)}
#game .maplibregl-ctrl-attrib a{color:var(--ui-accent)}
#game .maplibregl-ctrl-icon,#game .maplibregl-ctrl-attrib-button{filter:invert(1)}
#game .maplibregl-popup-close-button{color:var(--ui-text)}
.radio-volume output{color:var(--ui-accent)}
.radio-volume input{accent-color:var(--ui-accent)}

/* Compact Layers menu anchored below the top HUD. */
.top-layers{position:absolute;top:calc(var(--topbar-height, 76px) + 12px);right:24px;pointer-events:auto}
.top-layers .map-layers-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:48px;min-height:48px;padding:6px;background:var(--ui-panel);color:var(--ui-text);border:1px solid var(--ui-border-subtle);border-radius:10px;font-size:24px}
.top-layers .map-layers-button:hover,.top-layers .map-layers-button[aria-expanded=true]{background:var(--ui-hover);border-color:var(--ui-border)}
#drawer-layers{width:280px;min-width:0;max-width:calc(100vw - 16px);padding:8px;background:var(--ui-panel);border:1px solid var(--ui-border-subtle);border-radius:12px;overflow:auto}
#drawer-layers .drawer-heading{display:none}
#drawer-layers .map-layers-content{margin:0;padding:0;border:0;background:transparent}
#drawer-layers .layer-menu{display:grid;gap:4px}
#drawer-layers .layer-menu button{display:flex;align-items:center;gap:16px;width:100%;min-height:48px;padding:12px 14px;text-align:left;text-transform:uppercase;letter-spacing:1px;font-size:13px;font-weight:600;border:1px solid transparent;background:transparent;color:var(--ui-text)}
#drawer-layers .layer-menu button span{width:24px;text-align:center;font-size:23px;color:var(--ui-muted)}
#drawer-layers .layer-menu button:hover{background:var(--ui-hover)}
#drawer-layers .layer-menu button[aria-pressed=true]{background:var(--ui-selected);border-color:var(--ui-border)}
#drawer-layers button:focus-visible,.top-layers button:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
#drawer-layers [role=status]:empty,#drawer-layers .layer-actions:not(:has(button:not([hidden]))){display:none}
#drawer-layers [role=status]{padding:0 12px}
#drawer-layers .layer-actions{padding:0 8px 8px}
body:has(#drawer-layers:not([hidden])) #panel-close{display:none}
@media(max-width:700px){.top-layers{right:12px;top:calc(var(--topbar-height, 76px) + 8px)}}

.top-layers .map-layers-button svg{width:24px;height:24px}
/* Starting-city choices inherit the shared drawer and control palette. */
.welcome-cities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.welcome-cities button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 64px; text-align: left; white-space: normal; }
.welcome-cities small { color: var(--ui-muted); }
@media (max-width: 380px) { .welcome-cities { grid-template-columns: 1fr; } }
.electricity-legend{position:absolute;left:8px;bottom:36px;z-index:2;max-width:calc(100% - 16px);box-sizing:border-box;padding:8px 10px;border:1px solid var(--ui-border);border-radius:6px;background:var(--ui-panel);color:var(--ui-text);font-size:12px;pointer-events:none}
.electricity-legend small{color:var(--ui-muted)}
.electricity-scale{height:8px;margin:5px 0;background:linear-gradient(to right,#2ca25f,#f4df42,#f59532,#d73027)}
.electricity-popup .maplibregl-popup-content{white-space:pre-line}


/* Finance center controls: every finance/progression foundation has a visible entry point. */
.finance-center{display:grid;gap:16px;min-width:min(620px,calc(100vw - 40px));max-height:calc(100dvh - 130px);overflow:auto;padding-right:4px}
.finance-actions,.finance-report-ranges{display:flex;gap:8px;flex-wrap:wrap}
.finance-actions button,.finance-report-ranges button{flex:1 1 150px}
.finance-snapshot,.finance-investments,.finance-report-section,.finance-calendar-section{border-top:1px solid var(--line);padding-top:14px}
.finance-snapshot h3,.finance-section-heading h3{margin:0;font-size:15px}
.finance-snapshot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.finance-snapshot-grid>div{border:1px solid var(--line);border-radius:8px;padding:10px}
.finance-snapshot-grid small{display:block;color:var(--muted);font-size:10px}
.finance-snapshot-grid strong{display:block;margin-top:5px;font-family:Georgia,serif;font-size:17px}
.finance-section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.finance-section-heading button{flex:0 0 auto}
.finance-bonus{border-left:3px solid var(--accent);padding:8px 10px;margin:12px 0 0;color:var(--muted);font-size:12px}
.finance-caption{color:var(--muted);font-size:11px;line-height:1.55}
.finance-report-list{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:12px 0;font-size:12px}
.finance-report-list dt{text-transform:capitalize;color:var(--muted)}
.finance-report-list dd{margin:0;text-align:right}
.finance-positive{color:var(--ui-success,#64d39b)}
.finance-negative{color:var(--ui-danger,#ff8d8d)}
.finance-warning{color:var(--ui-warning,#f3cb75);font-size:11px;line-height:1.5}
.finance-calendar-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:9px 0;font-size:11px}
.finance-calendar-row span{color:var(--muted);text-align:right}
.finance-investment-form{display:flex;align-items:end;gap:10px;flex-wrap:wrap}
.finance-investment-form label{flex:1 1 160px;margin:0}
.finance-investment-form button{flex:0 0 auto}
.bank-debt-status,.bank-investment-status{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.bank-debt-status h3,.bank-investment-status h3{margin:0 0 8px;font-size:14px}
@media (max-width:540px){
 .finance-center{min-width:0}
 .finance-snapshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .finance-calendar-row{display:block}
 .finance-calendar-row span{display:block;text-align:left;margin-top:4px}
 .finance-investment-form{display:block}
 .finance-investment-form button{margin-top:10px;width:100%}
}
/* Landing and sign-in */
#auth:not([hidden]) {
  max-width: 1380px;
  min-height: calc(100dvh - 150px);
  gap: clamp(36px, 8vw, 130px);
  padding: 64px 7vw 80px;
}
#auth .intro { position: relative; padding: 34px 0; }
#auth .intro h1 { font-size: clamp(48px, 6.2vw, 92px); line-height: .99; margin: 26px 0; }
#auth .intro h1 em { color: var(--ui-accent); font-weight: 400; }
#auth .intro p { max-width: 460px; font-size: 17px; line-height: 1.75; }
#auth .pills span { background: transparent; border-color: var(--ui-border); color: var(--ui-text); }
.landing-coordinate { margin-top: 80px; color: var(--ui-muted); font-size: 10px; letter-spacing: .2em; }
#auth .login {
  width: 100%; max-width: 480px; justify-self: end;
  padding: clamp(26px, 3.5vw, 48px); border: 1px solid var(--ui-border);
  background: var(--ui-input); box-shadow: 0 28px 80px var(--ui-shadow);
}
#auth .login h2 { font-size: 36px; margin: 14px 0 10px; }
.landing-subtitle { color: var(--ui-muted); margin: 0 0 28px; line-height: 1.5; }
#google-signin:empty { display: none; }
#google-status:empty { display: none; }
#google-status { font-size: 12px; line-height: 1.5; }
#google-cancel { padding-left: 0; color: var(--ui-accent); }
.login-divider { display: flex; align-items: center; gap: 12px; color: var(--ui-muted); font-size: 11px; margin: 22px 0; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--ui-border); }
#auth .login label { color: var(--ui-text); margin: 18px 0; }
#auth .login input { background: var(--ui-canvas); padding: 14px; }
#auth .login input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
#auth .login .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#auth .login .actions button { min-height: 46px; }
#auth .login button[type=submit] { background: var(--ui-accent); color: var(--ui-on-accent); }
#auth .login > p.muted { font-size: 12px; line-height: 1.6; margin-top: 24px; }
@media (max-width: 700px) {
  #auth:not([hidden]) { grid-template-columns: 1fr; padding: 32px 20px 50px; gap: 24px; }
  #auth .intro { display: block; padding: 12px 0 0; }
  #auth .intro h1 { font-size: clamp(42px, 10vw, 64px); margin: 16px 0; }
  #auth .intro p { font-size: 15px; }
  #auth .pills { margin-top: 18px; }
  .landing-coordinate { display: none; }
  #auth .login { justify-self: stretch; max-width: none; padding: 26px; }
}

/* Login photography stays behind the page and stops when the game opens. */
.login-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--ui-canvas); }
.login-backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0; transition: opacity 1.5s ease; }
.login-backdrop img.is-active { opacity: 1; }
.login-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ui-canvas) 80%, transparent), color-mix(in srgb, var(--ui-canvas) 48%, transparent)), linear-gradient(0deg, color-mix(in srgb, var(--ui-canvas) 70%, transparent), transparent 60%); }
body:has(#auth[hidden]) .login-backdrop { display: none; }
body:has(#auth:not([hidden])) > header,
body:has(#auth:not([hidden])) > footer,
#auth { position: relative; z-index: 1; }
body:has(#auth:not([hidden])) > header,
body:has(#auth:not([hidden])) > footer { background: color-mix(in srgb, var(--ui-input) 82%, transparent); }
#auth .login { background: color-mix(in srgb, var(--ui-input) 94%, transparent); }
#auth .intro p { color: var(--ui-text); }
#auth .pills span { background: color-mix(in srgb, var(--ui-input) 78%, transparent); }
.slideshow-pause { margin-top: 22px; padding: 8px 12px; border: 1px solid var(--ui-border); background: var(--ui-input); color: var(--ui-muted); font-size: 11px; }
.slideshow-pause:hover { color: var(--ui-text); }
.slideshow-pause:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .login-backdrop img { transition: none; } }

/* Landing page: keep the photography visible while maintaining clear form contrast. */
body:has(#auth:not([hidden])) > header {
  height: 88px; padding: 0 clamp(24px, 5vw, 80px);
  background: color-mix(in srgb, var(--ui-canvas) 70%, transparent);
  border-color: color-mix(in srgb, var(--ui-text) 15%, transparent);
}
body:has(#auth:not([hidden])) .brand { font-size: 15px; letter-spacing: .16em; }
body:has(#auth:not([hidden])) .brand .mark { width: 42px; height: 42px; line-height: 42px; font-size: 25px; }
body:has(#auth:not([hidden])) .brand small { font-size: 10px; letter-spacing: .04em; color: var(--ui-muted); }
body:has(#auth:not([hidden])) #identity { font-size: 10px; letter-spacing: .18em; }
#auth:not([hidden]) {
  max-width: 1560px; min-height: calc(100dvh - 152px);
  grid-template-columns: minmax(0, 1fr) minmax(360px, 455px);
  gap: clamp(50px, 8vw, 140px); padding: 66px clamp(24px, 6vw, 92px) 74px;
}
#auth .intro { padding: 12px 0; }
#auth .landing-kicker { display: flex; align-items: center; gap: 10px; color: var(--ui-accent); letter-spacing: .17em; }
.landing-kicker span { width: 7px; height: 7px; border-radius: 50%; background: var(--ui-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 16%, transparent); }
#auth .intro h1 { font-family: Georgia, serif; font-size: clamp(62px, 7vw, 104px); line-height: .97; letter-spacing: -.055em; margin: 30px 0 24px; }
#auth .intro h1 em { font-weight: 400; color: var(--ui-accent); }
#auth .intro > p { max-width: 475px; color: var(--ui-text); font-size: 16px; line-height: 1.75; }
.landing-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 580px; margin-top: 52px; border-top: 1px solid color-mix(in srgb, var(--ui-text) 30%, transparent); }
.landing-features > div { display: grid; gap: 6px; padding: 20px 12px 0 0; }
.landing-features span { color: var(--ui-accent); font-size: 10px; letter-spacing: .12em; }
.landing-features strong { color: var(--ui-text); font-size: 14px; font-weight: 700; }
.landing-features small { color: var(--ui-text); font-size: 11px; opacity: .8; }
.landing-photo-control { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 64px; }
.landing-photo-control > span { color: var(--ui-text); opacity: .72; font-size: 9px; letter-spacing: .16em; }
.landing-photo-control .slideshow-pause { margin: 0; }
#auth .login {
  max-width: 455px; padding: 38px; border-radius: 18px;
  background: color-mix(in srgb, var(--ui-input) 95%, transparent);
  border-color: color-mix(in srgb, var(--ui-text) 18%, transparent);
}
.login-topline { display: flex; justify-content: space-between; align-items: center; }
.login-topline .eyebrow { color: var(--ui-accent); letter-spacing: .15em; }
.login-topline-mark { color: var(--ui-accent); font-size: 25px; line-height: 1; }
#auth .login h2 { font-family: Georgia, serif; font-size: 38px; letter-spacing: -.035em; margin: 18px 0 10px; }
#auth .landing-subtitle { font-size: 13px; margin: 0 0 24px; }
#auth .login label { margin: 17px 0; font-size: 11px; }
#auth .login input { border-radius: 8px; min-height: 46px; }
#auth .login .actions { margin-top: 22px; }
#auth .login .actions button { min-height: 48px; }
#auth .login > p.muted { margin-top: 23px; }
body:has(#auth:not([hidden])) > footer { padding-inline: clamp(24px, 5vw, 80px); }
@media (max-width: 760px) {
  body:has(#auth:not([hidden])) > header { height: 72px; }
  body:has(#auth:not([hidden])) #identity { display: none; }
  #auth:not([hidden]) { grid-template-columns: 1fr; gap: 32px; padding: 40px 24px 56px; }
  #auth .intro { display: block; padding: 0; }
  #auth .intro h1 { font-size: clamp(54px, 11vw, 75px); margin: 24px 0 20px; }
  #auth .intro > p { font-size: 15px; }
  .landing-features { margin-top: 32px; }
  .landing-photo-control { margin-top: 32px; }
  #auth .login { max-width: none; justify-self: stretch; padding: 28px; }
  #auth .login h2 { font-size: 34px; }
}
@media (max-width: 380px) { .landing-features small { font-size: 10px; } }

.brand picture { display: block; flex-shrink: 0; }
.brand .brand-logo { display: block; width: 60px; height: 60px; object-fit: cover; border-radius: 12px; }
@media (max-width: 760px) { .brand .brand-logo { width: 48px; height: 48px; } }

#readonly-banner{position:fixed;inset:0 0 auto;z-index:10001;box-sizing:border-box;padding:8px 12px;text-align:center;background:var(--ui-panel);color:var(--ui-warning);border-bottom:1px solid var(--ui-border);font:700 12px/1.3 Arial,sans-serif;letter-spacing:.04em}
#readonly-banner[hidden]{display:none}
#game .crop-allocation-editor{margin:10px 0 14px;padding:12px;border:1px solid var(--ui-border-subtle);border-radius:10px;background:var(--ui-panel);color:var(--ui-text)}
#game .crop-allocation-summary,#game .crop-allocation-layout,#game .crop-allocation-controls,#game .crop-allocation-actions{display:flex;align-items:center;gap:10px}
#game .crop-allocation-summary{justify-content:space-between;color:var(--ui-muted);font-size:12px}
#game .crop-allocation-summary strong{color:var(--ui-accent)}
#game .crop-allocation-layout{align-items:flex-start;margin:8px 0}
#game .crop-allocation-wheel{flex:0 0 150px;width:150px}
#game .crop-allocation-wheel svg{display:block;width:100%;height:auto;overflow:visible}
#game .crop-allocation-wheel :is(path,circle)[role=button]{cursor:pointer;transition:filter .12s ease}
#game .crop-allocation-wheel :is(path,circle)[role=button]:hover,#game .crop-allocation-wheel :is(path,circle)[aria-pressed=true]{filter:brightness(1.2);stroke:var(--ui-focus);stroke-width:3}
#game .crop-allocation-wheel :is(path,circle)[role=button]:focus-visible{outline:none;stroke:var(--ui-focus);stroke-width:4}
#game .crop-allocation-legend{display:grid;gap:4px;flex:1;min-width:0}
#game button.crop-allocation-legend{display:flex;align-items:center;gap:7px;min-height:30px;padding:4px 7px;text-align:left;background:transparent;border:1px solid transparent;color:var(--ui-text)}
#game button.crop-allocation-legend:hover,#game button.crop-allocation-legend.selected{background:var(--ui-selected);border-color:var(--ui-border)}
#game .crop-allocation-legend i{flex:0 0 10px;width:10px;height:10px;border-radius:50%;background:var(--crop-color)}
#game .crop-allocation-legend span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
#game .crop-allocation-legend strong{font-variant-numeric:tabular-nums}
#game .crop-allocation-note{margin:7px 0;color:var(--ui-muted);font-size:12px;line-height:1.45}
#game .crop-allocation-editor button{min-height:32px}
#game .crop-add-menu{margin-top:6px;padding:8px;border:1px solid var(--ui-border);border-radius:8px;background:var(--ui-surface)}
#game .crop-add-menu input{width:100%;box-sizing:border-box}
#game .crop-add-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:4px;max-height:180px;margin-top:6px;overflow:auto}
#game .crop-add-options button{text-align:left;background:var(--ui-panel);color:var(--ui-text);border:1px solid var(--ui-border-subtle)}
#game .crop-allocation-detail{margin-top:10px;padding-top:8px;border-top:1px solid var(--ui-border-subtle)}
#game .crop-allocation-detail h4{margin:2px 0 8px}
#game .crop-allocation-controls input{width:76px;text-align:center;font-variant-numeric:tabular-nums}
#game .crop-allocation-detail input[type=range]{display:block;width:100%;margin:10px 0;accent-color:var(--ui-accent)}
#game .crop-allocation-detail p,.crop-allocation-empty{color:var(--ui-muted);font-size:12px}
#game .crop-allocation-actions{justify-content:flex-end}
@media(max-width:560px){#game .crop-allocation-layout{gap:6px}#game .crop-allocation-wheel{flex-basis:124px;width:124px}#game .crop-allocation-editor{padding:9px}}