/* =====================================================================
   desktop.css — the OS shell, authentic Windows 98 by default.
   98.css supplies the window/button/field widgets; this file supplies the
   things 98.css doesn't (desktop, taskbar, Start button + menu, login,
   icons, layout) plus content typography. Later eras re-skin in eras.css.

   Bevels follow the real 98 system palette:
     raised  : hi #fff / face #c0c0c0 / shadow #808080 / dark #0a0a0a
     sunken  : the same, inverted
   ===================================================================== */

:root {
  --task-h: 30px;
  --face: #c0c0c0;
  --hi: #ffffff;
  --light: #dfdfdf;
  --shadow: #808080;
  --dark: #0a0a0a;
  --navy: #000080;
  --font: "Pixelated MS Sans Serif", Tahoma, Geneva, sans-serif;
  --read: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 12px;
  overflow: hidden;
  background: #008080;
  -webkit-font-smoothing: none;
  user-select: none;
}
.hidden { display: none !important; }

/* raised / sunken bevel helpers as utility shadows */
:root {
  --raise: inset -1px -1px 0 var(--dark), inset 1px 1px 0 var(--hi),
           inset -2px -2px 0 var(--shadow), inset 2px 2px 0 var(--light);
  --sink:  inset -1px -1px 0 var(--hi), inset 1px 1px 0 var(--dark),
           inset -2px -2px 0 var(--light), inset 2px 2px 0 var(--shadow);
  --field: inset -1px -1px 0 var(--light), inset 1px 1px 0 var(--shadow);
}

/* ---- LOGIN (98 logon dialog on a teal void) ---------------------- */
#boot-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #008080; color: #000;
}
.login-top, .login-bottom, .login-divider, .login-brand { display: none; }
.login-mid { display: flex; }
.login-tile {
  display: flex; align-items: center; gap: 16px; cursor: pointer; color: #000; font: inherit;
  background: var(--face); padding: 20px 26px; border: 0; box-shadow: var(--raise);
}
.login-tile:active { box-shadow: var(--sink); }
.login-pic { width: 56px; height: 56px; display: block; box-shadow: var(--field); background: #fff; }
.login-pic svg { width: 100%; height: 100%; display: block; }
.login-meta { display: flex; flex-direction: column; align-items: flex-start; }
.login-name { font-size: 18px; font-weight: bold; }
.login-hint { font-size: 12px; color: #333; margin-top: 4px; }

/* ---- DESKTOP + ICONS --------------------------------------------- */
#shell { position: fixed; inset: 0; }
#desktop { position: absolute; inset: 0 0 var(--task-h) 0; overflow: hidden; background: #008080; }
#desktop-icons {
  position: absolute; top: 8px; left: 6px; z-index: 2;
  display: flex; flex-direction: column; flex-wrap: wrap; gap: 2px; max-height: calc(100% - 16px);
}
.desk-icon {
  /* reset 98.css's default button look */
  min-width: 0; min-height: 0; border: 1px solid transparent; box-shadow: none;
  width: 84px; padding: 5px 4px; background: transparent; color: #fff; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.desk-img { width: 40px; height: 40px; }
.desk-img svg { width: 100%; height: 100%; image-rendering: pixelated; filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.35)); }
.desk-label {
  font-size: 11px; text-align: center; line-height: 1.25; max-width: 80px; color: #fff;
  text-shadow: 1px 1px 0 #000; padding: 0 2px;
}
.desk-icon:focus { outline: none; }
.desk-icon.selected .desk-img svg { filter: none; }
.desk-icon.selected .desk-label { background: #0a246a; outline: 1px dotted #fff; }

/* ---- WINDOWS (98.css does the chrome; we add layout) ------------- */
.xp-window { position: absolute; display: flex; flex-direction: column; min-width: 220px; }
.xp-window.maximized { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.xp-window .window-body {
  flex: 1; overflow: auto; margin: 3px; background: #fff;
  box-shadow: inset 1px 1px 0 var(--shadow), inset -1px -1px 0 var(--hi), inset 2px 2px 0 var(--dark);
}
.xp-window .wb-inner { padding: 12px 14px; font-family: var(--read); font-size: 13px; color: #000; }
.title-bar-text { display: flex; align-items: center; }
.tb-icon { display: inline-flex; width: 15px; height: 15px; margin-right: 5px; }
.tb-icon svg { width: 100%; height: 100%; image-rendering: pixelated; }
/* inactive window: grey title bar (neither 98.css nor xp.css ship this) */
.title-bar.inactive { background: linear-gradient(90deg, #808080, #b5b5b5); }
.title-bar.inactive .title-bar-text { color: #dfdfdf; }

/* per-window status field (used for the render-count beat) */
.window-status { flex: none; margin: 0 3px 3px; padding: 3px 6px; font-size: 11px; color: #222; box-shadow: var(--field); }

/* ---- TASKBAR ----------------------------------------------------- */
#taskbar {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--task-h); z-index: 9000;
  display: flex; align-items: center; gap: 4px; padding: 2px 3px;
  background: var(--face); border-top: 1px solid var(--hi);
}
#start-btn {
  min-width: 0; min-height: 0; border: 0; height: 23px; padding: 0 7px 0 5px; margin-right: 4px;
  display: flex; align-items: center; gap: 4px; cursor: pointer;
  font-family: var(--font); font-weight: bold; font-size: 13px; color: #000; background: var(--face);
  box-shadow: var(--raise);
}
#start-btn.pressed { box-shadow: var(--sink); padding: 1px 6px 0 6px; }
.start-flag { width: 18px; height: 18px; display: inline-block; }
.start-flag svg { width: 100%; height: 100%; }
.start-text { font-family: var(--font); }

#taskbar-windows { display: flex; gap: 3px; align-items: center; flex: 1; overflow: hidden; padding-left: 2px; }
.task-btn {
  min-width: 0; min-height: 0; border: 0; height: 23px; min-width: 130px; max-width: 160px; padding: 0 7px;
  display: flex; align-items: center; gap: 5px; cursor: pointer; text-align: left; overflow: hidden;
  font-family: var(--font); font-size: 11px; color: #000; background: var(--face); box-shadow: var(--raise);
}
.task-ico { width: 16px; height: 16px; flex: none; display: inline-flex; }
.task-ico svg { width: 100%; height: 100%; image-rendering: pixelated; }
.task-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-btn.active {
  box-shadow: var(--sink); padding: 1px 6px 0 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
}

#tray {
  margin-left: 2px; height: 23px; display: flex; align-items: center; padding: 0 8px; color: #000; font-size: 11px;
  box-shadow: var(--field);
}

/* ---- START MENU (classic 98: navy side-banner + listed items) ---- */
#start-menu {
  position: absolute; left: 3px; bottom: var(--task-h); z-index: 9500; width: 220px;
  background: var(--face); box-shadow: var(--raise); padding: 3px 3px 3px 26px;
}
#start-menu::before {
  content: "muqtaderomari"; position: absolute; left: 3px; top: 3px; bottom: 3px; width: 22px;
  background: linear-gradient(#1a3a8f, #000050); color: #c0c0c0; font-weight: bold; font-size: 14px;
  writing-mode: vertical-rl; transform: rotate(180deg); text-align: right; padding: 6px 3px; letter-spacing: 1px;
}
.sm-header { display: none; }
.sm-cols { display: flex; flex-direction: column; }
.sm-left, .sm-right { display: flex; flex-direction: column; }
.sm-right { border-top: 1px solid var(--shadow); box-shadow: 0 -1px 0 var(--hi); margin-top: 3px; padding-top: 3px; }
.sm-item {
  min-width: 0; min-height: 0; border: 0; box-shadow: none; background: none;
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 5px 8px; cursor: pointer;
  font-family: var(--font); font-size: 12px; text-align: left; color: #000; text-decoration: none;
}
.sm-item:hover { background: var(--navy); color: #fff; }
.sm-ico { width: 22px; height: 22px; flex: none; display: inline-flex; }
.sm-ico svg { width: 100%; height: 100%; image-rendering: pixelated; }
.sm-sep { height: 1px; background: var(--shadow); box-shadow: 0 1px 0 var(--hi); margin: 4px 2px; }
.sm-footer { display: flex; flex-direction: column; border-top: 1px solid var(--shadow); box-shadow: 0 -1px 0 var(--hi); margin-top: 3px; padding-top: 3px; }
.sm-power {
  min-width: 0; min-height: 0; border: 0; box-shadow: none; background: none;
  display: flex; align-items: center; gap: 9px; padding: 5px 8px; cursor: pointer;
  font-family: var(--font); font-size: 12px; color: #000; text-align: left;
}
.sm-power:hover { background: var(--navy); color: #fff; }
.sm-power .sm-ico { width: 18px; height: 18px; }

/* ---- WINDOW CONTENT (readable, era-agnostic) --------------------- */
.doc h1 { font-size: 19px; margin: 0 0 8px; color: var(--navy); }
.doc h2 { font-size: 14px; margin: 15px 0 5px; color: #00007a; border-bottom: 1px solid #b9c0cf; padding-bottom: 2px; }
.doc p { margin: 0 0 9px; line-height: 1.55; }
.doc a { color: #0000c8; }
.doc code { background: #efefef; padding: 1px 4px; font-size: 12px; box-shadow: var(--field); }
.dim { color: #5a5a5a; font-size: 12px; }
.callout { border-left: 3px solid var(--navy); background: #f3f3f7; padding: 9px 13px; margin: 11px 0; font-style: italic; color: #333; }
.callout-img { width: 100%; display: block; margin-bottom: 8px; box-shadow: var(--field); }

.resume-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border-bottom: 2px solid var(--navy); padding-bottom: 8px; margin-bottom: 4px; }
.resume-head h1 { margin: 0; }
.resume .sub { color: #333; font-weight: bold; margin: 3px 0; }
.resume .meta { color: #5a5a5a; font-size: 12px; margin: 0; }
.resume .row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-top: 6px; }
.pdf-btn { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; color: #000; cursor: pointer; font: inherit; padding: 5px 10px; background: var(--face); box-shadow: var(--raise); }
.pdf-btn:active { box-shadow: var(--sink); }
.pdf-ico { width: 16px; height: 16px; display: inline-flex; }
.pdf-ico svg { width: 100%; height: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.chip { background: var(--face); padding: 3px 10px; font-size: 12px; color: #000; box-shadow: var(--raise); }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.thumb { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: var(--field); text-decoration: none; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 7px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.72)); text-shadow: 0 1px 2px #000; }
.thumb:hover img { filter: brightness(1.08); }

.folder-view { display: flex; flex-wrap: wrap; gap: 4px; align-content: flex-start; }
.folder-view.computer { flex-direction: column; }
.group-label { width: 100%; font-weight: bold; color: var(--navy); border-bottom: 1px solid #b9c0cf; padding-bottom: 3px; margin-bottom: 4px; }
.file {
  min-width: 0; min-height: 0; border: 1px solid transparent; box-shadow: none; background: none;
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 88px; padding: 7px 4px;
  cursor: pointer; font: inherit; font-size: 12px; color: #000;
}
.file:hover { background: #e8f0fd; border: 1px dotted #6a8; }
.file-ico { width: 36px; height: 36px; display: inline-flex; }
.file-ico svg { width: 100%; height: 100%; image-rendering: pixelated; }
.folder-view.computer .file { flex-direction: row; width: 100%; justify-content: flex-start; gap: 12px; }
.folder-view.computer .file-ico { width: 26px; height: 26px; }

.contact-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.xp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; text-decoration: none; color: #000; cursor: pointer; font: inherit; font-size: 12px; background: var(--face); box-shadow: var(--raise); }
.xp-btn:active { box-shadow: var(--sink); }

/* ---- SNAKE ------------------------------------------------------- */
.game { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.game-hud { display: flex; justify-content: space-between; width: 300px; font-size: 13px; }
#snake-canvas { background: #0b3d2e; image-rendering: pixelated; touch-action: none; box-shadow: var(--field); }
.game-foot { display: flex; flex-direction: column; align-items: center; gap: 5px; }

/* ---- SHUTDOWN ---------------------------------------------------- */
#shutdown-screen { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; color: #fff; background: #000; }
.shutdown-msg { text-align: center; }
.shutdown-big { font-size: 19px; margin-bottom: 18px; color: #ffb12e; }