:root{
  --cream:#f9e4d1;
  --cream-hi:#fff4e6;
  --cream-lo:#d8bfa9;
  --shadow:#a1826c;
  --blue:#091eb5;
  --navy:#162646;
  --navy-deep:#070f2c;
  --night:#03041b;
  --ink:#12132b;
  --ink-2:#4a4a63;
  --violet:#8a64a7;
  --rose:#bf5e67;
  --sand:#dac89b;
  --sky:#99b2c0;

  --px:2px;
  --font-ui:'Silkscreen', ui-monospace, monospace;
  --font-body:'Pixelify Sans', ui-monospace, monospace;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%;overflow:hidden;background:#000}
body{font-family:var(--font-ui);color:var(--ink);-webkit-font-smoothing:none;image-rendering:pixelated}
canvas.ic{image-rendering:pixelated;vertical-align:middle}
button{font:inherit;color:inherit;cursor:pointer}

#screen{position:relative;height:100%;background:var(--night);overflow:hidden}

/* ---------- boot ---------- */
#boot{position:absolute;inset:0;background:var(--night);color:#cfe3ff;padding:32px;font-size:13px;z-index:900}
#boot pre{margin:0;font-family:var(--font-ui);line-height:1.6;white-space:pre-wrap}

/* ---------- shell ---------- */
#shell{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto}

#shellbar{
  display:flex;align-items:center;gap:12px;
  background:var(--cream);border-bottom:var(--px) solid var(--ink);
  padding:4px 8px;font-size:12px;
}
#shellbar .brand{display:flex;align-items:center;gap:6px}
#banner{
  flex:1;background:var(--blue);color:var(--cream);
  padding:4px 8px;border:var(--px) solid var(--ink);
  font-size:12px;letter-spacing:.02em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#wallclock{font-size:12px}

#desktop{position:relative;overflow:hidden;background:var(--navy-deep) center bottom/cover no-repeat}
/* the layer spans the desktop so windows can be dragged anywhere in it, but it must
   not swallow clicks meant for the icons underneath: only the windows take pointers */
#windows{position:absolute;inset:0;z-index:2;pointer-events:none}
#windows > *{pointer-events:auto}
#icons{position:absolute;inset:8px auto 8px 8px;display:flex;flex-direction:column;flex-wrap:wrap;gap:2px;width:220px;z-index:1}
.dicon{
  width:96px;padding:6px 2px;background:none;border:var(--px) solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:var(--cream);font-size:10px;text-align:center;text-shadow:2px 2px 0 #000a;
}
.dicon:hover{border-color:#ffffff55}
.dicon.sel{border-style:dotted;border-color:var(--cream);background:#0a1fb566}

/* ---------- windows ---------- */
.win{
  position:absolute;display:flex;flex-direction:column;
  background:var(--cream);border:var(--px) solid var(--ink);
  box-shadow:4px 4px 0 #0007;min-width:180px;min-height:120px;
}
.win.min{display:none}
.win-bar{
  display:flex;align-items:center;gap:6px;padding:3px 4px;
  background:var(--cream);border-bottom:var(--px) solid var(--ink);
  font-size:11px;cursor:grab;user-select:none;
}
.win.active .win-bar{background:var(--blue);color:var(--cream)}
.win-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-btn{
  width:16px;height:14px;padding:0;display:grid;place-items:center;
  background:var(--cream);border:var(--px) solid var(--ink);
}
.win-btn:active{background:var(--cream-lo)}
.win-body{flex:1;overflow:auto;position:relative;background:var(--cream)}
.win-grip{position:absolute;right:0;bottom:0;width:14px;height:14px;cursor:nwse-resize;
  background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 4px)}

/* sunken / raised bevels */
.sunken{border:var(--px) solid var(--ink);box-shadow:inset 2px 2px 0 var(--cream-lo)}
.raised{border:var(--px) solid var(--ink);box-shadow:inset -2px -2px 0 var(--cream-lo), inset 2px 2px 0 var(--cream-hi)}

/* ---------- taskbar + menu ---------- */
#taskbar{
  display:flex;align-items:center;gap:6px;padding:4px 6px;
  background:var(--cream);border-top:var(--px) solid var(--ink);font-size:11px;
}
#menubtn{background:var(--blue);color:var(--cream);border:var(--px) solid var(--ink);padding:3px 10px}
#menubtn:active,#menubtn.on{background:var(--ink)}
#tasks{flex:1;display:flex;gap:4px;overflow:hidden}
.task{background:var(--cream);border:var(--px) solid var(--ink);padding:3px 8px;max-width:180px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;gap:5px;align-items:center}
.task.on{background:var(--blue);color:var(--cream)}
#status{display:flex;gap:12px;align-items:center}
#status .stat{display:flex;gap:5px;align-items:center;border:var(--px) solid var(--ink);padding:2px 8px;
  background:var(--cream);font:inherit;color:inherit}
#walletchip{cursor:pointer}
#walletchip:hover{background:var(--sky)}

#menu{
  position:absolute;left:10px;bottom:44px;z-index:500;
  background:var(--blue);border:var(--px) solid var(--ink);
  padding:8px 6px;display:flex;flex-direction:column;gap:2px;min-width:170px;
  box-shadow:4px 4px 0 #0007;
}
#menu button{background:none;border:var(--px) solid transparent;color:var(--cream);
  padding:5px 10px;text-align:left;display:flex;align-items:center;gap:8px;font-size:13px}
#menu button:hover,#menu button:focus-visible{border-color:var(--cream);outline:none}

/* ---------- dialogs ---------- */
.dlg{position:absolute;z-index:800;background:var(--cream);border:var(--px) solid var(--ink);
  box-shadow:4px 4px 0 #0007;min-width:230px;font-size:11px}
.dlg .win-bar{cursor:default}
.dlg-body{padding:12px;display:flex;flex-direction:column;gap:10px}
.dlg-row{display:flex;gap:8px;justify-content:flex-end}
.btn{background:var(--cream);border:var(--px) solid var(--ink);padding:4px 12px;
  box-shadow:inset -2px -2px 0 var(--cream-lo), inset 2px 2px 0 var(--cream-hi)}
.btn:active{box-shadow:inset 2px 2px 0 var(--cream-lo)}
.btn.pri{background:var(--blue);color:var(--cream);box-shadow:none}
input[type=text],textarea,select{
  font-family:var(--font-body);font-size:14px;background:#fffaf2;color:var(--ink);
  border:var(--px) solid var(--ink);padding:4px 6px;box-shadow:inset 2px 2px 0 var(--cream-lo);
}
input[type=text]:focus-visible,textarea:focus-visible,select:focus-visible,.btn:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

/* ---------- shutdown ---------- */
#shutdown{position:absolute;inset:0;z-index:950;background:var(--night);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center;font-size:14px;line-height:2}
#shutdown button{background:var(--blue);color:var(--cream);border:var(--px) solid var(--cream);padding:8px 18px}

#scanlines{position:absolute;inset:0;pointer-events:none;z-index:990;
  background:repeating-linear-gradient(to bottom,#0000 0 2px,#0000000f 2px 4px)}
#scanlines.off{display:none}

/* ---------- paint ---------- */
.paint{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;height:100%;background:var(--cream)}
.paint-tools{display:grid;grid-template-columns:repeat(2,26px);gap:2px;padding:4px;
  border-right:var(--px) solid var(--ink);align-content:start}
.tool{width:26px;height:24px;padding:0;background:var(--cream);border:var(--px) solid var(--ink);
  box-shadow:inset -2px -2px 0 var(--cream-lo), inset 2px 2px 0 var(--cream-hi);display:grid;place-items:center}
.tool.on{background:var(--sky);box-shadow:inset 2px 2px 0 var(--cream-lo)}
.paint-stage{display:grid;place-items:center;background:var(--navy);overflow:auto;padding:8px}
.paint-stage canvas{image-rendering:pixelated;background:#fff;border:var(--px) solid var(--ink);cursor:crosshair;touch-action:none}
.paint-bottom{grid-column:1/-1;display:flex;align-items:center;gap:6px;padding:4px;
  border-top:var(--px) solid var(--ink);flex-wrap:wrap}
.swatches{display:flex;flex-wrap:wrap;gap:2px}
.sw{width:16px;height:16px;padding:0;border:var(--px) solid var(--ink)}
.sw.on{outline:2px solid var(--blue);outline-offset:1px}
.paint-cur{width:22px;height:22px;border:var(--px) solid var(--ink)}
.paint-bottom .meta{margin-left:auto;font-size:10px}
.paint-bottom .btn{padding:3px 8px}
.sw{width:14px;height:14px}

/* ---------- files / lists ---------- */
.pane{padding:6px;font-size:11px}
.bar{display:flex;gap:4px;align-items:center;padding:4px;border-bottom:var(--px) solid var(--ink);flex-wrap:wrap}
.list{display:flex;flex-wrap:wrap;gap:2px;padding:6px;align-content:start}
.fitem{width:88px;padding:6px 2px;background:none;border:var(--px) solid transparent;
  display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10px;text-align:center;word-break:break-all}
.fitem.sel{border-style:dotted;border-color:var(--ink);background:var(--sky)}
.fitem:hover{background:#0000000d}

/* ---------- notes / terminal ---------- */
.notes{display:flex;flex-direction:column;height:100%}
.notes textarea{flex:1;resize:none;border:0;border-top:var(--px) solid var(--ink);box-shadow:none;
  background:#fffaf2;padding:10px;line-height:1.6}
.term{height:100%;background:var(--night);color:#cfe3ff;padding:8px;font-size:12px;overflow:auto;line-height:1.55}
.term b{color:#ffd7a1;font-weight:400}
.term .in{display:flex;gap:6px}
.term input{flex:1;background:none;border:0;box-shadow:none;color:#cfe3ff;font-family:var(--font-ui);font-size:12px;padding:0}
.term input:focus-visible{outline:none}

/* ---------- timer / cat ---------- */
.timer{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px}
.timer .big{font-size:38px;letter-spacing:.04em}
.timer .mode{font-size:12px;color:#3c3a58}
.timer .row{display:flex;gap:6px}
.cat{height:100%;display:flex;flex-direction:column;background:var(--navy-deep)}
.cat img{width:100%;flex:1;min-height:0;object-fit:contain;image-rendering:pixelated}
.bubble{margin:8px;padding:8px 10px;background:var(--cream);border:var(--px) solid var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.5;position:relative;white-space:pre-line}
.bubble:after{content:"";position:absolute;left:18px;bottom:-8px;width:8px;height:8px;
  background:var(--cream);border-right:var(--px) solid var(--ink);border-bottom:var(--px) solid var(--ink)}
.settings{padding:12px;display:flex;flex-direction:column;gap:12px;font-size:11px}
.settings label{display:flex;align-items:center;gap:8px}
.wallgrid{display:flex;gap:6px;flex-wrap:wrap}
.wallgrid button{padding:0;border:var(--px) solid var(--ink);background:none}
.wallgrid button.on{outline:2px solid var(--blue);outline-offset:1px}
.wallgrid img{display:block;width:96px;height:72px;object-fit:cover;image-rendering:pixelated}

@media (max-width:720px){
  #icons{width:104px}
  .dicon{width:92px}
  #banner{display:none}
}