/* =======================
   GLOBAL / BACKGROUNDS
======================= */
:root{
  --win95-gray:#c0c0c0;
  --win95-dark:#808080;
  --win95-light:#f0f0f0;
  --neon-cyan:#00ffff;
  --neon-pink:#ff00ff;
  --neon-yellow:#ffff00;
  --text:#eaffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#000; color:var(--text);
  font-family:'VT323', monospace; overflow:hidden;
}
/* =======================
   GLOBAL / BACKGROUNDS
======================= */
:root{
  --win95-gray:#c0c0c0;
  --win95-dark:#808080;
  --win95-light:#f0f0f0;
  --neon-cyan:#00ffff;
  --neon-pink:#ff00ff;
  --neon-yellow:#ffff00;
  --text:#eaffff;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:#000; color:var(--text);
  font-family:'VT323', monospace; overflow:hidden;
}
.bg-0{ 
  background: url("Assets/GIFS/f55b0f3e0d9b878ed9192b8358fd1480.gif") 
              center center / cover no-repeat #000;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  
  position: relative;
  overflow: hidden;
}

.bg-0::before {
  content: "";
  position: fixed;
  inset: 0;
  background: inherit;
  background-size: cover;
  image-rendering: pixelated;
   filter: brightness(0.2);  
filter: contrast(1.2);

  /* 🔽 Pixelation factor (lower scale = bigger pixels) */
  transform: scale(0.25);        /* render at 25% size */
  transform-origin: top left;    /* lock scale to screen */
  width: 400%;                   /* stretch it back */
  height: 400%;
  z-index: -1;
}
.bg-5{ background:
  radial-gradient(circle at 10% 10%, rgba(255,0,255,.2), transparent 30%),
  radial-gradient(circle at 80% 20%, rgba(0,255,255,.2), transparent 35%),
  radial-gradient(circle at 30% 80%, rgba(255,255,0,.2), transparent 40%),
  #050011; }
.bg-1{ background:
  repeating-conic-gradient(from 0deg, #111 0 10deg, #222 10deg 20deg); }
.bg-2{ background:
  linear-gradient(45deg, #0ff2, #f0f2, #ff02, #0f02); }
.bg-3{ background:
  radial-gradient(circle at 50% 50%, #222, #000); }
.bg-{ background:
  repeating-linear-gradient(90deg, #111 0 20px, #000 20px 40px); }
}
.overlay-grid::before{
  z-index:2;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.24) 0 2px, rgba(0,0,0,.45) 2px 4px);
  mix-blend-mode:multiply;
}
#noiseOverlay{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; background-size:250px;
}

/* Starfield */
#stars{position:fixed;inset:0;z-index:0;pointer-events:none}
.star{position:absolute;border-radius:50%;opacity:.7;animation:twinkle 2s infinite alternate}
@keyframes twinkle{from{opacity:.2} to{opacity:1}}

/* Announcer */
#announcer{position:fixed;top:0;left:0;right:0;z-index:5;background:rgba(0,0,0,.75);border-bottom:2px solid var(--neon-cyan)}
#announcer .row{display:flex;gap:12px;align-items:center;padding:6px 10px}
#announcer .blink{animation:blink 1.1s steps(2,start) infinite;color:var(--neon-yellow);font-family:'Press Start 2P', monospace;font-size:12px}
@keyframes blink{50%{opacity:.3}}
#news{white-space:nowrap;overflow:hidden}
#news span{display:inline-block;animation:marq 22s linear infinite}
@keyframes marq{from{transform:translateX(100%)} to{transform:translateX(-100%)}}

/* Taskbar */
#taskbar{
  position:fixed;bottom:0;left:0;right:0;z-index:8;height:38px;
  background:var(--win95-gray); border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid var(--win95-dark); border-bottom:2px solid var(--win95-dark);
  display:flex;align-items:center;gap:8px;padding:4px 6px;font-family:'Press Start 2P', monospace;font-size:12px;color:#000;
}
#startBtn{
  background:#dcdcdc;border:2px solid #fff;border-right-color:var(--win95-dark);border-bottom-color:var(--win95-dark);
  padding:4px 10px;cursor:pointer;display:flex;align-items:center;gap:6px;
}
#taskApps{display:flex;gap:6px;flex:1}
.task{
  background:#dcdcdc;border:2px solid #fff;border-right-color:var(--win95-dark);border-bottom-color:var(--win95-dark);
  padding:2px 8px;cursor:pointer;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
#clock{min-width:88px;text-align:right}

/* Desktop */
#desktop{position:fixed;inset:38px 0 38px 0;z-index:4;padding:18px;overflow:auto}
.icon{
  width:86px;margin:8px;text-align:center;color:#fff;cursor:pointer;display:inline-flex;flex-direction:column;gap:6px;align-items:center;
  filter:drop-shadow(0 0 6px rgba(0,255,255,.4));
}
.icon img{width:48px;height:48px;image-rendering:pixelated}
.icon span{font-family:'VT323';font-size:16px;text-shadow:0 0 6px #000}

/* Windows */
.win{
  position:absolute;min-width:320px;min-height:160px;top:120px;left:120px;background:var(--win95-gray);
  border:2px solid #fff;border-right-color:var(--win95-dark);border-bottom-color:var(--win95-dark);
  box-shadow:0 10px 24px rgba(0,0,0,.4); z-index:6; display:none;
}
.win.active{display:block}
.titlebar{
  background:linear-gradient(#0500aa,#000066);color:#fff;height:26px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;cursor:move;font-family:'Press Start 2P', monospace;font-size:12px
}
.winbtns{display:flex;gap:4px}
.winbtn{width:20px;height:18px;background:#dcdcdc;border:2px solid #fff;border-right-color:#808080;border-bottom-color:#808080;display:grid;place-items:center;cursor:pointer}
.win .content{background:#efefef;padding:10px;overflow:auto;max-height:60vh}

/* Buttons / Inputs */
.btn{
  padding:6px 10px;background:#ffb3ff;border:2px solid #fff;border-right-color:#888;border-bottom-color:#888;cursor:pointer;font-family:'Press Start 2P', monospace;font-size:12px;color:#000;
}
.btn:active{border-top-color:#888;border-left-color:#888;border-right-color:#fff;border-bottom-color:#fff}
.input, select{
  padding:6px 8px;border:2px solid #000;background:#fff;font-family:'VT323', monospace;font-size:18px;color:#111
}

/* LED Counter */
.counter{font-family:'Press Start 2P', monospace;color:#111;background:#222;border:2px inset #666;display:inline-block;padding:6px 10px}
.counter .digit{display:inline-block;width:14px;text-align:center;margin:0 1px;color:#0f0;text-shadow:0 0 6px #0f0, 0 0 10px #0f0}

/* Guestbook */
.gb-card{background:linear-gradient(135deg,#ff6aff,#6affff,#ffff6a);padding:2px;border-radius:8px;margin-bottom:10px}
.gb-inner{background:#fff;color:#000;padding:8px;border-radius:6px;font-family:'VT323';font-size:18px}

/* Pager */
.pager{background:#111;border:3px solid #0a0;padding:6px;border-radius:8px;color:#0f0;font-family:'Press Start 2P';text-shadow:0 0 8px #0f0}
.pager .led{height:28px;overflow:hidden;white-space:nowrap;mask-image:linear-gradient(to right, transparent, #000 20%, #000 80%, transparent)}
.pager .led span{display:inline-block;padding-left:100%;animation:scroll 14s linear infinite}
@keyframes scroll{to{transform:translateX(-100%)}}

/* 8-ball */
#ball{width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 35% 35%, #333, #000 60%);display:grid;place-items:center;margin:10px auto;box-shadow:inset 0 0 40px #000,0 0 30px #00f}
#ball .window{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle at 50% 30%, #002,#000);display:grid;place-items:center;color:#9cf;text-align:center;font-family:'Press Start 2P';font-size:10px;padding:8px}

/* Cassette Player */
#player95{background:#c0c0c0;color:#000;border:2px solid #fff;border-right-color:#808080;border-bottom-color:#808080;border-radius:4px;padding:10px;box-shadow:inset -2px -2px 3px rgba(0,0,0,.5), inset 2px 2px 3px rgba(255,255,255,.5);font-family:'Press Start 2P'}
#player95 canvas{display:block;width:100%;height:80px;background:#000;margin-bottom:5px}
#player95 .controls{display:flex;align-items:center;margin-bottom:10px}
#player95 .controls button{background:#d0d0d0;border:2px solid #f8f8f8;border-right-color:#808080;border-bottom-color:#808080;padding:2px 8px;margin-right:5px;cursor:pointer;font-size:12px}
#player95 .controls input[type="range"]{flex:1}
#player95 ul{list-style:none;max-height:120px;overflow-y:auto;padding-left:10px;margin:5px 0;background:#e0e0e0;border:1px solid #fff;border-right-color:#808080;border-bottom-color:#808080}

/* Projects */
#projects .media{position:relative;width:100%;height:160px;margin-bottom:10px;border:1px dashed var(--neon-pink);overflow:hidden}
#projects .media iframe,#projects .media img,#projects .media video{width:100%;height:100%;object-fit:cover;border:none}
.media.pixelated iframe,.media.pixelated img,.media.pixelated video{filter:grayscale(70%) contrast(250%) brightness(85%);image-rendering:pixelated;transition:filter .25s ease,image-rendering .25s ease}
.media.pixelated:hover iframe,.media.pixelated:hover img,.media.pixelated:hover video,.media.pixelated:focus-within iframe,.media.pixelated:focus-within img,.media.pixelated:focus-within video{filter:none;image-rendering:auto}
.media.pixelated .unpixelate{position:absolute;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.25);color:#fff;font-family:'Press Start 2P';font-size:11px;text-shadow:0 0 6px #0ff, 0 0 12px #f0f;cursor:pointer;z-index:3}

/* Screensaver */
#screensaver{position:fixed;inset:0;background:#000;display:none;z-index:100;align-items:center;justify-content:center}
#dvd{position:absolute;width:120px;height:60px;background:#222;border:3px solid #fff;color:#fff;display:grid;place-items:center;font-family:'Press Start 2P'}

/* Cursor trails */
.trail{position:fixed;pointer-events:none;font-size:16px;opacity:.95;transform:translate(-50%,-50%);animation:trailfade .9s forwards}
@keyframes trailfade{to{opacity:0;transform:translate(-50%,-50%) scale(.5)}}

/* Snake */
#cabinet{position:relative;margin:auto;width:360px;background:#222;border:6px solid #555;border-radius:10px;box-shadow:inset 0 0 20px #000,0 0 20px #0ff}
#cabinet:before{content:"ARCADE";position:absolute;top:-28px;left:0;right:0;text-align:center;color:#0ff;text-shadow:0 0 8px #0ff;font-family:'Press Start 2P';font-size:12px}
#snake{display:block;margin:10px auto;background:#000;border:2px solid #0ff}

/* Utility */
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:8px}
.win:focus{outline:2px dashed #ff0}
.hint{font-size:12px;opacity:.8}
.link-list a{color:#00ffff}

/* Desktop Buddy */
#desktopBuddy{position:fixed;right:10px;bottom:50px;z-index:9999;pointer-events:none}
#desktopBuddy img{width:64px;height:auto;image-rendering:pixelated}

/* ===========================
   WINDOWS 95 PAINT — EXACT LOOK / FIXED
=========================== */
#winPaint .content.paint95{
  padding:0 !important;
  background:#c0c0c0 !important;
  overflow:hidden !important;
  box-sizing:border-box;
  width:628px;
  font-family:"MS Sans Serif", Tahoma, Arial, sans-serif;
  color:#000;
}
.p95-menu{
  display:flex; gap:16px; list-style:none; margin:0; padding:2px 6px;
  background:#e0e0e0;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #808080;
  height:22px; align-items:center; font-size:12px;
}
.p95-menu li{ position:relative; cursor:default; user-select:none; padding:0 2px }
.p95-menu li:hover{ background:#000080; color:#fff; }
.p95-menu .menu-drop{
  position:absolute; top:100%; left:0; display:none; min-width:160px; z-index:10;
  background:#e0e0e0; padding:4px;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #808080;
}
.p95-menu li:hover .menu-drop{ display:block; }
.p95-menu .menu-drop button,
.p95-menu .menu-drop label.chk{
  display:block; width:100%; text-align:left; font-size:12px; padding:3px 6px; background:transparent; border:0; color:#000; cursor:pointer;
}
.p95-menu .menu-drop button:hover{ background:#000080; color:#fff }
.p95-menu .menu-drop hr{ border:0; border-top:1px solid #808080; margin:4px 0 }
.p95-menu .menu-drop .helptext{ font-size:11px; opacity:.8; padding:2px 4px }

.p95-body{
  display:grid; grid-template-columns:50px 1fr; gap:6px;
  padding:6px; height:330px; box-sizing:border-box;
}
.p95-workarea{
  display:grid;
  grid-template-columns:26px 1fr;
  grid-template-rows:26px 1fr;
  gap:0;
  height:100%;
  min-height:0;
}
.ruler.h{
  grid-column:2; grid-row:1;
  background:#d7d7d7; height:26px;
  border:1px solid #808080; border-left-color:#fff;
  overflow:hidden;
}
.ruler.v{
  grid-column:1; grid-row:2;
  background:#d7d7d7; width:26px;
  border:1px solid #808080; border-top-color:#fff;
  overflow:hidden;
}
.canvas-wrap{
  grid-column:2; grid-row:2;
  position:relative;
  overflow:auto;
  width:100%; height:100%;
  background:#d7d7d7;
  border-top:2px solid #808080; border-left:2px solid #808080;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
  padding:4px;
}
#paintCanvas, #overlayCanvas, #gridOverlay{ position:absolute; top:0; left:0; display:block }
#paintCanvas{ background:#fff; z-index:0; box-shadow:0 0 0 1px #000 inset }
#overlayCanvas{ z-index:1; pointer-events:none }
#gridOverlay{ z-index:2; pointer-events:none; opacity:0 }

.p95-toolbar{
  background:#c0c0c0;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #808080;
  padding:2px; width:50px; height:100%;
  display:grid; grid-template-columns:repeat(2,24px); grid-auto-rows:24px; gap:2px;
}
.p95-toolbar .t{
  width:24px;height:24px;background:#c0c0c0;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #808080;
  position:relative; cursor:pointer;
}
.p95-toolbar .t[aria-pressed="true"]{
  border-top:2px solid #808080; border-left:2px solid #808080;
  border-right:2px solid #fff; border-bottom:2px solid #fff;
}
.p95-toolbar .t::before{
  content:"";position:absolute;inset:0;background-repeat:no-repeat;background-position:center;background-size:16px 16px;filter:contrast(200%);
}
.tool-pencil::before{ background-image:linear-gradient(#000,#000) }
.tool-eraser::before{ box-shadow:inset 0 0 0 2px #000; border-radius:2px }
.tool-fill::before{ background-image:radial-gradient(circle,#000 35%,transparent 36%) }
.tool-line::before{ background-image:linear-gradient(45deg,#000 2px,transparent 2px) }
.tool-rect::before{ box-shadow: inset 0 0 0 2px #000 }
.tool-oval::before{ border-radius:50%; box-shadow: inset 0 0 0 2px #000 }
.tool-text::before{ content:"A"; font:bold 14px/24px "MS Sans Serif",Tahoma,Arial; color:#000; text-align:center }

.p95-bottom{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:4px 6px; height:54px; box-sizing:border-box; background:#cfcfcf;
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #808080;
}
.colorbox{ display:flex; align-items:center; gap:10px }
.colorbox .swatches{ display:flex; flex-direction:column; gap:4px }
.colorbox .swatch{ width:26px;height:26px;border:1px solid #000; background:#000 }
.colorbox .swatch.secondary{ background:#fff }
.palette{ display:grid; grid-template-columns:repeat(14,18px); grid-auto-rows:18px; gap:2px }
.palette button{ width:18px;height:18px;border:1px solid #000; cursor:pointer }
.sizectl select{ font-family:"MS Sans Serif"; font-size:12px; padding:2px }

.p95-status{
  display:flex; justify-content:space-between; align-items:center;
  height:22px; padding:2px 6px; font-size:12px; background:#e0e0e0;
  border-top:2px solid #808080; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #fff;
}

/* ===========================
   FILES WINDOW (grid)
=========================== */
.files95{ font-family:"MS Sans Serif", Tahoma, Arial, sans-serif; }
.files-bar{ display:flex; gap:6px; align-items:center; margin-bottom:8px }
.files-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px }
.file-card{
  background:#eaeaea; border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #808080; padding:6px
}
.file-thumb{ width:100%; aspect-ratio:4/3; object-fit:cover; background:#fff; border:1px solid #000 }
.file-title{ font-size:12px; margin:4px 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.file-actions{ display:flex; gap:6px; flex-wrap:wrap }



/* --- Win95 menu dropdowns --- */
.p95-menu { position: relative; z-index: 5; }
.p95-menu .menu { position: relative; padding: 0 6px; line-height: 20px; }
.p95-menu .menu .menu-drop{
  display:none; position:absolute; top:100%; left:0;
  background:#e0e0e0; min-width:180px; padding:4px; 
  border-top:2px solid #fff; border-left:2px solid #fff;
  border-right:2px solid #808080; border-bottom:2px solid #808080;
}
.p95-menu .menu:hover .menu-drop{ display:block; }
.p95-menu .menu .menu-drop button,
.p95-menu .menu .menu-drop label{ display:block; width:100%; text-align:left; margin:2px 0; }
.p95-menu .menu .menu-drop hr{ border:none; border-top:1px solid #808080; margin:4px 0; }