/*
 * Project Chronos — cinematic command interface
 * CP-158 visual rework
 *
 * This layer intentionally sits after styles.css. It preserves the existing
 * information architecture and interaction contracts while introducing a
 * stronger image-led hierarchy, depth, motion discipline and responsive
 * containment for the long SPA surfaces.
 */

:root {
  color-scheme: dark;
  --chronos-void: #02070c;
  --chronos-ink: #061219;
  --chronos-surface: rgba(7, 20, 29, .88);
  --chronos-surface-raised: rgba(11, 29, 39, .9);
  --chronos-glass: rgba(5, 17, 25, .7);
  --chronos-border: rgba(143, 211, 224, .2);
  --chronos-border-strong: rgba(117, 226, 246, .52);
  --chronos-cyan: #72e8ff;
  --chronos-amber: #ffd071;
  --chronos-green: #82efb2;
  --chronos-violet: #c8a4ff;
  --chronos-red: #ff7984;
  --chronos-radius-lg: 18px;
  --chronos-radius-md: 12px;
  --chronos-radius-sm: 8px;
  --chronos-ease: cubic-bezier(.2, .8, .2, 1);
  --chronos-shadow-deep: 0 28px 100px rgba(0, 0, 0, .48);
  --chronos-shadow-soft: 0 18px 48px rgba(0, 0, 0, .28);
}

html {
  background: var(--chronos-void);
  scroll-behavior: smooth;
  scrollbar-color: rgba(114, 232, 255, .4) rgba(3, 11, 16, .96);
}

body {
  min-width: 0;
  background:
    radial-gradient(circle at 78% -6%, rgba(41, 125, 155, .18), transparent 32%),
    radial-gradient(circle at 7% 82%, rgba(165, 88, 33, .1), transparent 28%),
    var(--chronos-void);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body:not(.game-shell-active)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  opacity: .065;
  background: repeating-linear-gradient(180deg, transparent 0 3px, rgba(143, 211, 224, .22) 4px, transparent 5px);
  mix-blend-mode: screen;
}

body:not(.game-shell-active) #chronos-atmosphere-canvas {
  z-index: 1;
  opacity: .36;
  mix-blend-mode: screen;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--chronos-cyan);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(114, 232, 255, .14);
}

/* Shared shell: a stable command rail with a quieter, layered workspace. */
.preflight-topbar {
  min-height: 78px;
  padding-inline: clamp(18px, 3vw, 42px);
  gap: 22px;
  border-bottom-color: rgba(114, 232, 255, .18);
  background: linear-gradient(180deg, rgba(2, 10, 16, .96), rgba(3, 13, 20, .78));
  box-shadow: 0 14px 44px rgba(0, 0, 0, .26);
  backdrop-filter: blur(20px) saturate(125%);
  -webkit-backdrop-filter: blur(20px) saturate(125%);
}

.brand-block {
  min-width: 270px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-color: var(--chronos-cyan);
  background: linear-gradient(145deg, rgba(114, 232, 255, .12), rgba(114, 232, 255, .02));
  box-shadow: 0 0 0 1px rgba(114, 232, 255, .08), 0 0 28px rgba(114, 232, 255, .16), inset 0 0 18px rgba(114, 232, 255, .08);
}

.preflight-nav {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(114, 232, 255, .28) transparent;
}

.preflight-nav-group {
  border-left-color: rgba(143, 211, 224, .14);
}

.preflight-nav-group.operations {
  border-left-color: rgba(255, 208, 113, .32);
}

.preflight-nav-item {
  min-width: 132px;
  padding-inline: 13px;
  border-radius: 8px 8px 0 0;
  transition: color .24s var(--chronos-ease), background .24s var(--chronos-ease), box-shadow .24s var(--chronos-ease), transform .24s var(--chronos-ease);
}

.preflight-nav-item:hover {
  transform: translateY(-1px);
}

.preflight-nav-item:hover,
.preflight-nav-item.active {
  color: var(--chronos-cyan);
  background: linear-gradient(180deg, rgba(114, 232, 255, .12), rgba(114, 232, 255, .025));
  border-right-color: rgba(114, 232, 255, .32);
  box-shadow: inset 0 -2px var(--chronos-cyan), inset 0 1px 0 rgba(255, 255, 255, .04);
}

.preflight-session {
  min-width: 148px;
  border-left-color: rgba(143, 211, 224, .16);
}

.preflight-page {
  width: min(1820px, calc(100vw - 64px));
  padding: 44px 0 96px;
}

.preflight-frame {
  position: relative;
  border: 1px solid rgba(114, 232, 255, .22);
  border-radius: var(--chronos-radius-lg);
  background:
    linear-gradient(145deg, rgba(8, 27, 38, .94), rgba(3, 11, 17, .97) 62%),
    radial-gradient(circle at 82% 0%, rgba(114, 232, 255, .12), transparent 32%);
  box-shadow: var(--chronos-shadow-deep), inset 0 1px 0 rgba(255, 255, 255, .035);
  overflow: clip;
}

.preflight-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  pointer-events: none;
  border: 1px solid rgba(114, 232, 255, .05);
  border-radius: calc(var(--chronos-radius-lg) - 5px);
}

.preflight-page-head {
  position: relative;
  padding: 34px clamp(24px, 3vw, 48px) 28px;
  border-bottom-color: rgba(143, 211, 224, .18);
  background:
    linear-gradient(105deg, rgba(29, 82, 103, .7), rgba(5, 18, 26, .78) 54%, rgba(54, 29, 46, .34)),
    url("graphics/public/chronos-hero-orbit.png") 72% 42% / cover;
  isolation: isolate;
}

.preflight-page-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(3, 11, 17, .62), transparent 60%, rgba(3, 11, 17, .32));
}

.preflight-page-head h2 {
  max-width: 900px;
  font-size: clamp(28px, 3vw, 44px);
  letter-spacing: -.035em;
}

.preflight-page-head p {
  max-width: 820px;
  color: rgba(230, 244, 245, .72);
  font-size: 12px;
}

.preflight-page-head .preflight-page-meta {
  border-radius: var(--chronos-radius-sm);
  border-color: rgba(255, 208, 113, .38);
  background: rgba(34, 25, 13, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.preflight-flow {
  padding-inline: clamp(20px, 3vw, 48px);
  background: rgba(2, 9, 14, .7);
}

.preflight-flow-step {
  border-radius: 999px;
  transition: border-color .24s var(--chronos-ease), color .24s var(--chronos-ease), background .24s var(--chronos-ease);
}

.preflight-flow-step.active {
  border-color: rgba(114, 232, 255, .72);
  background: rgba(114, 232, 255, .12);
  box-shadow: 0 0 18px rgba(114, 232, 255, .08);
}

.preflight-status-strip {
  gap: 1px;
  background: rgba(143, 211, 224, .2);
}

.preflight-status-tile {
  min-height: 74px;
  padding: 12px 16px;
  background: rgba(3, 13, 20, .88);
}

.preflight-status-tile strong {
  font-size: 14px;
}

/* Commander hub: real orbital imagery gives the command center a visual anchor. */
body[data-app-view="commander"] .commander-hub {
  border-radius: var(--chronos-radius-lg);
  background: linear-gradient(145deg, rgba(8, 26, 36, .96), rgba(2, 10, 16, .98));
  box-shadow: var(--chronos-shadow-deep);
}

.commander-hub-hero {
  position: relative;
  min-height: 290px;
  padding: 48px clamp(28px, 4vw, 62px) 38px;
  border-bottom-color: rgba(143, 211, 224, .24);
  background:
    linear-gradient(90deg, rgba(3, 13, 20, .96) 0%, rgba(3, 13, 20, .78) 38%, rgba(3, 13, 20, .25) 74%, rgba(3, 13, 20, .62) 100%),
    linear-gradient(180deg, rgba(6, 22, 32, .18), rgba(3, 10, 16, .9)),
    url("graphics/public/chronos-hero-orbit.png") 72% 45% / cover;
  isolation: isolate;
}

.commander-hub-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 73% 24%, rgba(114, 232, 255, .2), transparent 22%);
  mix-blend-mode: screen;
}

.commander-hub-hero h2 {
  max-width: 760px;
  color: #f2fcfd;
  font-size: clamp(38px, 5vw, 72px);
  line-height: .9;
  letter-spacing: -.065em;
  text-shadow: 0 8px 32px rgba(0, 0, 0, .5);
}

.commander-hub-hero p {
  max-width: 620px;
  color: rgba(230, 244, 245, .74);
  font-size: 13px;
}

.commander-hub-actions .primary-btn,
.commander-hub-actions .ghost-btn,
.command-lobby .primary-btn,
.command-lobby .ghost-btn {
  border-radius: 999px;
}

.commander-hub-strip {
  background: rgba(143, 211, 224, .22);
}

.commander-hub-strip > div {
  min-height: 94px;
  padding: 16px 19px;
  background: linear-gradient(180deg, rgba(5, 17, 24, .98), rgba(3, 11, 16, .94));
}

.commander-hub-grid {
  gap: 1px;
  background: rgba(143, 211, 224, .2);
}

.commander-hub-section {
  padding: clamp(22px, 3vw, 38px);
  background: rgba(3, 12, 18, .92);
}

.commander-section-head h3 {
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -.035em;
}

.commander-match-card,
.commander-empty,
.commander-prep-row,
.commander-archive {
  border-radius: var(--chronos-radius-md);
}

.commander-match-card {
  min-height: 208px;
  background: rgba(7, 19, 27, .88);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

.commander-match-card-art {
  background:
    linear-gradient(180deg, rgba(3, 12, 18, .05), rgba(3, 12, 18, .94)),
    url("graphics/generated/state/STATE-LND-01__main-battle-tank-ready.png") center / cover;
}

.commander-match-card:nth-child(2n) .commander-match-card-art {
  background:
    linear-gradient(180deg, rgba(3, 12, 18, .05), rgba(3, 12, 18, .94)),
    url("graphics/generated/state/STATE-AIR-01__air-superiority-fighter-ready.png") center / cover;
}

.commander-match-card-art strong {
  text-shadow: 0 4px 18px rgba(0, 0, 0, .72);
}

/* Command-Control and Match-Setup get image-led entry cards instead of flat blocks. */
.command-lobby {
  border-radius: var(--chronos-radius-lg);
  border-color: rgba(114, 232, 255, .24);
  background: linear-gradient(145deg, rgba(7, 22, 31, .95), rgba(2, 10, 16, .97));
  box-shadow: var(--chronos-shadow-deep);
  overflow: clip;
}

.command-lobby-hero {
  min-height: 226px;
  padding: 34px clamp(22px, 3vw, 48px) 28px;
  background:
    linear-gradient(90deg, rgba(4, 15, 22, .94), rgba(4, 15, 22, .5) 58%, rgba(4, 15, 22, .2)),
    url("graphics/public/chronos-hero-orbit.png") 76% 46% / cover;
}

.command-lobby-hero h2 {
  font-size: clamp(26px, 3vw, 42px);
  letter-spacing: -.045em;
}

.command-lobby-profile {
  border-radius: var(--chronos-radius-md);
  background: rgba(3, 12, 18, .68);
  backdrop-filter: blur(10px);
}

.command-lobby-board {
  gap: 14px;
  padding: 16px;
  background: linear-gradient(180deg, rgba(3, 11, 16, .76), rgba(8, 19, 27, .94));
}

.command-lobby-card,
.command-new-card,
.command-quick-card {
  border-radius: var(--chronos-radius-md);
  border-color: rgba(143, 211, 224, .2);
  box-shadow: var(--chronos-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .025);
}

.command-lobby-card {
  overflow: clip;
}

.command-lobby-art {
  min-height: 190px;
  background:
    linear-gradient(180deg, rgba(4, 14, 21, .08), rgba(4, 14, 21, .92)),
    url("chronos-world-map.png") center / cover;
}

.command-lobby-card:nth-child(2n) .command-lobby-art {
  background:
    linear-gradient(180deg, rgba(4, 14, 21, .1), rgba(4, 14, 21, .92)),
    url("chronos-theater-map.png") center / cover;
}

.command-new-card {
  background:
    linear-gradient(145deg, rgba(68, 44, 15, .35), rgba(5, 15, 21, .9)),
    url("graphics/generated/state/STATE-BLD-07__refinery-operation.png") center / cover;
}

.preflight-match-frame {
  padding: 0 clamp(18px, 3vw, 48px) 42px;
}

.preflight-match-screen {
  content-visibility: auto;
  contain-intrinsic-size: auto 1050px;
}

.match-grid {
  gap: 16px;
}

.match-card {
  position: relative;
  min-height: 286px;
  justify-content: end;
  overflow: clip;
  border-radius: var(--chronos-radius-md);
  border-color: rgba(143, 211, 224, .24);
  background:
    linear-gradient(180deg, rgba(4, 13, 20, .08) 0%, rgba(3, 10, 15, .95) 82%),
    url("chronos-world-map.png") center / cover;
  box-shadow: var(--chronos-shadow-soft);
}

.match-card:nth-of-type(3) {
  background-image:
    linear-gradient(180deg, rgba(4, 13, 20, .08) 0%, rgba(3, 10, 15, .95) 82%),
    url("chronos-theater-map.png");
  background-size: cover;
}

.match-card:nth-of-type(4) {
  background-image:
    linear-gradient(180deg, rgba(4, 13, 20, .08) 0%, rgba(3, 10, 15, .95) 82%),
    url("graphics/generated/state/STATE-BLD-07__refinery-operation.png");
  background-size: cover;
}

.match-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, transparent 0 60%, rgba(114, 232, 255, .12) 60.2% 60.4%, transparent 60.6%);
  opacity: .7;
}

.match-card > * {
  position: relative;
  z-index: 1;
}

.match-card:hover,
.match-card.selected {
  border-color: var(--chronos-cyan);
  box-shadow: 0 0 0 1px rgba(114, 232, 255, .18), 0 22px 48px rgba(0, 0, 0, .36), 0 0 30px rgba(114, 232, 255, .1);
}

.nation-option,
.command-general-card,
.match-command-staff-selection,
.match-build-review,
.match-setting {
  border-radius: var(--chronos-radius-md);
}

.nation-option,
.command-general-card {
  background: linear-gradient(145deg, rgba(9, 28, 37, .9), rgba(3, 12, 18, .9));
  transition: transform .22s var(--chronos-ease), border-color .22s var(--chronos-ease), background .22s var(--chronos-ease), box-shadow .22s var(--chronos-ease);
}

.nation-option:hover,
.nation-option.selected,
.command-general-card:hover,
.command-general-card.selected {
  background: linear-gradient(145deg, rgba(18, 59, 72, .86), rgba(5, 19, 27, .94));
  box-shadow: 0 14px 28px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.match-command-staff-selection {
  padding: 18px;
  border-color: rgba(114, 232, 255, .4);
  background:
    linear-gradient(135deg, rgba(114, 232, 255, .1), rgba(8, 24, 33, .88) 55%, rgba(58, 33, 52, .32)),
    url("graphics/public/chronos-hero-orbit.png") 90% 58% / cover;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), var(--chronos-shadow-soft);
}

.command-general-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.command-general-card {
  min-height: 94px;
  padding: 11px;
}

.command-general-mark {
  min-height: 42px;
  border-radius: var(--chronos-radius-sm);
  background: rgba(114, 232, 255, .05);
}

.command-general-copy strong {
  font-size: 11px;
}

.command-general-copy small {
  font-size: 9px;
}

/* Running world: keep the map dominant and push telemetry into deliberate rails. */
body.game-shell-active {
  min-width: 1180px;
  background:
    radial-gradient(circle at 48% 26%, rgba(26, 105, 126, .08), transparent 34%),
    #02080d;
}

body.game-shell-active .topbar {
  height: 76px;
  padding-inline: 22px;
  border-bottom-color: rgba(114, 232, 255, .22);
  background: linear-gradient(180deg, rgba(2, 9, 14, .98), rgba(3, 13, 20, .82));
  box-shadow: 0 12px 38px rgba(0, 0, 0, .3);
}

body.game-shell-active .resource-context-label {
  min-height: 26px;
  padding-inline: 22px;
  background: rgba(2, 10, 15, .94);
}

body.game-shell-active .national-resource-strip,
body.game-shell-active .resource-strip,
body.game-shell-active .operating-system-strip {
  gap: 1px;
  background: rgba(143, 211, 224, .18);
}

body.game-shell-active .national-resource-card,
body.game-shell-active .resource-card,
body.game-shell-active .operating-system-card {
  background: linear-gradient(145deg, rgba(8, 26, 34, .94), rgba(3, 13, 19, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

body.game-shell-active .workspace {
  gap: 12px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(3, 11, 16, .94), rgba(2, 8, 12, .98));
}

body.game-shell-active .left-rail,
body.game-shell-active .right-rail,
body.game-shell-active .main-panel {
  border: 1px solid rgba(143, 211, 224, .18);
  border-radius: var(--chronos-radius-lg);
  box-shadow: var(--chronos-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .025);
}

body.game-shell-active .left-rail,
body.game-shell-active .right-rail {
  background: linear-gradient(180deg, rgba(7, 23, 32, .94), rgba(3, 12, 18, .94));
}

body.game-shell-active .main-stage {
  padding: 0;
}

body.game-shell-active .main-panel {
  min-height: 660px;
  overflow: clip;
  background: linear-gradient(145deg, rgba(8, 24, 33, .95), rgba(2, 10, 16, .98));
}

body.game-shell-active .world-map-wrap {
  min-height: 720px;
  padding: clamp(18px, 2vw, 28px);
  background: linear-gradient(180deg, rgba(3, 12, 17, .32), rgba(2, 9, 14, .82));
}

body.game-shell-active .world-map-canvas {
  min-height: 0;
  aspect-ratio: 16 / 8.4;
  border: 1px solid rgba(172, 228, 231, .42);
  border-radius: var(--chronos-radius-md);
  box-shadow: inset 0 0 100px rgba(0, 0, 0, .48), 0 20px 48px rgba(0, 0, 0, .32);
}

body.game-shell-active .world-map-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(114, 232, 255, .055) 6px, transparent 7px);
  mix-blend-mode: screen;
}

body.game-shell-active .world-status-row {
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 9px 11px;
  border: 1px solid rgba(143, 211, 224, .14);
  border-radius: var(--chronos-radius-sm);
  background: rgba(2, 9, 14, .68);
}

body.game-shell-active .world-map-legend {
  padding-inline: 3px;
}

body.game-shell-active .nav-item,
body.game-shell-active .filter-chip,
body.game-shell-active .action-btn,
body.game-shell-active .ghost-btn {
  border-radius: var(--chronos-radius-sm);
}

/* Public entry: the real asset is a reliable fallback even if the GPU globe is late. */
body[data-app-view="home"] .public-hero {
  min-height: max(760px, calc(100svh - 92px));
  background: #02080d;
}

/* The public landing is rendered inside the shell's padded content rail.
   Let the cinematic surface escape that rail so the artwork reaches both
   viewport edges; its inner typography remains constrained by its own grid. */
body[data-app-view="home"] .public-landing {
  width: calc(100% + 10vw);
  margin-inline-start: -5vw;
}

body[data-app-view="home"] .public-hero-image {
  /* The source artwork contains its own dark starfield. Use the complete
     artwork edge-to-edge so the globe is never clipped by cover-cropping. */
  background: url("graphics/public/chronos-hero-orbit.png") 100% 50% / 120% 100% no-repeat;
  background-color: #02080d;
  filter: saturate(.82) contrast(1.1) brightness(.76);
  transform: none !important;
  animation: none !important;
  -webkit-mask-image: none;
  mask-image: none;
}

body[data-app-view="home"] .public-hero.webgl-ready .public-hero-image {
  opacity: .82 !important;
  visibility: visible;
  z-index: -5;
}

body[data-app-view="home"].chronos-atmosphere-global .public-hero-image {
  opacity: .82 !important;
  visibility: visible;
}

body[data-app-view="home"].chronos-atmosphere-global .public-hero-globe-canvas {
  opacity: 1 !important;
  visibility: visible;
}

body[data-app-view="home"] .public-hero-content {
  position: relative;
  z-index: 4;
  width: min(1400px, calc(100% - 10vw));
  padding: clamp(28px, 3.2vw, 54px);
  border-left: 1px solid rgba(114, 232, 255, .2);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(2, 9, 14, .34), rgba(2, 9, 14, .1) 58%, transparent 88%);
  box-shadow: none;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body[data-app-view="home"] .public-hero h1 {
  max-width: 900px;
  font-size: clamp(48px, min(6.6vw, 8.4vh), 108px);
  letter-spacing: -.07em;
}

body[data-app-view="home"] .public-hero-lead {
  max-width: 620px;
  color: rgba(230, 244, 245, .8);
}

body[data-app-view="home"] .public-hero-proof {
  max-width: 780px;
  margin-top: 38px;
}

body[data-app-view="home"] .public-hero-proof b {
  color: var(--chronos-amber);
  text-shadow: 0 0 18px rgba(255, 208, 113, .2);
}

body[data-app-view="home"] .public-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
  width: min(1380px, calc(100% - 12vw));
  padding-block: clamp(110px, 13vw, 190px);
}

/* Native hash navigation must use real section heights. The Three.js scenes
   mount independently of content-visibility, so the placeholder saved no GPU
   work but made later anchors land 138–240px below their target. */
body[data-app-view="home"] .public-proposition,
body[data-app-view="home"] .public-economy,
body[data-app-view="home"] .public-battle,
body[data-app-view="home"] .public-progression {
  content-visibility: visible;
  contain-intrinsic-size: none;
}

body[data-app-view="home"] .public-layer-grid article,
body[data-app-view="home"] .public-economy-card,
body[data-app-view="home"] .public-battle-stage,
body[data-app-view="home"] .public-node-board {
  border-radius: var(--chronos-radius-lg);
  border-color: rgba(143, 211, 224, .24);
  box-shadow: var(--chronos-shadow-soft), inset 0 1px 0 rgba(255, 255, 255, .04);
}

@supports (animation-timeline: view()) {
  body[data-app-view="home"] .public-section {
    animation: chronos-section-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
}

@keyframes chronos-section-reveal {
  from { opacity: .28; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Same-document route transitions are deliberately short and quiet. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .42s;
  animation-timing-function: var(--chronos-ease);
}

::view-transition-old(root) {
  animation-name: chronos-route-out;
}

::view-transition-new(root) {
  animation-name: chronos-route-in;
}

@keyframes chronos-route-out {
  to { opacity: 0; transform: translateY(-8px) scale(.995); filter: blur(2px); }
}

@keyframes chronos-route-in {
  from { opacity: 0; transform: translateY(10px) scale(.995); filter: blur(2px); }
}

@media (max-width: 1180px) {
  .preflight-page { width: min(100% - 28px, 1540px); }
  .preflight-topbar .brand-block { min-width: 230px; }
  .preflight-nav-item { min-width: 112px; padding-inline: 10px; }
  .command-general-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  body:not(.game-shell-active) { min-width: 0; }
  .preflight-topbar { flex-wrap: wrap; min-height: 74px; padding-block: 9px; }
  .preflight-nav { order: 3; flex-basis: 100%; min-height: 42px; }
  .preflight-session { margin-left: auto; }
  .preflight-page { width: calc(100% - 24px); padding-top: 26px; }
  .preflight-page-head { align-items: start; flex-direction: column; }
  .preflight-page-head .preflight-page-meta { width: 100%; }
  .commander-hub-hero { align-items: start; flex-direction: column; min-height: 360px; }
  .commander-hub-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .command-general-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .match-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .brand-block { min-width: 0; }
  .preflight-session { min-width: 0; }
  .preflight-session > span:last-of-type { display: none; }
  .preflight-page-head { padding: 28px 20px 24px; }
  .preflight-content,
  .preflight-match-frame { padding-inline: 14px; }
  .commander-hub-hero { padding: 34px 22px 28px; }
  .commander-hub-hero h2 { font-size: clamp(38px, 13vw, 62px); }
  .commander-hub-section { padding: 20px 16px; }
  .commander-hub-strip { grid-template-columns: 1fr 1fr; }
  .commander-match-grid { grid-template-columns: 1fr; }
  .command-general-grid { grid-template-columns: 1fr; }
  .match-command-staff-head { display: grid; }
  .match-command-staff-head > strong { justify-self: start; }
  .public-hero-content { width: calc(100% - 28px) !important; padding: 30px 20px !important; }
  body[data-app-view="home"] .public-hero h1 { font-size: clamp(44px, 14vw, 74px); }
  body[data-app-view="home"] .public-section { width: calc(100% - 28px); padding-block: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { display: none; }
  .preflight-nav-item:hover,
  .nation-option:hover,
  .command-general-card:hover,
  .match-card:hover { transform: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* Server-authoritative Chronos economy controls (V4 / ledger format 2). */
.server-match-economic-jobs {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-items:stretch;
  gap:12px;
  min-width:0;
  padding:10px 0 14px;
  border-bottom:1px solid rgba(77,201,225,.2);
}
.server-match-economic-jobs > .server-economy-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.server-economy-finance { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:8px; }
.server-economy-treasury,.server-economy-profile { display:grid; gap:4px; min-width:0; padding:9px 11px; border:1px solid rgba(77,201,225,.2); background:rgba(5,22,29,.84); }
.server-economy-treasury > span,.server-economy-profile > span { color:#74a5ae; font:800 8px var(--mono); letter-spacing:.08em; }
.server-economy-treasury > strong { color:#dffbff; font:800 18px var(--mono); }
.server-economy-treasury > small,.server-economy-profile > small { overflow-wrap:anywhere; color:#79a3aa; font:600 8px var(--mono); line-height:1.45; }
.server-economy-profile > strong { overflow-wrap:anywhere; color:#8fe0df; font:700 10px var(--mono); }
.server-economy-profile-source { border-top:1px solid rgba(77,201,225,.12); color:#99b8bc; font:600 8px var(--sans); line-height:1.45; }
.server-economy-profile-source > summary { padding:6px 0 2px; color:#86c4c8; font:800 8px var(--mono); cursor:pointer; }
.server-economy-profile-source ul { display:grid; gap:4px; margin:5px 0 8px; padding-left:18px; }
.server-economy-profile-source li { overflow-wrap:anywhere; }
.server-economy-command-feedback { margin:0; padding:10px 12px; border:1px solid rgba(77,201,225,.3); background:rgba(5,22,29,.86); color:#c6e9ed; font:700 10px var(--mono); line-height:1.5; overflow-wrap:anywhere; }
.server-economy-command-feedback.accepted { border-color:rgba(80,215,159,.48); color:#8ce5bd; }
.server-economy-command-feedback.rejected { border-color:rgba(229,109,117,.58); color:#ffaaa6; }
.server-economy-command-feedback.pending { border-color:rgba(241,196,95,.5); color:#f2d384; }
.server-economy-inventory,.server-economy-state-block,.server-economy-active-jobs,.server-economy-create { display:grid; gap:8px; min-width:0; }
.server-economy-inventory > h3,.server-economy-state-block > h3,.server-economy-active-jobs > h3,.server-economy-action-group > h3 { display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0; color:#a7d5d9; font:800 10px var(--mono); letter-spacing:.08em; }
.server-economy-inventory > h3 small,.server-economy-state-block > h3 small,.server-economy-active-jobs > h3 small,.server-economy-action-group > h3 small { color:#668e97; font:700 8px var(--mono); }
.server-economy-material-count,.server-economy-state-block > p { margin:0; color:#84aab0; font:600 9px var(--sans); line-height:1.5; }
.server-economy-store { min-width:0; border:1px solid rgba(77,201,225,.16); background:rgba(4,18,25,.72); }
.server-economy-store > summary { display:flex; align-items:baseline; flex-wrap:wrap; gap:8px 14px; min-height:40px; padding:10px; color:#d7f3f5; font:700 9px var(--mono); cursor:pointer; }
.server-economy-store > summary span { overflow-wrap:anywhere; color:#769fa7; font-size:8px; }
.server-economy-store > summary .server-economy-store-stock { flex:1 1 240px; min-width:0; color:#8ce5bd; font:800 9px var(--sans); line-height:1.45; }
.server-economy-store > summary small { flex:1 1 100%; overflow-wrap:anywhere; color:#587c85; font:600 7px var(--mono); }
.server-economy-table-wrap { max-width:100%; overflow:auto; }
.server-economy-table-wrap table { width:100%; min-width:610px; border-collapse:collapse; color:#bad4d8; font:600 9px var(--mono); }
.server-economy-table-wrap th,.server-economy-table-wrap td { padding:7px 9px; border-top:1px solid rgba(77,201,225,.11); text-align:left; vertical-align:top; }
.server-economy-table-wrap th { width:46%; color:#d7ecee; }
.server-economy-table-wrap th small { display:block; margin-top:3px; color:#638891; font-size:7px; font-weight:600; }
.server-economy-table-wrap td { white-space:nowrap; }
.server-economy-definition-list,.server-economy-job-list,.server-economy-completions { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); gap:8px; min-width:0; }
.server-economy-definition,.server-economy-job,.server-economy-completions article { display:grid; align-content:start; gap:8px; min-width:0; padding:10px; border:1px solid rgba(77,201,225,.18); background:linear-gradient(120deg,rgba(7,28,36,.94),rgba(5,17,23,.86)); }
.server-economy-definition.available { border-left:2px solid rgba(70,211,167,.7); }
.server-economy-definition.unavailable { border-left:2px solid rgba(232,173,84,.65); }
.server-economy-definition > header,.server-economy-job > header { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; min-width:0; }
.server-economy-definition > header > span,.server-economy-job > header > span { display:grid; gap:4px; min-width:0; }
.server-economy-definition > header strong,.server-economy-job > header strong { color:#d7f3f5; font:800 9px var(--mono); overflow-wrap:anywhere; }
.server-economy-definition > header small,.server-economy-job > header small { color:#81aab0; font:600 8px var(--sans); line-height:1.45; }
.server-economy-definition > header em { flex:0 0 auto; color:#71d7ad; font:800 7px var(--mono); font-style:normal; text-align:right; }
.server-economy-definition.unavailable > header em { color:#e4b968; }
.server-economy-definition-meta { display:grid; gap:4px; color:#87aeb4; font:600 8px var(--mono); line-height:1.45; overflow-wrap:anywhere; }
.server-economy-requirements { margin:0; color:#d6bd7c; }
.server-economy-definition-costs,.server-economy-site-gates { border-top:1px solid rgba(77,201,225,.12); color:#99b8bc; font:600 8px var(--sans); line-height:1.45; }
.server-economy-definition-costs > summary,.server-economy-site-gates > summary { padding:7px 0 4px; color:#86c4c8; font:800 8px var(--mono); cursor:pointer; }
.server-economy-definition-costs ul,.server-economy-site-gates ul { display:grid; gap:4px; margin:5px 0 8px; padding-left:18px; }
.server-economy-definition-costs li,.server-economy-site-gates li { overflow-wrap:anywhere; }
.server-economy-definition-costs p { margin:4px 0 8px; }
.server-economy-job-reason { margin:0; color:#e2bf72; font:700 8px var(--mono); line-height:1.45; overflow-wrap:anywhere; }
.server-economy-action-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); align-items:end; gap:8px; min-width:0; padding-top:3px; }
.server-economy-action-form > label { display:grid; gap:5px; min-width:0; color:#88b6bd; font:700 8px var(--mono); }
.server-economy-action-form select,.server-economy-action-form input { width:100%; min-width:0; min-height:40px; padding:8px; border:1px solid rgba(77,201,225,.28); border-radius:2px; background:#071922; color:#e4f9fa; font:600 10px var(--sans); }
.server-economy-action-form select:disabled,.server-economy-action-form input:disabled { opacity:.55; }
.server-economy-action-form label small { color:#6f999f; font:600 7px var(--sans); line-height:1.35; }
.server-economy-action-form > button,.server-economy-job-controls button { min-height:40px; padding:8px 11px; border:1px solid rgba(74,220,232,.4); background:rgba(13,55,64,.78); color:#c8f7f8; font:800 8px var(--mono); cursor:pointer; }
.server-economy-action-form > button:hover,.server-economy-job-controls button:hover,.server-economy-action-form > button:focus-visible,.server-economy-job-controls button:focus-visible { border-color:#71ebf0; background:rgba(16,78,88,.92); }
.server-economy-action-form > button:disabled,.server-economy-job-controls button:disabled { border-color:rgba(139,153,157,.22); background:rgba(25,35,40,.62); color:#74878b; cursor:not-allowed; }
.server-economy-cargo-lines { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr)); gap:7px; min-width:0; }
.server-economy-cargo-lines > label { display:grid; gap:4px; min-width:0; color:#d0e8eb; font:700 8px var(--sans); }
.server-economy-cargo-lines > p { margin:0; color:#e1b96c; font:700 8px var(--mono); }
.server-economy-action-form > .server-economy-job-reason { grid-column:1 / -1; }
.server-economy-action-form.server-economy-transport-form { width:100%; grid-template-columns:minmax(220px,min(28%,340px)) minmax(0,1fr); align-items:start; gap:12px 16px; }
.server-economy-transport-form > .server-economy-transport-route { grid-column:1; align-self:start; }
.server-economy-transport-route select { min-height:46px; }
.server-economy-transport-route small { color:#7fa7ad; font:600 9px var(--sans); line-height:1.4; }
.server-economy-transport-form > .server-economy-transport-cargo { grid-column:2; grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr)); align-content:start; gap:9px; }
.server-economy-transport-cargo > label { min-height:122px; align-content:start; gap:9px; padding:10px; border:1px solid rgba(77,201,225,.2); background:rgba(5,22,30,.72); font:700 10px var(--sans); }
.server-economy-transport-cargo > label > span { color:#d7f3f5; font-size:11px; }
.server-economy-transport-cargo > label small { display:grid; gap:4px; min-height:42px; color:#7fa7ad; font:600 9px var(--sans); line-height:1.4; }
.server-economy-transport-cargo > label small [data-economic-cargo-status] { color:#e0bd73; }
.server-economy-transport-cargo > label input { align-self:end; min-height:44px; font:700 13px var(--mono); }
.server-economy-transport-form > .server-economy-transport-guidance { grid-column:1 / -1; color:#88b6bd; font:600 10px var(--sans); }
.server-economy-transport-form > .server-economy-transport-submit { grid-column:1 / -1; justify-self:start; min-width:235px; min-height:46px; font-size:9px; }
.server-economy-job-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); }
.server-economy-job > header code { max-width:50%; overflow-wrap:anywhere; color:#6c9fa7; font:600 7px var(--mono); text-align:right; }
.server-economy-job-progress { color:#9dc9cc; font:700 8px var(--mono); line-height:1.45; overflow-wrap:anywhere; }
.server-economy-job-controls { display:flex; flex-wrap:wrap; gap:6px; }
.server-economy-job-controls button { flex:1 1 110px; min-height:40px; }
.server-economy-pill-list { display:flex; flex-wrap:wrap; gap:6px; }
.server-economy-pill-list > span { max-width:100%; padding:7px 9px; border:1px solid rgba(77,201,225,.15); color:#8fbec1; font:600 8px var(--mono); line-height:1.4; overflow-wrap:anywhere; }
.server-economy-completions article strong { color:#cce8e9; font:700 8px var(--mono); overflow-wrap:anywhere; }
.server-economy-completions article span,.server-economy-completions article small { color:#80a6ad; font:600 8px var(--sans); line-height:1.4; overflow-wrap:anywhere; }
.server-economy-create > header h3 { margin:0; color:#a7d5d9; font:800 10px var(--mono); letter-spacing:.08em; }
.server-economy-create > header p { max-width:900px; margin:4px 0 0; color:#7ea4aa; font:600 9px var(--sans); line-height:1.5; }
.server-economy-market { display:grid; gap:14px; min-width:0; }
.server-economy-market > header { padding:12px 14px; border:1px solid rgba(77,201,225,.22); background:linear-gradient(115deg,rgba(11,43,53,.82),rgba(5,18,25,.82)); }
.server-economy-market > header h3,.server-economy-market-section > h3 { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:7px 14px; margin:0; color:#c3ecee; font:800 10px var(--mono); letter-spacing:.08em; }
.server-economy-market > header p { max-width:1000px; margin:6px 0 0; color:#80a9b0; font:600 9px var(--sans); line-height:1.5; }
.server-economy-market-section { display:grid; gap:9px; min-width:0; padding:11px; border:1px solid rgba(77,201,225,.16); background:rgba(4,18,25,.65); }
.server-economy-market-section > h3 small { color:#6f999f; font:600 8px var(--sans); letter-spacing:0; }
.server-economy-market-warehouse-note { margin:0; color:#80a9b0; font:600 9px var(--sans); line-height:1.5; }
.server-economy-market-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:8px; min-width:0; }
.server-economy-market-offer,.server-economy-market-contract { display:grid; align-content:start; gap:8px; min-width:0; padding:11px; border:1px solid rgba(77,201,225,.2); background:linear-gradient(120deg,rgba(8,30,38,.95),rgba(5,18,25,.92)); }
.server-economy-market-contract { border-left:2px solid rgba(241,196,95,.62); }
.server-economy-market-offer > header,.server-economy-market-contract > header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.server-economy-market-offer > header strong,.server-economy-market-contract > header strong { color:#dbf4f6; font:800 9px var(--mono); overflow-wrap:anywhere; }
.server-economy-market-offer > header em,.server-economy-market-contract > header em { flex:0 0 auto; color:#77d8b1; font:800 7px var(--mono); font-style:normal; }
.server-economy-market-offer > p,.server-economy-market-contract > p,.server-economy-market-transit { display:grid; gap:4px; margin:0; color:#83aab0; font:600 9px var(--sans); line-height:1.45; overflow-wrap:anywhere; }
.server-economy-market-offer > div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:5px 12px; color:#84aeb4; font:700 8px var(--mono); }
.server-economy-market-offer > div strong { color:#f0cd83; }
.server-economy-market-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr)); align-items:end; gap:8px; min-width:0; }
.server-economy-market-form > label { display:grid; gap:5px; min-width:0; color:#88b6bd; font:700 8px var(--mono); }
.server-economy-market-form select,.server-economy-market-form input { width:100%; min-width:0; min-height:40px; padding:8px; border:1px solid rgba(77,201,225,.28); background:#071922; color:#e4f9fa; font:600 10px var(--sans); }
.server-economy-market-form > button { min-height:40px; padding:8px 11px; border:1px solid rgba(74,220,232,.4); background:rgba(13,55,64,.78); color:#c8f7f8; font:800 8px var(--mono); cursor:pointer; }
.server-economy-market-form > button:disabled { border-color:rgba(139,153,157,.22); background:rgba(25,35,40,.62); color:#74878b; cursor:not-allowed; }
.server-economy-market-form > small { grid-column:1 / -1; color:#769fa7; font:600 8px var(--sans); line-height:1.45; }
.server-economy-market-transit { padding:8px; border-left:2px solid rgba(77,201,225,.6); background:rgba(8,36,46,.6); }
.server-economy-market-transit strong { color:#8fe4eb; font:800 8px var(--mono); }
.server-economy-market-rights { display:grid; gap:5px; padding:10px; border:1px solid rgba(232,173,84,.25); background:rgba(65,44,16,.16); color:#bdac81; font:600 8px var(--sans); line-height:1.5; }
.server-economy-market-rights strong { color:#e5c478; font:800 8px var(--mono); }

@media (max-width:700px) {
  .server-match-economic-jobs { gap:10px; padding:9px 0 12px; }
  .server-match-economic-jobs > .server-economy-heading { display:grid; grid-template-columns:minmax(0,1fr); }
  .server-match-economic-jobs > .server-economy-heading small { text-align:left; overflow-wrap:anywhere; }
  .server-economy-finance { grid-template-columns:minmax(0,1fr); }
  .server-economy-treasury > strong { font-size:16px; }
  .server-economy-definition-list,.server-economy-job-list,.server-economy-completions { grid-template-columns:minmax(0,1fr); }
  .server-economy-market-list { grid-template-columns:minmax(0,1fr); }
  .server-economy-definition,.server-economy-job,.server-economy-completions article { padding:9px; }
  .server-economy-definition > header { flex-direction:column; }
  .server-economy-definition > header em { text-align:left; }
  .server-economy-action-form { grid-template-columns:minmax(0,1fr); }
  .server-economy-action-form.server-economy-transport-form { grid-template-columns:minmax(0,1fr); }
  .server-economy-transport-form > .server-economy-transport-route,.server-economy-transport-form > .server-economy-transport-cargo,.server-economy-transport-form > .server-economy-transport-guidance,.server-economy-transport-form > .server-economy-transport-submit { grid-column:1; }
  .server-economy-action-form > button,.server-economy-job-controls button { min-height:44px; }
  .server-economy-cargo-lines,.server-economy-action-form.server-economy-transport-form > .server-economy-transport-cargo { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .server-economy-job > header { flex-direction:column; }
  .server-economy-job > header code { max-width:none; text-align:left; }
  .server-economy-store > summary { min-height:44px; }
  .server-economy-table-wrap table { min-width:560px; }
  .server-economy-market-section { padding:8px; }
  .server-economy-market-form { grid-template-columns:minmax(0,1fr); }
  .server-economy-market-form > small { grid-column:1; }
  .server-economy-market-form > button { min-height:44px; }
}

@media (max-width:420px) {
  .server-economy-cargo-lines,.server-economy-action-form.server-economy-transport-form > .server-economy-transport-cargo { grid-template-columns:minmax(0,1fr); }
  .server-economy-transport-cargo > label { min-height:0; }
}

/* Public visual safety net: the data windows must never degrade to an empty grid
   while the GPU scene is loading or when a browser blocks the optional renderer. */
.public-economy-map,
.public-battle-stage { isolation: isolate; }

.public-economy-webgl,
.public-battle-webgl { z-index: 1 !important; }

.public-scene-fallback {
  position: absolute;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .45s ease, visibility .45s ease;
}

.public-economy-map.has-visible-scene-frame .public-scene-fallback,
.public-battle-stage.has-visible-scene-frame .public-scene-fallback {
  visibility: hidden !important;
  opacity: 0 !important;
}

.public-economy-fallback {
  background: #07151d;
  color: #dffaff;
}

.fallback-heightfield {
  position: absolute;
  inset: -4%;
  background-image:
    radial-gradient(ellipse at 52% 42%, rgba(82, 132, 90, .38), transparent 42%),
    linear-gradient(180deg, rgba(3, 16, 22, .05) 0%, rgba(3, 14, 19, .12) 52%, rgba(3, 11, 16, .84) 100%),
    url("assets/textures/terrain/earth.png");
  background-position: center, center, center;
  background-size: cover, cover, 300px 300px;
  background-blend-mode: screen, multiply, normal;
  filter: saturate(.82) contrast(1.16) brightness(.76);
  transform: scale(1.05) rotate(-1deg);
}

.fallback-heightfield::before,
.fallback-heightfield::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(166, 214, 192, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(166, 214, 192, .1) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, .76), transparent 88%);
  opacity: .7;
}

.fallback-heightfield::after {
  background: radial-gradient(ellipse at 56% 44%, transparent 0 22%, rgba(2, 8, 13, .08) 46%, rgba(2, 8, 13, .8) 100%);
  opacity: 1;
}

.fallback-economy-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(116deg, transparent 0 35%, rgba(6, 18, 22, .28) 35.2% 36%, transparent 36.3%),
    radial-gradient(ellipse at 72% 23%, rgba(224, 176, 99, .16), transparent 26%),
    linear-gradient(180deg, rgba(3, 9, 13, .04), rgba(3, 10, 14, .4));
  mix-blend-mode: screen;
}

.fallback-economy-ridge,
.fallback-economy-route {
  position: absolute;
  z-index: 2;
  transform-origin: left center;
}

.fallback-economy-ridge {
  height: 28%;
  width: 78%;
  border: 1px solid rgba(160, 215, 179, .24);
  border-radius: 48% 62% 54% 42%;
  box-shadow: 0 10px 0 rgba(5, 15, 19, .12), inset 0 0 0 8px rgba(6, 22, 23, .05);
  opacity: .8;
}

.fallback-economy-ridge.ridge-a { left: -7%; top: 18%; transform: rotate(14deg); }
.fallback-economy-ridge.ridge-b { left: 13%; top: 58%; width: 92%; transform: rotate(-9deg); border-color: rgba(255, 200, 87, .22); }
.fallback-economy-ridge.ridge-c { left: 47%; top: 34%; width: 63%; height: 24%; transform: rotate(27deg); border-color: rgba(75, 225, 255, .18); }

.fallback-economy-river {
  position: absolute;
  z-index: 2;
  left: 3%;
  top: 44%;
  width: 100%;
  height: 33%;
  border-bottom: 2px solid rgba(79, 177, 196, .42);
  border-radius: 48% 58% 42% 62%;
  transform: rotate(-7deg);
  box-shadow: 0 8px 0 rgba(62, 133, 152, .11), 0 0 18px rgba(48, 126, 154, .18);
  opacity: .78;
}

.fallback-economy-river::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 16%;
  bottom: -8px;
  border-bottom: 1px dashed rgba(142, 220, 225, .34);
  transform: rotate(2deg);
}

.fallback-economy-route {
  height: 4px;
  background: rgba(226, 181, 96, .62);
  box-shadow: 0 0 8px rgba(226, 181, 96, .3), 0 1px 0 rgba(255, 232, 164, .25);
  border-radius: 999px;
  opacity: .85;
}

.fallback-economy-route::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.fallback-economy-route.route-a { left: 7%; top: 68%; width: 71%; transform: rotate(-17deg); color: #ffc857; }
.fallback-economy-route.route-b { left: 23%; top: 76%; width: 55%; background: #70d7cc; box-shadow: 0 0 12px rgba(75, 225, 255, .34); transform: rotate(-35deg); color: #70d7cc; }
.fallback-economy-route.route-c { left: 53%; top: 64%; width: 37%; background: #9b8ae7; box-shadow: 0 0 12px rgba(165, 120, 255, .32); transform: rotate(-24deg); color: #9b8ae7; }

.fallback-economy-zone {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 22%;
  width: 28%;
  padding: 0 0 5px 5px;
  border-left: 1px solid rgba(255, 200, 87, .38);
  background: linear-gradient(180deg, transparent 0 42%, rgba(3, 13, 17, .5) 42% 100%);
  color: rgba(231, 241, 231, .86);
  font: 700 7px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  transform: skewY(-5deg);
  box-shadow: inset 0 -8px 18px rgba(3, 10, 14, .38);
}

.fallback-economy-zone::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16%;
  border-top: 1px solid rgba(189, 213, 188, .25);
}

.fallback-economy-zone b { position: absolute; left: 4px; bottom: 4px; font-weight: 700; text-shadow: 0 1px 3px #02080b; }
.fallback-economy-zone.zone-a { left: 8%; top: 24%; color: #d5bc7c; }
.fallback-economy-zone.zone-b { left: 45%; top: 39%; width: 31%; height: 19%; color: #7dd6dc; }
.fallback-economy-zone.zone-c { right: 6%; top: 19%; width: 23%; height: 20%; color: #b8a4f1; }

.fallback-economy-zone .stack,
.fallback-economy-zone .tower,
.fallback-economy-zone .tank,
.fallback-economy-zone .factory {
  position: relative;
  display: block;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: linear-gradient(135deg, rgba(225, 222, 177, .48), rgba(41, 69, 62, .54));
  box-shadow: 3px -3px 0 rgba(2, 11, 15, .5), 0 0 10px currentColor;
}

.fallback-economy-zone .stack { width: 20px; height: 24px; transform: skewY(12deg); }
.fallback-economy-zone .stack-a { height: 36px; }
.fallback-economy-zone .stack-b { width: 16px; height: 29px; }
.fallback-economy-zone .stack-c { width: 12px; height: 18px; }
.fallback-economy-zone .tower { width: 8px; height: 45px; border-radius: 5px 5px 0 0; }
.fallback-economy-zone .tower::after { content: ""; position: absolute; left: -7px; top: 10px; width: 20px; border-top: 1px solid currentColor; }
.fallback-economy-zone .tank { width: 20px; height: 10px; border-radius: 50%; margin-bottom: 4px; }
.fallback-economy-zone .tank-b { width: 15px; height: 8px; }
.fallback-economy-zone .factory { width: 45px; height: 26px; background: repeating-linear-gradient(90deg, rgba(197, 221, 207, .4) 0 4px, rgba(24, 51, 45, .55) 4px 8px); }

.fallback-economy-hub {
  position: absolute;
  z-index: 4;
  display: grid;
  gap: 3px;
  min-width: 82px;
  padding: 7px 9px 7px 12px;
  border: 1px solid rgba(116, 220, 214, .58);
  background: linear-gradient(135deg, rgba(5, 20, 24, .92), rgba(6, 15, 21, .72));
  color: #dffaff;
  box-shadow: 0 0 0 6px rgba(75, 225, 255, .06), 0 10px 22px rgba(0, 0, 0, .34);
  font: 800 9px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
}

.fallback-economy-hub::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 12px currentColor;
}

.fallback-economy-hub small { color: rgba(197, 240, 235, .66); font-size: 7px; font-weight: 500; }
.fallback-economy-hub.hub-a { left: 13%; top: 57%; color: #70d7cc; }
.fallback-economy-hub.hub-b { left: 47%; top: 43%; color: #ffc857; }
.fallback-economy-hub.hub-c { right: 8%; top: 25%; color: #b8a4f1; }

.fallback-economy-scan {
  position: absolute;
  z-index: 5;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 48%, rgba(98, 220, 216, .16) 49%, transparent 50%);
  background-size: 100% 88px;
  opacity: .2;
  mix-blend-mode: screen;
  animation: chronos-scene-scan 9s linear infinite;
}

@keyframes chronos-scene-scan {
  from { transform: translateY(-88px); }
  to { transform: translateY(88px); }
}

.fallback-economy-readout,
.fallback-battle-readout {
  position: absolute;
  z-index: 3;
  left: 16px;
  bottom: 15px;
  display: grid;
  gap: 4px;
  color: rgba(197, 240, 235, .72);
  font: 8px/1.2 ui-monospace, Consolas, monospace;
  letter-spacing: .1em;
}

.fallback-economy-readout strong,
.fallback-battle-readout strong { color: #ffc857; font-size: 9px; }
.fallback-economy-readout small { color: rgba(197, 240, 235, .55); letter-spacing: .06em; }

.public-battle-fallback { background: #071319; color: #dffaff; }

.fallback-battle-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 72% 26%, rgba(235, 164, 100, .23), transparent 22%),
    linear-gradient(180deg, #081823 0%, #172f38 42%, #4c4938 70%, #17211d 100%);
}

.fallback-battle-horizon {
  position: absolute;
  z-index: 1;
  inset: 12% 0 52%;
  background: linear-gradient(180deg, transparent, rgba(149, 183, 151, .16) 55%, transparent);
  border-top: 1px solid rgba(201, 218, 184, .2);
  border-bottom: 1px solid rgba(201, 218, 184, .12);
}

.fallback-battle-terrain {
  position: absolute;
  z-index: 2;
  inset: 33% -8% -12%;
  background:
    linear-gradient(154deg, transparent 0 26%, rgba(67, 105, 63, .68) 26.2% 46%, transparent 46.2%),
    linear-gradient(30deg, rgba(7, 24, 21, .94), rgba(58, 83, 52, .92) 49%, rgba(11, 29, 24, .98)),
    url("assets/textures/terrain/rock.png");
  background-size: auto, auto, 260px 260px;
  background-blend-mode: screen, multiply, soft-light;
  clip-path: polygon(0 18%, 18% 4%, 34% 17%, 51% 8%, 66% 22%, 83% 5%, 100% 24%, 100% 100%, 0 100%);
  filter: saturate(.82) contrast(1.08);
}

.fallback-battle-terrain::after {
  content: "";
  position: absolute;
  inset: 27% 0 0;
  background-image: linear-gradient(rgba(154, 204, 184, .19) 1px, transparent 1px), linear-gradient(90deg, rgba(154, 204, 184, .14) 1px, transparent 1px);
  background-size: 62px 42px;
  transform: rotate(-9deg) perspective(240px) rotateX(34deg);
  transform-origin: bottom center;
  opacity: .72;
}

.fallback-battle-ridge {
  position: absolute;
  z-index: 3;
  height: 24%;
  width: 62%;
  border-top: 1px solid rgba(175, 211, 173, .28);
  border-radius: 50%;
  box-shadow: 0 -10px 0 rgba(30, 61, 45, .25), 0 -22px 0 rgba(30, 61, 45, .16);
  transform: rotate(-7deg);
}

.fallback-battle-ridge.ridge-a { left: -7%; top: 45%; }
.fallback-battle-ridge.ridge-b { right: -12%; top: 36%; width: 70%; transform: rotate(13deg); border-color: rgba(219, 187, 117, .22); }

.fallback-battle-road {
  position: absolute;
  z-index: 4;
  left: -4%;
  top: 70%;
  width: 108%;
  height: 7%;
  border-top: 2px solid rgba(205, 171, 112, .44);
  border-bottom: 1px dashed rgba(205, 171, 112, .3);
  transform: rotate(-9deg) skewX(-12deg);
  box-shadow: 0 -8px 20px rgba(205, 171, 112, .11), inset 0 5px 12px rgba(58, 39, 23, .24);
  opacity: .68;
  filter: brightness(.66) saturate(.72);
}

.fallback-battle-trench {
  position: absolute;
  z-index: 4;
  left: 7%;
  top: 51%;
  width: 48%;
  height: 17%;
  border-top: 2px dashed rgba(202, 172, 106, .34);
  border-radius: 50%;
  transform: rotate(8deg);
  box-shadow: 0 -8px 0 rgba(42, 34, 23, .28);
}

.fallback-battle-contour {
  position: absolute;
  z-index: 4;
  width: 42%;
  height: 22%;
  border: 1px solid rgba(126, 219, 178, .3);
  border-radius: 50%;
  transform: rotate(-12deg);
}

.fallback-battle-contour.contour-a { left: 4%; top: 49%; box-shadow: 0 11px 0 rgba(126, 219, 178, .11), 0 22px 0 rgba(126, 219, 178, .08); }
.fallback-battle-contour.contour-b { right: 7%; top: 30%; width: 30%; height: 28%; border-color: rgba(255, 200, 87, .34); box-shadow: 0 12px 0 rgba(255, 200, 87, .1); }

.fallback-battle-advance,
.fallback-battle-support,
.fallback-battle-frontline {
  position: absolute;
  z-index: 5;
  height: 2px;
  transform-origin: left center;
}

.fallback-battle-advance {
  left: 20%;
  top: 65%;
  width: 51%;
  background: linear-gradient(90deg, rgba(75, 225, 255, .18), #4be1ff 72%, rgba(75, 225, 255, .95));
  transform: rotate(-27deg);
  box-shadow: 0 0 14px rgba(75, 225, 255, .48);
}

.fallback-battle-advance::after,
.fallback-battle-support::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.fallback-battle-advance span,
.fallback-battle-support span,
.fallback-battle-frontline span {
  position: absolute;
  top: -15px;
  left: 2px;
  white-space: nowrap;
  color: currentColor;
  font: 7px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .12em;
}

.fallback-battle-advance { color: #4be1ff; }
.fallback-battle-support { left: 35%; top: 48%; width: 34%; color: #ffc857; background: linear-gradient(90deg, rgba(255, 200, 87, .1), #ffc857); transform: rotate(-8deg); box-shadow: 0 0 12px rgba(255, 200, 87, .36); }
.fallback-battle-frontline { left: 61%; top: 40%; width: 34%; border-top: 1px dashed #ff6671; transform: rotate(18deg); color: #ff6671; opacity: .84; }
.fallback-battle-frontline span { top: 6px; left: 17%; }

.fallback-battle-unit {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 74px;
  padding: 7px 8px 7px 28px;
  border: 1px solid rgba(75, 225, 255, .78);
  background: linear-gradient(135deg, rgba(5, 22, 28, .94), rgba(3, 12, 18, .78));
  color: #dffaff;
  box-shadow: 0 7px 16px rgba(0, 0, 0, .28), 0 0 16px rgba(75, 225, 255, .2);
  font: 800 8px/1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  transform: skewX(-8deg);
}

.fallback-battle-unit i {
  position: absolute;
  left: 8px;
  top: 8px;
  width: 15px;
  height: 13px;
  border: 1px solid currentColor;
  background: linear-gradient(180deg, currentColor 0 30%, transparent 31% 100%);
  clip-path: polygon(18% 0, 80% 0, 100% 35%, 91% 100%, 9% 100%, 0 35%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3);
}

.fallback-battle-unit small { color: rgba(197, 240, 235, .6); font-size: 7px; font-weight: 500; }
.fallback-battle-unit.unit-a { left: 18%; top: 60%; }
.fallback-battle-unit.unit-b { left: 30%; top: 41%; color: #ffc857; border-color: #ffc857; }
.fallback-battle-unit.unit-c { left: 69%; top: 31%; color: #ff6671; border-color: #ff6671; box-shadow: 0 0 16px rgba(255, 102, 113, .25); }
.fallback-battle-unit.unit-d { left: 52%; top: 67%; color: #a9d6c5; border-color: #a9d6c5; }

.fallback-battle-target {
  position: absolute;
  z-index: 2;
  left: 65%;
  top: 25%;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(255, 102, 113, .78);
  border-radius: 50%;
  box-shadow: 0 0 0 13px rgba(255, 102, 113, .08), inset 0 0 24px rgba(255, 102, 113, .16), 0 0 38px rgba(255, 102, 113, .17);
}

.fallback-battle-target::before,
.fallback-battle-target::after { content: ""; position: absolute; background: #ff6671; }
.fallback-battle-target::before { top: 50%; left: -16px; width: calc(100% + 32px); height: 1px; }
.fallback-battle-target::after { left: 50%; top: -16px; width: 1px; height: calc(100% + 32px); }
.fallback-battle-target span { position: absolute; top: -18px; left: 8px; color: #ff9da3; font: 7px/1 ui-monospace, Consolas, monospace; letter-spacing: .1em; white-space: nowrap; }

.fallback-battle-burst {
  position: absolute;
  z-index: 4;
  left: 63%;
  top: 24%;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255, 200, 87, .82);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 200, 87, .08), 0 0 24px rgba(255, 200, 87, .35);
  animation: chronos-contact-pulse 2.6s ease-out infinite;
}

@keyframes chronos-contact-pulse {
  0%, 100% { transform: scale(.8); opacity: .62; }
  48% { transform: scale(1.2); opacity: 1; }
}

.fallback-battle-readout { color: rgba(126, 219, 178, .82); }
.fallback-battle-readout strong { color: #4be1ff; }

/* AAA+ scene pass: expose the environment first and keep the data as a compact
   command dock. The visual fallback remains deterministic and gameplay-neutral. */
body[data-app-view="home"] .public-economy-card {
  min-height: 580px;
  background: #061117;
}

body[data-app-view="home"] .public-economy-data {
  right: 22px;
  bottom: 22px;
  left: auto;
  width: min(390px, 48%);
  padding: 18px 20px;
  border: 1px solid rgba(118, 220, 214, .28);
  border-left: 2px solid var(--amber);
  background: linear-gradient(135deg, rgba(4, 17, 22, .96), rgba(3, 10, 15, .9));
  box-shadow: 0 18px 36px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-app-view="home"] .public-economy-data p { max-width: 30ch; }
body[data-app-view="home"] .public-battle-stage { min-height: 580px; }

.fallback-economy-atmosphere::before {
  content: "";
  position: absolute;
  inset: -8%;
  background: url("assets/textures/terrain/heightmap.png") center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: .1;
  filter: contrast(1.12) brightness(.68) blur(.4px);
}

.fallback-economy-atmosphere::after {
  content: "";
  position: absolute;
  right: 4%;
  bottom: 18%;
  width: 32%;
  height: 28%;
  border: 1px solid rgba(222, 187, 105, .13);
  border-radius: 50%;
  transform: rotate(-18deg);
  box-shadow: 0 0 0 14px rgba(222, 187, 105, .04), 0 0 0 28px rgba(222, 187, 105, .025);
}

.fallback-economy-route {
  background-image: linear-gradient(90deg, rgba(226, 181, 96, .38), rgba(252, 224, 156, .86) 72%, rgba(226, 181, 96, .5)), url("assets/textures/terrain/asphalt.png");
  background-size: auto, 110px 110px;
  background-blend-mode: screen, multiply;
}

.fallback-economy-zone.zone-b::after {
  content: "";
  position: absolute;
  left: 20%;
  top: -30%;
  width: 42px;
  height: 62px;
  background: radial-gradient(ellipse at 50% 82%, rgba(173, 193, 182, .26), transparent 63%);
  filter: blur(5px);
  opacity: .64;
  animation: chronos-smoke-drift 5.8s ease-in-out infinite alternate;
}

@keyframes chronos-smoke-drift {
  from { transform: translate3d(-3px, 5px, 0) scale(.84); opacity: .32; }
  to { transform: translate3d(8px, -5px, 0) scale(1.15); opacity: .7; }
}

.fallback-battle-terrain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/textures/terrain/heightmap.png") center / cover no-repeat;
  mix-blend-mode: soft-light;
  opacity: .14;
  filter: contrast(1.18) brightness(.72) blur(.35px);
}

.fallback-battle-road {
  background: linear-gradient(180deg, rgba(111, 88, 52, .08), rgba(111, 88, 52, .42) 48%, rgba(24, 22, 17, .32)), url("assets/textures/terrain/asphalt.png") center / 170px 170px;
  background-blend-mode: screen, multiply;
}

.fallback-battle-unit i::before,
.fallback-battle-unit i::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 4px currentColor;
}

.fallback-battle-unit i::before { left: -3px; }
.fallback-battle-unit i::after { right: -3px; }

@media (max-width: 820px) {
  body[data-app-view="home"] .public-economy-card,
  body[data-app-view="home"] .public-battle-stage { min-height: 500px; }

  body[data-app-view="home"] .public-economy-data {
    right: 14px;
    bottom: 14px;
    width: calc(100% - 28px);
  }
}

/* Server match screen: every displayed field and map marker comes from the
   authenticated match endpoint. This intentionally replaces the local demo
   workspace while a server match is open. */
body.server-match-active { width:100%; min-width:0; overflow-x:hidden; }
body.server-match-active #game-shell { display:block; width:100%; min-width:0; max-width:none; min-height:100vh; margin:0; padding:0; background:#061018; }
body.server-match-active #game-shell > :not(#server-match-screen) { display:none !important; }
body.server-match-active #server-match-screen { display:block; width:100%; min-width:0; max-width:100%; box-sizing:border-box; min-height:100vh; margin:0; padding:0 14px 18px; overflow-x:hidden; color:#d7f5fa; background:radial-gradient(ellipse at 50% 40%,rgba(11,55,68,.34),transparent 54%),#061018; }
.server-match-screen[hidden] { display:none !important; }
.server-match-topbar { display:grid; grid-template-columns:minmax(210px,230px) minmax(0,1fr) auto; align-items:center; gap:14px; min-height:64px; border-bottom:1px solid rgba(80,208,232,.22); }
.server-match-brand { display:flex; align-items:center; gap:13px; min-width:230px; }
.server-match-brand .brand-mark { display:grid; place-items:center; width:38px; height:38px; border:1px solid #43dff6; color:#43dff6; font:800 15px var(--mono); }
.server-match-brand strong { display:block; margin-top:3px; color:#e9fbff; font:800 15px var(--mono); letter-spacing:.08em; }
.server-match-world-clock { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:13px; min-width:0; padding:8px 13px; border-right:1px solid rgba(80,208,232,.18); border-left:1px solid rgba(80,208,232,.18); background:rgba(5,23,31,.46); }
.server-match-world-clock > div { display:grid; gap:4px; min-width:0; }
.server-match-world-clock span { color:#7eabb3; font:700 7px var(--mono); letter-spacing:.09em; }
.server-match-world-clock strong { overflow-wrap:anywhere; color:#e8fcff; font:800 13px var(--sans); letter-spacing:.015em; }
.server-match-world-clock small { color:#8fb2b8; font:700 7px var(--mono); line-height:1.35; }
.server-match-topbar nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.server-match-topbar nav button { padding:9px 11px; border:1px solid rgba(82,212,236,.18); background:rgba(5,23,31,.74); color:#99c4ce; font:700 9px var(--mono); letter-spacing:.08em; cursor:pointer; }
.server-match-topbar nav button:hover { border-color:#4addf5; color:#e5fbff; }
.server-match-mobile-panels { display:none; }
.server-match-overview { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; padding:10px 0; }
.server-match-overview > div { min-width:0; padding:9px 12px; border:1px solid rgba(77,201,225,.2); background:linear-gradient(140deg,rgba(10,31,40,.84),rgba(5,17,24,.9)); }
.server-match-overview span,.server-match-overview small { display:block; color:#789da6; font:700 8px var(--mono); letter-spacing:.1em; }
.server-match-overview strong { display:block; margin:6px 0 4px; color:#e2fbff; font:800 15px var(--mono); letter-spacing:.04em; overflow-wrap:anywhere; }
.server-match-overview small { font-size:8px; letter-spacing:.04em; }
.server-connection strong { color:#58e4ae; font-size:11px; }
.server-connection i,.server-pool-connection i { display:inline-block; width:7px; height:7px; margin-right:7px; border-radius:50%; background:#47e2a5; box-shadow:0 0 10px currentColor; }
.server-connection.offline strong { color:#ffcf69; }
.server-connection.offline i { background:#ffbf54; }
.server-connection.fault strong { color:#ff807b; }
.server-connection.fault i { background:#ff6767; }
.server-match-layout { display:grid; grid-template-columns:clamp(260px,18vw,290px) minmax(0,1fr) clamp(330px,24vw,360px); align-items:stretch; gap:9px; height:min(72vh,760px); min-height:460px; max-height:760px; }
.server-match-left,.server-match-map-panel,.server-match-context { min-width:0; border:1px solid rgba(77,201,225,.22); background:rgba(5,17,24,.9); }
.server-match-left,.server-match-context { padding:12px; }
.server-match-left { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; }
.server-match-panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid rgba(77,201,225,.16); }
.server-match-panel-head strong { color:#bfeaf1; font:800 9px var(--mono); letter-spacing:.08em; }
.server-match-data-list { display:grid; grid-template-columns:1fr; gap:7px; margin:14px 0; }
.server-match-data-list span { display:flex; justify-content:space-between; padding:9px 10px; border:1px solid rgba(77,201,225,.12); color:#8cb5bf; font:700 9px var(--mono); }
.server-match-data-list b { color:#e3fbff; }
.server-match-data-note { padding:11px; border-left:2px solid #dcb454; background:rgba(75,56,20,.15); }
.server-match-data-note strong { color:#f0cb72; font:700 8px var(--mono); letter-spacing:.08em; }
.server-match-data-note p,.server-context-note { color:#829da5; font-size:11px; line-height:1.55; }
.server-match-player-list { display:grid; flex:1 1 auto; gap:4px; margin-top:10px; min-height:80px; overflow:auto; overscroll-behavior:contain; scrollbar-color:#23606b #07151c; }
.server-match-player-list > .section-kicker { position:sticky; top:0; z-index:1; padding:8px 0; background:#07151c; }
.server-match-nation { display:flex; align-items:center; gap:8px; min-height:42px; padding:6px 5px; border:0; border-bottom:1px solid rgba(77,201,225,.1); background:transparent; color:#add1d8; text-align:left; cursor:pointer; }
.server-match-nation:hover,.server-match-nation:focus-visible,.server-match-nation.selected { outline:none; background:rgba(47,203,221,.11); box-shadow:inset 2px 0 #53e3f2; }
.server-match-nation > span:nth-child(2) { display:grid; min-width:0; gap:3px; }
.server-match-nation strong { overflow:hidden; color:#d9f4f8; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.server-match-nation small { overflow:hidden; color:#7899a1; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.server-match-nation em { margin-left:auto; color:#70b5bf; font:700 8px var(--mono); font-style:normal; }
.server-match-nation.self em { color:#52e4f0; }
.server-match-nation-status { flex:0 0 auto; width:9px; height:9px; border:1px solid #5eb6c2; border-radius:2px; }
.server-match-nation-status.ai { background:#547864; }
.server-match-nation-status.human { background:#9e86ff; border-radius:50%; }
.server-match-nation-search { display:grid; gap:5px; margin-top:13px; color:#77a7b0; font:700 9px var(--mono); letter-spacing:.08em; }
.server-match-nation-search input { min-width:0; min-height:38px; padding:8px 10px; border:1px solid rgba(72,210,232,.25); background:#081b24; color:#e3faff; font:500 12px var(--sans); }
.server-match-data-note { display:grid; gap:5px; margin-top:12px; padding:10px; border-left:2px solid #dcb454; background:rgba(75,56,20,.15); }
.server-match-data-note strong { color:#f0cb72; font:700 8px var(--mono); letter-spacing:.08em; }
.server-match-data-note p,.server-match-data-note span { margin:0; color:#829da5; font-size:10px; line-height:1.5; }
.server-match-map-panel { display:flex; flex-direction:column; min-height:0; padding:11px; }
.server-match-map-panel > header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:0 1px 12px; }
.server-match-map-panel h2 { margin:4px 0 0; color:#e4fbff; font-size:20px; }
.server-map-revision { color:#7fabb3; font:700 8px var(--mono); letter-spacing:.05em; }
.server-match-map-wrap { position:relative; flex:1 1 auto; min-height:0; overflow:hidden; border:1px solid rgba(63,197,221,.24); background:#081820; }
.server-map-startup { position:absolute; inset:0; display:grid; place-content:center; gap:8px; padding:22px; color:#a2c7cf; background:#081820; font-size:12px; text-align:center; }
.server-match-context { height:100%; min-height:0; overflow:auto; overscroll-behavior:contain; }
.server-match-context-empty { padding:18px 2px; }
.server-match-context-empty strong { display:block; margin:12px 0 8px; color:#d8f6fb; font-size:16px; }
.server-match-context-empty p { color:#809da5; font-size:11px; line-height:1.6; }
.server-match-selection { padding:15px 1px; }
.server-match-selection h3 { margin:7px 0 13px; color:#e6fbff; font-size:18px; }
.server-match-selection dl { display:grid; gap:2px; margin:0 0 14px; }
.server-match-selection dl div { display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid rgba(77,201,225,.12); }
.server-match-selection dt { color:#7397a0; font:700 9px var(--mono); letter-spacing:.04em; }
.server-match-selection dd { margin:0; color:#d5eef2; font:700 10px var(--mono); text-align:right; overflow-wrap:anywhere; }
.server-diplomacy-panel { display:grid; gap:9px; margin:12px 0 8px; padding:11px; border:1px solid rgba(76,202,220,.28); background:linear-gradient(145deg,rgba(8,31,39,.9),rgba(5,17,24,.84)); }
.server-diplomacy-panel > header { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-bottom:8px; border-bottom:1px solid rgba(77,201,225,.14); }
.server-diplomacy-panel > header strong { color:#d8f5f8; font:800 10px var(--mono); }
.server-diplomacy-target { display:grid; gap:4px; padding:8px; border-left:2px solid #4bd9e7; background:rgba(27,102,113,.12); }
.server-diplomacy-target strong { color:#e3faff; font-size:13px; }
.server-diplomacy-target span,.server-diplomacy-target small,.server-diplomacy-note,.server-diplomacy-unavailable,.server-diplomacy-pending { color:#87aeb5; font:600 9px var(--mono); line-height:1.5; }
.server-diplomacy-actions { display:grid; gap:7px; }
.server-diplomacy-actions form { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:6px; }
.server-diplomacy-actions label { display:grid; gap:4px; min-width:0; color:#7eabb4; font:700 8px var(--mono); letter-spacing:.06em; }
.server-diplomacy-actions select { width:100%; min-width:0; min-height:34px; padding:6px; border:1px solid rgba(78,194,215,.26); background:#071c25; color:#d9f6fa; font:600 10px var(--sans); }
.server-diplomacy-actions button,.server-diplomacy-offers button,.server-diplomacy-treaties button { min-height:34px; padding:6px 8px; border:1px solid rgba(82,196,216,.32); background:rgba(10,50,60,.72); color:#bdeaf0; font:800 8px var(--mono); letter-spacing:.04em; cursor:pointer; }
.server-diplomacy-actions button:hover:not(:disabled),.server-diplomacy-offers button:hover,.server-diplomacy-treaties button:hover { border-color:#63e4f2; color:#fff; }
.server-diplomacy-actions button:disabled { opacity:.48; cursor:not-allowed; }
.server-diplomacy-actions > button { border-color:rgba(230,154,92,.42); color:#e9b783; }
.server-diplomacy-note { margin:0; color:#738f97; }
.server-diplomacy-treaties,.server-diplomacy-offers ul { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.server-diplomacy-treaties li,.server-diplomacy-offers li { display:flex; align-items:center; justify-content:space-between; gap:6px; padding:6px; border:1px solid rgba(77,201,225,.12); color:#a9cbd1; font:700 8px var(--mono); }
.server-diplomacy-offers { display:grid; gap:6px; padding-top:7px; border-top:1px solid rgba(77,201,225,.14); }
.server-diplomacy-offers > strong { color:#e6c87f; font:800 8px var(--mono); letter-spacing:.06em; }
.server-diplomacy-offers li { align-items:flex-start; }
.server-diplomacy-offers li > div { display:flex; flex-wrap:wrap; gap:4px; justify-content:flex-end; }
.server-diplomacy-offers button { min-height:28px; padding:4px 6px; }
.server-diplomacy-feedback { margin:0; padding:7px; border-left:2px solid #55d9e7; background:rgba(35,112,122,.12); color:#a8dfe5; font:700 9px var(--mono); line-height:1.5; }
.server-diplomacy-feedback.rejected { border-color:#e68b75; color:#f2b4a9; }
.server-diplomacy-feedback.pending { border-color:#d5b765; color:#ead694; }
.server-coalition-panel { display:grid; gap:9px; margin:8px 0 12px; padding:11px; border:1px solid rgba(213,183,101,.25); background:linear-gradient(145deg,rgba(38,31,18,.72),rgba(5,17,24,.9)); }
.server-coalition-panel > header,.server-coalition-active { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.server-coalition-panel > header { padding-bottom:8px; border-bottom:1px solid rgba(213,183,101,.14); }
.server-coalition-panel > header strong { color:#f2dfaa; font:800 10px var(--mono); }
.server-coalition-create,.server-coalition-invite { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:7px; }
.server-coalition-create > span { min-width:0; color:#b6a779; font:700 8px var(--mono); letter-spacing:.06em; line-height:1.5; }
.server-coalition-active > div { display:grid; gap:4px; min-width:0; }
.server-coalition-active strong { color:#f2dfaa; font-size:12px; }
.server-coalition-active small,.server-coalition-invite span { color:#92aab0; font:600 8px var(--mono); line-height:1.5; }
.server-coalition-panel button { min-height:32px; padding:6px 8px; border:1px solid rgba(213,183,101,.3); background:rgba(72,57,26,.38); color:#ead694; font:800 8px var(--mono); letter-spacing:.04em; cursor:pointer; }
.server-coalition-panel button:hover:not(:disabled) { border-color:#f0d788; color:#fff5d7; }
.server-coalition-panel button:disabled { opacity:.45; cursor:not-allowed; }
.server-coalition-members,.server-coalition-outgoing { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.server-coalition-members li,.server-coalition-outgoing li { display:flex; align-items:center; justify-content:space-between; gap:7px; padding:6px; border:1px solid rgba(213,183,101,.12); color:#b7cdd0; font:700 8px var(--mono); }
.server-coalition-members small { color:#8fae9b; font:700 7px var(--mono); }
.server-coalition-invite { padding-top:7px; border-top:1px solid rgba(213,183,101,.14); }
.server-coalition-outgoing button { min-height:26px; padding:4px 6px; }
@media (max-width:520px) { .server-coalition-create,.server-coalition-invite { grid-template-columns:1fr; align-items:stretch; } .server-coalition-active { align-items:flex-start; flex-direction:column; } }
.server-match-context .primary-btn,.server-match-context .action-btn { width:100%; margin-top:8px; }
.server-match-inspector-close { display:none; min-width:32px; min-height:32px; border:1px solid rgba(83,208,224,.32); background:rgba(5,22,29,.8); color:#c5eaf0; font:700 19px var(--sans); cursor:pointer; }
.server-world-action { min-height:42px; border:1px solid rgba(132,162,168,.24) !important; background:rgba(58,73,77,.18) !important; color:#779198 !important; cursor:not-allowed !important; }
.server-command-hint { color:#f0cb72; font-size:10px; line-height:1.45; }
.server-match-refresh { width:100%; margin-top:15px; }
.server-match-world-error { display:grid; align-content:center; justify-items:start; gap:12px; min-height:60vh; max-width:720px; margin:4vh auto; padding:clamp(22px,4vw,42px); border:1px solid rgba(255,110,102,.42); background:linear-gradient(150deg,rgba(35,14,18,.96),rgba(7,17,23,.98)); }
.server-match-world-error > strong { color:#ffaaa3; font:900 clamp(18px,3vw,27px) var(--mono); letter-spacing:.08em; }
.server-match-world-error p { max-width:590px; color:#bbd0d4; font-size:13px; line-height:1.6; }
.server-match-world-error code { color:#ffd479; font:700 10px var(--mono); }
.server-match-world-error details,.server-match-context-empty details,.chronos-map-error details { color:#8fb1b8; font-size:10px; }
.server-match-world-error summary,.server-match-context-empty summary,.chronos-map-error summary { width:max-content; cursor:pointer; }
.server-match-world-error > div { display:flex; flex-wrap:wrap; gap:8px; }
.chronos-map-root {
  position:relative;
  width:100%;
  height:100%;
  min-height:0;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(ellipse at 52% 46%, rgba(19,91,113,.52) 0%, rgba(10,54,73,.42) 38%, rgba(4,25,39,.96) 100%),
    repeating-linear-gradient(14deg, rgba(107,205,221,.045) 0 1px, transparent 1px 18px),
    #061b2a;
}
.chronos-map-root::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 18% 70%, rgba(52,164,179,.17), transparent 35%),
    radial-gradient(ellipse at 82% 26%, rgba(32,117,142,.16), transparent 34%),
    linear-gradient(180deg, rgba(2,12,20,.12), rgba(1,9,15,.42));
  mix-blend-mode:screen;
}
.chronos-map-surface,.chronos-map-root .maplibregl-map { position:absolute; z-index:1; inset:0; width:100%; height:100%; min-height:0; background:transparent !important; }
.chronos-map-root .maplibregl-canvas { outline:none; }
.chronos-map-tools { position:absolute; z-index:5; top:12px; left:12px; display:grid; gap:5px; }
.chronos-map-tools button { min-width:38px; min-height:36px; padding:7px 9px; border:1px solid rgba(97,216,229,.4); background:rgba(4,17,23,.91); color:#dff9fc; font:800 9px var(--mono); letter-spacing:.04em; cursor:pointer; backdrop-filter:blur(8px); }
.chronos-map-tools button:hover,.chronos-map-tools button:focus-visible { border-color:#62eff8; outline:2px solid rgba(70,228,239,.25); color:#fff; }
.chronos-map-layer-menu { position:absolute; z-index:6; top:12px; left:60px; display:grid; gap:8px; min-width:208px; padding:12px; border:1px solid rgba(90,217,231,.35); background:rgba(4,16,22,.96); color:#d9f4f7; box-shadow:0 14px 42px rgba(0,0,0,.42); }
.chronos-map-layer-menu[hidden] { display:none; }
.chronos-map-layer-menu strong { color:#6fe4ef; font:800 9px var(--mono); letter-spacing:.1em; }
.chronos-map-layer-menu label { display:flex; align-items:center; gap:8px; min-height:25px; color:#c1dce0; font-size:11px; }
.chronos-map-layer-menu input { accent-color:#33c9d8; }
.chronos-map-layer-menu label span { margin-left:auto; color:#87969a; font-size:9px; }
.chronos-map-layer-menu label.unavailable { color:#758b90; }
.chronos-map-layer-menu label.unavailable input { opacity:.45; }
.chronos-map-layer-menu label.unavailable span { color:#d7ad5d; }
.chronos-map-legend { position:absolute; z-index:4; top:12px; right:12px; display:grid; gap:7px; max-width:196px; padding:10px 12px; border:1px solid rgba(96,209,222,.2); background:rgba(4,16,22,.88); color:#c2dce1; font:700 9px var(--sans); pointer-events:none; }
.chronos-map-legend[hidden] { display:none; }
.chronos-map-legend span { display:flex; align-items:center; gap:8px; }
.chronos-map-legend i { display:inline-block; flex:0 0 auto; width:10px; height:10px; border:1px solid rgba(255,255,255,.5); border-radius:2px; }
.chronos-map-legend i.own { background:#24c9d7; }
.chronos-map-legend i.human { border-radius:50%; background:#9e86ff; }
.chronos-map-legend i.ai { background:#547864; }
.chronos-map-legend i.capital { transform:rotate(45deg); background:#ffd36c; }
.chronos-map-legend i.settlement { width:7px; height:7px; margin:0 2px; border-radius:50%; background:#91b6be; }
.chronos-map-status { position:absolute; z-index:5; top:13px; left:50%; max-width:55%; padding:7px 11px; transform:translateX(-50%); border:1px solid rgba(78,204,219,.27); background:rgba(4,17,23,.9); color:#b7e7ec; font:700 9px var(--mono); text-align:center; pointer-events:none; }
.chronos-map-status[hidden] { display:none; }
.chronos-map-status[data-state="error"] { border-color:rgba(251,111,105,.55); color:#ffc1bb; }
.chronos-map-attribution { position:absolute; z-index:4; left:11px; bottom:8px; max-width:calc(100% - 22px); padding:5px 7px; background:rgba(3,13,18,.8); color:#a9c4c9; font:700 8px var(--mono); pointer-events:none; }
.chronos-map-error { position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:24px; background:rgba(5,15,20,.97); text-align:center; }
.chronos-map-error strong { color:#ffb2aa; font:900 18px var(--mono); }
.chronos-map-error span { max-width:500px; color:#bdd1d5; font-size:13px; line-height:1.5; }
.chronos-map-error code { color:#ffd36c; font:700 10px var(--mono); }
.chronos-map-error button { min-height:42px; padding:9px 14px; border:1px solid rgba(95,220,231,.4); background:rgba(20,67,76,.52); color:#e4fbfd; font:800 10px var(--mono); cursor:pointer; }
.chronos-map-country-labels { position:absolute; z-index:3; inset:0; overflow:hidden; pointer-events:none; }
.chronos-map-legend .terrain-unavailable { color:#bda96e; border-top:1px solid rgba(230,187,89,.22); padding-top:4px; }
.chronos-map-legend .terrain-mountain { background:#8f746d; }
.chronos-map-legend .terrain-forest { background:#2f7655; }
.chronos-map-legend .terrain-jungle { background:#1f9a68; }
.chronos-map-legend .terrain-desert { background:#c7a465; }
.chronos-map-legend .terrain-flatland { background:#6c8564; }
.chronos-map-legend .terrain-swamp { background:#4f7f76; }
.chronos-map-label { position:absolute; max-width:132px; overflow:hidden; padding:2px 4px; transform:translate(-50%,-50%); border:1px solid rgba(142,209,215,.2); border-radius:2px; background:rgba(4,17,22,.82); color:#e0f1f3; font:700 9px var(--sans); text-overflow:ellipsis; white-space:nowrap; text-shadow:0 1px #071217; }
.chronos-map-label.region { border-color:rgba(71,221,230,.24); color:#d5f3f5; font-size:8px; }
.chronos-map-label.settlement { border:0; background:rgba(3,12,16,.66); color:#ffe9b4; font-size:8px; }
.server-match-map-panel > footer,.server-match-footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-top:10px; color:#648c96; font:700 8px var(--mono); letter-spacing:.08em; }
.server-match-context .primary-btn,.server-match-context .action-btn { width:100%; margin-top:8px; }
.server-match-refresh { width:100%; margin-top:15px; }
.server-match-footer { margin-top:12px; padding:10px 0; border-top:1px solid rgba(77,201,225,.16); }
.server-match-loading { max-width:700px; margin:15vh auto; padding:28px; border:1px solid rgba(77,201,225,.24); background:rgba(5,18,25,.94); }
.server-match-loading h2 { color:#e6fbff; }
.server-match-loading p { color:#87abb3; }
.server-match-rail { display:none; }

.server-match-economy:not(.server-match-economic-jobs) { display:grid; grid-template-columns:minmax(160px,190px) minmax(0,1fr) auto; align-items:center; gap:10px; min-height:48px; padding:5px 0 8px; border-bottom:1px solid rgba(77,201,225,.15); }
.server-match-economy.is-unavailable:not(.server-match-economic-jobs) > .server-economy-heading { grid-column:1 / -1; }
.server-match-economy.is-unavailable:not(.server-match-economic-jobs) > .server-economy-gap { grid-column:1 / -1; }
.server-match-economy.is-pending:not(.server-match-economic-jobs) { grid-template-columns:minmax(0,1fr); align-items:start; }
.server-match-economy.is-pending:not(.server-match-economic-jobs) > * { grid-column:1 / -1; }
.server-match-economy.is-pending:not(.server-match-economic-jobs) > .server-economy-gap { border-left-color:rgba(77,201,225,.7); background:rgba(10,39,48,.42); }
.server-match-economy.is-pending:not(.server-match-economic-jobs) > .server-economy-gap strong { color:#8ee9f3; }
.server-economy-heading { display:grid; gap:3px; min-width:0; }
.server-economy-heading small { color:#728f97; font:700 7px var(--mono); letter-spacing:.035em; }
.server-economy-gap { display:grid; gap:4px; padding:8px 10px; border-left:2px solid rgba(241,196,95,.68); background:rgba(62,47,17,.15); }
.server-economy-gap[hidden] { display:none !important; }
.server-economy-gap strong { color:#f1cf7a; font:800 9px var(--mono); }
.server-economy-gap span { color:#b7a978; font:600 9px var(--sans); line-height:1.45; }
.server-economy-workforce { grid-column:1 / -1; color:#9bc9b4; font:700 8px var(--mono); letter-spacing:.05em; }
.server-economy-processes { grid-column:1 / -1; display:grid; gap:7px; padding-top:7px; border-top:1px solid rgba(77,201,225,.13); }
.server-economy-processes > header { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.server-economy-processes > header small { color:#6e939c; font:600 8px var(--mono); }
.server-economy-process-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:5px; }
.server-economy-process-row { min-width:0; border:1px solid rgba(77,201,225,.17); background:linear-gradient(120deg,rgba(7,28,36,.92),rgba(5,17,23,.78)); }
.server-economy-process-row.running { border-left:2px solid rgba(70,211,167,.7); }
.server-economy-process-row.stopped { border-left:2px solid rgba(232,173,84,.66); }
.server-economy-process-row summary { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:8px; padding:6px 8px; cursor:pointer; list-style:none; }
.server-economy-process-row summary::-webkit-details-marker { display:none; }
.server-economy-process-row summary > span { display:grid; gap:3px; min-width:0; }
.server-economy-process-row summary strong { overflow:hidden; color:#d6f4f5; font:700 8px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.server-economy-process-row summary small { color:#79acaa; font:600 8px var(--sans); line-height:1.35; }
.server-economy-process-row summary > b { color:#73d9c0; font:700 9px var(--mono); text-align:right; }
.server-economy-process-row.stopped summary > b { color:#e7b76e; }
.server-economy-process-detail { display:grid; gap:4px; padding:0 8px 7px; color:#91afb2; font:600 8px var(--sans); line-height:1.4; }
.server-economy-process-detail em { color:#e2b974; font-style:normal; }
.server-economy-process-empty { margin:0; padding:7px 9px; border-left:2px solid rgba(232,173,84,.55); background:rgba(62,47,17,.12); color:#b5a97c; font:600 8px var(--sans); }
.server-resource-strip { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:stretch; gap:5px; min-width:0; overflow:auto hidden; scrollbar-width:thin; scrollbar-color:#23606b #07151c; }
.server-resource-cell { display:grid; align-content:center; gap:2px; min-width:0; min-height:38px; padding:4px 7px; border:1px solid rgba(77,201,225,.16); background:rgba(5,22,29,.8); }
.server-resource-cell[hidden] { display:none; }
.server-resource-cell span { overflow:hidden; color:#7fa8b0; font:700 7px var(--mono); letter-spacing:.04em; text-overflow:ellipsis; white-space:nowrap; }
.server-resource-cell strong { overflow:hidden; color:#e0f9fc; font:700 10px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.server-resource-cell small { overflow:hidden; color:#78bd9f; font:600 7px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.server-resource-more { min-height:32px; padding:5px 8px; border:1px solid rgba(79,205,222,.24); background:rgba(5,22,29,.8); color:#91c5cd; font:700 8px var(--mono); cursor:pointer; }
.server-resource-more:hover,.server-resource-more:focus-visible { border-color:#58dfec; color:#e7fdff; }

.server-pool-browser { grid-column:1 / -1; width:100%; padding:16px; border:1px solid rgba(72,210,232,.22); background:linear-gradient(145deg,rgba(8,28,37,.94),rgba(4,15,21,.96)); }
.server-pool-browser-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.server-pool-browser-head h3 { margin:5px 0; color:#e1faff; font-size:20px; }
.server-pool-browser-head p { max-width:680px; margin:0; color:#84a7af; font-size:11px; line-height:1.5; }
.server-pool-connection { flex:0 0 auto; color:#80aab3; font:700 8px var(--mono); letter-spacing:.08em; }
.server-pool-connection.offline { color:#f1c45f; }
.server-pool-connection.offline i { background:#f1c45f; }
.server-pool-filters { display:flex; align-items:flex-end; flex-wrap:wrap; gap:10px; margin:15px 0 8px; padding:11px; border:1px solid rgba(72,210,232,.15); background:rgba(2,13,19,.54); }
.server-pool-filters label { display:grid; gap:5px; min-width:190px; color:#75a0aa; font:700 8px var(--mono); letter-spacing:.08em; }
.server-pool-filters strong { margin-left:auto; padding:10px 0; color:#50d9eb; font:700 8px var(--mono); letter-spacing:.08em; }
.server-round-card > em { color:#7ca8af; font:700 8px var(--mono); font-style:normal; line-height:1.45; }
.server-round-card.joined > em { color:#60d7a4; }
.selected-server-round { grid-column:1 / -1; padding:12px; border:1px solid rgba(72,210,232,.2); background:rgba(5,23,31,.7); }
.selected-server-round strong,.selected-server-round small { display:block; margin-top:5px; }
.selected-server-round strong { color:#e1faff; font:800 12px var(--mono); }
.selected-server-round small { color:#84a7af; font:700 9px var(--mono); }
.server-round-selection { grid-column:1 / -1; display:grid; gap:12px; min-width:0; }
.world-nation-search { display:grid; gap:5px; color:#75a0aa; font:700 8px var(--mono); letter-spacing:.08em; }
.world-nation-search input { min-width:0; min-height:40px; padding:8px 10px; border:1px solid rgba(72,210,232,.25); background:#081b24; color:#e3faff; font:500 12px var(--sans); }
.world-registry-status { color:#8db4bd; font:600 9px var(--mono); line-height:1.45; }
.world-nation-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; max-height:390px; overflow:auto; overscroll-behavior:contain; scrollbar-color:#23606b #07151c; }
.world-nation-option { display:grid; align-content:start; gap:5px; min-width:0; min-height:102px; padding:10px; border:1px solid rgba(72,210,232,.18); background:rgba(5,20,27,.82); color:#d7f3f7; text-align:left; cursor:pointer; }
.world-nation-option:hover,.world-nation-option:focus-visible,.world-nation-option.selected { outline:none; border-color:rgba(72,220,237,.76); background:rgba(15,58,69,.75); box-shadow:inset 2px 0 #48dcea; }
.world-nation-option:disabled { border-color:rgba(142,154,160,.2); background:rgba(30,38,42,.55); opacity:.62; cursor:not-allowed; }
.world-nation-option:disabled em { color:#e7bd69; }
.world-nation-option strong { overflow:hidden; color:#e9fbff; font:800 11px var(--sans); text-overflow:ellipsis; white-space:nowrap; }
.world-nation-option span,.world-nation-option small { overflow:hidden; color:#8db4bd; font:600 9px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.world-nation-option em { color:#62d9a8; font:700 7px var(--mono); font-style:normal; letter-spacing:.05em; }
.world-nation-empty,.server-world-locked { grid-column:1 / -1; margin:0; padding:14px; border:1px solid rgba(230,187,89,.27); background:rgba(62,47,17,.15); color:#dbca9a; font-size:11px; line-height:1.5; }
.world-nation-empty p { margin:0 0 9px; }
.server-world-locked strong { display:block; color:#f1cf7a; font:800 10px var(--mono); }
.server-world-locked p { margin:7px 0 0; }
.server-world-actions { display:grid; gap:6px; }
.server-world-actions .server-world-action:disabled { opacity:.52; cursor:not-allowed; }
.server-world-action-hint { margin:8px 0 0; padding:9px 10px; border-left:2px solid rgba(68,210,232,.55); background:rgba(7,28,36,.74); color:#aacbd0; line-height:1.5; }
.server-material-provenance { display:grid; gap:6px; margin:8px 0; padding:9px 10px; border:1px solid rgba(230,187,89,.34); background:rgba(34,27,12,.38); color:#d5c9a7; font-size:10px; line-height:1.5; }
.server-material-provenance > strong { color:#f0cb72; font:800 9px var(--mono); }
.server-material-provenance ol { display:grid; gap:5px; margin:0; padding-left:17px; }
.server-material-provenance li,.server-material-provenance p { overflow-wrap:anywhere; }
.server-material-provenance p { margin:0; color:#f0cb72; }
.server-unit-selection { display:grid; gap:5px; margin:12px 0; }
.server-unit-choice { display:grid; gap:3px; padding:8px; border:1px solid rgba(77,201,225,.16); background:rgba(5,22,29,.72); color:#c8e8ed; text-align:left; cursor:pointer; }
.server-unit-choice:hover,.server-unit-choice:focus-visible,.server-unit-choice.selected { outline:none; border-color:rgba(72,220,237,.72); background:rgba(16,57,67,.76); }
.server-unit-choice strong { color:#e4fbff; font:800 9px var(--mono); }
.server-unit-choice span,.server-unit-choice small { overflow-wrap:anywhere; color:#8badb5; font:600 8px var(--mono); }
.server-command-feedback { padding:10px; border:1px solid rgba(105,211,161,.3); background:rgba(30,82,58,.19); color:#9de2bb; font-size:10px; line-height:1.5; }
.server-command-feedback.rejected { border-color:rgba(246,123,115,.35); background:rgba(92,34,34,.19); color:#ffb2aa; }
.server-command-feedback.pending { border-color:rgba(245,202,101,.3); background:rgba(78,60,20,.18); color:#f0d58f; }
.server-match-command-state { grid-column:1 / -1; margin:0; padding:9px 11px; border:1px solid rgba(105,211,161,.3); background:rgba(30,82,58,.19); color:#9de2bb; font-size:10px; line-height:1.45; }
.server-match-command-state.rejected { border-color:rgba(246,123,115,.35); background:rgba(92,34,34,.19); color:#ffb2aa; }
.server-match-command-state.pending { border-color:rgba(245,202,101,.3); background:rgba(78,60,20,.18); color:#f0d58f; }
.server-match-activity { display:grid; grid-template-columns:minmax(170px,220px) minmax(0,1fr); align-items:center; gap:10px; margin-top:10px; padding:10px 12px; border:1px solid rgba(77,201,225,.18); background:rgba(4,16,22,.8); }
.server-match-activity > div { display:grid; gap:5px; }
.server-match-activity > div > small { color:#708e96; font:700 7px var(--mono); letter-spacing:.05em; }
.server-match-activity p { margin:0; color:#829fa7; font-size:10px; line-height:1.5; }
.server-match-activity ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; margin:0; padding:0; list-style:none; }
.server-match-activity li { display:grid; gap:3px; min-width:0; padding:7px; border-left:2px solid rgba(75,205,223,.4); background:rgba(7,27,35,.72); }
.server-match-event,.server-match-event-static { display:grid; width:100%; gap:4px; min-width:0; padding:2px; border:0; background:transparent; color:inherit; text-align:left; font:inherit; }
.server-match-event { cursor:pointer; }
.server-match-event:hover,.server-match-event:focus-visible { outline:2px solid rgba(72,220,237,.72); outline-offset:1px; background:rgba(16,57,67,.55); }
.server-match-event:focus:not(:focus-visible) { outline:none; }
.server-match-activity li span,.server-match-activity li small { overflow:hidden; color:#789da6; font:700 7px var(--mono); text-overflow:ellipsis; white-space:nowrap; }
.server-match-activity li strong { overflow:hidden; color:#cce9ed; font:700 8px var(--sans); text-overflow:ellipsis; white-space:nowrap; }
.server-membership-readout .server-match-open-button { width:100%; margin-top:12px; }
.preflight-match-frame .match-settings > * { grid-column:1 / -1; }
.server-match-register-card { display:grid; align-content:start; gap:11px; min-width:0; padding:14px; border:1px solid rgba(68,210,232,.24); background:linear-gradient(145deg,rgba(8,30,40,.92),rgba(4,15,21,.98)); }
.server-match-register-card.active { border-color:rgba(70,222,238,.64); box-shadow:inset 0 0 0 1px rgba(70,222,238,.12); }
.server-match-register-head { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.server-match-register-head code { color:#8bb8c1; font:700 9px var(--mono); }
.server-match-register-head > span:last-child { margin-left:auto; color:#83abb3; font:700 9px var(--mono); }
.server-match-register-copy h3 { margin:5px 0; color:#e0f8fc; font-size:16px; }
.server-match-register-copy p { margin:0; color:#86aab2; font-size:10px; line-height:1.5; }
.server-match-register-card > button { width:100%; }
.server-match-register-card.compact { min-width:260px; }

@media (max-width:1279px) and (min-width:701px) {
  .server-match-layout { position:relative; display:block; height:min(68vh,680px); min-height:450px; max-height:680px; }
  .server-match-map-panel { width:100%; height:100%; padding:10px; }
  .server-match-left { position:absolute; z-index:7; inset:0 auto 0 0; display:flex; width:58px; height:100%; padding:6px; border-color:transparent; background:transparent; }
  .server-match-left.is-expanded { width:min(292px,calc(100vw - 72px)); padding:10px; border-color:rgba(77,201,225,.35); background:rgba(5,17,24,.97); box-shadow:0 16px 46px rgba(0,0,0,.48); }
  .server-match-rail { position:absolute; inset:8px auto auto 7px; z-index:2; display:grid; gap:6px; }
  .server-match-rail button { display:grid; justify-items:center; gap:3px; min-width:42px; min-height:44px; padding:5px 3px; border:1px solid rgba(82,212,236,.34); background:rgba(4,17,23,.95); color:#d7f7fa; font:800 17px var(--sans); cursor:pointer; }
  .server-match-rail button span { color:#8bbac2; font:700 6px var(--mono); }
  .server-match-left:not(.is-expanded) > :not(.server-match-rail) { display:none; }
  .server-match-left.is-expanded > :not(.server-match-rail) { margin-left:54px; }
  .server-match-left.is-expanded > .server-match-panel-head { display:flex; }
  .server-match-left.is-expanded > .server-match-data-list { display:grid; }
  .server-match-left.is-expanded > .server-match-nation-search { display:grid; }
  .server-match-left.is-expanded > .server-match-player-list { display:grid; }
  .server-match-left.is-expanded > .server-match-data-note { display:grid; }
  .server-match-player-list { min-height:0; }
  .world-nation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-height:38svh; }
  .server-match-context { position:absolute; z-index:8; top:0; right:0; display:none; width:min(340px,calc(100vw - 72px)); height:100%; padding:14px; border-color:rgba(77,201,225,.42); background:rgba(5,17,24,.97); box-shadow:0 16px 46px rgba(0,0,0,.48); }
  .server-match-context.is-open { display:block; }
  .server-match-inspector-close { display:inline-grid; place-items:center; }
  .server-match-economy:not(.server-match-economic-jobs) { grid-template-columns:minmax(135px,160px) minmax(0,1fr) auto; }
  .server-resource-strip { display:flex; }
  .server-resource-cell { flex:0 0 120px; }
  .server-match-overview { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:1200px) {
  body.server-match-active { width:100%; min-width:0; }
  body.server-match-active #game-shell,body.server-match-active #server-match-screen { width:100%; min-width:0; }
}
@media (min-width:1051px) and (max-width:1350px) {
  .server-match-topbar { grid-template-columns:minmax(180px,230px) minmax(0,1fr); grid-template-rows:auto auto; gap:8px 10px; padding:7px 0; }
  .server-match-world-clock { grid-column:2; grid-row:1; }
  .server-match-topbar nav { grid-column:1 / -1; grid-row:2; justify-content:flex-start; min-width:0; }
}
@media (max-width:1050px) {
  .server-match-topbar { grid-template-columns:minmax(180px,230px) minmax(0,1fr); gap:10px; padding:7px 0; }
  .server-match-world-clock { grid-column:2; grid-row:1; }
  .server-match-topbar nav { grid-column:1 / -1; justify-content:flex-start; }
  .server-match-overview { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .server-match-economy:not(.server-match-economic-jobs) { grid-template-columns:minmax(135px,160px) minmax(0,1fr) auto; }
}
@media (max-width:700px) {
  body.server-match-active { width:100%; min-width:0; }
  body.server-match-active #game-shell,body.server-match-active #server-match-screen { width:100%; min-width:0; }
  body.server-match-active .server-match-layout,body.server-match-active .server-match-map-panel { width:100%; min-width:0; }
  body.server-match-active #server-match-screen { padding:0 9px 16px; }
  .server-match-topbar { grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); grid-template-rows:auto auto; align-items:center; gap:5px 7px; min-height:0; padding:7px 0; }
  .server-match-brand { grid-column:1; grid-row:1; min-width:0; gap:8px; }
  .server-match-brand .brand-mark { width:31px; height:31px; }
  .server-match-brand .section-kicker { font-size:7px; }
  .server-match-brand strong { max-width:170px; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
  .server-match-world-clock { grid-column:2; grid-row:1; grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:3px 0 3px 8px; border-right:0; border-left:1px solid rgba(80,208,232,.2); background:transparent; }
  .server-match-world-clock span { font-size:6px; letter-spacing:.045em; }
  .server-match-world-clock strong { font-size:9px; line-height:1.25; }
  .server-match-world-clock small { font-size:6px; line-height:1.25; }
  .server-match-topbar nav { grid-column:1 / -1; grid-row:2; flex-wrap:nowrap; min-width:0; justify-content:flex-start; gap:4px; overflow-x:auto; overflow-y:hidden; }
  .server-match-topbar nav button { flex:0 0 auto; min-height:36px; padding:6px; font-size:7px; white-space:nowrap; }
  .server-match-mobile-panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:7px 0; }
  .server-match-mobile-panels button { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; min-height:42px; padding:8px 10px; border:1px solid rgba(82,212,236,.32); background:rgba(5,23,31,.92); color:#d5f5f8; font:800 9px var(--mono); letter-spacing:.06em; cursor:pointer; }
  .server-match-mobile-panels button[aria-expanded="true"] { border-color:#55dfeb; background:rgba(16,59,69,.95); }
  .server-match-mobile-panels button span { overflow:hidden; color:#83bdc6; font:700 8px var(--sans); text-overflow:ellipsis; white-space:nowrap; }
  .server-match-layout { position:static; display:grid; grid-template-areas:"map"; grid-template-columns:minmax(0,1fr); gap:8px; height:auto; min-height:0; max-height:none; }
  .server-match-map-panel { grid-area:map; min-width:0; padding:8px; }
  .server-match-left,.server-match-left.is-expanded { position:fixed; z-index:30; inset:auto 9px 9px; display:flex; width:auto; height:min(64svh,540px); max-height:64svh; padding:11px; border-color:rgba(77,201,225,.42); background:rgba(5,17,24,.98); overflow:hidden; box-shadow:0 16px 46px rgba(0,0,0,.55); }
  .server-match-left:not(.is-expanded) { display:none; }
  .server-match-rail { display:none; }
  .server-match-left.is-expanded > .server-match-panel-head,.server-match-left.is-expanded > .server-match-data-list,.server-match-left.is-expanded > .server-match-nation-search,.server-match-left.is-expanded > .server-match-player-list { display:grid; }
  .server-match-left.is-expanded > .server-match-panel-head { display:flex; }
  .server-match-left.is-expanded > .server-match-data-note { display:none; }
  .server-match-left.is-expanded .server-match-player-list { flex:1 1 auto; min-height:100px; max-height:none; }
  .server-match-context { position:fixed; z-index:31; inset:auto 9px 9px; display:none; width:auto; height:auto; max-height:42svh; padding:11px; border-color:rgba(75,208,224,.48); background:rgba(5,17,24,.98); overflow:auto; box-shadow:0 -8px 32px rgba(1,8,12,.58); }
  .server-match-context.is-open { display:block; }
  .server-match-inspector-close { display:inline-grid; place-items:center; }
  .server-match-map-wrap { flex:none; width:100%; max-width:100%; min-width:0; height:64svh; min-height:440px; max-height:680px; }
  .server-match-economy:not(.server-match-economic-jobs) { grid-template-columns:minmax(0,1fr) auto; gap:6px; padding:8px 0; }
  .server-economy-heading { grid-column:1 / -1; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:8px; }
  .server-economy-heading small { text-align:right; }
  .server-resource-strip { grid-column:1 / -1; display:flex; gap:6px; }
  .server-resource-cell { flex:0 0 126px; min-height:42px; }
  .server-resource-more { grid-column:1 / -1; justify-self:start; }
  .server-match-map-panel > header { align-items:flex-start; padding-bottom:7px; }
  .server-match-map-panel h2 { font-size:15px; }
  .server-map-revision { padding-top:5px; font-size:7px; }
  .chronos-map-tools { top:8px; left:8px; gap:4px; }
  .chronos-map-tools button { min-width:44px; min-height:44px; padding:7px; }
  .chronos-map-tools button[data-map-action="projection"],.chronos-map-tools button[data-map-action="layers"],.chronos-map-tools button[data-map-action="legend"] { min-width:76px; }
  .chronos-map-layer-menu { top:8px; left:62px; min-width:190px; }
  .chronos-map-legend { top:auto; right:8px; bottom:36px; gap:5px; max-width:152px; padding:7px 8px; font-size:8px; }
  .chronos-map-status { top:8px; left:auto; right:8px; max-width:45%; transform:none; font-size:8px; }
  .chronos-map-attribution { bottom:6px; left:7px; max-width:calc(100% - 14px); font-size:7px; }
  .server-match-player-list { max-height:29svh; }
  .world-nation-grid { grid-template-columns:minmax(0,1fr); max-height:38svh; }
  .server-match-activity { grid-template-columns:minmax(0,1fr); }
  .server-match-activity ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .server-match-nation { min-height:44px; }
  .server-match-nation strong { font-size:12px; }
  .server-match-nation small { font-size:11px; }
  .server-match-context-empty { padding:8px 2px; }
  .server-match-context-empty strong { margin:5px 0; font-size:14px; }
  .server-match-selection { padding:8px 1px; }
  .server-match-selection h3 { margin:5px 0 8px; font-size:16px; }
  .server-world-action { min-height:44px; }
  .server-match-footer { display:grid; gap:5px; }
  .server-match-overview { gap:6px; padding:10px 0; }
  .server-match-overview > div { padding:9px; }
  .server-match-overview strong { font-size:12px; }
  .server-match-overview span,.server-match-overview small { font-size:7px; }
  .server-match-data-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .server-match-data-note { display:none; }
  .server-match-world-error { min-height:60svh; margin:4vh auto; }
  .server-pool-browser { padding:11px; }
  .server-pool-browser-head { flex-direction:column; }
  .server-pool-filters label { min-width:100%; }
  .server-pool-filters strong { margin-left:0; }
}

@media (min-width: 1101px) and (max-height: 900px) {
  body[data-app-view="home"] .public-hero { min-height: calc(100svh - 78px); }
  body[data-app-view="home"] .public-hero-content { padding-block: 24px; }
  body[data-app-view="home"] .public-hero h1 { font-size: clamp(48px, min(6.4vw, 8.2vh), 96px); }
  body[data-app-view="home"] .public-hero-proof { margin-top: 26px; }
  body[data-app-view="home"] .public-horizon-rail { margin-top: 18px; }
}

/* Active server-match typography and compact, always-visible material HUD. */
body.server-match-active #server-match-screen {
  font-family:var(--chronos-font-ui,Inter,"Segoe UI",Arial,sans-serif);
  font-size:13px;
  line-height:1.35;
}
body.server-match-active #server-match-screen .section-kicker,
body.server-match-active #server-match-screen .server-match-stock-heading,
body.server-match-active #server-match-screen .server-match-overview span,
body.server-match-active #server-match-screen .server-match-overview small,
body.server-match-active #server-match-screen .server-match-world-clock span,
body.server-match-active #server-match-screen .server-match-world-clock small,
body.server-match-active #server-match-screen .server-economy-tabs button,
body.server-match-active #server-match-screen .server-economy-workspace-balance,
body.server-match-active #server-match-screen .server-economy-expand {
  font-family:var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
}
body.server-match-active #server-match-screen .server-match-stock-strip {
  display:flex;
  flex:0 0 42px;
  align-items:center;
  gap:8px;
  min-width:0;
  height:42px;
  margin:0 0 5px;
  padding:3px 7px;
  border:1px solid rgba(77,201,225,.2);
  background:rgba(5,22,30,.9);
  overflow:hidden;
}
body.server-match-active #server-match-screen .server-match-stock-heading {
  flex:0 0 auto;
  color:#72c9d3;
  font-size:10px;
  letter-spacing:.06em;
}
body.server-match-active #server-match-screen .server-match-stock-list {
  display:flex;
  flex:1 1 auto;
  align-items:center;
  gap:5px;
  min-width:0;
  height:100%;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
}
body.server-match-active #server-match-screen .server-match-stock-item {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  min-width:0;
  max-width:190px;
  height:32px;
  padding:3px 7px;
  border:1px solid rgba(77,201,225,.13);
  background:rgba(7,31,40,.74);
}
body.server-match-active #server-match-screen .server-match-stock-item span {
  overflow:hidden;
  color:#9abdc3;
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.server-match-active #server-match-screen .server-match-stock-item strong {
  color:#d9f4ea;
  font:700 12px/1.2 var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
  white-space:nowrap;
}
body.server-match-active #server-match-screen .server-match-stock-empty {
  color:#a9c5ca;
  font-size:11px;
}
body.server-match-active #server-match-screen .server-match-stock-warning {
  flex:0 0 auto;
  color:#f0cb72;
  font-size:10px;
  white-space:nowrap;
}
body.server-match-active #server-match-screen .server-match-stock-more {
  flex:0 0 auto;
  padding:5px 7px;
  color:#80cad2;
  font:700 11px/1.2 var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
}
body.server-match-active #server-match-screen .server-match-stock-strip > button {
  flex:0 0 auto;
  min-width:48px;
  min-height:34px;
  padding:5px 8px;
  border:1px solid rgba(77,201,225,.32);
  background:rgba(10,49,59,.8);
  color:#b8e9ee;
  font:700 10px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
  cursor:pointer;
}
body.server-match-active #server-match-screen .server-match-stock-status {
  flex:0 0 auto;
  max-width:170px;
  color:#8abcc5;
  font:600 10px/1.25 var(--sans);
}
body.server-match-active #server-match-screen .server-match-stock-item.is-empty {
  opacity:.66;
}
body.server-match-active #server-match-screen > .server-territory-alert {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  margin:0 0 5px;
  padding:7px 10px;
  border:1px solid rgba(234,113,79,.65);
  background:rgba(60,23,24,.92);
  color:#f4cfbc;
  font:600 11px/1.3 var(--sans);
}
.server-territory-alert > div { display:grid; gap:3px; min-width:0; }
.server-territory-alert strong { color:#ffb899; font:800 11px var(--mono); }
.server-territory-alert details { position:relative; flex:0 0 auto; max-width:45%; }
.server-territory-alert summary { padding:5px; color:#ffd5b9; cursor:pointer; }
.server-territory-alert details > div {
  position:absolute;
  z-index:15;
  top:100%;
  right:0;
  display:grid;
  width:min(340px,80vw);
  max-height:210px;
  gap:4px;
  padding:8px;
  border:1px solid #99604c;
  background:#171d24;
  overflow:auto;
  box-shadow:0 10px 30px #000a;
}
.server-territory-alert button {
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px;
  border:1px solid #735549;
  background:#283137;
  color:#f4d6c2;
  text-align:left;
  cursor:pointer;
}
.server-territory-alert button small { color:#b7ced2; }
@media (max-width:800px) {
  body.server-match-active #server-match-screen .server-match-stock-status { display:none; }
  body.server-match-active #server-match-screen > .server-territory-alert { gap:5px; padding:5px 7px; font-size:10px; }
  .server-territory-alert details { max-width:40%; }
  .server-territory-alert summary { font-size:10px; }
  .server-territory-alert strong { font-size:10px; }
  .server-match-mobile-panels { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
body.server-match-active #server-match-screen .server-match-topbar nav button,
body.server-match-active #server-match-screen .server-match-mobile-panels button,
body.server-match-active #server-match-screen .server-match-nation-search,
body.server-match-active #server-match-screen .server-match-panel-head,
body.server-match-active #server-match-screen .server-economy-workspace-heading,
body.server-match-active #server-match-screen .server-economy-panel,
body.server-match-active #server-match-screen .server-economy-definition,
body.server-match-active #server-match-screen .server-economy-job,
body.server-match-active #server-match-screen .server-economy-store,
body.server-match-active #server-match-screen .server-economy-action-form,
body.server-match-active #server-match-screen .server-economy-command-feedback {
  font-family:var(--chronos-font-ui,Inter,"Segoe UI",Arial,sans-serif);
}
body.server-match-active #server-match-screen .server-match-topbar nav button,
body.server-match-active #server-match-screen .server-match-mobile-panels button,
body.server-match-active #server-match-screen .server-economy-tabs button,
body.server-match-active #server-match-screen .server-economy-expand,
body.server-match-active #server-match-screen .server-economy-action-form > button,
body.server-match-active #server-match-screen .server-economy-job-controls button {
  min-height:40px;
  font-size:11px;
}
body.server-match-active #server-match-screen .server-match-overview span,
body.server-match-active #server-match-screen .server-match-overview small,
body.server-match-active #server-match-screen .server-match-world-clock span,
body.server-match-active #server-match-screen .server-match-world-clock small,
body.server-match-active #server-match-screen .server-map-revision,
body.server-match-active #server-match-screen .server-economy-technical,
body.server-match-active #server-match-screen .server-economy-profile > small,
body.server-match-active #server-match-screen .server-economy-definition > header small,
body.server-match-active #server-match-screen .server-economy-definition-meta,
body.server-match-active #server-match-screen .server-economy-definition-costs,
body.server-match-active #server-match-screen .server-economy-site-gates,
body.server-match-active #server-match-screen .server-economy-transport-route small,
body.server-match-active #server-match-screen .server-economy-transport-cargo small,
body.server-match-active #server-match-screen .server-economy-empty,
body.server-match-active #server-match-screen .server-economy-confirmed-note {
  font-size:10px;
}
body.server-match-active #server-match-screen .server-match-overview strong { font-size:14px; }
body.server-match-active #server-match-screen .server-economy-workspace-heading > div > strong,
body.server-match-active #server-match-screen .server-economy-panel h3,
body.server-match-active #server-match-screen .server-economy-definition > header strong,
body.server-match-active #server-match-screen .server-economy-job > header strong { font-size:13px; }
body.server-match-active #server-match-screen .server-economy-panel p,
body.server-match-active #server-match-screen .server-economy-panel li,
body.server-match-active #server-match-screen .server-economy-panel label,
body.server-match-active #server-match-screen .server-economy-action-form > label,
body.server-match-active #server-match-screen .server-economy-definition-costs > summary,
body.server-match-active #server-match-screen .server-economy-site-gates > summary,
body.server-match-active #server-match-screen .server-economy-definition > header em,
body.server-match-active #server-match-screen .server-economy-job-reason { font-size:12px; }
body.server-match-active #server-match-screen .server-economy-action-form select,
body.server-match-active #server-match-screen .server-economy-action-form input {
  min-height:42px;
  font-family:var(--chronos-font-ui,Inter,"Segoe UI",Arial,sans-serif);
  font-size:13px;
}
body.server-match-active #server-match-screen .server-economy-transport-cargo > label { min-height:112px; font-size:12px; }
body.server-match-active #server-match-screen .server-economy-transport-cargo > label input { min-height:42px; font-size:13px; }
body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-economic-jobs {
  flex:0 1 clamp(280px,min(53vh,calc(100dvh - 420px)),500px);
  min-height:280px;
  max-height:min(61vh,calc(100dvh - 340px));
}

@media (max-width:700px) {
  body.server-match-active #server-match-screen > .server-match-topbar {
    grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
    grid-template-rows:38px 34px;
    gap:2px 6px;
    min-height:74px;
    padding:2px 0;
  }
  body.server-match-active #server-match-screen .server-match-brand { gap:6px; }
  body.server-match-active #server-match-screen .server-match-brand .brand-mark { width:30px; height:30px; font-size:12px; }
  body.server-match-active #server-match-screen .server-match-brand .section-kicker { font-size:10px; letter-spacing:.02em; }
  body.server-match-active #server-match-screen .server-match-brand strong { max-width:128px; margin-top:1px; font-size:11px; }
  body.server-match-active #server-match-screen .server-match-world-clock { grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:4px; padding:2px 0 2px 6px; }
  body.server-match-active #server-match-screen .server-match-world-clock > div { overflow:hidden; }
  body.server-match-active #server-match-screen .server-match-world-clock span,
  body.server-match-active #server-match-screen .server-match-world-clock small { overflow:hidden; font-size:10px; letter-spacing:0; text-overflow:ellipsis; white-space:nowrap; }
  body.server-match-active #server-match-screen .server-match-world-clock strong { overflow:hidden; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
  body.server-match-active #server-match-screen .server-match-topbar nav { grid-column:1 / -1; grid-row:2; gap:4px; }
  body.server-match-active #server-match-screen .server-match-topbar nav button { min-height:32px; padding:4px 7px; font-size:10px; }
  body.server-match-active #server-match-screen > .server-match-overview {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,48px);
    gap:4px;
    padding:4px 0;
  }
  body.server-match-active #server-match-screen .server-match-overview > div {
    display:grid;
    grid-template-rows:10px 16px 12px;
    align-content:center;
    min-height:48px;
    padding:3px 6px;
  }
  body.server-match-active #server-match-screen .server-match-overview span,
  body.server-match-active #server-match-screen .server-match-overview small {
    overflow:hidden;
    font-size:10px;
    line-height:1;
    letter-spacing:.02em;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.server-match-active #server-match-screen .server-match-overview strong { overflow:hidden; margin:0; font-size:12px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
  body.server-match-active #server-match-screen > .server-match-mobile-panels { gap:5px; margin:2px 0 4px; }
  body.server-match-active #server-match-screen .server-match-mobile-panels button { min-height:38px; padding:5px 8px; font-size:11px; }
  body.server-match-active #server-match-screen .server-match-mobile-panels button span { font-size:10px; }
  body.server-match-active #server-match-screen > .server-match-stock-strip { flex-basis:42px; height:42px; gap:6px; margin-bottom:4px; padding:3px 5px; }
  body.server-match-active #server-match-screen .server-match-stock-heading { font-size:9px; }
  body.server-match-active #server-match-screen .server-match-stock-item { max-width:160px; height:32px; gap:5px; padding:3px 6px; }
  body.server-match-active #server-match-screen .server-match-stock-item span { font-size:10px; }
  body.server-match-active #server-match-screen .server-match-stock-item strong { font-size:11px; }
  body.server-match-active #server-match-screen .server-match-stock-strip > button { min-height:34px; min-width:44px; padding:4px 6px; font-size:10px; }
  body.server-match-active #server-match-screen > .server-match-layout { flex:1 1 auto; min-height:330px; }
  body.server-match-active #server-match-screen .server-match-map-panel { min-height:0; padding:5px; }
  body.server-match-active #server-match-screen .server-match-map-wrap { flex:1 1 auto; height:auto; min-height:260px; }
  body.server-match-active #server-match-screen > .server-match-economic-jobs {
    flex:0 0 205px;
    min-height:205px;
    max-height:205px;
    margin-top:5px;
    padding:5px;
  }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-layout { flex-basis:170px; min-height:170px; }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] .server-match-map-wrap { min-height:100px; }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-economic-jobs {
    flex:0 1 clamp(310px,min(48svh,calc(100svh - 455px)),405px);
    min-height:310px;
    max-height:min(50svh,405px);
  }
  body.server-match-active #server-match-screen .server-economy-workspace-heading { min-height:30px; padding-bottom:4px; }
  body.server-match-active #server-match-screen .server-economy-workspace-heading .section-kicker { font-size:10px; }
  body.server-match-active #server-match-screen .server-economy-workspace-heading > div > strong { font-size:12px; }
  body.server-match-active #server-match-screen .server-economy-workspace-balance { max-width:42%; overflow:hidden; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
  body.server-match-active #server-match-screen .server-economy-expand { min-height:36px; padding:4px 7px; font-size:10px; }
  body.server-match-active #server-match-screen .server-economy-tabs { gap:3px; padding-bottom:4px; }
  body.server-match-active #server-match-screen .server-economy-tabs button { min-height:36px; padding:4px 7px; font-size:10px; }
  body.server-match-active #server-match-screen .server-economy-panel { padding:2px 1px 7px; }
  body.server-match-active #server-match-screen .server-economy-panel h3 { font-size:13px; }
  body.server-match-active #server-match-screen .server-economy-overview .server-economy-finance { grid-template-columns:minmax(0,1fr); }
  body.server-match-active #server-match-screen .server-economy-overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.server-match-active #server-match-screen .server-economy-overview-stats span,
  body.server-match-active #server-match-screen .server-economy-confirmed-note { font-size:11px; }
  body.server-match-active #server-match-screen .server-economy-action-form select,
  body.server-match-active #server-match-screen .server-economy-action-form input { min-height:42px; font-size:13px; }
  body.server-match-active #server-match-screen .server-economy-transport-cargo > label { min-height:100px; padding:7px; font-size:12px; }
  body.server-match-active #server-match-screen .server-economy-transport-cargo > label small { min-height:34px; font-size:10px; }
  body.server-match-active #server-match-screen .server-economy-transport-cargo > label input { min-height:42px; font-size:13px; }
  body.server-match-active #server-match-screen > .server-match-footer { display:none; }
}

/* The gameplay renderer owns these public scene surfaces after the first
   authored 3D frame. Keep briefing HUD chrome above it, never over the model. */
body[data-app-view="home"] .public-economy-map.is-asset-pipeline-live .public-economy-webgl,
body[data-app-view="home"] .public-battle-stage.is-asset-pipeline-live .public-battle-webgl {
  z-index: 2 !important;
}

body[data-app-view="home"] .public-economy-map.is-asset-pipeline-live .public-economy-overlay,
body[data-app-view="home"] .public-battle-stage.is-asset-pipeline-live .public-battle-overlay {
  z-index: 4;
}

body[data-app-view="home"] .public-battle-stage.is-asset-pipeline-live .battle-command-bar {
  z-index: 5;
}

body[data-app-view="home"] .public-economy-map.is-asset-pipeline-live::before,
body[data-app-view="home"] .public-economy-map.is-asset-pipeline-live::after,
body[data-app-view="home"] .public-battle-stage.is-asset-pipeline-live::before,
body[data-app-view="home"] .public-battle-stage.is-asset-pipeline-live::after {
  z-index: 1;
  opacity: .16;
}

/* These images are loading/compatibility fallbacks only. A successful scene
   frame replaces them with the same authored terrain and GLB assets as play. */
body[data-app-view="home"] .public-cinematic-plate {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.012);
  filter: saturate(.88) contrast(1.055) brightness(.92);
  transition: transform 1.2s ease, filter 1.2s ease;
}

body[data-app-view="home"] .public-economy-map.has-cinematic-plate .public-economy-webgl,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate .public-battle-webgl {
  visibility: hidden !important;
  opacity: 0 !important;
}

body[data-app-view="home"] .public-economy-map.has-visible-scene-frame .public-economy-webgl,
body[data-app-view="home"] .public-battle-stage.has-visible-scene-frame .public-battle-webgl {
  visibility: visible !important;
  opacity: 1 !important;
  filter: none !important;
}

body[data-app-view="home"] .public-economy-map.has-visible-scene-frame .public-cinematic-plate,
body[data-app-view="home"] .public-battle-stage.has-visible-scene-frame .public-cinematic-plate {
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Never reveal the retired CSS diagram above either the gameplay scene or its
   authored image fallback. */
body[data-app-view="home"] .public-economy-map.has-cinematic-plate .public-scene-fallback,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate .public-scene-fallback {
  visibility: hidden !important;
  opacity: 0 !important;
}

body[data-app-view="home"] .public-economy-map.has-cinematic-plate::before,
body[data-app-view="home"] .public-economy-map.has-cinematic-plate::after,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate::before,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate::after {
  z-index: 3;
  opacity: 1;
  clip-path: none;
  border: 0;
  background: linear-gradient(180deg, rgba(2, 8, 13, .18) 0%, transparent 28%, transparent 62%, rgba(2, 8, 13, .7) 100%);
}

body[data-app-view="home"] .public-economy-map.has-cinematic-plate .public-economy-overlay,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate .public-battle-overlay {
  z-index: 4;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .82);
}

body[data-app-view="home"] .public-economy-map.has-cinematic-plate .public-economy-sweep,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate .public-battle-scanline {
  display: none !important;
}

body[data-app-view="home"] .public-economy-map.has-cinematic-plate .public-economy-readout,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate .public-battle-pipeline {
  color: rgba(211, 236, 227, .82);
}

body[data-app-view="home"] .public-economy-map.has-cinematic-plate .public-economy-legend,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate .public-battle-compass {
  background: rgba(3, 12, 15, .72);
  border-color: rgba(196, 223, 210, .28);
  box-shadow: none;
}

body[data-app-view="home"] .public-economy-hud,
body[data-app-view="home"] .public-battle-unit-tag,
body[data-app-view="home"] .public-battle-target,
body[data-app-view="home"] .public-battle-order-feed {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  font: 800 9px/1.1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-app-view="home"] .public-economy-hud {
  inset: 0;
}

body[data-app-view="home"] .public-economy-node,
body[data-app-view="home"] .public-battle-unit-tag,
body[data-app-view="home"] .public-battle-target,
body[data-app-view="home"] .public-battle-order-feed {
  border: 1px solid rgba(117, 231, 255, .44);
  background: linear-gradient(135deg, rgba(2, 12, 17, .92), rgba(5, 26, 30, .76));
  color: #e7fbff;
  box-shadow: 0 0 26px rgba(63, 225, 255, .12), inset 0 0 0 1px rgba(255, 255, 255, .03);
}

body[data-app-view="home"] .public-economy-node {
  position: absolute;
  min-width: 82px;
  padding: 8px 10px 7px;
}

body[data-app-view="home"] .public-economy-node b,
body[data-app-view="home"] .public-battle-unit-tag b,
body[data-app-view="home"] .public-battle-target b,
body[data-app-view="home"] .public-battle-order-feed b {
  display: block;
  font-size: 10px;
}

body[data-app-view="home"] .public-economy-node small,
body[data-app-view="home"] .public-battle-unit-tag small,
body[data-app-view="home"] .public-battle-target small,
body[data-app-view="home"] .public-battle-order-feed small {
  display: block;
  margin-top: 4px;
  color: rgba(216, 238, 231, .72);
  font-size: 7px;
}

body[data-app-view="home"] .public-economy-node::before,
body[data-app-view="home"] .public-battle-unit-tag::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 50%;
  width: 8px;
  height: 8px;
  border: 1px solid currentColor;
  background: rgba(3, 15, 18, .92);
  transform: translateY(-50%) rotate(45deg);
}

body[data-app-view="home"] .public-derived-scene--economy-extraction .public-extraction-overlay {
  position: absolute;
  z-index: 5;
  inset: 0;
  pointer-events: none;
  font: 800 9px/1.1 ui-monospace, Consolas, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

body[data-app-view="home"] .public-derived-scene--economy-extraction .node-mine { left: 9%; top: 48%; color: #ffda7b; }
body[data-app-view="home"] .public-derived-scene--economy-extraction .node-rail { left: 57%; top: 69%; }
body[data-app-view="home"] .public-derived-scene--economy-extraction .node-plant { left: 65%; top: 24%; color: #9af7d5; }
body[data-app-view="home"] .public-derived-scene--economy-extraction[data-public-region-mode="baltic"] .node-mine { left: 18%; top: 40%; }
body[data-app-view="home"] .public-derived-scene--economy-extraction[data-public-region-mode="baltic"] .node-rail { left: 21%; top: 72%; }
body[data-app-view="home"] .public-derived-scene--economy-extraction[data-public-region-mode="baltic"] .node-plant { left: 6%; top: 19%; }
body[data-app-view="home"] .public-derived-scene--economy-extraction[data-public-region-mode="anatolia"] .node-mine { left: 8%; top: 40%; }
body[data-app-view="home"] .public-derived-scene--economy-extraction[data-public-region-mode="anatolia"] .node-rail { left: 60%; top: 60%; }
body[data-app-view="home"] .public-derived-scene--economy-extraction[data-public-region-mode="anatolia"] .node-plant { left: 65%; top: 23%; }
body[data-app-view="home"] .public-economy-map .public-economy-node.node-plant { right: 13%; top: 20%; color: #9af7d5; }
body[data-app-view="home"] .public-economy-map[data-public-region-mode="baltic"] .node-plant { right: 8%; top: 34%; }
body[data-app-view="home"] .public-economy-map[data-public-region-mode="anatolia"] .node-plant { right: 12%; top: 28%; }

body[data-app-view="home"] .public-battle-unit-tag {
  padding: 7px 9px 6px;
}

body[data-app-view="home"] .public-battle-unit-tag.unit-vanguard { left: 22%; bottom: 22%; }
body[data-app-view="home"] .public-battle-unit-tag.unit-support { left: 38%; bottom: 28%; color: #ffda7b; }

body[data-app-view="home"] .public-battle-target-main {
  right: 17%;
  top: 23%;
  padding: 8px 11px 7px 38px;
  border-color: rgba(255, 209, 110, .62);
  color: #ffda7b;
}

body[data-app-view="home"] .public-battle-target-main::before,
body[data-app-view="home"] .public-battle-target-main::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 17px;
  height: 17px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transform: translateY(-50%);
}

body[data-app-view="home"] .public-battle-target-main::after {
  width: 31px;
  height: 31px;
  left: 3px;
  opacity: .38;
  animation: chronos-reticle-ping 1.7s ease-out infinite;
}

body[data-app-view="home"] .public-battle-order-feed {
  left: 18px;
  bottom: 66px;
  width: min(320px, calc(100% - 36px));
  padding: 9px 12px;
  border-left: 2px solid #ffda7b;
}

body[data-app-view="home"] .public-battle-stage[data-public-battle-mode="attack"] .public-battle-target-main {
  right: 12%;
  top: 18%;
  border-color: rgba(255, 88, 91, .72);
  color: #ff6d69;
  box-shadow: 0 0 34px rgba(255, 76, 71, .22), inset 0 0 0 1px rgba(255, 255, 255, .04);
}

body[data-app-view="home"] .public-battle-stage[data-public-battle-mode="attack"] .public-battle-order-feed {
  border-left-color: #ff6d69;
}

body[data-app-view="home"] .public-battle-stage[data-public-battle-mode="attack"] .unit-vanguard { left: 17%; bottom: 18%; }
body[data-app-view="home"] .public-battle-stage[data-public-battle-mode="attack"] .unit-support { left: 41%; bottom: 15%; }

@keyframes chronos-reticle-ping {
  0% { transform: translateY(-50%) scale(.78); opacity: .56; }
  70% { transform: translateY(-50%) scale(1.22); opacity: .08; }
  100% { transform: translateY(-50%) scale(1.34); opacity: 0; }
}

body[data-app-view="home"] .public-progression-grid {
  align-items: center;
}

body[data-app-view="home"] .public-general-board {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  padding: clamp(16px, 2vw, 24px);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid rgba(114, 232, 255, .2);
  background:
    radial-gradient(circle at 52% 36%, rgba(114, 232, 255, .1), transparent 44%),
    radial-gradient(circle at 12% 94%, rgba(255, 200, 87, .08), transparent 32%),
    linear-gradient(145deg, rgba(7, 23, 32, .96), rgba(2, 9, 14, .98));
}

body[data-app-view="home"] .public-general-board-head,
body[data-app-view="home"] .public-general-board-foot,
body[data-app-view="home"] .public-general-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

body[data-app-view="home"] .public-general-board-head {
  color: rgba(198, 225, 228, .66);
  font: 700 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .13em;
}

body[data-app-view="home"] .public-general-board-head span:first-child,
body[data-app-view="home"] .public-general-flow span {
  color: var(--chronos-cyan);
}

body[data-app-view="home"] .public-general-roster {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  min-height: 0;
}

body[data-app-view="home"] .public-general-card {
  grid-column: span 2;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(143, 211, 224, .2);
  background: rgba(3, 12, 18, .78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

body[data-app-view="home"] .public-general-card:nth-child(4) {
  grid-column: 2 / span 2;
}

body[data-app-view="home"] .public-general-card:nth-child(5) {
  grid-column: 4 / span 2;
}

body[data-app-view="home"] .public-general-portrait {
  position: relative;
  aspect-ratio: 1.85;
  overflow: hidden;
  background: #07131b;
}

body[data-app-view="home"] .public-general-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 34%;
  filter: saturate(.8) contrast(1.06) brightness(.82);
}

body[data-app-view="home"] .public-general-portrait::after {
  content: "";
  position: absolute;
  inset: 30% 0 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(3, 12, 18, .82));
}

body[data-app-view="home"] .public-general-portrait span {
  position: absolute;
  z-index: 1;
  left: 9px;
  bottom: 8px;
  color: var(--chronos-cyan);
  font: 700 7px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .12em;
  text-shadow: 0 1px 8px #000;
}

body[data-app-view="home"] .public-general-card-copy {
  display: grid;
  gap: 5px;
  padding: 10px 11px 12px;
}

body[data-app-view="home"] .public-general-card-copy strong {
  color: #e7f5f5;
  font-size: 13px;
  line-height: 1.1;
}

body[data-app-view="home"] .public-general-card-copy small {
  color: var(--chronos-amber);
  font: 700 7px/1.25 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

body[data-app-view="home"] .public-general-card-copy p {
  margin: 0;
  color: rgba(199, 221, 223, .68);
  font-size: 9px;
  line-height: 1.35;
}

body[data-app-view="home"] .public-general-flow {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(143, 211, 224, .16);
  color: rgba(198, 225, 228, .56);
  font: 700 8px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

body[data-app-view="home"] .public-general-flow b {
  color: var(--chronos-amber);
  font-size: 12px;
}

body[data-app-view="home"] .public-general-board-foot {
  color: rgba(198, 225, 228, .56);
  font: 700 7px/1.2 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .1em;
}

body[data-app-view="home"] .public-economy-map.has-cinematic-plate:hover .public-cinematic-plate,
body[data-app-view="home"] .public-battle-stage.has-cinematic-plate:hover .public-cinematic-plate {
  transform: scale(1.035);
  filter: saturate(.96) contrast(1.08) brightness(.98);
}

body[data-app-view="home"] .public-battle-cinematic-plate.is-changing {
  opacity: .74;
  transform: scale(1.022);
}

body[data-app-view="home"] .public-economy-cinematic-plate.is-changing {
  opacity: .74;
  transform: scale(1.022);
}

/* Dense operational cadence: the art panels belong to one briefing sequence,
   rather than being isolated by empty poster-sized gutters. */
body[data-app-view="home"] .public-economy,
body[data-app-view="home"] .public-battle {
  padding-block: clamp(74px, 8.5vw, 122px);
}

@media (max-width: 820px) {
  body[data-app-view="home"] .public-general-board {
    min-height: 0;
  }

  body[data-app-view="home"] .public-general-roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-app-view="home"] .public-general-card,
  body[data-app-view="home"] .public-general-card:nth-child(4),
  body[data-app-view="home"] .public-general-card:nth-child(5) {
    grid-column: auto;
  }

  body[data-app-view="home"] .public-general-portrait {
    aspect-ratio: 1.55;
  }

  body[data-app-view="home"] .public-general-card-copy {
    padding: 9px;
  }

  body[data-app-view="home"] .public-general-card-copy strong {
    font-size: 12px;
  }

  body[data-app-view="home"] .public-general-board-head,
  body[data-app-view="home"] .public-general-board-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Mobile public entry: keep the opening line clear of the wrapped nav,
   preserve every horizon, and prevent the local-auth status from colliding
   with the dialog close control. */
@media (max-width: 1120px) {
  body[data-app-view="home"] .public-horizon-rail {
    grid-template-columns: auto repeat(6, minmax(0, 1fr));
  }

  body[data-app-view="home"] .public-horizon-rail .public-horizon-chip:nth-of-type(n+5) {
    display: grid;
  }
}

@media (max-width: 680px) {
  body[data-app-view="home"] .public-hero-content {
    width: calc(100% - 28px) !important;
    padding: 104px 20px 100px !important;
  }

  body[data-app-view="home"] .public-hero h1 {
    font-size: clamp(34px, 10vw, 44px);
  }

  body[data-app-view="home"] .public-hero-proof {
    margin-top: 28px;
  }

  body[data-app-view="home"] .public-horizon-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body[data-app-view="home"] .public-horizon-rail-label {
    grid-column: 1 / -1;
    justify-content: center;
    min-height: 30px;
    padding: 7px 8px;
    writing-mode: horizontal-tb;
    transform: none;
  }

  body[data-app-view="home"] .public-horizon-rail .public-horizon-chip:nth-of-type(n+2) {
    display: grid;
    min-width: 0;
    min-height: 54px;
    padding: 7px 5px;
    overflow-wrap: anywhere;
  }

  body[data-app-view="home"] .public-horizon-chip b { font-size: 11px; }
  body[data-app-view="home"] .public-horizon-chip small { font-size: 6px; }

  body[data-app-view="home"] .start-auth-card-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding-right: 32px;
  }

  body[data-app-view="home"] .start-auth-signal {
    width: max-content;
    max-width: 100%;
    grid-template-columns: 8px minmax(0, 1fr);
  }

  body[data-app-view="home"] .start-auth-signal small {
    white-space: normal;
  }
}

/* On wide logged-in screens, fit the complete shell rail at once. Scrolling
   was otherwise silent because the compact Windows scrollbar can be hidden. */
@media (min-width: 1300px) {
  body:not([data-app-view="home"]) .preflight-topbar {
    gap: 8px;
    padding-inline: clamp(10px, 1.4vw, 20px);
  }

  body:not([data-app-view="home"]) .preflight-topbar .brand-block {
    flex: 0 0 205px;
    min-width: 205px;
  }

  body:not([data-app-view="home"]) .preflight-nav {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;
  }

  body:not([data-app-view="home"]) .preflight-nav-group {
    min-width: 0;
  }

  body:not([data-app-view="home"]) .preflight-nav-group.public-entry {
    flex: 0 0 9%;
  }

  body:not([data-app-view="home"]) .preflight-nav-group:not(.public-entry):not(.operations) {
    flex: 1 1 0;
  }

  body:not([data-app-view="home"]) .preflight-nav-group.operations {
    flex: 0 0 18%;
    margin-left: 4px;
    padding-left: 4px;
  }

  body:not([data-app-view="home"]) .preflight-nav-item {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 6px;
    font-size: 8px;
    letter-spacing: .045em;
  }

  body:not([data-app-view="home"]) .preflight-nav-item small {
    font-size: 6px;
    letter-spacing: 0;
  }

  body:not([data-app-view="home"]) .preflight-session {
    flex: 0 0 128px;
    min-width: 128px;
    margin-left: 0;
    padding-left: 8px;
    gap: 6px;
  }
}

/* In a live 3D battle, keep tactical labels attached to their rendered units.
   The fixed positions above remain the graceful fallback when WebGL is absent. */
body[data-app-view="home"] .public-battle-stage.has-visible-scene-frame .public-battle-overlay [data-public-entity-label] {
  left: var(--entity-anchor-x);
  top: var(--entity-anchor-y);
  right: auto;
  bottom: auto;
  transform: translate(-50%, calc(-100% - 10px));
  visibility: hidden;
}

body[data-app-view="home"] .public-battle-stage.has-visible-scene-frame .public-battle-overlay [data-public-entity-label].is-entity-projected {
  visibility: visible;
}

/* Keep the two interactive render stages clean. Their former image and CSS
   transition art now lives in four dedicated explanatory scenes below. */
body[data-app-view="home"] .public-scene-loading {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  pointer-events: none;
  color: rgba(181, 218, 218, .68);
  background: radial-gradient(ellipse at 50% 52%, rgba(12, 35, 42, .32), rgba(3, 10, 15, .14) 68%);
  font: 700 9px/1.4 ui-monospace, Consolas, monospace;
  letter-spacing: .18em;
  text-align: center;
}

body[data-app-view="home"] .public-economy-map.has-visible-scene-frame .public-scene-loading,
body[data-app-view="home"] .public-battle-stage.has-visible-scene-frame .public-scene-loading {
  display: none;
}

body[data-app-view="home"] .public-scene-loading.is-error {
  color: rgba(255, 154, 145, .8);
}

body[data-app-view="home"] .public-derived-scene {
  max-width: 1440px;
  padding-block: clamp(70px, 7.5vw, 112px);
}

body[data-app-view="home"] .public-derived-scene-grid {
  display: grid;
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(42px, 7vw, 104px);
  align-items: center;
}

body[data-app-view="home"] .public-derived-scene.is-reversed .public-derived-scene-art {
  grid-column: 1;
  grid-row: 1;
}

body[data-app-view="home"] .public-derived-scene.is-reversed .public-section-heading {
  grid-column: 2;
  grid-row: 1;
}

body[data-app-view="home"] .public-derived-scene .public-section-heading h2 {
  max-width: 13ch;
  color: var(--text);
  font-size: clamp(36px, 4.5vw, 66px);
  line-height: .98;
  letter-spacing: -.055em;
}

body[data-app-view="home"] .public-derived-scene .public-section-heading p {
  max-width: 54ch;
}

body[data-app-view="home"] .public-derived-scene-art {
  position: relative;
  min-width: 0;
  min-height: 400px;
  aspect-ratio: 1.42 / 1;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(104, 180, 201, .25);
  border-radius: 16px;
  background: #071319;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .34);
}

body[data-app-view="home"] .public-extraction-overlay {
  position: absolute;
  inset: 0;
}

body[data-app-view="home"] .public-derived-scene-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.9) contrast(1.04) brightness(.94);
  transition: transform 900ms ease, filter 900ms ease;
}

body[data-app-view="home"] .public-derived-scene-art:hover .public-derived-scene-image {
  transform: scale(1.025);
  filter: saturate(.96) contrast(1.06) brightness(.98);
}

body[data-app-view="home"] .public-derived-scene .public-scene-fallback {
  z-index: 1;
  visibility: visible;
  opacity: 1;
}

body[data-app-view="home"] .public-derived-scene--economy-processing .fallback-economy-zone.zone-c {
  top: 12%;
  right: 8%;
}

body[data-app-view="home"] .public-derived-scene--economy-processing .fallback-economy-hub.hub-c {
  top: 37%;
  right: 5%;
}

body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .public-scene-fallback .fallback-battle-support,
body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .public-scene-fallback .fallback-battle-burst {
  opacity: .32;
  transition: opacity 220ms ease;
}

body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-unit {
  z-index: 8;
  background: linear-gradient(135deg, rgba(5, 22, 28, .99), rgba(3, 12, 18, .97));
}

body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-target {
  z-index: 6;
}

body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-unit.unit-c {
  left: 64%;
  top: 44%;
}

body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-target {
  left: 55%;
  top: 21%;
}

body[data-app-view="home"] .public-derived-scene--battle-reconnaissance[data-public-battle-mode="attack"] .public-scene-fallback .fallback-battle-support,
body[data-app-view="home"] .public-derived-scene--battle-reconnaissance[data-public-battle-mode="attack"] .public-scene-fallback .fallback-battle-burst {
  opacity: 1;
}

@media (max-width: 820px) {
  body[data-app-view="home"] .public-derived-scene-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  body[data-app-view="home"] .public-derived-scene.is-reversed .public-derived-scene-art,
  body[data-app-view="home"] .public-derived-scene.is-reversed .public-section-heading {
    grid-column: auto;
    grid-row: auto;
  }

  body[data-app-view="home"] .public-derived-scene-art {
    min-height: 0;
    aspect-ratio: 1.12 / 1;
  }

}

@media (max-width: 560px) {
  body[data-app-view="home"] .public-derived-scene {
    padding-block: 76px;
  }

  body[data-app-view="home"] .public-derived-scene .public-section-heading h2 {
    max-width: 15ch;
    font-size: clamp(34px, 10vw, 48px);
  }

  body[data-app-view="home"] .public-derived-scene-art {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
  }

  body[data-app-view="home"] .public-derived-scene--economy-extraction .public-economy-node {
    min-width: 72px;
    padding: 6px 7px 5px;
    font-size: 7px;
    letter-spacing: .05em;
  }

  body[data-app-view="home"] .public-derived-scene--economy-extraction .public-economy-node b {
    font-size: 8px;
  }

  body[data-app-view="home"] .public-derived-scene--economy-extraction .public-economy-node small {
    margin-top: 3px;
    font-size: 6px;
  }

  body[data-app-view="home"] .public-economy-readout {
    top: 10px;
    left: 10px;
    max-width: 64%;
    font-size: 6px;
    letter-spacing: .06em;
  }

  body[data-app-view="home"] .public-economy-legend {
    top: 28px;
    right: 10px;
    max-width: calc(100% - 20px);
    font-size: 6px;
    letter-spacing: .04em;
  }

  body[data-app-view="home"] .public-battle-pipeline {
    top: 10px;
    left: 10px;
    right: 10px;
    max-width: none;
    font-size: 7px;
    letter-spacing: .07em;
  }

  body[data-app-view="home"] .public-battle-compass {
    top: 28px;
    right: 10px;
    font-size: 7px;
  }

  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-unit.unit-c {
    left: 58%;
    top: 39%;
  }

  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-target {
    left: 72%;
    top: 14%;
    width: 54px;
    height: 54px;
  }

  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-unit {
    width: 35%;
    min-width: 0;
    padding: 6px 5px 6px 23px;
    font-size: 6px;
    line-height: 1.2;
    letter-spacing: .03em;
    transform: none;
  }

  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-unit small {
    font-size: 5px;
    line-height: 1.25;
  }

  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-unit.unit-a {
    left: 7%;
    top: 67%;
  }

  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-unit.unit-b {
    left: 7%;
    top: 39%;
  }

  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-unit.unit-d {
    left: 58%;
    top: 67%;
  }

  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-advance span,
  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-support span,
  body[data-app-view="home"] .public-derived-scene--battle-reconnaissance .fallback-battle-frontline span {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-app-view="home"] .public-derived-scene-image,
  body[data-app-view="home"] .public-derived-scene .public-scene-fallback * {
    animation: none !important;
    transition: none !important;
  }
}

/* GM-03: keep the live world on screen while economic work scrolls inside its own workspace. */
body.server-match-active #server-match-screen:not([hidden]) {
  display:flex;
  flex-direction:column;
  width:100%;
  height:100vh;
  height:100dvh;
  min-height:0;
  max-height:100dvh;
  padding-bottom:8px;
  overflow:hidden;
}
body.server-match-active #server-match-screen > .server-match-topbar,
body.server-match-active #server-match-screen > .server-match-overview,
body.server-match-active #server-match-screen > .server-match-mobile-panels,
body.server-match-active #server-match-screen > .server-match-economic-jobs,
body.server-match-active #server-match-screen > .server-match-footer {
  flex:0 0 auto;
}
body.server-match-active #server-match-screen > .server-match-overview { padding:5px 0; }
body.server-match-active #server-match-screen > .server-match-layout {
  flex:1 1 auto;
  height:auto;
  min-height:280px;
  max-height:none;
  margin:0;
}
body.server-match-active #server-match-screen > .server-match-economic-jobs {
  display:flex;
  flex:0 1 clamp(205px,29vh,292px);
  flex-direction:column;
  min-height:205px;
  max-height:min(33vh,310px);
  margin-top:6px;
  padding:7px 9px 8px;
  border:1px solid rgba(77,201,225,.27);
  background:linear-gradient(145deg,rgba(5,21,29,.97),rgba(3,13,19,.98));
  overflow:hidden;
}
body.server-match-active #server-match-screen > .server-match-economy:not(.server-match-economic-jobs) {
  flex:0 1 auto;
  min-height:0;
  max-height:clamp(115px,27vh,250px);
  margin-top:6px;
  overflow:auto;
}
body.server-match-active #server-match-screen > .server-match-activity {
  flex:0 0 auto;
  max-height:105px;
  margin:4px 0 0;
  overflow:auto;
}
.server-economy-workspace-heading {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0;
  min-height:28px;
  padding:0 3px 6px;
}
.server-economy-workspace-heading > div { display:grid; gap:2px; min-width:0; }
.server-economy-workspace-heading .section-kicker { color:#66d7e8; font:800 8px var(--mono); letter-spacing:.11em; }
.server-economy-workspace-heading strong { overflow:hidden; color:#d7f2f5; font:700 10px var(--sans); text-overflow:ellipsis; white-space:nowrap; }
.server-economy-workspace-balance { flex:0 0 auto; color:#a8dae0; font:700 9px var(--mono); text-align:right; }
.server-economy-tabs {
  display:flex;
  flex:0 0 auto;
  gap:5px;
  min-width:0;
  padding:0 0 6px;
  overflow:auto hidden;
  scrollbar-width:thin;
  scrollbar-color:#23606b #07151c;
}
.server-economy-tabs button {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  min-height:31px;
  padding:5px 9px;
  border:1px solid rgba(77,201,225,.2);
  background:rgba(4,16,23,.84);
  color:#8ebbc3;
  font:800 8px var(--mono);
  letter-spacing:.06em;
  cursor:pointer;
}
.server-economy-tabs button[aria-selected="true"] { border-color:#58d9e8; background:rgba(13,60,71,.83); color:#ecfdff; box-shadow:inset 0 -2px #58d9e8; }
.server-economy-tabs button:focus-visible { outline:2px solid #58d9e8; outline-offset:1px; }
.server-economy-tabs button small { color:#65c5d0; font:700 8px var(--mono); }
.server-economy-command-feedback { flex:0 0 auto; margin:0 0 6px; padding:5px 8px; font-size:9px; }
.server-economy-panels { flex:1 1 auto; min-height:0; overflow:hidden; }
.server-economy-panel { width:100%; height:100%; min-height:0; padding:2px 3px 8px; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#23606b #07151c; }
.server-economy-panel[hidden] { display:none !important; }
.server-economy-overview { display:grid; align-content:start; gap:7px; }
.server-economy-overview .server-economy-finance { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:7px; }
.server-economy-overview-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; }
.server-economy-overview-stats > div { display:grid; gap:2px; min-width:0; padding:6px 8px; border:1px solid rgba(77,201,225,.14); background:rgba(6,24,32,.8); }
.server-economy-overview-stats strong { color:#e0f9fc; font:800 12px var(--mono); }
.server-economy-overview-stats span,.server-economy-confirmed-note { color:#82aab2; font:600 8px var(--sans); line-height:1.35; }
.server-economy-confirmed-note { margin:0; }
.server-economy-panel h3 { display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin:4px 0 6px; color:#d3f1f4; font:800 9px var(--mono); letter-spacing:.065em; }
.server-economy-panel h3 small { color:#75a6af; font:600 8px var(--sans); letter-spacing:0; text-align:right; }
.server-economy-panel .server-economy-create > header { display:grid; gap:3px; margin-bottom:7px; }
.server-economy-panel .server-economy-create > header h3 { margin:0; }
.server-economy-panel .server-economy-create > header p { margin:0; color:#81aab2; font:600 8px var(--sans); line-height:1.35; }
.server-economy-panel .server-economy-inventory,
.server-economy-panel .server-economy-create,
.server-economy-panel .server-economy-orders,
.server-economy-panel .server-economy-action-group,
.server-economy-panel .server-economy-active-jobs,
.server-economy-panel .server-economy-state-block { display:grid; gap:6px; min-width:0; margin:0; }
.server-economy-panel .server-economy-material-count { margin:0; color:#83a9b0; font:600 8px var(--sans); line-height:1.4; }
.server-economy-panel .server-economy-store summary { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) auto; }
.server-economy-panel .server-economy-definition-list { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.server-economy-cost-preview { display:grid; gap:4px; padding:6px 8px; border-left:2px solid rgba(79,203,222,.26); background:rgba(4,20,27,.58); }
.server-economy-cost-preview > strong { color:#81bac2; font:800 7px var(--mono); letter-spacing:.07em; }
.server-economy-cost-preview > ul { display:grid; gap:3px; margin:0; padding-left:15px; color:#a6c8cd; font:600 8px var(--sans); line-height:1.35; }
.server-economy-cost-preview > ul li { overflow-wrap:anywhere; }
.server-economy-panel .server-economy-definition > header strong { color:#e0f8fa; }
.server-economy-panel .server-economy-job-list { max-height:none; overflow:visible; }
.server-economy-panel .server-economy-technical { color:#728f97; font:600 8px var(--mono); overflow-wrap:anywhere; }
.server-economy-panel .server-economy-technical summary { width:max-content; max-width:100%; cursor:pointer; }
.server-economy-panel .server-economy-technical code { color:#8aabb1; font:600 8px var(--mono); overflow-wrap:anywhere; }
.server-economy-panel .server-economy-store-id { margin:0 0 5px; color:#789aa2; font:600 8px var(--mono); }
.server-economy-panel .server-economy-store-id code { color:#8fb9c0; }
.server-economy-panel .server-economy-pill-list > article { display:grid; gap:3px; min-width:0; padding:7px 9px; border:1px solid rgba(77,201,225,.14); background:rgba(5,20,27,.72); }
.server-economy-panel .server-economy-pill-list > article strong { color:#d9f3f6; font:700 9px var(--sans); }
.server-economy-panel .server-economy-pill-list > article > span { color:#86aab2; font:600 8px var(--sans); }
.server-economy-panel .server-economy-empty { margin:0; padding:8px 10px; border-left:2px solid rgba(87,205,222,.4); background:rgba(6,29,38,.54); color:#83aab2; font:600 9px var(--sans); }
.server-economy-panel .server-match-activity { grid-template-columns:minmax(125px,180px) minmax(0,1fr); max-height:130px; margin-top:8px; padding:7px; overflow:auto; }
.server-economy-panel .server-match-activity ol { grid-template-columns:repeat(3,minmax(0,1fr)); }
body.server-match-active #server-match-screen > .server-match-footer { margin-top:3px; padding:5px 0 0; font-size:7px; }
.server-match-economic-jobs .server-economy-heading small,
.server-match-economic-jobs .server-economy-profile > span,
.server-match-economic-jobs .server-economy-profile > strong { color:inherit; }
body.server-match-active #server-match-screen > .server-match-economic-jobs[data-active-economic-view]:not([data-active-economic-view="overview"]):not([data-economic-expanded="false"]) {
  flex-basis:clamp(250px,min(47vh,calc(100dvh - 430px)),470px);
  min-height:250px;
  max-height:min(56vh,calc(100dvh - 350px));
}
body.server-match-active #server-match-screen > .server-match-economic-jobs[data-economic-expanded="true"] {
  flex-basis:clamp(280px,min(53vh,calc(100dvh - 420px)),500px);
  max-height:min(61vh,calc(100dvh - 340px));
}
.server-economy-workspace-controls { display:flex; flex:0 0 auto; align-items:center; justify-content:flex-end; gap:8px; min-width:0; }
.server-economy-expand { flex:0 0 auto; min-height:25px; padding:4px 7px; border:1px solid rgba(77,201,225,.32); background:rgba(6,29,38,.8); color:#93d4dc; font:800 7px var(--mono); letter-spacing:.04em; cursor:pointer; }
.server-economy-expand:hover,.server-economy-expand:focus-visible { border-color:#58d9e8; color:#e8fcff; outline-color:#58d9e8; }
#game-shell[hidden] { display:none !important; }
body > .server-match-boot { display:none; }
html.chronos-game-entry body > #preflight-shell,
html.chronos-game-entry body > #game-shell { display:none !important; }
html.chronos-game-entry body > #server-match-boot {
  position:fixed;
  z-index:10000;
  inset:0;
  display:grid;
  align-content:center;
  justify-items:center;
  gap:13px;
  padding:24px;
  background:radial-gradient(ellipse at 50% 42%,rgba(11,55,68,.42),transparent 55%),#061018;
  color:#d7f5fa;
  text-align:center;
}
html.chronos-game-entry #server-match-boot .section-kicker { color:#6bcfdf; font:800 9px var(--mono); letter-spacing:.12em; }
html.chronos-game-entry #server-match-boot h1 { color:#e8fcff; font:800 clamp(17px,3vw,24px) var(--mono); letter-spacing:.08em; }
html.chronos-game-entry #server-match-boot p { max-width:520px; color:#8fb1b8; font:600 12px var(--sans); line-height:1.5; }

@media (max-width:700px) {
  body.server-match-active #server-match-screen:not([hidden]) { padding:0 8px 6px; }
  body.server-match-active #server-match-screen > .server-match-topbar { padding:4px 0; }
  body.server-match-active #server-match-screen > .server-match-overview { gap:4px; padding:4px 0; }
  body.server-match-active #server-match-screen > .server-match-layout {
    flex:1 1 auto;
    display:grid;
    grid-template-areas:"map";
    grid-template-columns:minmax(0,1fr);
    height:auto;
    min-height:230px;
    max-height:none;
    gap:0;
  }
  body.server-match-active #server-match-screen .server-match-map-panel { height:100%; min-height:0; padding:6px; }
  body.server-match-active #server-match-screen .server-match-map-wrap { flex:1 1 auto; height:auto; min-height:0; max-height:none; }
  body.server-match-active #server-match-screen > .server-match-economic-jobs {
    flex:0 0 clamp(205px,27svh,250px);
    min-height:205px;
    max-height:32svh;
    margin-top:5px;
    padding:6px;
  }
  body.server-match-active #server-match-screen > .server-match-economic-jobs[data-active-economic-view]:not([data-active-economic-view="overview"]):not([data-economic-expanded="false"]) {
    flex:0 1 clamp(230px,min(45svh,calc(100svh - 420px)),390px);
    min-height:230px;
    max-height:min(55svh,calc(100svh - 340px));
  }
  body.server-match-active #server-match-screen > .server-match-economic-jobs[data-economic-expanded="true"] {
    flex-basis:clamp(260px,min(50svh,calc(100svh - 420px)),420px);
    max-height:min(59svh,calc(100svh - 340px));
  }
  .server-economy-workspace-heading { min-height:24px; padding-bottom:4px; }
  .server-economy-workspace-heading .section-kicker { font-size:7px; }
  .server-economy-workspace-heading strong { font-size:9px; }
  .server-economy-workspace-balance { max-width:48%; overflow:hidden; font-size:8px; text-overflow:ellipsis; white-space:nowrap; }
  .server-economy-workspace-controls { gap:5px; }
  .server-economy-expand { min-height:32px; padding:5px 7px; font-size:7px; }
  .server-economy-tabs { gap:4px; padding-bottom:5px; }
  .server-economy-tabs button { min-height:38px; padding:5px 8px; font-size:8px; }
  .server-economy-panel { padding:2px 1px 8px; }
  .server-economy-overview .server-economy-finance { grid-template-columns:minmax(0,1fr); }
  .server-economy-overview-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .server-economy-panel .server-match-activity { grid-template-columns:minmax(0,1fr); max-height:190px; }
  .server-economy-panel .server-match-activity ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body.server-match-active #server-match-screen > .server-match-footer { display:none; }
}

/* Final GM-03 sizing after all legacy and server-match rules. */
body.server-match-active #server-match-screen .server-economy-workspace-heading {
  flex:0 0 auto;
  min-height:34px;
  align-items:center;
}
body.server-match-active #server-match-screen .server-economy-workspace-heading > .server-economy-workspace-controls {
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  min-width:0;
}
body.server-match-active #server-match-screen .server-economy-workspace-balance {
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.server-match-active #server-match-screen .server-economy-panels,
body.server-match-active #server-match-screen .server-economy-panel { min-height:0; }
body.server-match-active #server-match-screen .server-economy-panel { overflow:auto; }
body.server-match-active #server-match-screen .server-match-left,
body.server-match-active #server-match-screen .server-match-context { min-height:0; overflow:auto; }
@media (min-width:701px) {
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-layout {
    flex:1 1 0;
    min-height:200px;
  }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-map-panel,
  body.server-match-active #server-match-screen[data-economic-expanded="true"] .server-match-map-wrap { min-height:0; }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-economic-jobs {
    flex:0 0 clamp(380px,44vh,420px);
    min-height:380px;
    max-height:min(48vh,440px);
  }
}
@media (max-width:700px) {
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-layout {
    flex:1 1 0;
    min-height:170px;
  }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-economic-jobs {
    flex:0 0 clamp(340px,min(45svh,calc(100svh - 460px)),380px);
    min-height:340px;
    max-height:min(46svh,390px);
  }
  body.server-match-active #server-match-screen .server-economy-workspace-heading { min-height:34px; }
  body.server-match-active #server-match-screen .server-economy-workspace-heading > .server-economy-workspace-controls { gap:5px; }
  body.server-match-active #server-match-screen .server-economy-expand { min-height:36px; }
}

/* Keep every canonical map control inside the small match map viewport. */
body.server-match-active #server-match-screen .chronos-map-tools {
  position:absolute;
  z-index:7;
  top:8px;
  right:8px;
  left:8px;
  display:flex;
  flex-flow:row wrap;
  align-items:flex-start;
  gap:5px;
  width:auto;
  max-width:calc(100% - 16px);
  max-height:none;
  overflow:visible;
}
body.server-match-active #server-match-screen .chronos-map-tools button {
  box-sizing:border-box;
  flex:0 0 42px;
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;
  padding:5px 3px;
  overflow:hidden;
  font:800 10px var(--chronos-font-data, Consolas, monospace);
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
body.server-match-active #server-match-screen .chronos-map-tools button[data-map-action="overview"] { flex-basis:54px; width:54px; min-width:54px; }
body.server-match-active #server-match-screen .chronos-map-tools button[data-map-action="projection"] { flex-basis:76px; width:76px; min-width:76px; }
body.server-match-active #server-match-screen .chronos-map-tools button[data-map-action="layers"] { flex-basis:64px; width:64px; min-width:64px; }
body.server-match-active #server-match-screen .chronos-map-tools button[data-map-action="legend"] { flex-basis:76px; width:76px; min-width:76px; }
body.server-match-active #server-match-screen .server-match-map-panel > header {
  flex:0 0 auto;
  gap:6px;
  padding-bottom:6px;
}
body.server-match-active #server-match-screen .server-match-map-panel > footer {
  flex:0 0 24px;
  flex-wrap:nowrap;
  align-items:center;
  gap:10px;
  min-width:0;
  min-height:24px;
  max-height:24px;
  padding-top:4px;
  overflow:hidden;
  font:700 10px var(--chronos-font-data, Consolas, monospace);
  letter-spacing:.025em;
}
body.server-match-active #server-match-screen .server-match-map-panel > footer > span {
  display:block;
  flex:1 1 50%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
@media (max-width:700px) {
  body.server-match-active #server-match-screen .chronos-map-tools { top:7px; right:7px; left:7px; gap:4px; max-width:calc(100% - 14px); }
  body.server-match-active #server-match-screen .chronos-map-tools button {
    flex-basis:44px;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:6px 3px;
  }
  body.server-match-active #server-match-screen .chronos-map-tools button[data-map-action="overview"] { flex-basis:54px; width:54px; min-width:54px; }
  body.server-match-active #server-match-screen .chronos-map-tools button[data-map-action="projection"] { flex-basis:76px; width:76px; min-width:76px; }
  body.server-match-active #server-match-screen .chronos-map-tools button[data-map-action="layers"] { flex-basis:64px; width:64px; min-width:64px; }
  body.server-match-active #server-match-screen .chronos-map-tools button[data-map-action="legend"] { flex-basis:76px; width:76px; min-width:76px; }
  body.server-match-active #server-match-screen .server-match-map-panel > header {
    align-items:center;
    gap:3px;
    padding:0 1px 4px;
  }
  body.server-match-active #server-match-screen .server-match-map-panel > header .section-kicker { font-size:8px; line-height:1.1; }
  body.server-match-active #server-match-screen .server-match-map-panel h2 { margin:2px 0 0; font-size:13px; line-height:1.15; }
  body.server-match-active #server-match-screen .server-map-revision { padding-top:0; font-size:9px; }
  body.server-match-active #server-match-screen .server-match-map-panel > footer {
    flex:0 0 23px;
    gap:6px;
    min-height:23px;
    max-height:23px;
    padding-top:3px;
    font-size:9px;
    letter-spacing:0;
  }
  body.server-match-active #server-match-screen .server-match-map-panel > footer > span { max-width:50%; }
  body.server-match-active #server-match-screen .chronos-map-status { top:104px; right:7px; max-width:calc(100% - 14px); }
}

/* Active Chronos economy: existing Chronos artwork/symbols and finite motion.
   Illustrations never replace canonical geography or claim a start facility. */
body.server-match-active #server-match-screen {
  --economy-amber:#e9ba77;
  --economy-copper:#d9956b;
  --economy-steel:#a8c9db;
}
body.server-match-active #server-match-screen .server-economy-glyph {
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:22px;
  height:22px;
  font:600 21px/1 var(--chronos-font-ui);
}
body.server-match-active #server-match-screen .server-match-stock-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  background:linear-gradient(145deg,rgba(97,145,166,.16),rgba(8,24,32,.55));
  border-color:rgba(128,179,198,.26);
  box-shadow:inset 0 1px 0 rgba(190,218,224,.07);
}
body.server-match-active #server-match-screen .server-match-stock-item > .server-economy-glyph { color:var(--economy-steel); }
body.server-match-active #server-match-screen .server-match-stock-item[data-material="copper"] > .server-economy-glyph { color:var(--economy-copper); }
body.server-match-active #server-match-screen .server-match-stock-item[data-material="food"] > .server-economy-glyph { color:#b7d999; }
body.server-match-active #server-match-screen .server-match-stock-item span { font:500 12px var(--chronos-font-ui); }
body.server-match-active #server-match-screen .server-match-stock-item strong { font:800 14px var(--chronos-font-data); }
body.server-match-active #server-match-screen .server-economy-workspace-heading {
  position:relative;
  isolation:isolate;
  min-height:58px;
  padding:10px 14px;
  overflow:hidden;
  border-bottom:1px solid rgba(205,157,94,.28);
  background:linear-gradient(100deg,#071923,rgba(7,25,35,.72));
}
body.server-match-active #server-match-screen .server-economy-workspace-heading::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,#051720 0%,rgba(5,23,32,.45) 42%,rgba(5,23,32,.78) 100%),url("assets/images/cinematics/chronos-economy-industry-1980-v1.png") center 58% / cover no-repeat;
  opacity:.8;
}
body.server-match-active #server-match-screen .server-economy-workspace-heading .section-kicker { color:#f0cf9d; font-size:10px; }
body.server-match-active #server-match-screen .server-economy-workspace-heading strong { color:#f1f6f7; font-size:14px; text-shadow:0 1px 3px #021017; }
body.server-match-active #server-match-screen .server-economy-tabs { gap:6px; padding:7px 9px; }
body.server-match-active #server-match-screen .server-economy-tabs button {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:42px;
  padding:7px 12px;
  font:750 11px var(--chronos-font-ui);
  letter-spacing:.04em;
  background:linear-gradient(160deg,#142d39,#081a24);
  border:1px solid rgba(110,160,181,.29);
  border-radius:4px;
  box-shadow:inset 0 1px 0 rgba(215,233,240,.07),0 2px 5px rgba(0,0,0,.18);
  transition:transform 160ms ease,color 160ms ease,border-color 160ms ease;
}
body.server-match-active #server-match-screen .server-economy-tabs .server-economy-glyph { width:19px; height:19px; opacity:.86; }
body.server-match-active #server-match-screen .server-economy-tabs button[aria-selected="true"] {
  color:#dbffff;
  background:linear-gradient(150deg,#1b4c5a,#10303d);
  border-color:#51bfc8;
  box-shadow:inset 0 -2px 0 #59d5d8,inset 0 1px 0 rgba(222,255,255,.13),0 2px 8px rgba(0,0,0,.23);
}
body.server-match-active #server-match-screen .server-economy-tabs button small {
  min-width:18px;
  padding:3px;
  border-radius:3px;
  background:rgba(1,10,18,.45);
  font:700 10px var(--chronos-font-data);
}
body.server-match-active #server-match-screen .server-economy-definition-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
body.server-match-active #server-match-screen .server-economy-definition {
  --card-accent:var(--economy-amber);
  padding:12px;
  border:1px solid rgba(128,162,178,.27);
  border-top:2px solid var(--card-accent);
  border-radius:6px;
  background:linear-gradient(155deg,rgba(35,53,65,.94),rgba(8,26,35,.97));
  box-shadow:inset 0 1px 0 rgba(230,242,249,.06),0 5px 13px rgba(0,0,0,.16);
  font:400 13px/1.5 var(--chronos-font-ui);
}
body.server-match-active #server-match-screen .server-economy-definition[data-visual-kind="farm"] { --card-accent:#b3d598; }
body.server-match-active #server-match-screen .server-economy-definition[data-visual-kind="research"] { --card-accent:#aebaff; }
body.server-match-active #server-match-screen .server-economy-definition[data-visual-kind="transport"] { --card-accent:#74d3dd; }
body.server-match-active #server-match-screen .server-economy-definition > header { display:flex; align-items:center; gap:10px; min-height:65px; padding:0 0 10px; }
body.server-match-active #server-match-screen .server-economy-definition > header > span { min-width:0; flex:1; }
body.server-match-active #server-match-screen .server-economy-definition > header strong { display:block; font-size:16px; line-height:1.25; color:#edf4f7; }
body.server-match-active #server-match-screen .server-economy-definition > header small { display:block; margin-top:6px; font-size:11px; color:#aac5d0; }
body.server-match-active #server-match-screen .server-economy-definition > header em { flex:0 0 auto; padding:4px 6px; font:700 9px var(--chronos-font-data); letter-spacing:.04em; border:1px solid rgba(255,255,255,.1); border-radius:3px; }
body.server-match-active #server-match-screen .server-economy-card-visual {
  display:grid;
  place-items:center;
  flex:0 0 66px;
  width:66px;
  height:66px;
  color:var(--card-accent);
  border:1px solid color-mix(in srgb,var(--card-accent) 45%,transparent);
  border-radius:5px;
  background:radial-gradient(ellipse at 25% 15%,rgba(210,217,221,.15),rgba(1,13,21,.55)),linear-gradient(140deg,#213b47,#0b1e29);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
body.server-match-active #server-match-screen .server-economy-card-visual > .server-economy-glyph { width:45px; height:45px; font-size:40px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
body.server-match-active #server-match-screen .server-economy-card-art {
  position:relative;
  display:block;
  aspect-ratio:var(--server-economic-art-ratio,16 / 9);
  margin:-12px -12px 0;
  overflow:hidden;
  border-bottom:1px solid color-mix(in srgb,var(--card-accent) 35%,transparent);
  border-radius:5px 5px 0 0;
  background:#08151f;
  isolation:isolate;
}
body.server-match-active #server-match-screen .server-economy-card-art .graphics-card-image {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  aspect-ratio:auto;
  padding:0;
  border:0;
  border-radius:0;
  background:#0a1b25;
}
body.server-match-active #server-match-screen .server-economy-card-art .graphics-preview-frame { border:0; background:#08151f; }
body.server-match-active #server-match-screen .server-economy-card-art .graphics-preview-frame > img { width:100%; height:100%; object-fit:contain; object-position:var(--server-economic-art-focus,50% 50%); filter:saturate(.9) contrast(1.04); }
body.server-match-active #server-match-screen .server-economy-card-art[data-art-kind="atlas"] .graphics-atlas-tile { width:100%; height:100%; aspect-ratio:auto; }
body.server-match-active #server-match-screen .server-economy-card-art .graphics-card-code { display:none; }
body.server-match-active #server-match-screen .server-economy-card-art .graphics-expand-hint { z-index:3; top:7px; right:7px; font-size:9px; }
body.server-match-active #server-match-screen .server-economy-art-overlay {
  position:absolute;
  z-index:2;
  right:0;
  bottom:0;
  left:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding:34px 12px 11px;
  color:#f4f8fa;
  background:linear-gradient(0deg,rgba(3,12,18,.88),rgba(3,12,18,.68) 62%,rgba(3,12,18,0));
  pointer-events:none;
}
body.server-match-active #server-match-screen .server-economy-art-overlay > span { display:grid; min-width:0; gap:3px; text-shadow:0 1px 6px rgba(0,0,0,.75); }
body.server-match-active #server-match-screen .server-economy-art-overlay strong { font-size:15px; line-height:1.2; }
body.server-match-active #server-match-screen .server-economy-art-overlay small { color:#d1e2e9; font-size:10px; line-height:1.35; }
body.server-match-active #server-match-screen .server-economy-art-overlay em { flex:0 0 auto; padding:5px 7px; border:1px solid rgba(255,255,255,.24); border-radius:3px; background:rgba(4,13,18,.64); color:#f0c86c; font:700 9px var(--chronos-font-data); letter-spacing:.04em; }
body.server-match-active #server-match-screen .server-economy-art-overlay em[data-state="ready"] { border-color:rgba(92,221,172,.4); color:#74e0b3; }
body.server-match-active #server-match-screen .server-economy-art-overlay em[data-state="built"] { border-color:rgba(125,215,229,.38); color:#91dce6; }
body.server-match-active #server-match-screen .server-economy-art-caption {
  position:absolute;
  z-index:3;
  top:8px;
  left:8px;
  padding:3px 5px;
  border-radius:2px;
  color:#edf2f0;
  background:rgba(3,12,17,.68);
  font:500 9px var(--chronos-font-ui);
  pointer-events:none;
}
body.server-match-active #server-match-screen .server-economy-card-art .graphics-card-image:focus-visible { outline:2px solid #bafaff; outline-offset:-3px; }
body.server-match-active .asset-lightbox { padding:16px; }
body.server-match-active .asset-lightbox-shell { width:min(1280px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); min-height:0; overflow:auto; }
body.server-match-active .asset-lightbox-visual { height:min(64dvh,700px); }
body.server-match-active #asset-lightbox-close-btn { min-height:44px; }
body.server-match-active #server-match-screen .server-economy-definition.available { border-color:rgba(103,190,171,.45); border-top-color:var(--card-accent); }
body.server-match-active #server-match-screen .server-economy-definition.unavailable { opacity:1; }
body.server-match-active #server-match-screen .server-economy-cost-chips { display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 9px; }
body.server-match-active #server-match-screen .server-economy-cost-chips > span { padding:4px 7px; border:1px solid rgba(217,191,146,.22); border-radius:3px; color:#f1d7b4; background:rgba(134,88,31,.09); font-size:12px; }
body.server-match-active #server-match-screen .server-economy-material-flow { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:8px 0; padding:9px; border:1px solid rgba(105,165,187,.27); background:rgba(1,15,25,.4); border-radius:4px; }
body.server-match-active #server-match-screen .server-economy-material-flow > div { display:grid; gap:5px; flex:1 1 110px; }
body.server-match-active #server-match-screen .server-economy-material-flow span { display:flex; align-items:center; gap:6px; font-size:12px; color:#daebed; }
body.server-match-active #server-match-screen .server-economy-material-flow b { color:var(--card-accent); font-size:22px; }
body.server-match-active #server-match-screen .server-economy-upkeep { margin:8px 0; font-size:12px; color:#b6cfda; }
body.server-match-active #server-match-screen .server-economy-definition-meta { font-size:11px; color:#9cb7c4; }
body.server-match-active #server-match-screen .server-economy-definition p { font-size:12px; line-height:1.5; }
body.server-match-active #server-match-screen .server-economy-action-form { margin:10px 0; gap:10px; }
body.server-match-active #server-match-screen .server-economy-action-form > label,
body.server-match-active #server-match-screen .server-economy-cargo-lines > label { font-size:12px; color:#ddebf1; }
body.server-match-active #server-match-screen .server-economy-action-form select,
body.server-match-active #server-match-screen .server-economy-action-form input { font-size:13px; border-radius:4px; border-color:rgba(99,166,187,.46); background:#061823; }
body.server-match-active #server-match-screen .server-economy-action-form button[type="submit"] {
  min-height:44px;
  border-radius:4px;
  color:#eaffff;
  font:800 12px var(--chronos-font-ui);
  letter-spacing:.06em;
  border:1px solid #54b8c2;
  background:linear-gradient(150deg,#24636e,#124653);
  box-shadow:inset 0 1px 0 rgba(212,255,255,.2),0 3px 6px rgba(0,0,0,.2);
  transition:transform 160ms ease,box-shadow 160ms ease;
}
body.server-match-active #server-match-screen .server-economy-action-form button[type="submit"]:disabled { opacity:.55; border-color:rgba(138,161,174,.3); background:linear-gradient(150deg,#20323e,#11232d); }
body.server-match-active #server-match-screen .server-economy-job > header { display:flex; align-items:center; gap:10px; }
body.server-match-active #server-match-screen .server-economy-job > header > .server-economy-glyph { width:36px; height:36px; color:#7acecf; }
body.server-match-active #server-match-screen .server-economy-progress-meter { appearance:none; width:100%; height:7px; margin:10px 0 6px; border:0; border-radius:7px; background:#06151f; overflow:hidden; }
body.server-match-active #server-match-screen .server-economy-progress-meter::-webkit-progress-bar { background:#06151f; }
body.server-match-active #server-match-screen .server-economy-progress-meter::-webkit-progress-value { background:linear-gradient(90deg,#29657b,#82d3cc); }
body.server-match-active #server-match-screen .server-economy-progress-meter::-moz-progress-bar { background:linear-gradient(90deg,#29657b,#82d3cc); }
body.server-match-active #server-match-screen .server-economy-command-feedback.pending::before { content:""; display:inline-block; width:7px; height:7px; margin-right:8px; border-radius:50%; background:#e8c087; animation:chronos-economy-awaiting 850ms ease-in-out 6; }
@keyframes chronos-economy-awaiting { 0%,100% { opacity:.35; transform:scale(.8); } 50% { opacity:1; transform:scale(1); } }
@media (hover:hover) {
  body.server-match-active #server-match-screen .server-economy-tabs button:hover { transform:translateY(-1px); border-color:#66bcc7; }
  body.server-match-active #server-match-screen .server-economy-action-form button[type="submit"]:not(:disabled):hover { transform:translateY(-1px); box-shadow:inset 0 1px 0 rgba(212,255,255,.2),0 4px 10px rgba(17,131,148,.22); }
}
body.server-match-active #server-match-screen .server-economy-tabs button:active,
body.server-match-active #server-match-screen .server-economy-action-form button[type="submit"]:not(:disabled):active { transform:translateY(1px); }
@media (max-width:1100px) {
  body.server-match-active #server-match-screen .server-economy-definition-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  body.server-match-active #server-match-screen .server-economy-definition-list { grid-template-columns:1fr; }
  body.server-match-active #server-match-screen .server-economy-workspace-heading { min-height:44px; padding:7px 9px; }
  body.server-match-active #server-match-screen .server-economy-workspace-heading strong { font-size:11px; }
  body.server-match-active #server-match-screen .server-economy-workspace-heading .section-kicker { font-size:8px; }
  body.server-match-active #server-match-screen .server-match-stock-item { padding:5px 9px; gap:6px; }
  body.server-match-active #server-match-screen .server-match-stock-item > .server-economy-glyph { width:21px; height:21px; }
  body.server-match-active #server-match-screen .server-match-stock-item span { font-size:11px; }
  body.server-match-active #server-match-screen .server-match-stock-item strong { font-size:12px; }
  body.server-match-active #server-match-screen .server-economy-tabs { padding:6px; }
  body.server-match-active #server-match-screen .server-economy-tabs button { min-height:44px; padding:6px 10px; font-size:10px; }
  body.server-match-active .asset-lightbox-shell { padding:10px; gap:10px; }
  body.server-match-active .asset-lightbox-head { gap:8px; }
  body.server-match-active .asset-lightbox-head h2 { font-size:16px; }
  body.server-match-active .asset-lightbox-visual { height:58dvh; }
  body.server-match-active #server-match-screen .server-match-inspector-close { min-width:44px; min-height:44px; }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-layout { min-height:245px; }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-economic-jobs[data-economic-expanded="true"][data-active-economic-view] {
    flex:0 0 min(34svh,290px);
    min-height:min(260px,32svh);
    max-height:min(34svh,290px);
  }
}
@media (prefers-reduced-motion:reduce) {
  body.server-match-active #server-match-screen .server-economy-command-feedback.pending::before { animation:none; }
  body.server-match-active #server-match-screen .server-economy-tabs button,
  body.server-match-active #server-match-screen .server-economy-action-form button[type="submit"],
  body.server-match-active #server-match-screen .server-economy-card-art .graphics-preview-frame > img { transition:none; transform:none; }
}

@media (max-height:750px) and (min-width:801px) {
  body.server-match-active #server-match-screen > .server-match-layout,
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-layout {
    min-height:160px;
  }
  body.server-match-active #server-match-screen > .server-match-economic-jobs {
    flex-basis:175px;
    min-height:150px;
    max-height:33vh;
  }
}
.server-nation-notices {
  position:relative;
  z-index:14;
  flex:0 0 auto;
  margin:0 0 5px;
  border:1px solid #857044;
  background:#17262a;
  color:#f2d193;
  font:700 11px/1.3 var(--sans);
}
.server-nation-notices summary { padding:7px 10px; cursor:pointer; }
.server-nation-notices ul {
  position:absolute;
  top:100%;
  left:0;
  right:0;
  max-height:220px;
  margin:0;
  padding:8px;
  overflow:auto;
  list-style:none;
  border:1px solid #857044;
  background:#10232c;
}
.server-nation-notices button {
  display:grid;
  gap:4px;
  width:100%;
  padding:8px;
  margin-bottom:5px;
  border:1px solid #40616b;
  background:#162e39;
  color:#ecddd0;
  text-align:left;
  cursor:pointer;
}
.server-nation-notices small { color:#9ec6cf; }
@media (max-width:800px) {
  body.server-match-active #server-match-screen > .server-match-mobile-panels {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

/* GM-03: retain a usable map and scroll access when the panels exceed the viewport. */
body.server-match-active #server-match-screen:not([hidden]) {
  height:auto;
  min-height:100dvh;
  max-height:none;
  overflow:visible;
}
body.server-match-active #server-match-screen > .server-match-layout {
  flex:0 0 clamp(380px,52dvh,640px);
  height:clamp(380px,52dvh,640px);
  min-height:380px;
  max-height:640px;
}
body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-layout {
  flex:0 0 clamp(380px,44dvh,400px);
  height:clamp(380px,44dvh,400px);
  min-height:380px;
  max-height:400px;
}
body.server-match-active #server-match-screen .server-match-map-wrap { min-height:280px; }
body.server-match-active #server-match-screen > .server-match-economic-jobs[data-economic-workspace][data-active-economic-view][data-economic-expanded="false"],
body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-economic-jobs[data-economic-workspace][data-active-economic-view][data-economic-expanded="true"] {
  flex:0 0 auto;
  height:auto;
  min-height:320px;
  max-height:none;
  gap:6px;
  overflow:visible;
}
body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-economic-jobs[data-economic-workspace][data-active-economic-view][data-economic-expanded="true"] {
  min-height:400px;
}
body.server-match-active #server-match-screen .server-economy-workspace-heading {
  min-height:46px;
  padding:6px 9px;
}
body.server-match-active #server-match-screen .server-economy-tabs { padding:4px 6px; }
body.server-match-active #server-match-screen .server-economy-tabs button { min-height:36px; padding:5px 9px; }
body.server-match-active #server-match-screen .server-economy-panels {
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  height:clamp(200px,26dvh,280px);
  min-height:200px;
}
body.server-match-active #server-match-screen[data-economic-expanded="true"] .server-match-economic-jobs[data-economic-expanded="true"] .server-economy-panels {
  height:clamp(280px,40dvh,520px);
  min-height:280px;
}
body.server-match-active #server-match-screen .server-economy-panel {
  flex:1 1 0;
  height:auto;
  min-height:0;
  overflow:auto;
  scrollbar-gutter:stable;
}
body.server-match-active #server-match-screen .server-economy-card-art {
  aspect-ratio:var(--server-economic-art-ratio,16 / 9);
}
body.server-match-active #server-match-screen .server-economy-card-art[data-art-fit="contain"][data-art-epoch="1980"] .graphics-preview-frame > img {
  object-fit:contain;
  object-position:var(--server-economic-art-focus,50% 50%);
}
body.server-match-active #server-match-screen .server-economy-card-art[data-art-kind="atlas"] .graphics-atlas-tile {
  width:100%;
  height:100%;
  aspect-ratio:auto;
}
@media (max-width:700px) {
  body.server-match-active #server-match-screen > .server-match-layout {
    flex-basis:calc(50svh + 90px);
    height:calc(50svh + 90px);
    min-height:calc(50svh + 90px);
    max-height:none;
  }
  body.server-match-active #server-match-screen .server-match-map-wrap { min-height:50svh; }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-layout {
    flex-basis:330px;
    height:330px;
    min-height:330px;
    max-height:none;
  }
  body.server-match-active #server-match-screen[data-economic-expanded="true"] .server-match-map-wrap { min-height:230px; }
  body.server-match-active #server-match-screen .server-economy-workspace-heading { min-height:44px; padding:5px 7px; }
  body.server-match-active #server-match-screen .server-economy-tabs button { min-height:44px; padding:6px 10px; }
}

/* FIX-01 · group the authoritative materials instead of rendering a 90-item scroll rail. */
body.server-match-active #server-match-screen .server-match-stock-strip {
  display:grid;
  flex:0 0 auto;
  gap:7px;
  width:100%;
  height:auto;
  min-width:0;
  margin:0 0 7px;
  padding:8px;
  overflow:visible;
  border:1px solid rgba(77,201,225,.24);
  background:linear-gradient(100deg,rgba(5,22,30,.96),rgba(7,28,36,.9));
  box-shadow:inset 0 1px rgba(133,230,241,.04),0 5px 20px rgba(0,0,0,.12);
}
body.server-match-active #server-match-screen .server-match-stock-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}
body.server-match-active #server-match-screen .server-match-stock-head > div:first-child {
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px 12px;
  min-width:0;
}
body.server-match-active #server-match-screen .server-match-stock-heading {
  color:#b0eaf0;
  font:800 9px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
  letter-spacing:.11em;
}
body.server-match-active #server-match-screen .server-match-stock-status {
  color:#80aeb6;
  font:600 9px var(--chronos-font-ui,Inter,"Segoe UI",Arial,sans-serif);
}
body.server-match-active #server-match-screen .server-match-stock-actions {
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
}
body.server-match-active #server-match-screen .server-match-stock-actions > button {
  min-height:32px;
  padding:5px 10px;
  border:1px solid rgba(82,212,236,.38);
  background:linear-gradient(135deg,rgba(12,48,59,.96),rgba(5,22,30,.96));
  color:#a7e9ef;
  font:800 8px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
  letter-spacing:.07em;
  cursor:pointer;
}
body.server-match-active #server-match-screen .server-match-stock-actions > button:hover,
body.server-match-active #server-match-screen .server-match-stock-actions > button:focus-visible {
  border-color:#70e8f2;
  color:#f0feff;
  box-shadow:0 0 0 2px rgba(75,213,232,.12);
}
body.server-match-active #server-match-screen .server-match-stock-groups {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
  min-width:0;
}
body.server-match-active #server-match-screen .server-match-stock-group {
  display:grid;
  align-content:start;
  justify-items:start;
  gap:3px;
  min-width:0;
  min-height:68px;
  padding:6px 8px;
  border:1px solid rgba(77,201,225,.16);
  background:linear-gradient(135deg,rgba(7,31,40,.92),rgba(4,18,25,.9));
  color:#d5f5f7;
  text-align:left;
  cursor:pointer;
}
body.server-match-active #server-match-screen .server-match-stock-group:hover,
body.server-match-active #server-match-screen .server-match-stock-group:focus-visible {
  border-color:rgba(95,222,237,.7);
  background:linear-gradient(135deg,rgba(10,47,57,.96),rgba(5,22,30,.96));
  outline:none;
}
body.server-match-active #server-match-screen .server-match-stock-group-title {
  display:flex;
  align-items:center;
  gap:5px;
  max-width:100%;
  color:#a9e3e8;
  font:800 8px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
  letter-spacing:.055em;
}
body.server-match-active #server-match-screen .server-match-stock-group-title .server-economy-glyph { width:13px;height:13px; }
body.server-match-active #server-match-screen .server-match-stock-group > strong {
  color:#e1f8f6;
  font:700 9px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
}
body.server-match-active #server-match-screen .server-match-stock-group > small,
body.server-match-active #server-match-screen .server-match-stock-no-preview {
  color:#7fa8b0;
  font:600 8px var(--chronos-font-ui,Inter,"Segoe UI",Arial,sans-serif);
}
body.server-match-active #server-match-screen .server-match-stock-previews {
  display:grid;
  gap:2px;
  width:100%;
  margin-top:1px;
}
body.server-match-active #server-match-screen .server-match-stock-preview {
  display:flex;
  justify-content:space-between;
  gap:7px;
  min-width:0;
  color:#90b4ba;
  font:600 8px var(--chronos-font-ui,Inter,"Segoe UI",Arial,sans-serif);
}
body.server-match-active #server-match-screen .server-match-stock-preview strong {
  flex:0 0 auto;
  max-width:58%;
  min-width:0;
  overflow-wrap:anywhere;
  color:#83d6b5;
  font:700 8px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
  text-align:right;
}
body.server-match-active #server-match-screen .server-match-stock-preview-name {
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.server-match-active #server-match-screen .server-match-stock-warning {
  color:#f0cb72;
  font:800 8px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
}
body.server-match-active #server-match-screen .server-economy-material-filters {
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin:8px 0;
  padding:7px;
  border:1px solid rgba(77,201,225,.16);
  background:rgba(3,16,23,.58);
}
body.server-match-active #server-match-screen .server-economy-material-filters button {
  min-height:32px;
  padding:5px 8px;
  border:1px solid rgba(77,201,225,.19);
  background:rgba(7,27,35,.88);
  color:#91bac1;
  font:700 8px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
  cursor:pointer;
}
body.server-match-active #server-match-screen .server-economy-material-filters button[aria-pressed="true"] {
  border-color:#5cdceb;
  background:rgba(15,61,71,.92);
  color:#e7fdff;
}
body.server-match-active #server-match-screen .server-economy-material-filters small { color:#69cbd7; }
body.server-match-active #server-match-screen [data-server-material-row][hidden] { display:none !important; }
body.server-match-active #server-match-screen .server-economy-catalog-table { overflow-x:hidden; }
body.server-match-active #server-match-screen .server-economy-catalog-table table { width:100%;min-width:0;table-layout:fixed; }
body.server-match-active #server-match-screen .server-economy-catalog-table th,
body.server-match-active #server-match-screen .server-economy-catalog-table td { overflow-wrap:anywhere; }
@media (max-width:1100px) {
  body.server-match-active #server-match-screen .server-match-stock-groups { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:800px) {
  body.server-match-active #server-match-screen .server-match-stock-status { display:inline; }
}
@media (max-width:700px) {
  body.server-match-active #server-match-screen > .server-match-stock-strip { flex:0 0 auto;height:auto;max-height:none;overflow:visible; }
  body.server-match-active #server-match-screen .server-match-stock-strip { gap:8px;padding:8px; }
  body.server-match-active #server-match-screen .server-match-stock-head { align-items:flex-start; }
  body.server-match-active #server-match-screen .server-match-stock-head > div:first-child { display:grid;gap:3px; }
  body.server-match-active #server-match-screen .server-match-stock-actions { flex-wrap:wrap;justify-content:flex-end; }
  body.server-match-active #server-match-screen .server-match-stock-actions > button { min-height:40px;padding:6px 8px; }
  body.server-match-active #server-match-screen .server-match-stock-groups { grid-template-columns:repeat(3,minmax(0,1fr));gap:5px; }
  body.server-match-active #server-match-screen .server-match-stock-group { min-height:68px;padding:6px; }
  body.server-match-active #server-match-screen .server-match-stock-group-title { font-size:8px;overflow-wrap:anywhere; }
  body.server-match-active #server-match-screen .server-match-stock-group > strong { font-size:8px; }
  body.server-match-active #server-match-screen .server-match-stock-group > small,
  body.server-match-active #server-match-screen .server-match-stock-no-preview { font-size:8px; }
  body.server-match-active #server-match-screen .server-match-stock-preview,
  body.server-match-active #server-match-screen .server-match-stock-preview strong { font-size:8px; }
  body.server-match-active #server-match-screen .server-match-stock-warning { white-space:normal; }
  body.server-match-active #server-match-screen .server-economy-catalog-table thead { position:absolute; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
  body.server-match-active #server-match-screen .server-economy-catalog-table tbody { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px; }
  body.server-match-active #server-match-screen .server-economy-catalog-table tr { display:grid;grid-column:span 2;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;border:1px solid rgba(77,201,225,.18);background:rgba(5,23,31,.75); }
  body.server-match-active #server-match-screen .server-economy-catalog-table th { grid-column:1/-1;min-width:0;padding:7px; }
  body.server-match-active #server-match-screen .server-economy-catalog-table td { display:grid;gap:3px;min-width:0;padding:6px 7px;color:#c3e5e8;font-size:9px; }
  body.server-match-active #server-match-screen .server-economy-catalog-table td::before { content:attr(data-label);color:#7baeb6;font:700 7px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);letter-spacing:.04em;text-transform:uppercase; }
}

/* FIX-01 · Keep every economic control in the document's normal page scroll. */
body.server-match-active #server-match-screen > .server-match-economic-jobs[data-economic-workspace] {
  flex:0 0 auto;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
}
body.server-match-active #server-match-screen .server-economy-tabs {
  flex-wrap:wrap;
  overflow:visible;
}
body.server-match-active #server-match-screen .server-economy-panels {
  display:block;
  flex:0 0 auto;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
}
/* An earlier expanded-state rule kept the panel region at 40dvh. That made
   long active tabs paint underneath the following match footer. Keep the
   expanded workspace in normal document flow as well. */
body.server-match-active #server-match-screen[data-economic-expanded="true"] > .server-match-economic-jobs[data-economic-workspace][data-active-economic-view][data-economic-expanded="true"] .server-economy-panels {
  display:block;
  flex:0 0 auto;
  height:auto !important;
  min-height:0;
  max-height:none;
  overflow:visible;
}
body.server-match-active #server-match-screen .server-economy-panel:not([hidden]) {
  display:block;
  flex:0 0 auto;
  width:100%;
  min-width:0;
  height:auto;
  min-height:0;
  max-height:none;
  overflow:visible;
  overscroll-behavior:auto;
  scroll-margin-block-start:16px;
}
@media (max-width:700px) {
  body.server-match-active #server-match-screen .server-match-stock-groups {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
  }
  body.server-match-active #server-match-screen .server-match-stock-group {
    min-height:82px;
    padding:8px;
  }
  body.server-match-active #server-match-screen .server-match-stock-group-title { font-size:10px; }
  body.server-match-active #server-match-screen .server-match-stock-group > strong { font-size:10px; }
  body.server-match-active #server-match-screen .server-match-stock-group > small,
  body.server-match-active #server-match-screen .server-match-stock-no-preview,
  body.server-match-active #server-match-screen .server-match-stock-preview,
  body.server-match-active #server-match-screen .server-match-stock-preview strong { font-size:10px; }
}

/* FIX-06 · Keep the registered 1980 artwork at its source aspect and put
   facility information on a restrained translucent glass layer. */
body.server-match-active #server-match-screen .server-economy-card-art {
  background:#08151f;
}
body.server-match-active #server-match-screen .server-economy-card-art[data-art-kind="single"] .graphics-preview-frame > img {
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:var(--server-economic-art-focus,50% 50%);
}
body.server-match-active #server-match-screen .server-economy-card-art[data-art-kind="atlas"] .graphics-atlas-tile {
  width:100%;
  height:100%;
  aspect-ratio:auto;
}
body.server-match-active #server-match-screen .server-economy-card-art[data-art-kind="atlas"] .graphics-atlas-tile > img {
  max-width:none;
}
body.server-match-active #server-match-screen .server-economy-art-overlay {
  align-items:center;
  padding:10px 12px;
  border-top:1px solid rgba(205,235,239,.2);
  background:linear-gradient(180deg,rgba(4,15,22,.36),rgba(4,15,22,.70));
  box-shadow:0 -6px 18px rgba(0,0,0,.16);
  -webkit-backdrop-filter:blur(6px) saturate(112%);
  backdrop-filter:blur(6px) saturate(112%);
}
body.server-match-active #server-match-screen .server-economy-art-overlay strong {
  letter-spacing:.01em;
}
body.server-match-active #server-match-screen .server-economy-art-overlay em {
  background:rgba(4,13,18,.56);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
}
body.server-match-active #server-match-screen .server-economy-art-caption {
  border:1px solid rgba(205,235,239,.16);
  background:rgba(3,12,17,.58);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
@media (max-width:700px) {
  body.server-match-active #server-match-screen .server-economy-art-overlay { gap:7px; padding:8px 9px; }
  body.server-match-active #server-match-screen .server-economy-art-overlay strong { font-size:13px; }
  body.server-match-active #server-match-screen .server-economy-art-overlay small { font-size:9px; }
}

/* The match shell assigns a viewport height to every lightbox image. That
   height beats the base atlas aspect rule and reveals the next sprite row. */
body.server-match-active .asset-lightbox-visual.atlas {
  width:min(100%,760px);
  height:auto;
  max-height:none;
  aspect-ratio:var(--asset-tile-aspect,1.5);
  justify-self:center;
}
@media (max-height:720px) and (min-width:701px) {
  body.server-match-active .asset-lightbox-visual.atlas {
    width:auto;
    height:min(62dvh,480px);
    max-width:calc(100vw - 32px);
  }
}

/* Match economy art marked as a complete source image must never inherit atlas crop rules. */
body.server-match-active .asset-lightbox-visual.single-frame {
  width:100%;
  height:min(64dvh,700px);
  max-width:100%;
  aspect-ratio:auto;
  overflow:hidden;
}
body.server-match-active .asset-lightbox-visual.single-frame > img {
  position:static;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  transform:none !important;
}
@media (max-width:700px) {
  body.server-match-active .asset-lightbox-visual.single-frame {
    width:100%;
    height:min(58dvh,620px);
  }
}

/* GM-03 · Match remains a normal document: the full economy and its forms are
   reached with the page scrollbar, never through a narrow nested viewport. */
body.server-match-active {
  height:auto !important;
  min-height:100vh;
  overflow-x:hidden;
  overflow-y:auto !important;
}
body.server-match-active.asset-lightbox-open { overflow:hidden !important; }
body.server-match-active #game-shell {
  height:auto !important;
  min-height:100vh;
  max-height:none !important;
  overflow:visible !important;
}
body.server-match-active #server-match-screen:not([hidden]) {
  height:auto !important;
  min-height:100dvh;
  max-height:none !important;
  overflow-x:clip !important;
  overflow-y:visible !important;
}

/* Free-text search is bounded to material names, IDs and units in the
   confirmed catalog; it filters the existing ledger table only. */
body.server-match-active #server-match-screen .server-economy-material-toolbar {
  display:grid;
  grid-template-columns:minmax(230px,.58fr) minmax(0,1.42fr);
  align-items:end;
  gap:8px;
  min-width:0;
  margin:9px 0;
}
body.server-match-active #server-match-screen .server-economy-material-search {
  display:grid;
  gap:5px;
  min-width:0;
  color:#82b2ba;
  font:700 9px var(--chronos-font-data,ui-monospace,SFMono-Regular,Consolas,monospace);
  letter-spacing:.05em;
}
body.server-match-active #server-match-screen .server-economy-material-search input {
  width:100%;
  min-width:0;
  min-height:40px;
  padding:8px 10px;
  border:1px solid rgba(77,201,225,.25);
  background:rgba(4,18,25,.94);
  color:#e3faff;
  font:500 12px var(--chronos-font-ui,Inter,"Segoe UI",Arial,sans-serif);
}
body.server-match-active #server-match-screen .server-economy-material-search input:focus-visible {
  outline:2px solid #62deea;
  outline-offset:2px;
}
body.server-match-active #server-match-screen .server-economy-material-toolbar .server-economy-material-filters {
  margin:0;
  min-width:0;
}
@media (max-width:700px) {
  body.server-match-active #server-match-screen .server-economy-material-toolbar {
    grid-template-columns:minmax(0,1fr);
    gap:6px;
  }
  body.server-match-active #server-match-screen .server-economy-material-search input { min-height:42px; }
  body.server-match-active #server-match-screen .server-match-stock-groups {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }
  body.server-match-active #server-match-screen .server-match-stock-group {
    min-height:78px;
    padding:7px 6px;
  }
  body.server-match-active #server-match-screen .server-match-stock-group-title { font-size:9px; }
  body.server-match-active #server-match-screen .server-match-stock-group > strong,
  body.server-match-active #server-match-screen .server-match-stock-group > small,
  body.server-match-active #server-match-screen .server-match-stock-no-preview,
  body.server-match-active #server-match-screen .server-match-stock-preview,
  body.server-match-active #server-match-screen .server-match-stock-preview strong { font-size:9px; }
}

/* Wide command-center navigation: keep every destination visible while giving
   the brand/session row and route row enough room to stay readable. */
@media (min-width: 1500px) {
  body:not([data-app-view="home"]) .preflight-topbar {
    height: auto;
    min-height: 128px;
    flex-wrap: wrap;
    align-content: center;
    column-gap: 12px;
    row-gap: 6px;
    padding-block: 8px;
  }

  body:not([data-app-view="home"]) .preflight-topbar > .brand-block {
    order: 1;
    flex: 0 0 205px;
  }

  body:not([data-app-view="home"]) .preflight-topbar > .preflight-session {
    order: 2;
    flex: 0 0 128px;
    margin-left: auto;
  }

  body:not([data-app-view="home"]) .preflight-topbar > .preflight-nav {
    order: 3;
    flex: 0 0 100%;
    min-height: 64px;
    margin-left: 0;
    overflow: visible;
  }

  body:not([data-app-view="home"]) .preflight-nav-group {
    flex: 0 0 auto;
    align-self: stretch;
  }

  body:not([data-app-view="home"]) .preflight-nav-group.operations {
    flex-basis: 27%;
    margin-left: 0;
    padding-left: 0;
  }

  body:not([data-app-view="home"]) .preflight-nav-group:not(.operations):not(.account-entry):not(.public-entry) {
    flex-basis: 52%;
  }

  body:not([data-app-view="home"]) .preflight-nav-group.account-entry {
    flex-basis: 12%;
  }

  body:not([data-app-view="home"]) .preflight-nav-group.public-entry {
    flex-basis: 9%;
  }

  body:not([data-app-view="home"]) .preflight-nav-item {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: 8px;
    font-size: 10px;
    letter-spacing: .035em;
  }

  body:not([data-app-view="home"]) .preflight-nav-item small {
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: .02em;
    white-space: normal;
  }
}

/* Unified pre-match shell. These rules deliberately stop at #preflight-shell;
   the active match client keeps its existing layout and interaction model. */
#preflight-shell {
  --shell-ink: #061017;
  --shell-panel: #0a1a22;
  --shell-panel-raised: #0d2029;
  --shell-line: rgba(107, 205, 221, .22);
  --shell-cyan: #71e5f1;
  --shell-lime: #66e1b2;
  --shell-amber: #f1c46d;
  --shell-text: #d9eef1;
  --shell-muted: #91adb4;
  --shell-faint: #63828b;
  color: var(--shell-text);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}

#preflight-shell .preflight-topbar {
  display: grid;
  grid-template-columns: minmax(205px, 258px) minmax(0, 1fr) minmax(170px, 218px);
  grid-template-areas: "brand nav session";
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
  width: 100%;
  min-width: 0;
  min-height: 96px;
  height: auto;
  padding: 10px clamp(14px, 2.1vw, 36px);
}

#preflight-shell .preflight-topbar > .brand-block {
  grid-area: brand;
  min-width: 0;
  flex: initial;
  gap: 11px;
}

#preflight-shell .preflight-nav {
  grid-area: nav;
  display: grid;
  gap: 4px;
  align-self: center;
  min-width: 0;
  width: 100%;
  margin: 0;
  overflow: visible;
}

#preflight-shell .preflight-menu-toggle { display: none; }

#preflight-shell .preflight-nav-panel,
#preflight-shell .preflight-nav-panel[hidden] {
  display: grid;
  grid-template-rows: auto auto;
  gap: 3px;
  min-width: 0;
}

#preflight-shell .preflight-nav-primary {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  align-items: stretch;
  min-width: 0;
  border-bottom: 1px solid var(--shell-line);
}

#preflight-shell .preflight-nav-primary > .preflight-nav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 48px;
  padding: 8px clamp(4px, .65vw, 11px);
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--shell-muted);
  background: transparent;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .045em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}

#preflight-shell .preflight-nav-primary > .preflight-nav-item::before,
#preflight-shell .preflight-nav-primary > .preflight-nav-item::after { display: none; }

#preflight-shell .preflight-nav-primary > .preflight-nav-item:hover,
#preflight-shell .preflight-nav-primary > .preflight-nav-item:focus-visible {
  color: var(--shell-text);
  border-bottom-color: rgba(113, 229, 241, .55);
  background: rgba(113, 229, 241, .055);
  box-shadow: none;
  text-shadow: none;
  animation: none;
}

#preflight-shell .preflight-nav-primary > .preflight-nav-item.active {
  color: var(--shell-cyan);
  border-bottom-color: var(--shell-cyan);
  background: linear-gradient(180deg, rgba(113, 229, 241, .09), transparent);
  box-shadow: none;
  text-shadow: 0 0 12px rgba(113, 229, 241, .24);
}

#preflight-shell .preflight-nav-primary > .preflight-nav-item:disabled {
  opacity: .52;
  filter: none;
}

#preflight-shell .preflight-nav-primary > .preflight-nav-item.locked::after {
  content: "LOCKED";
  position: static;
  display: inline-block;
  margin-inline-start: 5px;
  color: var(--shell-amber);
  font: 700 7px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
  transform: none;
  opacity: .9;
}

#preflight-shell .preflight-nav-secondary {
  display: block;
  min-width: 0;
  min-height: 25px;
}

#preflight-shell .preflight-nav-secondary[hidden] { display: none; }

/* Component display rules must respect the filters' native hidden state. */
#preflight-shell .graphics-card[hidden],
#preflight-shell .world-nation-option[hidden],
#preflight-shell .world-nation-empty[hidden] { display: none !important; }

#preflight-shell .graphics-filter-status {
  margin: 8px 0 12px;
  color: var(--shell-muted);
  font-size: 12px;
  line-height: 1.4;
}

#preflight-shell .ui-data-source-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--shell-line);
  border-left-color: var(--shell-amber);
  color: var(--shell-muted);
  background: var(--shell-panel);
  font-size: 13px;
  line-height: 1.55;
}

#preflight-shell .account-profile-fields > .start-form-error,
#preflight-shell .account-form-grid > .start-form-error {
  grid-column: 1 / -1;
}

#preflight-shell .preflight-nav-secondary-links,
#preflight-shell .public-site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 3px 7px;
  min-width: 0;
  padding-inline: 3px;
}

#preflight-shell .preflight-nav-secondary-links button,
#preflight-shell .public-site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid transparent;
  color: var(--shell-faint);
  background: transparent;
  font: 700 11px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .07em;
  text-decoration: none;
  cursor: pointer;
}

#preflight-shell .preflight-nav-secondary-links button:hover,
#preflight-shell .preflight-nav-secondary-links button:focus-visible,
#preflight-shell .preflight-nav-secondary-links button.active,
#preflight-shell .public-site-nav a:hover,
#preflight-shell .public-site-nav a:focus-visible {
  border-color: var(--shell-line);
  color: var(--shell-cyan);
  background: rgba(113, 229, 241, .06);
  outline-offset: 1px;
}

#preflight-shell .preflight-topbar > .preflight-session {
  grid-area: session;
  display: flex;
  align-items: center;
  justify-self: end;
  min-width: 0;
  max-width: 100%;
  padding-left: 12px;
  gap: 8px;
  border-left-color: var(--shell-line);
}

#preflight-shell .preflight-session > span:not(.live-dot) { min-width: 0; }
#preflight-shell .preflight-session b { color: var(--shell-lime); }
#preflight-shell .preflight-session small { color: var(--shell-muted); }

#preflight-shell .preflight-session .public-header-auth {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: 0;
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 3px;
  color: var(--shell-cyan);
  border-color: var(--shell-line);
  font: 700 8px ui-monospace, SFMono-Regular, Consolas, monospace;
}

#preflight-shell .alliance-preview-note {
  display: grid;
  grid-template-columns: minmax(165px, .32fr) minmax(0, 1fr);
  align-items: center;
  gap: 8px 16px;
  padding: 12px 16px;
  border: 1px solid rgba(241, 196, 109, .35);
  border-top: 0;
  color: var(--shell-muted);
  background: linear-gradient(90deg, rgba(241, 196, 109, .07), rgba(10, 26, 34, .86));
  font-size: 12px;
  line-height: 1.5;
}

#preflight-shell .alliance-preview-note strong {
  color: var(--shell-amber);
  font: 750 9px ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

#preflight-shell .alliance-preview-note span { min-width: 0; }

#preflight-shell .alliance-example-time {
  position: relative;
  color: var(--shell-faint);
  font: 800 9px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .04em;
}

#preflight-shell .preflight-page {
  width: min(1820px, calc(100vw - 48px));
  min-width: 0;
  margin-inline: auto;
}

#preflight-shell .preflight-frame,
#preflight-shell .start-page-frame { min-width: 0; }

#preflight-shell .preflight-status-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#preflight-shell :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--shell-cyan);
  outline-offset: 3px;
}

@media (max-width: 1100px) {
  #preflight-shell .preflight-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand session" "nav nav";
    gap: 8px 14px;
    min-height: 0;
    padding: 10px clamp(12px, 2.4vw, 22px);
  }

  #preflight-shell .preflight-nav { width: 100%; }

  #preflight-shell .preflight-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--shell-line);
    border-radius: 3px;
    color: var(--shell-cyan);
    background: rgba(8, 26, 35, .92);
    font: 750 10px ui-monospace, SFMono-Regular, Consolas, monospace;
    letter-spacing: .1em;
    cursor: pointer;
  }

  #preflight-shell .preflight-menu-toggle:hover,
  #preflight-shell .preflight-menu-toggle:focus-visible {
    border-color: var(--shell-cyan);
    background: rgba(113, 229, 241, .08);
  }

  #preflight-shell .preflight-menu-toggle-icon { font-size: 15px; }

  #preflight-shell .preflight-nav-panel,
  #preflight-shell .preflight-nav-panel[hidden] {
    display: grid;
    grid-template-rows: auto auto;
    gap: 7px;
    margin-top: 7px;
    padding: 8px;
    border: 1px solid var(--shell-line);
    background: rgba(5, 17, 24, .98);
  }

  #preflight-shell .preflight-nav-panel[hidden] { display: none !important; }

  #preflight-shell .preflight-nav-primary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 0;
    gap: 5px;
  }

  #preflight-shell .preflight-nav-primary > .preflight-nav-item {
    justify-content: flex-start;
    min-height: 42px;
    padding: 8px 10px;
    border: 1px solid var(--shell-line);
    border-bottom-width: 1px;
    font-size: 11px;
    text-align: left;
  }

  #preflight-shell .preflight-nav-primary > .preflight-nav-item.active {
    border-color: rgba(113, 229, 241, .58);
  }

  #preflight-shell .preflight-nav-secondary-links,
  #preflight-shell .public-site-nav { gap: 4px; }

  #preflight-shell .preflight-nav-secondary-links button,
  #preflight-shell .public-site-nav a {
    min-height: 36px;
    border-color: rgba(107, 205, 221, .12);
    font-size: 11px;
  }

  #preflight-shell .preflight-session { align-self: center; }
}

@media (max-width: 620px) {
  #preflight-shell .preflight-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 9px 12px;
  }

  #preflight-shell .brand-block { gap: 8px; }
  #preflight-shell .brand-mark { width: 34px; height: 34px; }
  #preflight-shell .preflight-topbar h1 { font-size: 10px; letter-spacing: .1em; }
  #preflight-shell .preflight-topbar .eyebrow { font-size: 6px; }
  #preflight-shell .preflight-session { gap: 5px; padding-left: 7px; }
  #preflight-shell .preflight-session small { max-width: 100px; line-height: 1.3; }
  #preflight-shell .preflight-session .public-header-auth { min-height: 36px; padding: 6px 7px; font-size: 7px; }
  #preflight-shell .alliance-preview-note { grid-template-columns: minmax(0, 1fr); padding: 11px 12px; font-size: 11px; }
  #preflight-shell .preflight-nav-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #preflight-shell .preflight-nav-primary > .preflight-nav-item { min-height: 44px; }
  #preflight-shell .preflight-page { width: calc(100vw - 24px); padding-top: 22px; }
  #preflight-shell .preflight-status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #preflight-shell .command-lobby-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    overflow: visible;
  }
  #preflight-shell .command-lobby-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 8px;
    font-size: 11px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  #preflight-shell .alliance-members-table {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    overflow: visible;
  }
  #preflight-shell .alliance-member-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    width: 100%;
    gap: 10px;
    padding: 12px;
  }
  #preflight-shell .alliance-member-head { display: none; }
  #preflight-shell .alliance-member-row > span { min-width: 0; }
  #preflight-shell .alliance-member-identity,
  #preflight-shell .alliance-member-general { grid-column: 1 / -1; }
  #preflight-shell .alliance-member-row strong,
  #preflight-shell .alliance-member-row small {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

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

/* UI-REVIEW FIX · keep the map primary and the economy workspace intentional.
   The collapsed state contains only its heading and tabs; selecting a tab or
   using VERGRÖSSERN opens the full server-confirmed economic view. */
body.server-match-active #server-match-screen > .server-match-economic-jobs[data-economic-workspace][data-economic-expanded="false"] {
  flex:0 0 auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}
body.server-match-active #server-match-screen > .server-match-economic-jobs[data-economic-workspace][data-economic-expanded="false"] .server-economy-panels {
  display:none !important;
}
/* Enabled world commands must look actionable. The legacy rule styled every
   command as disabled, even when the server had marked it ready. */
body.server-match-active #server-match-screen .server-world-action:not(:disabled) {
  border-color:rgba(82,212,236,.48) !important;
  background:linear-gradient(135deg,rgba(12,55,67,.9),rgba(6,27,36,.92)) !important;
  color:#d8fbff !important;
  cursor:pointer !important;
}
body.server-match-active #server-match-screen .server-world-action:not(:disabled):hover,
body.server-match-active #server-match-screen .server-world-action:not(:disabled):focus-visible {
  border-color:#68e9f2 !important;
  box-shadow:0 0 0 2px rgba(68,218,235,.14);
}
@media (min-width:701px) {
  body.server-match-active #server-match-screen > .server-match-layout {
    flex:1 1 auto;
    min-height:420px;
  }
}