*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{
  --bg:#0a0908;--red:#c8391f;--green:#39c87a;--amber:#c8a039;
  --off:#e8e0d4;--muted:#4a4540;
  --font-mono:'Share Tech Mono',monospace;
  --font-disp:'Archivo Black',sans-serif;
  --font-cond:'Barlow Condensed',sans-serif;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);cursor:none;}
canvas{position:fixed;inset:0;z-index:0;}

/* CURSOR */
#cur{position:fixed;width:16px;height:16px;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}
#cur::before,#cur::after{content:'';position:absolute;background:var(--red);}
#cur::before{width:1px;height:100%;left:50%;transform:translateX(-50%);}
#cur::after{width:100%;height:1px;top:50%;transform:translateY(-50%);}
#cur-dot{position:fixed;width:3px;height:3px;background:var(--red);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}

/* SCANLINES */
body::after{content:'';position:fixed;inset:0;z-index:600;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,0.04) 3px,rgba(0,0,0,0.04) 4px);}

/* HINT */
#hint{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:48px;pointer-events:none;transition:opacity 0.8s ease;}
#hint-text{font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:rgba(200,57,31,0.7);animation:blink 2s ease-in-out infinite;}

/* DESKTOP OS */
#desktop{position:fixed;inset:0;z-index:300;background:#0d1a0e;display:none;flex-direction:column;font-family:var(--font-mono);transform:scale(0.92);opacity:0;transition:transform 0.5s ease,opacity 0.5s ease;}
#desktop.show{display:flex;}
#desktop.active{transform:scale(1);opacity:1;}
#desktop::before{content:'';position:absolute;inset:0;z-index:10;pointer-events:none;background:radial-gradient(ellipse 90% 85% at 50% 50%,transparent 60%,rgba(0,0,0,0.7) 100%);}
#desktop::after{content:'';position:absolute;inset:0;z-index:11;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,255,60,0.015) 1px,rgba(0,255,60,0.015) 2px);}

/* TOPBAR */
#topbar{height:28px;background:#0a1a0b;border-bottom:1px solid #1a3a1c;display:flex;align-items:center;justify-content:space-between;padding:0 12px;font-size:10px;letter-spacing:0.12em;color:#2a6a2c;position:relative;z-index:12;flex-shrink:0;}
.tb-left{display:flex;gap:16px;}
.tb-right{display:flex;gap:16px;align-items:center;}
#clock{color:#39c87a;}
#back-btn{color:#c8391f;cursor:none;transition:color .2s;padding:0 4px;font-size:10px;letter-spacing:0.1em;}
#back-btn:hover{color:#ff6040;}

/* DESKTOP AREA */
#desktop-area{flex:1;position:relative;overflow:hidden;padding:20px;}

/* FOLDERS — BUG-1 FIX: z-index above overlays */
.folder{position:absolute;width:80px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:none;user-select:none;transition:transform .15s;z-index:15;}
.folder:hover{transform:scale(1.08);}
.folder:hover .folder-icon{filter:brightness(1.3);}
.folder-icon{width:52px;height:44px;position:relative;filter:drop-shadow(0 2px 8px rgba(57,200,122,0.15));}
.folder-icon svg{width:100%;height:100%;}
.folder-label{font-size:10px;letter-spacing:0.08em;color:#39c87a;text-align:center;line-height:1.3;text-shadow:0 0 8px rgba(57,200,122,0.5);}

/* WINDOWS — with open/close animation (IMP-11) */
.win{position:absolute;background:#0a1a0c;border:1px solid #1f5a22;min-width:280px;min-height:180px;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.8),0 0 0 1px rgba(57,200,122,0.1);z-index:50;transform:scale(0.9);opacity:0;visibility:hidden;pointer-events:none;transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),opacity 0.2s ease,visibility 0s 0.25s;resize:both;overflow:hidden;}
.win.open{transform:scale(1);opacity:1;visibility:visible;pointer-events:auto;transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),opacity 0.2s ease,visibility 0s 0s;}
.win-bar{height:28px;background:#0d200f;border-bottom:1px solid #1f5a22;display:flex;align-items:center;padding:0 10px;gap:8px;font-size:10px;letter-spacing:0.1em;color:#2a6a2c;flex-shrink:0;cursor:none;user-select:none;}
.win-close{width:12px;height:12px;background:#c8391f;border-radius:50%;cursor:none;margin-left:auto;flex-shrink:0;transition:background .2s,transform .15s;position:relative;}
.win-close::before,.win-close::after{content:'';position:absolute;top:50%;left:50%;width:7px;height:1.5px;background:#3b0903;border-radius:1px;opacity:0.85;}
.win-close::before{transform:translate(-50%,-50%) rotate(45deg);}
.win-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
.win-close:hover{background:#ff5535;transform:scale(1.2);}
.win-close:hover::before,.win-close:hover::after{opacity:1;}
.win-title{color:#39c87a;}
.win-body{flex:1;padding:16px;overflow-y:auto;font-size:11px;line-height:1.8;color:#3abe5a;scrollbar-width:thin;scrollbar-color:#1f5a22 #0a1a0c;}
.win-body h2{font-family:var(--font-cond);font-size:18px;font-weight:700;color:#39c87a;letter-spacing:0.1em;margin-bottom:12px;text-shadow:0 0 12px rgba(57,200,122,0.4);}
.win-body .row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #0f2a12;gap:16px;}
.win-body .row .k{color:#2a8a3a;font-size:10px;letter-spacing:0.12em;text-transform:uppercase;}
.win-body .row .v{color:#5ae87a;text-align:right;}
.win-body p{margin-bottom:8px;color:#3abe5a;}
.win-body p strong{color:#39c87a;}
.win-body .tag{display:inline-block;border:1px solid #1f5a22;padding:2px 8px;margin:2px;font-size:10px;color:#3abe5a;letter-spacing:0.08em;}
.prompt{color:#c8a039;}.prompt::before{content:'> ';}
.win.focused{border-color:#39c87a;box-shadow:0 8px 40px rgba(0,0,0,0.8),0 0 0 1px rgba(57,200,122,0.3),0 0 20px rgba(57,200,122,0.05);}
.win.focused .win-bar{background:#0f2a12;}

/* ASCII ART & MEDIA PLAYER STYLES */
.ascii-art{font-family:var(--font-mono);font-size:10px;line-height:1.2;color:#39c87a;text-shadow:0 0 8px rgba(57,200,122,0.6);margin-bottom:16px;white-space:pre-wrap;text-align:center;}
.player-ui{display:flex;flex-direction:column;gap:8px;padding:8px 0;align-items:center;position:relative;}
.spotify-tag{font-size:8px;color:#1ed760;letter-spacing:0.2em;border:1px solid #1ed760;padding:2px 6px;border-radius:10px;margin-bottom:4px;box-shadow:0 0 5px rgba(30,215,96,0.4);}
#sp-cover{width:100px;height:100px;border-radius:4px;border:1px solid #333;box-shadow:0 4px 15px rgba(0,0,0,0.5);margin:4px 0;object-fit:cover;}
.player-track{color:#b839c8;font-size:14px;font-family:var(--font-cond);letter-spacing:0.1em;text-shadow:0 0 10px rgba(184,57,200,0.4);text-align:center;}
.player-track a:hover{color:#df6cf0;text-shadow:0 0 15px rgba(223,108,240,0.8);}
.player-artist{color:#a87ab2;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;}
.eq-bars{display:flex;gap:4px;align-items:flex-end;height:20px;margin-top:8px;}
.eq-bars span{display:block;width:4px;background:#1ed760;animation:eq 1s infinite alternate ease-in-out;}
.eq-bars span:nth-child(2){animation-delay:-0.4s;}
.eq-bars span:nth-child(3){animation-delay:-0.8s;}
@keyframes eq { 0%{height:4px;} 100%{height:20px;} }

/* TASKBAR TABS */
#taskbar-tabs{display:flex;gap:2px;margin-left:16px;}
.taskbar-tab{padding:0 8px;font-size:9px;letter-spacing:0.08em;color:#2a8a3a;cursor:none;transition:color .2s,background .2s;height:100%;display:flex;align-items:center;border-right:1px solid #1a3a1c;}
.taskbar-tab:hover{color:#39c87a;}
.taskbar-tab.active{color:#39c87a;background:rgba(57,200,122,0.06);}

/* STATUSBAR */
#statusbar{height:22px;background:#0a1a0b;border-top:1px solid #1a3a1c;display:flex;align-items:center;padding:0 12px;gap:24px;font-size:9px;letter-spacing:0.12em;color:#1f5a22;position:relative;z-index:12;flex-shrink:0;}
.sb-item span{color:#2a8a2c;}

/* BOOT */
#boot{position:fixed;inset:0;z-index:400;background:#000;display:flex;flex-direction:column;justify-content:center;padding:48px 64px;font-family:var(--font-mono);font-size:12px;line-height:2;color:#2aaa4a;transition:opacity 0.8s ease;}
#boot.hide{opacity:0;pointer-events:none;}
.boot-line{opacity:0;animation:bootLine 0.1s ease forwards;}

/* LINKS inside windows (IMP-10) */
.win-body a{color:#5ae87a;text-decoration:none;border-bottom:1px solid rgba(90,232,122,0.3);transition:color .2s,border-color .2s;}
.win-body a:hover{color:#7aff9a;border-color:#7aff9a;}

/* ── ANIMATIONS ── */
@keyframes bootLine{to{opacity:1;}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0.2;}}
@keyframes winAppear{from{transform:scale(0.85);opacity:0;}to{transform:scale(1);opacity:1;}}

/* ── RESPONSIVE: TABLET (≤768px) ── */
@media (max-width:768px){
  html,body{cursor:auto;}
  #cur,#cur-dot{display:none !important;}
  #boot{padding:24px 32px;font-size:11px;}
  #hint-text{font-size:13px;}
  #topbar{height:32px;padding:0 8px;font-size:9px;}
  .tb-left{gap:8px;}
  .tb-left span:nth-child(2),.tb-left span:nth-child(3){display:none;}
  .tb-right{gap:8px;}
  #back-btn{font-size:11px;padding:2px 8px;}
  #desktop-area{padding:20px;display:grid;grid-template-columns:repeat(3, 1fr);align-content:start;gap:20px;justify-items:center;overflow-y:auto;overflow-x:hidden;}
  .folder{position:relative !important;left:auto !important;top:auto !important;width:80px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
  .folder:hover{transform:scale(1.02);background:transparent;}
  .folder-icon{width:48px;height:40px;flex-shrink:0;}
  .folder-label{font-size:10px;text-align:center;word-wrap:break-word;width:100%;line-height:1.2;}
  .win{position:fixed !important;left:0 !important;top:32px !important;right:0;bottom:22px;width:100% !important;height:calc(100% - 54px) !important;min-width:unset;min-height:unset;border-left:none;border-right:none;z-index:60;transition:none;}
  .win-bar{height:34px;padding:0 12px;}
  .win-close{width:14px;height:14px;}
  .win-body{font-size:12px;padding:14px;}
  .win-body h2{font-size:16px;}
  .win-body .row{flex-direction:column;gap:2px;padding:8px 0;}
  .win-body .row .v{text-align:left;}
  #statusbar{height:22px;gap:8px;padding:0 8px;font-size:8px;overflow-x:auto;}
  .sb-item:nth-child(1){display:none;}
  #taskbar-tabs{margin-left:8px;overflow-x:auto;flex-shrink:0;}
  .taskbar-tab{font-size:8px;padding:0 6px;white-space:nowrap;}
  .folder,.win-bar,.win-close,#back-btn,.taskbar-tab{cursor:auto;}
}

/* ── RESPONSIVE: MOBILE (≤480px) ── */
@media (max-width:480px){
  #boot{padding:16px 20px;font-size:10px;line-height:1.8;}
  #hint-text{font-size:14px;letter-spacing:0.15em;}
  #topbar{font-size:8px;padding:0 6px;}
  #back-btn{font-size:10px;}
  .folder{padding:8px 10px;}
  .folder-icon{width:30px;height:26px;}
  .folder-label{font-size:11px;}
  .win-body{padding:10px;font-size:11px;}
  .win-body h2{font-size:15px;margin-bottom:8px;}
  .win-body .tag{font-size:9px;padding:1px 6px;}
  #statusbar{font-size:7px;gap:6px;}
}

/* ── SERVER TERMINAL DASHBOARD ── */
#server-dashboard-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(10,26,12,0.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:90;display:flex;justify-content:center;align-items:center;opacity:0;transition:opacity 0.4s;}
.server-terminal{width:500px;background:rgba(13,26,14,0.95);border:1px solid #1f5a22;box-shadow:0 0 15px rgba(57,200,122,0.1);display:flex;flex-direction:column;border-radius:0;overflow:hidden;transform:scale(0.9);opacity:0;transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.4s;}
#server-dashboard-overlay.active{opacity:1;}
#server-dashboard-overlay.active .server-terminal{transform:scale(1);opacity:1;}
.st-body{padding:20px;font-size:14px;color:#39c87a;line-height:1.6;font-family:var(--font-mono);min-height:200px;}
.st-metric{display:flex;justify-content:space-between;margin:5px 0;}
.st-bar-container{width:100%;height:4px;background:#1a3a1c;margin:2px 0 10px;border-radius:2px;overflow:hidden;}
.st-bar{height:100%;background:#39c87a;width:0%;transition:width 0.5s ease;}
.st-blink{animation:blink-caret 1s infinite;}
@keyframes blink-caret { 50% { opacity: 0; } }

/* ── TOUCH DEVICE SUPPORT ── */
@media (hover:none) and (pointer:coarse){
  html,body{cursor:auto;}
  #cur,#cur-dot{display:none !important;}
  .folder,.win-bar,.win-close,#back-btn,.taskbar-tab{cursor:auto;}
  .folder{-webkit-tap-highlight-color:rgba(57,200,122,0.15);}
  .folder:active{transform:scale(0.96);background:rgba(57,200,122,0.1);}
  .win-close:active{background:#ff5535;transform:scale(1.2);}
  #back-btn:active{color:#ff6040;}
}

/* ── ACCESSIBILITY: reduced motion ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;}
}