/* ============================================================
   Windows 98 Safe Virus Simulator — styles.css
   Photo-real Win98 UI, AAA quality retro — 100% OFFLINE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Win98 palette */
  --win98-desktop:   #008080;
  --win98-silver:    #c0c0c0;
  --win98-dark:      #808080;
  --win98-darker:    #404040;
  --win98-white:     #ffffff;
  --win98-black:     #000000;
  --win98-titlebar1: #000080;
  --win98-titlebar2: #1084d0;
  --win98-blue:      #000080;
  --win98-selection: #000080;
  --win98-text:      #000000;
  --win98-btnface:   #c0c0c0;
  --win98-btnhigh:   #ffffff;
  --win98-btnshadow: #808080;
  --win98-btndark:   #404040;
  --win98-menu:      #c0c0c0;
  --win98-menuhover: #000080;
  --win98-danger:    #800000;

  --font-sys: 'MS Sans Serif', 'Arial', Tahoma, Geneva, sans-serif;
  --font-mono: 'Courier New', Courier, monospace;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: var(--font-sys);
  font-size: 12px;
  cursor: default;
  user-select: none;
}

/* ============================================================
   SCREENS
   ============================================================ */
.screen { position: fixed; inset: 0; }
.screen.active { display: block; }
.screen.hidden { display: none; }

/* ============================================================
   MAIN MENU
   ============================================================ */
.main-menu-bg {
  width: 100%; height: 100%;
  background:
    radial-gradient(ellipse at 30% 40%, #003366 0%, #001a33 50%, #000010 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.main-menu-bg::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0,0,0,0.08) 2px,
      rgba(0,0,0,0.08) 4px
    );
  pointer-events: none;
  z-index: 1;
}
.mm-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 1px,
    rgba(0,255,255,0.015) 1px, rgba(0,255,255,0.015) 2px
  );
  pointer-events: none; z-index: 2;
  animation: scanroll 8s linear infinite;
}
@keyframes scanroll {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}
.mm-center {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  align-items: center; gap: 28px;
  text-align: center;
}
.mm-logo-box {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: rgba(0,0,60,0.6);
  border: 2px solid rgba(0,120,255,0.4);
  border-radius: 4px;
  padding: 24px 40px;
  box-shadow: 0 0 40px rgba(0,80,255,0.25), inset 0 0 30px rgba(0,0,40,0.5);
}
#win98-logo-canvas { display: block; }
.mm-title { color: #fff; }
.mm-title-line1 {
  font-size: 46px; font-weight: bold;
  font-family: var(--font-sys);
  letter-spacing: -1px;
  text-shadow: 2px 2px 0 #000080, 0 0 20px rgba(0,160,255,0.6);
}
.mm-98 {
  color: #ffa500;
  font-size: 52px;
  text-shadow: 2px 2px 0 #804000, 0 0 15px rgba(255,160,0,0.5);
}
.mm-title-line2 {
  font-size: 18px; letter-spacing: 4px;
  color: #80cfff;
  text-shadow: 0 0 10px #0088ff;
  margin-top: 2px;
}
.mm-title-sub {
  font-size: 11px; color: #668;
  margin-top: 8px;
  letter-spacing: 1px;
}
.mm-buttons {
  display: flex; flex-direction: column;
  gap: 8px; width: 300px;
}
.mm-btn {
  width: 100%;
  padding: 10px 18px;
  font-family: var(--font-sys);
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(180deg, #1a3a6a 0%, #0a1e40 100%);
  border: 2px solid #4488cc;
  border-radius: 2px;
  cursor: pointer;
  text-align: left;
  letter-spacing: 1px;
  transition: background 0.1s, border-color 0.1s;
  display: flex; align-items: center; gap: 10px;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.mm-btn:hover {
  background: linear-gradient(180deg, #2255aa 0%, #112266 100%);
  border-color: #88ccff;
  box-shadow: 0 0 12px rgba(100,180,255,0.4);
}
.mm-btn:active {
  background: linear-gradient(180deg, #0a1e40 0%, #1a3a6a 100%);
}
.mm-btn-danger {
  background: linear-gradient(180deg, #5a1a1a 0%, #2a0808 100%);
  border-color: #aa4444;
}
.mm-btn-danger:hover {
  background: linear-gradient(180deg, #882222 0%, #440a0a 100%);
  border-color: #ff8888;
  box-shadow: 0 0 12px rgba(255,100,100,0.4);
}
.mm-btn-icon { font-size: 16px; width: 20px; text-align: center; }
.mm-footer {
  color: #445; font-size: 10px; letter-spacing: 1px;
}

/* ============================================================
   WIN98 MODAL (for howtoplay / credits)
   ============================================================ */
.win98-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.win98-modal.hidden { display: none; }

/* ============================================================
   GAME SCREEN — DESKTOP
   ============================================================ */
#game-screen {
  background: var(--win98-desktop);
  overflow: hidden;
}
#win98-desktop {
  position: absolute;
  inset: 0 0 28px 0;
  background: var(--win98-desktop);
  overflow: hidden;
}
#fx-canvas {
  position: absolute;
  inset: 0 0 28px 0;
  pointer-events: none;
  z-index: 500;
  width: 100%; height: calc(100% - 28px);
}

/* ============================================================
   WIN98 TASKBAR
   ============================================================ */
#win98-taskbar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 28px;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  display: flex;
  align-items: center;
  padding: 0 2px;
  gap: 2px;
  z-index: 1000;
  box-shadow: inset 0 1px 0 #ffffff;
}
#start-btn {
  height: 22px;
  padding: 0 8px 0 4px;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
  cursor: pointer;
  font-family: var(--font-sys);
  font-size: 12px;
  font-weight: bold;
  display: flex; align-items: center; gap: 3px;
  letter-spacing: 0.5px;
}
#start-btn:active,
#start-btn.active {
  border-top: 2px solid var(--win98-btndark);
  border-left: 2px solid var(--win98-btndark);
  border-bottom: 2px solid var(--win98-btnhigh);
  border-right: 2px solid var(--win98-btnhigh);
  padding: 1px 7px 0 5px;
}
.start-logo {
  width: 16px; height: 16px;
  background:
    linear-gradient(135deg, #ff0000 25%, transparent 25%),
    linear-gradient(225deg, #00ff00 25%, transparent 25%),
    linear-gradient(45deg,  #0000ff 25%, transparent 25%),
    linear-gradient(315deg, #ffff00 25%, transparent 25%);
  background-size: 8px 8px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  display: inline-block;
}
#taskbar-quick-launch {
  display: flex; align-items: center;
  padding: 0 2px;
  border-left: 1px solid var(--win98-btnshadow);
  border-right: 1px solid var(--win98-btnshadow);
  height: 22px; gap: 2px;
}
.tq-btn {
  width: 20px; height: 20px;
  background: none; border: none;
  cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.tq-btn:hover { background: rgba(255,255,255,0.3); }
#taskbar-windows {
  flex: 1;
  display: flex; align-items: center;
  gap: 2px; height: 100%;
  overflow: hidden;
}
.taskbar-window-btn {
  height: 22px;
  min-width: 100px; max-width: 160px;
  padding: 0 8px;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
  cursor: pointer;
  font-family: var(--font-sys);
  font-size: 11px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex; align-items: center; gap: 4px;
}
.taskbar-window-btn.active {
  border-top: 2px solid var(--win98-btndark);
  border-left: 2px solid var(--win98-btndark);
  border-bottom: 2px solid var(--win98-btnhigh);
  border-right: 2px solid var(--win98-btnhigh);
  background: var(--win98-silver);
}
.taskbar-window-btn:hover { background: #d0d0d0; }
#taskbar-tray {
  display: flex; align-items: center;
  gap: 6px; padding: 0 6px;
  border-left: 2px solid var(--win98-btnshadow);
  border-top: 1px solid var(--win98-btnhigh);
  height: 22px;
  font-size: 12px;
  min-width: 80px;
  justify-content: flex-end;
}
#tray-clock { font-family: var(--font-sys); font-size: 12px; }
#tray-volume { font-size: 14px; cursor: pointer; }

/* ============================================================
   START MENU
   ============================================================ */
#start-menu {
  position: absolute;
  bottom: 28px; left: 0;
  width: 200px;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-right: 2px solid var(--win98-btndark);
  border-bottom: 2px solid var(--win98-btndark);
  z-index: 2000;
  display: flex;
}
#start-menu.hidden { display: none; }
.start-menu-sidebar {
  width: 24px;
  background: linear-gradient(0deg, #000080, #1084d0);
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  color: #fff;
  font-weight: bold;
  font-size: 13px;
  padding: 4px 4px;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  flex-shrink: 0;
}
.start-menu-items {
  flex: 1;
  display: flex; flex-direction: column;
  padding: 2px 0;
}
.sm-item {
  padding: 4px 8px;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
  font-family: var(--font-sys);
  font-size: 13px;
  position: relative;
}
.sm-item:hover {
  background: var(--win98-selection);
  color: #fff;
}
.sm-item .sm-icon { font-size: 16px; width: 20px; flex-shrink: 0; }
.sm-item .sm-arrow { margin-left: auto; font-size: 10px; }
.sm-separator {
  height: 1px;
  background: var(--win98-btnshadow);
  margin: 2px 4px;
  border-top: 1px solid var(--win98-btnhigh);
}
/* submenu */
.sm-submenu {
  display: none;
  position: absolute;
  left: 100%; top: 0;
  width: 180px;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-right: 2px solid var(--win98-btndark);
  border-bottom: 2px solid var(--win98-btndark);
  z-index: 2001;
}
.sm-item:hover > .sm-submenu { display: block; }
.sm-submenu .sm-item { padding: 4px 8px; font-size: 12px; }

/* ============================================================
   WIN98 WINDOWS (base)
   ============================================================ */
.win98-window {
  position: absolute;
  min-width: 200px; min-height: 80px;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
  box-shadow: 2px 2px 0 var(--win98-darker);
  z-index: 100;
  display: flex; flex-direction: column;
}
.win98-window.hidden { display: none; }
.win98-window.minimized { display: none; }
.win98-titlebar {
  height: 18px;
  background: linear-gradient(90deg, var(--win98-titlebar1) 0%, var(--win98-titlebar2) 100%);
  display: flex; align-items: center;
  padding: 0 2px;
  gap: 4px;
  flex-shrink: 0;
  cursor: move;
  -webkit-user-select: none;
}
.win98-titlebar-icon { font-size: 12px; flex-shrink: 0; }
.win98-titlebar-text {
  flex: 1; color: #fff;
  font-family: var(--font-sys);
  font-size: 11px; font-weight: bold;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
}
.win98-titlebar-btns {
  display: flex; gap: 2px; flex-shrink: 0;
}
.win98-titlebar-btns button {
  width: 16px; height: 14px;
  background: var(--win98-silver);
  border-top: 1px solid var(--win98-btnhigh);
  border-left: 1px solid var(--win98-btnhigh);
  border-bottom: 1px solid var(--win98-btndark);
  border-right: 1px solid var(--win98-btndark);
  font-size: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sys);
  padding: 0;
}
.win98-titlebar-btns button:active {
  border-top: 1px solid var(--win98-btndark);
  border-left: 1px solid var(--win98-btndark);
  border-bottom: 1px solid var(--win98-btnhigh);
  border-right: 1px solid var(--win98-btnhigh);
}
.win98-btn-minimize { font-weight: bold; }
.win98-btn-maximize { font-weight: bold; }
.win98-btn-close { background: var(--win98-silver) !important; }
.win98-btn-close:hover { background: #cc0000 !important; color: #fff; }

.win98-window-body {
  flex: 1;
  background: var(--win98-silver);
  overflow: auto;
  position: relative;
}
.win98-window-menubar {
  background: var(--win98-silver);
  border-bottom: 1px solid var(--win98-btnshadow);
  padding: 2px 4px;
  display: flex; gap: 4px;
  flex-shrink: 0;
}
.win98-menubar-item {
  padding: 2px 6px;
  font-family: var(--font-sys);
  font-size: 12px;
  cursor: pointer;
  border: 1px solid transparent;
}
.win98-menubar-item:hover {
  background: var(--win98-selection);
  color: #fff;
  border: 1px solid var(--win98-selection);
}

/* ============================================================
   WIN98 PUSH BUTTON
   ============================================================ */
.win98-push-btn {
  min-width: 75px; height: 23px;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
  font-family: var(--font-sys);
  font-size: 12px;
  cursor: pointer;
  padding: 0 16px;
  outline: 1px dotted transparent;
}
.win98-push-btn:focus { outline: 1px dotted var(--win98-black); outline-offset: -4px; }
.win98-push-btn:active {
  border-top: 2px solid var(--win98-btndark);
  border-left: 2px solid var(--win98-btndark);
  border-bottom: 2px solid var(--win98-btnhigh);
  border-right: 2px solid var(--win98-btnhigh);
  padding-top: 1px; padding-left: 17px;
}
.win98-push-btn:hover { background: #d4d0c8; }
.win98-push-btn.default {
  outline: 2px solid var(--win98-black);
  outline-offset: -4px;
}

/* ============================================================
   DESKTOP ICONS
   ============================================================ */
.desktop-icon {
  position: absolute;
  width: 72px;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
  padding: 4px 4px;
  border: 1px solid transparent;
}
.desktop-icon:hover { background: rgba(0,0,128,0.2); border-color: rgba(0,0,128,0.4); }
.desktop-icon.selected {
  background: rgba(0,0,128,0.4);
  border-color: rgba(0,0,128,0.6);
}
.desktop-icon-img {
  width: 32px; height: 32px;
  image-rendering: pixelated;
  flex-shrink: 0;
}
.desktop-icon-label {
  font-family: var(--font-sys);
  font-size: 11px;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  text-shadow: 1px 1px 2px #000, -1px -1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000;
  word-break: break-word;
  width: 100%;
}

/* ============================================================
   VIRUS LAB WINDOW
   ============================================================ */
#virus-lab-window {
  width: 720px;
  max-height: 75vh;
  z-index: 200;
}
.virus-lab-body {
  display: flex; flex-direction: column;
  height: 500px;
}
.virus-lab-toolbar {
  background: var(--win98-silver);
  border-bottom: 1px solid var(--win98-btnshadow);
  padding: 4px 6px;
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.virus-lab-toolbar input[type=text] {
  flex: 1;
  height: 20px;
  border-top: 1px solid var(--win98-btnshadow);
  border-left: 1px solid var(--win98-btnshadow);
  border-bottom: 1px solid var(--win98-btnhigh);
  border-right: 1px solid var(--win98-btnhigh);
  padding: 0 4px;
  font-family: var(--font-sys);
  font-size: 12px;
  background: #fff;
}
.virus-list-area {
  flex: 1; overflow-y: auto;
  background: #fff;
  border-top: 2px solid var(--win98-btnshadow);
  border-left: 2px solid var(--win98-btnshadow);
  border-bottom: 2px solid var(--win98-btnhigh);
  border-right: 2px solid var(--win98-btnhigh);
  margin: 4px 6px 0 6px;
}
.virus-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  padding: 4px;
}
.virus-card {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 6px 8px;
  cursor: pointer;
  display: flex; gap: 8px;
  align-items: flex-start;
  transition: background 0.1s;
}
.virus-card:hover { background: #e8e8ff; border-color: #8888cc; }
.virus-card.active-virus { background: #ffe0e0; border-color: #cc4444; }
.virus-card-icon { font-size: 22px; flex-shrink: 0; width: 28px; text-align: center; }
.virus-card-info { flex: 1; }
.virus-card-name { font-weight: bold; font-size: 12px; }
.virus-card-desc { font-size: 10px; color: #555; margin-top: 1px; line-height: 1.3; }
.virus-card-meta {
  display: flex; gap: 6px; margin-top: 3px; align-items: center;
}
.virus-danger {
  font-size: 9px; padding: 1px 5px;
  border-radius: 2px;
  font-weight: bold;
}
.virus-danger.low    { background: #88cc88; color: #004400; }
.virus-danger.medium { background: #ccaa44; color: #443300; }
.virus-danger.high   { background: #cc4444; color: #fff; }
.virus-danger.ultra  { background: #000; color: #ff0000; border: 1px solid #ff0000; }
.virus-danger.memz   { background: #ff00ff; color: #fff; animation: dangerpulse 0.5s infinite; }
@keyframes dangerpulse { 0%,100%{opacity:1;} 50%{opacity:0.5;} }
.virus-card-btn {
  font-size: 10px; padding: 2px 6px;
  background: var(--win98-silver);
  border-top: 1px solid var(--win98-btnhigh);
  border-left: 1px solid var(--win98-btnhigh);
  border-bottom: 1px solid var(--win98-btndark);
  border-right: 1px solid var(--win98-btndark);
  cursor: pointer; white-space: nowrap;
}
.virus-card-btn:hover { background: #d4d0c8; }
.virus-card-btn.stop-btn {
  background: #ffcccc;
  border-color: #cc4444;
}
.virus-lab-statusbar {
  background: var(--win98-silver);
  border-top: 1px solid var(--win98-btnshadow);
  padding: 2px 8px;
  display: flex; gap: 8px;
  font-size: 11px;
  flex-shrink: 0;
}
.vlab-status-panel {
  border-top: 1px solid var(--win98-btnshadow);
  border-left: 1px solid var(--win98-btnshadow);
  border-bottom: 1px solid var(--win98-btnhigh);
  border-right: 1px solid var(--win98-btnhigh);
  padding: 1px 8px;
  flex: 1;
}

/* ============================================================
   HOW TO PLAY CONTENT
   ============================================================ */
.htp-content ol { padding-left: 20px; }
.htp-content li { margin-bottom: 6px; line-height: 1.5; }
.htp-warn {
  background: #ffffc0;
  border: 1px solid #cccc00;
  padding: 6px 10px;
  margin-top: 10px;
  font-size: 11px;
}

/* ============================================================
   FAKE WINDOWS ON DESKTOP
   ============================================================ */
.fake-window {
  position: absolute;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
  z-index: 100;
  box-shadow: 2px 2px 0 var(--win98-darker);
  min-width: 140px; min-height: 60px;
}
.fake-window .win98-titlebar { cursor: move; }
.fake-window .win98-window-body {
  padding: 8px;
  font-size: 12px;
  font-family: var(--font-sys);
}
.fake-window-icon { font-size: 28px; text-align: center; display: block; margin: 4px auto; }

/* ============================================================
   BSOD OVERLAY
   ============================================================ */
#bsod-overlay {
  display: none;
  position: fixed; inset: 0;
  background: #0000aa;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  z-index: 9990;
  padding: 40px 60px;
  white-space: pre;
  line-height: 1.6;
}
#bsod-overlay.active { display: block; }
.bsod-title {
  background: #aaaaaa; color: #0000aa;
  display: inline-block;
  padding: 2px 8px; margin-bottom: 16px;
  font-weight: bold;
}

/* ============================================================
   VIRUS EFFECT OVERLAYS
   ============================================================ */
#virus-overlay-layer {
  position: fixed; inset: 0 0 28px 0;
  pointer-events: none;
  z-index: 400;
  overflow: hidden;
}
.virus-popup {
  position: absolute;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
  padding: 6px;
  z-index: 401;
  pointer-events: all;
  min-width: 120px;
  font-size: 11px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.virus-popup .win98-titlebar { height: 16px; font-size: 10px; }
.virus-popup-msg { padding: 4px 6px; text-align: center; }

/* ============================================================
   GLITCH EFFECTS
   ============================================================ */
.glitch-text {
  animation: glitch 0.2s infinite;
}
@keyframes glitch {
  0%   { transform: translate(0,0);   filter: none; }
  20%  { transform: translate(-2px,1px); filter: hue-rotate(90deg); }
  40%  { transform: translate(2px,-1px); filter: saturate(200%); }
  60%  { transform: translate(-1px,2px); filter: invert(10%); }
  80%  { transform: translate(1px,-2px); filter: hue-rotate(180deg); }
  100% { transform: translate(0,0);   filter: none; }
}
.screen-shake {
  animation: shake 0.1s infinite;
}
@keyframes shake {
  0%,100% { transform: translate(0,0); }
  25%  { transform: translate(-3px,2px); }
  50%  { transform: translate(3px,-2px); }
  75%  { transform: translate(-2px,-3px); }
}
.invert-colors { filter: invert(1); }
.hue-cycle { animation: huecycle 0.5s linear infinite; }
@keyframes huecycle { from{filter:hue-rotate(0deg)} to{filter:hue-rotate(360deg)} }

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.win98-progress {
  height: 16px;
  background: #fff;
  border-top: 1px solid var(--win98-btnshadow);
  border-left: 1px solid var(--win98-btnshadow);
  border-bottom: 1px solid var(--win98-btnhigh);
  border-right: 1px solid var(--win98-btnhigh);
  overflow: hidden;
}
.win98-progress-bar {
  height: 100%;
  background: var(--win98-selection);
  width: 0%;
  transition: width 0.3s;
}

/* ============================================================
   NOTEPAD
   ============================================================ */
.notepad-body {
  background: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px;
  white-space: pre-wrap;
  line-height: 1.4;
}

/* ============================================================
   SCROLLBARS (Win98 style)
   ============================================================ */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: var(--win98-silver); }
::-webkit-scrollbar-thumb {
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
}
::-webkit-scrollbar-button {
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
  display: block; height: 16px; width: 16px;
}

/* ============================================================
   VIRUS RAIN / OVERLAY EFFECTS
   ============================================================ */
.matrix-overlay {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 450;
  background: rgba(0,0,0,0.7);
  font-family: var(--font-mono);
  font-size: 14px;
  color: #00ff00;
  overflow: hidden;
}
.matrix-col {
  position: absolute; top: 0;
  display: flex; flex-direction: column;
  animation: matfall linear infinite;
}
@keyframes matfall {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100vh); }
}
.pixel-corrupt {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 445;
  animation: pixcorrupt 0.05s steps(1) infinite;
}
@keyframes pixcorrupt {
  0%  { background-position: 0 0; }
  33% { background-position: 60px 40px; }
  66% { background-position: -30px 80px; }
  100%{ background-position: 20px -60px; }
}

/* ============================================================
   CREDITS SCROLL
   ============================================================ */
.credits-scroll { max-height: 300px; overflow-y: auto; }
.credits-logo { font-size: 48px; }

/* ============================================================
   MISC
   ============================================================ */
.hidden { display: none !important; }
.win98-separator {
  height: 0;
  border-top: 1px solid var(--win98-btnshadow);
  border-bottom: 1px solid var(--win98-btnhigh);
  margin: 4px 0;
}
.win98-inset-box {
  border-top: 2px solid var(--win98-btnshadow);
  border-left: 2px solid var(--win98-btnshadow);
  border-bottom: 2px solid var(--win98-btnhigh);
  border-right: 2px solid var(--win98-btnhigh);
  background: #fff;
  padding: 4px;
}
.win98-outset-box {
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btnshadow);
  border-right: 2px solid var(--win98-btnshadow);
  padding: 4px;
}

/* Loading screen */
#boot-screen {
  position: fixed; inset: 0;
  background: #000;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 9998;
  gap: 16px;
}
#boot-screen.hidden { display: none; }
.boot-bar-outer {
  width: 300px; height: 20px;
  border: 2px solid #808080;
  background: #000;
  overflow: hidden;
}
.boot-bar-inner {
  height: 100%;
  background: linear-gradient(90deg, #0000c8, #0040ff);
  width: 0%;
  transition: width 0.2s;
}
.boot-text { color: #a0a0a0; font-size: 12px; }

/* Drag handle indicator */
.draggable > .win98-titlebar { cursor: move; }

/* Message box */
.win98-msgbox {
  position: fixed;
  width: 320px;
  background: var(--win98-silver);
  border-top: 2px solid var(--win98-btnhigh);
  border-left: 2px solid var(--win98-btnhigh);
  border-bottom: 2px solid var(--win98-btndark);
  border-right: 2px solid var(--win98-btndark);
  z-index: 600;
  box-shadow: 4px 4px 0 var(--win98-darker);
  left: 50%; top: 30%;
  transform: translate(-50%, -30%);
}
.win98-msgbox-body {
  display: flex; gap: 16px;
  padding: 12px 16px;
  align-items: flex-start;
}
.win98-msgbox-icon { font-size: 32px; flex-shrink: 0; }
.win98-msgbox-text { font-size: 12px; line-height: 1.5; }
.win98-msgbox-btns {
  display: flex; justify-content: center; gap: 8px;
  padding: 8px;
  border-top: 1px solid var(--win98-btnshadow);
}

/* Active viruses indicator */
#active-virus-count {
  font-size: 11px;
  color: #cc0000;
  font-weight: bold;
  padding: 0 6px;
}

/* Tooltip */
.win98-tooltip {
  position: fixed;
  background: #ffffcc;
  border: 1px solid #000;
  padding: 2px 6px;
  font-size: 11px;
  z-index: 9999;
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   WIN98 DESKTOP ICON HOVER (used in fake windows)
   ============================================================ */
.desktop-icon-hover:hover {
  background: rgba(0,0,128,0.15);
}

/* ============================================================
   NYAN CAT ANIMATION
   ============================================================ */
@keyframes nyanfly {
  0%   { content: '🐱'; transform: translateX(0); }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

/* ============================================================
   EYE FADE IN
   ============================================================ */
@keyframes fadeeyein {
  0%   { opacity:0; transform:scale(0.5); }
  20%  { opacity:1; transform:scale(1.2); }
  80%  { opacity:0.8; transform:scale(1); }
  100% { opacity:0; }
}

/* ============================================================
   DRUNK CURSOR CSS
   ============================================================ */
.drunk-cursor-mode * { cursor: none !important; }

/* ============================================================
   WIN98 WINDOW — full resizable + proper overflow
   ============================================================ */
.win98-window.resizable { resize: both; overflow: auto; }

/* Virus overlay layer sits above desktop but below taskbar */
#virus-overlay-layer {
  position: absolute;
  inset: 0 0 0 0;
  pointer-events: none;
  z-index: 400;
  overflow: hidden;
}

/* IE progress animation */
@keyframes ieprog {
  0%   { width: 0%; }
  50%  { width: 80%; }
  100% { width: 0%; }
}

/* Boot screen fully covers everything */
#boot-screen {
  z-index: 99999 !important;
}

/* Active virus count tray indicator */
#active-virus-count {
  font-size: 11px;
  color: #cc0000;
  font-weight: bold;
  padding: 0 6px;
  border-left: 1px solid #888;
}

/* Message box draggable fix */
.win98-msgbox {
  cursor: default;
}

/* Virus lab window positioning */
#virus-lab-window {
  position: absolute;
}

/* Scrollable virus list */
.virus-list-area {
  overflow-y: scroll;
}

/* Win98 2-tone gradient desktop wallpaper variant */
#win98-desktop.wallpaper-clouds {
  background:
    radial-gradient(ellipse at 20% 30%, #87ceeb 0%, #e0f0ff 40%, #008080 100%);
}