:root {
  color-scheme: dark;
  --ink: #0c0f10;
  --background: #101314;
  --background-deep: #090b0c;
  --panel: #181c1d;
  --panel-raised: #202526;
  --panel-soft: #252a2b;
  --steel: #b8c0bd;
  --steel-bright: #eef2ef;
  --muted: #89928f;
  --faint: #5f6865;
  --line: #343b39;
  --line-light: #46504d;
  --rust: #df6b2d;
  --rust-bright: #ff9252;
  --rust-dark: #8a3418;
  --amber: #e7b15d;
  --green: #6bbb80;
  --blue: #6b9fc2;
  --red: #df6b63;
  --purple: #9a80c0;
  --shadow: 0 22px 60px rgba(0, 0, 0, .35);
  --radius: 18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
body[data-supporter-style="steel"] { --rust: #91aaba; --rust-bright: #d0e4ef; }
body[data-supporter-style="teal"] { --rust: #48b6a6; --rust-bright: #85e1d2; }
body[data-supporter-style="plum"] { --rust: #b38bcc; --rust-bright: #deb8f5; }
.support-form { display: grid; gap: 14px; }
.support-form label { display: grid; gap: 7px; }
.support-form textarea { width: 100%; resize: vertical; }
.support-message p { white-space: pre-wrap; overflow-wrap: anywhere; }
.content-card small { overflow-wrap: anywhere; }
.store-public { padding-bottom: 80px; }
.store-hero { padding: 40px 0 32px; max-width: 760px; }
.store-hero h1 { font-size: clamp(2.6rem,6vw,5.5rem); line-height: .98; margin: 18px 0; text-transform: uppercase; letter-spacing: -.045em; }
.store-hero h1 span { color: #ff9252; }
.store-hero > p:not(.eyebrow) { font-size: 1.1rem; color: #b8c0bd; }
.store-assurances { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.store-assurances span { border: 1px solid #343b39; border-radius: 30px; padding: 8px 13px; font-size: .8rem; color: #b8c0bd; }
.store-products { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.store-product { display: flex; flex-direction: column; min-width: 0; padding: clamp(22px,4vw,38px); border: 1px solid #343b39; border-radius: 20px; background: linear-gradient(135deg,#202526,#151919); }
.store-featured { border-color: #986038; background: radial-gradient(ellipse at top right,#493021 0,transparent 65%),#191d1e; }
.store-product-top { display: flex; gap: 16px; align-items: center; }
.store-product-top .eyebrow { margin: 0; }
.store-emblem { font-size: 2.7rem; color: #ff9252; }
.store-product h2 { font-size: 2rem; margin: 20px 0 10px; }
.store-price { font-size: 3.5rem; font-weight: 850; line-height: 1; margin: 10px 0; color: #eef2ef; }
.store-price span { font-size: .95rem; color: #b8c0bd; font-weight: 500; }
.store-product ul { display: grid; gap: 12px; padding-left: 20px; margin: 18px 0 28px; flex: 1; }
.store-product li::marker { color: #ff9252; }
.store-product .primary-button { background: #df6b2d; color: #111315; border-color: #df6b2d; text-align: center; justify-content: center; }
.store-fine { font-size: .82rem; color: #b8c0bd; line-height: 1.6; margin: 15px 0 0; }
.store-details { margin-top: 38px; border-top: 1px solid #343b39; padding-top: 24px; }
.store-details > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
.store-details h3 { color: #eef2ef; }.store-details p { color: #b8c0bd; line-height: 1.7; }
.store-notice { padding: 16px; border-left: 3px solid #df6b2d; background: #251e19; }.store-footer { margin-top: 28px; }
@media(max-width:650px){.store-products,.store-details > div{grid-template-columns:1fr}.store-hero{padding-top:24px}.store-product{padding:24px}.store-assurances{gap:6px}.store-assurances span{font-size:.74rem;padding:7px 9px}}
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background: var(--background);
  color: var(--steel-bright);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--rust-bright); }
button { color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }

::selection { background: rgba(223, 107, 45, .32); color: #fff; }
:focus-visible { outline: 3px solid rgba(255, 146, 82, .55); outline-offset: 2px; }

/* Garage Desk: compact daily decisions, using the existing game palette. */
.desk-identity { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr); align-items: center; gap: 24px; padding: 22px; border: 1px solid #60402e; border-radius: 14px; background: linear-gradient(110deg, #30231c, #171c1c); }
.desk-identity h2 { margin: 0; font-size: clamp(20px, 2.4vw, 30px); overflow-wrap: anywhere; }
.desk-identity p:not(.eyebrow) { margin: 6px 0 0; color: var(--steel); font-size: 12px; }
.desk-level label { display: flex; justify-content: space-between; font-size: 12px; }
.desk-level small { color: var(--steel); font-size: 11px; }
.desk-level progress { appearance: none; display: block; width: 100%; height: 7px; margin: 10px 0; border: 0; border-radius: 6px; overflow: hidden; background: #343b39; }
.desk-level progress::-webkit-progress-bar { background: #343b39; }
.desk-level progress::-webkit-progress-value { background: var(--rust-bright); }
.desk-level progress::-moz-progress-bar { background: var(--rust-bright); }
.desk-section { margin-top: 24px; }
.desk-section .card-heading { flex-wrap: wrap; gap: 6px 12px; }
.desk-tasks { display: grid; gap: 10px; }
.desk-task { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px; border: 1px solid var(--line); border-left: 3px solid var(--rust); border-radius: 10px; background: var(--panel); }
.desk-task > div { min-width: 0; }
.desk-task.ready { border-left-color: var(--green); }
.desk-task.waiting { border-left-color: var(--blue); }
.desk-task.attention { border-left-color: var(--amber); }
.desk-status { color: var(--rust-bright); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ready .desk-status { color: var(--green); }
.waiting .desk-status { color: var(--blue); }
.attention .desk-status { color: var(--amber); }
.desk-task h3 { margin: 4px 0; font-size: 16px; }
.desk-task p { margin: 0; color: var(--steel); font-size: 12px; overflow-wrap: anywhere; }
.desk-task button { flex-shrink: 0; }
.desk-countdown { display: block; margin-top: 8px; font-size: 13px; color: var(--blue); font-variant-numeric: tabular-nums; }
.first-repair { border: 1px solid var(--line); border-radius: 14px; padding: 20px; background: #141819; }
.first-repair > p { font-size: 12px; }
.desk-journey { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.desk-journey li { display: flex; align-items: flex-start; gap: 10px; }
.journey-number { display: grid; place-items: center; flex: 0 0 27px; height: 27px; border: 1px solid var(--line-light); border-radius: 50%; font-size: 12px; color: var(--steel); }
.complete .journey-number { color: var(--green); border-color: var(--green); }
.desk-journey h3 { margin: 0 0 4px; font-size: 13px; }
.desk-journey p { margin: 0; color: var(--steel); font-size: 11px; }
.desk-destinations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.desk-destinations button { display: grid; grid-template-columns: 30px minmax(0,1fr); align-content: start; gap: 5px 10px; padding: 18px; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.desk-destinations button:hover { border-color: var(--rust); background: var(--panel-raised); }
.desk-destinations span { grid-row: 1/3; color: var(--rust-bright); font-size: 23px; }
.desk-destinations b { font-size: 13px; }
.desk-destinations small { color: var(--steel); font-size: 11px; }
.desk-resource-guide { margin: 0; }
.desk-resource-guide > div { padding: 9px 0; border-bottom: 1px solid var(--line); }
.desk-resource-guide > div:last-child { border: 0; }
.desk-resource-guide dt { font-size: 12px; font-weight: 800; }
.desk-resource-guide dd { margin: 3px 0 0; color: var(--steel); font-size: 12px; }

.page-width { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.eyebrow {
  margin: 0 0 9px;
  color: var(--rust-bright);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.muted { color: var(--muted); }
.optional { color: var(--faint); font-size: 11px; font-weight: 600; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.brand-logo { width: 54px; height: 54px; flex: 0 0 54px; filter: drop-shadow(0 10px 16px rgba(0,0,0,.28)); }
.brand-copy { display: grid; line-height: 1; }
.brand-copy strong { font-size: 25px; letter-spacing: .12em; font-weight: 950; }
.brand-copy small { margin-top: 7px; color: var(--muted); font-size: 9px; letter-spacing: .22em; font-weight: 800; }
.brand-compact { gap: 9px; }
.brand-compact .brand-logo { width: 40px; height: 40px; flex-basis: 40px; }
.brand-compact .brand-copy strong { font-size: 17px; }
.brand-compact .brand-copy small { margin-top: 5px; font-size: 7px; }

/* Landing */
.landing-body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(223, 107, 45, .13), transparent 28rem),
    radial-gradient(circle at 12% 42%, rgba(128, 145, 139, .08), transparent 32rem),
    linear-gradient(180deg, #111516 0%, #0c0f10 58%, #101314 100%);
}
.landing-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(to bottom, #000 0, transparent 75%);
}
.landing-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 94px;
  gap: 20px;
}
.landing-header-actions { display: flex; align-items: center; gap: 18px; }
.alpha-chip {
  padding: 7px 10px;
  border: 1px solid rgba(223,107,45,.38);
  border-radius: 999px;
  background: rgba(223,107,45,.08);
  color: var(--amber);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}
.text-link { color: var(--steel); font-size: 13px; font-weight: 800; text-decoration: none; }
.text-link:hover { color: #fff; }

.landing-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(370px, .82fr);
  gap: clamp(34px, 7vw, 84px);
  align-items: center;
  min-height: 680px;
  padding-block: 58px 88px;
}
.hero-copy-block { position: relative; }
.hero-copy-block::after {
  content: "R";
  position: absolute;
  z-index: -1;
  right: -18px;
  top: -150px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(184,192,189,.06);
  font-size: clamp(320px, 43vw, 600px);
  font-weight: 950;
  line-height: 1;
  transform: rotate(-4deg);
}
.hero-copy-block h1 {
  max-width: 800px;
  margin: 0;
  color: #f1f3f1;
  font-size: clamp(47px, 7.4vw, 94px);
  line-height: .95;
  letter-spacing: -.055em;
  font-weight: 950;
  text-transform: uppercase;
}
.hero-copy-block h1 em { color: var(--rust-bright); font-style: normal; }
.hero-lead { max-width: 690px; margin: 28px 0 0; color: #a8b0ad; font-size: clamp(16px, 1.7vw, 20px); }
.hero-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 29px; }
.hero-points span {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(24,28,29,.65);
  color: var(--steel);
  font-size: 11px;
  font-weight: 750;
}
.hero-points span::before { content: "•"; margin-right: 7px; color: var(--rust); }

.auth-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(35,40,41,.98), rgba(18,21,22,.98));
  box-shadow: 0 35px 80px rgba(0,0,0,.45);
}
.auth-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--rust-dark), var(--rust-bright), var(--amber));
}
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 8px; border-bottom: 1px solid var(--line); background: #141718; }
.auth-tab {
  min-height: 45px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.auth-tab.active { background: var(--panel-soft); color: #fff; box-shadow: inset 0 0 0 1px var(--line-light); }
.auth-form { display: none; gap: 16px; padding: 30px; }
.auth-form.active { display: grid; }
.verification-wrap { max-width: 640px; margin-block: 36px; }
.verification-wrap h1 { margin: 0; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.15; }
.verification-wrap p { margin: 0; overflow-wrap: anywhere; }
#verification-message:empty { display: none; }
.verification-wrap summary { cursor: pointer; padding-block: 12px; }
#verification-change { display: grid; gap: 16px; }
#signup-captcha { min-height: 78px; }
.form-heading { margin-bottom: 4px; }
.form-heading h2 { margin: 0 0 7px; font-size: 25px; line-height: 1.15; }
.form-heading p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 13px; }
.auth-form label, .profile-form label {
  display: grid;
  gap: 7px;
  color: #d7dcda;
  font-size: 12px;
  font-weight: 800;
}
.auth-form input, .profile-form input, .profile-form textarea, .quantity-input {
  width: 100%;
  min-height: 47px;
  border: 1px solid var(--line-light);
  border-radius: 11px;
  outline: 0;
  background: #0e1112;
  color: #f5f7f5;
  padding: 11px 13px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.auth-form input:focus, .profile-form input:focus, .profile-form textarea:focus, .quantity-input:focus {
  border-color: var(--rust);
  background: #111516;
  box-shadow: 0 0 0 3px rgba(223,107,45,.13);
}
.check-row { grid-template-columns: auto 1fr !important; align-items: start; gap: 10px !important; color: var(--muted) !important; font-weight: 600 !important; }
.check-row input { width: 17px; height: 17px; min-height: auto; margin-top: 2px; accent-color: var(--rust); }
.form-message { display: none; margin: 18px 30px -10px; padding: 11px 13px; border-radius: 10px; font-size: 12px; font-weight: 700; }
.form-message.visible { display: block; }
.form-message.error { border: 1px solid rgba(223,107,99,.45); background: rgba(223,107,99,.09); color: #f3aaa5; }
.form-message.success { border: 1px solid rgba(107,187,128,.42); background: rgba(107,187,128,.09); color: #a8e0b7; }
.form-footnote { margin: 0; color: var(--faint); font-size: 10px; text-align: center; }

.primary-button, .secondary-button, .ghost-button, .danger-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 11px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease, background .12s ease;
}
.primary-button { border: 1px solid #fb9c61; background: linear-gradient(180deg, #ef7a39, #c44f1f); color: #160b06; box-shadow: 0 12px 26px rgba(184,67,22,.23); }
.primary-button:hover:not(:disabled) { filter: brightness(1.08); transform: translateY(-1px); }
.primary-button:active:not(:disabled) { transform: translateY(1px); }
.secondary-button { border: 1px solid var(--line-light); background: var(--panel-soft); color: #fff; }
.secondary-button:hover:not(:disabled) { border-color: #68726f; background: #2d3332; }
.ghost-button { border: 1px solid var(--line); background: transparent; color: var(--steel); }
.ghost-button:hover:not(:disabled) { border-color: var(--rust); color: #fff; }
.danger-button { border: 1px solid rgba(223,107,99,.45); background: rgba(223,107,99,.1); color: #f1aaa5; }
button:disabled { cursor: not-allowed; opacity: .48; filter: grayscale(.25); }
.full { width: 100%; }

.public-stats-wrap { border-block: 1px solid var(--line); background: rgba(9,11,12,.72); }
.public-stats { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 128px; }
.public-stats > div { display: grid; align-content: center; padding: 22px 28px; border-left: 1px solid var(--line); }
.public-stats > div:last-child { border-right: 1px solid var(--line); }
.public-stats strong { font-size: clamp(28px, 4vw, 43px); line-height: 1; letter-spacing: -.04em; }
.public-stats span { margin-top: 8px; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

.feature-section { padding-block: 110px; }
.section-heading { max-width: 720px; margin-bottom: 40px; }
.section-heading h2, .world-section h2 { margin: 0 0 15px; font-size: clamp(34px, 5vw, 58px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.section-heading > p:last-child, .world-section p { color: var(--muted); font-size: 16px; }
.feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.feature-card {
  position: relative;
  min-height: 310px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(155deg, rgba(33,38,39,.95), rgba(17,20,21,.98));
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.feature-card::after { content: ""; position: absolute; inset: auto -60px -85px auto; width: 180px; height: 180px; border: 1px solid rgba(255,255,255,.06); border-radius: 50%; }
.feature-number { position: absolute; top: 20px; right: 21px; color: #555f5c; font-size: 11px; font-weight: 900; }
.feature-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 42px; border: 1px solid var(--line-light); border-radius: 14px; background: #111415; color: var(--rust-bright); font-size: 24px; }
.feature-card h3 { margin: 0 0 12px; font-size: 21px; }
.feature-card p { margin: 0; color: var(--muted); font-size: 13px; }
.feature-street .feature-icon { color: var(--purple); }
.feature-economy .feature-icon { color: var(--amber); }
.feature-crew .feature-icon { color: var(--green); }

.world-section { padding-block: 88px 110px; border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(31,36,37,.38), transparent); }
.world-grid { display: grid; grid-template-columns: minmax(280px,.72fr) minmax(500px,1.28fr); gap: 65px; align-items: center; }
.district-map {
  position: relative;
  height: 470px;
  overflow: hidden;
  border: 1px solid var(--line-light);
  border-radius: 22px;
  background:
    linear-gradient(28deg, transparent 48%, rgba(255,255,255,.04) 49%, rgba(255,255,255,.04) 51%, transparent 52%) 0 0/86px 86px,
    linear-gradient(118deg, transparent 48%, rgba(255,255,255,.03) 49%, rgba(255,255,255,.03) 51%, transparent 52%) 0 0/116px 116px,
    #15191a;
  box-shadow: var(--shadow);
}
.map-river { position: absolute; width: 150%; height: 92px; left: -25%; top: 46%; border-block: 1px solid rgba(107,159,194,.3); background: rgba(49,82,103,.24); transform: rotate(-12deg); }
.map-district {
  position: absolute;
  display: grid;
  gap: 2px;
  min-width: 145px;
  padding: 13px 14px;
  border: 1px solid var(--line-light);
  border-left: 4px solid var(--rust);
  border-radius: 10px;
  background: rgba(12,15,16,.88);
  box-shadow: 0 12px 30px rgba(0,0,0,.32);
  font-size: 13px;
  font-weight: 900;
}
.map-district small { color: var(--muted); font-size: 9px; font-weight: 700; }
.south-yard { left: 11%; bottom: 13%; border-left-color: var(--rust-bright); }
.mill-row { left: 15%; top: 16%; border-left-color: var(--blue); }
.foundry { right: 12%; top: 12%; border-left-color: var(--amber); }
.county { right: 8%; bottom: 19%; border-left-color: var(--green); }

.landing-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding-block: 35px 48px; border-top: 1px solid var(--line); }
.landing-footer p { margin: 0; color: var(--faint); font-size: 11px; text-align: center; }
.footer-links { display: flex; gap: 13px; }
.footer-links a { color: var(--muted); font-size: 11px; font-weight: 700; text-decoration: none; }
.footer-links a:hover { color: #fff; }
.not-found { display: grid; place-items: start; align-content: center; min-height: 100vh; max-width: 850px; }
.not-found h1 { max-width: 750px; margin: 20px 0 30px; font-size: clamp(44px,8vw,86px); line-height: .96; text-transform: uppercase; }

/* Game shell */
/* Main content uses document scrolling; fixed side panels scroll independently. */
.game-body { overflow-y: auto; background: var(--background-deep); }
.game-loading {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 13px;
  min-height: 100vh;
  background: radial-gradient(circle, rgba(223,107,45,.12), transparent 360px), #0c0f10;
}
.game-loading img { animation: loading-pulse 1.8s ease-in-out infinite; }
.game-loading strong { margin-top: 8px; font-size: 13px; letter-spacing: .18em; }
.game-loading span { color: var(--muted); font-size: 12px; }
@keyframes loading-pulse { 50% { transform: translateY(-4px); filter: drop-shadow(0 14px 25px rgba(223,107,45,.28)); } }

.game-shell { min-height: 100vh; }
.game-topbar {
  position: fixed;
  z-index: 50;
  inset: 0 0 auto 0;
  display: grid;
  grid-template-columns: 240px minmax(500px,1fr) 240px;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(15,18,19,.97);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 32px rgba(0,0,0,.24);
}
.game-brand-wrap { display: flex; align-items: center; min-width: 0; }
.mobile-menu-button { display: none !important; }
.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--steel);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--rust); color: #fff; }
.resource-strip { display: grid; grid-template-columns: minmax(105px,.75fr) repeat(4,minmax(92px,1fr)); gap: 8px; }
.resource {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: end;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #292f2e;
  border-radius: 10px;
  background: #111516;
}
.resource > span { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.resource > span small { color: var(--faint); letter-spacing: 0; text-transform: none; }
.resource strong { font-size: 13px; line-height: 1; font-style: normal; white-space: nowrap; }
.resource strong b, .resource strong i { font-style: normal; }
.resource-bar { grid-column: 1/-1; height: 4px; overflow: hidden; border-radius: 999px; background: #272d2c; }
.resource-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c45423, var(--rust-bright)); transition: width .3s ease; }
.resource-bar.focus span { background: linear-gradient(90deg, #6c5792, #ae91db); }
.resource-bar.health span { background: linear-gradient(90deg, #42845a, #77ca8f); }
.resource-bar.heat span { background: linear-gradient(90deg, #c08732, #e85836); }
.cash-resource { align-content: center; }
.cash-resource strong { color: var(--amber); font-size: 17px; }
.cash-resource::before { content: "$"; position: absolute; right: 8px; bottom: -8px; color: rgba(231,177,93,.06); font-size: 55px; font-weight: 950; }
.topbar-identity { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; text-align: right; }
.topbar-identity span { color: var(--rust-bright); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.topbar-identity strong { grid-column: 1; font-size: 13px; }
.topbar-identity .icon-button { grid-column: 2; grid-row: 1/3; }

.game-layout {
  display: grid;
  grid-template-columns: 230px minmax(0,1fr) 300px;
  min-height: 100vh;
  padding-top: 76px;
}
.game-sidebar {
  position: fixed;
  z-index: 40;
  top: 76px;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 230px;
  border-right: 1px solid var(--line);
  background: #111415;
}
.game-nav { display: grid; gap: 3px; padding: 15px 12px; overflow-y: auto; }
.nav-group{display:grid;gap:3px;margin:0 0 12px;min-width:0}.nav-group h2{font-size:10px;letter-spacing:.06em;color:var(--rust-bright);padding:12px 7px 5px;margin:0;text-transform:uppercase}.nav-search-label{font-size:11px;color:var(--muted)}#nav-search{width:100%;min-width:0;min-height:44px;padding:8px;font-size:16px}#nav-no-results{font-size:12px}.nav-group[hidden],.nav-item[hidden],#nav-no-results[hidden]{display:none!important}
.nav-item {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  align-items: center;
  min-height: 53px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.nav-item > span { grid-row: 1/3; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 15px; }
.nav-item b { align-self: end; font-size: 12px; }
.nav-item small { align-self: start; color: var(--faint); font-size: 9px; }
.nav-item:hover { background: #191d1e; }
.nav-item.active { border-color: #3e4543; background: linear-gradient(90deg, rgba(223,107,45,.14), rgba(35,40,41,.8)); }
.nav-item.active > span { border-color: rgba(223,107,45,.45); background: rgba(223,107,45,.1); color: var(--rust-bright); }
.sidebar-foot { margin-top: auto; display: flex; justify-content: space-between; padding: 14px 16px calc(14px + var(--safe-bottom)); border-top: 1px solid var(--line); color: var(--faint); font-size: 8px; letter-spacing: .08em; }
.sidebar-foot a { color: var(--muted); text-decoration: none; }

.game-content {
  grid-column: 2;
  min-width: 0;
  min-height: calc(100vh - 76px);
  padding: 26px clamp(20px, 3vw, 38px) 70px;
  background:
    radial-gradient(circle at 85% 0, rgba(223,107,45,.055), transparent 450px),
    linear-gradient(180deg, #111415, #0d1011);
}
.game-rail {
  position: fixed;
  z-index: 20;
  top: 76px;
  right: 0;
  bottom: 0;
  width: 300px;
  padding: 16px;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: #111415;
}
.rail-card, .content-card, .action-card, .news-card, .stat-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(25,29,30,.94);
  box-shadow: 0 13px 28px rgba(0,0,0,.11);
}
.rail-card { margin-bottom: 12px; padding: 17px; }
.rail-card h2, .rail-card h3 { margin: 0; }
.rail-card p:not(.eyebrow) { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
.identity-card { display: grid; grid-template-columns: 48px 1fr; gap: 12px; }
.avatar-plate { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #60402e; border-radius: 13px; background: linear-gradient(145deg,#34251e,#171a1b); color: var(--rust-bright); font-size: 16px; font-weight: 950; }
.identity-card .level-progress, .identity-card > small { grid-column: 1/-1; }
.level-progress { height: 5px; overflow: hidden; border-radius: 999px; background: #303635; }
.level-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--rust),var(--amber)); transition: width .3s ease; }
.identity-card > small { color: var(--faint); font-size: 9px; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 0; }
.mini-stats > div { padding: 9px; border: 1px solid #2f3534; border-radius: 9px; background: #121617; }
.mini-stats dt { color: var(--faint); font-size: 8px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.mini-stats dd { margin: 2px 0 0; font-size: 12px; font-weight: 850; }

.page-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 0 0 22px; }
.page-head h1 { margin: 0; font-size: clamp(31px,4vw,48px); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; }
.page-head p:not(.eyebrow) { max-width: 690px; margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.page-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.city-hero {
  position: relative;
  min-height: 245px;
  overflow: hidden;
  padding: clamp(25px,4vw,44px);
  border: 1px solid var(--line-light);
  border-radius: 19px;
  background:
    linear-gradient(105deg, rgba(10,13,14,.98) 0%, rgba(15,18,19,.92) 52%, rgba(15,18,19,.42) 100%),
    radial-gradient(circle at 85% 55%, rgba(223,107,45,.27), transparent 230px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.025) 47px 48px),
    #202526;
  box-shadow: var(--shadow);
}
.city-hero::before { content: "GREYBRIDGE"; position: absolute; right: -8px; bottom: -28px; color: rgba(255,255,255,.035); font-size: clamp(62px,10vw,135px); font-weight: 950; letter-spacing: -.06em; }
.city-hero h2 { position: relative; max-width: 690px; margin: 0; font-size: clamp(30px,4.4vw,58px); line-height: 1; letter-spacing: -.045em; text-transform: uppercase; }
.city-hero p { position: relative; max-width: 650px; margin: 14px 0 0; color: #abb3b0; font-size: 14px; }
.city-hero .hero-actions { position: relative; display: flex; gap: 9px; flex-wrap: wrap; margin-top: 24px; }

.quick-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; margin: 18px 0; }
.quick-card {
  position: relative;
  min-height: 126px;
  padding: 17px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel);
  text-align: left;
  cursor: pointer;
}
.quick-card:hover { border-color: var(--line-light); background: var(--panel-raised); transform: translateY(-1px); }
.quick-card span { display: block; margin-bottom: 18px; color: var(--rust-bright); font-size: 21px; }
.quick-card b { display: block; font-size: 13px; }
.quick-card small { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; }
.quick-card::after { content: "→"; position: absolute; right: 15px; top: 15px; color: var(--faint); }

.content-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(280px,.7fr); gap: 14px; margin-top: 14px; }
.content-card { padding: 20px; }
.card-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.card-heading h2, .card-heading h3 { margin: 0; font-size: 17px; }
.card-heading small { color: var(--faint); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.news-list, .activity-list { display: grid; gap: 10px; }
.news-item { padding: 13px 0; border-bottom: 1px solid #2b3130; }
.news-item:last-child { border-bottom: 0; }
.news-item header { display: flex; justify-content: space-between; gap: 12px; }
.news-item h3 { margin: 0; font-size: 13px; }
.news-item header span { color: var(--rust-bright); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.news-item p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.activity-item { position: relative; padding: 0 0 14px 21px; border-left: 1px solid #39413f; }
.activity-item:last-child { border-left-color: transparent; }
.activity-item::before { content: ""; position: absolute; left: -4px; top: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--rust); box-shadow: 0 0 0 4px #181c1d; }
.activity-item p { margin: 0; color: #c7cecb; font-size: 11px; }
.activity-item time { display: block; margin-top: 4px; color: var(--faint); font-size: 9px; }

.stats-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.stat-card { padding: 16px; }
.stat-card span { color: var(--faint); font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.stat-card strong { display: block; margin-top: 5px; font-size: 22px; }

.action-list { display: grid; gap: 11px; }
.action-card { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 16px; }
.action-icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line-light); border-radius: 13px; background: #111516; color: var(--rust-bright); font-size: 21px; }
.action-copy h3 { margin: 0; font-size: 14px; }
.action-copy p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }
.action-meta { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 9px; }
.meta-chip { padding: 4px 7px; border: 1px solid #343b39; border-radius: 999px; color: #a5aeab; font-size: 8px; font-weight: 800; }
.meta-chip.risk-high, .meta-chip.risk-severe { border-color: rgba(223,107,99,.4); color: #e99c97; }
.meta-chip.risk-moderate { border-color: rgba(231,177,93,.4); color: #e6bf7d; }
.action-controls { min-width: 132px; text-align: right; }
.action-controls .locked-reason { display: block; max-width: 160px; margin-top: 6px; color: var(--faint); font-size: 8px; }

.section-banner { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 22px; margin-bottom: 16px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(110deg,rgba(223,107,45,.12),rgba(27,31,32,.92)); }
.section-banner h2 { margin: 0; font-size: 20px; }
.section-banner p { margin: 6px 0 0; color: var(--muted); font-size: 11px; }
.banner-value { font-size: 28px; font-weight: 950; color: var(--rust-bright); }

.skill-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }
.skill-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.skill-card header { display: flex; align-items: center; gap: 12px; }
.skill-card header > span { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-light); border-radius: 11px; color: var(--rust-bright); }
.skill-card h3 { margin: 0; font-size: 14px; }
.skill-card .skill-value { margin-left: auto; font-size: 26px; font-weight: 950; }
.skill-card p { min-height: 34px; margin: 13px 0; color: var(--muted); font-size: 10px; }
.skill-card footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.skill-card footer small { color: var(--faint); font-size: 8px; }

.active-shift-large { padding: 20px; border: 1px solid rgba(223,107,45,.4); border-radius: 15px; background: linear-gradient(115deg,rgba(223,107,45,.13),rgba(22,26,27,.95)); }
.active-shift-large header { display: flex; justify-content: space-between; gap: 20px; }
.active-shift-large h2 { margin: 0; font-size: 21px; }
.active-shift-large p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.shift-countdown { color: var(--amber); font-size: 25px; font-weight: 950; white-space: nowrap; }
.shift-progress { height: 8px; margin: 18px 0; overflow: hidden; border-radius: 999px; background: #303635; }
.shift-progress span { display: block; height: 100%; background: linear-gradient(90deg,var(--rust),var(--amber)); transition: width 1s linear; }

.heat-panel { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 16px; padding: 17px; border: 1px solid rgba(231,177,93,.34); border-radius: 14px; background: rgba(231,177,93,.06); }
.heat-gauge { display: grid; place-items: center; width: 64px; height: 64px; border: 6px solid #343a39; border-top-color: var(--amber); border-radius: 50%; font-size: 14px; font-weight: 900; }
.heat-panel h3 { margin: 0; font-size: 14px; }
.heat-panel p { margin: 5px 0 0; color: var(--muted); font-size: 10px; }

.inventory-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.inventory-card { position: relative; min-height: 145px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.inventory-card .item-icon { color: var(--amber); font-size: 23px; }
.inventory-card h3 { margin: 17px 0 4px; font-size: 12px; }
.inventory-card p { margin: 0; color: var(--muted); font-size: 9px; }
.item-quantity { position: absolute; top: 13px; right: 13px; padding: 4px 7px; border-radius: 999px; background: #303635; font-size: 9px; font-weight: 900; }
.market-table { width: 100%; border-collapse: collapse; }
.market-table th { padding: 10px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 8px; text-align: left; letter-spacing: .08em; text-transform: uppercase; }
.market-table td { padding: 13px 10px; border-bottom: 1px solid #2a302f; font-size: 10px; vertical-align: middle; }
.market-table tr:last-child td { border-bottom: 0; }
.market-item { display: flex; align-items: center; gap: 9px; }
.market-item > span { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 8px; color: var(--amber); }
.market-item strong, .market-item small { display: block; }
.market-item small { margin-top: 2px; color: var(--faint); }
.quantity-control { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.quantity-input { width: 54px; min-height: 36px; padding: 7px; text-align: center; }
.small-button { min-height: 36px; padding: 7px 10px; font-size: 9px; }

.placeholder-hero { min-height: 300px; display: grid; align-content: center; justify-items: start; padding: clamp(28px,5vw,55px); border: 1px dashed #46504d; border-radius: 18px; background: radial-gradient(circle at 85% 15%,rgba(107,187,128,.12),transparent 300px),var(--panel); }
.placeholder-hero .big-icon { font-size: 44px; color: var(--green); }
.placeholder-hero h2 { max-width: 650px; margin: 24px 0 11px; font-size: clamp(29px,4vw,48px); line-height: 1; text-transform: uppercase; }
.placeholder-hero p { max-width: 680px; margin: 0; color: var(--muted); font-size: 13px; }
.milestone-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.milestone-card { padding: 17px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.milestone-card span { color: var(--rust-bright); font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.milestone-card h3 { margin: 7px 0; font-size: 13px; }
.milestone-card p { margin: 0; color: var(--muted); font-size: 9px; }

.rank-table { width: 100%; border-collapse: collapse; }
.rank-table th { padding: 11px; border-bottom: 1px solid var(--line); color: var(--faint); font-size: 8px; text-align: left; text-transform: uppercase; letter-spacing: .08em; }
.rank-table td { padding: 13px 11px; border-bottom: 1px solid #2b3130; font-size: 10px; }
.rank-table tbody tr:hover { background: rgba(255,255,255,.018); }
.rank-position { width: 44px; color: var(--amber); font-weight: 950; }
.player-name-cell strong, .player-name-cell small { display: block; }
.player-name-cell small { color: var(--faint); }

.profile-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.45fr); gap: 14px; }
.profile-form { display: grid; gap: 15px; }
.profile-form textarea { min-height: 105px; resize: vertical; }
.profile-summary { display: grid; gap: 10px; }
.profile-summary .stat-card { min-height: 90px; }

.mobile-bottom-nav { display: none; }
.toast-region { position: fixed; z-index: 100; right: 18px; bottom: 18px; display: grid; gap: 9px; width: min(380px,calc(100% - 36px)); pointer-events: none; }
.toast { padding: 13px 15px; border: 1px solid var(--line-light); border-left: 4px solid var(--rust); border-radius: 12px; background: rgba(24,28,29,.98); box-shadow: 0 20px 50px rgba(0,0,0,.42); color: #e8ece9; font-size: 11px; animation: toast-in .2s ease both; }
.toast.error { border-left-color: var(--red); }
.toast.success { border-left-color: var(--green); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1260px) {
  .game-topbar { grid-template-columns: 215px minmax(460px,1fr) 190px; }
  .game-layout { grid-template-columns: 210px minmax(0,1fr) 270px; }
  .game-sidebar { width: 210px; }
  .game-rail { width: 270px; }
  .compact-resource { display: none; }
  .resource-strip { grid-template-columns: .7fr 1fr 1fr; }
}

@media (max-width: 1080px) {
  .landing-hero { grid-template-columns: 1fr minmax(340px,.75fr); gap: 35px; }
  .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature-card { min-height: 250px; }
  .world-grid { gap: 35px; }
  .game-topbar { grid-template-columns: 210px minmax(420px,1fr) 180px; }
  .game-layout { grid-template-columns: 210px minmax(0,1fr); }
  .game-rail { display: none; }
  .content-grid { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .page-width { width: min(100% - 28px, 720px); }
  .landing-header { min-height: 80px; }
  .landing-header-actions .text-link { display: none; }
  .landing-hero { grid-template-columns: 1fr; min-height: auto; padding-block: 55px 70px; }
  .hero-copy-block::after { top: -90px; right: -35px; }
  .hero-lead { max-width: 620px; }
  .auth-panel { max-width: 600px; width: 100%; }
  .public-stats { grid-template-columns: repeat(2,1fr); }
  .public-stats > div:last-child { grid-column: 1 / -1; }
  .public-stats > div { border-bottom: 1px solid var(--line); }
  .public-stats > div:nth-child(2) { border-right: 1px solid var(--line); }
  .feature-section { padding-block: 80px; }
  .world-grid { grid-template-columns: 1fr; }
  .district-map { height: 400px; }
  .landing-footer { grid-template-columns: 1fr; justify-items: start; }
  .landing-footer p { text-align: left; }

  .game-body { overflow: auto; }
  .game-topbar { grid-template-columns: minmax(145px,.5fr) minmax(330px,1fr); min-height: 68px; padding: 8px 10px; }
  .mobile-menu-button { display: inline-grid !important; margin-right: 7px; }
  .game-topbar .brand-copy small { display: none; }
  .topbar-identity { display: none; }
  .resource-strip { overflow-x: auto; grid-template-columns: 110px 125px 125px; scrollbar-width: none; }
  .resource-strip::-webkit-scrollbar { display: none; }
  .game-layout { display: block; padding-top: 68px; }
  .game-sidebar {
    top: 68px;
    z-index: 60;
    width: min(230px,84vw);
    transform: translateX(-105%);
    transition: transform .2s ease;
    box-shadow: 20px 0 50px rgba(0,0,0,.45);
  }
  .game-sidebar.open { transform: translateX(0); }
  .game-content { min-height: calc(100vh - 68px); padding: 20px 14px calc(90px + var(--safe-bottom)); }
  .mobile-bottom-nav {
    position: fixed;
    z-index: 55;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(5,1fr);
    min-height: calc(61px + var(--safe-bottom));
    padding: 6px 4px var(--safe-bottom);
    border-top: 1px solid var(--line);
    background: rgba(15,18,19,.97);
    backdrop-filter: blur(18px);
  }
  .mobile-bottom-nav button { display: grid; place-items: center; align-content: center; gap: 2px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 8px; font-weight: 800; }
  .mobile-bottom-nav button span { font-size: 16px; }
  .mobile-bottom-nav button.active { background: rgba(223,107,45,.1); color: var(--rust-bright); }
  .quick-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .inventory-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 620px) {
  .brand-logo { width: 46px; height: 46px; flex-basis: 46px; }
  .brand-copy strong { font-size: 19px; }
  .brand-copy small { font-size: 7px; }
  .alpha-chip { display: none; }
  .hero-copy-block h1 { font-size: clamp(43px,13.8vw,68px); }
  .hero-lead { font-size: 15px; }
  .auth-form { padding: 24px 19px; }
  .form-message { margin-inline: 19px; }
  .public-stats > div { padding: 20px 16px; }
  .feature-grid { grid-template-columns: 1fr; }
  .feature-card { min-height: 225px; }
  .district-map { height: 360px; }
  .map-district { min-width: 125px; padding: 10px; font-size: 11px; }
  .south-yard { left: 5%; }
  .mill-row { left: 6%; }
  .foundry { right: 4%; }
  .county { right: 4%; }

  .game-topbar { grid-template-columns: 142px 1fr; }
  .game-topbar .brand-logo { width: 32px; height: 32px; flex-basis: 32px; }
  .game-topbar .brand-copy strong { font-size: 12px; letter-spacing: .08em; }
  .mobile-menu-button { width: 36px; height: 36px; flex-basis: 36px; }
  .resource-strip { grid-template-columns: 92px 112px 112px; gap: 5px; }
  .resource { padding: 7px; }
  .cash-resource strong { font-size: 14px; }
  .page-head { align-items: flex-start; flex-direction: column; }
  .page-head h1 { font-size: 35px; }
  .city-hero { min-height: 280px; }
  .city-hero::before { bottom: 6px; right: 4px; writing-mode: vertical-rl; font-size: 60px; }
  .quick-grid { gap: 8px; }
  .quick-card { min-height: 115px; padding: 14px; }
  .content-card { padding: 16px; }
  .action-card { grid-template-columns: 43px minmax(0,1fr); align-items: start; padding: 14px; }
  .action-icon { width: 43px; height: 43px; }
  .action-controls { grid-column: 1/-1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
  .action-controls .locked-reason { margin: 0 auto 0 0; text-align: left; }
  .skill-grid { grid-template-columns: 1fr; }
  .section-banner { grid-template-columns: 1fr; }
  .active-shift-large header { flex-direction: column; }
  .inventory-grid { grid-template-columns: 1fr 1fr; }
  .market-table { display: block; overflow-x: auto; white-space: nowrap; }
  .milestone-grid { grid-template-columns: 1fr; }
  .profile-layout { grid-template-columns: 1fr; }
  .toast-region { right: 10px; bottom: calc(76px + var(--safe-bottom)); width: calc(100% - 20px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* v0.2 · Cars Have Histories */
.vin-text {
  margin: 3px 0 0;
  color: var(--faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9px;
  letter-spacing: .055em;
  overflow-wrap: anywhere;
}
.rail-note { margin: 8px 0 0; color: var(--amber); font-size: 9px; }
.repair-stage-pill,
.sheet-stamp,
.warning-label,
.recommendation-tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.repair-stage-pill { padding: 5px 8px; border: 1px solid rgba(107,159,194,.36); background: rgba(107,159,194,.10); color: #a8cce4; }
.sheet-stamp { padding: 7px 10px; border: 1px solid rgba(107,187,128,.38); color: #9ed7ad; transform: rotate(-2deg); }
.warning-label { padding: 5px 8px; border: 1px solid rgba(223,107,99,.45); background: rgba(223,107,99,.10); color: #efaaa5; }
.recommendation-tag { position: absolute; top: 0; right: 0; padding: 6px 9px; border-radius: 0 13px 0 10px; background: rgba(107,187,128,.16); color: #a8dfb6; }

.repair-stat-grid { margin-bottom: 14px; }
.repair-board,
.active-repair-order,
.repair-followups,
.comeback-queue,
.vehicle-history { margin-top: 14px; }
.repair-board-heading { align-items: center; }
.repair-board-heading > div { min-width: 0; }
.repair-offer-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.repair-offer-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(38,44,44,.93), rgba(20,24,25,.95));
}
.repair-offer-card blockquote,
.repair-complaint {
  margin: 15px 0;
  padding: 13px 14px;
  border-left: 3px solid var(--rust);
  border-radius: 0 10px 10px 0;
  background: rgba(9,11,12,.48);
  color: #d6dcda;
  font-size: 11px;
  font-style: italic;
}
.repair-offer-card > h3 { margin: 12px 0 5px; font-size: 13px; }
.repair-offer-card > p { color: var(--muted); font-size: 10px; }
.customer-note { min-height: 34px; }
.empty-repair-board { display: grid; place-items: center; min-height: 180px; padding: 24px; border: 1px dashed var(--line-light); border-radius: 13px; text-align: center; }
.empty-repair-board p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }

.vehicle-identity { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; gap: 14px; align-items: center; }
.vehicle-identity.compact { grid-template-columns: 42px minmax(0,1fr); gap: 10px; }
.vehicle-identity.compact .vehicle-condition-badge { grid-column: 1/-1; justify-self: start; display: flex; align-items: baseline; gap: 7px; padding: 5px 8px; }
.vehicle-identity.compact .vehicle-condition-badge strong { font-size: 13px; }
.vehicle-identity h2 { margin: 0; font-size: clamp(18px,2.2vw,27px); line-height: 1.08; }
.vehicle-identity.compact h2 { font-size: 14px; }
.vehicle-identity .eyebrow { margin-bottom: 4px; font-size: 8px; }
.vehicle-glyph { display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid var(--line-light); border-radius: 14px; background: #111516; color: var(--amber); font-size: 27px; }
.vehicle-identity.compact .vehicle-glyph { width: 42px; height: 42px; border-radius: 10px; font-size: 20px; }
.vehicle-condition-badge { display: grid; justify-items: center; min-width: 66px; padding: 8px 10px; border: 1px solid var(--line-light); border-radius: 11px; background: #111516; }
.vehicle-condition-badge span { color: var(--faint); font-size: 7px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.vehicle-condition-badge strong { font-size: 23px; line-height: 1; color: var(--steel-bright); }

.repair-terms { display: grid; gap: 7px; margin: 0; }
.repair-terms > div { display: grid; grid-template-columns: minmax(72px,.45fr) minmax(0,1fr); gap: 8px; padding-bottom: 6px; border-bottom: 1px solid #2d3332; }
.repair-terms dt { color: var(--faint); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.repair-terms dd { margin: 0; color: #e4e8e5; font-size: 9px; text-align: right; overflow-wrap: anywhere; }
.overdue { color: var(--red) !important; }
.repair-card-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }

.repair-order-topline { display: flex; justify-content: space-between; gap: 12px; align-items: center; margin-bottom: 18px; color: var(--faint); font-size: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.repair-customer-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; margin: 17px 0 0; }
.repair-customer-grid > div { min-height: 75px; padding: 11px; border: 1px solid var(--line); border-radius: 11px; background: rgba(9,11,12,.35); }
.repair-customer-grid span,
.repair-customer-grid small { display: block; color: var(--faint); font-size: 8px; }
.repair-customer-grid strong { display: block; margin-top: 4px; color: #f0f3f1; font-size: 12px; }

.vehicle-condition-panel,
.diagnostic-sheet,
.service-plan-section,
.repair-next-step,
.repair-task-panel,
.delivery-panel,
.comeback-panel { margin-top: 16px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(12,15,16,.53); }
.condition-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 16px; }
.condition-row > div:first-child { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.condition-row strong { color: #f0f2f0; }
.condition-track { overflow: hidden; height: 6px; border-radius: 999px; background: #090b0c; }
.condition-track span { display: block; height: 100%; border-radius: inherit; background: var(--red); }
.condition-track span.excellent { background: var(--green); }
.condition-track span.good { background: var(--blue); }
.condition-track span.worn { background: var(--amber); }
.condition-track span.critical { background: var(--red); }

.repair-next-step,
.delivery-panel { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-color: rgba(223,107,45,.34); background: linear-gradient(110deg, rgba(223,107,45,.09), rgba(12,15,16,.55)); }
.repair-next-step h3,
.delivery-panel h3,
.repair-task-panel h3,
.comeback-panel h3 { margin: 0 0 6px; font-size: 16px; }
.repair-next-step p:not(.eyebrow),
.delivery-panel p:not(.eyebrow),
.repair-task-panel p:not(.eyebrow),
.comeback-panel p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; }

.finding-list { display: grid; gap: 6px; margin: 13px 0 17px; }
.finding-list p { display: flex; gap: 8px; margin: 0; padding: 9px 10px; border-radius: 9px; background: rgba(107,187,128,.06); color: #ced5d1; font-size: 10px; }
.finding-list span { color: var(--green); font-weight: 950; }
.diagnostic-sheet h4 { margin: 0 0 9px; color: var(--steel); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.diagnosis-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.diagnosis-card { padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); }
.diagnosis-card > div { display: flex; justify-content: space-between; color: var(--faint); font-size: 8px; text-transform: uppercase; }
.diagnosis-card > div strong { color: var(--amber); font-size: 11px; }
.diagnosis-card h3 { min-height: 34px; margin: 9px 0 5px; font-size: 12px; }
.diagnosis-card p { min-height: 47px; margin: 0 0 10px; color: var(--muted); font-size: 9px; }

.service-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.service-plan-card { position: relative; overflow: hidden; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); }
.service-plan-card.recommended { border-color: rgba(107,187,128,.43); box-shadow: inset 0 2px 0 rgba(107,187,128,.36); }
.service-plan-card > h3 { margin: 0 0 6px; padding-right: 40px; font-size: 14px; }
.service-plan-card > p { min-height: 49px; margin: 0 0 12px; color: var(--muted); font-size: 9px; }
.plan-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 0 0 12px; }
.plan-numbers > div { padding: 8px; border-radius: 8px; background: #111516; }
.plan-numbers dt { color: var(--faint); font-size: 7px; text-transform: uppercase; }
.plan-numbers dd { margin: 3px 0 0; font-size: 10px; font-weight: 850; }
.part-fitment-line { padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.part-fitment-line span,
.part-fitment-line small { display: block; }
.part-fitment-line span { font-size: 10px; font-weight: 800; }
.part-fitment-line small { margin-top: 3px; color: var(--faint); font-size: 8px; }
.plan-flags { display: grid; gap: 4px; margin-top: 9px; color: var(--muted); font-size: 8px; }
.plan-flags .good { color: #9ed7ad; }
.plan-flags .warning { color: #efaaa5; }

.repair-task-panel { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 13px 20px; align-items: center; border-color: rgba(107,159,194,.38); }
.repair-task-panel .shift-progress { grid-column: 1/-1; }
.repair-task-panel > button { grid-column: 1/-1; justify-self: end; }
.repair-task-panel.comeback { border-color: rgba(223,107,99,.38); }
.comeback-panel { border-color: rgba(223,107,99,.42); background: linear-gradient(115deg, rgba(223,107,99,.10), rgba(12,15,16,.55)); }
.comeback-panel button { margin-top: 14px; }

.repair-history-details { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 13px; }
.repair-history-details summary { color: var(--steel); font-size: 9px; font-weight: 850; cursor: pointer; }
.repair-timeline { display: grid; gap: 0; margin-top: 12px; }
.repair-timeline > div { position: relative; display: grid; grid-template-columns: 10px minmax(0,1fr) auto; gap: 9px; padding: 0 0 12px; }
.repair-timeline > div > span { width: 8px; height: 8px; margin-top: 5px; border: 2px solid var(--rust); border-radius: 50%; background: var(--panel); }
.repair-timeline > div:not(:last-child)::before { content: ""; position: absolute; left: 3px; top: 12px; bottom: 0; width: 1px; background: var(--line-light); }
.repair-timeline p { margin: 0; color: #cbd1ce; font-size: 9px; }
.repair-timeline time { color: var(--faint); font-size: 8px; white-space: nowrap; }

.followup-list { display: grid; gap: 8px; }
.followup-list article { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(150px,.8fr) auto; gap: 15px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(9,11,12,.34); }
.followup-list strong,
.followup-list small,
.followup-list span { display: block; }
.followup-list strong { font-size: 10px; }
.followup-list small { margin-top: 3px; color: var(--faint); font-size: 8px; }
.followup-list span { color: var(--steel); font-size: 9px; }
.followup-list > article > div:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.comeback-card { border-color: rgba(223,107,99,.36); }
.comeback-card .warning-label { margin-top: 12px; }

.vehicle-history-list { display: grid; gap: 7px; }
.vehicle-history-list > details { border: 1px solid var(--line); border-radius: 11px; background: rgba(9,11,12,.32); }
.vehicle-history-list > details > summary { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 13px; cursor: pointer; list-style-position: inside; }
.vehicle-history-list summary span { display: inline-grid; }
.vehicle-history-list summary span:last-child { justify-items: end; }
.vehicle-history-list summary strong { font-size: 10px; }
.vehicle-history-list summary small { color: var(--faint); font-size: 8px; }
.history-dossier { padding: 0 14px 14px; }
.history-dossier > .repair-terms { grid-template-columns: 1fr 1fr; display: grid; gap: 8px 15px; margin-bottom: 15px; }
.history-dossier > .repair-terms > div { grid-template-columns: 86px minmax(0,1fr); }

@media (max-width: 1180px) {
  .repair-offer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .service-plan-grid { grid-template-columns: 1fr; }
  .service-plan-card > p { min-height: 0; }
}

@media (max-width: 850px) {
  .repair-customer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .diagnosis-grid { grid-template-columns: 1fr; }
  .diagnosis-card h3,
  .diagnosis-card p { min-height: 0; }
  .followup-list article { grid-template-columns: 1fr 1fr; }
  .followup-list > article > div:last-child { grid-column: 1/-1; justify-content: space-between; }
}

@media (max-width: 620px) {
  .repair-offer-grid { grid-template-columns: 1fr; }
  .vehicle-identity { grid-template-columns: 45px minmax(0,1fr); }
  .vehicle-identity .vehicle-condition-badge { grid-column: 1/-1; justify-self: start; display: flex; align-items: baseline; gap: 6px; min-width: 0; }
  .vehicle-glyph { width: 45px; height: 45px; border-radius: 10px; font-size: 21px; }
  .repair-customer-grid,
  .condition-grid { grid-template-columns: 1fr; }
  .repair-next-step,
  .delivery-panel { align-items: stretch; flex-direction: column; }
  .repair-task-panel { grid-template-columns: 1fr; }
  .repair-task-panel > button { justify-self: stretch; }
  .repair-timeline > div { grid-template-columns: 10px minmax(0,1fr); }
  .repair-timeline time { grid-column: 2; }
  .followup-list article { grid-template-columns: 1fr; }
  .followup-list > article > div:last-child { grid-column: auto; }
  .history-dossier > .repair-terms { grid-template-columns: 1fr; }
}

/* Rustshift 0.3 — Parts Network */
.market-network-banner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.market-network-banner > div {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(245, 173, 72, .08), rgba(255, 255, 255, .015));
}
.market-network-banner span,
.market-network-banner small {
  display: block;
  color: var(--faint);
  font-size: 8px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.market-network-banner strong {
  display: block;
  margin: 5px 0 2px;
  font-size: 22px;
  color: var(--text);
}
.market-compose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.market-compose-card label {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.market-compose-card select,
.market-compose-card input {
  width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #171b1a;
  color: var(--text);
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.market-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.market-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.market-table-scroll { max-width: 100%; overflow-x: auto; }
.market-table-scroll:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.market-own-orders { margin: 16px 0; }
.market-order-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.market-order-card > div { min-width: 0; }
.market-order-card p { color: var(--muted); font-size: 12px; }
.market-order-card small { display: block; color: var(--muted); overflow-wrap: anywhere; }
.market-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; margin-bottom: 20px; }
.market-filters select { max-width: 100%; }
@media (max-width: 700px) {
  .market-filters { grid-template-columns: minmax(0, 1fr); }
  .market-table { min-width: 560px; }
}
.market-history-grid article {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.market-history-grid span,
.market-history-grid small,
.market-history-grid strong { display: block; }
.market-history-grid span { color: var(--muted); font-size: 9px; }
.market-history-grid strong { margin: 5px 0; font-size: 17px; }
.market-history-grid small { color: var(--faint); font-size: 8px; line-height: 1.5; }

@media (max-width: 860px) {
  .market-network-banner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-compose-grid { grid-template-columns: 1fr; }
  .market-history-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .market-network-banner { grid-template-columns: 1fr 1fr; }
  .market-history-grid { grid-template-columns: 1fr; }
  .market-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .game-topbar { grid-template-columns: minmax(0, 1fr); gap: 7px; height: 128px; padding: 7px 10px; }
  .game-brand-wrap { height: 36px; }
  .game-topbar .brand-logo { width: 32px; height: 32px; flex-basis: 32px; }
  .resource-strip { grid-template-columns: minmax(65px, 1.2fr) repeat(4, minmax(0, 1fr)); gap: 5px; overflow: visible; }
  .resource, .compact-resource { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; gap: 4px; padding: 6px; }
  .resource > span { font-size: 8px; }
  .resource > span small { display: none; }
  .resource strong, .cash-resource strong { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
  .game-layout { padding-top: 128px; }
  .game-sidebar { top: 128px; bottom: calc(61px + var(--safe-bottom)); }
  .game-sidebar:not(.open) { visibility: hidden; }
  .game-content { min-height: calc(100vh - 128px); }
  .desk-task { align-items: flex-start; flex-direction: column; }
  .desk-task button { min-height: 42px; }
  .desk-identity { grid-template-columns: minmax(0,1fr); gap: 14px; padding: 18px; }
  .desk-level { max-width: 320px; }
}

@media (max-width: 520px) {
  .desk-journey, .desk-destinations { grid-template-columns: minmax(0,1fr); }
  .desk-section { margin-top: 20px; }
  .desk-destinations button { min-height: 78px; padding: 14px; }
  .first-repair { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .game-sidebar, .resource-bar span, .level-progress span { transition: none; }
}
/* Shared garages */
.crew-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0; }
.crew-layout > *, .crew-row > * { min-width:0; }
.crew-form { display:grid; gap:12px; margin:16px 0; }
.crew-form label { display:grid; gap:6px; color:var(--muted,#a7afaa); font-weight:600; }
.crew-form input,.crew-form select,.crew-form textarea { width:100%; min-width:0; padding:11px; border:1px solid #3b4540; border-radius:8px; background:#101714; color:#eef2ef; font:inherit; }
.crew-form .button { justify-self:start; }
.crew-search { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.crew-row { display:flex; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid #303a34; overflow-wrap:anywhere; }
.crew-row small { display:block; margin-top:5px; color:#a7afaa; }
.crew-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.crew-actions .button { padding:8px 11px; font-size:.8rem; }
.crew-treasury { font-size:2rem; font-weight:800; margin:15px 0; }
.crew-treasury small { display:block; font-size:.8rem; color:#a7afaa; font-weight:500; }
.crew-stock { display:grid; gap:8px; margin-bottom:20px; }
.crew-stock span { display:flex; justify-content:space-between; gap:8px; }
.crew-layout details { margin-top:16px; border-top:1px solid #303a34; padding-top:12px; }
.crew-layout summary { cursor:pointer; font-weight:700; }
.crew-contract,.crew-log { padding:12px 0; border-bottom:1px solid #303a34; }
.crew-log p { margin:0 0 5px; }
.crew-log small { color:#a7afaa; }
.crew-public-page { max-width:1000px; margin:60px auto; padding:20px; }
@media(max-width:850px) { .crew-layout { grid-template-columns:1fr; } .crew-row { flex-direction:column; } }
@media(max-width:450px) { .crew-search { grid-template-columns:1fr; } }
/* Greybridge communication */
.social-layout { display:grid; grid-template-columns:minmax(0,2fr) minmax(230px,1fr); gap:18px; margin:20px 0; }
.social-layout > *, .social-layout aside { min-width:0; }
.social-layout aside .content-card { margin-bottom:18px; }
.social-messages { max-height:560px; overflow:auto; }
.social-message { padding:16px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.social-message header { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.social-message p { white-space:pre-wrap; }
.social-message small,.social-notifications small { display:block; color:var(--muted); font-size:.75rem; }
.social-message-actions { display:flex; flex-wrap:wrap; gap:7px; }
.social-message-actions button { font-size:.75rem; padding:7px 10px; }
.social-notifications { max-height:400px; overflow:auto; }
@media(max-width:1000px) { .social-layout { grid-template-columns:1fr; } }

/* Personal collections and original Motor Club race replay. */
.personal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:16px;margin:18px 0}.personal-summary{display:flex;flex-wrap:wrap;gap:24px;align-items:center}.personal-summary>div{display:grid;gap:3px}.personal-summary strong{font-size:1.6rem;color:var(--accent,#ff9450)}.personal-summary span{font-size:.8rem;color:#aeb8b6}.personal-car-art{display:block;width:100%;max-height:135px}.personal-car-card,.personal-course,.personal-listing{border:1px solid #394642;border-radius:12px;background:#17201e;padding:18px;text-align:left;color:#edf2ef;min-width:0}.personal-car-card,.personal-course{cursor:pointer;display:grid;gap:8px}.personal-car-card.selected,.personal-course.selected{border-color:#ff9450;box-shadow:inset 0 0 0 1px #ff9450}.personal-car-card:focus-visible,.personal-course:focus-visible{outline:3px solid #fff;outline-offset:3px}.personal-course span,.personal-car-card small{color:#bdc7c4;font-size:.85rem}.personal-vin{overflow-wrap:anywhere;font-family:monospace;font-size:.8rem}.personal-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:12px;margin:20px 0}.personal-specs>div{display:grid;gap:6px;background:#111a18;padding:12px;border-radius:8px}.personal-specs small{font-size:.65rem;letter-spacing:.08em;color:#b3c1bb}.personal-specs strong{font-size:1.15rem}.personal-workshop .personal-grid article{background:#17201e;padding:16px;border-radius:10px}.personal-result{display:grid;gap:5px;padding:16px 0;border-bottom:1px solid #34413b}.personal-result small{color:#b3c1bb;overflow-wrap:anywhere}.personal-race{padding:20px;background:#101917;border:1px solid #405347;border-radius:12px;margin:20px 0}.race-lights{display:flex;gap:10px;margin:16px 0}.race-lights i{width:26px;height:26px;border-radius:50%;background:#34443b;border:2px solid #54635c}.personal-race[data-phase=staging] .race-lights i{background:#e8af39;box-shadow:0 0 10px #e8af3950}.personal-race[data-phase=green] .race-lights i{background:#72ed91;box-shadow:0 0 18px #72ed9180}.personal-race[data-phase=green] #personal-race-status{color:#72ed91;font-weight:800}.race-lane{position:relative;height:65px;border-bottom:2px dashed #56605b;background:#202923;margin:8px 0;overflow:hidden}.race-lane:after{content:"";position:absolute;right:4%;height:100%;width:5px;background:repeating-linear-gradient(#fff 0 5px,#202923 5px 10px)}.race-lane>span{font-size:.7rem;color:#b7c8bd;padding:6px}.race-runner{position:absolute;top:25px;left:4%;font-size:26px;color:#ff9450;transition:left .48s linear}.race-runner.opponent{color:#97c4cf}.personal-race[data-kind=track] .race-lane{border-radius:40px;border:2px solid #6c796e;background:#263b2c}.personal-race .page-head-actions{margin-top:20px}.race-launch{min-height:58px;min-width:150px;font-size:1.2rem}.personal-race [hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.race-runner{transition:none}}

.race-circuit{display:block;width:100%;margin:14px 0}.personal-race[data-kind=track] .race-lane{height:42px}.personal-race[data-kind=track] .race-runner{top:13px;font-size:20px}

.city-district-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}.city-district{min-width:0}.city-current{border-color:#ee8846}.city-district hr{border:0;border-top:1px solid #343b3b;margin:22px 0}@media(max-width:650px){.city-district-grid{grid-template-columns:1fr}}
.vehicle-history>summary{font-size:20px;font-weight:800;cursor:pointer;padding:8px 0}.vehicle-history-date{margin:12px 0;border:1px solid #415049;border-radius:10px;padding:12px}.vehicle-history-date>summary{font-weight:700;cursor:pointer;color:#ffb17c}.vehicle-history summary:focus-visible{outline:2px solid #ffb17c;outline-offset:4px}.exhibition-signal{padding:28px;text-align:center;font-size:clamp(28px,5vw,48px);font-weight:900;color:#ffaf70;background:#17231f;border:2px solid #5d766a;border-radius:12px;margin:20px 0}.exhibition-race [data-exhibition-control]{text-transform:capitalize;min-width:85px}
.forum-thread,.forum-post{border-bottom:1px solid #3b4943;padding:18px 0}.forum-post header{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.forum-post small{color:#bdc8c2}.forum-text{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}.forum-thread button{white-space:normal;text-align:left;overflow-wrap:anywhere;font-size:17px}[data-forum-root] input,[data-forum-root] textarea{max-width:100%;box-sizing:border-box}[data-forum-root] button[aria-pressed=true]{outline:2px solid #ffac72;outline-offset:2px}
.city-explorer{scroll-margin-top:100px}.city-map-layout{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:22px}
.city-map{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 36px;padding:28px 18px;background:repeating-linear-gradient(0deg,transparent 0 47px,#ffffff06 48px 49px),repeating-linear-gradient(90deg,#111919 0 47px,#ffffff06 48px 49px);border:1px solid #3b4a47;border-radius:14px;overflow:hidden}
.city-river{position:absolute;inset:0 42%;background:#28484a;color:#b7d5d0;writing-mode:vertical-rl;text-align:center;letter-spacing:4px;font-size:10px;z-index:-1;transform:rotate(12deg)}
.city-map-node{min-width:0;border:1px solid #6d817a;border-radius:10px;background:#202b28;color:#edf1ed;padding:18px 8px;cursor:pointer;box-shadow:0 4px 14px #0005}
.city-map-node strong,.city-map-node span{display:block;overflow-wrap:anywhere}.city-map-node span{font-size:12px;margin-top:6px;color:#bbc8c1}
.city-map-node.is-current{border-color:#ff9857;background:#463023}.city-map-node.is-locked{border-style:dashed;background:#242729;color:#abb5b3}
.city-map-node[aria-pressed=true],.city-calendar-days button[aria-pressed=true]{outline:2px solid #ffac72;outline-offset:3px}
.city-map-node:focus-visible,.city-calendar button:focus-visible{outline:3px solid #d3f7e9;outline-offset:4px}
.city-map-detail{min-width:0}.city-map-detail h3{font-size:24px;margin-top:8px}
.city-calendar-controls{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}
.city-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin:20px 0}
.city-calendar-days button{min-width:0;min-height:130px;padding:12px 8px;border:1px solid #52635d;border-radius:8px;background:#192320;color:#edf1ed;text-align:left;cursor:pointer}
.city-calendar-days small,.city-calendar-days strong,.city-calendar-days span{display:block;overflow-wrap:anywhere}.city-calendar-days small{color:#ffb47f}.city-calendar-days strong{margin:9px 0}.city-calendar-days span{font-size:12px;color:#c6d0ca;line-height:1.5}
.city-calendar-detail{border-left:3px solid #f49354;padding:10px 18px;background:#ffffff04}
@media(max-width:1000px){.city-calendar-days{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:650px){.city-map-layout{grid-template-columns:1fr}.city-calendar-days{grid-template-columns:repeat(2,minmax(0,1fr))}.city-map{gap:24px 28px;padding:22px 12px}.city-map-node{padding:16px 6px}}

/* Recurring customer desk */
.customer-grid { display:grid; align-items:start; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:18px; margin:20px 0; }
.customer-card { min-width:0; overflow-wrap:anywhere; }
.customer-progress { color:var(--amber); font-weight:700; }
.customer-stats { display:flex; flex-wrap:wrap; gap:24px; margin:20px 0; }
.customer-stats div { display:grid; gap:4px; }
.customer-stats strong { color:var(--rust-bright); font-size:26px; }
.customer-stats span,.customer-choices small { color:var(--muted); font-size:12px; }
.customer-choices { display:grid; gap:18px; }.customer-choices small { display:block; margin-top:8px; }
.customer-side,.customer-active { padding:18px; border:1px solid var(--line); border-radius:12px; }

/* Shared interior presentation: the landing page's steel outlines and warm panels. */
.game-content { --section-edge:#48514c; }
.game-content :is(.page-head,.page-header) { padding:24px; margin:0 0 22px; border:1px solid #705039; border-radius:18px; background:radial-gradient(ellipse at top right,rgba(223,107,45,.15),transparent 70%),linear-gradient(130deg,#1d2220,#111515); }
.game-content .page-header h1 { margin:8px 0; font-size:clamp(28px,4vw,44px); line-height:1.08; letter-spacing:-.035em; text-transform:uppercase; }
.game-content .page-header > button { float:right; margin:0 0 12px 14px; }
.game-content :is(.page-header,.page-head) p:not(.eyebrow) { color:var(--steel); max-width:70ch; }
.game-content :is(.content-card,.stat-card,.skill-card,.news-card) { border-color:var(--section-edge); background:linear-gradient(145deg,#1d2321,#151a19); box-shadow:inset 0 1px 0 #ffffff05,0 9px 24px #0002; }
.game-content > .content-card + .content-card { margin-top:20px; }
.game-content .content-card > h2 { margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid #475047; font-size:19px; letter-spacing:-.02em; }
.game-content .card-heading { border-bottom:1px solid #475047; padding-bottom:12px; flex-wrap:wrap; }
.game-content :is(.customer-side,.crew-contract) { background:#101615; border:1px solid #3e4841; border-radius:12px; padding:18px; }
.game-content :is(.customer-side,.crew-contract) h3 { margin-top:0; color:var(--steel-bright); }
.game-content :is(.content-card,.customer-side) > p { overflow-wrap:anywhere; }
.game-content .customer-stats { padding:18px; border:1px solid var(--section-edge); border-radius:14px; background:#151b18; }
.game-content .customer-card > summary { padding:4px 0; color:var(--steel); cursor:pointer; }
.game-content .customer-card > summary strong { color:var(--steel-bright); }
.game-content .customer-card[open] > summary { border-bottom:1px solid var(--section-edge); padding-bottom:14px; margin-bottom:16px; }
.game-content details > summary:focus-visible { outline:2px solid var(--rust-bright); outline-offset:5px; border-radius:4px; }
.career-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:20px 0; align-items:start; }
.career-grid > article { min-width:0; }
.career-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:18px 0; }
.career-stats > div { border:1px solid #3e4841; border-radius:10px; padding:12px; background:#101615; min-width:0; }
.career-stats dt { color:var(--steel); font-size:11px; }
.career-stats dd { margin:4px 0 0; font-size:21px; font-weight:800; color:var(--rust-bright); overflow-wrap:anywhere; }
.career-honors { list-style:none; padding:0; display:grid; gap:8px; }
.career-honors li { border:1px solid #5f4933; border-radius:9px; background:#282119; padding:10px 12px; overflow-wrap:anywhere; }
.game-content .career-identity { border-color:#705039; background:linear-gradient(115deg,#30231c,#151b19); }
@media(max-width:700px){.career-grid{grid-template-columns:1fr}.game-content :is(.page-head,.page-header){padding:18px}.game-content .page-header > button{float:none;margin:0 0 16px}.game-content .content-card{padding:18px}}

.connections-panel { margin-top:22px; }

.business-layout { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); align-items:start; }
.fleet-relationships { margin-top:22px; }
.city-agenda, .city-agenda-cup { margin-top: 22px; padding: 18px; border: 1px solid var(--border, #45423a); border-radius: 12px; background: rgba(255, 151, 74, .035); }
.city-agenda-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border, #45423a); }
.city-agenda-item p { margin: 5px 0; }
.city-agenda summary { cursor: pointer; font-weight: 700; }
@media (max-width: 600px) { .city-agenda-item { align-items: stretch; flex-direction: column; } }
/* Street atlas and month calendar — keep native scrolling, including touchpads. */
.city-map-layout { grid-template-columns: 1fr; gap: 18px; }
.city-atlas-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.city-atlas-toolbar > div { display: flex; gap: 8px; }
.city-atlas-viewport { overflow: auto; max-height: 560px; border: 1px solid #657565; border-radius: 12px; background: #202b28; scrollbar-color: #b8764b #202b28; }
.city-atlas-viewport:focus-visible { outline: 3px solid #ffac72; outline-offset: 3px; }
.city-atlas-scene { position: relative; width: 100%; min-width: 620px; aspect-ratio: 10 / 7; }
.city-atlas-scene.atlas-zoom-2 { width: 150%; min-width: 930px; }
.city-atlas-scene.atlas-zoom-3 { width: 200%; min-width: 1240px; }
.city-atlas-art { display: block; width: 100%; height: 100%; }
.city-map-node.atlas-pin { position: absolute; transform: translate(-50%,-50%); width: 128px; padding: 9px 7px; border-radius: 5px; background: #14201eea; box-shadow: 0 4px 16px #0008; }
.atlas-pin::before { content: ''; position: absolute; bottom: -7px; left: calc(50% - 6px); width: 10px; height: 10px; background: #ddb381; border: 2px solid #283b31; border-radius: 50%; }
.city-map-node.atlas-pin strong { font-size: 13px; }
.city-map-node.atlas-pin span { font-size: 10px; margin-top: 3px; }
.city-map-node.atlas-pin.is-current { background: #553821ed; border-color: #ff9857; }
.city-map-node.atlas-pin.is-locked { background: #242729db; }
.pin-south_yard { left: 28%; top: 75%; }.pin-mill_row { left: 27%; top: 40%; }.pin-foundry_ward { left: 74%; top: 42%; }.pin-county_line { left: 78%; top: 80%; }.pin-canal_basin { left: 68%; top: 10%; }.pin-north_works { left: 26%; top: 10%; }
.city-map-detail { padding: 18px; border: 1px solid #514b40; border-radius: 10px; background: #ffffff03; }
.city-calendar-controls h3 { margin: 0 auto 0 0; align-self: center; }
.city-month-weekdays { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); text-align: center; font-size: 12px; color: #cdbb9e; }
.city-calendar-days.city-month-grid { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; margin: 8px 0 22px; }
.city-month-grid button { min-height: 108px; padding: 7px; border-radius: 5px; }
.city-month-grid button strong { margin: 0 0 5px; font-size: 19px; }
.city-month-grid button span { font-size: 10px; line-height: 1.25; }
.city-month-grid button small .calendar-count-label { display: inline; }
.city-month-grid button[aria-current=date] { border-color: #ff9857; background: #493525; }
.city-month-grid button[aria-pressed=true] { outline-offset: -3px; }
@media(max-width:650px) {
 .city-atlas-viewport { max-height: 440px; }
 .city-calendar-controls { gap: 6px; }.city-calendar-controls h3 { width: 100%; }
 .city-calendar-controls button { padding: 9px 10px; font-size: 12px; }
 .city-calendar-days.city-month-grid { gap: 2px; }.city-month-grid button { min-height: 72px; padding: 6px 2px; text-align: center; }
 .city-month-grid button > span,.city-month-grid button small .calendar-count-label { display: none; }
 .city-month-grid button small { font-size: 10px; }.city-month-grid button strong { font-size: 17px; }
}
.resource[role=button] { cursor: pointer; border-radius: 5px; }
.resource[role=button]:hover { background: #ffffff08; }
.resource[role=button]:focus-visible { outline: 2px solid #ffac72; outline-offset: 4px; }
.resource-help-dialog { width: min(520px,calc(100vw - 32px)); padding: 26px; border: 1px solid #b47549; border-radius: 14px; background: #19211f; color: #edf1ed; box-shadow: 0 20px 80px #0009; }
.resource-help-dialog::backdrop { background: #000a; }
.resource-help-dialog p { line-height: 1.65; }
.resource-help-current { color: #ffc18e; }
.page-section-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 12px; border: 1px solid #68513e; border-radius: 10px; background: #171e1c; }
.page-section-nav button[aria-pressed=true] { color: #181d19; background: #ffa361; border-color: #ffa361; }
[data-page-panel][hidden] { display: none !important; }
.civic-banner { border-color: #bb7846; background: #32261d; }
.civic-residents { list-style: none; padding: 0; max-height: 24rem; overflow-y: auto; }
.civic-residents li { padding: 12px; margin: 8px 0; border: 1px solid #68513e; border-radius: 8px; overflow-wrap: anywhere; }
.civic-residents li p { margin: 6px 0; }
@media(max-width:650px) { .page-section-nav { gap: 6px; padding: 8px; }.page-section-nav button { flex: 1 1 40%; font-size: 12px; padding: 10px 8px; } }
.mechanic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.gear-card { border:1px solid #68513e; background:#171e1c; border-radius:10px; padding:16px; overflow-wrap:anywhere; }
.gear-card .secondary-button { margin:5px 5px 0 0; }
.gear-icon { display:block; font-size:32px; color:#ffa361; margin:10px 0; }
.mechanic-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:8px 24px; }
.mechanic-stats>div { display:flex; justify-content:space-between; border-bottom:1px solid #37433e; padding:8px 0; gap:12px; text-transform:capitalize; }
.garage-floor { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; padding:20px; border:2px solid #68513e; background:repeating-linear-gradient(0deg,#202824,#202824 39px,#303a34 40px); }
.garage-floor-bay { padding:18px; border:2px dashed #a27a4a; text-align:center; background:#131b18dd; border-radius:6px; }
.garage-floor-bay-action { width:100%; color:inherit; font:inherit; cursor:pointer; }
.garage-floor-bay-action:hover, .garage-floor-bay-action:focus-visible { border-style:solid; border-color:#ffa361; box-shadow:0 0 0 3px #ffa36133; }
.garage-lift { margin:12px auto; max-width:115px; border-left:10px solid #c47a45; border-right:10px solid #c47a45; padding:24px 8px; color:#b7c2b8; font-size:45px; }
.garage-planned { border-color:#566b5d; }
@media(max-width:600px){.mechanic-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.gear-card{padding:10px;}.gear-card h3{font-size:15px;}.gear-card button{width:100%;font-size:12px;}.garage-floor{padding:10px;grid-template-columns:1fr;}}
[data-contact-form] { display:grid;gap:12px;max-width:480px; }
[data-contact-form] label { display:grid;gap:8px; }
[data-goal-form] { display:grid;gap:10px;max-width:100%;margin:16px 0; }
[data-goal-form] select { width:100%;min-width:0;max-width:100%; }
.connections-panel li { overflow-wrap:anywhere; }
[data-build-plan] { display:grid;gap:12px;margin:18px 0; }
[data-build-plan] label { display:grid;gap:6px;min-width:0; }
[data-build-plan] select,[data-build-plan] input { width:100%;max-width:100%;min-width:0; }

/* Quick tools, server clock and flipboard news strip. */
.game-topbar {grid-template-columns:minmax(150px,.6fr) minmax(300px,1.4fr) auto}
.quick-toolbar {display:flex;gap:6px;justify-content:flex-end}
.quick-toolbar button,.mobile-menu-button,.nav-item,.mobile-bottom-nav button {position:relative}
.quick-badge {display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:12px;background:#ffb05a;color:#181c1b;font-size:11px;font-weight:800;padding:0 4px;margin-left:6px}
.quick-toolbar .quick-badge,.mobile-menu-button .quick-badge,.mobile-bottom-nav .quick-badge {position:absolute;top:-4px;right:-3px;margin:0}
.city-ticker {position:fixed;top:var(--quick-top,76px);left:0;right:0;height:36px;z-index:49;background:#242b26;border-bottom:1px solid #4a5147;display:flex;gap:10px;align-items:center;padding:0 12px}
.ticker-window {overflow:hidden;min-width:0;flex:1}.city-ticker button {border:0;background:transparent;color:#efcca3;font-size:12px;cursor:pointer}
#ticker-link {white-space:normal;display:block;min-height:32px;line-height:1.3;text-align:left;transform-origin:center top;width:100%}
.game-layout {padding-top:calc(var(--quick-top,76px) + 36px)}.game-sidebar,.game-rail {top:calc(var(--quick-top,76px) + 36px)}
.quick-panel {position:fixed;z-index:70;right:12px;top:calc(var(--quick-top,76px) + 42px);width:min(480px,calc(100vw - 24px));max-height:calc(100dvh - var(--quick-top,76px) - 118px);overflow:auto;border:1px solid #74614a;border-radius:14px;background:#1b211f;padding:18px;box-shadow:0 16px 40px #0009;overflow-wrap:anywhere}
.quick-panel[hidden]{display:none}.quick-panel h2{padding-right:25px}.quick-close{float:right;background:transparent;color:inherit;border:1px solid #707a71;border-radius:6px;min-width:32px;min-height:32px}.quick-panel form{display:grid;gap:12px}.quick-panel label{display:grid;gap:5px}.quick-panel [data-quick-results]{display:grid;gap:8px;margin-top:12px}.quick-activity{padding-left:20px}.quick-activity li{border-bottom:1px solid #3b443f;padding:10px 0}.quick-activity time{font-size:12px;color:#afbaae}.quick-activity p{margin:4px 0}
@media(max-width:1000px){.game-topbar{grid-template-columns:minmax(0,1fr) auto;height:auto;min-height:128px;gap:6px;padding:7px 10px}.game-brand-wrap{grid-row:1;grid-column:1}.quick-toolbar{grid-row:1;grid-column:2}.quick-toolbar .icon-button{width:32px;height:32px;min-width:32px;font-size:20px}.resource-strip{grid-row:2;grid-column:1 / -1}}
@media(prefers-reduced-motion:reduce){#ticker-link{animation:none;white-space:normal;line-height:1.2}}

.sidebar-shortcuts{display:flex;justify-content:space-around;padding:10px;border-bottom:1px solid var(--line)}.sidebar-shortcuts button{position:relative;min-height:36px;min-width:48px;background:#252d28;color:#f4d0a4;border:1px solid #586454;border-radius:8px}.sidebar-shortcuts .quick-badge{position:absolute;top:-5px;right:-2px}

/* 0.0.44: unread notifications belong to the top bar; destination cards get markers. */
.notice-menu{position:relative;flex-shrink:0}.notice-menu .quick-badge{position:absolute;top:-4px;right:-3px;margin:0}.game-nav .notice-destination{border-left:3px solid #ffb05a;background:#493b2b}.notice-highlight{outline:2px solid #ffb05a;outline-offset:-2px;background-color:#302c23!important;scroll-margin-top:calc(var(--quick-top,76px) + 70px)}.notice-row{border:1px solid #596049;border-radius:8px;margin:10px 0;padding:12px}.quick-panel.notifications-panel{left:12px;right:auto}.game-brand-wrap{min-width:0}.notice-menu{width:30px;min-width:30px;height:32px}.city-ticker{height:48px;perspective:500px}.ticker-window{max-height:44px}.game-layout{padding-top:calc(var(--quick-top,76px) + 48px)}.game-sidebar,.game-rail{top:calc(var(--quick-top,76px) + 48px)}.quick-panel{top:calc(var(--quick-top,76px) + 54px)}
@media(max-width:480px){.game-brand-wrap{gap:4px}.quick-toolbar{gap:3px}.game-topbar .brand-copy strong{font-size:11px}.game-topbar .brand-compact{gap:6px}.game-topbar .brand-logo{display:block;width:24px;height:24px;flex-basis:24px}.city-ticker button{font-size:11px}}

/* Compact slide-out menu; retain comfortable touch targets. */
@media(max-width:850px){.game-sidebar .game-nav{padding:8px;gap:2px}.game-sidebar .nav-item{min-height:44px;padding:5px 7px;grid-template-columns:28px 1fr;column-gap:6px}.game-sidebar .nav-item>span{width:26px;height:26px}.sidebar-shortcuts{padding:7px}}

/* Specialist case records and decision explanations. */
.case-evidence{padding:12px 14px;margin:14px 0;border-left:3px solid #d79253;background:#17221f}.case-evidence h4{margin:0 0 8px}.case-feedback{padding:10px 12px;margin:10px 0;border:1px solid #586352;border-radius:8px}.case-feedback summary{cursor:pointer;font-weight:700}.case-incorrect{border-color:#bf8749}.case-correct{border-color:#648c74}.specialist-case>button{display:block;width:100%;text-align:left;margin:9px 0;white-space:normal;min-height:44px}

.forum-linked-post{outline:2px solid #ffb05a;outline-offset:-2px;scroll-margin-top:calc(var(--quick-top,76px) + 70px)}

/* Keep long career choices inside the card and avoid input zoom on phones. */
main select{min-width:0;max-width:100%;width:100%;box-sizing:border-box}
.job-controls{display:grid;gap:10px;min-width:0;max-width:280px;text-align:left}
.job-controls label{display:grid;gap:6px}
.job-controls select{padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--text)}
.job-controls .locked-reason{max-width:100%;font-size:12px;text-align:left}
@media(max-width:600px){
 main button,main input:not([type=checkbox]):not([type=radio]),main select,.quick-panel button,.quick-panel input,.quick-panel select{min-height:44px}
 main input,main select,main textarea,.quick-panel input,.quick-panel select{font-size:16px;min-width:0;max-width:100%;box-sizing:border-box}
 .quick-toolbar .icon-button,#mobile-menu-button{height:44px;min-height:44px}
 .quick-close{min-width:44px}
 .city-ticker button{font-size:12px}
 .market-table-scroll::before{content:'Swipe across the table to reach prices and actions.';display:block;white-space:normal;color:var(--muted);font-size:12px;padding:8px 0}
 .crew-log summary{overflow-wrap:anywhere;min-height:44px;padding:8px 0}
 .forum-post a{display:inline-flex;align-items:center;min-height:44px}
 .job-controls{display:grid;justify-content:stretch;max-width:none;width:100%}
}
@media(max-width:360px){
 .quick-toolbar .icon-button{flex-basis:32px;width:32px;min-width:32px}
 .resource strong{font-size:10px}
}
.desk-workshop{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}.desk-workshop span{border:1px solid var(--line);border-radius:9px;padding:12px;font-size:12px}.desk-workshop strong{display:block;font-size:18px;color:var(--rust-bright)}.desk-bays{margin-bottom:18px}.desk-bays summary{min-height:44px;cursor:pointer}
.gear-comparison{margin:10px 0;font-size:12px;max-width:360px;white-space:normal}.gear-comparison summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--rust-bright)}.gear-comparison p{overflow-wrap:anywhere}
/* Focused workspaces and compact mobile navigation. */
.workspace-switch{display:flex;align-items:center;gap:12px;padding:12px 0;color:var(--muted);font-weight:700}
.workspace-switch select{flex:1;min-width:0;min-height:44px;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text)}
.workspace-panels{min-width:0}.workspace-panels>[hidden],[data-workspace-panel][hidden]{display:none!important}
.nav-group>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;justify-content:space-between;padding:4px 8px}.nav-group>summary::after{content:'+'}.nav-group[open]>summary::after{content:'−'}.nav-group>summary h2{margin:0}.nav-group>summary:focus-visible{outline:2px solid #ff9450}
.mobile-dock{display:none}
@media(max-width:760px){.mobile-dock{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;bottom:0;left:0;right:0;z-index:65;background:#111a1b;border-top:1px solid #75503b;padding:4px 8px max(4px,env(safe-area-inset-bottom))}.mobile-dock button{display:grid;place-items:center;min-height:48px;background:transparent;color:#ffb07b;border:0}.mobile-dock span{font-size:11px;color:#e4eae7}body{padding-bottom:72px}.game-sidebar{padding-bottom:0!important}.workspace-switch{position:relative;flex-wrap:wrap}.workspace-switch select{max-width:100%}.personal-car-card .personal-car-art{max-height:85px}.workspace-panels .content-card{padding:14px}}
.list-pager{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}.list-pager input{flex:1 1 180px;min-width:0;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:8px;color:var(--text)}.list-pager button{min-height:44px;padding:8px 12px}.list-pager span{font-size:12px}.customer-grid>[hidden],.mechanic-grid>[hidden]{display:none!important}
.chat-launcher{position:fixed;right:20px;bottom:20px;z-index:68;border:1px solid #a96235;background:#1a2323;color:#ffb27c;padding:12px 18px;border-radius:22px;min-height:44px}
.chat-overlay{position:fixed;inset:auto 16px 16px auto;margin:0;width:min(420px,calc(100vw - 32px));height:min(650px,calc(100dvh - 32px));max-height:none;max-width:none;padding:0;border:1px solid #93613f;border-radius:16px;background:#101a1b;color:#e6efea;box-shadow:0 16px 70px #000a;z-index:100;overflow:hidden}
.chat-overlay[open]{display:flex;flex-direction:column}.chat-heading{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #3a4842}.chat-heading h2{font-size:18px;margin:0}.chat-overlay button{min-height:40px;border:1px solid #41514b;background:#1c2928;color:#e7eee9;border-radius:8px;padding:6px 10px;cursor:pointer}.chat-overlay button:disabled{opacity:.5;cursor:default}.chat-heading button{font-size:22px}.chat-channels{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:4px;padding:8px}.chat-channels [aria-pressed=true]{border-color:#ff9450;color:#ffb17b;background:#382b21}.chat-context,.chat-status{margin:2px 12px;font-size:12px;color:#a9bbb1}.chat-status{min-height:18px}.chat-stream{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px;scrollbar-gutter:stable}.chat-bubble{max-width:94%;padding:9px 12px;margin:0 0 10px;border:1px solid #344b43;background:#192824;border-radius:12px;overflow-wrap:anywhere}.chat-bubble.is-own{margin-left:auto;background:#34271e;border-color:#69462f}.chat-bubble header{display:flex;justify-content:space-between;gap:8px;font-size:12px}.chat-bubble time{font-size:10px;color:#b2beb5}.chat-bubble p{white-space:pre-wrap;font-size:14px;margin:6px 0}.chat-bubble summary{font-size:10px;color:#aebcaf;cursor:pointer}.chat-bubble details button{font-size:12px;margin:4px}.chat-compose{display:flex;gap:8px;padding:10px;border-top:1px solid #3a4842}.chat-overlay textarea,.chat-overlay input{box-sizing:border-box;width:100%;min-width:0;padding:10px;color:#eef4ef;background:#0d1516;border:1px solid #52655a;border-radius:8px;font-size:16px}.chat-compose textarea{resize:none;flex:1}.chat-person{display:block;width:100%;text-align:left;margin:4px 0}.chat-report{padding:10px}.chat-stream form{display:grid;gap:8px}.chat-overlay [hidden]{display:none!important}.chat-overlay :focus-visible{outline:2px solid #ff9450;outline-offset:2px}
@media(max-width:760px){.chat-launcher{display:none}.chat-overlay{inset:8px 8px auto;width:calc(100vw - 16px);height:calc(100dvh - 80px);border-radius:12px}.chat-channels button{font-size:12px;min-height:44px;padding:5px}.chat-overlay .chat-heading{padding:8px 12px}.chat-compose{padding-bottom:max(10px,env(safe-area-inset-bottom))}}

.referral-copy{display:flex;align-items:end;gap:12px}.referral-copy label{flex:1;min-width:0}.referral-copy input{width:100%;min-width:0}.referral-copy button{min-height:44px;flex-shrink:0}
.bench-rigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}.bench-rig{display:flex;flex-direction:column;gap:12px;padding:20px;border:1px solid #536255;border-top:3px solid #dd8648;border-radius:14px;background:linear-gradient(145deg,#202a25,#141c1b)}.bench-rig h3,.bench-rig p{margin:0}.bench-rig h3{color:#ffb27b}.bench-rig>button{margin-top:auto;min-height:44px}.bench-costs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0}.bench-costs div{background:#101a17;border-radius:8px;padding:8px 4px;text-align:center}.bench-costs dt{font-size:10px;color:#abb9b0}.bench-costs dd{margin:4px 0 0;font-weight:800}.bench-reading{margin:20px 0;padding:20px;border:1px solid #71825c;background:#0e1815;border-radius:12px}.bench-reading h3{font-family:monospace;font-size:20px;line-height:1.6;margin:8px 0;white-space:normal}.bench-answers{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}.bench-answers button{min-height:52px;text-align:left;padding:14px}.sidebar-foot{flex-shrink:0}
@media(max-width:760px){.sidebar-foot{padding:8px 10px;min-height:30px;align-items:center}.referral-copy{flex-wrap:wrap}.referral-copy label{flex-basis:100%}.bench-rigs{grid-template-columns:1fr;gap:16px}.bench-rig{padding:16px}.bench-answers{grid-template-columns:1fr}}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-game{position:fixed;left:12px;top:8px;z-index:1000;transform:translateY(-180%);padding:12px;background:#17271e;color:#fff;border:2px solid #ff9450;border-radius:8px}
.skip-game:focus{transform:none}