/* ═══════════════════════════════════════════════════════════════
   Jesslair Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ─── Fonts ───────────────────────────────────────────────────── */

@font-face {
  font-family: 'Neuropol';
  src: url('../fonts/Neuropol.otf') format('opentype');
}

@font-face {
  font-family: 'Outright';
  src: url('../fonts/Outright.otf') format('opentype');
}

/* ─── Base ────────────────────────────────────────────────────── */

body {
  font-size: 1em;
  margin: 0;
  padding: 0;
  background-color: #0b0b10; /* fallback */
  background-image: url(../images/marble_black.png);
  color: #000000;
  font-family: 'Share Tech Mono', monospace;
}

img {
  max-width: 100%;
  height: auto;
}

audio {
  display: none;
}

/* ─── Layout ──────────────────────────────────────────────────── */

#Header {
  width: 100%;
  background-color: #0b0b10;
  background-image: url(../images/marble_black.png);
  color: #ffffff;
  /* font-family inherited from body */
}

#Content {
  background-color: transparent;
  width: 90%;
  padding: 0;
  margin-right: 5%;
  margin-left: 5%;
}

#Title {
  word-wrap: break-word;
  color: #ffa0f2;
  background-color: #0b0b10;
  background-image: url(../images/marble_black.png);
  padding: 30px 0 24px 0;
}

#GlobalTitle {
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 7rem;
  font-family: 'Outright', sans-serif;
  text-shadow: 0 0 10px #d144a2, 0 0 30px #d45abe, 0 0 60px #c273ed, 0 0 100px #c273ed, 3px 3px 0 rgba(0,0,0,0.5);
  transform: translateZ(0);
}

#GlobalSubtitle {
  width: 100%;
  margin: 6px 0 32px 0;
  font-size: 1.4rem;
  text-align: center;
  font-style: italic;
  font-family: 'Neuropol', sans-serif;
}

.overflow {
  overflow: auto;
}

/* ─── Boxes — base + Win98 raise ─────────────────────────────── */

.Box {
  font-family: 'Share Tech Mono', monospace;
  background-color: #cacaf4;
  color: #000000;
  width: 100%;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0 #000;
}

.BoxTitle {
  text-align: left;
  background: linear-gradient(to right, #4a3570, #6b4fa0);
  color: #ffffff;
  padding: 3px 6px;
  border-bottom: 2px solid #404040;
}

.BoxTitle a,
.BoxTitle a:hover,
.BoxTitle a:visited {
  color: #ffffff;
  text-decoration: none;
}

.BoxTitle-date {
  float: right;
}

.BoxContents {
  background-color: #cacaf4;
  color: #000000;
  width: 100%;
  padding: 16px 10px 10px 10px;
  border-top:    1px solid #404040;
  border-left:   1px solid #404040;
  border-right:  1px solid #c0c0c0;
  border-bottom: 1px solid #c0c0c0;
}

.BoxSideBar {
  width: 175px;
  height: 100%;
  background-color: #080810;
  color: #ffffff;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0 #000;
}

.BoxSideBar table {
  width: 185px;
  height: 100%;
}

.BoxSideBar table th {
  background-color: #080810;
  color: #ffa0f2;
  padding-top: 8px;
}

.BoxSideBar table a,
.BoxSideBar table a:visited,
.BoxContents a,
.BoxContents a:visited {
  color: #ffffff !important;
  text-decoration: underline;
}

.BoxSideBar table a:hover,
.BoxContents a:hover {
  color: #ffa0f2 !important;
}

.BoxSideBarContents {
  height: 100%;
  padding: 5px;
  margin: 0 auto 10px auto;
}

/* ─── Header nav — Win98 raised tabs ─────────────────────────── */

.HeaderNavMenu {
  background-color: transparent;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1;
}

.HeaderNavMenu li {
  display: inline-block;
  margin: 0;
  padding: 5px 10px;
  color: #ffffff;
  background-color: #080810;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: none;
  position: relative;
  top: 2px; /* flush against the box below */
}

.HeaderNavMenu li#active {
  background-color: #3c3773;
  font-weight: bold;
  border-bottom: 2px solid #3c3773; /* matches CommentThread bg — "open" tab illusion */
  z-index: 1;
}

.HeaderNavMenu li a {
  color: #ffffff;
  text-decoration: none;
}

/* ─── Current Year widget — Win98 raise ──────────────────────── */

.CurrentYearWidget,
[id^="CurrentYear-"] {
  width: 175px;
  background-color: #080810;
  color: #ffffff;
  padding: 5px;
}

.CurrentYearWidget .cy-title,
[id^="CurrentYear-"] .cy-title {
  display: block;
  background: linear-gradient(to right, #4a3570, #6b4fa0);
  color: #ffa0f2;
  padding: 5px;
  margin-bottom: 10px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0 #000;
}

.CurrentYearWidget .cy-number,
[id^="CurrentYear-"] .cy-number {
  font-family: 'Outright', sans-serif;
  font-size: 3.5em;
  color: #ffa0f2;
  text-align: center;
  display: block;
  text-shadow: 0 0 10px #d144a2, 0 0 20px #d45abe;
  line-height: 1;
  margin-bottom: 12px;
}

.CurrentYearWidget .cy-months,
[id^="CurrentYear-"] .cy-months {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 0 4px 8px 4px;
}

.CurrentYearWidget .cy-month,
[id^="CurrentYear-"] .cy-month {
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.7em;
  padding: 6px 8px;
  color: #b1b4b3;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0 #000;
  
}

.CurrentYearWidget .cy-month.has-entries,
[id^="CurrentYear-"] .cy-month.has-entries {
  background-color: #3c3773;
  color: #ffa0f2;
  text-decoration: none;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0 #000;
}

.CurrentYearWidget .cy-month.has-entries a,
[id^="CurrentYear-"] .cy-month.has-entries a {
  color: #ffa0f2 !important;
  text-decoration: none;
}

.CurrentYearWidget .cy-month.has-entries a:hover,
[id^="CurrentYear-"] .cy-month.has-entries a:hover {
  color: #ffffff !important;
}

/* ─── Artifact panels — Win98 raise ──────────────────────────── */

.artifact-panel-hidden {
  background-color: #080810;
  padding: 15px;
  margin-top: 20px;
  color: #ffa0f2;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9em;
  display: none;
}

/* ─── Footer ──────────────────────────────────────────────────── */

.footer {
  text-align: center;
  font-size: 14px;
  color: #ffffff;
  margin-top: 50px;
  padding-bottom: 20px;
  font-family: '6809 Chargen', monospace;
  letter-spacing: 1px;
}

.footer a {
  color: #ffffff;
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;
}

/* ─── Entry content ───────────────────────────────────────────── */

.entry-content {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.EntryComments {
  margin-top: 10px;
}

.entry-userpic {
  width: 100px;
  height: 100px;
  margin: 20px auto 6px auto;
}

/* ─── Friends-only overlay ────────────────────────────────────── */

.entry-wrapper.friends-only {
  position: relative;
  isolation: isolate;
}

.entry-wrapper.friends-only::before {
  content: "friends only ✦ leave a comment, get the password";
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  background: rgba(10, 10, 20, 0.78);
  color: #ffa0f2;
  font-style: italic;
  cursor: pointer;
}

.entry-wrapper.friends-only > * {
  filter: blur(8px);
  pointer-events: none;
  user-select: none;
}

.entry-wrapper.friends-unlocked::before {
  display: none;
}

.entry-wrapper.friends-unlocked > * {
  filter: none;
  pointer-events: auto;
  user-select: text;
}

/* ─── Archive entry list ──────────────────────────────────────── */

.entry-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entry-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 6px 0;
  border-bottom: 1px dotted #3c3773;
}

.entry-list li:last-child {
  border-bottom: none;
}

.entry-title {
  color: #ffffff !important;
  flex: 1;
  text-decoration: underline;
}

.entry-title:hover {
  color: #ffa0f2 !important;
  text-decoration: none;
}

/* ─── Comment thread ──────────────────────────────────────────── */

.comment-panel,
.CommentThread {
  background-color: #3c3773;
  padding: 15px 20px;
  width: 80%;
  max-width: 700px;
  box-sizing: border-box;
  margin-top: 10px;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0 #000;
}

.CommentBlock {
  background-color: #dddddd;
  color: #000000;
  margin: 12px 0;
  border: 2px solid #3c3773;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0 #000;
}

.CommentHeader {
  background-color: #5b2b8a;
  color: #ffa0f2;
  padding: 6px 10px;
  font-weight: bold;
  font-family: 'Share Tech Mono', monospace;
}

/* present-day comment header — purple not blue */
.CommentHeader.modern {
  background-color: #121212;
  color: #ffa0f2;
}

.CommentBody {
  padding: 10px 12px;
  font-family: 'Share Tech Mono', monospace;
  font-size: 0.9rem;
}

.CommentBody marquee {
  display: block;
  width: 100%;
  white-space: nowrap;
}

.CommentBlock.reply {
  margin-left: 5%;
}

/* ─── Fade up from blur comment lines (2026) ───────────────────────────── */

.comment-2026-line {
  display: block;
  opacity: 0;
  animation: surface 1s ease forwards;
}

.comment-2026 .comment-2026-line:nth-of-type(1)::before {
  content: '✦ ';
  color: #d000ff;
  animation: sparkle 2s ease-in-out infinite;
}

.comment-2026 .comment-2026-line:nth-of-type(3)::after {
  content: ' ✦';
  color: #d000ff;
  animation: sparkle 2s ease-in-out infinite;
}

.comment-2026 .comment-2026-line:nth-of-type(1) { animation-delay: 0s;   }
.comment-2026 .comment-2026-line:nth-of-type(2) { animation-delay: 1s;   }
.comment-2026 .comment-2026-line:nth-of-type(3) { animation-delay: 2s;   }

@keyframes surface {
  from { opacity: 0; filter: blur(6px); transform: translateY(8px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0);   }
}

/* ─── Comment form ────────────────────────────────────────────── */

.comment-form-wrap {
  margin-top: 12px;
  border-top: 1px dashed #3c3773;
  padding-top: 12px;
}

.comment-form-wrap .form-title {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffa0f2;
  margin-bottom: 10px;
}

.comment-form-wrap form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.comment-form-wrap label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 2px;
  display: block;
}

.comment-form-wrap input[type="text"],
.comment-form-wrap input[type="url"],
.comment-form-wrap textarea {
  width: 100%;
  background: #0a0a12;
  border: 1px solid #3c3773;
  color: #e0d6f7;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  padding: 6px 8px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.2s ease;
}

.comment-form-wrap input[type="text"]:focus,
.comment-form-wrap input[type="url"]:focus,
.comment-form-wrap textarea:focus {
  border-color: #ffa0f2;
}

.comment-form-wrap textarea {
  resize: vertical;
  min-height: 80px;
}

.comment-form-wrap .ohnohoney {
  opacity: 0;
  position: absolute;
  top: 0; left: 0;
  height: 0; width: 0;
  z-index: -1;
}

.comment-form-wrap button[type="submit"] {
  align-self: flex-start;
  background: #1a1a2e;
  border: 1px solid #ffa0f2;
  color: #ffa0f2;
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 6px 16px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #404040;
  border-bottom: 2px solid #404040;
  box-shadow: 1px 1px 0 #000;
}

.comment-form-wrap button[type="submit"]:hover {
  background: #ffa0f2;
  color: #0a0a12;
}

.comment-form-confirm {
  font-family: 'Share Tech Mono', monospace;
  font-size: 13px;
  color: #ffa0f2;
  display: none;
  margin-top: 8px;
  letter-spacing: 0.15em;
}

/* ─── Tooltips ────────────────────────────────────────────────── */

.tooltip {
  position: relative;
  cursor: help;
}

.tooltip .tooltip-text {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background-color: #3c3773;
  color: #ffa0f2;
  font-family: 'Share Tech Mono', monospace;
  font-style: normal;
  font-size: 0.75rem;
  padding: 10px 12px;
  text-align: left;
  transition: opacity 0.3s;
  z-index: 100;
  border-top:    2px solid #FFD700;
  border-left:   2px solid #FFD700;
  border-right:  2px solid #FFD700;
  border-bottom: 2px solid #FFD700;
  box-shadow: 1px 1px 0 #000;
}

.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
  color: #f1e9bc;
}

/* ─── Sparkle animation ───────────────────────────────────────── */

@keyframes sparkle {
  0%   { text-shadow: 0 0 4px #FFD700, 0 0 10px #FFD700; }
  25%  { text-shadow: 0 0 8px #FFF5A0, 0 0 20px #FFD700, 0 0 35px #FFC200; }
  50%  { text-shadow: 0 0 4px #FFFFFF, 0 0 15px #FFF5A0, 0 0 25px #FFD700; }
  75%  { text-shadow: 0 0 8px #FFD700, 0 0 20px #FFC200, 0 0 35px #FF9900; }
  100% { text-shadow: 0 0 4px #FFD700, 0 0 10px #FFD700; }
}

.blink-love {
  animation: sparkle 2s ease-in-out infinite;
  color: #FFD700;
  transform: translateZ(0);
}

.blink-time {
  animation: sparkle 2.8s ease-in-out infinite;
  color: #FFD700;
  transform: translateZ(0);
}

/* ─── Year section visibility ─────────────────────────────────── */

section.year {
  display: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

section.year.is-visible {
  display: block;
}

section.year.is-fading-in {
  opacity: 1;
}

/* ─── Entry cascade ───────────────────────────────────────────── */

section.year.is-visible .entry-wrapper {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

section.year.is-visible .entry-wrapper.entry-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2001 entries start visible — no cascade on initial load */
section.year[data-year="2001"] .entry-wrapper {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ─── Door ────────────────────────────────────────────────────── */

.year-door {
  position: relative;
  width: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
  transition: opacity 0.9s ease;
  margin: 40px 0 0 0;
}

.year-door.is-opening {
  opacity: 0;
  pointer-events: none;
}

.year-door::after {
  display: none;
}

/* atmospheric glow */
.year-door::before {
  content: '';
  position: absolute;
  top: -10%;
  right: -10%;
  bottom: -10%;
  left: -16%;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%,
      rgba(209, 68, 162, 0.9) 0%,
      transparent 70%),
    radial-gradient(ellipse 30% 20% at 30% 70%,
      rgba(255, 160, 242, 0.3) 0%,
      transparent 60%),
    radial-gradient(ellipse 20% 15% at 72% 30%,
      rgba(236, 23, 186, 0.2) 0%,
      transparent 60%);
  pointer-events: none;
  transition: background 1.2s ease;
  animation: door-breathe 6s ease-in-out infinite;
}

.year-door.door-approaching::before {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%,
      rgba(209, 68, 162, 0.65) 0%,
      transparent 72%),
    radial-gradient(ellipse 40% 30% at 20% 80%,
      rgba(255, 160, 242, 0.35) 0%,
      transparent 55%),
    radial-gradient(ellipse 25% 20% at 80% 15%,
      rgba(236, 23, 186, 0.25) 0%,
      transparent 55%);
  animation: door-breathe-fast 1.8s ease-in-out infinite;
}

@keyframes door-breathe {
  0%   { opacity: 0.75; transform: scale(1);    }
  30%  { opacity: 1;    transform: scale(1.03); }
  55%  { opacity: 0.85; transform: scale(0.98); }
  80%  { opacity: 1;    transform: scale(1.02); }
  100% { opacity: 0.75; transform: scale(1);    }
}

@keyframes door-breathe-fast {
  0%, 100% { opacity: 0.85; transform: scale(1);    }
  50%       { opacity: 1;    transform: scale(1.04); }
}

/* door gif */
.year-door img.door-gif {
  image-rendering: pixelated;
  height: 300px;
  width: auto;
  position: relative;
  z-index: 1;
  mix-blend-mode: normal;
  opacity: 0.65;
  animation: door-pulse 3.5s ease-in-out infinite;
  filter:
    brightness(1.05)
    drop-shadow(0 0 8px #d45abe)
    drop-shadow(0 0 24px rgba(209,68,162,0.35))
    drop-shadow(0 0 48px rgba(236,23,186,0.3));
}

.year-door.door-approaching img.door-gif {
  animation:
    door-pulse 3s ease-in-out infinite,
    door-flicker 0.12s step-end infinite,
    door-hue-drift 4s linear infinite;
  filter:
    brightness(1.5)
    drop-shadow(0 0 18px #ffa0f2)
    drop-shadow(0 0 40px rgba(209,68,162,0.7))
    drop-shadow(0 0 70px rgba(236,23,186,0.4));
}

.year-door:hover img.door-gif {
  animation: door-hover-throb 0.6s ease-in-out infinite;
  filter:
    brightness(1.6)
    drop-shadow(0 0 28px #ffa0f2)
    drop-shadow(0 0 60px rgba(209,68,162,0.75))
    drop-shadow(0 0 100px rgba(236,23,186,0.45));
  transform: scale(1.08);
  transition: transform 0.2s ease, filter 0.3s ease;
}

@keyframes door-pulse {
  0%, 100% {
    transform: scale(1);
    filter:
      brightness(1.05)
      drop-shadow(0 0 8px #d45abe)
      drop-shadow(0 0 24px rgba(209,68,162,0.35))
      drop-shadow(0 0 48px rgba(236,23,186,0.3));
  }
  50% {
    transform: scale(1.055);
    filter:
      brightness(1.3)
      drop-shadow(0 0 20px #ffa0f2)
      drop-shadow(0 0 45px rgba(209,68,162,0.55))
      drop-shadow(0 0 80px rgba(236,23,186,0.3));
  }
}

@keyframes door-flicker {
  0%   { opacity: 1;    }
  33%  { opacity: 0.88; }
  66%  { opacity: 0.95; }
  100% { opacity: 1;    }
}

@keyframes door-hue-drift {
  0%   { hue-rotate: 0deg;   }
  50%  { hue-rotate: 25deg;  }
  100% { hue-rotate: 0deg;   }
}

@keyframes door-hover-throb {
  0%, 100% {
    filter:
      brightness(1.6)
      drop-shadow(0 0 28px #ffa0f2)
      drop-shadow(0 0 60px rgba(209,68,162,0.75))
      drop-shadow(0 0 100px rgba(236,23,186,0.45));
  }
  50% {
    filter:
      brightness(1.85)
      drop-shadow(0 0 36px #fff0fe)
      drop-shadow(0 0 80px rgba(209,68,162,0.9))
      drop-shadow(0 0 120px rgba(236,23,186,0.5));
  }
}

/* door label */
.door-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: 30px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: #ffa0f2;
  margin-top: 20px;
  opacity: 0.25;
  position: relative;
  z-index: 3;
  transition: opacity 0.3s ease, letter-spacing 0.4s ease;
}

.door-label::before { content: '— '; opacity: 0.5; }
.door-label::after  { content: ' —'; opacity: 0.5; }

.year-door:hover .door-label,
.year-door.door-approaching .door-label {
  opacity: 1;
  letter-spacing: 0.6em;
}

/* ─── Win98 Modal ─────────────────────────────────────────────── */

.win98-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.win98-overlay.is-active {
  opacity: 1;
  pointer-events: all;
  visibility: visible;
}

.win98-overlay.is-dismissing {
  opacity: 0;
}

.win98-dialog {
  font-family: 'MS Sans Serif', 'Microsoft Sans Serif', 'Arial', sans-serif;
  font-size: 11px;
  background: #c0c0c0;
  border-top:    2px solid #ffffff;
  border-left:   2px solid #ffffff;
  border-right:  2px solid #808080;
  border-bottom: 2px solid #808080;
  box-shadow: 2px 2px 0 #000, inset 1px 1px 0 #dfdfdf;
  width: 380px;
  padding: 3px;
}

.win98-titlebar {
  background: linear-gradient(to right, #000080, #1084d0); /* intentional Win98 blue */
  color: white;
  font-weight: bold;
  font-size: 11px;
  padding: 3px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  user-select: none;
}

.win98-titlebar-buttons {
  display: flex;
  gap: 2px;
}

.win98-titlebar-btn {
  width: 16px;
  height: 14px;
  background: #c0c0c0;
  border-top:    1px solid #fff;
  border-left:   1px solid #fff;
  border-right:  1px solid #808080;
  border-bottom: 1px solid #808080;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  color: #000;
  font-family: 'MS Sans Serif', Arial, sans-serif;
}

.win98-body {
  padding: 8px 12px 12px;
}

.win98-file-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.win98-papers {
  font-size: 28px;
  animation: papers-fly 0.4s step-end infinite;
  flex-shrink: 0;
}

@keyframes papers-fly {
  0%   { transform: translateX(0)   translateY(0);  }
  25%  { transform: translateX(4px) translateY(-6px); }
  50%  { transform: translateX(8px) translateY(-2px); }
  75%  { transform: translateX(4px) translateY(-8px); }
  100% { transform: translateX(0)   translateY(0);  }
}

.win98-file-info {
  line-height: 1.6;
  color: #000;
}

.win98-file-info strong {
  font-family: 'Courier New', monospace;
  font-size: 10px;
}

.win98-progress-label {
  margin-bottom: 4px;
  color: #000;
}

.win98-progress-track {
  background: #fff;
  border-top:    1px solid #808080;
  border-left:   1px solid #808080;
  border-right:  1px solid #dfdfdf;
  border-bottom: 1px solid #dfdfdf;
  height: 18px;
  width: 100%;
  overflow: hidden;
}

.win98-progress-fill {
  height: 100%;
  width: 0%;
  background: repeating-linear-gradient(
    to right,
    #000080 0px, #000080 10px,
    #1084d0 10px, #1084d0 12px
  );
  transition: width 3.5s linear;
}

.win98-status {
  margin-top: 6px;
  color: #000;
  font-size: 10px;
  min-height: 14px;
}

/* ─── Vine rail (right side only) ────────────────────────────── */

.vine-rail-right {
  position: fixed;
  top: 0;
  right: 11px;
  width: 72px;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

.vine-rail-right::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/vine-rail.svg');
  background-repeat: repeat-y;
  background-size: 72px 240px;
  image-rendering: pixelated;
  opacity: 0.82;
  filter: drop-shadow(0 0 3px rgba(255,160,242,0.25))
          drop-shadow(0 0 8px rgba(209,68,162,0.18));
  mask-image: linear-gradient(
    to bottom,
    transparent 0, black 30px,
    black calc(100% - 220px), transparent 100%
  );
  animation: vine-cascade 6s linear infinite;
}

.vine-rail-right::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.9) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,160,242,0.8) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,214,245,0.9) 0 1px, transparent 2px);
  background-size: 72px 80px, 72px 120px, 72px 60px;
  background-position: 18px 12px, 52px 44px, 38px 28px;
  background-repeat: repeat-y;
  opacity: 0;
  mask-image: linear-gradient(
    to bottom,
    transparent 0, black 30px,
    black calc(100% - 220px), transparent 100%
  );
  animation: vine-twinkle 4s ease-in-out infinite;
}

@keyframes vine-cascade {
  from { background-position: center 0; }
  to   { background-position: center 240px; }
}

@keyframes vine-twinkle {
  0%, 100% { opacity: 0;    filter: none; }
  40%      { opacity: 0.6;  filter: drop-shadow(0 0 3px rgba(255,214,245,0.6)); }
  60%      { opacity: 0.9;  filter: drop-shadow(0 0 6px rgba(255,160,242,0.5))
                                    drop-shadow(0 0 12px rgba(212,90,190,0.3)); }
}

@media (prefers-reduced-motion: reduce) {
  .vine-rail-right::before,
  .vine-rail-right::after { animation: none; }
}

/* Ghost family left */

.ghost-family-left {
  position: fixed;
  left: 6px;
  top: 0;
  width: 78px;
  height: 100vh;
  pointer-events: none;
  z-index: 51;
}

.ghost-family-left .ghost {
  position: absolute;
  bottom: -110px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  image-rendering: pixelated;
  mix-blend-mode: screen;
  will-change: transform, opacity, filter;
}

.ghost-tall {
  left: 0;
  width: 48px;
  height: 60px;
  background-image: url('../images/ghost-tall.svg');
  animation:
    ghost-rise-tall 12s linear infinite,
    ghost-flicker-tall 0.16s step-end infinite;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.85))
    drop-shadow(0 0 10px rgba(255,210,240,0.55))
    drop-shadow(0 0 18px rgba(209,68,162,0.38));
}

.ghost-round {
  left: 26px;
  width: 38px;
  height: 44px;
  background-image: url('../images/ghost-round.svg');
  animation:
    ghost-rise-round 9.8s linear infinite,
    ghost-flicker-round 0.12s step-end infinite;
  animation-delay: -4.5s, -0.25s;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.75))
    drop-shadow(0 0 8px rgba(255,220,245,0.48))
    drop-shadow(0 0 14px rgba(255,160,242,0.30));
}

.ghost-tiny {
  left: 14px;
  width: 24px;
  height: 29px;
  background-image: url('../images/ghost-tiny.svg');
  animation:
    ghost-rise-tiny 8.4s linear infinite,
    ghost-flicker-tiny 0.09s step-end infinite;
  animation-delay: -2.8s, -0.12s;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,0.72))
    drop-shadow(0 0 7px rgba(255,220,245,0.42))
    drop-shadow(0 0 11px rgba(255,160,242,0.24));
}

.ghost-speech-bubble {
  position: fixed;
  left: 6px;
  bottom: -200px;
  width: 72px;    /* matches ghost-tall's 48px scale, slightly wider for the bubble */
  height: auto;
  pointer-events: none;
  z-index: 51;
  image-rendering: pixelated;
  will-change: transform, opacity;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,0.85))
    drop-shadow(0 0 10px rgba(255,210,240,0.55));
  animation: ghost-speech-rise 9.8s linear infinite;
  animation-delay: -4.0s;
}

@keyframes ghost-speech-rise {
  0%   { transform: translate3d(0, 0, 0);      opacity: 0; }
  10%  { transform: translate3d(0, -13vh, 0);  opacity: 0; }
  26%  { transform: translate3d(0, -32vh, 0);  opacity: 1; }
  55%  { transform: translate3d(0, -60vh, 0);  opacity: 1; }
  72%  { transform: translate3d(0, -80vh, 0);  opacity: 0; }
  100% { transform: translate3d(0, -118vh, 0); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-speech-bubble { animation: none; opacity: 0; }
}

@keyframes ghost-rise-tall {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { transform: translate3d(1px, -10vh, 0); opacity: 1; }
  22%  { transform: translate3d(-2px, -27vh, 0); }
  36%  { transform: translate3d(2px, -43vh, 0); }
  52%  { transform: translate3d(-1px, -61vh, 0); }
  69%  { transform: translate3d(3px, -80vh, 0); }
  86%  { transform: translate3d(-2px, -101vh, 0); opacity: 0.92; }
  100% { transform: translate3d(1px, -118vh, 0); opacity: 0; }
}

@keyframes ghost-rise-round {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { transform: translate3d(-2px, -13vh, 0); opacity: 0.96; }
  28%  { transform: translate3d(2px, -34vh, 0); }
  46%  { transform: translate3d(-3px, -55vh, 0); }
  67%  { transform: translate3d(2px, -80vh, 0); opacity: 0.88; }
  100% { transform: translate3d(-1px, -118vh, 0); opacity: 0; }
}

@keyframes ghost-rise-tiny {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { transform: translate3d(2px, -16vh, 0); opacity: 0.92; }
  30%  { transform: translate3d(-2px, -38vh, 0); }
  52%  { transform: translate3d(3px, -64vh, 0); }
  76%  { transform: translate3d(-1px, -93vh, 0); opacity: 0.78; }
  100% { transform: translate3d(2px, -118vh, 0); opacity: 0; }
}

@keyframes ghost-flicker-tall {
  0%, 100% { opacity: 1; }
  8% { opacity: 0.92; }
  9% { opacity: 0.38; }
  10% { opacity: 1; }
  41% { opacity: 0.84; }
  42% { opacity: 0.55; }
  43% { opacity: 0.98; }
  76% { opacity: 0.9; }
  77% { opacity: 0.44; }
  78% { opacity: 1; }
}

@keyframes ghost-flicker-round {
  0%, 100% { opacity: 0.95; }
  16% { opacity: 0.56; }
  17% { opacity: 0.94; }
  48% { opacity: 0.42; }
  49% { opacity: 0.9; }
  81% { opacity: 0.32; }
  82% { opacity: 0.88; }
}

@keyframes ghost-flicker-tiny {
  0%, 100% { opacity: 0.86; }
  12% { opacity: 0.36; }
  13% { opacity: 0.84; }
  53% { opacity: 0.22; }
  54% { opacity: 0.78; }
  85% { opacity: 0.46; }
  86% { opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  .ghost-family-left .ghost {
    animation: none;
    opacity: 0.92;
  }

  .ghost-tall  { bottom: 38px; }
  .ghost-round { bottom: 104px; }
  .ghost-tiny  { bottom: 74px; }
}