:root{font-size:18px}
/* colour themes: amber (default), green phosphor, and the grey-white one. data-theme is set on <html> by theme.js */
:root,[data-theme=amber]{--fg:#ffb000;--dim:#9a6a00;--bg:#120b00;--hi:#ffd980;--rgb:255,176,0;
  --logo-tint:var(--logo-tint);--art-tint:var(--art-tint)}
[data-theme=green]{--fg:#33ff66;--dim:#1c9a40;--bg:#031209;--hi:#b8ffc8;--rgb:51,255,102;
  --logo-tint:sepia(1) saturate(2.5) hue-rotate(78deg) brightness(1.4);--art-tint:grayscale(1) sepia(1) saturate(2) hue-rotate(76deg) brightness(.7) contrast(1.4)}
[data-theme=white]{--fg:#d2d6da;--dim:#7a8086;--bg:#090a0b;--hi:#f6f8fa;--rgb:210,214,218;
  --logo-tint:grayscale(1) brightness(1.6) contrast(1.05);--art-tint:grayscale(1) brightness(.85) contrast(1.3)}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--fg);font-family:"Courier New",Courier,monospace;overflow:hidden}
#crt{position:fixed;inset:0;background:var(--bg);text-shadow:0 0 6px rgba(var(--rgb),.55);animation:flicker 5s infinite}
#crt::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:99;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65) 100%)}
@keyframes flicker{0%,100%{opacity:1}92%{opacity:.97}94%{opacity:.9}96%{opacity:1}}
.blink{animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}

#wallpaper{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--bg)}
#boot{position:absolute;inset:0;background:var(--bg);z-index:5;padding:1.2rem;display:flex;flex-direction:column;justify-content:flex-end}
#bootlog{margin:0;white-space:pre-wrap;font:inherit;line-height:1.25;overflow:hidden}
#bar{height:1rem;border:2px solid var(--fg);margin-top:.8rem}
#barfill{display:block;height:100%;width:0;background:var(--fg)}

#os{position:absolute;inset:0;display:flex;flex-direction:column;pointer-events:none}
#menubar,#status,.win,.icon{pointer-events:auto}
#menubar{position:relative;z-index:2;display:flex;gap:1.4rem;align-items:center;background:var(--fg);color:var(--bg);text-shadow:none;padding:.15rem .8rem;font-weight:bold}

.menu-nail{height:1.3rem;filter:invert(1) brightness(.3) contrast(2);transform:rotate(-8deg)}
#desk{position:relative;flex:1;overflow:hidden}
#icons{position:absolute;left:1rem;top:1rem;bottom:1rem;display:flex;flex-direction:column;flex-wrap:wrap;align-content:flex-start;gap:.7rem 1rem}
.icon{width:6.5rem;text-align:center;cursor:pointer;background:none;border:0;color:inherit;font:inherit;padding:.3rem}
.icon .glyph{display:block;font-size:2.2rem;line-height:1.1}
.icon:hover,.icon:focus{background:var(--fg);color:var(--bg);text-shadow:none;outline:none}
.icon{text-shadow:0 0 4px #000,0 0 8px #000}
.icon:nth-child(even){transform:rotate(1.2deg)}.icon:nth-child(odd){transform:rotate(-.8deg)}
#status{background:var(--bg);display:flex;justify-content:space-between;border-top:2px solid var(--fg);padding:.15rem .8rem;color:var(--dim)}

.win{position:absolute;min-width:18rem;max-width:92vw;background:var(--bg);border:3px double var(--fg);box-shadow:8px 8px 0 rgba(var(--rgb),.25)}
.win.crooked{transform:rotate(-.7deg)}
.win header{display:flex;justify-content:space-between;background:var(--fg);color:var(--bg);text-shadow:none;padding:.1rem .5rem;cursor:move;font-weight:bold;user-select:none}
.win header button{background:none;border:0;font:inherit;font-weight:bold;cursor:pointer;color:inherit}
.win .body{padding:.8rem 1rem;max-height:60vh;overflow:auto;line-height:1.35}
.win img.logo{max-width:100%;display:block;margin:.2rem auto .8rem;filter:drop-shadow(0 0 8px rgba(var(--rgb),.35)) var(--logo-tint)}
.win h3{margin:.2rem 0 .5rem;color:var(--hi)}
.win a{color:var(--hi)}
input,button.act{font:inherit;color:var(--fg);background:#000;border:2px solid var(--fg);padding:.25rem .5rem;margin:.2rem 0;width:100%}
button.act{width:auto;cursor:pointer;background:var(--fg);color:var(--bg);font-weight:bold}
.gb p{margin:.4rem 0;border-bottom:1px dashed var(--dim)}.gb small{color:var(--dim)}
#term-out{white-space:pre-wrap;min-height:6rem}
#term-in{width:100%;border:0;border-top:1px dashed var(--dim);margin-top:.5rem}
@media (max-width:640px){:root{font-size:15px}#icons{display:grid;grid-template-columns:repeat(3,1fr);bottom:auto;left:.3rem;right:.3rem;width:auto}.win{left:.4rem!important;right:.4rem;width:auto!important}}
@media (prefers-reduced-motion:reduce){#crt,.blink{animation:none}}

/* old-CRT extras: a slow hum bar, plus bursts of tearing / rolling / jitter driven by crt.js */
#crt::before{content:"";position:absolute;left:0;right:0;height:14%;top:-14%;pointer-events:none;z-index:98;
  background:linear-gradient(to bottom,transparent,rgba(var(--rgb),.07),transparent);animation:hum 7s linear infinite}
@keyframes hum{to{top:110%}}
#crt.fx{filter:url(#crt-fx)}

#game{color:var(--hi);font-weight:bold;min-width:0;margin-right:1rem}
#game:empty{display:none}
#status{gap:1rem}#status>span:nth-child(2){margin-right:auto}
.mode-btn{width:auto;margin-right:.5rem;cursor:pointer}
.mode-btn.on{background:var(--fg);color:var(--bg)}
button.act.mode-btn:not(.on){background:#000;color:var(--fg)}

/* game pages */
.win .art{position:relative;margin:0 0 .8rem;border:2px solid var(--fg);overflow:hidden;line-height:0}
.win .art img{width:100%;display:block;filter:var(--art-tint);transition:filter .6s}
.win .art:hover img{filter:none}
.win .art figcaption{position:absolute;right:.4rem;bottom:.3rem;line-height:1.2;font-size:.75rem;background:var(--bg);padding:0 .3rem;color:var(--hi)}
.win .art:hover figcaption{opacity:0}
.win img.logo.plain{filter:none;margin:.2rem 0 .6rem;display:block}
a.btn{display:inline-block;background:var(--fg);color:var(--bg);text-shadow:none;font-weight:bold;padding:.3rem .8rem;text-decoration:none}
a.btn:hover{background:var(--hi)}
.win button.act[data-open]{width:auto;margin-right:.5rem}
.win .art img{max-height:34vh;object-fit:cover;object-position:50% 40%}
.win[data-id=bygd] .body{max-height:74vh}

input,textarea{outline:none}
input:focus,textarea:focus{outline:none;box-shadow:none}
input,textarea{caret-color:var(--fg)}

.win header{touch-action:none}
body.dragging,body.dragging *{cursor:move!important;user-select:none}
body.dragging #wallpaper{pointer-events:none}
textarea{font:inherit;color:var(--fg);background:#000;border:2px solid var(--fg);padding:.25rem .5rem;margin:.2rem 0;width:100%;resize:vertical}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#menu-home{display:flex;gap:.6rem;align-items:center;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
#menu-home:hover b{text-decoration:underline}

.win .hint{margin:.5rem 0 0;color:var(--dim);font-size:.8rem}
body.playing,body.playing *{cursor:none!important}
body.playing #quit{cursor:pointer!important}
/* the ESC keycap, top right while a game runs */
#quit{position:absolute;right:1rem;top:1rem;z-index:20;pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:.45rem;background:none;border:0;color:var(--fg);font:inherit;cursor:pointer;padding:0}
#quit[hidden]{display:none}
#quit .key{display:block;min-width:3.4rem;text-align:center;font-weight:bold;letter-spacing:.08em;padding:.35rem .8rem .3rem;border:2px solid var(--fg);border-radius:.45rem;background:var(--bg);box-shadow:0 .28rem 0 var(--fg),0 .28rem 0 2px var(--fg);transition:transform .08s,box-shadow .08s}
#quit .lbl{font-size:.8rem;letter-spacing:.12em;color:var(--hi)}
#quit:hover .key{background:var(--fg);color:var(--bg);text-shadow:none}
#quit:active .key{transform:translateY(.22rem);box-shadow:0 .06rem 0 var(--fg),0 .06rem 0 2px var(--fg)}

/* ---------- phones: rotating C first, then every section already open, then a polite note ---------- */
.desktop-only{display:block}
html.mobile,body.mobile{height:auto;overflow-x:hidden;overflow-y:auto}
.mobile #crt{position:relative;inset:auto;min-height:100svh;animation:none}
.mobile #crt::before{display:none}
.mobile #crt::after{position:fixed}
.mobile #wallpaper{position:fixed;inset:0;width:100%;height:100svh;pointer-events:none}
.mobile #os{position:relative;inset:auto;display:block;pointer-events:auto;z-index:2}
.mobile #menubar{position:sticky;top:0;z-index:30}
.mobile #desk,.mobile #status,.mobile #quit,.mobile .desktop-only{display:none!important}
.m-hero{height:calc(100svh - 2.2rem);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.m-hero span{margin-bottom:1.4rem;letter-spacing:.15em;color:var(--hi)}
#mobile{position:relative}
#mobile .win.static{position:relative;left:auto!important;top:auto!important;width:auto!important;max-width:none;margin:1.1rem .7rem;transform:none!important}
#mobile .win.static header{cursor:default}
#mobile .win.static .body,#mobile .win[data-id=bygd] .body{max-height:none;overflow:visible}
#mobile .win.static .art img{max-height:none}
.m-note{margin:0;padding:1.6rem 1rem 2.6rem;text-align:center;color:var(--fg);font-weight:bold;letter-spacing:.12em;background:var(--bg);border-top:2px solid var(--fg)}

/* theme swatches in the menu bar */
#themes{display:flex;gap:.5rem;align-items:center;margin-left:auto}
#themes button{width:1.05rem;height:1.05rem;padding:0;border:2px solid var(--bg);cursor:pointer;background:var(--sw);box-shadow:0 0 0 0 var(--bg)}
#themes button[data-theme=amber]{--sw:#ffb000}
#themes button[data-theme=green]{--sw:#33ff66}
#themes button[data-theme=white]{--sw:#d2d6da}
#themes button.on{box-shadow:0 0 0 2px var(--fg),0 0 0 4px var(--bg)}
#menubar time{margin-left:.9rem}

/* 90s scrollbars: arrow buttons, dithered track, raised thumb, all in the theme colours. (Firefox cannot be shaped, so it only gets the colours.) */
*::-webkit-scrollbar{width:16px;height:16px;background:var(--bg)}
*::-webkit-scrollbar-track{background-color:var(--bg);
  background-image:linear-gradient(45deg,rgba(var(--rgb),.38) 25%,transparent 25%,transparent 75%,rgba(var(--rgb),.38) 75%),linear-gradient(45deg,rgba(var(--rgb),.38) 25%,transparent 25%,transparent 75%,rgba(var(--rgb),.38) 75%);
  background-size:4px 4px;background-position:0 0,2px 2px}
*::-webkit-scrollbar-thumb{background:var(--fg);border:2px solid;border-color:var(--hi) var(--dim) var(--dim) var(--hi)}
*::-webkit-scrollbar-thumb:hover{background:var(--hi)}
*::-webkit-scrollbar-button:start:decrement,*::-webkit-scrollbar-button:end:increment{display:block;width:16px;height:16px;background-color:var(--fg);background-repeat:no-repeat;background-position:center;
  border:2px solid;border-color:var(--hi) var(--dim) var(--dim) var(--hi)}
*::-webkit-scrollbar-button:start:decrement:active,*::-webkit-scrollbar-button:end:increment:active{border-color:var(--dim) var(--hi) var(--hi) var(--dim)}
*::-webkit-scrollbar-corner{background:var(--bg)}
@supports (-moz-appearance:none){*{scrollbar-color:var(--fg) var(--bg)}}
:root *::-webkit-scrollbar-button:vertical:decrement,[data-theme=amber] *::-webkit-scrollbar-button:vertical:decrement{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='8,4.5 12.5,10.5 3.5,10.5' fill='%23120b00'/></svg>")}
:root *::-webkit-scrollbar-button:vertical:increment,[data-theme=amber] *::-webkit-scrollbar-button:vertical:increment{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='8,11.5 12.5,5.5 3.5,5.5' fill='%23120b00'/></svg>")}
:root *::-webkit-scrollbar-button:horizontal:decrement,[data-theme=amber] *::-webkit-scrollbar-button:horizontal:decrement{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='4.5,8 10.5,3.5 10.5,12.5' fill='%23120b00'/></svg>")}
:root *::-webkit-scrollbar-button:horizontal:increment,[data-theme=amber] *::-webkit-scrollbar-button:horizontal:increment{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='11.5,8 5.5,3.5 5.5,12.5' fill='%23120b00'/></svg>")}
[data-theme=green] *::-webkit-scrollbar-button:vertical:decrement{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='8,4.5 12.5,10.5 3.5,10.5' fill='%23031209'/></svg>")}
[data-theme=green] *::-webkit-scrollbar-button:vertical:increment{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='8,11.5 12.5,5.5 3.5,5.5' fill='%23031209'/></svg>")}
[data-theme=green] *::-webkit-scrollbar-button:horizontal:decrement{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='4.5,8 10.5,3.5 10.5,12.5' fill='%23031209'/></svg>")}
[data-theme=green] *::-webkit-scrollbar-button:horizontal:increment{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='11.5,8 5.5,3.5 5.5,12.5' fill='%23031209'/></svg>")}
[data-theme=white] *::-webkit-scrollbar-button:vertical:decrement{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='8,4.5 12.5,10.5 3.5,10.5' fill='%23090a0b'/></svg>")}
[data-theme=white] *::-webkit-scrollbar-button:vertical:increment{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='8,11.5 12.5,5.5 3.5,5.5' fill='%23090a0b'/></svg>")}
[data-theme=white] *::-webkit-scrollbar-button:horizontal:decrement{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='4.5,8 10.5,3.5 10.5,12.5' fill='%23090a0b'/></svg>")}
[data-theme=white] *::-webkit-scrollbar-button:horizontal:increment{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='11.5,8 5.5,3.5 5.5,12.5' fill='%23090a0b'/></svg>")}