/* =========================================================
   STYLE.CSS - Retro Windows 95 Web Desktop Theme
   ========================================================= */

:root {
  --bg: #c0c0c0;
  --border-light: #dfdfdf;
  --border-dark: #808080;
  --border-darker: #000080;
  --title-bg: #000080;
  --text: #000;
  --wallpaper: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32"><rect fill="%23008080" width="32" height="32"/><path fill="%23c0c0c0" d="M0,0 L16,16 M16,0 L32,16 M0,16 L16,32 M16,16 L32,32" stroke-width="1"/></svg>');
}

html, body {
  height: 100%;
  margin: 0;
  background-color: #000 !important; /* stays black until boot finishes */
  overflow: hidden; /* THIS PREVENTS SCROLLING */
  font-family: "MS Sans Serif", Arial, sans-serif;
  background: var(--wallpaper);
  background-color: #008080;
  background-attachment: fixed;
  color: var(--text);
  font-size: 11px;
  /* Win95-style arrow cursor — full set defined below in the CURSOR SYSTEM block */
  cursor: url('cursors/arrow.png') 0 0, default;
}

.desktop {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
}

/* =========================================================
   WIN95 CURSOR SYSTEM
   Cursors are real Win95/98 .png files in the cursors/ folder.
   ========================================================= */

:root {
  /* Arrow (default) */
  --cur-arrow: url('cursors/arrow.png') 0 0;

  /* Hand / pointer — simplified for cross-browser reliability */
  --cur-pointer: url('cursors/arrow.png') 5 5;

  /* I-beam (text) */
  --cur-text: url('cursors/pointer.png') 10 10;

  /* Move / window drag (four-arrow) */
  --cur-move: url('cursors/move.png') 10 10;

  /* Resize N–S */
  --cur-ns: url('cursors/ns.png') 10 10;

  /* Resize E–W */
  --cur-ew: url('cursors/ew.png') 10 10;

  /* Resize NW–SE */
  --cur-nwse: url('cursors/nwse.png') 10 10;

  /* Resize NE–SW */
  --cur-nesw: url('cursors/nesw.png') 10 10;
}

/* ── Default cursor everywhere ── */
*, *::before, *::after {
  cursor: var(--cur-arrow), default;
}

/* ── Clickable elements → pointer cursor ──
   The key fix: we use a broad selector list and do NOT use inherit
   anywhere, so every element gets an explicit cursor assignment.
   Dynamic content inside windows is caught by tag/attribute selectors. */
a, button, select,
[onclick], [onmousedown], [onmouseenter],
label:has(input[type="checkbox"]), label:has(input[type="radio"]),
input[type="checkbox"], input[type="radio"],
input[type="button"], input[type="submit"], input[type="reset"],
.btn, .icon, .tbtn, .task-btn, .start,
.sm-row, .sm-sub-item, .win95-menu-item, .win95-submenu-item,
.file-item, .tree-li, .mcard, .explorer-menubar span,
.cp-tab, .whack-hole, .game-tile,
summary {
  cursor: var(--cur-pointer), pointer !important;
}

/* ── Text inputs → I-beam ── */
input:not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="range"]),
textarea, [contenteditable] {
  cursor: var(--cur-text), text !important;
}

/* ── Range sliders keep pointer ── */
input[type="range"] {
  cursor: var(--cur-pointer), pointer !important;
}

/* ── Titlebar → move cursor ── */
.titlebar {
  cursor: var(--cur-move), move !important;
}

/* ── Window resize direction classes ── */
.cur-n,  .cur-s  { cursor: var(--cur-ns),   ns-resize !important; }
.cur-e,  .cur-w  { cursor: var(--cur-ew),   ew-resize !important; }
.cur-nw, .cur-se { cursor: var(--cur-nwse), nwse-resize !important; }
.cur-ne, .cur-sw { cursor: var(--cur-nesw), nesw-resize !important; }

body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

input, textarea, [contenteditable] {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.icon img {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain;
}

.desktop .icons .icon {
  transition: left 0.15s ease, top 0.15s ease; 
}

.desktop .icons .icon.dragging {
  transition: none;
  opacity: 0.7;
}

.icons {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100vh - 28px);
  pointer-events: none;
}

.icons .icon {
  pointer-events: auto;
}

/* WINDOWS */
.win {
  position: absolute;
  background: var(--bg);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  display: flex;
  flex-direction: column;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  resize: both;
  overflow: hidden;
  height: max-content;
  pointer-events: all;
}

/* ACTIVE WINDOW — only difference is the blue titlebar (handled by JS) */
.win.active-win {
  pointer-events: auto;
}

.titlebar {
  background: #808080;
  color: #fff;
  padding: 2px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  cursor: var(--cur-move), move;
  user-select: none;
  flex-shrink: 0;
}

.win.active-win .titlebar {
  background: #000080;
}

.title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 4px;
}

.tbtns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}

.tbtn {
  background: var(--bg);
  color: var(--text);
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  width: 16px;
  height: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 10px;
  cursor: var(--cur-pointer), pointer;
  font-weight: bold;
  user-select: none;
  padding: 0;
}

.tbtn:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

.content {
  flex: 1;
  overflow: auto;
  padding: 8px;
  box-sizing: border-box;
  pointer-events: auto;
  background: var(--bg);
}

.taskbar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 28px;
  background: var(--bg);
  border-top: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  padding: 2px 4px;
  z-index: 9999;
  box-sizing: border-box;
}

.start {
  padding: 2px 6px;
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  cursor: var(--cur-pointer), pointer;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  background: var(--bg);
  user-select: none;
}

.start:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

.task-list, .tasks {
  display: flex;
  flex: 1;
  flex-direction: row;
  gap: 4px;
  padding-left: 8px;
  height: 100%;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
}

.tray {
  display: flex;
  align-items: center;
  border-left: 1px solid var(--border-dark);
  padding-left: 4px;
  margin-left: 4px;
  height: 100%;
  flex-shrink: 0;
}

.task-btn {
  background: var(--bg);
  padding: 0 8px;
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  height: 22px;
  min-width: 80px;
  max-width: 150px;
  display: flex;
  align-items: center;
  cursor: var(--cur-pointer), pointer;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  user-select: none;
}

.task-btn:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

.task-btn.active {
  background: #d4d4d4;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  box-shadow: inset 1px 1px 0 var(--border-dark);
  background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, #d4d4d4 1px, #d4d4d4 2px);
}

.clock {
  padding: 2px 6px;
  border: 2px inset var(--border-dark);
  height: 22px;
  display: flex;
  align-items: center;
  margin-left: 4px;
  font-weight: bold;
  font-family: 'Courier New', monospace;
  user-select: none;
  background: var(--bg);
}

.btn {
  background: var(--bg);
  padding: 4px 12px;
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  color: var(--text);
  cursor: var(--cur-pointer), pointer;
  font-family: inherit;
  font-size: 11px;
  user-select: none;
}

.btn:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

.btn:hover {
  background: #dfdfdf;
}

.explorer-window {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  font-size: 11px;
}

.explorer-menubar {
  display: flex;
  gap: 12px;
  padding: 2px 8px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg);
  user-select: none;
}

.explorer-menubar span {
  cursor: var(--cur-pointer), pointer;
  padding: 2px 4px;
}

.explorer-menubar span::first-letter {
  text-decoration: underline;
}

.explorer-menubar span:hover {
  background: #000080;
  color: #fff;
}

.explorer-address {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border-bottom: 1px solid var(--border-dark);
}

.explorer-address select {
  flex: 1;
  font-family: inherit;
  font-size: 11px;
  padding: 2px;
  border: 2px inset var(--border-dark);
}

.explorer-content {
  display: flex;
  flex: 1;
  background: #fff;
  border: 2px inset var(--border-dark);
  overflow: hidden;
}

.explorer-left {
  width: 35%;
  border-right: 2px solid var(--bg);
  padding: 4px;
  overflow-y: auto;
}

.explorer-right {
  flex: 1;
  padding: 4px;
  overflow-y: auto;
}

.explorer-pane-title {
  background: var(--bg);
  font-weight: bold;
  padding: 2px;
  border-bottom: 1px solid var(--border-dark);
  margin-bottom: 4px;
  color: var(--text);
  user-select: none;
}

.explorer-status {
  display: flex;
  justify-content: space-between;
  padding: 2px 4px;
  border: 1px inset var(--border-dark);
  margin-top: 2px;
  background: var(--bg);
  font-size: 10px;
}

.tree-ul {
  list-style-type: none;
  padding-left: 12px;
  margin: 0;
}

.tree-li {
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: var(--cur-pointer), pointer;
  padding: 2px;
  user-select: none;
}

.tree-li:hover {
  background: #000080;
  color: #fff;
}

.tree-active {
  background: #000080;
  color: #fff;
}

.file-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 8px;
}

/* Fix for File Explorer icons */
.file-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 80px;
  cursor: var(--cur-pointer), pointer;
  padding: 3px; /* Reduced by 1px to compensate for the border */
  border: 1px solid transparent; /* THIS PREVENTS THE JITTER */
  user-select: none;
}

.file-item:hover {
  background: #dfdfdf;
  border: 1px solid #000080;
}

.file-item img {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  pointer-events: none;
}

.file-item span {
  font-size: 10px;
  word-wrap: break-word;
  max-width: 80px;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  line-height: 1.3;
}

h2, h3, h4 {
  margin: 8px 0;
}

.muted {
  color: #808080;
  font-style: italic;
}

/* =========================================================
   MOBILE — phones get a proper, usable UI. NOT a "rotate or die" wall.
   Both portrait and landscape work fully.
   ========================================================= */
@media (max-width: 768px) {
  html, body {
    overscroll-behavior: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* kills double-tap zoom but keeps pinch */
  }

  .icons {
    left: 8px;
    top: 8px;
    gap: 12px;
  }
  .icon {
    border: 1px dotted transparent;
    padding: 4px 2px;     /* bigger finger target */
  }
  .icon:hover, .icon:active {
    border: 1px dotted var(--text);
  }
  .icon img {
    width: 32px !important;
    height: 32px !important;
  }
  .icon span {
    font-size: 10px;
  }

  /* Windows take most of the screen on phones */
  .win {
    width: 92vw !important;
    left: 4vw !important;
    max-height: calc(100vh - 60px) !important;
  }

  /* Bigger titlebar buttons for touch */
  .tbtn {
    min-width: 22px !important;
    min-height: 20px !important;
  }

  /* ── Taskbar: keep Start + tray fixed, let task list scroll ── */
  .taskbar {
    height: 32px;
    display: flex;
    align-items: stretch;
    overflow: hidden; /* hide overflow; .tasks handles its own scroll */
  }
  .start {
    flex-shrink: 0;
    padding: 4px 8px !important;
    font-size: 12px;
  }
  .tray {
    flex-shrink: 0;
  }
  /* Tasks: the flexible middle that scrolls horizontally if it overflows.
     min-width:0 is what actually lets flex shrink it below its content. */
  .task-list, .tasks {
    flex: 1 1 0;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .task-list::-webkit-scrollbar, .tasks::-webkit-scrollbar { height: 4px; }
  .task-list::-webkit-scrollbar-thumb, .tasks::-webkit-scrollbar-thumb { background: #808080; }
  .task-btn {
    display: inline-block;
    min-width: 60px;
    max-width: 120px;
    padding: 0 6px;
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
  }
}

/* PORTRAIT phones: stack icons in a column, windows full-width */
@media (max-width: 768px) and (orientation: portrait) {
  .icons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .icon {
    width: 64px;
  }
  .icon img {
    width: 36px !important;
    height: 36px !important;
  }
  .win {
    width: 96vw !important;
    left: 2vw !important;
    max-height: calc(100vh - 50px) !important;
  }
}

/* =========================================================
   BOOT SCREEN
   ========================================================= */
#boot-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #000;
  z-index: 999998;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;                        /* invisible until JS fades it in */
  transition: opacity 1s ease-in-out;
}

#boot-screen img {
  max-width: 80%;
  max-height: 80%;
}

/* =========================================================
   CRT / ANALOG MONITOR EFFECT  — moving scanlines + static
   ========================================================= */

/* Base layer: static fine scanline grid */
.crt-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 10000002;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.07) 2px,
    rgba(0, 0, 0, 0.07) 4px
  );
  animation: crtFlicker 0.14s infinite;
}

/* Rolling bright scan band that scrolls continuously top→bottom */
.crt-overlay::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent      0%,
    transparent      45%,
    rgba(255,255,255,0.018) 50%,
    rgba(255,255,255,0.055) 54%,
    rgba(255,255,255,0.018) 58%,
    transparent      65%,
    transparent      100%
  );
  animation: scanRoll 5s linear infinite;
}

/* Phosphor vignette — darkens corners like a real CRT tube */
.crt-overlay::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    transparent 58%,
    rgba(0,0,0,0.38) 100%
  );
}

@keyframes scanRoll {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes crtFlicker {
  0%   { opacity: 0.93; }
  12%  { opacity: 0.87; }
  25%  { opacity: 0.94; }
  38%  { opacity: 0.88; }
  50%  { opacity: 0.92; }
  63%  { opacity: 0.86; }
  75%  { opacity: 0.93; }
  88%  { opacity: 0.89; }
  100% { opacity: 0.93; }
}