/* ---- Reset & frame ---- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: #000; overflow: hidden;
  font-family: "Charcoal", "Geneva", "Verdana", sans-serif;
  -webkit-font-smoothing: none;
  user-select: none;
}
body.cursor-hidden, body.cursor-hidden * { cursor: none !important; }

#viewport {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* The fixed 800x400 stage, scaled to fit by app.js */
#stage {
  position: relative;
  width: 800px; height: 400px;
  transform-origin: center center;
  overflow: hidden;
  background: #5a7ba6; /* classic Mac OS blue desktop */
}

/* ---- Desktop icons (Mac OS: drives top-right, Trash bottom-right) ---- */
.icons {
  position: absolute; top: 28px; right: 8px;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.desktop-icon {
  width: 84px; background: transparent; border: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: #000; font-size: 11px; cursor: default; padding: 0;
}
.desktop-icon .icon-glyph { font-size: 30px; line-height: 1; }
.desktop-icon .icon-label {
  text-align: center; padding: 0 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.82); color: #000;
}
.desktop-icon.selected .icon-label { background: #000; color: #fff; }
.desktop-icon.selected .icon-glyph { filter: brightness(0.7); }
.desktop-icon.icon-trash { position: absolute; right: 12px; bottom: 16px; top: auto; }

/* ---- Mac OS menu bar (top) ---- */
.menubar {
  position: absolute; left: 0; right: 0; top: 0; height: 20px;
  background: linear-gradient(#ffffff, #d6d6d6);
  border-bottom: 1px solid #555;
  display: flex; align-items: center; gap: 16px; padding: 0 8px;
  font-size: 12px; color: #000; z-index: 5000;
}
.menu-apple { display: flex; align-items: center; }
.apple-logo { height: 14px; width: auto; display: block; }
.menu-title { cursor: default; }
.menu-bold { font-weight: bold; }
.menu-clock { margin-left: auto; }

/* ---- Generic Win98 window chrome ---- */
.win {
  position: absolute;
  background: #c0c0c0;
  border: 2px outset #fff;
  font-size: 11px;
}
.title-bar {
  height: 18px; padding: 0 3px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: #fff; font-weight: bold; font-size: 11px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: default;
}
/* Platinum push buttons (dialogs) */
.w98-button {
  min-width: 64px; height: 20px; padding: 0 14px;
  background: linear-gradient(#fdfdfd, #cccccc);
  border: 1px solid #808080; border-radius: 10px;
  cursor: default; font-size: 11px; color: #000; font-family: inherit;
}
.w98-button:active { background: linear-gradient(#bdbdbd, #9a9a9a); }
.w98-button.primary { font-weight: bold; box-shadow: 0 0 0 2px #6e88ad; }

/* ---- Winamp shared ---- */
.wa-title {
  background: linear-gradient(180deg, #2a2a3a, #14141c);
  color: #00b3ff; height: 14px; letter-spacing: 1px; font-size: 9px;
  border-bottom: 1px solid #000;
}
.wa-title-text { padding-left: 2px; }
.wa-title-buttons { display: flex; gap: 2px; }
.wa-title-buttons button { width: 9px; height: 9px; border: 1px outset #888; background: #555; }

.winamp-main, .winamp-pl {
  background: #232323;
  border: 2px outset #3a3a3a;
  color: #00ff31;
  font-family: "Courier New", monospace;
  display: flex; flex-direction: column;
  overflow: hidden; /* respect the resized height */
}

/* ---- Winamp main window ---- */
.wa-body { padding: 4px; flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.wa-top { display: flex; gap: 6px; flex: none; }
.wa-lcd {
  background: #000; border: 1px inset #000; padding: 4px 8px;
  display: flex; align-items: center; min-width: 132px;
}
.wa-time {
  font-size: 34px; font-weight: bold; letter-spacing: 3px; line-height: 1;
  color: #00ff31; text-shadow: 0 0 6px #00ff31a0;
}
/* Visualizer grows to fill whatever space the window resize leaves. */
.wa-vis-pane { flex: 1; min-height: 24px; background: #000; border: 1px inset #000; }
.wa-vis { width: 100%; height: 100%; display: block; }

.wa-info {
  flex: 1; background: #000; border: 1px inset #000;
  padding: 3px; overflow: hidden; display: flex; flex-direction: column; justify-content: center;
}
.wa-marquee { overflow: hidden; white-space: nowrap; }
.wa-marquee span {
  display: inline-block; padding-left: 100%;
  color: #00ff31; font-size: 14px;
  animation: marquee 12s linear infinite;
}
@keyframes marquee { to { transform: translateX(-100%); } }
.wa-meta { font-size: 10px; color: #00b347; margin-top: 5px; }
.wa-stereo { color: #00ff31; }

.wa-sliders { display: flex; gap: 10px; padding: 6px 2px 2px; }
.wa-slider-label { font-size: 8px; color: #8ad; display: flex; align-items: center; gap: 4px; flex: 1; }
.wa-slider { flex: 1; height: 10px; accent-color: #00b3ff; }

.wa-controls { display: flex; align-items: center; justify-content: space-between; padding: 2px; }
.wa-transport { display: flex; gap: 2px; }
.wa-btn {
  width: 26px; height: 20px; font-size: 11px;
  background: linear-gradient(180deg, #3a3a3a, #1c1c1c);
  border: 1px outset #555; color: #cfcfcf; cursor: default;
}
.wa-btn:active, .wa-btn.pressed { border-style: inset; color: #00ff31; }
.wa-toggles { display: flex; gap: 3px; }
.wa-toggle {
  width: 24px; height: 16px; font-size: 9px; font-weight: bold;
  background: #1c1c1c; border: 1px outset #555; color: #5a7; cursor: default;
}
.wa-toggle.active { color: #00ff31; background: #003314; border-style: inset; }

/* ---- Playlist window ---- */
.pl-list {
  flex: 1; min-height: 0; overflow-y: auto; background: #000;
  border: 1px inset #000; margin: 3px; font-size: 11px;
}
.pl-row { display: flex; gap: 4px; padding: 1px 4px; white-space: nowrap; cursor: default; }
.pl-row:hover { background: #111; }
.pl-row.playing { background: #00337f; color: #fff; }
.pl-num { color: #00b347; min-width: 20px; text-align: right; }
.pl-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.pl-dur { color: #00b347; }
.pl-empty { padding: 8px; color: #00b347; }
.pl-footer { font-size: 9px; padding: 2px 6px; color: #00b347; }
.pl-note { color: #00ff31; }

/* ---- Resize grip (bottom-right corner) ---- */
.resize-handle {
  position: absolute; right: 0; bottom: 0;
  width: 14px; height: 14px; cursor: nwse-resize; z-index: 10;
  background: repeating-linear-gradient(
    -45deg, transparent 0 2px, #6a6a6a 2px 3px, transparent 3px 5px
  );
}

/* ---- Dialogs ---- */
.dialogs { position: absolute; inset: 0; pointer-events: none; z-index: 9000; }
.dialog-overlay {
  position: absolute; inset: 0; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.25);
}
/* Platinum dialog: grey body, pinstripe title bar with a centred name plate. */
.dialog {
  width: 320px; position: relative;
  background: #dcdcdc; border: 1px solid #555; border-radius: 0;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.dialog .title-bar {
  height: 16px; padding: 0; justify-content: center;
  background: repeating-linear-gradient(#cfcfcf 0 1px, #f2f2f2 1px 2px);
  color: #000; border-bottom: 1px solid #888;
}
.dialog .title-text { background: #dcdcdc; padding: 0 10px; }
.dialog-body { display: flex; gap: 12px; padding: 14px 12px; align-items: flex-start; }
.dialog-icon { width: 32px; height: 32px; flex: none; border-radius: 50%; }
.dialog-icon.info { background: radial-gradient(circle at 40% 35%, #fff 0 10%, #1084d0 11% 100%); }
.dialog-icon.warning { background: radial-gradient(circle at 40% 35%, #fff 0 8%, #ffcc00 9% 100%); }
.dialog-icon.error { background: radial-gradient(circle at 40% 35%, #fff 0 8%, #d8000c 9% 100%); }
.dialog-message { font-size: 12px; line-height: 1.5; color: #000; }
.dialog-buttons { display: flex; justify-content: center; gap: 8px; padding: 0 12px 14px; }

/* ---- Menu bar dropdowns ---- */
.menu-apple, .menu-title { position: relative; display: inline-flex; align-items: center; height: 100%; }
.menu-title.open, .menu-apple.open { background: #000; color: #fff; }
.menu-dropdown {
  position: absolute; top: 100%; left: 0; min-width: 174px;
  background: #dcdcdc; border: 1px solid #555;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35); z-index: 5500;
  padding: 2px 0; color: #000; font-size: 12px; cursor: default;
}
.menu-dropdown .mi {
  display: flex; justify-content: space-between; gap: 28px;
  padding: 2px 14px; white-space: nowrap;
}
.menu-dropdown .mi:not(.disabled):hover { background: #000; color: #fff; }
.menu-dropdown .mi.disabled { color: #9a9a9a; }
.menu-dropdown .mi .sc { color: #888; }
.menu-dropdown .mi:not(.disabled):hover .sc { color: #ccc; }
.menu-dropdown .sep { height: 1px; background: #aaa; margin: 3px 6px; }

/* ---- Mac OS "Platinum" windows (Finder / docs / info / about / calc) ---- */
.mac-window {
  background: #dcdcdc; border: 1px solid #444;
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  display: flex; flex-direction: column; overflow: hidden;
  font-size: 12px; color: #000;
}
.mac-titlebar {
  height: 18px; display: flex; align-items: center; gap: 6px; padding: 0 5px;
  background: repeating-linear-gradient(#cfcfcf 0 1px, #f2f2f2 1px 2px);
  border-bottom: 1px solid #888; cursor: default;
}
.mac-close, .mac-box {
  width: 11px; height: 11px; flex: none; padding: 0;
  background: linear-gradient(#fff, #cbcbcb); border: 1px solid #666; border-radius: 1px;
}
.mac-title {
  flex: 1; text-align: center; font-weight: bold; font-size: 11px;
  background: #dcdcdc; margin: 0 2px; padding: 0 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mac-tb-right { display: flex; gap: 4px; }
.mac-body { flex: 1; min-height: 0; overflow: auto; background: #fff; }

/* Finder icon grid */
.finder-grid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px 10px; padding: 12px; }
.finder-item {
  width: 84px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: default; padding: 3px; border-radius: 3px;
}
.finder-item .fi-glyph { font-size: 30px; line-height: 1; }
.finder-item .fi-label { font-size: 11px; text-align: center; padding: 0 3px; border-radius: 2px; }
.finder-item.selected .fi-label { background: #000; color: #fff; }
.finder-item.selected .fi-glyph { filter: brightness(0.7); }
.finder-empty { padding: 22px; text-align: center; color: #777; font-style: italic; }

/* SimpleText document */
.text-doc-content {
  font-family: "Geneva", "Verdana", sans-serif; font-size: 12px;
  padding: 10px 12px; white-space: pre-wrap; line-height: 1.5; color: #000;
}

/* Get Info */
.mac-body.info { background: #dcdcdc; padding: 12px; }
.info-head { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #aaa; padding-bottom: 8px; margin-bottom: 8px; }
.info-glyph { font-size: 30px; }
.info-name { font-weight: bold; }
.info-rows { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.info-comment { margin-top: 6px; }

/* About This Computer */
.mac-body.about { background: #dcdcdc; padding: 14px; }
.about-top { display: flex; gap: 14px; align-items: center; border-bottom: 1px solid #aaa; padding-bottom: 12px; }
.about-os { font-size: 28px; font-weight: bold; font-style: italic; color: #333; white-space: nowrap; }
.about-version { font-weight: bold; margin-bottom: 4px; }
.about-meta { font-size: 11px; display: flex; flex-direction: column; gap: 2px; }
.about-copy { color: #666; margin-top: 4px; }
.about-bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; font-size: 11px; }
.about-bar { display: flex; align-items: center; gap: 8px; }
.about-bar-name { width: 78px; }
.about-bar-track { flex: 1; height: 10px; background: #bbb; border: 1px solid #888; }
.about-bar-fill { display: block; height: 100%; background: linear-gradient(#9ab, #57c); }
.about-bar-val { width: 54px; text-align: right; }

/* Calculator */
.mac-body.calc { background: #cdcdcd; display: flex; flex-direction: column; padding: 6px; gap: 6px; }
.calc-display {
  background: #0b1a0b; color: #7cfc00; font-family: "Courier New", monospace; font-size: 20px;
  text-align: right; padding: 4px 8px; border: 1px inset #888; min-height: 28px;
}
.calc-keys { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.calc-key {
  background: linear-gradient(#fff, #d2d2d2); border: 1px solid #888; border-radius: 3px;
  font-size: 14px; cursor: default; color: #000;
}
.calc-key:active { background: linear-gradient(#bbb, #999); }
.calc-key.calc-op { background: linear-gradient(#e8eefc, #b9ccea); }
.calc-key.calc-zero { grid-column: span 2; }
.calc-key.calc-equals { grid-row: span 2; }

/* ---- System overlays (Sleep / Shut Down / Restart) ---- */
.sys-overlay { position: absolute; inset: 0; z-index: 9500; display: flex; align-items: center; justify-content: center; }
.sys-sleep { background: #050505; cursor: pointer; }
.sleep-hint { color: #555; font-size: 12px; }
.sys-shutdown { background: #000; color: #fff; }
.shutdown-box { text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.shutdown-msg { font-size: 16px; }
.sys-boot { background: #c9c9c9; color: #000; }
.boot-screen { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.boot-logo { font-size: 38px; font-weight: bold; font-style: italic; color: #333; }
.boot-welcome { font-size: 14px; }
.boot-bar { width: 240px; height: 12px; border: 1px solid #555; background: #fff; }
.boot-fill { height: 100%; width: 0; background: linear-gradient(#9ab, #57c); animation: bootFill 2.6s linear forwards; }
@keyframes bootFill { to { width: 100%; } }
.boot-status { font-size: 11px; color: #444; }

/* ---- CRT effect (tunable: Apple menu ▸ CRT Screen…; js/crt.js sets the vars) ---- */
.crt {
  --crt-scan: 0.07;      /* scanline darkness */
  --crt-vignette: 0.12;  /* corner darkening */
  --crt-flicker: 1;      /* flicker amplitude multiplier */
  --crt-blur: 0.6px;     /* glass backdrop blur */
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 10000; /* above .sys-overlay: the tube sits over the boot screen too */
  /* NB: no opacity/filter/animation on this element — any of those would make
     it a backdrop root and silently disable ::before's backdrop-filter. */
}
.crt.crt-off { display: none; }
/* Scanlines + corner vignette; the backdrop blur softens the pixel-crisp UI
   behind the "glass" like a phosphor mask would. */
.crt::before {
  content: ""; position: absolute; inset: 0;
  backdrop-filter: blur(var(--crt-blur)) saturate(1.08);
  background:
    radial-gradient(ellipse at center, transparent 58%, rgba(0, 0, 0, var(--crt-vignette)) 100%),
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, var(--crt-scan)) 0px, rgba(0, 0, 0, var(--crt-scan)) 1px,
      transparent 1px, transparent 2px
    );
}
/* Brightness flicker: irregular keyframes so the wobble reads as random */
.crt::after {
  content: ""; position: absolute; inset: 0;
  background: #121010;
  opacity: 0;
  animation: crtFlicker 3.1s steps(1, end) infinite;
}
@keyframes crtFlicker {
  0%   { opacity: calc(var(--crt-flicker) * 0.02); }
  7%   { opacity: 0; }
  19%  { opacity: calc(var(--crt-flicker) * 0.035); }
  23%  { opacity: calc(var(--crt-flicker) * 0.01); }
  37%  { opacity: calc(var(--crt-flicker) * 0.04); }
  41%  { opacity: 0; }
  53%  { opacity: calc(var(--crt-flicker) * 0.025); }
  61%  { opacity: calc(var(--crt-flicker) * 0.04); }
  67%  { opacity: calc(var(--crt-flicker) * 0.005); }
  79%  { opacity: calc(var(--crt-flicker) * 0.03); }
  83%  { opacity: 0; }
  91%  { opacity: calc(var(--crt-flicker) * 0.02); }
  100% { opacity: calc(var(--crt-flicker) * 0.02); }
}
@media (prefers-reduced-motion: reduce) {
  .crt::after { animation: none; }
}

/* ---- CRT Screen control panel ---- */
.mac-body.crt-panel {
  background: #dcdcdc; padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 11px;
}
.crt-row { display: flex; align-items: center; gap: 6px; }
.crt-row .crt-label { width: 62px; flex: none; }
.crt-row input[type="range"] { flex: 1; min-width: 0; }
.crt-row .crt-val { width: 38px; flex: none; text-align: right; color: #333; }
.crt-row.crt-buttons { justify-content: flex-end; margin-top: 2px; }