/* styles.css — Multiplayer OS landing (Windows 3.1 chrome over SimTower core) */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
body {
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, Verdana, sans-serif;
  color: #000;
  background: #008080;
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
  font-smooth: never;
}
#root { height: 100vh; }

/* ───────────────────────────────────────────────────────────
   Windows 3.1 desktop + window chrome
   The teal desktop wraps a single beveled "Multiplayer OS"
   window that frames the SimTower app.
   ─────────────────────────────────────────────────────────── */

.mos-desktop {
  position: fixed;
  inset: 0;
  background-color: #008080;
  /* Subtle hatched dither — gives the teal a 16-color CRT feel */
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.06) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 2px);
  overflow: hidden;
}

.win31-window {
  position: absolute;
  display: grid;
  grid-template-rows: 22px 1fr;
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #404040;
  padding: 2px;
  min-height: 0;
  min-width: 0;
  user-select: none;
}
.win31-window.is-max {
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
}
.win31-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
.win31-resize-handle {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  background-image:
    linear-gradient(135deg, transparent 0 60%, #808080 60% 65%, transparent 65% 70%, #808080 70% 75%, transparent 75% 80%, #808080 80% 85%, transparent 85% 100%);
  z-index: 2;
}
.win31-window.is-blurred .win31-titlebar {
  background: #808080;
  color: #c0c0c0;
}
.win31-window.is-blurred .win31-title {
  font-weight: normal;
}

/* Title bar — solid Win 3.1 navy */
.win31-titlebar {
  display: flex;
  align-items: center;
  height: 22px;
  background: #000080;
  color: #fff;
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 0.01em;
  padding: 0 2px;
  user-select: none;
  flex-shrink: 0;
  cursor: move;
}
.win31-window.is-max .win31-titlebar { cursor: default; }

/* System menu button at left of title bar (the "—" in a square) */
.win31-sysmenu {
  width: 18px;
  height: 18px;
  margin: 0 2px 0 0;
  padding: 0;
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.win31-sysmenu-glyph {
  display: block;
  width: 10px;
  height: 2px;
  background: #000;
  box-shadow: 0 -2px 0 #000, 0 2px 0 #000;
}

.win31-title {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 0 currentColor;
}

.win31-titlebar-controls {
  display: flex;
  gap: 0;
  margin-left: 4px;
}
.win31-titlebar-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  color: #000;
  font-size: 9px;
  line-height: 1;
}
.win31-titlebar-glyph { display: block; transform: translateY(-1px); }

/* Menu bar — File / View / Window / Help */
.win31-menubar {
  display: flex;
  align-items: center;
  height: 20px;
  background: #c0c0c0;
  padding: 2px 4px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
  font-size: 12px;
  color: #000;
  user-select: none;
  gap: 12px;
  flex-shrink: 0;
}
.win31-menu-item {
  padding: 1px 6px;
  cursor: default;
}
.win31-menu-item:hover { background: #000080; color: #fff; }
.win31-menu-item u { text-decoration: underline; }

/* ───────────────────────────────────────────────────────────
   App now lives inside the win31-window's content area.
   It used to be 100vw/100vh fixed; clamp to the parent grid.
   ─────────────────────────────────────────────────────────── */

/* ─── App layout ─── */
.app {
  display: grid;
  grid-template-rows: 56px 1fr 32px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  position: relative;
  background: #0a0f1a;
  overflow: hidden;
  border: 1px solid #404040;
  box-shadow: inset 1px 1px 0 #000;
  margin-top: 2px;
  min-height: 0;
}

.main {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 320px;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  border-top: 1px solid #1e3a8a;
  border-bottom: 1px solid #1e3a8a;
}
.building-frame { min-width: 0; }

/* ─── Top bar (Win 3.1 toolbar) ─── */
.topbar {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff inset, 0 -1px 0 #808080 inset;
  color: #000;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  padding: 4px 8px;
  position: relative;
  z-index: 5;
  height: 56px;
}
.tb-left, .tb-mid, .tb-right { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tb-left { flex: 0 1 160px; overflow: hidden; }
.tb-mid { flex: 1 1 auto; justify-content: center; overflow: hidden; }
.tb-right { flex: 0 1 auto; gap: 4px; overflow: hidden; }
.tb-logo { height: 22px; max-width: 142px; object-fit: contain; opacity: 0.95; }
.tb-app-id {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: #c0c0c0;
  color: #000;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.tb-app-id-icon { color: #000080; font-size: 12px; line-height: 1; }
.tb-app-id-name { letter-spacing: 0.06em; }
.tb-divider { flex: 0 0 2px; width: 2px; height: 28px; background: #808080; box-shadow: 1px 0 0 #fff; margin: 0 10px; }
.tb-title { min-width: 0; overflow: hidden; }
.tb-title-main {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500; letter-spacing: -0.01em;
  font-size: 14px; line-height: 1.1;
}
.tb-title-sub { font-size: 9.5px; color: rgba(255,255,255,0.55); letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tb-btn {
  background: #c0c0c0;
  border: 1px solid #000;
  color: #000;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px; font-weight: bold;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 0;
  letter-spacing: 0;
  position: relative;
  /* Win 3.1 outset (raised) bevel */
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #808080,
    inset 2px 2px 0 #dfdfdf,
    inset -2px -2px 0 #404040;
}
.tb-btn:hover { background: #c8c8c8; color: #000; }
.tb-btn.on,
.tb-btn:active {
  /* Pressed-in inset bevel */
  background: #b0b0b0;
  color: #000;
  box-shadow:
    inset 1px 1px 0 #404040,
    inset -1px -1px 0 #fff,
    inset 2px 2px 0 #808080,
    inset -2px -2px 0 #dfdfdf;
}
.tb-btn.small { padding: 3px 8px; font-size: 10px; }
.tb-btn .ico { font-family: 'MS Sans Serif', monospace; }

.tb-speed-group, .tb-time-group { display: flex; gap: 2px; align-items: center; }
.tb-btn:disabled { cursor: default; opacity: 0.85; }
.tb-btn:disabled:hover { background: #c0c0c0; color: #000; }
.tb-btn.on:disabled,
.tb-btn.on:disabled:hover { background: #b0b0b0; color: #000; opacity: 1; }
.tb-local-clock {
  margin-left: 8px;
  color: #000;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: #000;
  color: #4ade80;
  padding: 2px 6px;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff;
}

.tb-stat {
  display: flex; flex-direction: column; align-items: stretch;
  padding: 2px 6px;
  margin-left: 4px;
  min-width: 56px;
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff;
}
.tb-stat-k {
  font-size: 9px; color: #000;
  letter-spacing: 0.06em;
  font-weight: bold;
  text-align: center;
}
.tb-stat-v {
  font-family: 'Courier New', 'Andale Mono', monospace;
  font-weight: bold;
  font-size: 14px;
  color: #4ade80;
  background: #000;
  padding: 1px 4px;
  text-align: center;
  letter-spacing: 0.04em;
  line-height: 1.15;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #1a1a1a;
}
.tb-stat-okra .tb-stat-v { color: #facc15; }

/* ─── MiniMap (left) — Win 3.1 panel ─── */
.minimap {
  background: #c0c0c0;
  border-right: 1px solid #808080;
  box-shadow: 1px 0 0 #fff inset, -1px 0 0 #808080 inset;
  color: #000;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.mm-title {
  padding: 4px 8px 4px;
  margin: 4px 4px 0;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: #fff;
  background: #000080;
  text-transform: uppercase;
}
.mm-stack {
  flex: 1;
  overflow-y: auto;
  padding: 2px;
  margin: 2px 4px;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
}
.mm-row {
  display: grid;
  grid-template-columns: 4px 28px 1fr auto;
  gap: 6px;
  padding: 3px 8px 3px 0;
  align-items: center;
  cursor: pointer;
  border-bottom: 1px solid #e8e8e8;
}
.mm-row:hover { background: #e8eef8; }
.mm-row.selected { background: #000080; color: #fff; box-shadow: inset 3px 0 0 #1084d0; }
.mm-row.selected .mm-code,
.mm-row.selected .mm-label { color: #fff; }
.mm-row.sub { background: #f0f0f0; }
.mm-row.sub.selected { background: #000080; }
.mm-row.roof { opacity: 0.7; font-style: italic; }
.mm-row.roof.selected { opacity: 1; }
.mm-stripe { width: 4px; height: 14px; }
.mm-code { font-family: 'Courier New', monospace; font-size: 10px; color: #404040; text-align: right; font-weight: bold; }
.mm-label { font-size: 11px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-count { display: flex; gap: 2px; align-items: center; padding-right: 4px; }
.mm-dot { width: 4px; height: 4px; display: inline-block; }
.mm-foot {
  padding: 4px 8px;
  margin: 0 4px 4px;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  font-size: 10px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
}
.mm-foot-k { color: #000; font-weight: bold; letter-spacing: 0.04em; }
.mm-foot-v { color: #008000; font-family: 'Courier New', monospace; margin-top: 2px; }

/* ─── Building frame ─── */
.building-frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #0e1d3e 0%, #1e3a8a 70%, #2563eb 100%);
}

.building-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0a1428 0%, #1a2a5a 60%, #2a4080 100%);
  pointer-events: none;
  transition: background 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.building-sky[data-time="day"] {
  background: linear-gradient(180deg, #4a6db5 0%, #6b8fc7 60%, #93b3da 100%);
}
.building-sky[data-time="dusk"] {
  background: linear-gradient(180deg, #2a1840 0%, #6b3a5a 50%, #d65c73 90%, #f97316 100%);
}
.building-sky[data-time="night"] {
  background: linear-gradient(180deg, #050a18 0%, #0c1530 50%, #1e3a8a 100%);
}

.stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 15%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 65% 8%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 80% 20%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 30% 30%, #93c5fd 50%, transparent 100%),
    radial-gradient(1px 1px at 50% 12%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 35%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 12% 25%, #fff 50%, transparent 100%);
  opacity: 0.85;
}
.sky-beam {
  display: none;
}
@keyframes beam-pulse {
  0%, 100% { opacity: 0.25; height: 28%; }
  50% { opacity: 0.55; height: 36%; }
}

.building-scroll {
  position: absolute; inset: 0;
  overflow-y: auto;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #1e3a8a #061226;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Keep only a thin rim of sky so the tower itself fits in the dashboard panel. */
  padding: 4px 8px 12px;
}
.building-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.building-scroll::-webkit-scrollbar-track { background: #061226; }
.building-scroll::-webkit-scrollbar-thumb { background: #1e3a8a; }
.zoom-controls {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(5, 10, 24, 0.86);
  border: 1px solid #1e3a8a;
  box-shadow: inset 1px 1px 0 #1e40af, 0 6px 18px rgba(0,0,0,0.35);
}
.zoom-btn, .zoom-readout {
  appearance: none;
  border: 0;
  border-right: 1px solid #1e3a8a;
  background: transparent;
  color: #93c5fd;
  font-family: 'SF Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  min-width: 28px;
  padding: 0 8px;
  cursor: pointer;
}
.zoom-readout { min-width: 48px; color: #e2e8f0; font-size: 10px; }
.zoom-controls button:last-child { border-right: 0; }
.zoom-btn:hover, .zoom-readout:hover { background: #112655; color: #fff; }
.building-stage {
  transform-origin: top left;
  flex-shrink: 0;
  /* When zoomed out, keep the tower sitting on the bottom edge of the viewport
     instead of floating near the top. When zoomed in, auto margin collapses and
     the scroll area behaves normally. */
  margin-top: auto;
  /* Transform scale does not affect flex layout dimensions; shrink the reserved
     box too so the scroll viewport does not keep a bunch of fake sky around it. */
  width: calc(612px * var(--building-scale, 1));
  height: calc(1446px * var(--building-scale, 1));
}

/* ─── Building ─── */
.building {
  position: relative;
  margin: 0 auto;
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.45));
}
.roof-beam {
  position: absolute;
  left: calc(80px + 70% - 44px);
  top: 0;
  width: 88px;
  height: 72px;
  z-index: 3;
  pointer-events: none;
  opacity: 0.24;
  background: linear-gradient(180deg, rgba(249,115,22,0.58), rgba(249,115,22,0.22) 56%, rgba(249,115,22,0));
  clip-path: polygon(47% 0, 53% 0, 72% 100%, 28% 100%);
  filter: blur(0.35px);
}

.building-side-l, .building-side-r {
  position: absolute; top: 0; bottom: 30px;
  width: 80px;
  background: #0a1d3f;
  border: 2px solid #050a18;
  z-index: 1;
}
.building-side-l { left: 0;
  background: linear-gradient(90deg, #050a18, #0a1d3f);
}
.building-side-r { right: 0; left: auto;
  background: linear-gradient(90deg, #0a1d3f, #050a18);
}

.floor-stack {
  position: relative;
  margin-left: 80px;
  margin-right: 0;
  z-index: 2;
}

/* ─── Floor ─── */
.floor {
  position: relative;
  border-bottom: 2px solid #050a18;
  border-left: 1px solid #1e3a8a;
  border-right: 1px solid #1e3a8a;
  overflow: hidden;
  background: #fafaf7;
  cursor: pointer;
}
.floor:hover { outline: 1px solid rgba(96,165,250,0.45); outline-offset: -1px; }
.floor.floor-selected { outline: 2px solid #60a5fa; outline-offset: -2px; box-shadow: inset 0 0 0 2px rgba(96,165,250,0.35); }
.floor-sub {
  background: #0a1628 !important;
  border-bottom: 1px solid #1e40af;
}
.floor-lobby {
  background: #f3f3f3 !important;
}
.floor-roof {
  background: linear-gradient(180deg, #1e3a8a 0%, #0a1d3f 100%);
  border-left: 1px solid #050a18;
  border-right: 1px solid #050a18;
  position: relative;
}

/* Floor label gutter (drawn on the side wall to the LEFT of the floor) */
.floor-label {
  position: absolute;
  left: -78px;
  top: 0; bottom: 0;
  width: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 8px;
  color: #93c5fd;
  z-index: 3;
  border-right: 1px solid #050a18;
}
.floor-code {
  font-family: 'SF Compact Rounded', 'Inter', monospace;
  font-size: 11px; font-weight: 600;
  color: #fff;
  letter-spacing: 0.05em;
}
.floor-name {
  font-size: 9px; color: rgba(147,197,253,0.7);
  letter-spacing: 0.04em;
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.floor-sub + .floor .floor-label,
.floor-sub .floor-label { color: #fb923c; }
.floor-sub .floor-code { color: #fb923c; }
.floor-sub .floor-name { color: rgba(251,146,60,0.6); }

/* Floor accent stripe along top */
.floor-stripe {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}

/* Window grid (back wall) */
.floor-windows {
  position: absolute; left: 8px; right: 8px; top: 8px;
  height: 14px;
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 3px;
  pointer-events: none;
}
.window-tile { height: 100%; border: 1px solid rgba(0,0,0,0.08); }

/* Workstations */
.ws {
  position: absolute;
  bottom: 4px;
  width: 20px;
  pointer-events: none;
  z-index: 1;
}
.ws-monitor {
  width: 14px; height: 11px;
  margin-left: 3px;
  border: 1px solid #050a18;
  position: relative;
}
.ws-screen {
  position: absolute; top: 1px; left: 1px; right: 1px; bottom: 1px;
  background:
    linear-gradient(180deg, #93c5fd 0%, #2563eb 100%);
  opacity: 0.85;
}
.ws-desk {
  width: 20px; height: 4px;
  background: #5b5b5b;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #050a18;
}

/* Elevator cutout = darker rectangle on each floor through which the shaft is visible */
.elev-cutout {
  position: absolute;
  top: 3px; bottom: 0;
  background: rgba(10,15,26,0.18);
  border-left: 1px dashed rgba(0,0,0,0.2);
  border-right: 1px dashed rgba(0,0,0,0.2);
  pointer-events: none;
  z-index: 0;
}
.floor-sub .elev-cutout { background: rgba(0,0,0,0.35); border-color: rgba(96,165,250,0.3); }

/* Lobby details */
.lobby-door {
  position: absolute;
  bottom: 0;
  width: 22px; height: 32px;
  background: linear-gradient(180deg, #93c5fd 0%, #60a5fa 100%);
  border: 2px solid #1e3a8a;
  border-bottom: none;
}
.lobby-floor-line {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    #d0d0d0 0 6px, #b9b9b9 6px 12px);
}

/* ─── Sprite ─── */
.sprite {
  position: relative;
  width: 10px; height: 18px;
  pointer-events: none;
  image-rendering: pixelated;
}
.sprite-halo {
  position: absolute;
  width: 14px; height: 14px;
  top: -2px; left: -2px;
  border-radius: 0;
  opacity: 0.18;
  filter: blur(2px);
}
.sprite-head {
  position: absolute; top: 0; left: 2px;
  width: 6px; height: 6px;
  border: 1px solid #050a18;
}
.sprite-eye {
  width: 2px; height: 1px;
  background: #050a18;
  margin: 2px auto 0;
}
.sprite-body {
  position: absolute; top: 6px; left: 1px;
  width: 8px; height: 7px;
  border: 1px solid #050a18;
  border-bottom: none;
}
.sprite-belt {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 1px; background: #29261b;
}
.sprite-led {
  width: 2px; height: 2px;
  margin: 2px auto;
  box-shadow: 0 0 2px #fff;
}
.sprite-legs {
  position: absolute; top: 13px; left: 2px;
  width: 6px; height: 5px;
  display: flex; gap: 1px;
}
.sprite-legs > div {
  width: 2px; height: 5px;
}

.agent-wrap {
  position: absolute;
  cursor: pointer;
  z-index: 2;
  transition: left 0.15s linear;
}
.agent-wrap:hover { z-index: 4; }
.agent-wrap:hover .sprite { transform: scale(1.15); }
.agent-wrap.selected { z-index: 5; }
.agent-wrap.is-working .sprite-led {
  background: #f97316 !important;
  box-shadow: 0 0 6px #f97316;
}
.agent-wrap.activity-sitting .sprite,
.agent-wrap.activity-coffee .sprite,
.agent-wrap.activity-reading .sprite {
  transform: translateY(3px) scaleY(0.82) !important;
}
.agent-wrap.activity-lounging .sprite {
  transform: translate(2px, 7px) rotate(-84deg) !important;
  transform-origin: bottom left;
}
.agent-wrap.activity-strolling .sprite-halo { opacity: 0.12; }
.idle-mat {
  position: absolute;
  left: -4px;
  bottom: -2px;
  width: 19px;
  height: 5px;
  border: 1px solid rgba(96,165,250,0.28);
  background: rgba(15,23,42,0.32);
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.08);
  pointer-events: none;
}
.agent-wrap.activity-coffee .idle-mat::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: 2px;
  width: 3px;
  height: 5px;
  background: #f8fafc;
  border: 1px solid #334155;
}
.agent-wrap.activity-reading .idle-mat::after {
  content: '';
  position: absolute;
  right: -7px;
  bottom: 5px;
  width: 7px;
  height: 4px;
  background: #93c5fd;
  border: 1px solid #1e3a8a;
}
.idle-label {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  padding: 1px 4px;
  background: rgba(5,10,24,0.72);
  border: 1px solid rgba(148,163,184,0.35);
  color: rgba(226,232,240,0.72);
  font-family: 'SF Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s linear;
  pointer-events: none;
}
.agent-wrap.is-idle:hover .idle-label,
.agent-wrap.selected .idle-label { opacity: 1; }
.work-sparks {
  position: absolute;
  left: 9px;
  bottom: 18px;
  display: flex;
  gap: 2px;
  pointer-events: none;
}
.work-sparks i {
  width: 2px;
  height: 2px;
  background: #f97316;
  box-shadow: 0 0 4px #f97316;
  animation: work-pop 1.4s ease-in-out infinite;
}
.work-sparks i:nth-child(2) { animation-delay: 0.25s; background: #60a5fa; box-shadow: 0 0 4px #60a5fa; }
.work-sparks i:nth-child(3) { animation-delay: 0.5s; }
@keyframes work-pop {
  0%, 100% { transform: translateY(0); opacity: 0.35; }
  50% { transform: translateY(-4px); opacity: 0.95; }
}
.select-ring {
  position: absolute;
  bottom: -3px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 4px;
  border: 1px solid #f97316;
  border-radius: 50%;
  background: rgba(249,115,22,0.25);
  animation: ring-pulse 1.2s infinite;
}
@keyframes ring-pulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.3); opacity: 0.6; }
}

/* ─── Roof ─── */
.roof-trim {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, #050a18 0 6px, #1e3a8a 6px 12px);
}
.roof-sign {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  background: #050a18;
  border: 2px solid #1e3a8a;
  padding: 7px 18px 6px;
  text-align: center;
  min-width: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}
.roof-sign-glow {
  position: absolute; inset: -4px;
  background: radial-gradient(ellipse, rgba(249,115,22,0.34), transparent 70%);
  filter: blur(8px);
  z-index: -1;
  animation: sign-glow 2.4s infinite;
}
@keyframes sign-glow {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 0.95; }
}
.roof-sign-logo {
  display: block;
  width: 118px;
  height: auto;
  filter: drop-shadow(0 0 7px rgba(249,115,22,0.55));
  image-rendering: auto;
}
.roof-sign-text {
  display: block;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, sans-serif;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.18em;
  color: #ffd680;
  text-shadow: 0 0 6px rgba(249,115,22,0.85), 0 0 14px rgba(249,115,22,0.5);
  white-space: nowrap;
}
.roof-sign-text-sep {
  display: inline-block;
  margin: 0 6px;
  color: rgba(255,214,128,0.6);
  transform: translateY(-1px);
}
.antenna {
  position: absolute; top: -22px; left: 70%;
}
.antenna-pole {
  width: 2px; height: 22px; background: #050a18; margin: 0 auto;
}
.antenna-blink {
  width: 4px; height: 4px;
  background: #ef4444;
  margin: 0 auto;
  animation: blink 1.2s infinite;
  box-shadow: 0 0 4px #ef4444;
}
@keyframes blink {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.2; }
}

/* ─── Substrate floors ─── */
.sub-grid {
  position: absolute; inset: 6px 0 0;
  background-image:
    linear-gradient(rgba(96,165,250,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96,165,250,0.12) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
}
.sub-pipe {
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  opacity: 0.6;
}
.sub-node {
  position: absolute;
  width: 8px; height: 8px;
  background: #2563eb;
  border: 1px solid #fff;
  box-shadow: 0 0 4px #60a5fa;
}
.packet {
  position: absolute;
  width: 4px; height: 4px;
  margin-top: -2px;
  transition: left 0.1s linear;
}
.sub-readout {
  position: absolute;
  bottom: 4px; left: 8px;
  font-family: 'SF Mono', monospace;
  font-size: 9px;
  color: #87b482;
  text-shadow: 0 0 4px rgba(135,180,130,0.6);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ─── Elevator ─── */
.elev-shaft {
  position: absolute;
  background: rgba(0,0,0,0.55);
  border-left: 1px solid #050a18;
  border-right: 1px solid #050a18;
  pointer-events: auto;
  cursor: pointer;
  z-index: 3;
}
.elev-cable {
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: #5b5b5b;
  transform: translateX(-0.5px);
}
.elev-marker {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(96,165,250,0.25);
}
.elev-shaft:hover,
.elev-shaft.selected {
  box-shadow: inset 0 0 0 2px rgba(96,165,250,0.45), 0 0 12px rgba(96,165,250,0.24);
}
.elev-car {
  position: absolute;
  background: linear-gradient(180deg, #1e3a8a 0%, #050a18 100%);
  border: 1px solid #93c5fd;
  z-index: 4;
  transition: top 0.3s cubic-bezier(0.4, 0, 0.6, 1);
  box-shadow: inset 0 0 6px rgba(147,197,253,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  cursor: pointer;
}
.elev-car:hover,
.elev-car.selected {
  border-color: #f97316;
  box-shadow: inset 0 0 8px rgba(147,197,253,0.6), 0 0 14px rgba(249,115,22,0.55);
}
.elev-car-led {
  position: absolute;
  top: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 2px;
  background: #f97316;
  box-shadow: 0 0 3px #f97316;
}
.elev-passengers {
  display: flex;
  gap: 2px;
  padding-bottom: 4px;
  pointer-events: auto;
}
.elev-pass { cursor: pointer; }
.elev-pass:hover { transform: translateY(-1px); }

.sidewalk {
  position: absolute;
  left: 0; right: 0;
  height: 30px;
  background: repeating-linear-gradient(90deg,
    #5b5b5b 0 16px, #444 16px 32px);
  border-top: 2px solid #050a18;
}

/* ─── Inspector (right) ─── */
.inspector {
  background: #c0c0c0;
  border-left: 1px solid #fff;
  box-shadow: inset 1px 0 0 #fff, -1px 0 0 #808080;
  color: #000;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  display: flex; flex-direction: column;
  font-size: 12px;
  overflow-y: auto;
}
.ins-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px;
  margin: 4px 4px 0;
  background: #000080;
  color: #fff;
}
.ins-title {
  font-size: 11px; color: #fff;
  font-weight: bold;
  letter-spacing: 0.04em;
}
.ins-x {
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  color: #000;
  cursor: pointer;
  width: 18px; height: 18px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
}
.ins-x:hover { background: #d0d0d0; }
.ins-x:active {
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff;
}

.ins-empty { padding: 12px 8px; }
.ins-empty-frame {
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  padding: 24px 16px;
  text-align: center;
  margin-bottom: 12px;
}
.ins-empty-glyph { font-size: 28px; color: #000080; }
.ins-empty-msg { font-size: 12px; color: #000; margin-top: 6px; }
.ins-empty-hint { font-size: 10px; color: #404040; margin-top: 4px; letter-spacing: 0.04em; }

.ins-portrait {
  height: 100px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: 6px 4px;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
}
.ins-portrait-frame {
  width: 64px; height: 80px;
  border: 1px solid #000;
  background: rgba(255,255,255,0.85);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 8px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
.ins-portrait-big {
  transform: scale(2.5);
  transform-origin: bottom center;
}
.ins-portrait-bars {
  position: absolute; top: 8px; right: 8px;
}

.ins-name-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px 6px;
  gap: 8px;
}
.ins-name {
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-weight: bold;
  font-size: 16px; color: #000;
  letter-spacing: 0;
}
.ins-role {
  font-size: 11px; color: #404040;
  letter-spacing: 0.02em; margin-top: 2px;
}
.ins-locate {
  background: #c0c0c0;
  border: 1px solid #000;
  color: #000;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
.ins-locate:active { box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff; }

.ins-section {
  padding: 6px 8px;
  margin: 0 4px 4px;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
}
.ins-section-label {
  font-size: 10px;
  font-weight: bold;
  color: #000080;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.ins-task {
  font-family: 'Courier New', monospace;
  font-size: 11px; color: #000;
  background: #e8eef8;
  padding: 4px 6px;
  border-left: 2px solid #000080;
  margin-bottom: 4px;
}
.ins-task-idle {
  color: #404040;
  background: #f0f0f0;
  border-left-color: #808080;
}
.ins-loc { display: flex; align-items: baseline; gap: 8px; }
.ins-loc-code {
  font-family: 'Courier New', monospace;
  font-size: 13px; color: #c00;
  font-weight: bold;
}
.ins-loc-name { color: #000; font-size: 12px; font-weight: bold; }
.ins-state { font-size: 11px; color: #404040; margin-top: 4px; font-family: 'Courier New', monospace; }
.ins-state b { color: #000; font-weight: bold; }

.elevator-card {
  margin: 14px;
  padding: 18px 14px 14px;
  border: 1px solid #1e3a8a;
  background: linear-gradient(180deg, rgba(30,58,138,0.55), rgba(5,10,24,0.94));
  box-shadow: inset 1px 1px 0 rgba(147,197,253,0.35), inset -1px -1px 0 #050a18;
  text-align: center;
  position: relative;
}
.elevator-card-led {
  width: 8px;
  height: 4px;
  background: #f97316;
  box-shadow: 0 0 8px #f97316;
  margin: 0 auto 10px;
}
.elevator-avatar-bay {
  min-height: 74px;
  margin: 0 0 12px;
  padding: 10px 8px 7px;
  border: 1px solid rgba(96,165,250,0.35);
  background: rgba(5,10,24,0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  overflow: hidden;
}
.elevator-card-avatar {
  width: 30px;
  height: 50px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 2px solid rgba(147,197,253,0.55);
  background: linear-gradient(180deg, rgba(96,165,250,0.12), rgba(5,10,24,0.1));
}
.elevator-card-avatar-inner {
  transform: scale(1.8);
  transform-origin: bottom center;
  height: 30px;
  width: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.elevator-avatar-empty {
  align-self: center;
  color: rgba(147,197,253,0.58);
  font-family: 'SF Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
}
.elevator-card-title {
  font-family: 'Space Grotesk', sans-serif;
  color: #fff;
  font-size: 17px;
  letter-spacing: 0.08em;
}
.elevator-card-sub {
  margin-top: 4px;
  color: #93c5fd;
  font-family: 'SF Mono', monospace;
  font-size: 11px;
}
.floor-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  border-bottom: 1px dotted #c0c0c0;
  color: #404040;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}
.floor-kv b {
  color: #000;
  font-weight: bold;
  text-align: right;
}

.ins-log {
  list-style: none; padding: 0; margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}
.ins-log li {
  display: flex; gap: 8px;
  padding: 2px 0;
  color: #000;
}
.ins-log .t { color: #404040; width: 28px; flex-shrink: 0; font-weight: bold; }

/* Bars */
.bar { margin-bottom: 5px; }
.bar-label {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #000;
  font-weight: bold;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-bottom: 2px;
}
.bar-track {
  position: relative;
  height: 8px;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
}
.bar-fill {
  position: absolute; top: 0; bottom: 0; left: 0;
  transition: width 0.3s ease;
}
.bar-segs {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(0,0,0,0.4) 6px 7px);
  pointer-events: none;
}

/* Legend */
.legend {
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  padding: 8px 10px;
}
.legend-title {
  font-size: 10px;
  font-weight: bold;
  color: #000080;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.legend-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; color: #000;
  padding: 2px 0;
}
.legend-sprite {
  width: 12px; height: 12px;
  flex-shrink: 0;
  border: 1px solid #050a18;
}
.legend-sprite.human { background: #e8c39e; }
.legend-sprite.agent { background: #93c5fd; box-shadow: 0 0 4px #2563eb; }
.legend-sprite.room { width: 14px; height: 6px; }
.legend-sprite.room.blue { background: #2563eb; }
.legend-sprite.room.okra { background: #6a9d62; }
.legend-sprite.room.cayenne { background: #d65c73; }
.legend-sprite.room.pine { background: #38573e; }
.legend-sprite.room.orange { background: #f97316; }

/* ─── Status bar ─── */
.statusbar {
  display: grid;
  grid-template-columns: minmax(0, 170px) minmax(0, 200px) minmax(0, 1fr) 132px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  background: #c0c0c0;
  color: #000;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  border-top: 1px solid #fff;
  box-shadow: inset 0 1px 0 #fff;
  padding: 3px 4px;
  gap: 3px;
  align-items: stretch;
}
.sb-section {
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
  overflow: hidden;
  padding: 1px 6px;
  background: #c0c0c0;
  /* Win 3.1 inset (sunk) panel */
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
}
.sb-section:last-child { border-right-color: #fff; }
.sb-section-feed { min-width: 0; }
.sb-section-build {
  justify-content: flex-end;
  flex-shrink: 0;
  position: relative;
  z-index: 3;
}
.sb-key { color: #000; font-weight: bold; letter-spacing: 0.04em; flex: 0 0 auto; }
.sb-val { color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-blink {
  display: inline-block; width: 6px; height: 6px;
  background: #87b482;
  margin-right: 4px;
  animation: blink-slow 1.6s infinite;
  box-shadow: 0 0 3px #87b482;
}
@keyframes blink-slow {
  0%, 60% { opacity: 1; }
  61%, 100% { opacity: 0.3; }
}
.sb-feed {
  display: flex;
  gap: 18px;
  overflow: hidden;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.sb-feed-item {
  display: flex; gap: 6px; align-items: center;
  min-width: 0;
  max-width: 360px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  animation: feed-in 0.4s ease;
}
@keyframes feed-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
.sb-t { color: #404040; font-family: 'Courier New', monospace; flex: 0 0 auto; }
.sb-msg { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sb-tag {
  padding: 1px 4px;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sb-tag-msg    { background: #2563eb; color: #fff; }
.sb-tag-memory { background: #d65c73; color: #fff; }
.sb-tag-skill  { background: #6a9d62; color: #fff; }
.sb-tag-task   { background: #f97316; color: #fff; }
.sb-tag-eval   { background: #38573e; color: #fff; }

/* ─── Overlays (scanlines + halftone over the whole app) ─── */
.overlay-scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 100;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0,0,0,0.4) 2px,
    rgba(0,0,0,0.4) 3px
  );
  mix-blend-mode: multiply;
}
.overlay-halftone {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 99;
  background-image: radial-gradient(rgba(0,0,0,0.5) 0.6px, transparent 1.4px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
}

/* ───────────────────────────────────────────────────────────
   Desktop icons (Program Manager-style) + minimized strip
   ─────────────────────────────────────────────────────────── */

.mos-icon {
  position: absolute;
  width: 112px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  background: transparent;
  border: 1px dotted transparent;
  cursor: default;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  z-index: 10;
}
.mos-icon-glyph {
  width: 32px; height: 32px;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.45));
}
.mos-icon-glyph svg { display: block; image-rendering: pixelated; }
.mos-icon-label {
  color: #fff;
  text-align: center;
  padding: 1px 4px;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: 0.04em;
  line-height: 1.2;
  word-break: break-word;
}
.mos-icon.is-selected {
  border-color: #fff;
  border-style: dotted;
}
.mos-icon.is-selected .mos-icon-label {
  background: #000080;
  color: #fff;
  text-shadow: none;
}
.mos-icon.is-selected .mos-icon-glyph {
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.45)) brightness(0.85);
}

/* Minimized window strip — pinned to bottom-left of desktop */
.mos-min-strip {
  position: absolute;
  left: 12px; bottom: 12px;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  z-index: 200;
  pointer-events: none;
}
.mos-min-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #c0c0c0;
  color: #000;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
  padding: 3px 10px 3px 6px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  font-weight: bold;
  cursor: default;
  pointer-events: auto;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mos-min-tab:active {
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff;
}
.mos-min-tab-glyph { color: #000080; font-size: 12px; line-height: 1; }
.mos-min-tab-label { overflow: hidden; text-overflow: ellipsis; }

/* ───────────────────────────────────────────────────────────
   Notepad-style document body
   ─────────────────────────────────────────────────────────── */

.notepad {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #c0c0c0;
}
.notepad-menubar {
  display: flex;
  align-items: center;
  height: 20px;
  background: #c0c0c0;
  padding: 2px 4px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 12px;
  color: #000;
  user-select: none;
  gap: 12px;
  flex-shrink: 0;
}
.notepad-paper {
  flex: 1;
  margin: 4px;
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  overflow: auto;
  padding: 8px 10px;
}
.notepad-paper pre {
  margin: 0;
  font-family: 'Courier New', 'Andale Mono', monospace;
  font-size: 12px;
  line-height: 1.45;
  color: #000;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ───────────────────────────────────────────────────────────
   About box
   ─────────────────────────────────────────────────────────── */

.aboutbox {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 12px 12px 10px;
  background: #c0c0c0;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  color: #000;
}
.aboutbox-splash {
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  padding: 18px 16px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.aboutbox-logo {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  image-rendering: auto;
  /* Render the SVG cleanly — no pixelation on this one. */
  -webkit-font-smoothing: auto;
}
.aboutbox-body {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: #000;
  text-align: center;
  margin-top: 12px;
}
.aboutbox-version {
  font-size: 12px;
  font-weight: bold;
  color: #000;
}
.aboutbox-line { margin: 2px 0; }
.aboutbox-spacer { height: 8px; }
.aboutbox-foot { color: #404040; font-size: 11px; }
.aboutbox-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 10px;
  margin-top: 8px;
  border-top: 1px solid #808080;
  box-shadow: 0 1px 0 #fff inset;
  flex-shrink: 0;
}

/* Generic Win 3.1 push button (used in dialogs) */
.win31-button {
  background: #c0c0c0;
  border: 1px solid #000;
  color: #000;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  font-weight: bold;
  padding: 4px 14px;
  min-width: 70px;
  cursor: default;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080,
              inset 2px 2px 0 #dfdfdf, inset -2px -2px 0 #404040;
}
.win31-button:active {
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #fff,
              inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf;
}

/* ───────────────────────────────────────────────────────────
   Clock.exe
   ─────────────────────────────────────────────────────────── */
.clock {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  background: #c0c0c0;
  padding: 8px;
}
.clock-face-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #c0c0c0;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  padding: 6px;
  min-height: 0;
}
.clock-face {
  width: 100%;
  height: 100%;
  max-width: 200px;
  max-height: 200px;
  display: block;
}
.clock-digital {
  margin-top: 8px;
  background: #000;
  color: #4ade80;
  font-family: 'Courier New', 'Andale Mono', monospace;
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  letter-spacing: 0.05em;
  padding: 4px;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #1a1a1a;
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────
   File Manager (winfile.exe vibe)
   ─────────────────────────────────────────────────────────── */
.filemgr {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #c0c0c0;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  color: #000;
}
.filemgr-menubar {
  display: flex;
  align-items: center;
  height: 20px;
  background: #c0c0c0;
  padding: 2px 4px;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
  font-size: 12px;
  gap: 12px;
  flex-shrink: 0;
}
.filemgr-pathbar {
  background: #c0c0c0;
  padding: 4px 8px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: bold;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
  flex-shrink: 0;
}
.filemgr-panes {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  min-height: 0;
}
.filemgr-tree {
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  overflow: auto;
  padding: 2px 0;
  font-size: 11px;
}
.filemgr-tree-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  cursor: default;
  white-space: nowrap;
  user-select: none;
}
.filemgr-tree-row:hover { background: #e8eef8; }
.filemgr-tree-row.is-selected { background: #000080; color: #fff; }
.filemgr-tree-toggle {
  display: inline-block;
  width: 14px;
  text-align: center;
  font-family: 'Courier New', monospace;
  color: inherit;
  cursor: default;
}
.filemgr-tree-icon { font-size: 13px; line-height: 1; color: #aa5500; }
.filemgr-tree-row.is-selected .filemgr-tree-icon { color: #ffd680; }
.filemgr-tree-label { font-family: 'MS Sans Serif', Tahoma, sans-serif; }

.filemgr-list {
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #dfdfdf;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.filemgr-list-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 100px;
  gap: 6px;
  padding: 3px 8px;
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  box-shadow: 0 1px 0 #fff;
  font-weight: bold;
  flex-shrink: 0;
}
.filemgr-list-body { flex: 1; overflow: auto; padding: 2px 0; }
.filemgr-list-empty { padding: 12px; color: #404040; font-style: italic; }
.filemgr-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 100px;
  gap: 6px;
  padding: 1px 8px;
  cursor: default;
  user-select: none;
}
.filemgr-list-row:hover { background: #e8eef8; }
.filemgr-list-row .col-name {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filemgr-list-icon { font-size: 12px; color: #aa5500; }
.filemgr-list-row .col-size {
  font-family: 'Courier New', monospace;
  text-align: right;
  font-size: 11px;
}
.filemgr-list-row .col-kind { color: #404040; font-size: 11px; }

.filemgr-statusbar {
  display: flex;
  gap: 8px;
  padding: 3px 8px;
  background: #c0c0c0;
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #808080 inset;
  font-size: 11px;
  flex-shrink: 0;
}

/* ───────────────────────────────────────────────────────────
   DOS / Win 3.11 emulator (js-dos 8 in isolated iframe)
   ─────────────────────────────────────────────────────────── */
.dosapp {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #000;
  position: relative;
}
.dosapp-prelaunch {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
}
.dosapp-screen {
  flex: 1;
  font-family: 'Courier New', 'Andale Mono', monospace;
  color: #4ade80;
  background: #000;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre;
}
.dosapp-screen-line.dim { color: #166534; }
.dosapp-cursor {
  display: inline-block;
  width: 0.6em;
  background: #4ade80;
  color: #000;
  animation: dosapp-blink 1s steps(1, end) infinite;
}
@keyframes dosapp-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.dosapp-launchbar {
  display: flex;
  justify-content: center;
  padding: 10px;
  background: #c0c0c0;
  border-top: 2px solid #fff;
  box-shadow: 0 -1px 0 #808080 inset;
  flex-shrink: 0;
}
.dosapp-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
}
.dosapp-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
}

/* ───────────────────────────────────────────────────────────
   Boot splash — full-bleed, fades out into the desktop
   ─────────────────────────────────────────────────────────── */

.mos-boot {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #008080;
  background-image:
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.06) 0 1px, transparent 1px 2px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 2px);
  cursor: default;
  transition: opacity 320ms ease;
  opacity: 1;
  user-select: none;
}
.mos-boot.is-fading { opacity: 0; pointer-events: none; }

.mos-boot-logo {
  width: 380px;
  max-width: 70vw;
  height: auto;
  display: block;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.35));
  animation: mos-boot-logo-in 600ms ease both;
}
@keyframes mos-boot-logo-in {
  from { transform: translateY(6px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.mos-boot-version {
  margin-top: 24px;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-weight: bold;
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 #000;
}

.mos-boot-foot {
  position: absolute;
  bottom: 36px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #000;
}
.mos-boot-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #fff;
  margin-right: 8px;
  vertical-align: middle;
  animation: mos-boot-dot 0.9s steps(2, end) infinite;
}
@keyframes mos-boot-dot {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.2; }
}

/* ───────────────────────────────────────────────────────────
   Mobile PDA
   ─────────────────────────────────────────────────────────── */

.pda-desktop {
  display: grid;
  place-items: center;
  padding: 8px;
  background-color: #008080;
}

.pda-shell {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', Tahoma, Geneva, Verdana, sans-serif;
  color: #111;
  image-rendering: pixelated;
  overflow: hidden;
}

.pda-device {
  width: min(420px, calc(100vw - 16px));
  height: min(820px, calc(100vh - 16px));
  min-height: 520px;
  display: grid;
  grid-template-rows: 26px minmax(0, 1fr) 58px;
  gap: 10px;
  padding: 16px 12px 14px;
  background: #b8b8b8;
  border: 2px solid #000;
  box-shadow:
    inset 2px 2px 0 #efefef,
    inset -2px -2px 0 #686868,
    inset 4px 4px 0 #d6d6d6,
    inset -4px -4px 0 #505050;
}

.pda-speaker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

.pda-speaker i {
  width: 28px;
  height: 5px;
  display: block;
  background: #707070;
  border: 1px solid #111;
  box-shadow: inset 1px 1px 0 #444, inset -1px -1px 0 #d8d8d8;
}

.pda-screen {
  min-height: 0;
  display: grid;
  grid-template-rows: 20px 18px minmax(0, 1fr) 38px;
  background: #bec8a0;
  color: #142112;
  border: 2px solid #000;
  box-shadow:
    inset 2px 2px 0 #697158,
    inset -2px -2px 0 #e7edd2;
  position: relative;
  overflow: hidden;
}

.pda-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply;
  opacity: 0.45;
}

.pda-titlebar {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 20px;
  padding: 0 4px;
  background: #000080;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  line-height: 20px;
  position: relative;
  z-index: 1;
}

.pda-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pda-clock,
.pda-title-controls {
  flex: 0 0 auto;
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

.pda-menubar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 18px;
  padding: 1px 5px;
  background: #c0c0c0;
  border-bottom: 1px solid #777;
  box-shadow: 0 1px 0 #fff;
  color: #000;
  font-size: 11px;
  position: relative;
  z-index: 1;
}

.pda-screen-body {
  min-height: 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  position: relative;
  z-index: 1;
}

.pda-rail {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(4, 30px) 1fr;
  gap: 2px;
  padding: 4px 3px;
  background: #b0b0b0;
  border-right: 1px solid #333;
  box-shadow: inset -1px 0 0 #e0e0e0;
}

.pda-rail-btn,
.pda-mode-button,
.pda-app-row,
.pda-app-dialog-title button,
.pda-softkey {
  background: #c0c0c0;
  color: #000;
  border: 1px solid #000;
  border-radius: 0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #777;
  font-family: 'MS Sans Serif', Tahoma, sans-serif;
  font-weight: bold;
  letter-spacing: 0;
  cursor: pointer;
}

.pda-rail-btn {
  min-width: 0;
  padding: 0 2px;
  font-size: 9px;
  text-align: left;
}

.pda-rail-btn.is-active,
.pda-mode-button.is-active,
.pda-app-row.is-active,
.pda-softkey:active {
  background: #000080;
  color: #fff;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 #b0b0b0;
}

.pda-rail-readout {
  align-self: end;
  min-width: 0;
  padding: 3px 1px;
  background: #111;
  color: #8fb396;
  border: 1px solid #000;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  font-weight: bold;
  text-align: center;
}

.pda-panel {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #bec8a0;
}

.pda-city {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: 30px minmax(0, 1fr) 30px;
}

.pda-city-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: #c0c0c0;
  border-bottom: 1px solid #666;
}

.pda-mode-button {
  height: 22px;
  padding: 0 6px;
  font-size: 10px;
}

.pda-building-window {
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #7f8f70;
  border-top: 1px solid #5f694f;
  border-bottom: 1px solid #5f694f;
}

.pda-building-sky {
  position: absolute;
  inset: 0;
  background: #7f8f70;
}

.pda-building-sky[data-time="night"] { background: #4b5845; }
.pda-building-sky[data-time="dusk"] { background: #8e8664; }

.pda-building-scroll {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  overflow: auto;
  padding: 4px 6px 10px;
  scrollbar-width: thin;
  scrollbar-color: #4f5c45 #9daa83;
}

.pda-building-stage {
  transform-origin: top left;
  flex: 0 0 auto;
  width: calc(612px * var(--building-scale, 1));
  height: calc(1446px * var(--building-scale, 1));
}

.pda-building-stage .building {
  filter: none;
}

.pda-building-stage .floor-name,
.pda-building-stage .sub-readout,
.pda-building-stage .idle-label {
  display: none;
}

.pda-detail-strip {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 7px 6px 0;
  background: #c0c0c0;
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #777 inset;
  color: #000;
  font-size: 11px;
  font-weight: bold;
}

.pda-status {
  min-width: 0;
  display: grid;
  grid-template-rows: 15px 1fr;
  gap: 1px;
  padding: 3px 5px;
  background: #c0c0c0;
  border-top: 1px solid #fff;
  box-shadow: 0 -1px 0 #777 inset;
  color: #000;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height: 1.15;
  position: relative;
  z-index: 1;
}

.pda-status-stats,
.pda-status-feed {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pda-log {
  height: 100%;
  overflow: auto;
  padding: 5px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
  line-height: 1.35;
}

.pda-log-row {
  display: grid;
  grid-template-columns: 58px 42px minmax(0, 1fr);
  gap: 5px;
  padding: 3px 0;
  border-bottom: 1px dotted #4b5845;
}

.pda-log-time,
.pda-log-tag,
.pda-log-msg {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pda-log-tag {
  font-weight: bold;
}

.pda-apps {
  height: 100%;
  min-height: 0;
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
}

.pda-app-list {
  min-height: 0;
  overflow: auto;
  padding: 5px;
  display: grid;
  gap: 4px;
  align-content: start;
}

.pda-app-row {
  min-width: 0;
  min-height: 38px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  text-align: left;
  font-size: 11px;
}

.pda-app-icon {
  width: 24px;
  height: 24px;
  display: block;
  overflow: hidden;
}

.pda-app-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.pda-app-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pda-app-dialog {
  position: absolute;
  inset: 8px;
  display: grid;
  grid-template-rows: 20px minmax(0, 1fr);
  background: #c0c0c0;
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -1px -1px 0 #777,
    2px 2px 0 rgba(0,0,0,0.35);
}

.pda-app-dialog-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px 0 5px;
  background: #000080;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
}

.pda-app-dialog-title span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pda-app-dialog-title button {
  width: 18px;
  height: 17px;
  padding: 0;
  font-size: 10px;
  line-height: 1;
}

.pda-app-dialog-body {
  min-height: 0;
  overflow: auto;
  padding: 3px;
}

.pda-app-dialog-body .notepad,
.pda-app-dialog-body .aboutbox,
.pda-app-dialog-body .clock,
.pda-app-dialog-body .filemgr {
  min-height: 230px;
  height: 100%;
}

.pda-app-dialog-body .filemgr-panes {
  grid-template-columns: 1fr;
}

.pda-app-dialog-body .filemgr-tree {
  display: none;
}

.pda-app-dialog-body .filemgr-list-header,
.pda-app-dialog-body .filemgr-list-row {
  grid-template-columns: minmax(0, 1fr) 54px;
}

.pda-app-dialog-body .filemgr-list-row .col-kind,
.pda-app-dialog-body .filemgr-list-header div:nth-child(3) {
  display: none;
}

.pda-emulator-note {
  height: 100%;
  padding: 12px;
  background: #111;
  color: #8fb396;
  border: 1px solid #000;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.45;
}

.pda-note-title {
  color: #e7edd2;
  font-weight: bold;
  margin-bottom: 8px;
}

.pda-info {
  height: 100%;
  overflow: auto;
  padding: 8px;
  font-size: 12px;
}

.pda-info-title {
  display: block;
  margin-bottom: 5px;
  padding: 4px 5px;
  background: #111;
  color: #8fb396;
  border: 1px solid #000;
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
}

.pda-info-line {
  margin-bottom: 8px;
  font-weight: bold;
  color: #142112;
}

.pda-info-grid {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 5px 8px;
}

.pda-info-grid span {
  font-family: 'Courier New', monospace;
  font-weight: bold;
}

.pda-info-grid b {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: normal;
}

.pda-softkeys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.pda-softkey {
  min-width: 0;
  height: 46px;
  padding: 0 3px;
  font-size: 11px;
}

@media (max-width: 720px), (pointer: coarse) and (max-width: 900px) {
  .pda-device {
    width: min(100%, 410px);
    height: min(100%, 820px);
  }

  .pda-softkey {
    height: 46px;
  }
}

@media (max-width: 360px), (max-height: 640px) {
  .pda-device {
    grid-template-rows: 20px minmax(0, 1fr) 50px;
    gap: 7px;
    padding: 10px 8px;
    min-height: 0;
  }

  .pda-speaker i {
    width: 22px;
  }

  .pda-screen {
    grid-template-rows: 18px 17px minmax(0, 1fr) 34px;
  }

  .pda-screen-body {
    grid-template-columns: 46px minmax(0, 1fr);
  }

  .pda-rail-btn {
    font-size: 8px;
  }

  .pda-softkey {
    height: 40px;
    font-size: 10px;
  }
}