html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--desk);
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Sprites cut from the xbill sprite sheet (754x148) ---------- */
.spr {
  --s: 1;
  display: inline-block;
  flex: none;
  background: url(assets/sprites.png) no-repeat;
  background-size: calc(754px * var(--s)) calc(148px * var(--s));
  background-position: calc(var(--x) * -1px * var(--s)) calc(var(--y) * -1px * var(--s));
  width: calc(var(--w) * 1px * var(--s));
  height: calc(var(--h) * 1px * var(--s));
  image-rendering: pixelated;
}

.ico-bill    { --x: 0;   --y: 0;   --w: 24; --h: 38; }
.ico-head    { --x: 0;   --y: 0;   --w: 24; --h: 19; }
.ico-pc      { --x: 330; --y: 79;  --w: 55; --h: 45; }
.ico-toaster { --x: 0;   --y: 79;  --w: 55; --h: 45; }
.ico-wing    { --x: 0;   --y: 124; --w: 28; --h: 24; }
.ico-bucket  { --x: 336; --y: 124; --w: 24; --h: 24; }
.bill-big    { --x: 0;   --y: 0;   --w: 24; --h: 38; --s: 2; }

/* Hand-drawn icons for things the sprite sheet doesn't have. */
.ico-svg {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  background: no-repeat center / contain;
  image-rendering: pixelated;
}

.ico-svg.big { width: 32px; height: 32px; }

.ico-note {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h7l3 3v11H3z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M10 1v3h3' fill='%23c0c0c0' stroke='%23000'/%3E%3Cpath d='M5 6h6M5 8h6M5 10h6M5 12h4' stroke='%23000080'/%3E%3C/svg%3E");
}

.ico-chart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 1h14v14H1z' fill='%23000' stroke='%23c0c0c0'/%3E%3Cpath d='M2 12l3-3 2 2 3-5 2 2 2-5' fill='none' stroke='%2300ff00' stroke-width='1.2'/%3E%3C/svg%3E");
}

.ico-net {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M1 2h7v5H1zM8 9h7v5H8z' fill='%23008080' stroke='%23000'/%3E%3Cpath d='M4 7v4h4M12 9V5H8' fill='none' stroke='%23000'/%3E%3Cpath d='M2 3h5v3H2zM9 10h5v3H9z' fill='%2300ffff'/%3E%3C/svg%3E");
}

.ico-power {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M2 3h12v8H2z' fill='%23000080' stroke='%23000'/%3E%3Cpath d='M5 12h6v2H5z' fill='%23808080'/%3E%3Cpath d='M8 4v3' stroke='%23ff0' stroke-width='1.5'/%3E%3Cpath d='M5.5 6a3 3 0 1 0 5 0' fill='none' stroke='%23ff0' stroke-width='1.2'/%3E%3C/svg%3E");
}

.ico-xbill {
  background-image: url(assets/icon.png);
}

.ico-x {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' fill='%23000'/%3E%3Cpath d='M3.5 3h2.6l6.4 10h-2.6z' fill='%23fff'/%3E%3Cpath d='M12 3L4 13' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E");
}

.ico-tg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%232aa3e0'/%3E%3Cpath d='M3.5 7.8l8-3.2-1.4 7-2.4-1.8-1.3 1.2.2-2.2 3.7-3.4-4.6 2.8z' fill='%23fff'/%3E%3C/svg%3E");
}

/* ---------- Boot screen ---------- */
#boot {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  cursor: pointer;
  transition: opacity .3s;
}

#boot.done {
  opacity: 0;
  pointer-events: none;
}

.boot-logo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.boot-title {
  font: italic bold 44px/1 "Arial Black", Arial, sans-serif;
  letter-spacing: -1px;
  background: linear-gradient(90deg, #ff3b30, #ffcc00, #34c759, #0a84ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.boot-title sup {
  font-size: 20px;
  color: #fff;
  -webkit-text-fill-color: #fff;
}

.boot-sub {
  margin-top: 6px;
  color: #aaa;
}

.boot-bar {
  width: 220px;
  height: 14px;
  padding: 2px;
  border: 1px solid #888;
  overflow: hidden;
}

.boot-bar div {
  width: 40%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #0a84ff 0 10px, transparent 10px 13px);
  animation: boot-slide 1s linear infinite;
}

@keyframes boot-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}

.boot-skip {
  color: #555;
  font-size: 11px;
}

/* ---------- Desktop ---------- */
#desktop {
  position: fixed;
  inset: 0 0 30px 0;
  overflow: hidden;
}

#icons {
  position: absolute;
  inset: 6px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 4px;
}

.icon {
  width: 76px;
  padding: 4px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-align: center;
  cursor: default;
  outline: none;
}

.icon .pic {
  height: 40px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.icon .pic .spr  { --s: .85; }
.icon .pic .ico-wing, .icon .pic .ico-bucket { --s: 1.4; }
.icon .pic .ico-bill { --s: 1; }
.icon .pic .ico-svg { width: 32px; height: 32px; }

.icon .label {
  padding: 1px 2px;
  line-height: 1.25;
  text-shadow: 1px 1px 0 #000;
}

.icon.selected .label {
  background: var(--select);
  outline: 1px dotted #ff0;
  text-shadow: none;
}

.icon.selected .pic {
  opacity: .6;
}

/* ---------- Walking Bills (screenmates) ---------- */
#bills {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.walker {
  position: absolute;
  left: 0;
  top: 0;
  --s: 1.5;
  pointer-events: auto;
  cursor: crosshair;
  will-change: transform;
}

/* ---------- Windows ---------- */
#windows {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  min-width: 200px;
  min-height: 120px;
}

.win .title-bar {
  cursor: default;
  touch-action: none;
}

.win .body {
  flex: 1;
  min-height: 0;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.win.max {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.win.min {
  display: none;
}

.win .resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 55%, var(--shadow) 55% 62%, transparent 62% 70%, var(--shadow) 70% 77%, transparent 77% 85%, var(--shadow) 85% 92%, transparent 92%);
}

.win.max .resize { display: none; }

.fill {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
}

/* Window content styles */
.notepad {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.notepad textarea {
  flex: 1;
  resize: none;
  font: 13px/1.35 "Fixedsys", "Courier New", monospace;
  padding: 6px;
  user-select: text;
  -webkit-user-select: text;
}

.about {
  padding: 10px;
  overflow: auto;
  flex: 1;
}

.about-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}

.about h1 {
  margin: 0 0 4px;
  font: bold 30px/1 "Arial Black", Arial, sans-serif;
  color: var(--title);
}

.about p {
  margin: 0 0 8px;
  line-height: 1.4;
}

.groupbox {
  position: relative;
  margin: 14px 0 8px;
  padding: 12px 10px 4px;
  border: 1px solid var(--shadow);
  box-shadow: 1px 1px 0 var(--light), inset 1px 1px 0 var(--light);
}

.groupbox .legend {
  position: absolute;
  top: -8px;
  left: 8px;
  padding: 0 3px;
  background: var(--face);
}

.ca-row {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.ca-row .ca {
  flex: 1;
  min-width: 0;
  font-family: "Courier New", monospace;
  user-select: all;
  -webkit-user-select: all;
}

.btn-row {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.explorer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.explorer-items {
  flex: 1;
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  padding: 10px;
  overflow: auto;
  box-shadow: inset -1px -1px var(--light), inset 1px 1px var(--shadow),
              inset -2px -2px #dfdfdf, inset 2px 2px var(--dark);
}

.exp-item {
  width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.exp-item .spr.big { --s: 1.2; }
.exp-item .ico-toaster.big { --s: .7; }

.exp-item:hover { color: var(--select); text-decoration: underline; }

.exp-item[href="#"], .exp-item:not([href]) { cursor: default; }

.chart {
  background: #000;
  color: #0f0;
  font: 13px/1.5 "Courier New", monospace;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}

.chart iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.msgbox {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 14px;
}

.msgbox .ico-toaster.big { --s: 1; }

.msgbox p { margin: 0; line-height: 1.4; }

/* ---------- Taskbar ---------- */
#taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 2px 0;
  box-sizing: border-box;
  box-shadow: inset 0 1px #dfdfdf, inset 0 2px var(--light);
}

#startbtn {
  min-width: 0;
  height: 23px;
  padding: 0 6px 0 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

#startbtn .spr { --s: .8; }

#tasks {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 3px;
  overflow: hidden;
}

.task {
  flex: 0 1 160px;
  min-width: 34px;
  height: 23px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}

.task.pressed {
  font-weight: bold;
  background: repeating-conic-gradient(var(--face) 0 25%, var(--light) 0 50%) 0 0 / 2px 2px;
}

.task > .spr { --s: .45; }
.task > .ico-wing, .task > .ico-bucket { --s: .65; }
.task > .ico-pc, .task > .ico-toaster { --s: .3; }

.task span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

#tray {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 8px;
  white-space: nowrap;
}

#melted {
  display: flex;
  align-items: center;
  gap: 3px;
}

#melted .spr { --s: .6; }

/* ---------- Start menu ---------- */
#startmenu {
  position: fixed;
  left: 2px;
  bottom: 28px;
  z-index: 950;
  display: flex;
  min-width: 230px;
}

#startmenu[hidden] { display: none; }

.start-banner {
  width: 24px;
  background: linear-gradient(0deg, var(--title), var(--title-end));
  color: #c0c0c0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 18px/24px "Arial Black", Arial, sans-serif;
  padding: 6px 0;
  white-space: nowrap;
}

.start-banner b { color: #fff; }

#startmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

#startmenu li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 14px 0 6px;
  cursor: pointer;
  white-space: nowrap;
}

#startmenu li:hover {
  background: var(--select);
  color: #fff;
}

#startmenu li.sep {
  height: 0;
  margin: 2px 2px;
  padding: 0;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--light);
  cursor: default;
}

#startmenu li .ico-svg { width: 24px; height: 24px; }
#startmenu li .spr { --s: .55; }
#startmenu li .ico-wing { --s: 1; }
#startmenu li .ico-pc { --s: .48; }
#startmenu li .ico-bill { --s: .65; }

/* ---------- Blue screen / shutdown ---------- */
#bsod {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #0000aa;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font: 16px/1.4 "Courier New", "Lucida Console", monospace;
  cursor: pointer;
}

#bsod[hidden], #safe[hidden] { display: none; }

.bsod-box {
  max-width: 640px;
  text-align: left;
}

.bsod-title {
  display: table;
  margin: 0 auto 18px;
  background: #aaa;
  color: #0000aa;
  font-weight: bold;
}

.bsod-press { text-align: center; margin-top: 24px; }

.blink { animation: blink 1s steps(1) infinite; }

@keyframes blink { 50% { opacity: 0; } }

#safe {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #000;
  color: #ff8c00;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font: bold 28px/1.3 Arial, sans-serif;
  cursor: pointer;
}

#safe small {
  margin-top: 20px;
  color: #555;
  font: 12px var(--font);
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  #icons {
    flex-direction: row;
    justify-content: space-around;
  }

  .win {
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .win .resize { display: none; }

  .task { flex-basis: 34px; }
  .task span:last-child { display: none; }

  #startmenu { left: 0; right: 0; }
}

/* Small icon in window title bars */
.win .title-bar > .spr,
.win .title-bar > .ico-svg {
  flex: none;
  --s: .42;
}

.win .title-bar > .ico-wing,
.win .title-bar > .ico-bucket { --s: .62; }

.win .title-bar > .ico-pc,
.win .title-bar > .ico-toaster { --s: .3; }

.win .title-bar > .ico-svg {
  width: 16px;
  height: 16px;
}

.btn .ico-xbill {
  width: 14px;
  height: 14px;
  margin-right: 5px;
  vertical-align: -2px;
}