/* Shared desktop density for site and game surfaces. CSS pixels preserve the
 * user's browser zoom; toolbar height and device pixel ratio do not select size. */
:root { --ui-desktop-scale: 1; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Scale each page root once, including Shadow DOM hosts. Fixed overlays retain
 * their inset edges; scrollable content measures the available scaled viewport. */
body > :is(#splash-screen, #auth-screen, #login-screen, #recover-screen,
  #register-screen, #payment-screen, #payment-success-screen, #invite-code-screen,
  #product-intro-screen, #workshop-screen, #city-select-screen, #city-atlas-panel,
  #city-atlas-host, #site-theme-toggle),
body[data-site-theme-control] > .page {
  --site-layout-width: calc(100vw / var(--ui-desktop-scale));
  --site-layout-height: calc(var(--ui-visual-height, 100dvh) / var(--ui-desktop-scale));
  zoom: var(--ui-desktop-scale);
}
/* Shared website tokens. Shadow-root city cards inherit these from their host. */
:root {
  --site-bg:#101114; --site-surface:#1c1d21; --site-fill:#292b31;
  --site-text:#f5f5f7; --site-muted:#afb1ba; --site-border:#44464f;
  --site-blue:#70b7ff; --site-primary:#0071e3; --site-glass:rgba(28,29,33,.92);
  --site-error:#ff9a94; --site-shadow:0 18px 60px #0004; --site-backdrop:#0008;
}
:root.cityrail-light-ui {
  --site-bg:#f5f5f7; --site-surface:#fff; --site-fill:#e8e8ed;
  --site-text:#1d1d1f; --site-muted:#606069; --site-border:#c8c8cf;
  --site-blue:#0066cc; --site-primary:#0071e3; --site-glass:rgba(250,250,252,.92);
  --site-error:#b42318; --site-shadow:0 18px 60px #18223818; --site-backdrop:#17202b55;
}
/* Glass also covers website dialogs. The entered-game contract adds map material. */
html.cityrail-glass-ui {
  --material-panel: rgba(250,250,252,var(--ui-material-panel-opacity,.72));
  --material-popover: rgba(250,250,252,.86);
  --material-inset: rgba(255,255,255,.24);
  --material-blur: var(--ui-material-blur,blur(24px) saturate(1.25));
  --material-shadow: var(--site-shadow);
  --material-scrim: rgba(223,229,234,.18);
  --cr416-blur: var(--material-blur);
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  html.cityrail-glass-ui {
    --material-panel: var(--site-surface);
    --material-popover: var(--site-surface);
    --material-blur: none;
  }
}
.cityrail-theme-button,html body #site-theme-toggle {
  display:inline-grid!important; place-items:center; flex:0 0 44px; width:44px; height:44px;
  border:1px solid var(--site-border)!important; border-radius:14px;
  padding:10px; background:var(--site-glass)!important; color:var(--site-text)!important;
  box-shadow:0 4px 14px #0001!important; backdrop-filter:blur(16px); cursor:pointer; touch-action:manipulation;
}
.cityrail-theme-button svg { width:22px; height:22px; display:block; pointer-events:none; }
.cityrail-theme-button:focus-visible { outline:3px solid var(--site-blue); outline-offset:4px; }
.cityrail-theme-button:active { transform:scale(.96); }
#site-theme-toggle { position:fixed; bottom:max(22px,env(safe-area-inset-bottom)); left:max(22px,env(safe-area-inset-left)); z-index:2147483647; }
html.cityrail-city-entered body>#site-theme-toggle,body:has(#city-select-screen.visible)>#site-theme-toggle { display:none!important; }
/* Website surfaces, including account and checkout flows, share the same palette. */
:is(#splash-screen,#auth-screen,#login-screen,#register-screen,#payment-screen,#payment-success-screen,#invite-code-screen,#product-intro-screen,#workshop-screen,#city-select-screen) {
  background:var(--site-bg)!important; color:var(--site-text)!important;
  -webkit-backdrop-filter:var(--material-background-blur,none);
  backdrop-filter:var(--material-background-blur,none);
}
:is(#auth-screen,#login-screen,#register-screen,#payment-screen,#payment-success-screen,#invite-code-screen,#product-intro-screen,#workshop-screen,#city-select-screen) :is(h1,h2,h3,h4,p,label,span,strong,b,small,li,summary,a,[class$="-title"],[class$="-name"],[class$="-amount"],[class$="-value"]):not(.auth-btn-primary *) {
  color:var(--site-text)!important; text-shadow:none;
}
html body :is(#splash-screen,#auth-screen,#login-screen,#register-screen,#payment-screen,#payment-success-screen,#invite-code-screen,#product-intro-screen,#workshop-screen,#city-select-screen) :is(h1,h2,h3) { color:var(--site-text)!important; -webkit-text-fill-color:currentColor; }
html body :is(.splash-hero-lede,.splash-version-note,.auth-lede,.auth-subtitle,.auth-action-subtitle,.auth-footer,.reg-lede,.intro-desc,.intro-lede,.pay-subtitle,.pay-note,.workshop-tagline) { color:var(--site-muted)!important; }
html body :is(#auth-screen,#login-screen,#register-screen,#payment-screen,#payment-success-screen,#invite-code-screen,#product-intro-screen,#workshop-screen,#city-select-screen) :is([class$="-subtitle"],[class$="-hint"],[class$="-desc"],[class$="-note"],[class$="-label"]) { color:var(--site-muted)!important; }
html body :is(.auth-hero-card,.auth-action-card,.auth-stat,.auth-auto-remember,.reg-panel,.reg-value-line,.intro-proof-item,.intro-metric,.pay-card,.pay-panel,.pay-success-panel,.pay-success-account,.login-panel,.reg-feature-card,.pay-option,.pay-order-card,.workshop-card,.city-card,.auth-card,.login-card) { background:var(--material-panel,var(--site-surface))!important; border-color:var(--site-border)!important; color:var(--site-text)!important; box-shadow:var(--site-shadow); -webkit-backdrop-filter:var(--material-blur,none); backdrop-filter:var(--material-blur,none); }
html body :is(#auth-screen,#login-screen,#register-screen,#payment-screen,#payment-success-screen,#invite-code-screen,#product-intro-screen,#workshop-screen,#city-select-screen) :is(input:not([type="checkbox"]):not([type="radio"]),textarea,select) { background:var(--site-surface)!important; color:var(--site-text)!important; border-color:var(--site-border)!important; color-scheme:inherit; }
html body :is(#auth-screen,#login-screen,#register-screen,#payment-screen,#invite-code-screen,#workshop-screen) :is(input,textarea)::placeholder { color:var(--site-muted)!important; opacity:1; }
html body :is(#auth-screen,#login-screen,#register-screen,#payment-screen,#payment-success-screen,#invite-code-screen,#product-intro-screen,#workshop-screen,#city-select-screen) button:not(.auth-btn-primary) { color:var(--site-text)!important; background:var(--site-fill)!important; border-color:var(--site-border)!important; }
html body :is(.splash-action--primary,.reg-submit-btn,.pay-confirm-btn,#login-submit-btn,#reg-submit-btn) { background:var(--site-primary)!important; color:#fff!important; border-color:var(--site-primary)!important; }
html body :is(.reg-submit-btn,.pay-confirm-btn,#login-submit-btn,#reg-submit-btn) * { color:#fff!important; }
html body :is(.splash-download-btn,.splash-changelog-btn) { background:var(--site-fill)!important; border-color:var(--site-border)!important; color:var(--site-text)!important; }
html body :is(.splash-cities-link,.splash-contact-link,.splash-demo-link) { color:var(--site-blue); border-color:var(--site-border); }
html.cityrail-light-ui #splash-screen { background:radial-gradient(ellipse at 20% 20%,#e2efff,transparent 55%),var(--site-bg)!important; }
html.cityrail-light-ui :is(#splash-screen,#auth-screen)::after { background:none; }
html.cityrail-light-ui :is(#splash-screen,#auth-screen)::before { opacity:.12; }
html.cityrail-light-ui .cityrail-build-mark { background:#ffffffd9; border-color:var(--site-border); box-shadow:0 8px 24px #0001; }
html.cityrail-light-ui .cityrail-build-number { background-image:linear-gradient(126deg,#243d57,#0071e3); text-shadow:none; }
html.cityrail-light-ui :is(.splash-logo-img,.logo-img) { box-shadow:0 14px 46px #34496320; }
html.cityrail-light-ui :is(.auth-back-btn,.auth-back-btn span,.auth-back-btn svg) { color:var(--site-text)!important; stroke:currentColor; }
/* Download page uses the same switch and tokens without loading the simulation. */
body[data-site-theme-control]:has(.page>.wrap) { background:var(--site-bg); color:var(--site-text); }
body[data-site-theme-control] .page :is(.lede,.note,.status,.install-card ol) { color:var(--site-muted); }
body[data-site-theme-control] .page .install-card { background:var(--site-surface); border-color:var(--site-border); }
body[data-site-theme-control] .page .btn { background:var(--site-primary); color:#fff; }
body[data-site-theme-control] .page .btn.secondary { background:var(--site-fill); color:var(--site-text); border-color:var(--site-border); }
#city-atlas-panel,.city-atlas-page { background:var(--site-bg); }
#city-atlas-root .atlas-nav .cityrail-theme-button { margin-left:auto; margin-right:18px; }
@media(max-width:600px) { #city-atlas-root .atlas-nav .cityrail-theme-button { margin-right:8px; } #city-atlas-root .atlas-nav { gap:8px; } #city-atlas-root .atlas-return { gap:6px; } }
@media(prefers-reduced-motion:reduce) { .cityrail-theme-button:active { transform:none; } }
@media(prefers-reduced-transparency:reduce) { .cityrail-theme-button,html body #site-theme-toggle { background:var(--site-surface)!important; backdrop-filter:none; } }

html body :is(.reg-feature-copy span,.auth-stat span,.auth-auto-copy span,.pay-contact) { color:var(--site-muted)!important; }
html body :is(.reg-error-hint,.auth-error,.pay-error) { color:#ff9a94!important; }
html.cityrail-light-ui body :is(.reg-error-hint,.auth-error,.pay-error) { color:#b42318!important; }
html body .reg-shot-badge { background:var(--site-glass); color:var(--site-text)!important; }
html body :is(#auth-screen,#login-screen,#register-screen,#payment-screen,#payment-success-screen,#invite-code-screen,#product-intro-screen,#workshop-screen,#city-select-screen) :is(button,a,input,select,textarea):focus-visible { outline:3px solid var(--site-blue); outline-offset:3px; }
/* A focused editor must not trigger Safari's automatic page zoom. Keep this
 * at the shared website-form owner, including recovery and workshop uploads. */
@media (pointer: coarse) {
  html body :is(#login-screen,#register-screen,#recover-screen,#payment-screen,#invite-code-screen,#workshop-screen,#workshop-my-modal) :is(input,textarea,select) {
    font-size: 16px;
  }
  body > :is(#auth-screen,#login-screen,#register-screen,#recover-screen,#payment-screen,#invite-code-screen,#workshop-screen,#city-select-screen) {
    top: var(--ui-visual-top,0px);
    bottom: auto;
    height: var(--ui-visual-height,100dvh);
    overscroll-behavior: contain;
  }
}
/* Primary actions retain their role; icon-only back controls inherit readable text. */
html body #login-screen .reg-submit-btn,
html body #register-screen .reg-submit-btn,
html body #payment-success-screen .pay-success-btn { background:var(--site-primary)!important; color:#fff!important; border-color:var(--site-primary)!important; }
html body #login-screen .reg-submit-btn *,html body #register-screen .reg-submit-btn * { color:#fff!important; }
html body :is(#auth-screen,#login-screen,#register-screen,#payment-screen) :is(.auth-back-btn,.reg-back-btn) :is(span,svg) { color:var(--site-text)!important; stroke:currentColor; }
html body #register-screen .reg-story { background:var(--site-surface)!important; color:var(--site-text)!important; border-color:var(--site-border)!important; box-shadow:var(--site-shadow)!important; }
html body :is(#auth-screen,#login-screen,#register-screen) :is(.reg-title,.auth-title) { text-shadow:none!important; }
html body .cityrail-pay-card { background:var(--material-panel,var(--site-surface))!important; color:var(--site-text)!important; border-color:var(--site-border)!important; }
html body #cityrail-pay-modal :is(h2,h3,p,label,span,div) { color:var(--site-text)!important; }
html body #cityrail-pay-modal :is(button,input,textarea,select) { color:var(--site-text)!important; background:var(--site-fill)!important; border-color:var(--site-border)!important; }
html body #cityrail-pay-modal :is(input,textarea)::placeholder { color:var(--site-muted)!important; }
/* QR codes must stay on white in either appearance. */
html body .cityrail-pay-qr-wrap { background:#fff!important; }

.site-article { --bg:var(--site-bg); --text:var(--site-text); --muted:var(--site-muted); --line:var(--site-border); --blue:var(--site-blue); }
.site-article .card,.site-article .cta a.secondary { background:var(--site-surface); color:var(--site-text); }
.site-article .cta a:not(.secondary) { background:var(--site-primary); color:#fff; }
.site-article a:focus-visible { outline:3px solid var(--site-blue); outline-offset:4px; }

html body .cityrail-pay-card {
  -webkit-backdrop-filter: var(--material-blur,none);
  backdrop-filter: var(--material-blur,none);
}