:root {
  --paper: #f2efe8;
  --panel: #ffffff;
  --ink: #22303f;
  --ink-soft: #5c6b7c;
  --accent: #e287a6;
  --cell-off: #ddd8ca;
}
body.night {
  --paper: #141a24;
  --panel: #1d2634;
  --ink: #cdd7e4;
  --ink-soft: #7d8ca0;
  --cell-off: #2c3644;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Courier New", ui-monospace, Menlo, monospace;
  font-weight: bold;
  -webkit-user-select: none;
  user-select: none;
  transition: background 1.2s, color 1.2s;
}

main {
  max-width: 680px;
  margin: 0 auto;
  padding: 14px 12px 24px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
h1 {
  font-size: 18px;
  letter-spacing: 3px;
  margin: 0;
}
.chips { display: flex; gap: 8px; }
.chip {
  font: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  padding: 4px 8px;
  box-shadow: 0 3px 0 var(--ink);
}
button.chip { cursor: pointer; }
button.chip:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

#scene {
  display: flex;
  gap: 14px;
  align-items: stretch;
  flex-wrap: wrap;
}

#stage-frame { flex: 1 1 300px; min-width: 260px; }
#canvas-stack {
  position: relative;
  width: 100%;
  max-width: 530px;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  background: #f4f1ea;
  overflow: hidden;
}
#canvas-stack canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
#view { touch-action: none; cursor: grab; }
#view:active { cursor: grabbing; }
#view[data-mode="prune"] {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Ctext%20y='22'%20font-size='21'%3E%E2%9C%82%EF%B8%8F%3C/text%3E%3C/svg%3E") 5 12, crosshair;
}
#view[data-mode="wire"] {
  /* drawn icon (branch + gray wire wraps): emoji glyphs don't rasterize reliably in cursors */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Cg%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2022%20L22%206'%20stroke='white'%20stroke-width='7'/%3E%3Cpath%20d='M6%2022%20L22%206'%20stroke='%237b4a2d'%20stroke-width='3.5'/%3E%3Cpath%20d='M8%2015%20l5%205%20M12%2011%20l5%205%20M16%207%20l5%205'%20stroke='white'%20stroke-width='4'/%3E%3Cpath%20d='M8%2015%20l5%205%20M12%2011%20l5%205%20M16%207%20l5%205'%20stroke='%23b0713c'%20stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 14 14, crosshair;
}

#view[data-mode="trim"] {
  /* pinching shears + leaf */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Cg%20stroke-linecap='round'%3E%3Cpath%20d='M10%2025%20Q9%2013%2024%208%20Q23%2021%2013%2025%20Q11%2026%2010%2025%20Z'%20fill='%237cb668'%20stroke='%2322303f'%20stroke-width='1.5'/%3E%3Cpath%20d='M13%2021%20Q16%2015%2022%2011'%20fill='none'%20stroke='%2345602f'%20stroke-width='1'/%3E%3Cpath%20d='M2%202%20L11%2011%20M11%202%20L2%2011'%20stroke='white'%20stroke-width='5'/%3E%3Cpath%20d='M2%202%20L11%2011%20M11%202%20L2%2011'%20stroke='%2322303f'%20stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 6 6, crosshair;
}

/* view-mode contextual cursors: the scene advertises its tap actions */
#view[data-mode="view"][data-hover="leaf"] {
  /* spray bottle, nozzle + mist at the hotspot */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Cg%20stroke='%2322303f'%20stroke-width='1.5'%3E%3Crect%20x='10'%20y='12'%20width='12'%20height='14'%20rx='2'%20fill='%23cfe9f5'/%3E%3Crect%20x='13'%20y='9'%20width='6'%20height='4'%20fill='%239fc6e8'/%3E%3Crect%20x='10'%20y='4'%20width='11'%20height='6'%20rx='1'%20fill='%234f9bd8'/%3E%3Crect%20x='5'%20y='5'%20width='5'%20height='3'%20fill='%234f9bd8'/%3E%3Cpath%20d='M12%2010%20v4%20h3'%20fill='none'/%3E%3C/g%3E%3Cg%20fill='%23eaf5fb'%20stroke='%2322303f'%20stroke-width='1'%3E%3Ccircle%20cx='3'%20cy='3'%20r='1.5'/%3E%3Ccircle%20cx='2.5'%20cy='7.5'%20r='1.5'/%3E%3Ccircle%20cx='4'%20cy='11'%20r='1.5'/%3E%3C/g%3E%3C/svg%3E") 4 7, pointer;
}
#view[data-mode="view"][data-hover="sky"] {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Cpath%20d='M14%203%20C10%2010%207%2014%207%2018%20a7%207%200%200%200%2014%200%20C21%2014%2018%2010%2014%203%20z'%20fill='%234f9bd8'%20stroke='white'%20stroke-width='2.5'/%3E%3C/svg%3E") 14 14, pointer;
}
#view[data-mode="view"][data-hover="wood"] { cursor: pointer; }
#view[data-mode="view"][data-hover="wire"] {
  /* a placed wire is a bend handle: same tool cursor as wire mode */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Cg%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M6%2022%20L22%206'%20stroke='white'%20stroke-width='7'/%3E%3Cpath%20d='M6%2022%20L22%206'%20stroke='%237b4a2d'%20stroke-width='3.5'/%3E%3Cpath%20d='M8%2015%20l5%205%20M12%2011%20l5%205%20M16%207%20l5%205'%20stroke='white'%20stroke-width='4'/%3E%3Cpath%20d='M8%2015%20l5%205%20M12%2011%20l5%205%20M16%207%20l5%205'%20stroke='%23b0713c'%20stroke-width='2'/%3E%3C/g%3E%3C/svg%3E") 14 14, pointer;
}
#view[data-mode="view"][data-hover="sand"] {
  /* zen rake: wooden handle + 4 teeth, hotspot at the teeth */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Cg%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M24%2024%20L11%2011'%20stroke='white'%20stroke-width='6'/%3E%3Cpath%20d='M24%2024%20L11%2011'%20stroke='%237b4a2d'%20stroke-width='3'/%3E%3Cpath%20d='M4%2013%20L13%204'%20stroke='white'%20stroke-width='6'/%3E%3Cpath%20d='M4%2013%20L13%204'%20stroke='%236b7a8a'%20stroke-width='3'/%3E%3Cpath%20d='M5%2012%20l-3%20-3%20M8%209%20l-3%20-3%20M11%206%20l-3%20-3%20M14%203%20l-3%20-3'%20stroke='white'%20stroke-width='3.5'/%3E%3Cpath%20d='M5%2012%20l-3%20-3%20M8%209%20l-3%20-3%20M11%206%20l-3%20-3%20M14%203%20l-3%20-3'%20stroke='%236b7a8a'%20stroke-width='1.6'/%3E%3C/g%3E%3C/svg%3E") 5 7, pointer;
}
#view[data-mode="view"][data-hover="pebble"] {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='28'%20height='28'%3E%3Cg%20stroke='%2322303f'%20stroke-width='1.5'%20fill='%23e3cf6b'%3E%3Ccircle%20cx='9'%20cy='18'%20r='4.5'/%3E%3Ccircle%20cx='16'%20cy='9'%20r='4.5'/%3E%3Ccircle%20cx='20'%20cy='19'%20r='4.5'/%3E%3C/g%3E%3C/svg%3E") 14 14, pointer;
}
#fx { pointer-events: none; }

#zoom-ctl {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 3;
}
#zoom-ctl button {
  width: 30px;
  height: 30px;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
#zoom-ctl button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
#zoom-ctl #btn-res { font-size: 9px; letter-spacing: 0; }

#future-bar {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: calc(100% - 56px);   /* keep clear of the zoom buttons */
  z-index: 3;
}
#future-bar button {
  font: inherit;
  font-size: 10px;
  letter-spacing: 1px;
  padding: 5px 7px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
#future-bar button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
#future-bar button.active { background: #9b7fd4; color: #fff; }

#branch-menu {
  position: absolute;
  display: flex;
  gap: 5px;
  z-index: 4;
}
#branch-menu button {
  font: inherit;
  font-size: 11px;
  letter-spacing: 1px;
  padding: 6px 9px;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
}
#branch-menu button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
#bm-wire.unwire { background: #b0713c; color: #fff; }   /* copper = wire comes OFF */

#fatal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  font-size: 13px;
  line-height: 1.6;
  background: var(--paper);
  color: var(--ink);
  z-index: 5;
}

#status-line {
  margin-top: 8px;
  min-height: 18px;
  text-align: center;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-soft);
}

#panel {
  flex: 0 1 150px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.stat label {
  display: block;
  font-size: 10px;
  letter-spacing: 2px;
  margin-bottom: 3px;
  color: var(--ink-soft);
}
.bar { display: flex; gap: 2px; }
.bar i {
  width: 9px;
  height: 13px;
  background: var(--cell-off);
  border: 1px solid var(--ink);
}
#bar-water i.on  { background: #5ea7d8; }
#bar-mist i.on   { background: #9ecfdd; }
#bar-food i.on   { background: #d8c05e; }
#bar-health i.on { background: var(--accent); }
.bar.low i.on    { background: #d86a5e !important; }

#tree-facts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--ink-soft);
}
#fact-stage { color: var(--accent); }

#actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 16px;
}
.btn {
  font: inherit;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  padding: 8px 12px;
  cursor: pointer;
  touch-action: manipulation;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.small { padding: 8px 10px; }
.btn.mode.active { background: var(--accent); color: #fff; }
.btn.danger { border-color: #b04a3e; color: #b04a3e; box-shadow: 0 4px 0 #b04a3e; }
body.night .btn.danger { color: #e08a7e; border-color: #e08a7e; box-shadow: 0 4px 0 #e08a7e; }

#toasts {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.toast {
  position: absolute;
  max-width: 300px;
  pointer-events: none;        /* plain messages never block clicks… */
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 7px 12px;
  border: 2px solid var(--paper);
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  animation: toast-in .18s steps(3) both;
  display: flex;
  gap: 10px;
  align-items: center;
}
.toast.has-action { pointer-events: auto; }   /* …only actionable toasts are clickable */
.toast button {
  font: inherit;
  background: var(--paper);
  color: var(--ink);
  border: none;
  padding: 3px 8px;
  cursor: pointer;
}
@keyframes toast-in { from { transform: translateY(14px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 14, 20, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
  padding: 16px;
}
.modal.hidden, .hidden { display: none !important; }
.modal-box {
  background: var(--panel);
  color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  max-width: 440px;
  width: 100%;
  max-height: 84vh;
  overflow-y: auto;
  padding: 14px 16px 16px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.guide { list-style: none; padding: 0; margin: 0; font-size: 12px; line-height: 1.7; font-weight: normal; }
.guide li { margin-bottom: 6px; }
.fine { font-size: 10.5px; line-height: 1.6; color: var(--ink-soft); font-weight: normal; }
.row { display: flex; gap: 8px; margin: 10px 0; }
.row input {
  flex: 1;
  font: inherit;
  font-size: 12px;
  padding: 8px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  min-width: 0;
}
#city-results { display: flex; flex-direction: column; gap: 6px; }
#city-results .btn { text-align: left; font-size: 11px; }
hr { border: none; border-top: 2px dashed var(--ink-soft); margin: 14px 0; }

footer {
  margin-top: 20px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ink-soft);
  font-weight: normal;
}

/* ---------- wallpaper mode: pure scene, edge to edge ---------- */
html.wallpaper, html.wallpaper body { background: #10141f; overflow: hidden; }
html.wallpaper main { max-width: none; padding: 0; }
html.wallpaper header,
html.wallpaper #panel,
html.wallpaper #actions,
html.wallpaper #status-line,
html.wallpaper footer,
html.wallpaper #zoom-ctl,
html.wallpaper #future-bar,
html.wallpaper .modal { display: none !important; }
/* the branch ✂️/➰ menu and toasts (cut-undo, wire feedback) stay usable on the desktop */
html.wallpaper #stage-frame { min-width: 0; }
html.wallpaper #canvas-stack {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  border: none;
  box-shadow: none;
}

/* ---------- DNA viewer mode: someone else's bonsai, read-only ---------- */
body.viewer #actions,
body.viewer #panel .stat,
body.viewer #chip-weather,
body.viewer #future-bar,
body.viewer #branch-menu,
body.viewer footer { display: none !important; }
body.viewer #status-line { color: var(--ink-soft); }
body.viewer #tree-facts { margin-top: 0; }