canvas {
  touch-action: none;
}

button,
.item {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#gameChooser {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 20%, rgba(78, 153, 205, 0.42), transparent 45%),
    rgba(8, 16, 25, 0.86);
  backdrop-filter: blur(12px);
}

#gameChooser.hidden {
  display: none;
}

#modeChooser {
  position: fixed;
  z-index: 110;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(18px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(18px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));
  background:
    radial-gradient(circle at 50% 18%, rgba(81, 176, 232, 0.48), transparent 46%),
    rgba(8, 16, 25, 0.9);
  backdrop-filter: blur(14px);
}

#modeChooser.hidden {
  display: none;
}

#onlineLobby {
  position: fixed;
  z-index: 120;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  overflow-y: auto;
  background: radial-gradient(circle at 50% 18%, rgba(56, 209, 90, 0.3), transparent 48%), rgba(8, 16, 25, 0.92);
  backdrop-filter: blur(14px);
}

#onlineLobby.hidden,
#onlineStatus.hidden,
.online-dialog.hidden {
  display: none;
}

.online-lobby-card {
  width: min(650px, 100%);
  max-height: 100%;
  padding: 26px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  color: #eef3f8;
  background: rgba(24, 34, 46, 0.98);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.5);
}

.online-lobby-card h1 {
  margin: 9px 0 5px;
  font-size: clamp(26px, 5vw, 38px);
  text-align: center;
}

.online-start {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#onlinePlayBtn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 72px;
  padding: 12px 15px;
  border: 1px solid rgba(83, 225, 116, 0.45);
  border-radius: 15px;
  color: #eef3f8;
  background: linear-gradient(135deg, rgba(39, 91, 56, 0.97), rgba(31, 63, 85, 0.97));
  cursor: pointer;
  font: inherit;
  text-align: left;
}

#onlinePlayBtn > span:first-child { font-size: 31px; }
#onlinePlayBtn > span:last-child { font-size: 28px; }
#onlinePlayBtn b { display: block; font-size: 17px; }
#onlinePlayBtn small { display: block; margin-top: 3px; color: #c4d5df; line-height: 1.35; }
#onlinePlayBtn:hover, #onlinePlayBtn:focus-visible { border-color: #72ee91; outline: none; }

.online-field {
  display: block;
  margin: 8px 0 7px;
  color: #dce7ef;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.online-input {
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  outline: none;
  color: #eef3f8;
  background: rgba(10, 19, 28, 0.9);
  font: inherit;
  font-size: 16px;
}

.online-input:focus { border-color: #38d15a; box-shadow: 0 0 0 3px rgba(56, 209, 90, 0.18); }
.online-input.room-code { text-transform: uppercase; font-weight: 900; letter-spacing: 0.16em; }
.online-lobby-actions { display: grid; gap: 12px; margin-top: 16px; }
.online-lobby-actions button { min-height: 50px; border: 0; border-radius: 12px; font: inherit; font-weight: 850; cursor: pointer; }
.online-primary { color: #06210f; background: #38d15a; }
.online-join-row { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.online-join-row button { padding-inline: 20px; color: #eef3f8; background: #326e9b; }
.online-divider { display: flex; align-items: center; gap: 10px; color: #9fb0c0; font-size: 12px; text-transform: uppercase; }
.online-divider::before, .online-divider::after { height: 1px; flex: 1; background: rgba(255,255,255,.12); content: ""; }
.online-safety-note { margin: 4px 0 0; color: #9fb0c0; font-size: 12px; text-align: center; }

.online-mode-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; padding: 0; border: 0; }
.online-mode-picker legend { margin-bottom: 7px; color: #dce7ef; font-size: 12px; font-weight: 850; text-transform: uppercase; }
.online-mode-picker label { display: flex; min-height: 66px; padding: 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; color: #eef3f8; background: rgba(31,45,59,.86); cursor: pointer; }
.online-mode-picker input { margin: 3px 9px 0 0; accent-color: #52df76; }
.online-mode-picker span { display: block; }
.online-mode-picker b, .online-mode-picker small { display: block; }
.online-mode-picker small { margin-top: 3px; color: #abc0ce; font-size: 11px; line-height: 1.25; }
.online-mode-picker label:has(input:checked) { border-color: #52df76; box-shadow: 0 0 0 2px rgba(82,223,118,.14); }

.recent-online-sessions { display: grid; gap: 7px; margin-top: 12px; }
.recent-online-sessions:empty { display: none; }
.online-resume { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 45px; padding: 9px 12px; border: 1px solid rgba(255,255,255,.13); border-radius: 11px; color: #eaf3f8; background: rgba(46,61,77,.8); font: inherit; cursor: pointer; text-align: left; }
.online-resume small { color: #aebdca; }

#onlineStatus {
  position: fixed;
  z-index: 24;
  top: 66px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  color: #eef3f8;
  background: rgba(20,32,43,.9);
  box-shadow: 0 7px 24px rgba(0,0,0,.28);
  transform: translateX(-50%);
  backdrop-filter: blur(9px);
}

#onlineStatus > span:nth-child(2) { display: grid; min-width: 125px; }
#onlineStatus small { color: #abc0ce; font-size: 10px; }
#onlineStatus button { min-height: 34px; padding: 6px 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 9px; color: #eef3f8; background: rgba(50,70,88,.95); font: inherit; font-size: 11px; font-weight: 750; cursor: pointer; }
.online-dot { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #f2bf49; box-shadow: 0 0 9px rgba(242,191,73,.8); }
body.online-connected .online-dot { background: #52df76; box-shadow: 0 0 9px rgba(82,223,118,.8); }

.online-dialog { position: fixed; z-index: 126; inset: 0; display: flex; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); background: rgba(8,16,25,.86); backdrop-filter: blur(14px); }
.online-dialog-card { width: min(590px, 100%); max-height: 100%; padding: 24px; overflow-y: auto; border: 1px solid rgba(255,255,255,.2); border-radius: 24px; color: #eef3f8; background: rgba(24,34,46,.98); box-shadow: 0 26px 90px rgba(0,0,0,.5); }
.online-dialog-card h1 { margin: 8px 0; text-align: center; }
.online-dialog-card > p { color: #b9c9d5; line-height: 1.45; text-align: center; }
.build-together-players { display: grid; gap: 9px; margin: 18px 0; }
.build-player-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 12px; background: rgba(39,54,69,.85); }
.build-player-row small { display: block; margin-top: 3px; color: #aebdca; }
.build-player-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.build-player-actions button, .request-actions button { min-height: 39px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: #eef3f8; background: #326e9b; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.build-player-actions .danger-action, .request-actions #denyBuildRequest { background: #74404a; }
.build-empty { padding: 18px; border: 1px dashed rgba(255,255,255,.18); border-radius: 12px; color: #9fb0c0; text-align: center; }
.request-card { width: min(460px, 100%); }
.request-actions { display: grid; grid-template-columns: 1fr 1.5fr; gap: 10px; margin-top: 20px; }
.request-actions .online-primary { color: #06210f; background: #38d15a; }
body.collaborating-property #sellBtn, body.collaborating-property #briefBtn { display: none; }

.mode-chooser-card {
  position: relative;
  width: min(680px, 100%);
  padding: 28px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  color: #eef3f8;
  background: rgba(24, 34, 46, 0.97);
  box-shadow: 0 26px 90px rgba(0, 0, 0, 0.5);
}

.mode-chooser-card h1 {
  margin: 9px 0 5px;
  font-size: clamp(26px, 5vw, 38px);
  text-align: center;
}

.mode-back {
  min-height: 42px;
  padding: 8px 10px;
  border: 0;
  border-radius: 10px;
  color: #c5d3de;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 750;
}

.mode-back:hover,
.mode-back:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  outline: none;
}

.mode-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.mode-choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 126px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 18px;
  color: #eef3f8;
  background: rgba(38, 52, 67, 0.96);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.mode-choice.real-world:hover,
.mode-choice.real-world:focus-visible {
  border-color: #64d77d;
  background: rgba(39, 78, 53, 0.98);
  outline: none;
}

.mode-choice.unlimited-access:hover,
.mode-choice.unlimited-access:focus-visible {
  border-color: #d9b8ff;
  background: rgba(73, 47, 96, 0.98);
  outline: none;
}

.mode-choice-icon {
  font-size: 38px;
}

.mode-choice-copy {
  display: grid;
  gap: 7px;
}

.mode-choice-copy b {
  font-size: 20px;
}

.mode-choice-copy small {
  color: #bbc9d4;
  font-size: 13px;
  line-height: 1.45;
}

.mode-choice-arrow {
  color: #92a5b5;
  font-size: 32px;
}

.mode-save-note {
  margin: 16px 0 0;
  color: #aebdca;
  font-size: 13px;
  text-align: center;
}

body.unlimited-mode #sellBtn,
body.unlimited-mode #briefBtn {
  display: none;
}

.game-chooser-card {
  width: min(620px, 100%);
  max-height: min(780px, 100%);
  padding: 24px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  color: #eef3f8;
  background: rgba(24, 34, 46, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.46);
  -webkit-overflow-scrolling: touch;
}

.game-chooser-mark {
  font-size: 48px;
  line-height: 1;
  text-align: center;
}

.game-chooser-card h1 {
  margin: 8px 0 4px;
  font-size: clamp(27px, 6vw, 38px);
  text-align: center;
}

.game-chooser-intro {
  margin: 0 auto 22px;
  color: #b8c6d2;
  text-align: center;
}

.game-chooser-section h2,
.new-game-form > label {
  display: block;
  margin: 0 0 9px;
  color: #dce7ef;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.saved-games {
  display: grid;
  gap: 9px;
  max-height: 310px;
  overflow-y: auto;
}

.saved-game {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 66px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  color: #eef3f8;
  background: rgba(38, 52, 67, 0.94);
  cursor: pointer;
  text-align: left;
}

.saved-game:hover,
.saved-game:focus-visible {
  border-color: #38d15a;
  outline: none;
}

.saved-game-icon {
  font-size: 29px;
}

.saved-game-details {
  min-width: 0;
  flex: 1;
}

.saved-game-name {
  display: block;
  overflow: hidden;
  font-size: 17px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-game-meta,
.no-saved-games {
  margin-top: 3px;
  color: #aebdca;
  font-size: 12px;
}

.saved-game-meta {
  display: block;
}

.saved-game-continue {
  color: #72e68a;
  font-size: 13px;
  font-weight: 800;
}

.no-saved-games {
  padding: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  text-align: center;
}

.new-game-form {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.new-game-row {
  display: flex;
  gap: 9px;
}

.new-game-row input {
  min-width: 0;
  min-height: 50px;
  flex: 1;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  outline: none;
  color: #eef3f8;
  background: rgba(10, 19, 28, 0.9);
  font: inherit;
  font-size: 16px;
}

.new-game-row input:focus {
  border-color: #38d15a;
  box-shadow: 0 0 0 3px rgba(56, 209, 90, 0.18);
}

.new-game-row button {
  min-height: 50px;
  padding: 10px 18px;
  border: 0;
  border-radius: 12px;
  color: #06210f;
  background: #38d15a;
  font: inherit;
  font-weight: 850;
}

.game-chooser-error {
  min-height: 18px;
  margin: 6px 2px 0;
  color: #ff8d8d;
  font-size: 12px;
}

.game-name {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#touchCameraControls,
#touchWalkControls {
  display: none;
}

.touch-only {
  display: none;
}

body.touch-device .touch-only {
  display: list-item;
}

body.touch-device #touchCameraControls {
  position: fixed;
  z-index: 30;
  top: 86px;
  left: max(12px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
  background: rgba(17, 29, 41, 0.78);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(8px);
}

body.touch-device #touchCameraControls button,
#touchWalkControls button {
  min-width: 50px;
  min-height: 50px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 11px;
  color: #fff;
  background: rgba(37, 57, 75, 0.95);
  font: inherit;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

body.touch-device #touchCameraControls button:active,
#touchWalkControls button:active,
#touchWalkControls button.active {
  transform: scale(0.94);
  background: #2775a8;
}

body.touch-device.walking #touchCameraControls {
  display: none;
}

#touchWalkControls {
  pointer-events: none;
}

body.touch-device.walking #touchWalkControls {
  position: fixed;
  z-index: 45;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

body.touch-device.walking #touchWalkControls > * {
  pointer-events: auto;
}

.touch-dpad {
  display: grid;
  grid-template-columns: repeat(3, 58px);
  grid-template-rows: repeat(2, 58px);
  gap: 6px;
}

.touch-dpad .touch-up {
  grid-column: 2;
  grid-row: 1;
}

.touch-dpad .touch-left {
  grid-column: 1;
  grid-row: 2;
}

.touch-dpad .touch-down {
  grid-column: 2;
  grid-row: 2;
}

.touch-dpad .touch-right {
  grid-column: 3;
  grid-row: 2;
}

.touch-walk-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#touchWalkControls .touch-walk-actions button {
  min-width: 118px;
  padding-inline: 14px;
  font-size: 16px;
}

body.touch-device.walking #bottom,
body.touch-device.walking #actions,
body.touch-device.walking #right,
body.touch-device.walking #helpBtn {
  display: none;
}

#bottom,
.modal .card {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (orientation: portrait) and (max-width: 900px) {
  body.touch-device #touchCameraControls {
    top: 76px;
  }

  .touch-dpad {
    grid-template-columns: repeat(3, 54px);
    grid-template-rows: repeat(2, 54px);
  }

  #touchWalkControls .touch-walk-actions button {
    min-width: 104px;
  }
}

@media (max-width: 560px) {
  .game-chooser-card {
    padding: 20px 16px;
  }

  .mode-chooser-card {
    padding: 20px 16px;
  }

  .online-lobby-card { padding: 20px 16px; }
  .online-join-row { grid-template-columns: 1fr; }
  .online-mode-picker { grid-template-columns: 1fr; }
  #onlineStatus { top: 60px; overflow-x: auto; }
  #onlineStatus button { white-space: nowrap; }

  .mode-choices {
    grid-template-columns: 1fr;
  }

  .mode-choice {
    min-height: 102px;
  }

  .new-game-row {
    flex-direction: column;
  }

  .new-game-row button {
    width: 100%;
  }

  .saved-game-continue {
    display: none;
  }
}

@supports (padding: env(safe-area-inset-top)) {
  #hud {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
  }

  #right {
    top: max(12px, env(safe-area-inset-top));
    right: max(12px, env(safe-area-inset-right));
  }

  #bottom {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  #actions {
    left: max(12px, env(safe-area-inset-left));
  }

  #helpBtn {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
  }
}

#bottom {
  padding: 7px 10px 10px;
  overflow: hidden;
  transition: max-height 0.2s ease, width 0.2s ease, background 0.2s ease;
}

#catalogHeader {
  position: sticky;
  z-index: 2;
  top: 0;
}

#catalogToggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 5px 7px;
  border: 0;
  border-radius: 10px;
  color: var(--text);
  background: rgba(38, 48, 62, 0.78);
  cursor: pointer;
  font: inherit;
  text-align: left;
}

#catalogToggle:hover {
  background: rgba(50, 62, 78, 0.9);
}

.catalog-toggle-title {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 850;
}

#selectedTool {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--accent2);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#catalogToggleIcon {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 13px;
  transition: transform 0.18s ease;
}

#catalogContents {
  max-height: calc(44vh - 54px);
  padding: 5px 2px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#hint {
  margin: 0 0 6px;
}

body.catalog-collapsed #bottom {
  right: auto;
  width: min(340px, calc(100vw - 24px));
  max-height: 54px;
  padding-bottom: 7px;
}

body.catalog-collapsed #catalogContents {
  display: none;
}

body.catalog-collapsed #catalogToggleIcon {
  transform: rotate(180deg);
}

body.catalog-collapsed #actions {
  bottom: 74px;
}

body.catalog-collapsed #toast {
  bottom: 118px;
}

/* The build catalog is a drawer on touch devices. It opens for choosing an
   item, then collapses to one small status button while the player builds. */
body.touch-device #bottom {
  max-height: min(42vh, 360px);
}

body.touch-device #catalogContents {
  max-height: calc(min(42vh, 360px) - 54px);
}

body.touch-device #actions {
  right: max(12px, env(safe-area-inset-right));
  bottom: calc(min(42vh, 360px) + 20px);
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.touch-device #actions::-webkit-scrollbar {
  display: none;
}

body.touch-device #actions .abtn,
body.touch-device #actions .floorseg {
  flex: 0 0 auto;
}

body.touch-device.catalog-collapsed #bottom {
  right: auto;
  width: min(320px, calc(100vw - 24px));
  max-height: 54px;
}

body.touch-device.catalog-collapsed #actions {
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 61px);
}

body.touch-device.catalog-collapsed #toast {
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 108px);
}

@media (orientation: portrait) and (max-width: 900px) {
  body.touch-device #bottom {
    max-height: min(46vh, 430px);
  }

  body.touch-device #catalogContents {
    max-height: calc(min(46vh, 430px) - 54px);
  }

  body.touch-device #actions {
    bottom: calc(min(46vh, 430px) + 20px);
  }

  body.touch-device.catalog-collapsed #actions {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 61px);
  }
}

.install-card {
  width: min(520px, calc(100vw - 32px));
}

.install-steps {
  margin: 18px 0;
  padding-left: 24px;
  color: #e7eef5;
  line-height: 1.55;
}

.install-steps li {
  padding: 4px 0;
}

.install-save-note {
  padding: 11px 13px;
  border: 1px solid rgba(56, 209, 90, 0.3);
  border-radius: 11px;
  color: #b9efc5;
  background: rgba(56, 209, 90, 0.09);
  font-size: 13px;
}

.install-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

.install-actions .secondary {
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #eef3f8;
  background: rgba(42, 54, 68, 0.96);
}

html.standalone-app #installBtn {
  display: none;
}

.combine-card {
  width: min(430px, calc(100vw - 32px));
  text-align: center;
}

.combine-icon {
  margin-bottom: 5px;
  font-size: 44px;
}

.combine-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

.combine-actions .secondary {
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #eef3f8;
  background: rgba(42, 54, 68, 0.96);
}

@media (max-width: 560px) {
  .combine-actions {
    flex-direction: column;
  }
}

#marketCard {
  margin: -2px -2px 12px;
  padding: 10px 11px;
  border: 1px solid rgba(255, 207, 88, 0.24);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 207, 88, 0.11), rgba(72, 140, 190, 0.08));
}

#right {
  max-height: calc(100vh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

#reqs li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.045);
}

#neighborhoodName {
  color: #ffe092;
  font-size: 13px;
  font-weight: 850;
}

#marketCondition {
  margin: 3px 0 8px;
  color: #bdcad5;
  font-size: 11px;
  line-height: 1.35;
}

#briefBtn {
  width: 100%;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 9px;
  color: #edf5fb;
  background: rgba(31, 45, 59, 0.9);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
}

.commission-card {
  width: min(610px, calc(100vw - 28px));
  max-height: min(760px, calc(100vh - 28px));
  overflow-y: auto;
}

.commission-level {
  margin-bottom: 6px;
  color: #ffd46a;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.commission-story {
  color: #dce7ef;
  line-height: 1.55;
}

.commission-market {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.commission-market > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 11px;
  background: rgba(12, 22, 33, 0.48);
}

.commission-market span,
.commission-market b {
  display: block;
}

.commission-market span {
  margin-bottom: 4px;
  color: #9eafbd;
  font-size: 10px;
  text-transform: uppercase;
}

.commission-market b {
  color: #f3f7fa;
  font-size: 13px;
}

.commission-requirements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-height: min(290px, 32vh);
  margin: 9px 0 13px;
  padding: 0 4px 0 0;
  overflow-y: auto;
  list-style: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.commission-requirements li {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: #dce7ef;
  background: rgba(255, 255, 255, 0.045);
  font-size: 12px;
}

.commission-tip {
  padding: 10px 12px;
  border-left: 3px solid #54c8ff;
  color: #cdeeff;
  background: rgba(49, 157, 210, 0.09);
  font-size: 12px;
  line-height: 1.45;
}

#challenge .ch-market {
  margin-top: 7px;
  color: #9fdcff;
  font-size: 11px;
  line-height: 1.35;
}

#challenge .ch-budget {
  margin-top: 4px;
  color: #ffd979;
  font-size: 10.5px;
}

@media (max-width: 640px) {
  .commission-market,
  .commission-requirements {
    grid-template-columns: 1fr;
  }

  .commission-card {
    padding: 20px 18px !important;
  }
}

body.touch-device #marketCard {
  padding: 8px 9px;
}

body.touch-device #marketCondition {
  display: none;
}
#travelGuide { position: fixed; top: 92px; left: 50%; transform: translateX(-50%) translateY(-12px); z-index: 35;
  width: min(420px, calc(100vw - 28px)); padding: 11px 16px; border-radius: 14px; opacity: 0; pointer-events: none;
  background: rgba(13,22,31,.9); border: 1px solid rgba(84,225,255,.48); box-shadow: 0 10px 34px rgba(0,0,0,.35);
  text-align: center; transition: opacity .2s, transform .2s; }
#travelGuide.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#travelGuide .travel-title { color: #8ceaff; font-size: 14px; font-weight: 850; }
#travelDestination { color: #dbeaf4; font-size: 12px; margin-top: 3px; }
.travel-meter { height: 6px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.1); }
.travel-meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,#42dcff,#74ff9f); transition: width .15s; }

/* Clear, touch-sized controls for the Astra overhaul. */
#viewTools { position:fixed; z-index:25; left:12px; top:76px; display:flex; align-items:center; gap:7px; max-width:calc(100vw - 24px); padding:8px 10px; border:1px solid #ffffff24; border-radius:12px; background:#192723ed; box-shadow:0 5px 20px #0003; }
#viewTools label {font-size:12px;color:#c2cdc6;}
#viewTools select,#viewTools button {min-height:40px;border:1px solid #ffffff26;border-radius:7px;background:#34463e;color:#f5f2e9;padding:8px 11px;font:inherit;}
#viewTools [hidden],#aimMarker[hidden] {display:none;}
body.choosing-game #viewTools {display:none;}
#aimMarker {position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font-size:28px;color:white;text-shadow:0 1px 4px black;z-index:8;pointer-events:none;}
#avatarModal {width:min(440px,90vw);padding:26px;background:#20322a;color:#f7f1e5;border:1px solid #617468;border-radius:20px;}
#avatarModal::backdrop {background:#0b151acc;}
#avatarModal p {color:#bccdc3;line-height:1.5;}
.avatar-fields {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.avatar-fields label {display:flex;flex-direction:column;gap:8px;}
.avatar-fields input,.avatar-fields select {width:100%;min-height:44px;}
.avatar-actions {display:flex;justify-content:flex-end;gap:12px;margin-top:24px;}
.avatar-actions button {min-height:44px;padding:10px 18px;border:0;border-radius:8px;font:inherit;}
#avatarSave {background:#dbc39a;color:#253126;}
.creative-business {margin-top:12px;width:100%;background:linear-gradient(115deg,#405e45,#243d31);border:1px solid #8ead77;}
body.walk-building #bottom,body.walk-building #actions,body.walk-building #right {opacity:1;pointer-events:auto;}
body.touch-device.walk-building #bottom,body.touch-device.walk-building #actions {display:flex;opacity:1;pointer-events:auto;}
body.touch-device.walk-building #right {display:none;}
body.walk-building #actions {z-index:22;}
@media(max-width:700px){#viewTools{top:116px;gap:4px;padding:6px;}#viewTools label{display:none;}#viewTools select,#viewTools button{font-size:12px;padding:6px;min-height:42px;}}

/* Keep walking controls below the building drawer, without overlapping it. */
body.walking:not(.walk-building) #right,body.walking:not(.walk-building) #actions,body.walking:not(.walk-building) #bottom {visibility:hidden;}
body.walk-building #bottom {display:block;}
body.touch-device.walk-building #touchWalkControls {bottom:14px;}
body.touch-device.walk-building #bottom {bottom:150px;display:block;max-height:30vh;}
body.touch-device.walk-building #catalogContents {max-height:calc(30vh - 54px);}
body.touch-device.walk-building #actions {bottom:calc(30vh + 160px);}
body.touch-device.walk-building.catalog-collapsed #actions {bottom:211px;}
body.touch-device.walk-building #hint {display:none;}
@media(max-height:600px){body.touch-device.walk-building .touch-dpad {grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);}body.touch-device.walk-building #bottom {bottom:115px;}body.touch-device.walk-building.catalog-collapsed #actions {bottom:176px;}}
@media(max-width:1100px){#title{display:none;}}
/* Reserve a lane for the house panel so the catalog cannot cover Sell. */
@media(min-width:700px){
  body:not(.catalog-collapsed) #bottom,body #actions {right:284px;}
  body.touch-device.walk-building #bottom,body.touch-device.walk-building #actions {right:12px;}
}

#worldLoading{position:fixed;inset:0;z-index:9999;background:#19221f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#e6e3d9;font-size:18px;}#worldLoading strong{font-size:28px;}#worldLoading span{font-size:14px;color:#a3b0a7;}