/* ═══════════════════════════════════════════════════════
   WINDOWS 95 PORTFOLIO — PRATISHTHA SHARMA
   style.css
═══════════════════════════════════════════════════════ */

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; font-family: 'Arial', sans-serif; font-size: 12px; }

/* ─── Win95 colour vars ─── */
:root {
  --w95-face:    #c0c0c0;
  --w95-light:   #ffffff;
  --w95-dark:    #808080;
  --w95-darker:  #404040;
  --w95-black:   #000000;
  --w95-blue:    #000080;
  --w95-hiblue:  #1084d0;
  --w95-hitext:  #ffffff;
  --w95-btnhi:   #dfdfdf;
  --w95-btnshadow: #808080;
  --w95-title-act:   linear-gradient(90deg,#000080,#1084d0);
  --w95-title-inact: linear-gradient(90deg,#808080,#b0b0b0);
}

/* ─── Win95 button border (raised) ─── */
.w95-raised {
  border-top:    2px solid var(--w95-light);
  border-left:   2px solid var(--w95-light);
  border-right:  2px solid var(--w95-dark);
  border-bottom: 2px solid var(--w95-dark);
  background: var(--w95-face);
}

/* ─── Win95 sunken border ─── */
.w95-sunken {
  border-top:    2px solid var(--w95-dark);
  border-left:   2px solid var(--w95-dark);
  border-right:  2px solid var(--w95-light);
  border-bottom: 2px solid var(--w95-light);
  background: var(--w95-light);
}

/* ══════════════════════════════════════════════════════
   BOOT SCREEN
══════════════════════════════════════════════════════ */
#boot-screen {
  position: fixed; inset: 0; background: #000;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.boot-inner { text-align: center; color: #c0c0c0; }
.boot-logo-row { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 24px; }

.win95-flag {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  width: 52px; height: 52px;
}
.win95-flag div { border-radius: 1px; }
.flag-r { background: #e63946; }
.flag-g { background: #2dc653; }
.flag-b { background: #2196f3; }
.flag-y { background: #ffd700; }

.boot-brand { text-align: left; }
.boot-title { font-size: 13px; color: #aaa; letter-spacing: 2px; }
.boot-title span { font-size: 9px; }
.boot-os { font-size: 36px; font-weight: bold; color: #c0c0c0; letter-spacing: -1px; line-height: 1; }
.boot-95 { color: #2196f3; }

.boot-hr { height: 1px; background: #444; margin: 16px 0; }

.boot-progress-wrap {
  width: 280px; height: 20px; margin: 0 auto 12px;
  border-top: 2px solid #404040; border-left: 2px solid #404040;
  border-right: 2px solid #808080; border-bottom: 2px solid #808080;
  background: #000; padding: 3px;
}
.boot-progress-bar {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, #0000c0, #0000c0 8px, #000088 8px, #000088 12px);
  transition: width 0.3s;
}
.boot-msg { font-size: 11px; color: #888; margin-bottom: 8px; }
.boot-copy { font-size: 9px; color: #555; }

/* ══════════════════════════════════════════════════════
   DESKTOP
══════════════════════════════════════════════════════ */
#desktop { position: fixed; inset: 0; }

#wallpaper {
  position: absolute; inset: 0;
  background-image: url('wallpaper.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ─── Desktop Icons ─── */
.desktop-icons {
  position: absolute; top: 12px; left: 12px;
  display: flex; flex-direction: column; gap: 12px;
  z-index: 10;
}
.dicon {
  display: flex; flex-direction: column; align-items: center;
  width: 72px; padding: 4px; border-radius: 0; cursor: pointer;
  border: 1px solid transparent;
}
.dicon:hover { background: rgba(0,0,128,0.35); border: 1px dotted #fff; }
.dicon-img { font-size: 28px; margin-bottom: 2px; filter: drop-shadow(1px 1px 0 #000); }
.dicon-lbl {
  color: #fff; font-size: 11px; text-align: center;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
  line-height: 1.2; word-break: break-word; max-width: 70px;
}
.dicon.selected { background: rgba(0,0,128,0.6); border: 1px dotted #fff; }

/* ═════════════════════════════════════════════════════
   WINDOWS
═════════════════════════════════════════════════════ */
#win-layer { position: absolute; inset: 0; bottom: 30px; z-index: 100; pointer-events: none; }

.w95-window {
  position: absolute; min-width: 300px; min-height: 180px;
  background: var(--w95-face);
  border-top:    2px solid var(--w95-light);
  border-left:   2px solid var(--w95-light);
  border-right:  2px solid var(--w95-dark);
  border-bottom: 2px solid var(--w95-dark);
  display: flex; flex-direction: column; pointer-events: all;
  box-shadow: 2px 2px 0 var(--w95-black);
}
.w95-window.minimized { display: none; }

/* Title bar */
.w95-titlebar {
  height: 22px; padding: 2px 4px;
  display: flex; align-items: center; gap: 4px;
  cursor: move; user-select: none; flex-shrink: 0;
  background: var(--w95-title-act);
}
.w95-titlebar.inactive { background: var(--w95-title-inact); }
.w95-title-icon { font-size: 14px; }
.w95-title-text { color: #fff; font-weight: bold; font-size: 11px; flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Title bar buttons */
.w95-tbtn {
  width: 16px; height: 14px;
  background: var(--w95-face);
  border-top:    1px solid var(--w95-light);
  border-left:   1px solid var(--w95-light);
  border-right:  1px solid var(--w95-dark);
  border-bottom: 1px solid var(--w95-dark);
  font-size: 9px; font-weight: bold; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: #000; flex-shrink: 0;
}
.w95-tbtn:active {
  border-top:    1px solid var(--w95-dark);
  border-left:   1px solid var(--w95-dark);
  border-right:  1px solid var(--w95-light);
  border-bottom: 1px solid var(--w95-light);
}
.w95-close-btn { font-size: 11px; }

/* Menu bar */
.w95-menubar {
  display: flex; flex-shrink: 0;
  background: var(--w95-face);
  border-bottom: 1px solid var(--w95-dark);
  padding: 1px 2px;
}
.w95-menuitem {
  padding: 2px 8px; font-size: 11px; cursor: default;
  border: 1px solid transparent;
}
.w95-menuitem:hover {
  background: var(--w95-blue); color: #fff;
  border: 1px solid #000;
}

/* Content */
.w95-content {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 8px;
  background: var(--w95-face);
}
.w95-content-white {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 8px;
  background: #fff;
}

/* Status bar */
.w95-statusbar {
  height: 20px; display: flex; align-items: center; gap: 4px;
  padding: 0 4px; flex-shrink: 0;
  border-top: 1px solid var(--w95-dark);
}
.w95-status-panel {
  flex: 1; height: 16px; font-size: 11px;
  display: flex; align-items: center; padding: 0 4px;
  border-top:    1px solid var(--w95-dark);
  border-left:   1px solid var(--w95-dark);
  border-right:  1px solid var(--w95-light);
  border-bottom: 1px solid var(--w95-light);
}

/* ── Win95 content helpers ── */
.w95-section { margin-bottom: 12px; }
.w95-section-title {
  background: var(--w95-blue); color: #fff;
  font-weight: bold; font-size: 11px;
  padding: 2px 6px; margin-bottom: 4px;
}
.w95-field {
  display: flex; gap: 6px; margin-bottom: 3px; font-size: 11px;
}
.w95-label { color: #000080; font-weight: bold; min-width: 100px; }
.w95-val { color: #222; }
.w95-list { list-style: none; padding-left: 4px; }
.w95-list li { padding: 2px 0; font-size: 11px; display: flex; gap: 6px; align-items: flex-start; }
.w95-list li::before { content: '►'; color: #000080; font-size: 8px; flex-shrink: 0; margin-top: 2px; }
.w95-chip {
  display: inline-block; background: #e8e8ff;
  border: 1px solid #9090d0; padding: 1px 6px;
  font-size: 10px; margin: 2px; color: #000080;
}
.w95-badge {
  display: inline-block; background: #000080; color: #fff;
  padding: 2px 8px; font-size: 10px; margin: 2px;
}
.w95-progress-wrap {
  width: 100%; height: 16px; margin: 2px 0;
  border-top:    1px solid #808080;
  border-left:   1px solid #808080;
  border-right:  1px solid #fff;
  border-bottom: 1px solid #fff;
  background: #fff; padding: 2px;
}
.w95-progress {
  height: 100%;
  background: repeating-linear-gradient(90deg,#000080,#000080 6px,#0000c0 6px,#0000c0 8px);
}
.w95-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.w95-table th { background: #000080; color: #fff; padding: 2px 6px; text-align: left; }
.w95-table td { border: 1px solid #c0c0c0; padding: 2px 6px; }
.w95-table tr:nth-child(even) td { background: #f0f0f8; }

/* ══════════════════════════════════════════════════════
   TASKBAR
══════════════════════════════════════════════════════ */
#taskbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
  background: var(--w95-face);
  border-top:    2px solid var(--w95-light);
  display: flex; align-items: center; gap: 2px; padding: 0 2px;
  z-index: 1000;
}
#start-btn {
  height: 22px; padding: 0 8px;
  background: var(--w95-face);
  border-top:    2px solid var(--w95-light);
  border-left:   2px solid var(--w95-light);
  border-right:  2px solid var(--w95-dark);
  border-bottom: 2px solid var(--w95-dark);
  font-weight: bold; font-size: 12px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
}
#start-btn:active {
  border-top:    2px solid var(--w95-dark);
  border-left:   2px solid var(--w95-dark);
  border-right:  2px solid var(--w95-light);
  border-bottom: 2px solid var(--w95-light);
}
.start-flag { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; width: 16px; height: 16px; }
.start-flag div { border-radius: 0; }
.sf-r { background: #e63946; } .sf-g { background: #2dc653; }
.sf-b { background: #2196f3; } .sf-y { background: #ffd700; }

#taskbar-btns { flex: 1; display: flex; gap: 2px; overflow: hidden; }

.tb-btn {
  height: 22px; padding: 0 8px; max-width: 160px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font-size: 11px; cursor: pointer;
  background: var(--w95-face);
  border-top:    2px solid var(--w95-light);
  border-left:   2px solid var(--w95-light);
  border-right:  2px solid var(--w95-dark);
  border-bottom: 2px solid var(--w95-dark);
  display: flex; align-items: center; gap: 4px;
}
.tb-btn.active {
  border-top:    2px solid var(--w95-dark);
  border-left:   2px solid var(--w95-dark);
  border-right:  2px solid var(--w95-light);
  border-bottom: 2px solid var(--w95-light);
  background: #b8b8b8;
}

#tray {
  padding: 0 6px; height: 22px; display: flex; align-items: center;
  border-top:    1px solid var(--w95-dark);
  border-left:   1px solid var(--w95-dark);
  border-right:  1px solid var(--w95-light);
  border-bottom: 1px solid var(--w95-light);
  font-size: 11px;
}
#tray-clock { font-size: 11px; }

/* ══════════════════════════════════════════════════════
   START MENU
══════════════════════════════════════════════════════ */
#start-menu {
  position: absolute; bottom: 30px; left: 0;
  background: var(--w95-face);
  border-top:    2px solid var(--w95-light);
  border-left:   2px solid var(--w95-light);
  border-right:  2px solid var(--w95-dark);
  border-bottom: 2px solid var(--w95-dark);
  display: flex; z-index: 2000;
  box-shadow: 2px 2px 0 #000;
  min-width: 200px;
}
.sm-sidebar {
  width: 22px; background: #000080;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 6px;
}
.sm-sidebar-text {
  color: #c0c0c0; font-size: 14px; font-weight: bold;
  writing-mode: vertical-rl; transform: rotate(180deg);
  letter-spacing: 1px; white-space: nowrap;
}
.sm-items { flex: 1; padding: 2px; }
.sm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px; font-size: 12px; cursor: pointer;
}
.sm-item:hover { background: var(--w95-blue); color: #fff; }
.sm-item span { font-size: 16px; }
.sm-sep { height: 1px; background: var(--w95-dark); margin: 3px 8px; }
.sm-shutdown { color: #800000; font-weight: bold; }
.sm-shutdown:hover { color: #fff; }

/* ══════════════════════════════════════════════════════
   SHUTDOWN
══════════════════════════════════════════════════════ */
#shutdown-screen {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
}
.sd-box {
  background: var(--w95-face);
  border-top:    2px solid var(--w95-light);
  border-left:   2px solid var(--w95-light);
  border-right:  2px solid var(--w95-dark);
  border-bottom: 2px solid var(--w95-dark);
  width: 340px; box-shadow: 2px 2px 0 #000;
}
.sd-title-bar {
  background: var(--w95-title-act); color: #fff;
  padding: 3px 6px; font-weight: bold; font-size: 11px;
  display: flex; align-items: center; gap: 6px;
}
.sd-icon { width: 14px; height: 14px; }
.sd-body {
  display: flex; gap: 12px; padding: 16px;
  align-items: flex-start; border-bottom: 1px solid var(--w95-dark);
}
.sd-logo { font-size: 32px; }
.sd-opts { margin-top: 10px; line-height: 2; font-size: 12px; }
.sd-btns { display: flex; justify-content: flex-end; gap: 6px; padding: 8px; }
.w95-btn {
  min-width: 70px; height: 22px; font-size: 11px; cursor: pointer;
  background: var(--w95-face);
  border-top:    2px solid var(--w95-light);
  border-left:   2px solid var(--w95-light);
  border-right:  2px solid var(--w95-dark);
  border-bottom: 2px solid var(--w95-dark);
}
.w95-btn:active {
  border-top:    2px solid var(--w95-dark);
  border-left:   2px solid var(--w95-dark);
  border-right:  2px solid var(--w95-light);
  border-bottom: 2px solid var(--w95-light);
}

/* ══════════════════════════════════════════════════════
   SCROLLBAR WIN95 STYLE
══════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #c0c0c0; }
::-webkit-scrollbar-thumb {
  background: var(--w95-face);
  border-top:    1px solid #fff;
  border-left:   1px solid #fff;
  border-right:  1px solid #808080;
  border-bottom: 1px solid #808080;
}
::-webkit-scrollbar-button {
  background: var(--w95-face);
  border-top:    1px solid #fff;
  border-left:   1px solid #fff;
  border-right:  1px solid #808080;
  border-bottom: 1px solid #808080;
  height: 16px;
}

/* ══════════════════════════════════════════════════════
   SNAKE GAME
══════════════════════════════════════════════════════ */
#snake-canvas {
  display: block; background: #000; margin: 0 auto;
  border: 2px inset #808080;
}
.snake-controls {
  display: flex; justify-content: center; gap: 6px;
  margin-top: 6px; flex-wrap: wrap;
}
.snake-score {
  text-align: center; font-size: 12px; margin-bottom: 4px;
  background: #000; color: #00ff00; font-family: monospace;
  padding: 2px 8px; display: inline-block;
}

/* ══════════════════════════════════════════════════════
   NOTEPAD
══════════════════════════════════════════════════════ */
.notepad-area {
  width: 100%; height: 100%; min-height: 300px;
  font-family: 'Courier New', monospace; font-size: 12px;
  border: none; outline: none; resize: none;
  background: #fff; padding: 4px;
}

/* ══════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════ */
@keyframes w95-open {
  from { transform: scale(0.05); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.w95-animate-open { animation: w95-open 0.12s ease-out; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .desktop-icons { gap: 8px; }
  .dicon { width: 58px; }
  .dicon-img { font-size: 22px; }
  .dicon-lbl { font-size: 10px; }
}