/* ============================================================
   SYSTEM DECK — IE95/98 TAROT INTERFACE
   Smooth gliding animations | Gentle transitions
   ============================================================ */

/* ─── Playlist widget ─── */
.widget-playlist .playlist-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.playlist-track {
  padding: 6px 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--win-dark);
  transition: all 0.2s ease;
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
}

/* Playlist scrolling container */
.playlist-container {
  max-height: 280px; /* Shows ~8-9 tracks */
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding-right: 4px;
}

/* Hide scrollbar but keep functionality */
.playlist-container::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.playlist-container {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Visual scroll indicator */
.playlist-scroll-indicator {
  position: sticky;
  bottom: 0;
  text-align: center;
  padding: 6px 0;
  font-size: 10px;
  font-weight: bold;
  color: var(--win-dark);
  background: linear-gradient(to bottom, transparent, var(--profile-widget-bg, #f5f5f5));
  pointer-events: auto; /* Make clickable */
  cursor: pointer;
  user-select: none;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.playlist-scroll-indicator:hover {
  opacity: 1;
  color: var(--profile-link, #0000ff);
}

/* Default state: More */
.playlist-scroll-indicator::after {
  content: '↓ more ↓';
  display: block;
  animation: bounce 1.5s ease-in-out infinite;
}

/* Bottom state: Top */
.playlist-scroll-indicator.at-bottom::after {
  content: '↑ top ↑';
  animation: none; /* Stop bouncing when at bottom */
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}


/* Marquee for long text */
.playlist-track-title,
.playlist-track-artist {
  display: inline-block;
  white-space: nowrap;
}

.playlist-track-title.marquee,
.playlist-track-artist.marquee {
  padding-left: 100%; /* Start text off-screen to the right */
  animation: marqueeScroll 15s linear infinite;
}

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Ensure the container hides the text when it's off-screen */
.playlist-title-wrapper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* Update playlist track layout */
.playlist-track {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  cursor: pointer;
  border-bottom: 1px solid var(--win-dark);
  transition: all 0.2s ease;
  font-size: 11px;
  line-height: 1.4;
  background: transparent;
  min-width: 0; /* Allows text truncation */
}

.playlist-num {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--win-dark);
  min-width: 20px;
}

.playlist-title-wrapper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.playlist-track-title {
  display: block;
  font-weight: 500;
  color: var(--profile-text, #000);
}

.playlist-track-artist {
  display: block;
  font-size: 10px;
  color: var(--win-dark);
  opacity: 0.7;
}

.playlist-track:hover {
  background: color-mix(in srgb, var(--profile-link) 20%, transparent);
  transform: translateX(2px);
}

.playlist-track:active {
  background: color-mix(in srgb, var(--profile-link) 35%, transparent);
}

.playlist-track-playing {
  background: color-mix(in srgb, var(--profile-link) 25%, transparent);
  border-left: 3px solid var(--profile-link);
  font-weight: bold;
}

.playlist-track-playing:hover {
  background: color-mix(in srgb, var(--profile-link) 35%, transparent);
}

.playlist-num {
  font-size: 10px;
  color: var(--win-dark);
  min-width: 18px;
  flex-shrink: 0;
}

.playlist-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.playlist-list .track-artist {
  opacity: 0.6;
  font-size: 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --win-gray: #c0c0c0;
  --win-dark: #808080;
  --win-darker: #404040;
  --win-light: #ffffff;
  --win-blue: #000080;
  
  --iridescent-1: #ff006e;
  --iridescent-2: #fb5607;
  --iridescent-3: #ffbe0b;
  --iridescent-4: #8338ec;
  --iridescent-5: #3a86ff;
  --iridescent-6: #06ffa5;
  
  --card-w: 180px;
  --card-h: 280px;
  --card-radius: 6px;
  
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-glide: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --dur-hover: 0.3s;
  --dur-glide: 1.2s;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  background: #000;
  background: linear-gradient(-45deg, #0a0a0a 0%, #1a0a1a 25%, #0a1a1a 50%, #1a0a2a 75%, #000000 100%);
  background-size: 400% 400%;
  animation: iridescentShift 15s ease infinite;
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
  font-size: 11px;
  color: #000;
  position: relative;
}

@keyframes iridescentShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(255, 0, 110, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(58, 134, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(131, 56, 236, 0.1) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
  animation: bubbleFloat 20s ease-in-out infinite;
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.05); }
}

.ie-window-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 400px);
  max-width: 900px;
  height: calc(100vh - 350px);
  min-height: 500px;
  background: var(--win-gray);
  border: 2px solid var(--win-light);
  border-right-color: var(--win-darker);
  border-bottom-color: var(--win-darker);
  box-shadow: inset 1px 1px 0 var(--win-light), inset -1px -1px 0 var(--win-dark), 2px 2px 8px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.ie-titlebar {
  background: linear-gradient(90deg, var(--win-blue) 0%, #1084d0 100%);
  color: var(--win-light);
  padding: 3px 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 11px;
  border: 1px solid var(--win-light);
  border-bottom-color: var(--win-darker);
}

.ie-titlebar-left { display: flex; align-items: center; gap: 4px; }
.ie-icon { width: 16px; height: 16px; }
.ie-titlebar-buttons { display: flex; gap: 2px; }

.ie-btn-title {
  width: 21px;
  height: 18px;
  background: var(--win-gray);
  border: 1px solid var(--win-light);
  padding-bottom: 8px;
  border-right-color: var(--win-darker);
  border-bottom-color: var(--win-darker);
  font-family: 'Marlett', sans-serif;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ie-btn-title:active {
  border: 1px solid var(--win-darker);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
}

.ie-btn-close { font-weight: bold; font-family: 'Tahoma', sans-serif; }

.ie-menubar {
  padding: 2px 8px;
  border-bottom: 1px solid var(--win-dark);
  display: flex;
  gap: 12px;
  background: var(--win-gray);
}

.menu-item { cursor: pointer; padding: 2px 4px; }
.menu-item:hover { background: var(--win-blue); color: var(--win-light); }

.ie-addressbar {
  padding: 4px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--win-dark);
  background: var(--win-gray);
}

.address-label { font-size: 11px; }

.address-field {
  flex: 1;
  background: var(--win-light);
  border: 1px solid var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  padding: 2px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Courier New', monospace;
  font-size: 11px;
}

.address-icon { width: 14px; height: 14px; }

.ie-content {
  flex: 1;
  overflow-y: auto;
  background: var(--win-light);
  padding: 16px;
  position: relative;
}

.ie-content::-webkit-scrollbar { width: 16px; }
.ie-content::-webkit-scrollbar-track { background: var(--win-gray); border-left: 1px solid var(--win-dark); }
.ie-content::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color, var(--win-gray));
  border: 1px solid var(--win-light);
  border-right-color: var(--win-darker);
  border-bottom-color: var(--win-darker);
}
.ie-content::-webkit-scrollbar-button {
  background: var(--win-gray);
  height: 16px;
  border: 1px solid var(--win-light);
  border-right-color: var(--win-darker);
  border-bottom-color: var(--win-darker);
}

.ie-statusbar {
  padding: 2px 8px;
  background: var(--win-gray);
  border-top: 1px solid var(--win-light);
  display: flex;
  gap: 16px;
  font-size: 11px;
  color: var(--win-darker);
}

.status-item {
  border: 1px solid var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  padding: 2px 8px;
  background: var(--win-gray);
}

/* === REDESIGNED WELCOME PAGE === */
.welcome-page {
  max-width: 100%;
  margin: 0;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.welcome-sidebar {
  width: 25%;
  min-width: 200px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  align-self: flex-start;
}

.welcome-title {
  font-family: 'Horns', 'Comic Sans MS', cursive;
  font-size: 31px;
  color: var(--win-blue);
  text-shadow: 2px 2px 0 rgba(255,0,110,0.3);
  margin-bottom: 8px;
  animation: rainbowText 8s ease infinite;
}

@keyframes rainbowText {
  0%, 100% { color: #ff006e; }
  14% { color: #fb5607; }
  28% { color: #ffbe0b; }
  42% { color: #8338ec; }
  57% { color: #3a86ff; }
  71% { color: #06ffa5; }
  85% { color: #ff006e; }
}

.welcome-main {
  flex: 1;
  min-width: 0;
  padding-bottom: 340px; /* Space for the deck at bottom */
}

.sidebar-image-container {
  width: 94px;
  height: 94px;
  margin: 0 auto 16px auto;
  background: transparent;
  border: 2px solid var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sidebar-image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.sidebar-nav {
  background: #f0f0f0;
  border: 2px solid var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  padding: 8px;
  margin-bottom: 16px;
}

.sidebar-nav h3 {
  font-size: 12px;
  color: var(--win-blue);
  margin-bottom: 6px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--win-dark);
}

.sidebar-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin-bottom: 2px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  color: var(--win-blue);
  text-decoration: none;
  font-size: 10px;
  border: 1px solid transparent;
  transition: all 0.15s ease;
}

.sidebar-nav a:hover {
  background: var(--win-blue);
  color: var(--win-light);
  border: 1px solid var(--win-darker);
}

.sidebar-nav a img {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.system-stats {
  background: #f0f0f0;
  border: 2px solid var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  padding: 12px;
}

.system-stats h3 {
  font-size: 12px;
  color: var(--win-blue);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--win-dark);
}

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 11px;
  border-bottom: 1px dotted var(--win-dark);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  font-weight: bold;
  color: var(--win-darker);
}

.stat-value {
  color: var(--win-blue);
  text-align: right;
}

.live-timer {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--win-blue);
  text-align: center;
  margin-top: 8px;
  padding: 4px;
  background: #fff;
  border: 1px inset var(--win-dark);
}

/* === ROYGBIV SECTION HEADERS === */
.welcome-main .welcome-section h2 {
  font-family: 'Georgia', serif; /* Changed from Horns */
  font-size: 16px; /* Reduced from 24px */
  margin-bottom: 4px;
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-divider {
  display: block;
  max-width: 150px; /* Slightly smaller */
  height: auto;
  margin: 0 0 12px 0; /* Reduced bottom margin */
  image-rendering: pixelated;
  opacity: 0.9;
}

/* ROYGBIV colors with glow */
#about h2 {
  color: #ff006e;
  text-shadow: 
    0 0 6px rgba(255, 0, 110, 0.5),
    0 0 12px rgba(255, 0, 110, 0.2);
}

#diagnosis h2 {
  color: #fb5607;
  text-shadow: 
    0 0 6px rgba(251, 86, 7, 0.5),
    0 0 12px rgba(251, 86, 7, 0.2);
}

#understanding h2 {
  color: #ffbe0b;
  text-shadow: 
    0 0 6px rgba(255, 190, 11, 0.5),
    0 0 12px rgba(255, 190, 11, 0.2);
}

#glossary h2 {
  color: #06ffa5;
  text-shadow: 
    0 0 6px rgba(6, 255, 165, 0.5),
    0 0 12px rgba(6, 255, 165, 0.2);
}

#references h2 {
  color: #3a86ff;
  text-shadow: 
    0 0 6px rgba(58, 134, 255, 0.5),
    0 0 12px rgba(58, 134, 255, 0.2);
}

/* Main content sections */
.welcome-main .welcome-section {
  margin-bottom: 24px;
}

.glossary-item {
  margin-bottom: 12px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--win-dark);
}

.glossary-term {
  font-weight: bold;
  color: var(--win-blue);
  font-size: 12px;
  margin-bottom: 4px;
}

.glossary-definition {
  font-size: 11px;
  line-height: 1.5;
  color: #333;
}

.reference-list {
  list-style: none;
  padding: 0;
}

.reference-list li {
  padding: 6px 0;
  border-bottom: 1px dotted var(--win-dark);
  font-size: 11px;
}

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

.reference-list a {
  color: var(--win-blue);
  text-decoration: none;
}

.reference-list a:hover {
  text-decoration: underline;
}

/* PROFILE THEMES */
.profile-page {
  background-color: var(--profile-bg, #ffffff);
  background-image: var(--profile-bg-image, none);
  background-repeat: repeat;
  background-size: auto;
  color: var(--profile-text, #000000);
  font-family: var(--theme-font-main, 'Tahoma', sans-serif);
  min-height: 100%;
}

.profile-page.theme-frenzy {
  --profile-bg: #12100d;

  --profile-header-bg:
    linear-gradient(
      135deg,
      #1f1a14 0%,
      #5b1010 45%,
      #c4a63a 100%
    );

  --profile-text: #ece6d9;

  --profile-link: #d8bf57;

  --profile-border: #3d3228;

  --profile-widget-bg: #1a1713;
}

.profile-page.theme-classic {
  --profile-bg: #ffffff;
  --profile-bg-image: url('/assets/images/backgrounds/classic-bg.png');
  --profile-header-bg: linear-gradient(135deg, #000080 0%, #1084d0 100%);
  --profile-text: #000000;
  --profile-link: #0000ff;
  --profile-border: #c0c0c0;
  --profile-widget-bg: #f5f5f5;
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
}

.profile-page.theme-hemwicknights {
  --profile-bg: #141012;
  --profile-bg-image: url('/assets/images/backgrounds/hemwick-night.jpg');

  --profile-header-bg: linear-gradient(
    135deg,
    #2a1f24 0%,
    #5a2a3a 50%,
    #E0B0FF 100%
  );

  --profile-text: #f2e6ea;

  --profile-link: #e0b0ff;

  --profile-border: #3a2a30;

  --profile-widget-bg: #1f171b;

  font-family: 'Garamond', 'Georgia', serif;
}

.profile-page.theme-myspace {
  --profile-bg: #ffccff;
  --profile-bg-image: url('/assets/images/backgrounds/myspace-bg.gif');
  --profile-header-bg: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
  --profile-text: #330033;
  --profile-link: #ff1493;
  --profile-border: #ff69b4;
  --profile-widget-bg: #ffffff;
  font-family: 'Comic Sans MS', 'Chalkboard', cursive;
}

.profile-page.theme-deviant {
  --profile-bg: #e8f0e8;
  --profile-bg-image: url('/assets/images/backgrounds/deviant-bg.png');
  --profile-header-bg: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%);
  --profile-text: #1a3009;
  --profile-link: #006600;
  --profile-border: #5a7c4a;
  --profile-widget-bg: #f0f5f0;
  font-family: 'Georgia', 'Times New Roman', serif;
}

.profile-page.theme-gothic {
  --profile-bg: #1a1a2e;
  --profile-bg-image: url('/assets/images/backgrounds/gothic-bg.jpg');
  --profile-header-bg: linear-gradient(135deg, #4a0000 0%, #8b0000 100%);
  --profile-text: #e0e0e0;
  --profile-link: #ff6b6b;
  --profile-border: #4a4a6a;
  --profile-widget-bg: #16213e;
  font-family: 'Courier New', monospace;
}

.profile-page.theme-ocean {
  --profile-bg: #e0f7fa;
  --profile-bg-image: url('/assets/images/backgrounds/ocean-bg.png');
  --profile-header-bg: linear-gradient(135deg, #00796b 0%, #26a69a 100%);
  --profile-text: #004d40;
  --profile-link: #00838f;
  --profile-border: #80cbc4;
  --profile-widget-bg: #ffffff;
  font-family: 'Verdana', sans-serif;
}

.profile-page.theme-sunset {
  --profile-bg: #fff5e6;
  --profile-bg-image: url('/assets/images/backgrounds/sunset-bg.jpg');
  --profile-header-bg: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
  --profile-text: #5c3a1e;
  --profile-link: #d84315;
  --profile-border: #ffcc80;
  --profile-widget-bg: #ffffff;
  font-family: 'Trebuchet MS', sans-serif;
}

.profile-page.theme-cosmic {
  --profile-bg: #1a0a2e;
  --profile-bg-image: url('/assets/images/backgrounds/cosmic-bg.png');
  --profile-header-bg: linear-gradient(135deg, #6a0dad 0%, #9b30ff 100%);
  --profile-text: #e6e6fa;
  --profile-link: #da70d6;
  --profile-border: #4b0082;
  --profile-widget-bg: #2d1b4e;
  font-family: 'Arial', sans-serif;
}

.profile-page.theme-paradox {
  --profile-bg: #0c0a12;
  --profile-bg-image: url('/assets/images/backgrounds/bubbles.gif');

--profile-header-bg:
  radial-gradient(
    circle at center,
    #050505 0%,
    #050505 18%,
    #d5b07a 22%,
    #7f5d91 45%,
    #24162f 100%
  );

  --profile-text: #e8e1eb;
  --profile-link: #d49ac7;
  --profile-border: #56405d;
  --profile-widget-bg: #18131f;

  font-family: 'Arial', sans-serif;
}

.profile-page.theme-onryo {
  --profile-bg: #080808;
  --profile-bg-image: url('/assets/images/backgrounds/tv-static.gif');
  --profile-header-bg:
    linear-gradient(
      180deg,
      #0d0d0d 0%,
      #24142e 40%,
      #4a3158 100%
    );
  --profile-text: #d9d2df;
  --profile-link: #a88ac2;
  --profile-border: #3a2a42;
  --profile-widget-bg: #111111;
  font-family: 'Arial', sans-serif;
}

.profile-page.theme-jaga {
  --profile-bg: #0f1217;
  --profile-bg-image: url('/assets/images/backgrounds/moonsnclouds.jpg');
  --profile-header-bg:
    linear-gradient(
      180deg,
      #1f2836 0%,
      #50607f 50%,
      #8b7eb5 100%
    );
  --profile-text: #e9edf6;
  --profile-link: #c7b6f2;
  --profile-border: #5f708d;
  --profile-widget-bg: #171c24;
}

.profile-page.theme-machine {
  --profile-bg: #090b0f;
  --profile-bg-image: url('/assets/images/backgrounds/numbers.gif');
  --profile-header-bg:
    linear-gradient(
      135deg,
      #131922 0%,
      #223248 45%,
      #5d788d 100%
    );
  --profile-text: #d8dde5;
  --profile-link: #89b7d8;
  --profile-border: #36495a;
  --profile-widget-bg: #11161d;
  --accent: #ff6448;
  font-family: 'Arial', sans-serif;
}

.profile-page.theme-kuromi {
  --profile-bg: #120f16;
  --profile-bg-image: url('/assets/images/backgrounds/kuromi.jpg');
  --profile-header-bg:
    linear-gradient(
      135deg,
      #1c1724 0%,
      #5d4a7c 55%,
      #d46eb3 100%
    );

  --profile-text: #f7f2fa;

  --profile-link: #ff8ad8;

  --profile-border: #7a5aa6;

  --profile-widget-bg: #1a1620;

  --accent: #ff77c8;

  font-family: 'Arial', sans-serif;
}

.profile-page.theme-vampyr {
  --profile-bg: #070707;

  --profile-header-bg:
    linear-gradient(180deg, #000000 0%, #880808 50%, #1a1a1a 100%);

  --profile-text: #f8f8f8;

  --profile-link: #a00000;

  --profile-border: #f0f0f0;

  --profile-widget-bg: #0f0f0f;

  --accent: #880808;
}

.profile-page.theme-necro {
  --profile-bg: #0c0b0a;

  --profile-header-bg:
    linear-gradient(135deg, #1a1410 0%, #006a4e 55%, #daa520 130%);

  --profile-text: #f3f0e8;

  --profile-link: #daa520;

  --profile-border: #2c2a25;

  --profile-widget-bg: #14110f;

  --accent: #8b1a1a;

  font-family: 'Georgia', 'Times New Roman', serif;
}

.profile-page.theme-devil {
  --profile-bg: #050005;

  --profile-header-bg:
    linear-gradient(135deg, #000000 0%, #2b0a3d 50%, #8b0000 120%);

  --profile-text: #f2e9ff;

  --profile-link: #ac86a8;

  --profile-border: #2a002a;

  --profile-widget-bg: #0b0b0b;

  --accent: #8b0000;

  font-family: 'Arial', sans-serif;
}

.profile-page.theme-crt {
  --profile-bg: #0a0a0c;
  --profile-header-bg:
    repeating-linear-gradient(
      90deg,
      #1a1a1f 0px,
      #1a1a1f 10px,
      #2b2b33 10px,
      #2b2b33 20px,
      #3a2f3f 20px,
      #3a2f3f 30px,
      #2a3b3f 30px,
      #2a3b3f 40px
    );
  --profile-text: #e6e6e6;
  --profile-link: #7cc7c7;
  --profile-border: #2a2a2f;
  --profile-widget-bg: #101014;
  --accent: #c79bd3;
  font-family: 'Courier New', monospace;
}

.profile-page.theme-omen {
  --profile-bg: #1f1d1a;

  --profile-header-bg:
    linear-gradient(
      135deg,
      #8c7d75 0%,
      #5c534d 50%,
      #cc8899 100%
    );

  --profile-text: #ece4d9;

  --profile-link: #d6a3af;

  --profile-border: #6d635c;

  --profile-widget-bg: #2b2824;

  font-family: 'Georgia', serif;
}

.profile-header-section {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--profile-header-bg);
  border: 2px solid var(--profile-border);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
}

.profile-pic-container {
  width: 150px;
  height: 150px;
  background: #000;
  border: 2px solid var(--win-darker);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  overflow: hidden;
  flex-shrink: 0;
}

.profile-pic { width: 100%; height: 100%; object-fit: cover; }
.profile-info { flex: 1; }

.profile-name {
  font-family: var(--theme-font-header, 'Georgia', serif);
  font-size: 20px;
  color: #ffffff;
  margin-bottom: 4px;
}

.profile-mood { font-size: 11px; color: var(--profile-text, #666); margin-bottom: 8px; }

.profile-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.profile-widget {
  background: var(--profile-widget-bg, #f5f5f5);
  border: 2px solid var(--profile-border, var(--win-dark));
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  padding: 12px;
}

.widget-header {
  background: var(--profile-header-bg);
  color: var(--win-light);
  padding: 4px 8px;
  margin: -12px -12px 12px -12px;
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
}

.widget-content { font-size: 11px; line-height: 1.6; }

.widget-favorites ul { list-style: none; padding: 0; }
.widget-favorites li { padding: 4px 0; border-bottom: 1px dotted var(--win-dark); }
.widget-favorites li:last-child { border-bottom: none; }

.widget-music-player {
  background: #000;
  color: #0f0;
  font-family: 'Courier New', monospace;
  padding: 8px;
  border: 1px solid var(--win-darker);
}

.music-display { margin-bottom: 8px; padding: 4px; background: #001100; border: 1px inset #333; }
.music-controls { display: flex; gap: 4px; justify-content: center; }

.music-btn {
  background: var(--win-gray);
  border: 1px outset var(--win-light);
  padding: 2px 8px;
  cursor: pointer;
  font-size: 10px;
}

.widget-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.gallery-item { aspect-ratio: 1; background: #ddd; border: 1px solid var(--win-darker); overflow: hidden; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }

.widget-blinkies { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.stamp {
  width: 99px;
  height: 56px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  margin: 2px;
}

.blinkie {
  width: 150px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  margin: 2px;
}

.badge {
  width: 88px;
  height: 15px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border: none;
  margin: 2px;
}

.widget-journal { max-height: 200px; overflow-y: auto; }
.journal-entry { margin-bottom: 12px; padding: 8px; background: #fff; border: 1px solid var(--win-dark); }
.journal-date { font-weight: bold; color: var(--win-blue); font-size: 10px; margin-bottom: 4px; }
.journal-text { font-size: 11px; }

.widget-quotes blockquote {
  font-style: italic;
  color: #666;
  padding: 8px;
  border-left: 3px solid var(--iridescent-1);
  margin: 8px 0;
  background: rgba(255,255,255,0.5);
}

/* Return to Deck Button */
.return-to-deck-btn {
  position: fixed;
  background: var(--win-gray);
  border: 2px solid var(--win-light);
  border-right-color: var(--win-darker);
  border-bottom-color: var(--win-darker);
  padding: 6px 14px;
  font-size: 11px;
  cursor: pointer;
  z-index: 1000;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  font-family: 'Tahoma', sans-serif;
}

.return-to-deck-btn:hover { background: var(--win-blue); color: var(--win-light); }
.return-to-deck-btn:active {
  border: 2px solid var(--win-darker);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
}

/* DECK */
.deck-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.deck {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: auto;
  padding-bottom: 10px;
}

.deck-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
  pointer-events: auto;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* CARD COMPONENT */
.card {
  position: absolute;
  width: var(--card-w);
  height: var(--card-h);
  bottom: -60px;
  left: 50%;
  transform-origin: bottom center;
  /* UPDATED: Added --x-offset support */
  transform: translateX(calc(-50% + var(--x-offset, 0px))) rotate(var(--rotation, 0deg)) translateY(var(--y-offset, 0px));
  cursor: pointer;
  transition: transform var(--dur-hover) var(--ease-bounce), filter var(--dur-hover) var(--ease-smooth), box-shadow var(--dur-hover) var(--ease-smooth);
  will-change: transform;
  pointer-events: auto;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: var(--card-radius);
  overflow: hidden;
  border: 3px solid #1a1a1e;
}

.card-front {
  background: linear-gradient(135deg, var(--card-fav1, #c0c0c0) 0%, var(--card-fav2, #808080) 100%);
  display: flex;
  flex-direction: column;
  z-index: 2;
  border: 3px solid #c9a84c;
}

.card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.15);
}

.card-suit { 
  font-size: 16px; 
  line-height: 1;
  color: #000;
  text-shadow: 
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
    0 0 6px var(--card-fav2, #c9a84c),
    0 0 12px var(--card-fav2, #c9a84c);
}


.card-portrait {
  flex: 1;
  background: #ddd;
  background-size: cover;
  background-position: center;
}

.card[data-alter="lumen"] .card-portrait { background: radial-gradient(circle at 50% 60%, #f4d03f 0%, #d4a574 30%, #2d4a3e 70%, #1a2f25 100%); }
.card[data-alter="astra"] .card-portrait { background: conic-gradient(from 0deg at 50% 50%, #2d1b4e, #4a2c6e, #7b4fa2, #c9a84c, #2d1b4e); }
.card[data-alter="ember"] .card-portrait { background: linear-gradient(180deg, #ff6b35 0%, #d42a2a 40%, #8b1a1a 70%, #2a0a0a 100%); }
.card[data-alter="marrow"] .card-portrait { background: linear-gradient(135deg, #e8e0d0 0%, #b8b0a0 30%, #4a4540 60%, #1a1815 100%); }
.card[data-alter="tide"] .card-portrait { background: linear-gradient(180deg, #a8e6cf 0%, #3d9e8f 30%, #1a5c55 60%, #0a2a28 100%); }
.card[data-alter="noctis"] .card-portrait { background: radial-gradient(circle at 50% 40%, #2a2a4e 0%, #1a1a3e 40%, #0a0a1e 100%); }

.card-footer {
  padding: 8px 10px;
  border-top: 2px solid rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.15);
  text-align: center;
}

.card-name {
  font-family: 'Georgia', serif;
  font-size: 12px;
  font-weight: bold;
  color: #000000;
  text-shadow: 
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
    0 0 3px rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.card-title {
  font-family: 'Georgia', serif;
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  text-shadow: 
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
    0 0 3px rgba(255,255,255,0.8);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-subtitle {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 9px;
  color: #000000;
  text-shadow: 
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff,
    0 0 3px rgba(255,255,255,0.8);
  margin-top: 2px;
}

.card-back-pattern {
  background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(201, 168, 76, 0.08) 8px, rgba(201, 168, 76, 0.08) 9px), repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(201, 168, 76, 0.08) 8px, rgba(201, 168, 76, 0.08) 9px), linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg);
  backface-visibility: visible;
}

.card-back-pattern::after {
  content: '✦';
  font-size: 32px;
  color: #c9a84c;
  opacity: 0.3;
}

/* Face-down cards: rotate inner to show back */
.card.face-down .card-inner {
  transform: rotateY(180deg);
}

/* CARD ANIMATIONS */
@keyframes cardShake {
  0%, 100% { transform: translateX(-50%) rotate(var(--rotation, 0deg)) translateY(var(--y-offset, 0px)); }
  20% { transform: translateX(calc(-50% - 8px)) rotate(var(--rotation, 0deg)) translateY(var(--y-offset, 0px)); }
  40% { transform: translateX(calc(-50% + 8px)) rotate(var(--rotation, 0deg)) translateY(var(--y-offset, 0px)); }
  60% { transform: translateX(calc(-50% - 6px)) rotate(var(--rotation, 0deg)) translateY(var(--y-offset, 0px)); }
  80% { transform: translateX(calc(-50% + 6px)) rotate(var(--rotation, 0deg)) translateY(var(--y-offset, 0px)); }
}

.card.face-down.clicked, .card.locked.clicked {
  animation: cardShake 0.4s ease-in-out;
  filter: brightness(0.7);
}

.card:not(.face-down):not(.locked):hover {
  bottom: -40px;
  /* UPDATED: Preserves --x-offset during hover */
  transform: translateX(calc(-50% + var(--x-offset, 0px))) rotate(var(--rotation, 0deg)) translateY(calc(var(--y-offset, 0px) - 40px)) scale(1.08);
  filter: brightness(1.05);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  z-index: 100 !important;
}

.card.neighbor-push-left {
  /* UPDATED: Preserves --x-offset */
  transform: translateX(calc(-50% + var(--x-offset, 0px) - 15px)) rotate(var(--rotation, 0deg)) translateY(var(--y-offset, 0px));
}
.card.neighbor-push-right {
  /* UPDATED: Preserves --x-offset */
  transform: translateX(calc(-50% + var(--x-offset, 0px) + 15px)) rotate(var(--rotation, 0deg)) translateY(var(--y-offset, 0px));
}

.card.face-down { cursor: default; }
.card.face-down .card-front { display: none; }
.card.face-down .card-back-pattern { display: flex; }

.card.locked {
  cursor: not-allowed;
  filter: grayscale(0.6) brightness(0.7);
}

.card.drawing {
  z-index: 200 !important;
  pointer-events: none;
}

.card.drawing .card-back-pattern {
  display: flex !important;
  opacity: 1 !important;
}

.card.returning { pointer-events: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.welcome-section, .profile-widget {
  animation: fadeIn 0.4s var(--ease-smooth) backwards;
}

/* Pronouns */
.pronouns {
  font-size: 11px;
  color: var(--profile-text, #555);
  font-style: italic;
  margin-bottom: 4px;
  display: inline-block;
  padding: 2px 6px;
  background: rgba(0,0,0,0.05);
  border-radius: 3px;
}

/* Links Widget */
.widget-links a {
  display: block;
  color: var(--profile-link, #0000ff);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px dotted var(--win-dark);
  font-size: 11px;
}
.widget-links a:hover { text-decoration: underline; }

/* Stats Grid */
.widget-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  font-size: 11px;
}
.stat-item { display: flex; flex-direction: column; }
.stat-label { font-weight: bold; color: var(--win-darker); font-size: 10px; }
.stat-value { color: var(--profile-text, #333); }

/* Kintypes */
.kin-list {
  list-style: none;
  padding: 0;
}
.kin-list li {
  padding: 4px 8px;
  margin-bottom: 4px;
  background: rgba(0,0,0,0.03);
  border-left: 3px solid var(--accent, #8338ec);
  font-size: 11px;
}

/* Sources */
.sources-list {
  list-style: none;
  padding: 0;
}
.sources-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--win-dark);
  font-size: 11px;
}

/* Wide Widgets */
.widget-wide {
  grid-column: span 2;
}

/* Concept Blocks for dense explanatory text */
.concept-block {
  background: #ffffff;
  border: 1px solid var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 11px;
  line-height: 1.6;
  color: #333;
}

.concept-block h4 {
  font-family: 'Georgia', serif;
  font-size: 13px;
  color: var(--win-blue);
  margin-top: 0;
  margin-bottom: 8px;
  border-bottom: 1px dotted var(--win-dark);
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Two-column grid for the list of formations */
.formation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.formation-item {
  background: #f5f5f5;
  border: 1px solid var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  padding: 10px;
  font-size: 11px;
  line-height: 1.5;
}

.formation-item strong {
  display: block;
  color: var(--win-blue);
  font-size: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  padding-bottom: 2px;
}

@media (max-width: 600px) {
  .widget-wide { grid-column: span 1; }
}

/* Glitter Cursor Trail */
.cursor-trail {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  font-size: 16px;
  opacity: 1;
  transform: scale(1) translateY(0);
  animation: glitterDissipate 0.8s ease-out forwards;
  color: var(--card-fav1, #d7bce2ad);
  text-shadow: 0 0 2px rgba(255,255,255,0.5);
}

@keyframes glitterDissipate {
  0% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.2) translateY(15px) rotate(180deg); }
}

/* Suit Reuse in Headers */
.widget-header::after {
  content: var(--suit-symbol, '✦');
  float: right;
  opacity: 0.5;
}

/* === RETRO MUSIC PLAYER (Theme-Aware & Eye-Friendly) === */
.widget-music {
  background: var(--profile-widget-bg, #c0c0c0);
  border: 2px solid var(--profile-border, #808080);
  border-right-color: var(--win-light, #fff);
  border-bottom-color: var(--win-darker, #404040);
  padding: 0;
  font-family: 'Tahoma', 'MS Sans Serif', sans-serif;
}

.widget-music .widget-header {
  background: var(--profile-header-bg, linear-gradient(90deg, #000080 0%, #1084d0 100%));
  color: #fff;
  padding: 2px 4px;
  margin: 0;
  font-size: 10px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--profile-border, #404040);
}

.music-player-container {
  padding: 6px;
  background: var(--profile-widget-bg, #c0c0c0);
}

/* Marquee Display */
.music-marquee {
  background: #000;
  color: var(--profile-link, #0f0);
  font-family: 'Courier New', monospace;
  font-size: 11px;
  padding: 6px 8px;
  margin-bottom: 6px;
  border: 2px inset var(--profile-border, #808080);
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-text {
  display: inline-block;
  animation: marquee 10s linear infinite;
  text-shadow: 0 0 5px var(--profile-link, #0f0);
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* Progress Bar - Fixed: No more blinding white background */
.music-progress-container {
  background: rgba(0, 0, 0, 0.2); /* Subtle recessed look */
  border: 1px inset var(--profile-border, #808080);
  height: 16px;
  margin-bottom: 6px;
  position: relative;
  overflow: hidden;
}

.music-progress-bar {
  height: 100%;
  background: var(--profile-header-bg, linear-gradient(90deg, #000080 0%, #1084d0 100%));
  width: 0%;
  transition: width 0.3s linear;
}

/* Time Display - Fixed: Transparent background, uses theme text color */
.music-time {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: var(--profile-text, #e0e0e0);
  text-align: center;
  margin-bottom: 6px;
  background: transparent;
  padding: 2px;
  font-weight: bold;
}

/* Controls Row */
.music-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}

/* Volume Slider - Fixed: No more blinding white track */
.music-volume {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--profile-widget-bg, #c0c0c0);
}

.volume-label {
  font-size: 9px;
  color: var(--profile-text, #404040);
  min-width: 30px;
  font-weight: bold;
}

.volume-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 12px;
  background: rgba(0, 0, 0, 0.2); /* Subtle recessed track */
  border: 1px inset var(--profile-border, #808080);
  outline: none;
  border-radius: 0;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 14px;
  background: var(--profile-widget-bg, #c0c0c0);
  border: 1px solid var(--win-light, #fff);
  border-right-color: var(--win-darker, #404040);
  border-bottom-color: var(--win-darker, #404040);
  cursor: pointer;
}

.volume-slider::-moz-range-thumb {
  width: 10px;
  height: 14px;
  background: var(--profile-widget-bg, #c0c0c0);
  border: 1px solid var(--win-light, #fff);
  border-right-color: var(--win-darker, #404040);
  border-bottom-color: var(--win-darker, #404040);
  cursor: pointer;
}

/* Control Buttons */
.music-buttons {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.music-control-btn {
  width: 32px;
  height: 24px;
  background: var(--profile-widget-bg, #c0c0c0);
  border: 2px solid var(--win-light, #fff);
  border-right-color: var(--win-darker, #404040);
  border-bottom-color: var(--win-darker, #404040);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Marlett', sans-serif;
  color: var(--profile-text, #000);
}

.music-control-btn:active {
  border: 2px solid var(--win-darker, #404040);
  border-right-color: var(--win-light, #fff);
  border-bottom-color: var(--win-light, #fff);
}

.music-control-btn.play-pause {
  width: 40px;
  font-family: 'Tahoma', sans-serif;
  font-size: 10px;
}

/* Visualizer Bars */
.music-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 20px;
  margin-top: 6px;
  padding: 0 4px;
  background: #000;
  border: 1px inset var(--profile-border, #808080);
}

.vis-bar {
  flex: 1;
  background: linear-gradient(to top, var(--profile-link, #00f000) 0%, var(--profile-link, #00ff00) 50%, #ffff00 80%, #ff0000 100%);
  height: 20%;
  transition: height 0.1s ease;
}

/* Former Names Widget */
.widget-former-names .former-names-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.former-name-item {
  padding: 6px 8px;
  margin-bottom: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-left: 3px solid var(--profile-border, #808080);
  font-size: 11px;
  color: var(--profile-text, #000);
}

.former-name-context {
  color: var(--profile-text, #666);
  font-style: italic;
  font-size: 10px;
  opacity: 0.8;
}

/* Era Widget */
.widget-era {
  background: var(--profile-widget-bg, #f5f5f5);
  border: 2px solid var(--profile-border, var(--win-dark));
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
  padding: 12px;
}

.widget-era .widget-content {
  font-size: 11px;
  line-height: 1.6;
}

/* Compact mode stats */
.era-stat {
  margin-bottom: 6px;
  padding: 4px 0;
  border-bottom: 1px dotted var(--win-dark);
}

.era-stat:last-child {
  border-bottom: none;
}

.era-label {
  font-weight: bold;
  color: var(--win-blue);
  margin-right: 4px;
}

/* Visual timeline mode */
.era-timeline {
  position: relative;
  height: 100px;
  margin-top: 20px;
  padding: 0 30px;
}

.timeline-track {
  position: absolute;
  top: 40px;
  left: 30px;
  right: 30px;
  height: 3px;
  background: var(--win-dark);
  border-radius: 2px;
}

.timeline-track::before,
.timeline-track::after {
  content: '';
  position: absolute;
  top: -4px;
  width: 3px;
  height: 11px;
  background: var(--win-dark);
}

.timeline-track::before { left: 0; }
.timeline-track::after { right: 0; }

.timeline-active-segment {
  position: absolute;
  top: 0;
  height: 3px;
  background: var(--profile-link, #0000ff);
  opacity: 0.7;
}

.timeline-marker {
  position: absolute;
  top: 40px;
  transform: translateX(-50%);
  text-align: center;
}

.marker-dot {
  width: 12px;
  height: 12px;
  background: var(--win-light, #fff);
  border: 3px solid var(--win-blue, #000080);
  border-radius: 50%;
  margin: 0 auto;
  position: relative;
  top: -5px;
}

.timeline-marker.active .marker-dot {
  border-color: var(--profile-link, #0000ff);
  background: var(--profile-link, #0000ff);
}

.timeline-marker.dormant .marker-dot {
  border-color: var(--win-dark, #808080);
  background: var(--win-dark, #808080);
}

.timeline-marker.vessel-bday .marker-dot {
  border-color: var(--win-darker, #404040);
  background: var(--win-darker, #404040);
}

.timeline-marker.current .marker-dot {
  border-color: var(--profile-link, #0000ff);
  background: var(--win-light, #fff);
}

.marker-label {
  font-size: 10px;
  color: var(--profile-text, #000);
  line-height: 1.3;
  white-space: nowrap;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 16px;
}

.timeline-marker.vessel-bday .marker-label,
.timeline-marker.current .marker-label {
  top: auto;
  bottom: 16px;
}

/* Noteworthy Widget */
.widget-noteworthy .noteworthy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget-noteworthy .noteworthy-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 6px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--profile-text, #000);
}

.widget-noteworthy .noteworthy-list li::before {
  content: var(--suit-symbol, '✦');
  position: absolute;
  left: 0;
  top: 0;
  color: var(--profile-link, #0000ff);
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 1200px) {
  .ie-window-container { width: calc(100% - 40px); max-width: none; }
}

@media (max-width: 768px) {
  :root { --card-w: 140px; --card-h: 220px; }
  .deck-wrapper { height: 260px; }
  .ie-window-container { height: calc(100vh - 280px); }
}