/* Preserve the display headings; combine Host Grotesk with the colony's neon palette. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Host+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #120925;
  --text: #e6e6eb;
  --muted: #abb0bd;
  --line: #85839d4a;
  --strong-line: #b9b6da;
  --accent: #c3ff12;
  --mint: #c3ff12;
  --green: #c3ff12;
  --glass: #050509d9;
  --paper: #b9bac8;
  --ink: #101018;
  --cobalt: #251acb;
  --body-font: 'Host Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --heading-mono: 'IBM Plex Mono', Consolas, monospace;
  --mono: var(--body-font);
  --display: 'Chakra Petch', Arial, sans-serif;
  font-family: var(--mono);
}
body.color-backdrop { --glass: #050509d9; background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; }
body.color-backdrop::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--bg) url('./tunnel-contours.png') center / cover no-repeat;
}
button { font-family: var(--mono); border-radius: 0; }
button:hover { border-color: var(--accent); color: var(--accent); background: #c3ff1210; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
* { scrollbar-color: #737189 transparent; }

.site-header { margin: 0 28px; min-height: 120px; padding: 22px 0 18px; border-color: #c3ff1280; align-items: flex-end; }
.site-header:after { width: 94px; height: 6px; left: 0; bottom: -6px; background: var(--accent); box-shadow: none; }
.color-backdrop .brand { font-family: 'Jost','Segoe UI Light',sans-serif; font-size: clamp(34px,3vw,44px); font-weight: 300; letter-spacing: .62em; line-height: 1.1; margin: 0 -.62em 0 0; color: #eceee5; font-synthesis: none; text-shadow: 0 1px 3px #000; }
.header-actions { gap: 7px; padding-bottom: 3px; flex-wrap: wrap; }
.header-actions button { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; padding: 10px 13px; border-radius: 0; background: #060609c9; backdrop-filter: none; }
#about-button { background: var(--accent); border-color: var(--accent); color: #111500; }
#about-button:hover { background: #d9ff79; }
.live-state { color: var(--accent); font-size: 11px; letter-spacing: .02em; margin-right: 14px; }
.header-actions .live-state { background: var(--bg); padding: 5px 7px; }
.live-dot { border-radius: 0; width: 6px; height: 6px; box-shadow: none; }
.lab-layout { grid-template-columns: 186px minmax(0,1fr) 300px; gap: 16px 18px; margin: 22px 28px 0; }
.intro { gap: 14px; margin: 0; min-height: 47px; align-items: flex-start; }
.intro:before { display: none; }
.intro:after { height: 7px; margin-top: 6px; flex: 0 0 54px; background: repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 12px); }
.intro h1 { font: 400 13px/1.5 var(--heading-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.intro { align-items: center; flex-wrap: wrap; }
.intro h1 { order: 0; }
.intro:after { order: 1; margin-top: 0; }
.header-actions .twitter-link { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: #eeedf5; background: #060609c9; border: 1px solid #85839d70; }
.twitter-link svg { width: 18px; height: 18px; }
.header-actions .twitter-link:hover { color: #8cddff; border-color: #62cfff; background: #141031; }
.contract-link { order: 2; margin-left: auto; display: flex; align-items: center; gap: 12px; min-height: 32px; padding: 6px 11px; border: 1px solid #7670a86b; background: #090713ed; }
.token-label { color: #73c9f4; font: 500 11px var(--body-font); letter-spacing: .08em; padding-right: 11px; border-right: 1px solid #77709b66; }
#contract-address { color: #c6bfda; font: 12px/1.4 var(--body-font); white-space: nowrap; }
@media(max-width:620px) {
  .header-actions .twitter-link { width: 32px; height: 32px; flex-basis: 32px; }
  .twitter-link svg { width: 16px; height: 16px; }
  .contract-link { min-height: 29px; gap: 8px; padding: 5px 8px; }
  .token-label { padding-right: 8px; font-size: 10px; }
  #contract-address { font-size: 11px; }
  .intro:has(.contract-link):after { display: none; }
}

.side-panel,.metrics-panel,.chat-section,.excavation-race,.stage-toolbar {
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.color-backdrop .side-panel,.color-backdrop .chat-section,.color-backdrop .metrics-panel { backdrop-filter: none; border-color: #79778c78; }
.side-panel:before,.chat-section:before { display: none; }
.panel-heading { padding: 15px 13px; border-color: #64627766; }
.panel-heading strong { font: 700 17px/1.1 var(--display); text-transform: uppercase; letter-spacing: -.035em; }
.panel-heading>span { font-size: 11px; }
.residents-panel { background: #07070dda; border-top: 4px solid var(--cobalt); }
.residents-panel .panel-heading { color: var(--accent); }
.residents-panel .panel-heading>span { color: #a2a4b8; }
.panel-foot { font: 11px var(--mono); color: #bebdcc; padding: 12px; }
.worker-list { padding: 6px; }
.worker-row { border-radius: 0; gap: 7px; padding: 12px 5px; }
.worker-row:hover { background: #b0a8ff12; border-color: #6a689d; }
.worker-row.is-selected { background: #241ca85c; border-color: #6860df; }
.worker-copy strong { font: 500 12px var(--mono); }
.worker-copy small { font: 10px/1.5 var(--mono); color: #a4a5b6; }
.worker-icon { width: 26px; height: 28px; border-radius: 0; border: 1px solid currentColor; font-size: 10px; }
.worker-status { border-radius: 0; }

.excavation-race { background: #09090fea; border: 1px solid #9591b26e; padding: 16px 17px 12px; margin-bottom: 16px; position: relative; }
.race-heading { margin-bottom: 15px; }
.race-heading h2 { font: 700 21px/1 var(--display); text-transform: uppercase; letter-spacing: -.04em; color: var(--accent); }
.race-heading>span { color: #bebcca; font-size: 10px; }
.race-teams { gap: 12px; }
.race-team>span { font: 500 13px var(--mono); text-transform: uppercase; }
.race-team i { width: 7px; height: 7px; box-shadow: none; border-radius: 0; }
.race-team>strong { font: 500 23px/1.1 var(--mono); }
.race-team small { color: #a8a8bc; font-size: 10px; }
.race-team>strong small { font: 10px var(--mono); }
.race-vs { color: #bfbbd3; }
.race-track { margin: 13px 0 8px; height: 38px; background: #080611; border-radius: 0; gap: 0; border-block: 1px solid #8071c328; isolation: isolate; }
.race-track:before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #bcb0e81c; }
.race-fill { overflow: hidden; flex: 0 0 auto; }
.race-fill.blue { color: #59cfff; background: linear-gradient(90deg,#30209c24,transparent); box-shadow: none; }
.race-fill.red { color: #ff708e; background: linear-gradient(90deg,transparent,#861d6424); box-shadow: none; }
.race-wave { position: absolute; inset: 0 auto 0 0; width: 200%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px currentColor); animation: race-current 5s linear infinite; }
.race-fill.red .race-wave { animation-direction: reverse; animation-duration: 6.2s; }
.race-fill:after { content: ''; position: absolute; inset: 7px 0 7px auto; width: 2px; background: currentColor; box-shadow: 0 0 8px currentColor; }
.race-fill.red:after { left: 0; right: auto; }
.race-midpoint { top: calc(50% - 4px); bottom: auto; height: 8px; background: #f0eaff60; z-index: 1; }
.race-track.is-empty .race-fill { opacity: .25; }
.race-track.is-empty .race-wave,.race-track.is-paused .race-wave { animation-play-state: paused; }
.race-track.is-empty .race-fill:after { opacity: 0; }
@keyframes race-current { to { transform: translateX(-50%); } }
@media(prefers-reduced-motion:reduce) { .race-track .race-fill .race-wave { animation-duration: 16s; } .race-fill { transition: none; } }
.race-foot { color: #aaa8bd; font-size: 10px; }
.tank-shell { border-radius: 0; border: 1px solid #c2c0de; box-shadow: none; background: #160c36; }
.tank-shell:after,#world { border-radius: 0; }
.tank-corners { inset: -4px; }
.tank-corners i { width: 13px; height: 13px; border-color: var(--accent); filter: none; }
.scene-top { top: 9px; left: 9px; right: 9px; }
.specimen,.scene-condition { background: #060608e8; color: #d6e4ac; border-color: #bacb845a; border-radius: 0; font-family: var(--mono); backdrop-filter: none; }
.specimen { font-size: 10px; letter-spacing: .025em; }
.scene-condition { font-size: 9px; }
.specimen b,.scene-condition i { color: var(--accent); }
.feed-mark { background: var(--accent); border-radius: 0; box-shadow: none; }
.observation-note { background: #050509ed; color: #d6d7bc; backdrop-filter: none; font-size: 10px; }
.stage-toolbar { margin-top: 12px; padding: 7px 8px; background: #06060aea; border-color: #77728e; }
.view-controls button,.speed-controls button { border-radius: 0; font-size: 12px; }
.view-controls button.active,.speed-controls button.active { color: #141600; background: var(--accent); border-color: var(--accent); }
.simulation-controls>button { color: #d9d6e5; }
.speed-controls { border-color: #6b637f; }
.metrics-panel { min-height: 76px; padding: 14px 16px; background: var(--cobalt); }
.color-backdrop .metrics-panel { border-color: #6253ff; }
.metrics strong { color: #d9ff70; font: 500 23px/1 var(--mono); }
.metrics small { color: #d6ff5d; }
.metrics span,.session-time>span { color: #ddd9ff; font: 10px var(--mono); text-transform: uppercase; }
.session-time strong { color: var(--accent); font-size: 11px; }
.session-time { border-color: #9890fb77; }

/* The pale mission card deliberately contrasts with the black terminal. */
.observatory-panel { background: var(--paper); color: var(--ink); border-top: 4px solid var(--paper); }
.observatory-panel .panel-heading { padding-top: 12px; }
.observatory-panel .panel-heading>span { color: #3c3b4b; background: #dce0e7; padding: 3px 6px; }
.panel-tabs { border-color: #777789; padding: 8px; gap: 3px; }
.panel-tabs button { border-radius: 0; color: #242432; font: 500 12px var(--mono); text-transform: uppercase; }
.panel-tabs button:hover { background: #0b0b1520; border-color: #0b0b1550; color: #0b0b15; }
.panel-tabs button[aria-selected=true] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
#active-count { border-radius: 0; background: #10102018; color: #353544; }
.panel-tabs button[aria-selected=true] #active-count { background: #b8bbd030; color: #d4d6e2; }
.panel-content { padding: 19px 17px; }
.field-label { color: #3f3f50; font: 11px var(--mono); letter-spacing: 0; }
.panel-content h2 { font: 700 26px/1.03 var(--display); letter-spacing: -.05em; text-transform: uppercase; margin: 12px 0 10px; }
.muted { color: #454553; font: 11px/1.6 var(--mono); }
.condition-card { padding: 14px 12px; margin: 19px 0 27px; border: 0; border-radius: 0; background: #0c0b12; position: relative; }
.condition-card:after { content: ''; position: absolute; left: -17px; right: -17px; bottom: -15px; height: 8px; background: linear-gradient(90deg,#dbdbe5 0 14%,transparent 14% 28%,#dbdbe5 28% 42%,transparent 42% 63%,#dbdbe5 63%); }
.condition-card strong { font: 500 13px/1.4 var(--mono); color: var(--accent); }
.condition-card p { font: 12px/1.7 var(--mono); color: #c2c3d3; }
.condition-card.is-alert { background: #310d19; border: 0; }
.condition-card.is-alert strong { color: #ffa7b5; }
.condition-card.is-alert p { color: #e1c1ce; }
.panel-content h3 { font: 600 13px var(--heading-mono); text-transform: uppercase; margin-top: 23px; }
.panel-caption,.empty-events { font: 12px/1.65 var(--mono); color: #454450; }
.needs-grid { gap: 14px; }
.needs-grid label { color: #30303d; font: 12px var(--mono); }
.needs-grid label span { color: #141421; font-size: 11px; }
meter { background: #fff6; height: 7px; }
meter::-webkit-meter-bar { background: #fff6; }
meter::-webkit-meter-optimum-value { background: #11111c; }
meter::-moz-meter-bar { background: #11111c; }
.meter-note { color: #50505e; font-size: 10px; }
.activity-grid { gap: 1px; background: #777888; border: 1px solid #777888; }
.activity-grid>div { padding: 12px 10px; border: 0; background: #c9cbd6; gap: 6px; }
.activity-grid strong { font: 500 24px var(--mono); }
.activity-grid span { color: #35353f; font: 11px/1.5 var(--mono); }
.panel-disclaimer { color: #444351; font: 10px/1.75 var(--mono); }
#selected-name { background: #101017; width: fit-content; max-width: 100%; padding: 6px 8px; font-size: 24px; }
.trait-tags span { color: #171724; border-color: #6c6c7a; border-radius: 0; font-size: 11px; }
.ant-details>div { border-color: #858594; }
.ant-details dt,.ant-details dd { color: #232332; font: 12px var(--mono); }
.event-entry { border-color: #858594; }
.event-entry strong { font: 500 12px var(--mono); color: #151522; }
.event-entry small { font-size: 9px; color: #50515f; }
.event-entry small.is-live { background: #13131d; color: var(--accent); padding: 3px; }
.event-entry p { color: #454553; font-size: 11px; }
.event-entry[data-kind=fight] strong { color: #881d33; }

.chat-section { background: #050509ed; border-top: 4px solid var(--cobalt); }
.chat-heading { padding: 15px 18px; background: #030305; border-color: #79778c66; }
.chat-heading strong { font: 700 20px var(--display); letter-spacing: -.04em; text-transform: uppercase; color: var(--accent); }
.terminal-icon { color: var(--accent); font-size: 19px; }
.chat-badge { color: #c6c5df; border-color: #6e6687; font-size: 10px; }
.chat-explainer { color: var(--accent); font-size: 10px; letter-spacing: .02em; }
.color-backdrop .chat-log { background: #06060bd9; height: 205px; }
.message { font-size: 13px; grid-template-columns: 58px 248px minmax(0,1fr); padding: 9px 0; }
.message p { color: #cfccd9; }
.message .mention { color: var(--accent); }
.message time,.system-message>span { color: #8b829f; }
.message-target { color: #a8a0b8; }
.message-target:before { color: #756a8b; }
.system-message { color: #a7a58f; font-size: 12px; }
.chat-footer { background: #0a090f; border-color: #69627c; color: #aaa3bc; font: 10px/1.5 var(--mono); }
#catch-up { background: var(--accent); color: #151900; border-color: var(--accent); border-radius: 0; box-shadow: none; }
.has-conflict .chat-section { border-top-color: #ff6785; box-shadow: none; }
.event-marker,.event-banner { border-radius: 0; background: #090613f5; backdrop-filter: none; }
.event-marker[data-stage=fighting] { background: #380915; }
.message-event { border-radius: 0; }
.tank-shell.has-fight { border-color: #ff7892; box-shadow: 0 0 0 3px #ff346134; }

footer { margin: 0 28px; padding: 23px 0 55px; color: #c6c2d9; font: 12px/1.6 var(--mono); }
footer strong { font: 600 12px var(--mono); color: var(--accent); letter-spacing: 0; }
footer a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
footer>span,footer>a { background: var(--bg); padding: 3px 5px; }
dialog { background: #b9bac8; border: 1px solid #e0e0ee; border-radius: 0; color: var(--ink); backdrop-filter: none; }
dialog::backdrop { background: #020205c9; }
dialog .eyebrow { color: #31313c; font-size: 11px; }
dialog h2 { font: 700 34px/1 var(--display); text-transform: uppercase; letter-spacing: -.04em; }
dialog p { color: #282835; font: 13px/1.8 var(--mono); }
dialog p.small { color: #3e3d4b; font: 11px/1.8 var(--mono); }
.close-dialog:hover { color: #000; }
.primary { background: #12121c; color: var(--accent); border-radius: 0; font: 500 13px var(--mono); text-transform: uppercase; }
.primary:hover { background: #252437; color: var(--accent); }
.hide-side-panels .lab-layout { max-width: 1440px; padding: 0 28px; }

@media(min-width:1700px) {
  .lab-layout { grid-template-columns: 212px minmax(0,1fr) 334px; gap: 20px 26px; margin: 25px 42px 0; }
  .site-header,footer { margin-left: 42px; margin-right: 42px; }
  .site-header { min-height: 145px; }
  .worker-copy strong { font-size: 13px; }
  .worker-copy small { font-size: 11px; }
  .panel-content { padding: 22px; }
  .panel-content h2 { font-size: 31px; }
  .condition-card:after { left: -22px; right: -22px; }
  .panel-caption,.condition-card p { font-size: 13px; }
  .metrics strong { font-size: 27px; }
  .metrics span { font-size: 11px; }
  .chat-log { height: 218px; }
}
@media(max-width:1180px) and (min-width:981px) {
  .lab-layout { grid-template-columns: 160px minmax(0,1fr) 254px; gap: 14px; margin-left: 20px; margin-right: 20px; }
  .site-header,footer { margin-left: 20px; margin-right: 20px; }
  .race-heading { flex-direction: column; align-items: flex-start; gap: 7px; }
  .race-team>span { font-size: 12px; }
  .race-team>span small { display: none; }
  .race-team>strong { font-size: 20px; }
  .worker-copy strong { font-size: 11px; }
  .worker-icon { width: 20px; }
  .worker-status { display: none; }
  .panel-heading { padding: 13px 10px; }
  .panel-heading strong { font-size: 16px; }
  .panel-heading>span { font-size: 9px; }
  .metrics strong { font-size: 21px; }
  .metrics span { font-size: 9px; }
  .view-controls button { padding: 0 5px; }
  .simulation-controls { gap: 4px; }
  .speed-controls { padding: 0 3px; }
}
@media(max-width:980px) {
  .lab-layout { grid-template-columns: 1fr 1fr; grid-template-areas: 'intro intro' 'stage stage' 'metrics metrics' 'chat chat' 'residents observatory'; }
  .side-panel { height: 455px; }
  .site-header { align-items: center; min-height: 111px; }
  .header-actions .live-state { display: none; }
  .metrics span { font-size: 11px; }
  .worker-copy strong { font-size: 13px; }
  .worker-copy small { font-size: 11px; }
  .worker-status { display: block; }
}
@media(max-width:620px) {
  .site-header { margin: 0 14px; min-height: 0; padding: 26px 0 15px; align-items: flex-start; gap: 20px; }
  .color-backdrop .brand { font-size: clamp(21px,6.3vw,32px); letter-spacing: .62em; margin: 0 -.62em 0 0; }
  .header-actions { width: 100%; justify-content: space-between; padding: 0; margin: 0; }
  .header-actions button { font-size: 10px; padding: 8px 11px; }
  .header-actions .live-state { display: flex; font-size: 9px; margin: 0; order: 3; }
  .lab-layout,.hide-side-panels .lab-layout { grid-template-columns: minmax(0,1fr); grid-template-areas: 'intro' 'stage' 'metrics' 'chat' 'observatory' 'residents'; gap: 15px; margin: 20px 14px 0; padding: 0; }
  .hide-side-panels .lab-layout { grid-template-areas: 'intro' 'stage' 'metrics' 'chat'; }
  .intro { min-height: 35px; gap: 13px; }
  .intro h1 { font-size: 11px; }
  .intro:after { height: 5px; flex-basis: 42px; margin-top: 6px; }
  .excavation-race { padding: 15px 12px 12px; margin-bottom: 15px; }
  .race-heading { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 13px; }
  .race-heading h2 { font-size: 22px; }
  .race-heading>span { font-size: 10px; text-align: left; }
  .race-team>span { font-size: 12px; gap: 4px; }
  .race-team>span small { font-size: 9px; }
  .race-team>strong { font-size: 22px; }
  .race-team>strong small { font-size: 9px; }
  .race-foot { font-size: 9px; }
  .race-track { height: 32px; }
  .specimen { font-size: 7px; padding: 5px; }
  .scene-condition { font-size: 7px; padding: 5px; }
  .scene-top { top: 5px; left: 5px; right: 5px; }
  .stage-toolbar { padding: 6px; gap: 5px; margin-top: 10px; }
  .view-controls button { font-size: 10px; min-width: 26px; padding: 0 5px; }
  .simulation-controls { gap: 3px; }
  .speed-controls { padding: 0 3px; }
  .speed-controls button { font-size: 10px; padding: 6px 4px; }
  #pause span { font-size: 10px; }
  .metrics-panel,.hide-side-panels .metrics-panel { padding: 13px 10px; min-height: 70px; }
  .metrics strong { font-size: 21px; }
  .metrics span { font-size: 8px; }
  .metrics small { font-size: 10px; }
  .chat-heading { padding: 14px 12px; }
  .chat-heading strong { font-size: 20px; }
  .chat-badge { font-size: 9px; }
  .terminal-icon { display: none; }
  .color-backdrop .chat-log { height: 240px; padding: 7px 12px 12px; }
  .message { grid-template-columns: 38px minmax(0,1fr); gap: 1px 8px; font-size: 12px; }
  .message p { grid-column: 2; }
  .message time { grid-column: 1; grid-row: 1; }
  .message-route { grid-column: 2; }
  .ant-name { font-size: 10px; }
  .message-target { font-size: 9px; }
  .chat-footer { font-size: 9px; padding: 10px 12px; }
  .side-panel { height: 460px; }
  .residents-panel { height: 315px; }
  .panel-heading { padding: 16px; }
  .panel-heading strong { font-size: 20px; }
  .panel-tabs button { font-size: 13px; }
  .panel-content { padding: 20px 17px; }
  .panel-content h2 { font-size: 29px; }
  .worker-copy strong { font-size: 13px; }
  .worker-copy small { font-size: 11px; }
  .worker-icon { width: 29px; }
  .worker-row { padding: 11px; }
  footer { margin: 0 14px; padding-bottom: 58px; font-size: 9px; }
  dialog { max-height: calc(100dvh - 32px); overflow: auto; padding: 28px 22px; }
}