/* PUMP95 OS: a 1:1 Windows 95 shell. Pixel font from 98.css (MIT), everything else drawn here. */
@font-face { font-family: "Pixel MS Sans"; src: url("fonts/ms_sans_serif.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Pixel MS Sans"; src: url("fonts/ms_sans_serif_bold.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "VT323"; src: url("fonts/vt323.woff2") format("woff2"); font-display: swap; }  /* OFL, vendored: no Google request */

:root {
  --teal: #008080; --face: #c0c0c0; --hi: #ffffff; --lt: #dfdfdf; --lo: #808080; --dk: #000000; --navy: #000080; --sel: #000080;
  --ui: "Pixel MS Sans", "MS Sans Serif", Tahoma, Arial, sans-serif;
  --up: inset -1px -1px var(--dk), inset 1px 1px var(--hi), inset -2px -2px var(--lo), inset 2px 2px var(--lt);
  --down: inset -1px -1px var(--hi), inset 1px 1px var(--dk), inset -2px -2px var(--lt), inset 2px 2px var(--lo);
  --field: inset -1px -1px var(--hi), inset 1px 1px var(--lo), inset -2px -2px var(--lt), inset 2px 2px var(--dk);
  --well: inset -1px -1px var(--hi), inset 1px 1px var(--lo);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; }
body { font: 11px/1.25 var(--ui); color: #000; -webkit-font-smoothing: none; font-smooth: never; user-select: none; }
svg.px { shape-rendering: crispEdges; image-rendering: pixelated; flex: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ---------- boot ---------- */
.power { position: fixed; inset: 0; z-index: 900; background: #000; display: grid; place-items: center; cursor: pointer; }
.power { background: #000 repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.pw { display: grid; justify-items: center; gap: 18px; padding: 24px; text-align: center; }
.pw-logo { font: 900 clamp(56px, 11vw, 132px)/.9 "Arial Black", Arial, sans-serif; letter-spacing: -3px; color: #fff; text-shadow: 4px 4px 0 #003a1a, 0 0 40px rgba(0,255,102,.25); }
.pw-logo b { color: #00ff66; }
.pw-tag { margin: 0; color: #e8e8e8; font: 22px/1.3 "VT323", "Courier New", monospace; letter-spacing: .5px; }
.pw-tag span { color: #9a9a9a; font-size: 18px; }
.pw-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; color: #7a7a7a; font: 17px "VT323", monospace; }
.pw-stats b { color: #00ff66; }
.pw-skip { background: none; border: 0; color: #5a5a5a; font: 16px "VT323", monospace; cursor: pointer; text-decoration: underline; }
.pw-skip:hover { color: #aaa; }
.power .pbtn { display: grid; gap: 12px; justify-items: center; color: #cfcfcf; font: 20px "VT323", "Courier New", monospace; letter-spacing: 2px; background: none; border: 0; cursor: pointer; }
.power .pbtn i { width: 84px; height: 84px; border-radius: 50%; border: 3px solid #3a3a3a; display: grid; place-items: center; box-shadow: 0 0 0 6px #111, 0 0 30px #00ff6633; }
.power .pbtn i::after { content: ""; width: 30px; height: 30px; border: 3px solid #00ff66; border-top-color: transparent; border-radius: 50%; }
.power .pbtn:hover i { box-shadow: 0 0 0 6px #111, 0 0 40px #00ff6699; }
.bios { position: fixed; inset: 0; z-index: 890; background: #000; color: #b8b8b8; font: 20px/1.2 "VT323", "Courier New", monospace; padding: 28px 36px; white-space: pre; overflow: hidden; }
.bios .ok { color: #fff; } .bios .hi { color: #00ff66; }
.splash { position: fixed; inset: 0; z-index: 880; overflow: hidden; background: #6a8fd8; }
.splash canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.splash .logo { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); text-align: center; color: #000; }
.splash .logo .mark { display: inline-flex; align-items: center; gap: 16px; }
.splash .logo .word { font: 900 clamp(48px, 9vw, 110px)/1 "Arial Black", Arial, sans-serif; letter-spacing: -2px; color: #fff; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000; }
.splash .logo .word b { color: #00ff66; }
.splash .logo small { display: block; margin-top: 10px; font: italic 700 clamp(13px, 1.6vw, 18px) Arial, sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; letter-spacing: 1px; }
.splash .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(90deg, #000080, #00a0ff, #00ff66, #00a0ff, #000080) 0 0 / 50% 100% repeat-x; animation: splashbar 1.2s linear infinite; }
@keyframes splashbar { to { background-position: 100% 0; } }
.fadeout { animation: fadeout .35s forwards; } @keyframes fadeout { to { opacity: 0; visibility: hidden; } }

/* ---------- desktop ---------- */
.desktop { position: fixed; inset: 0 0 28px 0; background: var(--teal); overflow: hidden; }
.wall { position: absolute; right: 96px; bottom: 10px; text-align: right; pointer-events: none; color: #00504f; }   /* a quiet version stamp, like Windows */
.wall b { font: 900 22px/1 "Arial Black", Arial, sans-serif; letter-spacing: -1px; display: block; }
.wall span { font: 11px var(--ui); letter-spacing: 1px; }
.icons { position: absolute; left: 4px; top: 4px; bottom: 4px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 4px 2px; }
.dicon { width: 84px; padding: 2px 0; background: none; border: 0; display: grid; justify-items: center; gap: 3px; cursor: default; color: #fff; outline: none; }
.dicon .img { position: relative; width: 32px; height: 32px; }
.dicon .img svg { width: 32px; height: 32px; }
.dicon .lbl { padding: 1px 2px; max-width: 82px; text-align: center; word-wrap: break-word; line-height: 12px; }
.dicon.sel .img::after { content: ""; position: absolute; inset: 0; background: repeating-conic-gradient(var(--sel) 0 25%, transparent 0 50%) 0 0 / 2px 2px; opacity: .9; mix-blend-mode: multiply; }
.dicon.sel .lbl { background: var(--sel); outline: 1px dotted #ffff80; outline-offset: -1px; }
.dicon .badge { position: absolute; left: -2px; bottom: -2px; width: 11px; height: 11px; }

/* ---------- windows ---------- */
.win { position: absolute; background: var(--face); box-shadow: var(--up); padding: 3px; display: flex; flex-direction: column; min-width: 180px; min-height: 80px; }
.win[hidden] { display: none; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.tb { height: 18px; flex: none; display: flex; align-items: center; gap: 3px; padding: 0 2px 0 3px; background: var(--lo); color: var(--face); font-weight: 700; white-space: nowrap; }
.win.focus > .tb { background: var(--navy); color: #fff; }
.tb .t { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tb svg { width: 16px; height: 16px; }
.tbb { width: 16px; height: 14px; padding: 0; border: 0; background: var(--face); box-shadow: var(--up); display: grid; place-items: center; }
.tbb:active { box-shadow: var(--down); } .tbb:active svg { transform: translate(1px, 1px); }
.tbb svg { width: 8px; height: 7px; }
.tbb.x { margin-left: 2px; }
.menu { flex: none; display: flex; padding: 1px 0 2px; }
.menu > span { padding: 2px 6px; }
.menu > span:hover, .menu > span.open { background: var(--navy); color: #fff; }
.menu u { text-decoration: underline; }
.body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sbar { flex: none; display: flex; gap: 2px; margin-top: 2px; }
.sbar > span { box-shadow: var(--well); padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbar > span:first-child { flex: 1; }
.grip { position: absolute; right: 2px; bottom: 2px; width: 12px; height: 12px; cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 0 50%, var(--hi) 50% 56%, var(--lo) 56% 68%, transparent 68% 72%, var(--hi) 72% 78%, var(--lo) 78% 90%, transparent 90%); }
.win.max .grip, .win.fixed .grip { display: none; }

/* controls */
.btn { min-width: 75px; min-height: 23px; padding: 3px 10px; background: var(--face); border: 0; box-shadow: var(--up); cursor: default; }
.btn:active:not(:disabled), .btn.on { box-shadow: var(--down); }
.btn:active:not(:disabled) > * { transform: translate(1px, 1px); }
.btn.def { box-shadow: inset -1px -1px var(--dk), inset 1px 1px var(--dk), inset -2px -2px var(--dk), inset 2px 2px var(--hi), inset -3px -3px var(--lo), inset 3px 3px var(--lt); }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
.btn:disabled { color: var(--lo); text-shadow: 1px 1px 0 var(--hi); }
.fld { background: #fff; border: 0; box-shadow: var(--field); padding: 3px 4px; outline: none; user-select: text; }
.fld:disabled { background: var(--face); }
textarea.fld { resize: none; }
select.fld { padding: 2px; }
.grp { position: relative; border: 0; box-shadow: inset -1px -1px var(--hi), inset 1px 1px var(--lo), inset -2px -2px var(--lo), inset 2px 2px var(--hi); padding: 12px 8px 8px; margin: 8px 0 0; }
.grp > legend { position: absolute; top: -7px; left: 7px; background: var(--face); padding: 0 3px; }
.sunk { background: #fff; box-shadow: var(--field); padding: 2px; overflow: auto; }
.hr { height: 2px; box-shadow: inset 0 1px var(--lo), inset 0 -1px var(--hi); margin: 6px 0; }
.lnk { color: #0000ff; text-decoration: underline; cursor: pointer; }
.up { color: #008000; } .dn { color: #c00000; }

/* progress bar, Win95 chunks */
.prog { height: 18px; box-shadow: var(--well); padding: 2px; background: var(--face); }
.prog i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--navy) 0 8px, transparent 8px 10px); }
.prog.green i { background: repeating-linear-gradient(90deg, #008000 0 8px, transparent 8px 10px); }
.prog.mini { height: 12px; padding: 1px; } .prog.mini i { background: repeating-linear-gradient(90deg, var(--navy) 0 4px, transparent 4px 5px); }

/* tabs (property sheets) */
.tabs { display: flex; padding: 2px 2px 0; position: relative; z-index: 1; }
.tabs button { border: 0; background: var(--face); padding: 3px 10px 2px; margin-right: -2px; box-shadow: inset 1px 1px var(--hi), inset -1px 0 var(--dk), inset -2px 0 var(--lo); border-radius: 3px 3px 0 0; position: relative; top: 2px; }
.tabs button.on { top: 0; padding-bottom: 4px; z-index: 2; margin: 0 -2px 0 -2px; padding-left: 12px; padding-right: 12px; }
.sheet { flex: 1; min-height: 0; box-shadow: var(--up); padding: 8px; overflow: auto; }

/* list view (details) */
.lv { flex: 1; min-height: 0; overflow: auto; background: #fff; box-shadow: var(--field); }
.lv table { border-collapse: collapse; width: 100%; white-space: nowrap; }
.lv th { position: sticky; top: 0; z-index: 1; background: var(--face); box-shadow: var(--up); font-weight: 400; text-align: left; padding: 2px 6px; cursor: default; }
.lv th:active { box-shadow: var(--down); }
.lv th.r, .lv td.r { text-align: right; }
.lv td { padding: 1px 6px; height: 22px; }
.lv tr.sel td { background: var(--navy); color: #fff; }
.lv tr.sel td .up, .lv tr.sel td .dn { color: #fff; }
.lv td.nm { display: flex; align-items: center; gap: 5px; }
.lv td.nm img { width: 18px; height: 18px; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--lo); background: #fff; }
.lv .arr { font-size: 9px; margin-left: 4px; }

/* large-icon view */
.li { flex: 1; min-height: 0; overflow: auto; background: #fff; box-shadow: var(--field); display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; padding: 8px; }
.li .it { width: 92px; display: grid; justify-items: center; gap: 3px; padding: 3px; text-align: center; }
.li .it img, .li .it svg { width: 48px; height: 48px; image-rendering: pixelated; }
.li .it.sel span { background: var(--navy); color: #fff; outline: 1px dotted #ffff80; outline-offset: -1px; }
.li .it.sel img { filter: sepia(1) hue-rotate(190deg) saturate(4) brightness(.6); }

/* ---------- taskbar + start ---------- */
.taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 28px; z-index: 800; background: var(--face); box-shadow: inset 0 1px var(--lt), inset 0 2px var(--hi); display: flex; align-items: center; gap: 4px; padding: 2px 2px 0; }
.start { height: 22px; min-width: 0; padding: 0 5px 0 3px; display: flex; align-items: center; gap: 3px; font-weight: 700; }
.start svg { width: 18px; height: 16px; }
.tasks { flex: 1; display: flex; gap: 3px; min-width: 0; height: 22px; }
.tasks .btn { flex: 0 1 160px; min-width: 40px; height: 22px; display: flex; align-items: center; gap: 4px; padding: 0 4px; text-align: left; overflow: hidden; }
.tasks .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tasks .btn.on { font-weight: 700; background: repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
.tasks .btn svg { width: 16px; height: 16px; }
.tray { height: 22px; box-shadow: var(--well); display: flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; }
.tray .tk { display: flex; align-items: center; gap: 3px; cursor: default; }
.tray svg { width: 16px; height: 16px; }
.startmenu { position: fixed; left: 2px; bottom: 26px; z-index: 850; background: var(--face); box-shadow: var(--up); padding: 3px; display: flex; }
.startmenu[hidden] { display: none; }
.sm-side { width: 22px; background: linear-gradient(0deg, #000080, #1084d0); color: var(--face); position: relative; }
.sm-side span { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; font: 900 18px/1 "Arial Black", Arial, sans-serif; letter-spacing: -0.5px; color: #c0c0c0; }
.sm-side span b { color: #fff; }
.sm-list { display: flex; flex-direction: column; min-width: 170px; }
.mi { display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px; height: 32px; position: relative; white-space: nowrap; }
.mi svg { width: 24px; height: 24px; }
.mi.sm { height: 22px; padding-right: 18px; } .mi.sm svg { width: 16px; height: 16px; }
.mi:hover, .mi.open { background: var(--navy); color: #fff; }
.mi .sub { margin-left: auto; padding-left: 14px; font-size: 8px; }
.mi u { text-decoration: underline; }
.msep { height: 2px; margin: 3px 2px; box-shadow: inset 0 1px var(--lo), inset 0 -1px var(--hi); }
.submenu { position: fixed; z-index: 860; background: var(--face); box-shadow: var(--up); padding: 3px; min-width: 160px; color: #000; }
.submenu[hidden] { display: none; }
.ctx { position: fixed; z-index: 870; background: var(--face); box-shadow: var(--up); padding: 3px; min-width: 150px; }
.ctx .mi { height: 20px; padding: 0 20px; }
.ctx .mi.dis { color: var(--lo); text-shadow: 1px 1px 0 var(--hi); background: none; }

/* tooltip */
.tip { position: fixed; z-index: 990; background: #ffffe1; border: 1px solid #000; padding: 2px 4px; pointer-events: none; white-space: nowrap; }

/* message box */
.mbox .mrow { display: flex; gap: 14px; padding: 14px 12px 6px; align-items: flex-start; }
.mbox .mrow svg { width: 32px; height: 32px; }
.mbox .mtext { max-width: 340px; line-height: 1.4; padding-top: 4px; user-select: text; }
.mbox .mbtns { display: flex; justify-content: center; gap: 6px; padding: 8px 10px 6px; }

/* shut down */
.off { position: fixed; inset: 0; z-index: 980; background: #000; display: grid; place-items: center; color: #ff8a00; font: 900 clamp(18px, 3vw, 32px) Arial, sans-serif; text-align: center; cursor: pointer; }
.off small { display: block; margin-top: 10px; color: #aaa; font: 14px Arial, sans-serif; }
.dim { position: fixed; inset: 0 0 28px; z-index: 840; background: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 2px 2px; }

/* ---------- Paint (the engine from ../paint.js) ---------- */
.pbody { display: flex; gap: 2px; flex: 1; min-height: 0; }
.toolbox { width: 52px; display: grid; grid-template-columns: 25px 25px; gap: 0; align-content: start; padding: 2px 1px; }
.tool { width: 25px; height: 25px; box-shadow: var(--up); display: grid; place-items: center; }
.tool.on { box-shadow: var(--down); background: repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
.tool svg { width: 16px; height: 16px; }
.canvasarea { flex: 1; min-width: 0; background: var(--lo); box-shadow: var(--field); padding: 6px; overflow: auto; }
.canvaswrap { position: relative; width: 320px; height: 320px; cursor: none; box-shadow: 1px 1px 0 #000; }
.canvaswrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; background: #fff; }
.canvaswrap canvas + canvas { background: none; }
#cursor { position: absolute; left: 0; top: 0; width: 32px; height: 32px; pointer-events: none; background-repeat: no-repeat; image-rendering: pixelated; transform: translate(-100px, -100px); }
.palette { display: flex; gap: 4px; padding: 4px 2px 0; align-items: center; flex: none; }
.current { position: relative; width: 30px; height: 30px; box-shadow: var(--well); background: repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0 / 2px 2px; }
.current i { position: absolute; width: 14px; height: 14px; box-shadow: var(--well); }
#fg { left: 4px; top: 4px; z-index: 2; background: #000; } #bg { left: 12px; top: 12px; background: #fff; }
#swatches { display: grid; grid-template-columns: repeat(14, 15px); gap: 1px; }
#swatches i { width: 15px; height: 15px; box-shadow: var(--well); }
#swatches i.on { outline: 2px solid #000; outline-offset: -1px; }

/* ---------- Clippy (../clippy.js) ---------- */
.helper { position: fixed; left: 0; top: 0; z-index: 820; pointer-events: none; }
.helper .clippy { width: 60px; height: 114px; pointer-events: auto; cursor: grab; }
.helper .clippy img { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.35)); }
.helper.busy .clippy img { animation: cbob .35s steps(2) infinite; }
.helper.party .clippy img { animation: cjump .45s ease-out 3; }
@keyframes cbob { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes cjump { 40% { transform: translateY(-30px); } 80% { transform: translateY(0) scaleY(.92); } }
.bubble { position: absolute; bottom: 100%; left: 0; width: 210px; margin-bottom: 10px; background: #ffffe1; border: 1px solid #000; border-radius: 8px; padding: 7px 9px; line-height: 1.35; pointer-events: auto; box-shadow: 2px 2px 0 rgba(0,0,0,.25); }
.bubble:empty { display: none; }
.bubble::after { content: ""; position: absolute; left: 22px; bottom: -9px; border: 9px solid transparent; border-top-color: #000; border-bottom: 0; }

@media (max-width: 700px) {
  .icons { flex-direction: row; flex-wrap: wrap; right: 4px; bottom: auto; }
  .win:not(.dialog) { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
  .tray .tk { display: none; }
}