/* Terminal surfaces for opening the fund and placing orders.
   Kept separate from the original theme so the game layouts remain reusable. */
.welcome-experience,
.trade-layout {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "PingFang SC", monospace;
  font-variant-numeric: tabular-nums;
  color: #e3e6eb;
  color-scheme: dark;
}
.welcome-backdrop {
  background: #020407ed;
  backdrop-filter: blur(5px);
  padding: 20px;
}
.dialog.welcome-dialog {
  width: min(1420px, calc(100vw - 40px));
  max-height: calc(100dvh - 40px);
  background: #080a0e;
  border: 1px solid #414851;
  border-top: 2px solid #ff9f1c;
  border-radius: 2px;
  box-shadow: 0 18px 70px #0009;
  animation: none;
}
.welcome-experience {
  grid-template-columns: minmax(0, 1fr) 350px;
  height: min(880px, calc(100dvh - 40px));
  min-height: 640px;
}
.welcome-scene {
  padding: 18px;
  gap: 13px;
  background: #080a0e;
}
.welcome-topbar {
  height: 41px;
  padding-bottom: 10px;
  border-bottom: 1px solid #303741;
}
.welcome-brand { color: #e3e6eb; font-size: 17px; white-space: nowrap; }
.welcome-brand > span { font-size: 32px; }
.welcome-brand > span > span { color: #ff9f1c; font-size: 21px; }
.welcome-brand small { color: #9ba7b4; font-size: 9px; letter-spacing: 1.4px; }
.welcome-chapter { color: #58c7ff; font-size: 10px; letter-spacing: 1px; }
.welcome-hero {
  border-radius: 1px;
  border-color: #414851;
  background: #101319;
}
.welcome-hero .office-hero-art { animation: none; }
.welcome-hero-shade {
  background: linear-gradient(180deg, #080a0e9c 0%, #080a0e08 51%, #080a0ebf 100%),
    linear-gradient(90deg, #080a0e55, transparent 70%);
}
.welcome-headline { top: 25px; left: 25px; color: #fff; }
.welcome-overline { color: #ffb74f; font-size: 10px; letter-spacing: 1.4px; margin-bottom: 12px; }
.welcome-headline h1 {
  color: #fff;
  font-size: clamp(32px, 3.5vw, 51px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0;
  text-shadow: 0 2px 8px #0008;
}
.welcome-headline p { color: #e3e6eb; font-size: 11px; letter-spacing: 0; line-height: 1.7; }
.welcome-view-label { color: #fff; left: 23px; right: 23px; bottom: 80px; }
.welcome-pin { color: #ff9f1c; }
.welcome-view-label strong { font-size: 12px; }
.welcome-view-label small { color: #bbc4cd; font-size: 10px; letter-spacing: .2px; }
.concept-label { color: #c7ced6; border-color: #626a74; background: #080a0e80; font-size: 9px; border-radius: 1px; }
.welcome-city-tabs { left: 23px; bottom: 20px; gap: 7px; }
.welcome-city {
  min-width: 93px;
  padding: 9px 13px;
  background: #080a0edd;
  border-color: #697079;
  border-radius: 2px;
  color: #e3e6eb;
  backdrop-filter: none;
  box-shadow: none;
  transition: border-color .15s, background .15s;
}
.welcome-city:hover { border-color: #ff9f1c; transform: none; }
.welcome-city.active { background: #ff9f1c; border-color: #ff9f1c; color: #080a0e; box-shadow: none; }
.welcome-city span { font-size: 12px; }
.welcome-city small { font-size: 9px; letter-spacing: .7px; opacity: 1; }
.welcome-gallery-label { color: #ff9f1c; font-size: 11px; margin: 0 0 8px; letter-spacing: .3px; }
.welcome-gallery-label small { color: #9ba7b4; font-size: 10px; }
.welcome-office-options { gap: 8px; }
.welcome-office-option {
  background: #101319;
  border-color: #303741;
  border-radius: 1px;
  box-shadow: none;
  transition: border-color .15s;
}
.welcome-office-option .office-art { opacity: 1; filter: none; transition: none; }
.welcome-office-option:hover { border-color: #a36b22; transform: none; }
.welcome-office-option.selected { border-color: #ff9f1c; box-shadow: 0 0 0 1px #ff9f1c; }
.welcome-option-caption { color: #d1d8df; font-size: 11px; padding: 9px 8px; }
.welcome-option-caption small { color: #788797; font-size: 10px; margin-right: 6px; }
.welcome-option-caption i { color: #58c7ff; }
.welcome-office-option.selected .welcome-option-caption { background: #ff9f1c; color: #080a0e; }
.welcome-office-option.selected .welcome-option-caption small,
.welcome-office-option.selected .welcome-option-caption i { color: #292016; }
.welcome-details {
  padding: 20px 23px;
  background: #101319;
  border-left: 1px solid #303741;
  color: #e3e6eb;
  overflow-y: auto;
}
.welcome-details-top { color: #ff9f1c; font-size: 11px; letter-spacing: .5px; }
.welcome-step { color: #9ba7b4; font-size: 11px; }
.welcome-close { color: #b8c2cd; }
.welcome-close:hover { color: #ff9f1c; }
.welcome-capital { margin-top: 14px; padding-bottom: 14px; border-color: #303741; }
.welcome-capital > span { color: #9ba7b4; font-size: 11px; letter-spacing: .2px; }
.welcome-capital strong { color: #ff9f1c; font-size: 47px; font-weight: 600; margin-top: 5px; letter-spacing: -2px; }
.welcome-capital strong span { font-size: 26px; }
.welcome-capital small { color: #9ba7b4; font-size: 10px; }
.welcome-office-summary { padding: 15px 0 13px; border-color: #303741; }
.welcome-office-english { color: #58c7ff; font-size: 10px; letter-spacing: 1px; }
.welcome-office-summary h2 { color: #e3e6eb; font-size: 22px; font-weight: 600; margin-top: 7px; }
.welcome-office-summary > p { color: #9ba7b4; font-size: 11px; line-height: 1.65; margin-top: 5px; }
.welcome-office-facts { color: #9ba7b4; font-size: 11px; gap: 22px; margin: 12px 0; }
.welcome-office-facts b { color: #e3e6eb; font-size: 18px; font-weight: 500; }
.welcome-office-facts span + span::before { background: #303741; }
.welcome-office-rent > span { color: #9ba7b4; font-size: 11px; }
.welcome-office-rent strong { color: #ffb74f; font-size: 22px; }
.welcome-office-rent small { color: #9ba7b4; font-size: 11px; }
.welcome-form-fields label { color: #b8c2cd; font-size: 11px; margin: 12px 0 6px; }
.welcome-form-fields input,
.welcome-form-fields select {
  color: #f1f4f7;
  background: #080a0e;
  border: 1px solid #414851;
  border-radius: 1px;
  font-size: 12px;
  padding: 9px 10px;
  box-shadow: none;
}
.welcome-form-fields input::placeholder { color: #687787; }
.welcome-form-fields input:hover,
.welcome-form-fields select:hover { border-color: #697887; }
.welcome-form-fields input:focus,
.welcome-form-fields select:focus { border-color: #ff9f1c; box-shadow: none; }
.welcome-form-fields input[readonly],
.welcome-form-fields select:disabled { background: #151a22; color: #a8b2bd; }
.welcome-staff-price { color: #9ba7b4; font-size: 11px; margin-top: 10px; }
.welcome-staff-price strong { color: #ffb74f; font-size: 12px; }
.welcome-staff-detail { color: #8c9aab; font-size: 10px; line-height: 1.6; min-height: 28px; margin-top: 5px; }
.welcome-budget { background: #080a0e; border: 1px solid #414851; border-left: 2px solid #ff9f1c; border-radius: 1px; margin-top: 12px; padding: 11px 12px; }
.welcome-budget span { color: #9ba7b4; font-size: 11px; }
.welcome-budget strong { color: #ff9f1c; font-size: 17px; font-weight: 600; }
.welcome-budget b { color: #58c7ff; font-size: 13px; }
.welcome-budget small { color: #8290a0; font-size: 9px; white-space: normal; line-height: 1.6; }
.welcome-enter { padding-top: 14px; }
.welcome-enter-button {
  background: #ff9f1c;
  color: #080a0e;
  border: 1px solid #ff9f1c;
  border-radius: 1px;
  padding: 13px 14px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none;
  transition: background .15s;
}
.welcome-enter-button:hover { background: #ffb546; border-color: #ffb546; transform: none; }
.welcome-enter-button > span:last-child { color: #080a0e; font-size: 20px; }
.welcome-enter p { color: #8290a0; font-size: 9px; line-height: 1.6; margin-top: 8px; }

/* Office leases use the same image art and terminal selection treatment. */
.office-option { background: #101319; border: 1px solid #303741; border-radius: 2px; box-shadow: none; }
.office-option:hover { background: #151b23; border-color: #7c5a2b; transform: none; box-shadow: none; }
.office-option.selected { border-color: #ff9f1c; box-shadow: inset 0 0 0 1px #ff9f1c; }
.office-option .office-art { border-radius: 0; }
.office-option-body { padding: 13px; }
.office-option h3 { color: #e3e6eb; font-size: 15px; }
.office-option p { color: #9ba7b4; font-size: 11px; }
.office-option .office-price { color: #ff9f1c; font-size: 22px; }
.office-option .office-price small { color: #9ba7b4; font-size: 11px; }

/* Security discovery and the order ticket are functional terminal panels. */
.trade-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 18px; }
.trade-layout > section { min-width: 0; }
.trade-section-label { color: #ff9f1c; font-size: 10px; letter-spacing: 1.1px; margin-bottom: 11px; }
.trade-discovery h3 { color: #e3e6eb; font-size: 19px; font-weight: 600; letter-spacing: 0; margin-bottom: 16px; }
.trade-market-tabs { background: #080a0e; border: 1px solid #303741; border-radius: 1px; padding: 2px; gap: 2px; margin-bottom: 12px; }
.trade-market-tabs button { color: #9ba7b4; font-size: 11px; border-radius: 0; padding: 7px 4px; }
.trade-market-tabs button:hover { color: #fff; background: #19212b; }
.trade-market-tabs button.active { color: #080a0e; background: #ff9f1c; box-shadow: none; }
.stock-search-wrap { background: #080a0e; border-color: #ff9f1c; border-radius: 1px; box-shadow: none; }
.stock-search-wrap span { color: #ff9f1c; font-size: 24px; margin-left: 10px; }
.stock-search-wrap input { color: #ffb74f; background: transparent; font-size: 13px; padding: 11px 8px; box-shadow: none; }
.stock-search-wrap input::placeholder { color: #84909e; }
.stock-search-wrap:focus-within { border-color: #ffbc5e; box-shadow: inset 0 0 0 1px #ffbc5e; }
.stock-search-wrap input:focus { box-shadow: none; }
.stock-search-hint { color: #8b99a9; font-size: 11px; margin: 9px 0 12px; line-height: 1.6; }
.stock-results { border-top-color: #303741; padding-top: 0; height: 306px; }
.stock-result { color: #e3e6eb; border: 0; border-bottom: 1px solid #252d37; border-radius: 0; padding: 10px 7px; margin: 0; gap: 9px; transition: background .12s; }
.stock-result:nth-child(even) { background: #0d1117; }
.stock-result:hover { background: #192431; }
.stock-result.selected { background: #17283a; border-color: #303741; box-shadow: inset 2px 0 #58c7ff; }
.stock-market-icon,
.stock-market-icon.cn,
.stock-market-icon.hk,
.stock-market-icon.us { color: #58c7ff; background: #111e2b; border: 1px solid #2e4d65; border-radius: 1px; font-size: 10px; width: 32px; height: 30px; }
.stock-result-name { flex: 1; }
.stock-result-name strong { font-size: 12px; font-weight: 500; max-width: 100%; }
.stock-result-name small { color: #8b99a9; font-size: 10px; margin-top: 4px; }
.stock-result-arrow { color: #58c7ff; }
.stock-search-status { color: #8b99a9; font-size: 11px; min-height: 35px; margin-top: 9px; line-height: 1.6; }
.stock-empty { color: #8b99a9; font-size: 12px; }
.trade-ticket { background: #0b0f14; border-color: #3d4651; border-top: 2px solid #ff9f1c; border-radius: 1px; padding: 17px; box-shadow: none; }
.trade-selected-label { margin: 3px 0 8px; }
.trade-selected-label .badge { color: #58c7ff; background: #132334; border: 1px solid #2c4b66; border-radius: 1px; font-size: 10px; }
.trade-selected-label small { color: #9ba7b4; font-size: 10px; }
.trade-stock-name { color: #f1f4f7; font-size: 20px; font-weight: 600; line-height: 1.4; }
.trade-stock-symbol { color: #58c7ff; font-size: 12px; letter-spacing: .4px; margin: 5px 0 10px; }
.trade-ticket .market-quote { color: #ffb74f; font-size: 35px; letter-spacing: -1px; font-weight: 500; }
.trade-ticket .market-quote small { color: #9ba7b4; font-size: 11px; }
.trade-price-date { color: #9ba7b4; font-size: 10px; margin: 5px 0 13px; }
.trade-ticket label { color: #bbc4ce; font-size: 11px; margin-top: 12px; }
.trade-ticket input,
.trade-ticket select { color: #f1f4f7; background: #080a0e; border-color: #414c59; border-radius: 1px; padding: 9px 10px; font-size: 13px; box-shadow: none; }
.trade-ticket input:hover,
.trade-ticket select:hover { border-color: #84909e; }
.trade-ticket input:focus,
.trade-ticket select:focus { border-color: #ff9f1c; box-shadow: none; }
.trade-directions { gap: 4px; margin: 7px 0 9px; }
.trade-direction { --trade-accent: #51d59a; color: #b5c0cb; background: #131922; border: 1px solid #38424e; border-radius: 1px; padding: 9px 2px; transition: background .1s, color .1s; }
.trade-direction[data-trade-side="sell"] { --trade-accent: #ff9f1c; }
.trade-direction[data-trade-side="short"] { --trade-accent: #ff6868; }
.trade-direction[data-trade-side="cover"] { --trade-accent: #58c7ff; }
.trade-direction strong { color: inherit; font-size: 13px; }
.trade-direction small { color: inherit; font-size: 10px; margin-top: 4px; }
.trade-direction:hover { color: #fff; border-color: var(--trade-accent); background: #1d2733; }
.trade-direction.active,
.trade-direction[data-trade-side="short"].active,
.trade-direction[data-trade-side="sell"].active,
.trade-direction[data-trade-side="cover"].active { background: var(--trade-accent); border-color: var(--trade-accent); color: #080a0e; box-shadow: none; }
.trade-action-help { color: #9ba7b4; font-size: 11px; line-height: 1.65; min-height: 36px; margin: 9px 0 12px; }
.trade-quantity-heading { margin: 9px 0 6px; }
.trade-quantity-heading label { margin: 0; }
.trade-quantity-heading button { color: #58c7ff; font-size: 11px; }
.trade-position-hint { color: #9ba7b4; font-size: 11px; margin-top: 7px; }
.trade-ticket .summary-line { border-color: #303741; margin: 8px 0; padding: 9px 0; font-size: 11px; }
.trade-ticket .summary-line span { color: #9ba7b4; }
.trade-ticket .summary-line strong { color: #ffb74f; font-size: 14px; font-weight: 500; }
.trade-risk-summary { color: #9ba7b4; border-color: #303741; padding: 7px 0 2px; font-size: 11px; }
.trade-risk-summary > div { margin: 6px 0; }
.trade-risk-summary strong { color: #e3e6eb; font-weight: 500; }
.trade-risk-summary summary { color: #58c7ff; font-size: 11px; margin: 8px 0; }
.trade-risk-summary small { color: #9ba7b4; font-size: 10px; line-height: 1.7; }
.trade-validation { color: #ff8686; font-size: 11px; line-height: 1.6; margin: 6px 0 10px; }
.trade-rule-note,
.trade-simulation-note { color: #8b99a9; font-size: 10px; line-height: 1.7; opacity: 1; }
.trade-simulation-note { margin-top: 10px; }
.trade-ticket .button.primary { color: #080a0e; background: #51d59a; border: 1px solid #51d59a; border-radius: 1px; box-shadow: none; padding: 11px 12px; font-weight: 700; font-size: 13px; }
.trade-ticket .button.primary[data-side="sell"] { background: #ff9f1c; border-color: #ff9f1c; }
.trade-ticket .button.primary[data-side="short"] { background: #ff6868; border-color: #ff6868; }
.trade-ticket .button.primary[data-side="cover"] { background: #58c7ff; border-color: #58c7ff; }
.trade-ticket .button.primary:hover { color: #080a0e; filter: brightness(1.1); transform: none; box-shadow: none; }
.trade-ticket .button.primary:disabled { filter: saturate(.4); opacity: .45; }

@media (min-width: 801px) and (max-height: 850px) {
  .welcome-experience { min-height: 600px; }
  .welcome-details { padding: 16px 21px; }
  .welcome-capital { margin-top: 10px; padding-bottom: 10px; }
  .welcome-capital strong { font-size: 41px; }
  .welcome-office-summary { padding: 11px 0 10px; }
  .welcome-office-summary h2 { font-size: 20px; }
  .welcome-office-facts { margin: 9px 0; }
  .welcome-form-fields label { margin-top: 10px; }
  .welcome-staff-detail { min-height: 16px; }
  .welcome-budget { margin-top: 10px; padding: 9px 11px; }
  .welcome-enter { padding-top: 10px; }
}
@media (min-width: 801px) and (max-width: 1100px) {
  .welcome-experience { grid-template-columns: minmax(0, 1fr) 320px; }
  .welcome-details { padding-left: 19px; padding-right: 19px; }
  .welcome-scene { padding: 14px; }
  .welcome-headline { top: 21px; left: 21px; }
  .welcome-headline h1 { font-size: 36px; }
  .welcome-option-caption { font-size: 10px; padding: 8px 6px; }
}
@media (max-width: 800px) {
  .welcome-backdrop { padding: 10px; }
  .dialog.welcome-dialog { width: 100%; max-height: calc(100dvh - 20px); border-radius: 2px; }
  .welcome-experience { display: block; height: auto; min-height: 0; }
  .welcome-scene { padding: 14px; }
  .welcome-details { border-top: 1px solid #303741; border-left: 0; padding: 21px; overflow-y: visible; }
  .welcome-capital strong { font-size: 47px; }
  .welcome-form-fields input,
  .welcome-form-fields select { font-size: 16px; }
  .welcome-staff-detail { min-height: 0; }
  .welcome-enter { padding-top: 18px; }
  .welcome-headline h1 { font-size: clamp(30px, 6vw, 45px); }
  .welcome-city { min-width: 83px; padding: 8px 10px; }
  .welcome-city small { font-size: 8px; }
}
@media (max-width: 650px) {
  .trade-layout { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .trade-discovery h3 { font-size: 19px; margin-bottom: 12px; }
  .stock-results { height: 180px; }
  .stock-search-status { min-height: 0; }
  .trade-ticket { padding: 14px; }
  .trade-selected-label { margin-top: 2px; }
  .trade-ticket input,
  .trade-ticket select,
  .stock-search-wrap input { font-size: 16px; }
  .trade-ticket .market-quote { font-size: 33px; }
  .trade-direction { padding: 10px 2px; }
  .trade-direction small { font-size: 9px; }
  .trade-risk-summary > div { gap: 7px; }
}
@media (max-width: 480px) {
  .welcome-scene { padding: 11px; gap: 12px; }
  .welcome-topbar { height: 40px; }
  .welcome-hero { min-height: 355px; }
  .welcome-headline { top: 24px; left: 19px; }
  .welcome-headline h1 { font-size: 35px; }
  .welcome-headline p { font-size: 11px; max-width: 220px; }
  .welcome-view-label { left: 17px; right: 17px; bottom: 79px; }
  .welcome-view-label strong { font-size: 11px; }
  .welcome-view-label small { font-size: 9px; }
  .welcome-city-tabs { left: 16px; right: 16px; bottom: 17px; gap: 5px; }
  .welcome-city { min-width: 0; flex: 1; padding: 8px 9px; }
  .welcome-city span { font-size: 11px; }
  .welcome-city small { font-size: 8px; letter-spacing: .2px; }
  .welcome-option-caption { font-size: 11px; padding: 9px; }
  .welcome-details { padding: 21px 18px; }
  .welcome-budget small { font-size: 10px; }
  .concept-label { font-size: 8px; padding: 3px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-city, .welcome-office-option, .welcome-enter-button,
  .stock-result, .trade-direction { transition: none; }
}