/* ─────────────────────────────────────────────────────────────
   Luna, from memory. Everything here is drawn with borders and
   gradients: no screenshots, no ripped assets, no webfonts.
   ───────────────────────────────────────────────────────────── */

:root {
  --face:      #ece9d8;   /* the beige every dialog was made of */
  --face-dk:   #d6d2c2;
  --hi:        #ffffff;
  --sh:        #aca899;
  --dk:        #716f64;
  --black:     #000000;
  --btn-face:  #ece9d8;
  --sel:       #316ac5;
  --sel-txt:   #ffffff;
  --link:      #0000ee;

  --title-a1:  #0058ee;
  --title-a2:  #3f93ff;
  --title-a3:  #0050ee;
  --title-a4:  #0141d6;
  --title-i1:  #7697e7;
  --title-i2:  #9db9eb;
  --title-i3:  #7e9fe9;

  --task1:     #3f8cf3;
  --task2:     #2361d8;
  --task3:     #1941a5;
  --start1:    #52a63b;
  --start2:    #38853a;

  --txt:       #000000;
  --pad:       4px;

  font-synthesis: none;
}

* { box-sizing: border-box; }

/* our buttons set display, which would otherwise beat the browser's
   default [hidden] rule and leave hidden things on screen */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  font: 11px Tahoma, 'Segoe UI', Geneva, Verdana, sans-serif;
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  cursor: var(--c-arrow);
}

body { background: #245edb; user-select: none; -webkit-user-select: none; }

/* Anything that draws pixel art keeps its edges. The longhand matters:
   a `background` shorthand here would blank the image set in pixels.css. */
.ic {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  image-rendering: pixelated;
  flex: none;
}
.ic.big { width: 32px; height: 32px; background-size: 32px 32px; }

/* ── the bevels everything is built from ────────────────── */
.raised {
  background: var(--btn-face);
  box-shadow:
    inset -1px -1px 0 var(--dk),
    inset  1px  1px 0 var(--hi),
    inset -2px -2px 0 var(--sh),
    inset  2px  2px 0 var(--face);
}
.sunken {
  background: #fff;
  box-shadow:
    inset  1px  1px 0 var(--sh),
    inset -1px -1px 0 var(--hi),
    inset  2px  2px 0 var(--dk),
    inset -2px -2px 0 var(--face);
}
.groove {
  box-shadow:
    inset  1px  1px 0 var(--sh),
    inset -1px -1px 0 var(--hi);
}

/* ═══ desktop ════════════════════════════════════════════ */

#desktop {
  position: fixed;
  inset: 0 0 30px 0;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 118%, #7cb342 0%, #5a9e2f 26%, transparent 62%),
    radial-gradient(90% 55% at 12% 112%, #8bc34a 0%, transparent 60%),
    radial-gradient(60% 26% at 78% 34%, rgba(255,255,255,.55) 0%, transparent 70%),
    radial-gradient(38% 16% at 24% 22%, rgba(255,255,255,.4) 0%, transparent 70%),
    linear-gradient(180deg, #1d6fc4 0%, #3f95dd 34%, #74bced 62%, #a8d8f2 76%, #cfe9f7 84%, #86b95a 88%, #4f9b2c 100%);
}

#desktop::after {           /* the far hill line */
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 26%;
  background: radial-gradient(100% 150% at 50% 100%, #6cae37 0%, #4f9b2c 60%, transparent 61%);
  pointer-events: none;
}

#icons {
  position: absolute;
  top: 8px; left: 8px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2px;
  max-height: calc(100% - 20px);
  z-index: 1;
}

.dicon {
  width: 76px;
  padding: 5px 2px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.95), 0 0 4px rgba(0,0,0,.7), 1px 1px 0 rgba(0,0,0,.5);
  line-height: 1.25;
  border: 1px dotted transparent;
  cursor: var(--c-arrow);
}
.dicon .ic { filter: drop-shadow(1px 1px 1px rgba(0,0,0,.55)); }
.dicon:hover .ic { filter: drop-shadow(0 0 3px #fff) drop-shadow(1px 1px 1px rgba(0,0,0,.55)); }
.dicon.on { border-color: rgba(255,255,255,.7); background: rgba(49,106,197,.55); }

/* ═══ windows ════════════════════════════════════════════ */

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  background: var(--face);
  border: 3px solid var(--title-a1);
  border-top: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 2px 2px 12px rgba(0,0,0,.4);
  z-index: 10;
}
.win.hidden { display: none; }
.win.max {
  left: 0 !important; top: 0 !important;
  width: 100% !important; height: 100% !important;
  border-radius: 0;
}

.tbar {
  height: 27px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 3px 0 4px;
  border-radius: 6px 6px 0 0;
  background:
    linear-gradient(180deg,
      var(--title-a2) 0%, var(--title-a1) 8%, var(--title-a1) 40%,
      var(--title-a3) 88%, var(--title-a4) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  color: #fff;
  font-weight: 700;
  text-shadow: 1px 1px 1px rgba(0,0,0,.55);
  cursor: var(--c-arrow);
}
.win.blur .tbar {
  background: linear-gradient(180deg, var(--title-i2) 0%, var(--title-i1) 45%, var(--title-i3) 100%);
  color: #dfe8f7;
}
.tbar .t { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.tbtns { display: flex; gap: 2px; }
.tbtn {
  width: 21px; height: 21px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 3px;
  background: linear-gradient(180deg, #4a9bff 0%, #1b6be6 46%, #0b4fc4 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  position: relative;
  cursor: var(--c-arrow);
  padding: 0;
}
.tbtn.x { background: linear-gradient(180deg, #f08d6a 0%, #e04a26 46%, #c02c10 100%); }
.tbtn:hover { filter: brightness(1.18); }
.tbtn:active { filter: brightness(.86); }
.tbtn i {
  position: absolute; inset: 0;
  background: no-repeat center;
}
/* glyphs, drawn with gradients so there is no image to load */
.tbtn.min i { background: linear-gradient(#fff,#fff) no-repeat center bottom 4px / 9px 3px; }
.tbtn.max i {
  background:
    linear-gradient(#fff,#fff) no-repeat center top 4px / 11px 3px,
    linear-gradient(#fff,#fff) no-repeat center top 4px / 11px 10px;
}
.tbtn.max i::after {
  content: ''; position: absolute;
  left: 6px; top: 8px; width: 7px; height: 4px;
  background: linear-gradient(180deg,#1b6be6,#0b4fc4);
}
.tbtn.x i::before, .tbtn.x i::after {
  content: ''; position: absolute;
  left: 4px; top: 9px; width: 12px; height: 2px; background: #fff;
}
.tbtn.x i::before { transform: rotate(45deg); }
.tbtn.x i::after  { transform: rotate(-45deg); }

.win-body { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--face); }

/* ── menu bar ───────────────────────────────────────────── */
.menubar {
  flex: none;
  display: flex;
  padding: 1px 2px;
  background: var(--face);
  border-bottom: 1px solid var(--face-dk);
}
.menubar > button {
  font: inherit;
  padding: 3px 7px;
  border: 0;
  background: none;
  color: var(--txt);
  cursor: var(--c-arrow);
}
.menubar > button u { text-decoration: underline; }
.menubar > button:hover, .menubar > button.on { background: var(--sel); color: #fff; }

.menu {
  position: fixed;
  z-index: 900;
  min-width: 168px;
  padding: 2px;
  background: var(--face);
  border: 1px solid var(--sh);
  box-shadow: 2px 2px 3px rgba(0,0,0,.35);
}
.menu button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  font: inherit; text-align: left;
  padding: 4px 18px 4px 22px;
  border: 0; background: none; color: var(--txt);
  cursor: var(--c-arrow);
}
.menu button:hover { background: var(--sel); color: #fff; }
.menu button[disabled] { color: var(--sh); text-shadow: 1px 1px 0 #fff; }
.menu button[disabled]:hover { background: none; color: var(--sh); }
.menu button .k { margin-left: auto; opacity: .7; }
.menu hr { margin: 3px 2px; border: 0; border-top: 1px solid var(--sh); border-bottom: 1px solid #fff; }

/* ═══ paint ══════════════════════════════════════════════ */

.paint-row { flex: 1; min-height: 0; display: flex; }

.toolbox {
  flex: none;
  width: 58px;
  padding: 3px 0 0 3px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tools { display: grid; grid-template-columns: 25px 25px; gap: 1px; }
.tool {
  width: 25px; height: 24px;
  border: 0; padding: 0;
  background: var(--face);
  display: grid; place-items: center;
  cursor: var(--c-arrow);
  box-shadow: inset -1px -1px 0 var(--sh), inset 1px 1px 0 var(--hi);
}
.tool:hover { box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi); }
.tool.on {
  background: #d8d4c4;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi);
}
.tool.on .ic { transform: translate(1px, 1px); }

.toolopt {
  margin-top: 2px;
  min-height: 74px;
  padding: 4px 3px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--face);
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi);
}
.toolopt .row { display: flex; gap: 2px; flex-wrap: wrap; justify-content: center; }
.opt {
  width: 22px; height: 20px;
  border: 0; padding: 0; background: var(--face);
  display: grid; place-items: center;
  cursor: var(--c-arrow);
}
.opt.on { background: var(--sel); }
.opt canvas { display: block; image-rendering: pixelated; }
.opt.wide { width: 46px; height: 16px; }

/* ── canvas ─────────────────────────────────────────────── */
.cv-outer {
  flex: 1; min-width: 0;
  padding: 3px;
  display: flex;
}
.cv-wrap {
  flex: 1; min-width: 0;
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: none;          /* one finger draws, two fingers pan */
  scrollbar-color: #ece9d8 #d6d2c2;   /* firefox has no ::-webkit-scrollbar */
  background: #808080;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi),
              inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--face);
  cursor: var(--c-cross);
}

/* the pointer follows the tool, the way it used to */
.cv-wrap.t-cross   { cursor: var(--c-cross); }
.cv-wrap.t-pencil  { cursor: var(--c-pencil); }
.cv-wrap.t-bucket  { cursor: var(--c-bucket); }
.cv-wrap.t-dropper { cursor: var(--c-dropper); }
.cv-wrap.t-magnify { cursor: var(--c-magnify); }
.cv-wrap.t-text    { cursor: var(--c-text); }
.cv-wrap.t-hand    { cursor: var(--c-hand); }
.cv-wrap.panning, .cv-wrap.panning * { cursor: var(--c-hand) !important; }
body.busy, body.busy * { cursor: var(--c-wait) !important; }
.cv-space { position: relative; }
#cv, #cv-fx {
  position: absolute; top: 0; left: 0;
  display: block;
  image-rendering: pixelated;
}
#cv-fx { pointer-events: none; z-index: 2; }

/* classic scrollbars, arrows and all */
.cv-wrap::-webkit-scrollbar { width: 16px; height: 16px; background: #ece9d8; }
.cv-wrap::-webkit-scrollbar-track {
  background:
    repeating-conic-gradient(#fff 0% 25%, #d6d2c2 0% 50%) 0 0 / 2px 2px;
}
.cv-wrap::-webkit-scrollbar-thumb {
  background: var(--face);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi),
              inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--face);
}
.cv-wrap::-webkit-scrollbar-corner { background: var(--face); }
.cv-wrap::-webkit-scrollbar-button:single-button {
  display: block;
  background: var(--face);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi),
              inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--face);
  height: 16px; width: 16px;
  background-repeat: no-repeat;
  background-position: center;
}
.cv-wrap::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: linear-gradient(135deg, transparent 45%, #000 45%, #000 55%, transparent 55%);
  background-size: 7px 7px;
}
.cv-wrap::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: linear-gradient(-45deg, transparent 45%, #000 45%, #000 55%, transparent 55%);
  background-size: 7px 7px;
}
.cv-wrap::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: linear-gradient(45deg, transparent 45%, #000 45%, #000 55%, transparent 55%);
  background-size: 7px 7px;
}
.cv-wrap::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: linear-gradient(-135deg, transparent 45%, #000 45%, #000 55%, transparent 55%);
  background-size: 7px 7px;
}

/* other people's pointers */
#peers { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.peer {
  position: absolute;
  top: 0; left: 0;
  will-change: transform;      /* eased in script, not by the browser */
}
.peer b {
  position: absolute; left: 14px; top: 14px;
  padding: 1px 4px;
  font: 10px Tahoma, sans-serif; font-weight: 400;
  color: #fff; white-space: nowrap;
  border: 1px solid rgba(0,0,0,.4);
  box-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.peer s {
  display: block; width: 24px; height: 38px;
  background: var(--i-peer) no-repeat 0 0 / 24px 38px;
  image-rendering: pixelated;
  text-decoration: none;
}

/* ── board tabs and zoom, along the bottom like a spreadsheet ── */
.boardbar {
  flex: none;
  display: flex; align-items: flex-end; gap: 8px;
  padding: 3px 6px 0;
  border-top: 1px solid var(--face-dk);
}
.tabs { display: flex; gap: 2px; overflow: hidden; }
.tab {
  font: 11px Tahoma, sans-serif;
  padding: 4px 11px 5px;
  border: 0;
  background: #dcd8c8;
  color: #444;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 1px 1px 0 #fff, inset -1px 0 0 var(--sh), inset 0 -1px 0 var(--sh);
  cursor: var(--c-arrow);
  white-space: nowrap;
}
.tab:hover { background: #e8e4d4; }
.tab.on {
  background: var(--face);
  color: #000; font-weight: 700;
  padding-bottom: 7px;
  box-shadow: inset 1px 1px 0 #fff, inset -1px 0 0 var(--sh);
}
.tab .n { opacity: .6; font-weight: 400; margin-left: 5px; }

.zoombar { margin-left: auto; display: flex; align-items: center; gap: 4px; padding-bottom: 3px; }
.zbtn {
  width: 22px; height: 20px;
  font: 700 13px Tahoma, sans-serif; line-height: 1;
  border: 0; background: var(--btn-face);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi),
              inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--face);
  cursor: var(--c-arrow);
}
.zbtn:active {
  box-shadow: inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--hi),
              inset 2px 2px 0 var(--sh), inset -2px -2px 0 var(--face);
}
.zpct {
  min-width: 46px; text-align: center;
  font: 11px 'Lucida Console', monospace;
  padding: 3px 0;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi);
}

/* ── the pick-a-square banner ──
   Deliberately not a dialog: it has to be readable while you click the
   thing it is talking about, so it never takes the pointer. */
.picker {
  position: absolute;
  left: 50%; top: 12px;
  transform: translateX(-50%);
  z-index: 6;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 2px 2px 5px rgba(0,0,0,.35);
  font: 11px Tahoma, sans-serif;
  white-space: nowrap;
  pointer-events: none;          /* clicks belong to the canvas underneath */
  max-width: calc(100% - 24px);
}
.picker.hidden { display: none; }
.picker b { font-weight: 700; }
.picker span { color: #555; overflow: hidden; text-overflow: ellipsis; }
.picker .btn { pointer-events: auto; }
.cv-outer { position: relative; }

/* ── the gallery, in place of the canvas ── */
.gallery {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--face);
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi),
              inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--face);
}
.gallery.hidden { display: none; }
.gal-head {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--sh);
  font: 11px Tahoma, sans-serif;
}
.gal-head .sp { flex: 1; }
.gal-grid {
  flex: 1; min-height: 0; overflow: auto;
  display: grid; gap: 10px; padding: 10px;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  align-content: start;
  scrollbar-color: #ece9d8 #d6d2c2;
}
.gal-grid::-webkit-scrollbar { width: 16px; background: #ece9d8; }
.gal-grid::-webkit-scrollbar-thumb {
  background: var(--face);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi),
              inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--face);
}
.card {
  background: var(--face);
  padding: 5px;
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi),
              inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--face);
  cursor: var(--c-arrow);
}
.card:hover { background: #f4f2e8; }
.card canvas {
  display: block; width: 100%; height: auto; background: #fff;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi);
  image-rendering: auto;
}
.card b { display: block; font: 700 11px Tahoma, sans-serif; margin: 5px 2px 1px; }
.card i {
  display: block; font: normal 11px Tahoma, sans-serif; color: #666;
  margin: 0 2px 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.card u {
  display: block; text-decoration: none;
  font: 10px Tahoma, sans-serif; color: #888; margin: 0 2px 2px;
}
.gal-empty { grid-column: 1 / -1; padding: 30px; text-align: center; color: #666; }

/* ── palette + status ───────────────────────────────────── */
.pal-bar {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px 5px;
}
.pal-now {
  position: relative;
  width: 32px; height: 30px; flex: none;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi);
  padding: 4px;
}
.pal-now i {
  position: absolute; width: 15px; height: 15px;
  box-shadow: inset -1px -1px 0 var(--hi), inset 1px 1px 0 var(--dk), 0 0 0 1px #000;
}
.pal-now .fg { left: 4px; top: 3px; z-index: 2; }
.pal-now .bg { left: 13px; top: 12px; }
.pal { display: grid; grid-template-rows: repeat(2, 15px); grid-auto-flow: column; gap: 1px; }
.sw {
  width: 15px; height: 15px; padding: 0; border: 0;
  box-shadow: inset -1px -1px 0 var(--hi), inset 1px 1px 0 var(--dk), 0 0 0 1px var(--sh);
  cursor: var(--c-arrow);
}
.sw:hover { outline: 1px solid #000; outline-offset: -1px; }

.statusbar {
  flex: none;
  height: 22px;
  display: flex; align-items: stretch; gap: 2px;
  padding: 1px 2px 2px;
  font-size: 11px;
}
.statusbar > span {
  display: flex; align-items: center;
  padding: 0 6px;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi);
  white-space: nowrap;
}
.statusbar > span.grow { flex: 1; min-width: 0; overflow: hidden; }
.statusbar .dot { width: 7px; height: 7px; border-radius: 50%; background: #d33; margin-right: 5px; flex: none; }
.statusbar .dot.up { background: #2a2; box-shadow: 0 0 4px #4f4; }

/* ═══ content windows (notepad-ish) ══════════════════════ */
.pane {
  flex: 1; min-height: 0;
  margin: 3px;
  padding: 10px 12px;
  overflow: auto;
  background: #fff;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi),
              inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--face);
  font: 12px 'Lucida Console', 'Courier New', monospace;
  line-height: 1.55;
  user-select: text; -webkit-user-select: text;
  cursor: var(--c-text);
}
.pane { scrollbar-color: #ece9d8 #d6d2c2; }
.pane::-webkit-scrollbar { width: 16px; background: #ece9d8; }
.pane::-webkit-scrollbar-track { background: repeating-conic-gradient(#fff 0% 25%, #d6d2c2 0% 50%) 0 0 / 2px 2px; }
.pane::-webkit-scrollbar-thumb {
  background: var(--face);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi),
              inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--face);
}
.pane h2 {
  margin: 0 0 10px;
  font: 700 13px Tahoma, sans-serif;
  background: var(--sel); color: #fff;
  padding: 3px 7px;
}
.pane h3 { margin: 16px 0 4px; font: 700 12px Tahoma, sans-serif; }
.pane p  { margin: 0 0 9px; }
.pane ul { margin: 0 0 9px; padding-left: 18px; }
.pane li { margin: 0 0 3px; }
.pane .rule { border-top: 1px dashed #aaa; margin: 12px 0; }
.pane b.hl { background: #ff0; }

.kv { display: grid; grid-template-columns: 108px 1fr; gap: 3px 8px; margin: 0 0 10px; }
.kv dt { color: #444; }
.kv dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }

.ca-box { display: flex; gap: 4px; align-items: stretch; margin: 4px 0 12px; }
.ca-box input {
  flex: 1; min-width: 0;
  font: 12px 'Lucida Console', monospace;
  padding: 4px 6px;
  border: 0; background: #fff;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi),
              inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--face);
  cursor: var(--c-text);
}

/* ── the fee counter ────────────────────────────────────── */
.fees {
  margin: 14px 0 4px;
  padding: 10px 12px 11px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: #f7f6ef;
  box-shadow: inset 1px 1px 0 var(--sh), inset -1px -1px 0 var(--hi),
              inset 2px 2px 0 var(--dk), inset -2px -2px 0 var(--face);
}
.fees .lbl {
  font: 700 11px Tahoma, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #4a4a3f;
}
.fees .amt {
  font: 700 25px 'Lucida Console', 'Courier New', monospace;
  line-height: 1.15;
  color: #0a7d18;
  word-break: break-all;
}
.fees .amt.idle { color: #8a8a7d; font-size: 17px; }
.fees .sub { font: 11px Tahoma, sans-serif; color: #6d6d61; }

/* ── buttons ────────────────────────────────────────────── */
.btn {
  font: 11px Tahoma, sans-serif;
  padding: 4px 12px;
  min-width: 75px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0;
  background: var(--btn-face); color: var(--txt);
  box-shadow: inset -1px -1px 0 var(--dk), inset 1px 1px 0 var(--hi),
              inset -2px -2px 0 var(--sh), inset 2px 2px 0 var(--face);
  cursor: var(--c-arrow);
}
.btn:hover { background: #f4f2e8; }
.btn:active, .btn.on {
  box-shadow: inset 1px 1px 0 var(--dk), inset -1px -1px 0 var(--hi),
              inset 2px 2px 0 var(--sh), inset -2px -2px 0 var(--face);
}
.btn:active .ic, .btn.on .ic { transform: translate(1px, 1px); }
.btn.sm { min-width: 0; padding: 3px 8px; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }

/* ═══ taskbar ════════════════════════════════════════════ */
#taskbar {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 30px;
  display: flex; align-items: stretch;
  z-index: 800;
  background: linear-gradient(180deg,
    #3f8cf3 0%, #2f7ae8 8%, #2361d8 40%, #1e57cf 88%, #1941a5 100%);
  box-shadow: inset 0 1px 0 #4d9dfb, inset 0 2px 0 rgba(255,255,255,.25);
}

#start {
  display: flex; align-items: center; gap: 5px;
  padding: 0 18px 2px 8px;
  border: 0;
  font: italic 700 15px Tahoma, sans-serif;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.5);
  background: linear-gradient(180deg, #6fbb4b 0%, var(--start1) 12%, #3f8f2d 55%, var(--start2) 100%);
  border-radius: 0 9px 9px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 2px 0 4px rgba(0,0,0,.25);
  cursor: var(--c-arrow);
}
#start:hover { filter: brightness(1.1); }
#start.on { filter: brightness(.88); box-shadow: inset 1px 1px 3px rgba(0,0,0,.4); }

#tasks { flex: 1; display: flex; align-items: center; gap: 3px; padding: 3px 4px; overflow: hidden; }
.task {
  display: flex; align-items: center; gap: 5px;
  height: 22px; min-width: 100px; max-width: 168px;
  padding: 0 8px;
  border: 0; border-radius: 2px;
  font: 11px Tahoma, sans-serif; color: #fff;
  background: #337cf0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset -1px -1px 0 rgba(0,0,0,.15);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  cursor: var(--c-arrow);
}
.task:hover { background: #4b91f7; }
.task.on { background: #1a52c4; box-shadow: inset 1px 1px 3px rgba(0,0,0,.45); }
.task span { overflow: hidden; text-overflow: ellipsis; }

#tray {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 8px;
  color: #fff;
  background: linear-gradient(180deg, #1387d8 0%, #14a2e6 10%, #0e8cd2 55%, #0b6fb3 100%);
  box-shadow: inset 1px 0 0 rgba(0,0,0,.25), inset 2px 0 0 rgba(255,255,255,.2);
}
#tray button {
  border: 0; background: none; padding: 0; display: grid; place-items: center;
  cursor: var(--c-arrow);
}
#clock { font: 11px Tahoma, sans-serif; color: #fff; min-width: 52px; text-align: center; }
#tray .who { font: 11px Tahoma, sans-serif; display: flex; align-items: center; gap: 4px; }
.spk {
  width: 14px; height: 14px;
  background:
    linear-gradient(#fff,#fff) no-repeat 1px 5px / 3px 4px,
    linear-gradient(#fff,#fff) no-repeat 4px 3px / 3px 8px,
    linear-gradient(#fff,#fff) no-repeat 6px 1px / 3px 12px;
}
.spk.off { opacity: .45; }
.spk.off::after {
  content: ''; position: absolute; width: 15px; height: 2px; background: #f66;
  transform: rotate(-45deg);
}
#tray .spkwrap { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }

/* ── start menu ─────────────────────────────────────────── */
#startmenu {
  position: fixed; left: 0; bottom: 30px;
  width: 250px;
  z-index: 850;
  border: 1px solid #0a3e9b;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 2px -2px 10px rgba(0,0,0,.4);
  display: none;
}
#startmenu.on { display: block; }
#startmenu .head {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  color: #fff; font: 700 13px Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  background: linear-gradient(180deg, #1a63d6 0%, #2b7ae8 40%, #1550b8 100%);
  border-bottom: 2px solid #d8801a;
}
#startmenu .head .av {
  width: 30px; height: 30px; border-radius: 4px;
  background: linear-gradient(135deg, #ffd28a, #e08c2c);
  box-shadow: inset 0 0 0 2px #fff;
  display: grid; place-items: center;
}
#startmenu .items { background: #fff; padding: 4px 0; }
#startmenu .items button {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 6px 12px;
  border: 0; background: none; font: 11px Tahoma, sans-serif; text-align: left;
  cursor: var(--c-arrow);
}
#startmenu .items button b { font-weight: 700; }
#startmenu .items button:hover { background: var(--sel); color: #fff; }
#startmenu .foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 6px 10px;
  background: linear-gradient(180deg, #3f8cf3 0%, #2361d8 60%, #1941a5 100%);
}
#startmenu .foot button {
  display: flex; align-items: center; gap: 6px;
  border: 0; background: none; color: #fff; font: 11px Tahoma, sans-serif;
  text-shadow: 1px 1px 1px rgba(0,0,0,.4);
  cursor: var(--c-arrow);
}
#startmenu .foot .sq {
  width: 18px; height: 18px; border-radius: 3px;
  background: linear-gradient(180deg, #ff8a5c, #d13a13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  display: grid; place-items: center;
}
#startmenu .foot .sq::after {
  content: ''; width: 8px; height: 8px; border: 2px solid #fff;
  border-radius: 50%; border-top-color: transparent;
}

/* ═══ dialogs ════════════════════════════════════════════ */
#modal {
  position: fixed; inset: 0; z-index: 950;
  display: none; align-items: center; justify-content: center;
}
#modal.on { display: flex; }
.dlg {
  min-width: 300px; max-width: min(460px, 92vw);
  background: var(--face);
  border: 3px solid var(--title-a1);
  border-top: 0;
  border-radius: 8px 8px 0 0;
  box-shadow: 3px 3px 14px rgba(0,0,0,.5);
  animation: pop .09s ease-out;
}
@keyframes pop { from { transform: scale(.94); opacity: .4; } }
.dlg .body { display: flex; gap: 14px; padding: 18px 16px 8px; align-items: flex-start; }
.dlg .msg { padding-top: 2px; line-height: 1.5; }
.dlg .msg h4 { margin: 0 0 6px; font: 700 11px Tahoma, sans-serif; }
.dlg .foot { display: flex; justify-content: center; gap: 8px; padding: 8px 16px 14px; }

/* ═══ toast ══════════════════════════════════════════════ */
/* where hints go when the status bar is too narrow to hold them */
#toast {
  position: fixed;
  left: 50%; bottom: 42px;
  transform: translate(-50%, 8px);
  z-index: 960;
  max-width: min(320px, 88vw);
  padding: 7px 12px;
  background: #ffffe1;
  border: 1px solid #000;
  box-shadow: 2px 2px 4px rgba(0,0,0,.35);
  font: 11px Tahoma, sans-serif;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ═══ tooltip ════════════════════════════════════════════ */
#tip {
  position: fixed; z-index: 999;
  padding: 2px 6px 3px;
  background: #ffffe1;
  border: 1px solid #000;
  font: 11px Tahoma, sans-serif;
  pointer-events: none;
  display: none;
  box-shadow: 1px 1px 2px rgba(0,0,0,.25);
}
#tip.on { display: block; }

/* ═══ boot ═══════════════════════════════════════════════ */
#boot {
  position: fixed; inset: 0; z-index: 1000;
  background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  transition: opacity .5s ease .1s;
}
#boot.gone { opacity: 0; pointer-events: none; }
#boot .brand { display: flex; align-items: baseline; gap: 10px; }
#boot .brand .m { font: 400 26px Tahoma, sans-serif; letter-spacing: .5px; }
#boot .brand .b { font: 700 40px Tahoma, sans-serif; }
#boot .brand .tm { font: 400 11px Tahoma, sans-serif; align-self: flex-start; margin-left: -6px; }
#boot .bar {
  width: 190px; height: 15px;
  border: 2px solid #7c7c7c; border-radius: 3px;
  padding: 2px; overflow: hidden;
}
#boot .bar i {
  display: block; width: 38px; height: 100%;
  background: linear-gradient(90deg, #1a3f9e, #4d8ff0, #1a3f9e);
  animation: slide 1.9s linear infinite;
}
@keyframes slide { from { transform: translateX(-42px); } to { transform: translateX(190px); } }
#boot .foot {
  position: absolute; bottom: 26px; right: 30px; text-align: right;
  font: 11px Tahoma, sans-serif; color: #b9b9b9;
}
#boot .cr { position: absolute; bottom: 26px; left: 30px; font: 11px Tahoma, sans-serif; color: #b9b9b9; }

/* ═══ effects ════════════════════════════════════════════ */
#crt {
  position: fixed; inset: 0; z-index: 990;
  pointer-events: none; display: none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.42) 100%);
  mix-blend-mode: multiply;
}
#crt.on { display: block; }
#crt::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,.045) 50%, transparent 100%);
  height: 34%;
  animation: roll 7s linear infinite;
}
@keyframes roll { from { transform: translateY(-40%); } to { transform: translateY(320%); } }

#saver {
  position: fixed; inset: 0; z-index: 995;
  background: #000; display: none;
  cursor: none;
}
#saver.on { display: block; }
#saver .fly {
  position: absolute;
  font: 700 34px Tahoma, sans-serif;
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 18px currentColor;
}

/* ═══ clippy ═════════════════════════════════════════════ */
#clip {
  position: fixed; right: 18px; bottom: 44px; z-index: 700;
  display: none; align-items: flex-end; gap: 6px;
}
#clip.on { display: flex; animation: clipin .3s ease-out; }
@keyframes clipin { from { transform: translateY(14px); opacity: 0; } }
#clip .bubble {
  position: relative;
  max-width: 216px;
  padding: 9px 11px 10px;
  background: #ffffe1;
  border: 1px solid #000;
  border-radius: 5px;
  font: 11px Tahoma, sans-serif; line-height: 1.5;
  box-shadow: 2px 2px 5px rgba(0,0,0,.3);
}
#clip .bubble::after {
  content: ''; position: absolute; right: -7px; bottom: 13px;
  border: 7px solid transparent; border-left-color: #000; border-right: 0;
}
#clip .bubble .x {
  position: absolute; top: 2px; right: 3px;
  border: 0; background: none; font: 11px Tahoma, sans-serif; color: #666;
  cursor: var(--c-arrow); padding: 2px 4px;
}
#clip .bubble .x:hover { color: #000; }
#clip svg { flex: none; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.35)); }
#clip .eye { transform-origin: center; animation: blink 4.4s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

/* ═══ text entry on canvas ═══════════════════════════════ */
#tbox {
  position: absolute; z-index: 4;
  display: none;
  padding: 1px 2px;
  border: 1px dashed #000;
  background: transparent;
  font: 16px Tahoma, sans-serif;
  color: #000;
  outline: 0;
  min-width: 90px;
  cursor: var(--c-text);
}
#tbox.on { display: block; }

/* ═══ responsive ═════════════════════════════════════════ */
@media (max-width: 900px), (pointer: coarse) {
  html, body { cursor: auto; }
  #icons { display: none; }
  #desktop { inset: 0 0 30px 0; overflow: auto; padding: 6px 6px 10px; }
  .win {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 0 8px;
    box-shadow: 1px 1px 6px rgba(0,0,0,.35);
  }
  .win.hidden { display: none; }
  .win-paint .cv-outer { height: 58vh; }
  .toolbox { width: 52px; }
  .tools { grid-template-columns: 23px 23px; }
  .tool { width: 23px; }
  .tbar { height: 30px; }
  .tbtn { width: 24px; height: 24px; }
  #clip { display: none !important; }
  .cv-wrap { cursor: crosshair; }

  /* a static window has no height to hand down, so the pane needs its own */
  .pane { min-height: 260px; max-height: 62vh; }

  /* the status bar cannot hold four fields at 375px */
  #st-hint, #st-size { display: none; }
  .statusbar { height: 24px; }
  .statusbar > span { flex: 1; justify-content: center; }

  /* the boot footer is two lines side by side, which will not fit */
  #boot { gap: 20px; }
  #boot .brand .b { font-size: 34px; }
  #boot .foot, #boot .cr {
    position: static; text-align: center; left: auto; right: auto; bottom: auto;
  }

  #tasks { gap: 2px; }
  .task { min-width: 0; flex: 1; padding: 0 5px; }
  #tray { padding: 0 6px; gap: 6px; }
  .pal { grid-template-rows: repeat(2, 17px); }
  .sw { width: 17px; height: 17px; }
}