:root {
  font-family: ui-monospace, "Cascadia Code", "Consolas", "Courier New", monospace;
  font-size: 12px;
  color: #e9ebd9;
  background: #10191c;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; }
body { background: #10191c; overflow: hidden; }
button { font: inherit; cursor: pointer; color: inherit; }
button:focus-visible, canvas:focus-visible { outline: 2px solid #edce8d; outline-offset: 2px; }
.app {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  padding: 9px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: radial-gradient(ellipse at 50% -30%, #263f41 0, transparent 68%), #10191c;
}
.topbar {
  display: flex;
  flex: 0 0 52px;
  align-items: center;
  gap: 18px;
  padding: 0 14px;
  background: #253e40;
  border: 1px solid #657d76;
  border-bottom: 3px solid #0b1417;
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark {
  display: grid; place-items: center;
  color: #e3c88c;
  background: #314d4a;
  border: 1px solid #799386;
  width: 34px; height: 34px;
  font-size: 23px;
  flex: 0 0 auto;
}
.brand-copy { white-space: nowrap; }
.brand-copy strong { display: block; font-size: 17px; letter-spacing: 2px; line-height: 1.1; color: #f1e4b6; }
.brand-copy small { display: block; margin-top: 3px; color: #aac2b9; font-size: 9px; letter-spacing: .2px; }
.clock-wrap { display: flex; align-items: center; gap: 8px; margin-left: auto; white-space: nowrap; color: #e4dbad; font-size: 12px; }
.clock-icon { font-size: 21px; color: #b5c7a8; }
.transport { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.control, .speed, .mini-button {
  border: 1px solid #57716b;
  background: #1a3034;
  min-height: 30px;
  padding: 5px 9px;
  white-space: nowrap;
}
.control:hover, .speed:hover, .mini-button:hover { background: #3a5957; }
.control-primary { color: #f0e2b4; border-color: #9a926c; background: #435248; min-width: 76px; }
.control-subtle { color: #c2d0c5; }
.control-inspector { margin-left: 3px; }
.control[aria-pressed="true"] { background: #9eac7d; color: #1b2926; }
.speed-group { display: flex; gap: 2px; padding: 2px; background: #122327; border: 1px solid #425955; }
.speed { min-width: 35px; border: 0; background: transparent; color: #b0c3b8; }
.speed.active { background: #c7c69a; color: #203331; font-weight: 700; }
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 9px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.game-area, .sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border: 1px solid #627d76;
  border-bottom: 3px solid #0a1417;
  background: #18282d;
}
.game-top, .panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 36px;
  padding: 0 13px;
  background: #314b4c;
  color: #ecdbab;
  border-bottom: 1px solid #526c64;
  font-size: 11px;
  letter-spacing: 1.3px;
}
.town-title { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
.town-flower { font-size: 16px; color: #e4c98c; }
.town-title strong { font-size: 13px; letter-spacing: .3px; }
.town-subtitle { color: #a2c0b6; font-size: 10px; letter-spacing: .2px; }
.game-top-right { display: flex; align-items: center; gap: 7px; color: #c2d0c4; font-size: 9px; letter-spacing: .6px; white-space: nowrap; }
.alive-dot, .footer-status-dot { width: 7px; height: 7px; background: #a4c687; border-radius: 50%; display: inline-block; box-shadow: 0 0 5px #a4c68755; }
.top-separator { color: #78958c; }
.map-stage {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: #233c3a;
}
.map-viewport {
  position: absolute;
  inset: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
canvas {
  display: block;
  flex: 0 0 auto;
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  border: 2px solid #7f9e86;
  background: #54865a;
  cursor: crosshair;
  box-shadow: 0 3px 14px #081b1999;
}
.map-hint, .map-time {
  position: absolute;
  bottom: 13px;
  z-index: 1;
  padding: 6px 9px;
  background: #172b2dd9;
  border: 1px solid #668078;
  color: #dbe5c7;
  font-size: 10px;
  pointer-events: none;
}
.map-hint { left: 13px; }
.map-time { right: 13px; color: #b5cabf; }
.game-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: 0 0 30px;
  padding: 0 12px;
  background: #22383c;
  border-top: 1px solid #4d6760;
  color: #a7bfb3;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}
.game-footer strong { font-size: 9px; letter-spacing: .7px; color: #c8d9bb; font-weight: 600; }
.game-footer .footer-status-dot { margin-right: 7px; width: 6px; height: 6px; }
#world-food { color: #e0cc95; }
.panel-title { font-size: 10px; letter-spacing: 1.5px; }
.icon-button { border: 0; background: transparent; color: #a7c2b6; font-size: 20px; line-height: 1; padding: 2px 6px; }
.icon-button:hover { color: #fff0bb; }
.resident-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 8px; gap: 5px; border-bottom: 1px solid #3d5552; }
.resident-pick {
  display: grid;
  grid-template-columns: 7px minmax(0, 1fr);
  align-items: center;
  gap: 3px 5px;
  padding: 7px 5px 6px;
  border: 1px solid #3b5352;
  background: #20363a;
  text-align: left;
  min-width: 0;
  font-size: 11px;
}
.resident-pick:hover { background: #2e4b4c; }
.resident-pick.selected { background: #425951; border-color: #b9bd91; box-shadow: inset 0 -2px #b9bd91; }
.resident-dot { width: 7px; height: 7px; background: #e4bb7a; border-radius: 50%; }
.resident-dot.eli { background: #8bcad2; }
.resident-dot.jun { background: #d29cde; }
.resident-pick strong { font-size: 10px; color: #f1ead4; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.resident-pick small { color: #b4c6ba; font-size: 9px; grid-column: 1 / -1; padding-left: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resident-header { display: flex; gap: 11px; align-items: center; padding: 12px 13px; min-height: 78px; }
.portrait {
  height: 48px;
  width: 48px;
  flex: 0 0 48px;
  border: 2px solid #91a993;
  background: linear-gradient(145deg, #365956, #1d363a);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.resident-identity { min-width: 0; }
.resident-header h2 { font-size: 18px; line-height: 1.2; margin: 0 0 6px; color: #f3e8c4; }
.resident-header span { font-size: 10px; color: #a6c6b7; line-height: 1.3; display: block; }
.inspector-tabs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid #37514e; border-bottom: 1px solid #62786b; background: #1e3539; flex: 0 0 35px; }
.inspector-tab { background: transparent; border: 0; border-bottom: 3px solid transparent; color: #9ebdb3; font-weight: 600; }
.inspector-tab:hover { background: #2a4548; }
.inspector-tab.active { border-bottom-color: #e2d59c; background: #2d4849; color: #fff0bc; }
.tab-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #56736c #1a2d30; }
.section-label { margin: 12px 12px 8px; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 1px; color: #d7d6a8; }
.section-label small { color: #7e9d96; font-size: 9px; letter-spacing: 0; }
.needs { padding: 0 12px 3px; }
.need { margin-bottom: 10px; }
.need-head { display: flex; justify-content: space-between; margin-bottom: 5px; font-size: 10px; color: #d6e0ce; }
.need-head .need-value { color: #e2d09b; font-variant-numeric: tabular-nums; }
.bar { height: 9px; border: 1px solid #14282a; background: #354e4e; }
.fill { height: 100%; background: #91b69c; transition: width .2s linear; }
.fill.low { background: #d0aa6c; }
.fill.critical { background: #d37f78; }
.activity { margin: 0 12px; padding: 8px 10px; background: #21393c; border: 1px solid #395653; line-height: 1.5; color: #e0dfc1; font-size: 11px; overflow-wrap: anywhere; }
.resident-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 13px 12px; }
.resident-stats > div { background: #21393c; border: 1px solid #395653; padding: 9px; }
.resident-stats small { display: block; color: #a4bdb5; font-size: 9px; }
.resident-stats strong { display: block; margin-top: 4px; color: #f0e2b5; font-size: 16px; }
.events-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 12px; color: #e0d5a1; font-size: 9px; letter-spacing: .5px; }
.mini-button { font-size: 9px; min-height: 26px; padding: 3px 6px; letter-spacing: 0; }
.events { padding: 0 12px 12px; }
.event { font-size: 10px; line-height: 1.5; padding: 9px 0; border-bottom: 1px solid #3a5350; color: #d0d9cc; overflow-wrap: anywhere; }
.event time { display: block; color: #e2cf92; font-size: 9px; margin-bottom: 3px; }
.sidebar-footer { flex: 0 0 30px; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid #3c5651; color: #90aca4; font-size: 9px; letter-spacing: .8px; }
.sidebar-footer span { color: #557670; }
.inspector-backdrop { display: none; }
@media (min-width: 901px) {
  .app.inspector-hidden .workspace { grid-template-columns: minmax(0, 1fr); }
  .app.inspector-hidden .sidebar { display: none; }
}
@media (max-width: 1120px) {
  .workspace { grid-template-columns: minmax(0, 1fr) 274px; }
  .brand-copy small, .footer-detail { display: none; }
  .topbar { gap: 10px; padding: 0 9px; }
}
@media (max-width: 900px) {
  .app { padding: 5px; gap: 5px; }
  .workspace { display: flex; }
  .game-area { flex: 1 1 auto; }
  .brand-copy strong { font-size: 13px; letter-spacing: 1px; }
  .topbar { flex-basis: 48px; }
  .clock-wrap { font-size: 10px; gap: 3px; }
  .clock-icon { display: none; }
  .transport { gap: 3px; }
  .control { padding: 5px 7px; min-width: 0; }
  .control > span { display: none; }
  .speed { min-width: 28px; padding: 4px 6px; }
  .sidebar {
    position: fixed;
    z-index: 20;
    right: 6px;
    top: 6px;
    width: min(340px, calc(100vw - 12px));
    height: calc(100dvh - 12px);
    transition: transform .18s ease, visibility .18s;
    transform: translateX(110%);
    visibility: hidden;
    pointer-events: none;
    box-shadow: -12px 0 25px #07111390;
  }
  .app.inspector-open .sidebar { transform: translateX(0); visibility: visible; pointer-events: auto; }
  .app.inspector-open + .inspector-backdrop { position: fixed; inset: 0; z-index: 19; display: block; border: 0; background: #061416a6; }
}
@media (max-width: 580px) {
  .brand-mark { display: none; }
  .brand-copy strong { font-size: 11px; }
  .clock-wrap { font-size: 9px; }
  .speed-group { gap: 0; }
  .game-top-right { display: none; }
  .map-hint { max-width: 60%; line-height: 1.4; }
}
@media (max-height: 600px) {
  .app { padding: 5px; gap: 5px; }
  .topbar { flex-basis: 44px; }
  .game-top, .panel-title { flex-basis: 30px; }
  .game-footer, .sidebar-footer { flex-basis: 25px; }
  .resident-header { padding: 7px 12px; min-height: 60px; }
  .portrait { width: 39px; height: 39px; flex-basis: 39px; }
}