/* ===== Base ===== */
:root{--face:#c0c0c0;--hi:#fff;--sh:#808080;--dk:#000;--navy:#000080}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{font:12px Tahoma,"MS Sans Serif",Verdana,sans-serif;color:#000;background:#008080}

/* WALLPAPER: change the file name here */
#desktop{position:fixed;inset:0 0 28px 0;background:#008080 url("assets/desktop.png") center/cover no-repeat;image-rendering:pixelated}

/* Bevel helpers */
.raised{border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--sh),inset 1px 1px #dfdfdf}
.sunken{border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);box-shadow:inset 1px 1px var(--dk)}
button{font:inherit;background:var(--face);color:#000;padding:3px 10px;cursor:pointer;border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--sh)}
button:active,button.on{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px var(--sh)}
:focus-visible{outline:1px dotted #000;outline-offset:-4px}

/* ===== Desktop icons ===== */
#icons{position:absolute;top:16px;left:16px;display:grid;grid-template-columns:repeat(2,130px);gap:18px 10px}
.icon{width:130px;font-size:15px;background:none;border:0;box-shadow:none;color:#fff;text-align:center;padding:4px;text-decoration:none;display:block;cursor:default}
.icon svg{width:80px;height:80px;display:block;margin:0 auto 6px;shape-rendering:crispEdges}
.icon span{display:inline-block;padding:1px 3px;text-shadow:1px 1px #000;word-break:break-all}
.icon.sel span{background:var(--navy);outline:1px dotted #ff0;text-shadow:none}
.icon.sel svg{opacity:.7}

/* ===== Windows ===== */
.win{position:absolute;background:var(--face);display:flex;flex-direction:column;padding:2px}
.win.max{inset:0 !important;width:auto !important;height:auto !important}
.win.min{display:none}
.title{display:flex;align-items:center;gap:4px;background:#808080;color:#c0c0c0;padding:2px 3px;font-weight:bold;user-select:none;cursor:default}
.win.active .title{background:var(--navy);color:#fff}
.title .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title svg{width:16px;height:16px}
.title button{width:18px;height:16px;padding:0;line-height:10px;font-size:11px;font-weight:bold}
.body{flex:1;overflow:auto;margin-top:2px;background:#fff;min-height:0}
.resize-note{display:none}

/* ===== Simulated websites ===== */
.site{font:14px "Times New Roman",Times,serif;color:#000;background:#fff;min-height:100%}
.bar{background:var(--face);padding:3px 6px;font:12px Tahoma,sans-serif;border-bottom:1px solid var(--sh);display:flex;gap:6px;align-items:center}
.bar .url{flex:1;background:#fff;padding:2px 4px;font-family:"Courier New",monospace}
.page{padding:10px 16px}
.site h1{font-size:24px;margin:0 0 8px;color:var(--navy);border-bottom:2px solid var(--navy);font-family:Arial,sans-serif}
.site h2{font:bold 16px Arial,sans-serif;margin:4px 0}
.site a,.site .lnk{color:#0000ee;text-decoration:underline;cursor:pointer;background:none;border:0;box-shadow:none;padding:0;font:inherit}
.site a:visited{color:#551a8b}
.site hr{border:0;border-top:2px groove #999;margin:10px 0}
.site input[type=text]{font:13px "Courier New",monospace;border:2px inset #999;padding:2px 4px;width:220px}
.item .date{font:bold 13px "Courier New",monospace;color:#800000}
.meta{font:12px "Courier New",monospace;color:#555}
.content p{line-height:1.4;max-width:70ch}
.empty{font-style:italic;color:#555}
.marquee{background:#000080;color:#ff0;font:bold 12px "Courier New",monospace;padding:2px 6px;margin-bottom:8px;overflow:hidden;white-space:nowrap}
.marquee span{display:inline-block;padding-left:100%;animation:m 14s linear infinite}
@keyframes m{to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.marquee span{animation:none;padding:0}}
.grid{display:flex;flex-wrap:wrap;gap:14px}
.thumb{width:170px;text-align:center;font-size:13px}
.frame{width:170px;height:130px;border:2px inset #999;background:#eee;display:flex;align-items:center;justify-content:center;overflow:hidden;font:11px "Courier New",monospace;color:#777;padding:4px}
.frame img,.big img{max-width:100%;max-height:100%;display:block}
.big img{max-height:none}
.dir{border-collapse:collapse;width:100%;max-width:520px}
.dir td{border:1px solid #999;padding:8px}
.dir svg{width:32px;height:32px;display:block}
.img-slot{border:2px inset #999;background:#eee;padding:6px;margin:8px 0;display:inline-block}
.img-slot img{max-width:100%;display:block}

/* ===== Taskbar & start menu ===== */
#taskbar{position:fixed;left:0;right:0;bottom:0;height:28px;background:var(--face);border-top:2px solid var(--hi);display:flex;align-items:center;gap:4px;padding:2px;z-index:99999}
#start{padding:1px 8px;height:22px;display:flex;align-items:center;gap:4px}
#tasks{flex:1;display:flex;gap:3px;overflow:hidden}
#tasks button{width:140px;height:22px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:1px 6px}
#clock{padding:3px 10px;border:1px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);font-family:"Courier New",monospace}
#startmenu{position:fixed;left:2px;bottom:28px;width:180px;background:var(--face);z-index:100000;padding:3px;border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi)}
#startmenu[hidden]{display:none}
#startmenu button{display:flex;align-items:center;gap:8px;width:100%;border:0;box-shadow:none;background:none;text-align:left;padding:6px 8px}
#startmenu button:hover,#startmenu button:focus{background:var(--navy);color:#fff}
#startmenu svg{width:20px;height:20px}

/* ===== Iframe windows (each window loads a real .html subsite) ===== */
.body{position:relative;overflow:hidden}
.body iframe{width:100%;height:100%;border:0;display:block;background:#fff}
/* transparent shield so clicking an inactive window (or dragging) works over the iframe */
.win:not(.active) .body::after,body.drag .body::after{content:"";position:absolute;inset:0}

/* ===== CRT / tube TV filter =====
   One overlay (#crt) above everything, including the iframes. It ignores the mouse.
   To turn it off: delete <div id="crt"> from index.html, or add display:none to #crt.
   To tune: change the scanline/vignette values below, or the roll duration (7s). */
#crt{position:fixed;inset:0;z-index:2147483647;pointer-events:none;
  /* scanlines + soft dark edges (vignette) */
  background:
    repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.16) 3px),
    radial-gradient(ellipse at center,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
/* slow rolling bright band, like a refresh line */
#crt::after{content:"";position:absolute;left:0;right:0;height:90px;top:-90px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.05),rgba(255,255,255,0));
  animation:roll 7s linear infinite}
@keyframes roll{to{top:100%}}
/* the desktop and windows get a faint RGB fringe + tiny jitter for the tube feel */
#desktop,#taskbar{text-shadow:0 0 1px rgba(0,0,0,.35)}
@media(prefers-reduced-motion:reduce){#crt::after{animation:none}}