/* LATE OS. A beige box that just switched on, a little behind the times. */

@font-face{font-family:VT323;src:url("fonts/vt323-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Silkscreen;src:url("fonts/silkscreen-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Silkscreen;src:url("fonts/silkscreen-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --desk:#0b7a75;
  --desk-dot:#0a6e69;
  --face:#c3c3c3;
  --hi:#ffffff;
  --lit:#dfdfdf;
  --lo:#808080;
  --dk:#0a0a0a;
  --title-a:#7d0a1d;
  --title-b:#e3311d;
  --red:#c8102e;
  --buy:#ffd400;
  --amber:#ffb000;
  --led:#ff4a1c;
  --mono:VT323,"Lucida Console",Monaco,monospace;
  --pix:Silkscreen,VT323,"Lucida Console",monospace;
  --raised:inset -1px -1px var(--dk),inset 1px 1px var(--hi),inset -2px -2px var(--lo),inset 2px 2px var(--lit);
  --pressed:inset -1px -1px var(--hi),inset 1px 1px var(--dk),inset -2px -2px var(--lit),inset 2px 2px var(--lo);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='28' viewBox='-0.5 -0.5 13 20' shape-rendering='crispEdges'%3E%3Cpath d='M0 0v16l4-4 3 6 2-1-3-6h5z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E") 1 1, default;
  color-scheme:light;
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow-x:clip}
body{
  background:var(--desk);
  color:var(--dk);
  font-family:var(--mono);
  font-size:20px;
  line-height:1.2;
  -webkit-font-smoothing:none;
}
button,input{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:1px dotted var(--dk);outline-offset:-4px}
::selection{background:#000080;color:#fff}

@media (pointer:fine){
  html,a,button,label{cursor:var(--arrow)}
  html.busy,html.busy *{cursor:wait}
}

/* ---------- the glass ---------- */
.crt{
  position:fixed;inset:0;z-index:90;pointer-events:none;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0,0,0,.34) 100%);
}

/* ---------- boot ---------- */
html.booting .desktop,html.booting .taskbar{visibility:hidden}
.boot{
  position:fixed;inset:0;z-index:80;
  background:#050505;color:var(--amber);
  padding:max(24px,4vh) max(16px,4vw);
  text-shadow:0 0 6px rgba(255,176,0,.55);
  overflow:hidden;
}
.boot[hidden]{display:none}
.boot-log{
  margin:0;font:inherit;font-size:clamp(17px,2.4vw,24px);line-height:1.25;
  white-space:pre-wrap;word-break:break-word;
}
.boot-log .ok{color:#fff3c4}
.boot-log .bad{color:var(--led)}
.boot-log .caret{display:inline-block;width:.55em;height:1em;vertical-align:-.15em;background:var(--amber);animation:blink 1s steps(1) infinite}
.boot-skip{position:absolute;right:max(16px,4vw);bottom:max(16px,3vh);margin:0;opacity:.6;font-size:18px}
.boot.on{animation:power-on .32s steps(6) both}
.boot.off{animation:power-off .22s steps(4) both}
@keyframes power-on{
  0%{clip-path:inset(50% 0 50% 0);filter:brightness(4)}
  50%{clip-path:inset(49% 0 49% 0);filter:brightness(3)}
  100%{clip-path:inset(0 0 0 0);filter:none}
}
@keyframes power-off{to{opacity:0}}
@keyframes blink{50%{opacity:0}}

/* ---------- desktop ---------- */
.desktop{
  position:fixed;inset:0 0 40px 0;overflow:hidden;
  background-color:var(--desk);
  background-image:repeating-conic-gradient(var(--desk-dot) 0 25%, transparent 0 50%);
  background-size:4px 4px;
}
html.waking .desktop{animation:wake .5s steps(5) both}
@keyframes wake{0%{filter:brightness(2.2) saturate(.2)}60%{filter:brightness(1.2)}100%{filter:none}}
.wallmark{
  position:absolute;right:20px;bottom:14px;margin:0;
  color:rgba(255,255,255,.55);font-size:18px;text-align:right;line-height:1.1;
  pointer-events:none;
}
.wallmark b{display:block;font-family:var(--pix);font-weight:700;font-size:30px;color:rgba(255,255,255,.7);letter-spacing:1px}

.icons{position:absolute;left:10px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:1}
.icon{
  display:flex;flex-direction:column;align-items:center;gap:4px;width:112px;padding:4px 2px;
  background:none;border:0;color:#fff;text-decoration:none;text-align:center;font-size:18px;line-height:1;
}
.icon svg{width:40px;height:40px}
.icon span{padding:1px 3px;overflow-wrap:anywhere;text-shadow:1px 1px 0 #000}
.icon:focus-visible{outline:none}
.icon:focus-visible span,.icon.sel span{background:#000080;outline:1px dotted #fff}
.icon:focus-visible svg,.icon.sel svg{filter:brightness(.7) sepia(1) hue-rotate(190deg) saturate(4)}
.icon-gone svg{opacity:.75}

/* ---------- windows ---------- */
.win{
  position:absolute;left:var(--x);top:var(--y);
  background:var(--face);padding:3px;box-shadow:var(--raised);
  display:flex;flex-direction:column;
  max-width:calc(100vw - 16px);
}
.win[hidden]{display:none}
.win.opening{animation:open .18s steps(3) both}
@keyframes open{from{clip-path:inset(0 100% 100% 0)}to{clip-path:inset(0 0 0 0)}}
.bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  height:24px;padding:0 3px 0 6px;
  background:linear-gradient(90deg,var(--title-a),var(--title-b));
  color:#fff;font-family:var(--pix);font-weight:700;font-size:12px;letter-spacing:.5px;
  user-select:none;touch-action:none;
}
.win.idle .bar{background:linear-gradient(90deg,#7b7b7b,#adadad);color:#d4d4d4}
.bar-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-btns{display:flex;gap:2px;flex:none}
.bar-btn{
  width:20px;height:18px;padding:0;border:0;background:var(--face);box-shadow:var(--raised);
  color:#000;font-family:var(--pix);font-weight:700;font-size:11px;line-height:18px;
}
.bar-btn:active{box-shadow:var(--pressed)}
.menu{display:flex;gap:16px;padding:2px 6px 3px;font-size:19px;user-select:none}
.menu u{text-decoration-thickness:1px;text-underline-offset:2px}

.sunk{background:#fff;box-shadow:var(--pressed);border:0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:38px;padding:4px 18px;border:0;
  background:var(--face);box-shadow:var(--raised);
  color:#000;font-family:var(--mono);font-size:23px;line-height:1;text-decoration:none;white-space:nowrap;
}
.btn:active,.btn.down{box-shadow:var(--pressed);padding:6px 16px 2px 20px}
.btn:focus-visible{outline:1px dotted #000;outline-offset:-6px}
.btn[hidden]{display:none}
.btn-buy{background:var(--buy);font-family:var(--pix);font-weight:700;font-size:16px;letter-spacing:.5px}
.btn.flash{background:#000080;color:#fff}

/* LATE.EXE */
.win-late{--x:clamp(132px,calc(50% - 300px),calc(100% - 1030px));--y:max(24px,calc(50% - 300px));width:600px;z-index:3}
.body{padding:14px 18px 18px}
.logo{
  margin:0;font-family:var(--pix);font-weight:700;
  font-size:clamp(58px,15vw,112px);line-height:.9;letter-spacing:-2px;
  color:#000;text-shadow:5px 5px 0 var(--buy);
}
.buck{color:var(--red)}
.line{margin:12px 0 14px;font-size:clamp(28px,5vw,38px);line-height:1}
.meter{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:0 0 16px;
  padding:10px 14px;background:#000;box-shadow:var(--pressed);
  color:var(--led);text-shadow:0 0 8px rgba(255,74,28,.6);
}
.meter-k{font-size:24px;color:#ff9a7a}
.meter-v{font-size:clamp(44px,9vw,60px);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:1px}
.meter-v.unset{animation:blink 1s steps(1) infinite}
.field{display:grid;gap:4px;margin:0 0 14px}
.field-k{font-family:var(--pix);font-size:12px;letter-spacing:.5px}
.field input{width:100%;height:34px;padding:2px 8px;font-size:22px;color:#000;text-overflow:ellipsis}
.field input:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.acts{display:flex;flex-wrap:wrap;gap:10px}
.acts .btn-buy{flex:1 1 180px;min-height:44px}
.status{display:flex;gap:3px;padding-top:3px;font-size:18px}
.status .sunk{flex:1;padding:1px 6px;background:var(--face)}
.status #state{flex:0 0 auto}

/* README.TXT */
.win-readme{--x:calc(100% - 412px);--y:24px;width:392px;z-index:2}
.paper{margin:0 3px 3px;padding:10px 14px 12px;font-size:21px;line-height:1.2}
.paper h2{margin:0 0 8px;font-family:var(--pix);font-weight:700;font-size:15px;letter-spacing:.5px}
.paper ol{margin:0;padding-left:26px;display:grid;gap:8px}
.paper-end{margin:12px 0 0;color:var(--lo)}

/* CLOCK */
.win-clock{--x:calc(100% - 412px);--y:min(360px,calc(100% - 250px));width:250px;z-index:1}
.clock-body{display:flex;gap:12px;align-items:center;padding:10px 10px 8px}
.dial{width:96px;height:96px;flex:none;border-radius:0}
.ticks rect{fill:#000}
.hand{stroke:#000;stroke-linecap:square}
.hand-h{stroke-width:5}
.hand-m{stroke-width:3}
.hand-s{stroke:var(--red);stroke-width:1.5}
.clock-note{margin:0;font-size:18px;line-height:1.15}

/* dialog */
.win-alert{
  --x:calc(50% - 200px);--y:calc(50% - 110px);
  width:400px;z-index:20;
}
.alert-body{display:flex;gap:16px;align-items:flex-start;padding:18px 18px 8px}
.alert-icon{width:44px;height:44px;flex:none}
.alert-body p{margin:4px 0 0;font-size:23px;line-height:1.15}
.alert-acts{display:flex;justify-content:center;gap:10px;padding:10px 12px 14px}
.alert-acts .btn{min-width:110px}

/* window drag outline, the window catches up on release */
.drag-ghost{
  position:fixed;z-index:70;pointer-events:none;
  border:2px dotted #fff;mix-blend-mode:difference;
}
.drag-ghost[hidden]{display:none}

/* mouse trails, a beat behind the pointer */
.trail{position:fixed;inset:0;z-index:95;pointer-events:none}
.trail i{
  position:absolute;left:0;top:0;width:18px;height:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='28' viewBox='-0.5 -0.5 13 20' shape-rendering='crispEdges'%3E%3Cpath d='M0 0v16l4-4 3 6 2-1-3-6h5z' fill='%23fff' stroke='%23000'/%3E%3C/svg%3E") no-repeat;
  opacity:0;will-change:transform;
}

/* ---------- taskbar ---------- */
.taskbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;height:40px;
  display:flex;align-items:center;gap:6px;padding:3px 4px;
  background:var(--face);box-shadow:inset 0 1px var(--lit),inset 0 2px var(--hi);
}
.start{min-height:32px;padding:2px 10px;font-family:var(--pix);font-weight:700;font-size:14px;gap:6px}
.start svg{width:18px;height:18px}
.start[aria-expanded="true"]{box-shadow:var(--pressed)}
.tasks{display:flex;gap:4px;flex:1;min-width:0;overflow:hidden}
.task{
  flex:0 1 170px;min-width:0;min-height:32px;padding:2px 8px;justify-content:flex-start;
  font-size:19px;overflow:hidden;text-overflow:ellipsis;
}
.task span{overflow:hidden;text-overflow:ellipsis}
.task.on{box-shadow:var(--pressed);background:repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0/2px 2px}
.tray{display:flex;align-items:center;gap:14px;height:32px;padding:0 10px;background:var(--face);font-size:19px;flex:none}
.tray-x{text-decoration:none}
.tray-x:hover{text-decoration:underline}
.tray-clock{font-variant-numeric:tabular-nums}

.start-menu{
  position:absolute;left:4px;bottom:38px;display:flex;min-width:250px;
  background:var(--face);padding:3px;box-shadow:var(--raised);
}
.start-menu[hidden]{display:none}
.start-side{
  writing-mode:vertical-rl;transform:rotate(180deg);
  background:linear-gradient(0deg,var(--title-a),var(--title-b));color:#fff;
  font-family:var(--pix);font-weight:700;font-size:20px;padding:8px 4px;letter-spacing:1px;
}
.start-side b{color:var(--buy)}
.start-items{display:flex;flex-direction:column;flex:1;padding:2px}
.start-items button,.start-items a{
  display:flex;align-items:center;gap:10px;padding:6px 10px;border:0;background:none;
  font-size:21px;text-align:left;text-decoration:none;color:#000;
}
.start-items svg{width:24px;height:24px;flex:none}
.start-items button:hover,.start-items a:hover,.start-items button:focus-visible,.start-items a:focus-visible{background:#000080;color:#fff;outline:none}
.start-items hr{width:100%;margin:3px 0;border:0;border-top:1px solid var(--lo);border-bottom:1px solid var(--hi)}

/* ---------- apps ---------- */
.btn.mini{min-height:28px;padding:2px 10px;font-size:19px}
.btn.mini:active{padding:4px 8px 0 12px}
.btn[aria-pressed="true"]{box-shadow:var(--pressed);background:repeating-conic-gradient(#fff 0 25%, var(--face) 0 50%) 0 0/2px 2px}

.win-games{--x:132px;--y:max(24px,calc(50% - 120px));width:330px}
.win-paint{--x:calc(50% - 310px);--y:max(16px,calc(50% - 270px));width:620px}
.win-blocks{--x:calc(50% - 170px);--y:max(16px,calc(50% - 250px))}
.win-snake{--x:calc(50% - 130px);--y:max(16px,calc(50% - 220px))}
.win-mines{--x:calc(50% - 90px);--y:max(24px,calc(50% - 180px))}

.folder{display:flex;flex-wrap:wrap;gap:10px;margin:0 3px 3px;padding:14px 10px;min-height:120px}
.icon.dark{color:#000}
.icon.dark span{text-shadow:none}
.icon.dark:focus-visible span{color:#fff}

/* PAINT.EXE */
.paint-actions{display:flex;gap:4px;padding:4px 3px}
.paint-main{display:flex;gap:6px;padding:0 3px}
.paint-tools{display:grid;grid-template-columns:repeat(2,1fr);gap:3px;align-content:start;width:118px;flex:none}
.paint-tools .btn{padding:2px 4px;font-size:18px}
.paint-sizes{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;margin-top:6px}
.paint-well{flex:1;min-width:0;padding:2px;background:var(--lo)}
.paint-canvas{display:block;width:100%;max-width:480px;height:auto;background:#fff;image-rendering:pixelated;touch-action:none}
@media (pointer:fine){.paint-canvas{cursor:crosshair}}
.paint-palette{display:flex;gap:6px;align-items:center;padding:6px 3px}
.paint-current{width:34px;height:34px;flex:none}
.paint-colors{display:grid;grid-template-columns:repeat(10,20px);gap:2px}
.paint-colors button{width:20px;height:16px;padding:0;border:0;box-shadow:var(--pressed)}
.paint-colors button.on{outline:2px solid #000;outline-offset:-1px}

/* games */
.game{display:flex;flex-wrap:wrap;gap:12px;padding:8px;justify-content:center}
.game-screen{position:relative;flex:none;padding:2px;background:#000;line-height:0}
.game-screen canvas{display:block;image-rendering:pixelated}
.game-msg{
  position:absolute;inset:2px;margin:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.62);color:#fff;text-align:center;white-space:pre-line;
  font-family:var(--pix);font-size:14px;line-height:1.7;pointer-events:none;
}
.game-msg[hidden]{display:none}
.win-snake .game-msg{background:rgba(155,188,15,.82);color:#0f380f}
.game-side{display:flex;flex-direction:column;gap:6px;width:124px}
.game-k{margin:0;font-family:var(--pix);font-size:11px}
.game-stats{display:grid;gap:4px;margin:0}
.game-stats div{display:flex;justify-content:space-between;align-items:baseline;padding:1px 6px;background:#000;box-shadow:var(--pressed)}
.game-stats dt{color:#ff9a7a;font-size:18px}
.game-stats dd{margin:0;color:var(--led);font-size:22px;font-variant-numeric:tabular-nums}
.game-keys{margin:4px 0 0;color:#333;font-size:16px;line-height:1.1}
.pad{display:none;gap:6px;padding:0 8px 10px;justify-content:center}
.pad .btn{min-width:56px;min-height:48px;padding:4px 8px;font-size:22px;touch-action:manipulation}
.pad-dir{grid-template-columns:repeat(3,64px);grid-template-areas:". up ." "left down right"}
.pad-dir [data-act=up]{grid-area:up}
.pad-dir [data-act=left]{grid-area:left}
.pad-dir [data-act=down]{grid-area:down}
.pad-dir [data-act=right]{grid-area:right}
@media (pointer:coarse){
  .pad{display:flex}
  .pad-dir{display:grid}
  .game-keys{display:none}
}

/* MINES.EXE */
.mines{display:grid;gap:8px;justify-content:center;padding:8px}
.mines-head{display:flex;justify-content:space-between;align-items:center;padding:4px 6px;background:var(--face)}
.led{min-width:54px;padding:0 4px;background:#000;color:var(--led);font-size:30px;line-height:1.05;text-align:center;letter-spacing:1px;text-shadow:0 0 6px rgba(255,74,28,.5)}
.mines-face{min-height:34px;padding:2px 8px;font-size:20px}
.mines-grid{--cell:26px;display:grid;grid-template-columns:repeat(9,var(--cell));grid-auto-rows:var(--cell);padding:3px;background:var(--face)}
.mines-grid button{
  position:relative;width:var(--cell);height:var(--cell);padding:0;border:0;
  background-color:var(--face);box-shadow:var(--raised);
  font-family:var(--pix);font-weight:700;font-size:14px;line-height:var(--cell);
}
.mines-grid button:focus-visible{outline:1px dotted #000;outline-offset:-4px}
.mines-grid .open{box-shadow:inset 1px 1px var(--lo)}
.mines-grid .mine{background-image:radial-gradient(circle, #000 0 5px, transparent 6px)}
.mines-grid .boom{background-color:#ff0000}
.mines-grid .flag::before{content:"";position:absolute;left:9px;top:5px;width:9px;height:8px;background:#e00000;clip-path:polygon(0 0,100% 50%,0 100%)}
.mines-grid .flag::after{content:"";position:absolute;left:8px;top:5px;width:2px;height:15px;background:#000}
.n1{color:#0000ff}.n2{color:#008000}.n3{color:#ff0000}.n4{color:#000080}
.n5{color:#800000}.n6{color:#008080}.n7{color:#000}.n8{color:#808080}
.mines-foot{display:flex;gap:10px;align-items:center;padding:0 8px 8px;font-size:17px}
@media (pointer:coarse){
  .mines-grid{--cell:34px}
  .mines-grid .flag::before{left:13px;top:8px}
  .mines-grid .flag::after{left:12px;top:8px}
}

/* ---------- smaller or shorter screens: one column, the page scrolls ----------
   The full desktop needs 1144px for LATE.EXE and README side by side, and 601px of
   height so the buy buttons never sit under the taskbar. Keep in sync with `wide` in app.js. */
@media (max-width:1143px), (max-height:600px){
  html,body{height:auto}
  .desktop{position:relative;inset:auto;min-height:100vh;overflow:visible;padding:12px 10px 64px;display:flex;flex-direction:column;align-items:center;gap:14px}
  .icons,.wallmark{width:100%;max-width:640px}
  .icons{position:static;flex-direction:row;flex-wrap:wrap;justify-content:space-between;gap:8px 4px}
  .icon{width:auto;font-size:14px}
  .icon span{white-space:nowrap}
  .icon svg{width:34px;height:34px}
  .win{position:relative;left:auto;top:auto;width:100%;max-width:640px;z-index:auto}
  .win-alert{position:fixed;left:max(10px,calc(50% - 200px));top:30%;width:min(400px,calc(100% - 20px));z-index:40}
  .bar{touch-action:auto}
  .body{padding:12px 12px 14px}
  .acts .btn{flex:1 1 auto}
  .wallmark{position:static;order:9;text-align:center;margin-top:4px}
}
@media (max-width:560px){
  .paint-main{flex-direction:column}
  .paint-tools{width:auto;grid-template-columns:repeat(4,1fr)}
}
@media (max-width:820px){
  .tray-x{display:none}
}

@media (prefers-reduced-motion: reduce){
  .boot.on,.boot.off,html.waking .desktop,.win.opening,.boot-log .caret,.meter-v.unset{animation:none}
  .trail{display:none}
}