:root{
  --face:#c0c0c0;
  --face-lt:#dfdfdf;
  --face-dk:#808080;
  --bevel-hi:#ffffff;
  --bevel-sh:#404040;
  --titlebar-a:#000082;
  --titlebar-b:#1084d0;
  --titlebar-inactive-a:#7a7a7a;
  --titlebar-inactive-b:#a0a0a0;
  --accent:#000082;
  --text-dark:#111;
  --text-mute:#4a4a4a;
  --link:#0000ee;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;font-family:'Tahoma','MS Sans Serif',Geneva,Verdana,sans-serif;}
::selection{background:#000082;color:#fff;}

/* ---------- BEVEL HELPERS ---------- */
.bevel-out{ border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi); }
.bevel-in{ border:2px solid; border-color: var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh); }

/* ---------- RETRO PIXEL ICONS (SVG) ---------- */
.px{display:inline-block; width:40px; height:40px; flex-shrink:0;}
.px svg{width:100%; height:100%; display:block; image-rendering:pixelated;}
.px.sm{width:20px; height:20px;}
.px.tb{width:16px; height:16px;}

/* ---------- DESKTOP / RETRO OCEAN WALLPAPER ---------- */
#desktop{
  position:relative; width:100vw; height:100vh; overflow:hidden;
  background:linear-gradient(180deg,#ff9d5c 0%,#ff7a5c 18%,#c85c8a 32%,#5b4a9e 46%,#1c3a6e 60%,#0a2a52 100%);
}
#desktop .sun{
  position:absolute; left:50%; top:22%; width:130px; height:130px; margin-left:-65px;
  border-radius:50%; background:radial-gradient(circle at 40% 35%, #fff4c2, #ffcf5c 55%, #ff9d3c 100%);
  box-shadow:0 0 70px 20px rgba(255,180,90,.5);
}
#desktop .sea{
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(180deg,#123a66 0%,#0a2547 60%,#061a35 100%);
}
#desktop .wave{
  position:absolute; left:-10%; width:120%; height:60px; opacity:.55;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 3px, transparent 3px 26px);
  animation:waveMove 7s linear infinite;
}
@keyframes waveMove{ from{transform:translateX(0);} to{transform:translateX(-80px);} }
#desktop .sun-reflect{
  position:absolute; left:50%; bottom:36%; width:6px; margin-left:-3px; height:22%;
  background:linear-gradient(180deg, rgba(255,210,140,.75), transparent);
  filter:blur(1px);
}
#desktop.wall-crt{ filter:contrast(1.15) saturate(1.3); }
#desktop.wall-crt::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px);
}
#desktop.wall-teal{ background:linear-gradient(180deg,#008080,#006666,#004d4d); }
#desktop.wall-teal .sun,#desktop.wall-teal .sea,#desktop.wall-teal .wave,#desktop.wall-teal .sun-reflect{display:none;}
#desktop.wall-purple{ background:linear-gradient(180deg,#3a1c6e,#5b2a8a,#1c0e3a); }
#desktop.wall-purple .sun,#desktop.wall-purple .sea,#desktop.wall-purple .wave,#desktop.wall-purple .sun-reflect{display:none;}
#desktop.wall-custom .sun,#desktop.wall-custom .sea,#desktop.wall-custom .wave,#desktop.wall-custom .sun-reflect{display:none;}

/* ---------- GLOBAL CRT SCANLINE OVERLAY ---------- */
#desktop .crt-overlay{
  position:absolute; inset:0; pointer-events:none; z-index:4; opacity:.5;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px);
}

/* ---------- DESKTOP ICONS ---------- */
.desktop-icons{
  position:absolute; top:14px; left:12px; display:flex; flex-direction:column; flex-wrap:wrap; gap:2px; z-index:5;
  max-height:calc(100vh - 90px); align-content:flex-start;
}
.d-icon{
  width:82px; padding:6px 3px; display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; border:1px dotted transparent; user-select:none;
  opacity:0; transform:translateY(10px);
}
.d-icon.enter{ animation:iconIn .35s ease forwards; }
@keyframes iconIn{ to{opacity:1; transform:translateY(0);} }
.d-icon:hover, .d-icon.selected{ background:rgba(30,80,160,.35); border:1px dotted #fff; }
.d-icon .glyph{
  width:40px; height:40px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-size:22px; background:linear-gradient(160deg,#e8e8e8,#a8a8a8);
  border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  box-shadow:2px 2px 0 rgba(0,0,0,.35);
}
.d-icon span{
  color:#fff; font-size:11px; text-align:center; text-shadow:1px 1px 1px #000; line-height:1.2;
  background:transparent; padding:0 2px;
}
.d-icon.selected span{ background:#000082; }

/* ---------- WINDOWS (retro 98/XP chrome) ---------- */
#windows-layer{position:absolute; inset:0; z-index:10; pointer-events:none;}
.win{
  pointer-events:auto;
  position:absolute; min-width:300px; min-height:200px;
  background:var(--face);
  border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
  display:flex; flex-direction:column; overflow:hidden;
  opacity:0; transform:scale(.9);
}
.win .titlebar{
  height:26px; flex:0 0 26px; display:flex; align-items:center; padding:0 3px 0 5px; gap:5px;
  background:linear-gradient(90deg, var(--titlebar-a), var(--titlebar-b));
  cursor:grab; touch-action:none;
}
.win.inactive .titlebar{ background:linear-gradient(90deg, var(--titlebar-inactive-a), var(--titlebar-inactive-b)); }
.win .titlebar:active{cursor:grabbing;}
.win .t-icon{font-size:13px;}
.win .t-title{color:#fff; font-size:12px; font-weight:700; flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.win .t-btns{display:flex; gap:2px;}
.win .t-btn{
  width:18px; height:17px; background:var(--face);
  border:1px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; color:#000; cursor:pointer;
}
.win .t-btn:active{ border-color: var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh); }
.win .win-body{flex:1; overflow:auto; background:#fff; color:var(--text-dark); position:relative;}
.win .resize-handle{ position:absolute; right:0; bottom:0; width:16px; height:16px; cursor:nwse-resize; z-index:5; }
.win.maximized{ border-radius:0 !important; }

.win-body::-webkit-scrollbar{width:16px;}
.win-body::-webkit-scrollbar-thumb{background:var(--face); border:2px solid; border-color:var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);}
.win-body::-webkit-scrollbar-track{background:#ececec;}

/* ---------- EXPLORER ---------- */
.explorer{display:flex; height:100%;}
.explorer .sidebar{
  width:140px; background:#fff; border-right:2px solid var(--bevel-sh);
  padding:8px 6px; font-size:11.5px; color:var(--text-mute); flex:0 0 140px; overflow-y:auto;
}
.explorer .sidebar .grp{font-weight:700; color:#000; margin:8px 0 3px; font-size:11px;}
.explorer .sidebar .item{padding:4px 5px; cursor:pointer; display:flex; align-items:center; gap:5px;}
.explorer .sidebar .item.active{background:#000082; color:#fff;}
.explorer .main{flex:1; padding:14px; overflow-y:auto;}
.explorer .crumbs{font-size:11.5px; color:var(--text-mute); margin-bottom:12px; padding:4px 6px; background:#fff; border:1px solid; border-color:var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh);}
.file-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px;}
.file-card{
  border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  padding:12px; background:#f4f4f4; cursor:pointer;
}
.file-card:active{ border-color: var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh); }
.file-card .fc-head{display:flex; align-items:center; gap:8px; margin-bottom:8px;}
.file-card .fc-icon{width:28px;height:28px;background:#000082;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0;}
.file-card .fc-title{font-weight:700; font-size:13px; color:var(--text-dark);}
.file-card .fc-sub{font-size:10.5px; color:var(--text-mute); font-style:italic; margin:-4px 0 8px 36px;}
.file-card ul{margin:0; padding-left:18px; font-size:11px; color:#222; line-height:1.5;}
.file-card .fc-tags{margin-top:9px; display:flex; flex-wrap:wrap; gap:4px;}
.file-card .tag{font-size:9.5px; background:#000082; color:#fff; padding:2px 6px; font-weight:600;}
.file-detail{padding:4px;}
.file-detail .back{font-size:11.5px; color:var(--link); cursor:pointer; margin-bottom:12px; display:inline-block; text-decoration:underline;}
.file-detail h2{margin:0 0 2px; font-size:17px; color:var(--text-dark);}
.file-detail .sub{font-style:italic; color:var(--text-mute); margin-bottom:12px; font-size:12px;}
.file-detail ul{font-size:12.5px; line-height:1.75; color:#222;}

/* ---------- NOTEPAD ---------- */
.notepad{height:100%; display:flex; flex-direction:column; background:#fff;}
.notepad .menubar{font-size:11px; color:#000; padding:3px 6px; border-bottom:1px solid #888; display:flex; gap:12px; background:var(--face);}
.notepad pre{
  flex:1; margin:0; padding:10px 12px; font-family:'Courier New',monospace; font-size:12px;
  line-height:1.55; color:#000; white-space:pre-wrap; overflow-y:auto;
}

/* ---------- TERMINAL ---------- */
.terminal{height:100%; background:#000; color:#c0c0c0; font-family:'Courier New',monospace; font-size:13px; padding:8px 10px; overflow-y:auto;}
.terminal .line{white-space:pre-wrap; word-break:break-word; margin-bottom:1px;}
.terminal .prompt-line{display:flex; gap:5px;}
.terminal .prompt-label{color:#3ecf3e; flex-shrink:0;}
.terminal input{ background:transparent; border:none; outline:none; color:#fff; font-family:inherit; font-size:13px; flex:1; }
.terminal .dim{color:#7a7a7a;}
.terminal .accent{color:#3ecf3e;}
.terminal .warn{color:#ffb000;}

/* ---------- ERROR / MEME DIALOG ---------- */
#dialog-layer{position:fixed; inset:0; z-index:900; pointer-events:none;}
.err-dialog{
  position:absolute; width:300px; background:var(--face);
  border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  box-shadow:4px 4px 0 rgba(0,0,0,.45); pointer-events:auto;
  font-family:'Tahoma','MS Sans Serif',sans-serif;
}
.err-dialog .ed-title{
  height:22px; background:linear-gradient(90deg,#000082,#1084d0); color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 6px;
}
.err-dialog .ed-title .ed-x{
  width:16px; height:15px; background:var(--face); border:1px solid; border-color:var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:900; cursor:pointer;
}
.err-dialog .ed-body{padding:16px 14px 10px; display:flex; gap:12px; align-items:flex-start;}
.err-dialog .ed-icon{font-size:32px; flex-shrink:0;}
.err-dialog .ed-msg{font-size:12.5px; color:#000; line-height:1.5; padding-top:4px;}
.err-dialog .ed-btns{display:flex; justify-content:center; gap:8px; padding:10px 14px 14px;}
.err-dialog .ed-btn{
  min-width:56px; padding:4px 10px; background:var(--face); font-size:12px; cursor:pointer;
  border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
}
.err-dialog .ed-btn:active{ border-color: var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh); }
@keyframes dialogPop{ from{transform:scale(.7); opacity:0;} to{transform:scale(1); opacity:1;} }

/* ---------- MUSIC APP (separate window player) ---------- */
.music-app{height:100%; display:flex; flex-direction:column; background:linear-gradient(180deg,#0a1830,#142848); color:#dfe8f2; overflow:hidden;}
.mapp-top{display:flex; gap:16px; padding:16px 18px 12px; align-items:center; border-bottom:1px solid rgba(255,255,255,.12);}
.mapp-art{width:110px; height:110px; flex-shrink:0; position:relative; overflow:hidden; border:2px solid #333; background:#222;}
.mapp-art img{width:100%; height:100%; object-fit:cover; display:block;}
.mapp-art .spinning{position:absolute; inset:0; background:radial-gradient(circle, transparent 40%, rgba(0,0,0,.4)); pointer-events:none;}
.mapp-art .spinning.playing{animation:spinDisc 6s linear infinite;}
.mapp-info{flex:1; min-width:0;}
.mapp-title{font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mapp-artist{font-size:12px; color:#9fb0c2; margin-top:2px;}
.mapp-controls{display:flex; align-items:center; gap:8px; margin-top:10px;}
.mapp-controls button{width:30px; height:30px; background:var(--face); border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi); font-size:13px; cursor:pointer; color:#000; flex-shrink:0;}
.mapp-controls .mapp-play{width:42px; height:42px; font-size:15px; background:#000082; color:#fff;}
.mapp-eq{display:flex; align-items:flex-end; gap:2px; height:14px; margin-left:auto;}
.mapp-eq .b{width:3px; background:#3ecf3e; height:3px;}
.mapp-progress{width:100%; height:4px; background:#ddd; margin-top:12px; position:relative; border:1px solid #ccc;}
.mapp-progress .fill{height:100%; width:0%; background:linear-gradient(90deg,#1084d0,#3ecf3e);}
.mapp-note{font-size:9.5px; color:#7d93a8; margin-top:6px;}
.mapp-search{padding:8px 14px;}
.mapp-search input{width:100%; background:#0a1428; border:1px solid #2a3a55; color:#dfe8f2; font-family:inherit; font-size:12px; padding:7px 10px; outline:none;}
.mapp-search input:focus{border-color:#1084d0;}
.mapp-search input::placeholder{color:#5f7a93;}
.mapp-body{flex:1; display:flex; min-height:0;}
.mapp-tracks{flex:1.4; overflow-y:auto; border-top:1px solid rgba(255,255,255,.08); padding:6px 8px;}
.mapp-track{display:flex; align-items:center; gap:10px; padding:8px 10px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,.06); border-radius:4px;}
.mapp-track:hover{background:rgba(16,132,208,.18);}
.mapp-track.cur{background:rgba(16,132,208,.32);}
.mapp-track .mt-num{width:22px; color:#5f7a93; font-size:11px; flex-shrink:0; text-align:center;}
.mapp-track.cur .mt-num{color:#9fd;}
.mapp-track .mt-art{width:34px; height:34px; flex-shrink:0; object-fit:cover; border:1px solid #222;}
.mapp-track .mt-name{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:12px;}
.mapp-track .mt-artist{color:#7d93a8; font-size:10.5px; flex-shrink:0;}
.mapp-track.cur .mt-name{color:#9fd;}
.mapp-empty{color:#5f7a93; font-size:11.5px; text-align:center; padding:20px;}
@media (max-width:768px){
  .mapp-top{flex-direction:column; text-align:center; gap:10px;}
  .mapp-art{width:90px; height:90px;}
  .mapp-body{flex-direction:column;}
  .mapp-tracks{flex:1; max-height:60%;}
  .mapp-track .mt-artist{display:none;}
}

/* ---------- TIC TAC TOE ---------- */
.t3{height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#001a33; color:#dfe8f2; padding:16px;}
.t3 h3{margin:0; font-size:14px;}
.t3-status{font-size:11.5px; color:#8fa3b8; min-height:16px;}
.t3-board{display:grid; grid-template-columns:repeat(3,58px); gap:6px;}
.t3-cell{
  width:58px; height:58px; background:#fff; border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  color:#000; font-size:26px; font-weight:700; display:flex; align-items:center; justify-content:center; cursor:pointer; user-select:none;
}
.t3-cell.x{color:#0000cc;} .t3-cell.o{color:#cc0000;}
.t3-reset{padding:6px 18px; background:var(--face); border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi); font-size:12px; cursor:pointer;}

/* ---------- MAIL / CONTACT ---------- */
.mail{height:100%; padding:18px 22px; background:#fff; overflow-y:auto;}
.mail h2{margin:0 0 4px; color:var(--text-dark); font-size:17px;}
.mail .sub{color:var(--text-mute); font-size:12px; margin-bottom:16px;}
.mail .field{margin-bottom:12px;}
.mail .field label{display:block; font-size:10.5px; color:var(--text-mute); text-transform:uppercase; margin-bottom:3px;}
.mail .field .val{font-size:13px; color:var(--text-dark); padding:7px 10px; background:#f4f4f4; border:1px solid; border-color:var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh);}
.mail .send{margin-top:6px; background:var(--face); color:#000; border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi); padding:8px 18px; font-size:12.5px; font-weight:600; cursor:pointer;}

/* ---------- CONTROL PANEL ---------- */
.ctrlpanel{padding:18px; height:100%; overflow-y:auto; background:#fff;}
.ctrlpanel h2{margin:0 0 4px; font-size:16px; color:var(--text-dark);}
.ctrlpanel .sub{color:var(--text-mute); font-size:11.5px; margin-bottom:16px;}
.wall-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.wall-swatch{ height:60px; cursor:pointer; border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi); position:relative; overflow:hidden;}
.wall-swatch.active{ box-shadow:0 0 0 2px #000082 inset; }
.wall-swatch span{position:absolute; bottom:3px; left:5px; font-size:9.5px; color:#fff; text-shadow:1px 1px 1px #000;}
.sw-ocean{background:linear-gradient(180deg,#ff9d5c,#5b4a9e,#0a2a52);}
.sw-crt{background:linear-gradient(180deg,#ff9d5c,#5b4a9e,#0a2a52); filter:contrast(1.2) saturate(1.3);}
.sw-teal{background:linear-gradient(180deg,#008080,#004d4d);}
.sw-purple{background:linear-gradient(180deg,#5b2a8a,#1c0e3a);}
.sw-custom{background:linear-gradient(45deg,#ddd 25%,#fff 25%,#fff 75%,#ddd 75%); background-size:14px 14px; display:flex; align-items:center; justify-content:center;}
.sw-custom span{position:static;}

/* ---------- CAMERA APP ---------- */
.camera-app{height:100%; display:flex; flex-direction:column; background:#111; color:#eee;}
.cam-frame{flex:1; position:relative; overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center;}
.cam-frame video{width:100%; height:100%; object-fit:cover; filter:sepia(.35) saturate(1.3) contrast(1.05) brightness(1.02);}
.cam-frame canvas{display:none;}
.cam-rec{position:absolute; top:10px; left:10px; display:flex; align-items:center; gap:6px; font-size:11px; color:#ff5050; text-shadow:0 1px 2px #000; z-index:5;}
.cam-rec .dot{width:8px;height:8px;border-radius:50%;background:#ff2020; animation:recBlink 1s step-start infinite;}
@keyframes recBlink{50%{opacity:.15;}}
.cam-time{position:absolute; bottom:10px; right:12px; font-size:11px; font-family:'Courier New',monospace; color:#e0e0e0; text-shadow:0 1px 2px #000; z-index:5;}
.cam-msg{padding:22px; text-align:center; font-size:12.5px; color:#ccc; line-height:1.6;}
.cam-controls{display:flex; align-items:center; justify-content:center; gap:14px; padding:10px; background:#1a1a1a; border-top:2px solid #333;}
.cam-controls button{
  background:var(--face); border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  padding:7px 16px; font-size:12px; cursor:pointer;
}
.cam-snap{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:6;}
.cam-snap.flash{ animation:camFlash .25s ease; }
@keyframes camFlash{ 0%{opacity:.9;} 100%{opacity:0;} }
.cam-gallery{display:flex; gap:8px; padding:8px; overflow-x:auto; background:#161616; border-top:1px solid #2a2a2a;}
.cam-gallery img{width:56px; height:42px; object-fit:cover; border:2px solid #444; filter:sepia(.35) saturate(1.3);}

/* ---------- RETRO CAM CRT FILTER ---------- */
.cam-frame video{ filter:sepia(.28) saturate(1.45) contrast(1.15) brightness(1.05); }
.cam-crt{ position:absolute; inset:0; pointer-events:none; z-index:3; }
.cam-crt .scanlines{
  position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.cam-crt .rgbmask{
  position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, rgba(255,0,0,.05) 0 2px, rgba(0,255,0,.05) 2px 4px, rgba(0,0,255,.05) 4px 6px, transparent 6px 8px);
  mix-blend-mode:overlay;
}
.cam-crt .flicker{
  position:absolute; inset:0; background:rgba(255,255,255,.02);
  animation:crtFlicker 4s infinite;
}
@keyframes crtFlicker{
  0%,100%{opacity:.5;} 8%{opacity:.15;} 10%{opacity:.6;} 38%{opacity:.3;} 42%{opacity:.55;} 70%{opacity:.2;} 75%{opacity:.6;} 90%{opacity:.35;}
}
.cam-crt .vignette{
  position:absolute; inset:0;
  box-shadow:inset 0 0 120px 40px rgba(0,0,0,.7), inset 0 0 20px 5px rgba(0,0,0,.5);
}
.cam-crt .crt-title{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  font-family:'Courier New',monospace; font-size:10px; letter-spacing:.2em; color:#9fdc8f;
  text-shadow:0 0 6px rgba(120,255,120,.7); opacity:.8;
}

/* ---------- GAMES FOLDER ---------- */
.games-folder{height:100%; padding:16px; background:#001a33; color:#dfe8f2; overflow-y:auto;}
.games-folder h3{margin:0 0 4px; font-size:15px;}
.games-folder .sub{font-size:11px; color:#8fa3b8; margin-bottom:14px;}
.games-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px;}
.game-tile{
  border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  background:linear-gradient(160deg,#123a66,#0a2547); padding:12px; cursor:pointer; text-align:center;
  transition:transform .1s;
}
.game-tile:hover{ transform:scale(1.03); box-shadow:0 0 0 2px #1084d0 inset; }
.game-tile .gt-icon{font-size:36px; margin-bottom:6px;}
.game-tile .gt-name{font-weight:700; font-size:12px;}
.game-tile .gt-tag{font-size:9px; color:#7fb0d8; margin-top:4px; font-style:italic;}
.games-note{margin-top:14px; font-size:9.5px; color:#5f7a93; font-style:italic; text-align:center;}

/* ---------- MUSIC BOX (mini desktop now-playing) ---------- */
.music-box{
  position:absolute; right:16px; bottom:56px; width:250px; z-index:6; user-select:none; opacity:0;
  background:var(--face); border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  box-shadow:3px 3px 0 rgba(0,0,0,.35);
}
.mb-header{
  height:22px; display:flex; align-items:center; justify-content:space-between; padding:0 4px 0 6px;
  background:linear-gradient(90deg,#000082,#1084d0); color:#fff; font-size:10.5px; font-weight:700; cursor:grab; touch-action:none;
}
.mb-min{width:16px; height:15px; background:var(--face); border:1px solid; border-color:var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi); font-size:9px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.mb-close{width:16px; height:15px; background:var(--face); border:1px solid; border-color:var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi); font-size:9px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.mb-close:hover{background:#c00; color:#fff;}
.mb-head-btns{display:flex; gap:2px;}
.music-box.closed{display:none !important;}
.mb-body{padding:10px; display:flex; flex-direction:column; align-items:center; background:#fff; position:relative;}
.mb-art{
  width:120px; height:120px; position:relative; overflow:hidden; border:2px solid; border-color:var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh);
  background:#222;
}
.mb-art img{width:100%; height:100%; object-fit:cover; display:block;}
.mb-art .spinning{ position:absolute; inset:0; background:radial-gradient(circle, transparent 40%, rgba(0,0,0,.4)); pointer-events:none; }
.mb-art .spinning.playing{ animation:spinDisc 6s linear infinite; }
@keyframes spinDisc{ from{transform:rotate(0);} to{transform:rotate(360deg);} }
.mb-title{margin-top:8px; font-size:12px; font-weight:700; color:#000; text-align:center; line-height:1.3;}
.mb-artist{font-size:10.5px; color:#444; margin-top:1px; text-align:center;}
.mb-controls{display:flex; align-items:center; gap:8px; margin-top:8px;}
.mb-controls button{
  width:28px; height:28px; background:var(--face); border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  font-size:12px; cursor:pointer; color:#000;
}
.mb-controls .mb-play{width:36px; height:36px; font-size:14px; background:#000082; color:#fff;}
.mb-eq{display:flex; align-items:flex-end; gap:2px; height:16px;}
.mb-eq .b{width:3px; background:#3ecf3e; height:3px;}
.mb-progress{width:100%; height:4px; background:#ddd; margin-top:8px; position:relative; border:1px solid #ccc;}
.mb-progress .fill{height:100%; width:0%; background:linear-gradient(90deg,#1084d0,#3ecf3e);}
.mb-tracklist{width:100%; margin-top:6px; font-size:10px; max-height:100px; overflow-y:auto; border:1px solid #ccc;}
.mb-track{display:flex; align-items:center; gap:5px; padding:4px 6px; cursor:pointer; border-bottom:1px solid #eee; background:#fff; color:#333;}
.mb-track:hover{background:#e8f0ff;}
.mb-track.cur{background:#000082; color:#fff;}
.mb-track .tn{color:#999; min-width:14px;}
.mb-track.cur .tn{color:#9fd;}
.mb-note{font-size:8px; line-height:1.4; color:#555; padding:5px 8px; border-top:1px solid #ccc; text-align:center;}
.music-box.minimized .mb-body{display:none;}

/* ---------- START MENU ---------- */
#start-menu{
  position:absolute; left:2px; bottom:34px; width:220px; z-index:50;
  background:var(--face); border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  box-shadow:3px 3px 0 rgba(0,0,0,.4);
  transform-origin:bottom left; transform:scaleY(0); opacity:0; pointer-events:none;
  transition:transform .16s ease, opacity .12s ease;
}
#start-menu.open{transform:scaleY(1); opacity:1; pointer-events:auto;}
.sm-header{ background:linear-gradient(90deg,#000082,#1084d0); padding:10px; display:flex; align-items:center; gap:8px; }
.sm-header .av{width:32px;height:32px;background:#fff;color:#000082;display:flex;align-items:center;justify-content:center;font-weight:900; font-size:12px;}
.sm-header .nm{font-weight:700; font-size:12.5px; color:#fff;}
.sm-header .rl{font-size:10px; color:#dfe8f2;}
.sm-list{padding:4px;}
.sm-item{display:flex; align-items:center; gap:8px; padding:6px 8px; cursor:pointer; font-size:12px; color:#000;}
.sm-item:hover{background:#000082; color:#fff;}
.sm-item .ic{width:22px; display:flex; align-items:center; justify-content:center; font-size:14px;}
.sm-foot{border-top:1px solid #888; padding:6px 10px; font-size:9.5px; color:#555;}

/* ---------- TASKBAR ---------- */
#taskbar{
  position:absolute; left:0; right:0; bottom:0; height:32px; z-index:60; display:flex; align-items:stretch;
  background:var(--face); border-top:2px solid var(--bevel-hi);
}
#start-btn{
  display:flex; align-items:center; gap:5px; padding:0 10px; margin:2px; cursor:pointer;
  background:var(--face); color:#000; font-weight:700; font-size:12px;
  border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
}
#start-btn:active{ border-color: var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh); }
#start-btn .orb{width:14px;height:14px;background:#008000;}
#taskbar-apps{flex:1; display:flex; align-items:stretch; gap:3px; padding:2px 4px; overflow-x:auto;}
.tb-app{
  display:flex; align-items:center; gap:5px; padding:0 8px; cursor:pointer;
  background:var(--face); border:2px solid; border-color: var(--bevel-hi) var(--bevel-sh) var(--bevel-sh) var(--bevel-hi);
  color:#000; font-size:11px; min-width:90px; max-width:150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tb-app.active{ border-color: var(--bevel-sh) var(--bevel-hi) var(--bevel-hi) var(--bevel-sh); background:#d0d0d0; }
#systray{display:flex; align-items:center; gap:8px; padding:0 8px; border-left:1px solid var(--bevel-sh); color:#000; font-size:11px;}
#mute-btn{background:none; border:none; color:#000; cursor:pointer; font-size:14px;}
#mb-toggle{background:none; border:none; color:#000; cursor:pointer; font-size:16px; padding:0;}
#show-desktop{width:8px; border-left:1px solid var(--bevel-sh); cursor:pointer;}
.hidden{display:none !important;}

/* ---------- AUTO BIOS / TERMINAL BOOT SCREEN ---------- */
#boot-screen{
  position:fixed; inset:0; z-index:1000; background:#00060f;
  font-family:'Courier New',monospace; color:#3ecf3e;
  display:flex; align-items:center; justify-content:center; padding:4vh 16px;
  transition:opacity .6s ease, transform .6s ease;
}
#boot-screen::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,255,120,.045) 0 1px, transparent 1px 3px);
}
#boot-screen.unlocked{ opacity:0; transform:translateY(-3%); pointer-events:none; }
.boot-term{
  position:relative; width:min(760px, 100%); max-height:88vh; overflow:hidden;
  font-size:13px; line-height:1.75; white-space:pre-wrap; word-break:break-word;
  text-shadow:0 0 8px rgba(62,207,62,.55);
}
.boot-term::after{ content:'▊'; animation:bootBlink 1s step-start infinite; }
@keyframes bootBlink{ 50%{opacity:0;} }
@media (max-width:768px){ .boot-term{font-size:11.5px;} }

/* ---------- MOBILE RESPONSIVE ---------- */
@media (max-width:768px){
  .desktop-icons{ flex-direction:column; max-height:calc(100vh - 120px); }
  .d-icon{width:66px;}
  .d-icon .glyph{width:34px; height:34px; font-size:17px;}
  .music-box{width:210px; right:8px; bottom:44px;}
  .mb-art{width:90px; height:90px;}
  .win{min-width:260px; min-height:180px;}
  .explorer .sidebar{width:98px; flex:0 0 98px; font-size:10.5px;}
  #start-menu{width:190px;}
  .tb-app{min-width:64px; max-width:100px; padding:0 6px; font-size:10px;}
  #start-btn{padding:0 6px; font-size:11px;}
  #taskbar{height:38px;}
  .win .titlebar{height:30px;}
  .t3-board{grid-template-columns:repeat(3,48px);}
  .t3-cell{width:48px; height:48px; font-size:22px;}
  .err-dialog{width:250px;}
}
@media (max-width:480px){
  .win{ left:2px !important; top:2px !important; width:calc(100vw - 4px) !important; height:calc(100vh - 46px) !important; }
  .resize-handle{ display:none; }
}