* {
  box-sizing: border-box;
}

@property --level-progress {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --hud-bottom: calc(20px + env(safe-area-inset-bottom));
  --secondary-toolbar-lift: 102px;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #b9dbec;
}

body {
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

.start-menu {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: block;
  padding: 0;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 220 161 / 0.1)),
    rgb(72 101 120 / 0.1);
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

body:not(.is-menu-open) .start-menu {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.start-panel {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100%;
  padding: 0;
  color: #14110c;
  font-family: "Courier New", ui-monospace, monospace;
  pointer-events: none;
}

.menu-brand {
  position: absolute;
  top: clamp(54px, 11vh, 122px);
  left: 50%;
  width: min(96vw, 980px);
  margin: 0;
  text-align: center;
  transform: translateX(-50%);
}

.menu-island-mark {
  display: none;
}

.menu-brand h1 {
  margin: 0;
  color: #12110f;
  font-size: clamp(58px, 11vw, 132px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-text-stroke: 2px #fff8e8;
  paint-order: stroke fill;
  text-shadow:
    -5px -5px 0 #fff8e8,
    0 -5px 0 #fff8e8,
    5px -5px 0 #fff8e8,
    -5px 0 0 #fff8e8,
    5px 0 0 #fff8e8,
    -5px 5px 0 #fff8e8,
    0 5px 0 #fff8e8,
    5px 5px 0 #fff8e8,
    0 11px 0 rgb(73 57 36 / 0.28),
    0 18px 26px rgb(45 36 26 / 0.22);
  image-rendering: pixelated;
}

.menu-brand h1::after {
  content: "";
  display: block;
  width: min(420px, 56vw);
  height: 10px;
  margin: 14px auto 0;
  background:
    linear-gradient(90deg, transparent 0 7%, #fff8e8 7% 17%, #12110f 17% 83%, #fff8e8 83% 93%, transparent 93%),
    linear-gradient(#fff8e8, #fff8e8);
  box-shadow: 0 5px 0 rgb(73 57 36 / 0.18);
  image-rendering: pixelated;
}

.menu-brand p {
  display: none;
}

.menu-screen {
  display: grid;
  gap: 14px;
  width: min(340px, calc(100vw - 40px));
  margin-top: 0;
  pointer-events: auto;
}

.menu-screen[hidden] {
  display: none;
}

.menu-primary-button,
.menu-secondary-button,
.save-slot-button {
  min-height: 58px;
  color: #15110d;
  font: 900 17px/1 "Courier New", ui-monospace, monospace;
  letter-spacing: 0;
  background: rgb(255 246 210 / 0.92);
  border: 3px solid #ffffff;
  border-radius: 0;
  box-shadow:
    0 0 0 3px #16120d,
    0 7px 0 3px rgb(71 54 35 / 0.32),
    0 18px 30px rgb(71 54 35 / 0.2);
  cursor: pointer;
  image-rendering: pixelated;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    background 120ms ease;
}

.menu-primary-button {
  background: #ffe36f;
}

.menu-primary-button:hover:not(:disabled),
.menu-secondary-button:hover:not(:disabled),
.save-slot-button:hover {
  background: #fff0a7;
  transform: translateY(4px);
  box-shadow:
    0 0 0 3px #16120d,
    0 3px 0 3px rgb(71 54 35 / 0.3),
    0 12px 24px rgb(71 54 35 / 0.18);
}

.menu-primary-button:disabled,
.menu-secondary-button:disabled {
  cursor: wait;
  opacity: 0.58;
}

.world-form label {
  justify-self: center;
  padding: 4px 8px;
  color: #12110f;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  text-shadow:
    -2px -2px 0 #fff8e8,
    2px -2px 0 #fff8e8,
    -2px 2px 0 #fff8e8,
    2px 2px 0 #fff8e8;
}

.world-form input {
  width: 100%;
  height: 54px;
  padding: 0 14px;
  color: #14110c;
  font: 900 16px/1 "Courier New", ui-monospace, monospace;
  background: rgb(255 253 245 / 0.92);
  border: 3px solid #ffffff;
  border-radius: 0;
  box-shadow:
    0 0 0 3px #16120d,
    0 8px 0 3px rgb(71 54 35 / 0.24);
  outline: none;
}

.world-form input:focus {
  background: #fffdf0;
  box-shadow:
    0 0 0 3px #16120d,
    0 0 0 7px rgb(255 227 111 / 0.55),
    0 8px 0 3px rgb(71 54 35 / 0.24);
}

.menu-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.world-form {
  width: min(420px, calc(100vw - 40px));
}

.save-screen {
  width: min(460px, calc(100vw - 40px));
}

.cloud-screen {
  width: min(520px, calc(100vw - 40px));
  max-height: min(650px, 74vh);
  overflow: auto;
  padding: 4px 8px 10px;
}

.cloud-status {
  padding: 10px 12px;
  color: #12110f;
  font: 900 13px/1.35 "Courier New", ui-monospace, monospace;
  text-align: center;
  text-shadow:
    -2px -2px 0 #fff8e8,
    2px -2px 0 #fff8e8,
    -2px 2px 0 #fff8e8,
    2px 2px 0 #fff8e8;
}

.cloud-form {
  display: grid;
  gap: 10px;
}

.cloud-form[hidden],
.cloud-connected-actions[hidden] {
  display: none;
}

.cloud-form label {
  justify-self: center;
  padding: 3px 8px;
  color: #12110f;
  font: 900 14px/1 "Courier New", ui-monospace, monospace;
  text-shadow:
    -2px -2px 0 #fff8e8,
    2px -2px 0 #fff8e8,
    -2px 2px 0 #fff8e8,
    2px 2px 0 #fff8e8;
}

.cloud-form input {
  width: 100%;
  height: 48px;
  padding: 0 12px;
  color: #14110c;
  font: 900 14px/1 "Courier New", ui-monospace, monospace;
  background: rgb(255 253 245 / 0.92);
  border: 3px solid #ffffff;
  border-radius: 0;
  box-shadow:
    0 0 0 3px #16120d,
    0 6px 0 3px rgb(71 54 35 / 0.22);
  outline: none;
}

.cloud-form input:focus {
  background: #fffdf0;
  box-shadow:
    0 0 0 3px #16120d,
    0 0 0 7px rgb(255 227 111 / 0.48),
    0 6px 0 3px rgb(71 54 35 / 0.22);
}

.cloud-connected-actions {
  display: grid;
  gap: 10px;
}

.cloud-save-list {
  max-height: min(230px, 26vh);
}

.save-slot-badge {
  justify-self: end;
  min-width: 48px;
  padding: 2px 6px;
  color: #12110f;
  font-size: 11px;
  text-align: center;
  background: #fff8e8;
  border: 2px solid #16120d;
}

.save-list {
  display: grid;
  gap: 13px;
  max-height: min(310px, 42vh);
  overflow: auto;
  padding: 5px 6px 9px;
}

.save-slot-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  width: 100%;
  min-height: 70px;
  padding: 12px 14px;
  text-align: left;
  background: rgb(255 253 245 / 0.92);
}

.save-slot-name {
  overflow: hidden;
  color: #14110c;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.save-slot-meta,
.save-slot-time,
.empty-save {
  color: rgb(20 17 12 / 0.78);
  font-size: 12px;
  font-weight: 900;
}

.save-slot-meta {
  grid-column: 1 / -1;
}

.save-slot-time {
  white-space: nowrap;
}

.empty-save {
  padding: 18px 12px;
  color: #14110c;
  text-align: center;
  text-shadow:
    -2px -2px 0 #fff8e8,
    2px -2px 0 #fff8e8,
    -2px 2px 0 #fff8e8,
    2px 2px 0 #fff8e8;
  background: transparent;
}

@media (prefers-reduced-motion: no-preference) {
  body.is-menu-open .menu-brand h1 {
    animation: menu-title-float 2600ms ease-in-out infinite;
  }

  body.is-menu-open .menu-screen {
    animation: menu-buttons-rise 360ms ease-out both;
  }
}

@keyframes menu-title-float {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes menu-buttons-rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.menu-return-button {
  position: fixed;
  top: 18px;
  right: 20px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #5c4f3c;
  background: rgba(255, 253, 245, 0.65);
  backdrop-filter: blur(8px);
  border: 2px solid #e6dfc7;
  border-radius: 14px;
  box-shadow:
    0 14px 28px rgb(108 91 62 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.5);
  cursor: pointer;
}

.menu-return-button:hover:not(:disabled) {
  background: #ffeaa3;
  border-color: rgb(171 132 52 / 0.5);
  box-shadow:
    0 2px 0 rgb(150 119 70 / 0.22),
    0 0 18px rgb(255 218 95 / 0.44);
}

.menu-return-button:disabled {
  opacity: 0;
  pointer-events: none;
}

body.is-menu-open .city-stats,
body.is-menu-open .level-readout,
body.is-menu-open .control-hints,
body.is-menu-open .road-shape-toolbar,
body.is-menu-open .build-toolbar,
body.is-menu-open .menu-return-button {
  opacity: 0;
  pointer-events: none;
}

.ui-panel {
  background: rgba(255, 253, 245, 0.65);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 2px solid #e6dfc7;
  color: #5c4f3c;
  font-family: "Courier New", Cambria, serif;
  box-shadow:
    0 16px 34px rgb(108 91 62 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.city-stats,
.control-hints,
.build-toolbar,
.road-shape-toolbar {
  /* ui-panel */
  background: rgba(255, 253, 245, 0.65);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  border: 2px solid #e6dfc7;
  color: #5c4f3c;
  font-family: "Courier New", Cambria, serif;
  box-shadow:
    0 16px 34px rgb(108 91 62 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.5);
}

.city-stats {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 2;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  width: min(336px, calc(100vw - 32px));
  padding: 12px 14px;
  align-items: start;
}

.level-badge {
  --level-progress: 0deg;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background:
    conic-gradient(#79b88a var(--level-progress), rgb(74 99 108 / 0.16) 0),
    rgb(255 255 255 / 0.52);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.72);
  transition: --level-progress 180ms linear;
}

.level-core {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  align-content: center;
  background: rgb(244 252 249 / 0.9);
  border-radius: 50%;
}

.level-core span {
  color: rgb(92 79 60 / 0.65);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.level-core strong {
  color: #5c4f3c;
  font-size: 22px;
  line-height: 1;
}

.stats-main {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px 10px;
}

.cash-readout,
.time-readout {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  padding: 2px 0 6px;
  border-bottom: 1px solid rgb(138 111 71 / 0.14);
}

.cash-readout span,
.time-readout span,
.city-status,
.level-readout {
  font-size: 12px;
  font-weight: 700;
}

.cash-readout strong {
  color: #6b583b;
  font-size: 22px;
  line-height: 1;
}

.level-readout,
.city-status {
  grid-column: 1 / -1;
  min-height: 16px;
  color: rgb(92 79 60 / 0.68);
  font-weight: 600;
  line-height: 1.25;
}

.level-readout {
  position: fixed;
  right: 20px;
  bottom: 132px;
  z-index: 4;
  display: block;
  width: min(280px, calc(100vw - 40px));
  min-height: 0;
  padding: 11px 14px 11px 42px;
  color: #5d4524;
  background: rgba(255, 236, 162, 0.84);
  border: 2px solid rgba(164, 119, 35, 0.32);
  border-radius: 16px;
  box-shadow:
    0 14px 30px rgb(108 91 62 / 0.2),
    0 0 24px rgb(255 214 86 / 0.42),
    inset 0 1px 0 rgb(255 255 255 / 0.58);
  pointer-events: none;
}

.level-readout::before {
  content: "!";
  position: absolute;
  left: 12px;
  top: 50%;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #6c4d20;
  background: rgba(255, 207, 75, 0.92);
  border-radius: 50%;
  transform: translateY(-50%);
}

.city-status {
  display: block;
  overflow-wrap: anywhere;
  padding-top: 2px;
  border-top: 1px solid rgb(138 111 71 / 0.12);
  font-size: 11px;
}

.time-readout b {
  color: #755d43;
  font-size: 13px;
}

.demand-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 22px minmax(86px, 1fr) 30px;
  align-items: center;
  gap: 8px;
  min-height: 22px;
}

.city-stats .demand-row {
  display: none;
}

.demand-icon {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  transform-origin: 50% 75%;
}

.demand-row.is-demand-high .demand-icon {
  animation: demand-wiggle 850ms ease-in-out infinite;
}

.demand-heart::before,
.demand-heart::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 11px;
  height: 15px;
  background: #d9857a;
  border-radius: 11px 11px 3px 3px;
}

.demand-heart::before {
  left: 2px;
  transform: rotate(-42deg);
}

.demand-heart::after {
  right: 2px;
  transform: rotate(42deg);
}

.demand-basket::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 14px;
  height: 9px;
  background: #d9aa61;
  border: 2px solid #7e6544;
  border-radius: 2px 2px 6px 6px;
}

.demand-basket::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 10px;
  height: 9px;
  border: 2px solid #7e6544;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}

.demand-sprout::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 4px;
  width: 3px;
  height: 14px;
  background: #7e8f45;
  border-radius: 2px;
}

.demand-sprout::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 15px;
  height: 13px;
  background:
    radial-gradient(ellipse at 25% 62%, #98b866 0 42%, transparent 45%),
    radial-gradient(ellipse at 78% 38%, #b4c96a 0 42%, transparent 45%);
}

.demand-row b {
  color: rgb(92 79 60 / 0.78);
  font-size: 12px;
  text-align: right;
}

.demand-meter {
  height: 10px;
  overflow: hidden;
  background: rgb(123 101 63 / 0.14);
  border: 1px solid rgb(150 119 70 / 0.16);
  border-radius: 999px;
}

.demand-meter i {
  display: block;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, #9fbd70, #e7ca72);
  border-radius: inherit;
  transition: width 220ms ease;
}

@keyframes demand-wiggle {
  0%,
  100% {
    transform: rotate(0deg) translateY(0);
  }

  25% {
    transform: rotate(-7deg) translateY(-1px);
  }

  50% {
    transform: rotate(5deg) translateY(0);
  }

  75% {
    transform: rotate(-4deg) translateY(-1px);
  }
}

.build-toolbar {
  position: fixed;
  right: auto;
  bottom: var(--hud-bottom);
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 10px 12px;
  transform: translateX(-50%);
}

.hotbar {
  display: grid;
  grid-template-columns: repeat(5, 64px);
  gap: 8px;
}

.tab-button {
  height: 32px;
  color: rgb(92 79 60 / 0.74);
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
}

.tab-button:hover,
.tab-button.is-active {
  color: #5c4f3c;
  background: rgb(255 235 169 / 0.72);
  border-color: rgb(171 132 52 / 0.28);
}

.build-panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 38px;
}

.build-panel[hidden] {
  display: none;
}

.road-shape-toolbar {
  position: fixed;
  right: auto;
  bottom: calc(var(--hud-bottom) + var(--secondary-toolbar-lift));
  left: 50%;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 6px;
  transform: translateX(-50%);
}

.road-shape-toolbar[hidden] {
  display: none;
}

.build-button,
.shape-button {
  color: #5c4f3c;
  font: inherit;
  font-weight: 800;
  background: rgb(255 249 226 / 0.72);
  border: 1px solid rgb(150 119 70 / 0.24);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgb(150 119 70 / 0.18);
}

.build-button {
  min-width: 78px;
  height: 38px;
  padding: 0 12px;
  font-size: 13px;
}

.hotbar-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  min-width: 64px;
  height: 64px;
  padding: 0;
}

.hotbar-key {
  position: absolute;
  top: 5px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  color: rgb(92 79 60 / 0.76);
  font-size: 11px;
  line-height: 1;
  background: rgb(255 253 245 / 0.72);
  border: 1px solid rgb(150 119 70 / 0.2);
  border-radius: 6px;
}

.pixel-icon {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  image-rendering: pixelated;
}

.hotbar-icon {
  width: 34px;
  height: 34px;
  color: #765f42;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / 0.45));
  transition:
    color 160ms ease,
    transform 160ms ease;
}

.icon-road {
  width: 28px;
  height: 38px;
  background:
    linear-gradient(90deg, transparent 42%, #f6e8b6 0 58%, transparent 0),
    repeating-linear-gradient(0deg, #7f7464 0 8px, #918678 8px 16px);
  border: 2px solid #665f54;
  border-radius: 5px;
  transform: rotate(28deg);
}

.icon-home::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 12px;
  width: 26px;
  height: 18px;
  background: #f0d49a;
  border: 3px solid #7a644b;
  border-top: 0;
}

.icon-home::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 2px;
  width: 30px;
  height: 20px;
  background: #c8755b;
  clip-path: polygon(50% 0, 100% 68%, 84% 68%, 84% 100%, 16% 100%, 16% 68%, 0 68%);
}

.icon-shop::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 13px;
  width: 26px;
  height: 17px;
  background: #e8d0a4;
  border: 3px solid #725f49;
}

.icon-shop::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 4px;
  width: 32px;
  height: 13px;
  background:
    linear-gradient(90deg, #b95f55 0 25%, #fff2bf 25% 50%, #b95f55 50% 75%, #fff2bf 75%);
  border: 2px solid #725f49;
  border-radius: 5px 5px 8px 8px;
}

.icon-wheat::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 4px;
  width: 4px;
  height: 28px;
  background: #8d7a3e;
  border-radius: 2px;
}

.icon-wheat::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 20px;
  height: 27px;
  background:
    radial-gradient(ellipse at 35% 16%, #d8b846 0 34%, transparent 36%),
    radial-gradient(ellipse at 68% 30%, #e5c557 0 34%, transparent 36%),
    radial-gradient(ellipse at 32% 46%, #d8b846 0 34%, transparent 36%),
    radial-gradient(ellipse at 70% 62%, #e5c557 0 34%, transparent 36%),
    radial-gradient(ellipse at 36% 78%, #d8b846 0 34%, transparent 36%);
}

.build-button small {
  display: block;
  margin-top: 1px;
  color: rgb(92 79 60 / 0.6);
  font-size: 10px;
  line-height: 1;
}

.shape-button {
  min-width: 58px;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
}

.secondary-build-button {
  min-width: 74px;
  height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.build-button:hover:not(:disabled),
.build-button.is-active,
.shape-button:hover:not(:disabled),
.shape-button.is-active {
  color: #5c4f3c;
  background: #ffeaa3;
  border-color: rgb(171 132 52 / 0.5);
  box-shadow:
    0 2px 0 rgb(150 119 70 / 0.22),
    0 0 18px rgb(255 218 95 / 0.44);
  transform: translateY(2px);
}

.hotbar-button.is-active {
  box-shadow:
    inset 0 3px 8px rgb(117 87 45 / 0.22),
    0 0 22px rgb(255 218 95 / 0.66);
}

.hotbar-button.is-active .hotbar-icon {
  color: #6f4e22;
  transform: translateY(1px) scale(1.04);
}

.utility-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #5c4f3c;
  font: 800 18px/1 "Courier New", Cambria, serif;
  background: rgb(255 249 226 / 0.72);
  border: 1px solid rgb(150 119 70 / 0.24);
  border-radius: 12px;
  box-shadow: 0 4px 0 rgb(150 119 70 / 0.18);
  cursor: pointer;
}

.utility-icon {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.public-button:hover,
.public-button.is-active {
  color: #5c4f3c;
  background: #ffeaa3;
  border-color: rgb(171 132 52 / 0.5);
  box-shadow:
    0 2px 0 rgb(150 119 70 / 0.22),
    0 0 18px rgb(255 218 95 / 0.44);
  transform: translateY(2px);
}

.build-button:disabled,
.shape-button:disabled,
.utility-button:disabled {
  cursor: wait;
  opacity: 0.45;
}

.build-button.is-locked {
  color: rgb(92 79 60 / 0.5);
  background: rgb(222 215 196 / 0.48);
}

.build-button.is-unaffordable {
  color: rgb(103 76 58 / 0.62);
  background: rgb(244 224 207 / 0.52);
}

.build-button.is-capped {
  color: rgb(88 81 70 / 0.58);
  background: rgb(228 224 213 / 0.58);
  border-color: rgb(128 118 95 / 0.24);
}

.delete-button {
  color: #68433c;
  background: rgb(255 238 232 / 0.66);
  border-color: rgb(154 84 70 / 0.24);
}

.move-camera-button {
  position: relative;
  overflow: hidden;
  color: #4d5f58;
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 245 / 0.92) 0 30%, rgb(218 245 234 / 0.82) 31% 62%, rgb(176 222 204 / 0.7) 63% 100%);
  border-color: rgb(72 132 104 / 0.36);
  box-shadow:
    0 4px 0 rgb(84 123 104 / 0.22),
    inset 0 0 0 1px rgb(255 255 255 / 0.62);
}

.move-camera-button::before,
.move-camera-button::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  pointer-events: none;
}

.move-camera-button::before {
  border: 1px solid rgb(75 122 103 / 0.34);
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 0.18);
}

.move-camera-button::after {
  inset: 14px;
  border: 2px solid rgb(63 113 94 / 0.34);
  border-left-color: transparent;
  border-right-color: transparent;
  transform: rotate(45deg);
}

.free-camera-icon {
  position: relative;
  z-index: 1;
  width: 26px;
  height: 26px;
  stroke-width: 2;
}

.delete-button .utility-icon {
  width: 24px;
  height: 24px;
}

.move-camera-button:hover:not(:disabled),
.move-camera-button.is-active {
  color: #244f40;
  background:
    radial-gradient(circle at 50% 50%, #fff6bd 0 28%, #d8f4e6 29% 60%, #9fd6bf 61% 100%);
  border-color: rgb(68 139 105 / 0.58);
  box-shadow:
    0 2px 0 rgb(93 143 116 / 0.2),
    0 0 22px rgb(126 201 158 / 0.5),
    inset 0 0 0 1px rgb(255 255 255 / 0.7);
  transform: translateY(2px);
}

.delete-button:hover:not(:disabled),
.delete-button.is-active {
  color: #55251e;
  background: #ffd9d0;
  border-color: rgb(154 84 70 / 0.42);
}

.keybind-button {
  min-width: 44px;
}

.keybind-button.is-listening {
  color: #5c4f3c;
  background: #ffe1a8;
  border-color: rgb(171 132 52 / 0.5);
}

.control-hints {
  position: fixed;
  top: 96px;
  right: 20px;
  z-index: 2;
  display: grid;
  gap: 6px;
  width: 168px;
  padding: 12px;
  pointer-events: none;
}

.control-hints p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
}

.control-hints strong {
  color: rgb(92 79 60 / 0.86);
  font-size: 12px;
  white-space: nowrap;
}

.control-hints span {
  text-align: right;
}

#game-canvas {
  display: block;
  width: 100vw;
  height: 100vh;
  outline: none;
  touch-action: none;
}

.label-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.building-bubble {
  padding: 5px 9px;
  color: #5c4f3c;
  font: 700 12px/1.2 "Courier New", Cambria, serif;
  white-space: nowrap;
  background: rgba(255, 253, 245, 0.78);
  border: 2px solid #e6dfc7;
  border-radius: 999px;
  box-shadow:
    0 8px 18px rgb(108 91 62 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.55);
  animation: building-bubble-drift 2200ms ease-out forwards;
}

.building-bubble.guide-bubble {
  max-width: 260px;
  padding: 9px 12px;
  text-align: center;
  white-space: normal;
  line-height: 1.35;
  background: rgba(255, 253, 245, 0.9);
}

.building-bubble.income-collected-bubble {
  color: #725011;
  background: rgba(255, 230, 112, 0.9);
  border-color: rgba(164, 119, 35, 0.42);
}

.building-detail-window {
  display: grid;
  width: min(220px, calc(100vw - 32px));
  min-width: 150px;
  gap: 5px;
  padding: 9px 11px;
  color: #4f4535;
  font: 700 12px/1.2 "Courier New", Cambria, serif;
  background: rgba(255, 253, 245, 0.9);
  border: 2px solid rgba(142, 116, 76, 0.32);
  border-radius: 10px;
  box-shadow:
    0 12px 26px rgb(76 61 42 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.62);
}

.building-detail-window strong {
  color: #5d4524;
  font-size: 13px;
}

.building-detail-window strong::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  background: #b89a5b;
  border-radius: 2px;
}

.building-detail-description {
  margin: 0 0 3px;
  color: rgb(82 72 56 / 0.78);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
}

.building-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.building-detail-row b {
  color: rgb(92 79 60 / 0.72);
}

.building-detail-row em {
  color: #6b583b;
  font-style: normal;
}

.building-detail-window.is-residential {
  border-color: rgba(106, 151, 91, 0.42);
  background: rgba(249, 255, 240, 0.92);
}

.building-detail-window.is-residential strong::before {
  background: #83b66c;
}

.building-detail-window.is-commercial {
  border-color: rgba(199, 154, 58, 0.48);
  background: rgba(255, 249, 222, 0.93);
}

.building-detail-window.is-commercial strong::before {
  background: #d0a84d;
}

.building-detail-window.is-service,
.building-detail-window.is-tax {
  border-color: rgba(99, 129, 176, 0.42);
  background: rgba(244, 249, 255, 0.93);
}

.building-detail-window.is-service strong::before {
  background: #6f91c7;
}

.building-detail-window.is-tax strong::before {
  background: #d4a53b;
}

.building-detail-window.is-water {
  border-color: rgba(72, 143, 180, 0.42);
  background: rgba(237, 250, 255, 0.94);
}

.building-detail-window.is-water strong::before {
  background: #58a5c5;
}

.building-detail-window.is-power,
.building-detail-window.is-industry {
  border-color: rgba(151, 132, 82, 0.44);
  background: rgba(255, 249, 233, 0.93);
}

.building-detail-window.is-power strong::before,
.building-detail-window.is-industry strong::before {
  background: #c0a053;
}

.income-coin-label {
  position: relative;
  display: inline-flex;
  min-width: 38px;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  padding: 5px 9px 5px 28px;
  color: #674712;
  font: 800 12px/1 "Courier New", Cambria, serif;
  white-space: nowrap;
  background: rgba(255, 246, 177, 0.92);
  border: 2px solid rgba(164, 119, 35, 0.4);
  border-radius: 999px;
  box-shadow:
    0 10px 22px rgb(108 91 62 / 0.18),
    0 0 22px rgb(255 214 86 / 0.4),
    inset 0 1px 0 rgb(255 255 255 / 0.62);
  transform-origin: 50% 80%;
  animation: income-coin-bob 1450ms ease-in-out infinite;
}

.income-coin-label::before {
  content: "$";
  position: absolute;
  left: 7px;
  top: 50%;
  display: grid;
  width: 17px;
  height: 17px;
  place-items: center;
  color: #76500d;
  background: #f0bd3e;
  border: 2px solid #a87518;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5);
  transform: translateY(-50%);
}

@keyframes income-coin-bob {
  0%,
  100% {
    translate: 0 0;
    scale: 1;
  }

  50% {
    translate: 0 -7px;
    scale: 1.04;
  }
}

@keyframes building-bubble-drift {
  0% {
    opacity: 0;
    translate: 0 8px;
    scale: 0.92;
  }

  18% {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  76% {
    opacity: 1;
    translate: 0 -14px;
    scale: 1;
  }

  100% {
    opacity: 0;
    translate: 0 -28px;
    scale: 0.96;
  }
}

@media (max-width: 480px) {
  :root {
    --hud-bottom: calc(14px + env(safe-area-inset-bottom));
    --secondary-toolbar-lift: 104px;
  }

  .start-menu {
    padding: 0;
  }

  .start-panel {
    min-height: 100%;
    padding: 0;
  }

  .menu-brand {
    top: max(42px, calc(36px + env(safe-area-inset-top)));
    width: min(96vw, 420px);
  }

  .menu-island-mark {
    display: none;
  }

  .menu-brand h1 {
    font-size: clamp(48px, 15vw, 72px);
    text-shadow:
      -4px -4px 0 #fff8e8,
      0 -4px 0 #fff8e8,
      4px -4px 0 #fff8e8,
      -4px 0 0 #fff8e8,
      4px 0 0 #fff8e8,
      -4px 4px 0 #fff8e8,
      0 4px 0 #fff8e8,
      4px 4px 0 #fff8e8,
      0 8px 0 rgb(73 57 36 / 0.26);
  }

  .menu-brand h1::after {
    width: min(260px, 62vw);
    height: 8px;
    margin-top: 10px;
  }

  .menu-screen {
    width: min(320px, calc(100vw - 28px));
    margin-top: 0;
  }

  .menu-primary-button,
  .menu-secondary-button,
  .save-slot-button {
    min-height: 54px;
    font-size: 15px;
    touch-action: manipulation;
  }

  .world-form,
  .save-screen,
  .cloud-screen {
    width: min(348px, calc(100vw - 28px));
  }

  .cloud-screen {
    max-height: min(620px, calc(100dvh - 172px));
    padding: 2px 4px 10px;
    overscroll-behavior: contain;
  }

  .cloud-form input,
  .world-form input {
    height: 52px;
    font-size: 16px;
  }

  .menu-actions {
    grid-template-columns: 1fr;
  }

  .save-slot-button {
    grid-template-columns: minmax(0, 1fr);
  }

  .save-slot-time {
    white-space: normal;
  }

  .menu-return-button {
    top: max(10px, env(safe-area-inset-top));
    right: 10px;
    width: 42px;
    height: 42px;
  }

  .city-stats {
    top: max(10px, env(safe-area-inset-top));
    left: 10px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
    width: min(270px, calc(100vw - 70px));
    padding: 8px 10px;
    border-radius: 14px;
  }

  .level-badge {
    width: 44px;
    height: 44px;
  }

  .level-core {
    width: 34px;
    height: 34px;
  }

  .level-core span {
    font-size: 8px;
  }

  .level-core strong {
    font-size: 17px;
  }

  .stats-main {
    gap: 4px 8px;
  }

  .cash-readout,
  .time-readout {
    padding-bottom: 4px;
  }

  .cash-readout span,
  .time-readout span,
  .city-status,
  .level-readout {
    font-size: 11px;
  }

  .cash-readout strong {
    font-size: 17px;
  }

  .time-readout b {
    font-size: 12px;
  }

  .city-status {
    font-size: 10px;
  }

  .control-hints {
    display: none;
  }

  .level-readout {
    right: 50%;
    bottom: calc(var(--hud-bottom) + 82px);
    width: min(292px, calc(100vw - 28px));
    padding: 8px 12px 8px 34px;
    border-radius: 14px;
    transform: translateX(50%);
  }

  .level-readout::before {
    left: 10px;
    width: 18px;
    height: 18px;
  }

  .build-toolbar {
    gap: 6px;
    width: min(362px, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
    padding: 8px;
    border-radius: 18px;
  }

  .hotbar {
    grid-template-columns: repeat(5, minmax(44px, 1fr));
    flex: 1 1 auto;
    gap: 5px;
    min-width: 0;
  }

  .hotbar-button {
    width: 100%;
    min-width: 44px;
    height: 52px;
    border-radius: 12px;
  }

  .hotbar-key {
    top: 4px;
    left: 5px;
    width: 15px;
    height: 15px;
    font-size: 10px;
  }

  .pixel-icon,
  .hotbar-icon {
    width: 30px;
    height: 30px;
  }

  .utility-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
  }

  .utility-icon {
    width: 23px;
    height: 23px;
  }

  .road-shape-toolbar {
    bottom: calc(var(--hud-bottom) + var(--secondary-toolbar-lift));
    width: min(360px, calc(100vw - 18px));
    max-width: calc(100vw - 18px);
    padding: 7px;
    overflow-x: auto;
    border-radius: 16px;
    scrollbar-width: none;
  }

  .road-shape-toolbar::-webkit-scrollbar {
    display: none;
  }

  .build-panel {
    flex-wrap: nowrap;
    justify-content: flex-start;
    min-width: max-content;
    min-height: 42px;
  }

  .shape-button,
  .build-button {
    min-width: 76px;
    height: 42px;
    padding: 0 10px;
    font-size: 12px;
    white-space: nowrap;
    touch-action: manipulation;
  }

  body:not(.is-menu-open):has(.road-shape-toolbar:not([hidden])) .level-readout {
    bottom: calc(var(--hud-bottom) + 184px);
  }

  .hotbar .hotbar-button {
    min-width: 0;
    height: 52px;
    padding: 0;
  }

  .build-toolbar .utility-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    padding: 0;
  }
}

@media (max-width: 380px) {
  .menu-brand h1 {
    font-size: clamp(42px, 14vw, 58px);
  }

  .build-toolbar {
    width: calc(100vw - 12px);
    gap: 4px;
    padding: 7px;
  }

  .hotbar {
    gap: 4px;
  }

  .hotbar-button {
    min-width: 40px;
    height: 50px;
  }

  .build-toolbar .utility-button {
    width: 40px;
    min-width: 40px;
    height: 42px;
  }
}

@media (max-height: 700px) and (max-width: 480px) {
  .menu-brand {
    top: max(22px, env(safe-area-inset-top));
  }

  .menu-brand h1 {
    font-size: clamp(38px, 13vw, 56px);
  }

  .menu-brand h1::after {
    margin-top: 7px;
  }

  .menu-screen {
    transform: translateY(24px);
  }

  .cloud-screen,
  .save-screen,
  .world-form {
    transform: translateY(42px);
  }

  .city-stats {
    transform: scale(0.92);
    transform-origin: top left;
  }

  .level-readout {
    bottom: calc(var(--hud-bottom) + 76px);
  }

  body:not(.is-menu-open):has(.road-shape-toolbar:not([hidden])) .level-readout {
    bottom: calc(var(--hud-bottom) + 164px);
  }

  .road-shape-toolbar {
    bottom: calc(var(--hud-bottom) + 98px);
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  .menu-brand {
    top: 18px;
  }

  .menu-brand h1 {
    font-size: clamp(36px, 9vw, 58px);
  }

  .menu-screen {
    width: min(360px, calc(100vw - 240px));
    transform: translateY(36px);
  }

  .control-hints {
    display: none;
  }

  .city-stats {
    transform: scale(0.86);
    transform-origin: top left;
  }

  .build-toolbar {
    right: 10px;
    left: auto;
    width: min(330px, calc(100vw - 220px));
    transform: none;
  }

  .road-shape-toolbar {
    right: 10px;
    left: auto;
    width: min(330px, calc(100vw - 220px));
    transform: none;
  }
}