/* Import pixel fonts for Deltarune/Undertale vibe */
@import url('https://fonts.googleapis.com/css2?family=VT323&family=Comic+Papyrus&display=swap');

/* Body: Deep purple background with pixelated texture */
body {
  background: url('../Icons/tile_masks.png') repeat;
  background-color: #280732; /* Deep Purple */
  color: #e1e5a6; /* Light Greenish-Yellow for readable text */
  font-family: 'VT323', monospace;
  font-size: 16px;
  margin: 0;
  padding: 0;
  text-shadow: 2px 2px 3px #000;
  cursor: url('https://cur.cursors-4u.net/games/gam-13/gam1232.cur'), auto;
}

@font-face {
  font-family: 'Mario64';
  src: url('../Fonts/Mario64.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KiwiSoda';
  src: url('../Fonts/KiwiSoda.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'PixelDart';
  src: url('../Fonts/PixelDart.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Container: Dark navy-purple with pixelated stone texture */
#container {
  width: 900px;
  height: 90vh;
  margin: 5vh auto;
  background: url('https://www.toptal.com/designers/subtlepatterns/uploads/stone.png') repeat;
  background-color: #1f0763; /* Dark Navy-Purple */
  border: 6px solid #000;
  box-shadow: 0 0 12px #7b9af3; /* Vivid Blue glow */
  padding: 10px;
  position: relative;
  z-index: 200;
  display: flex;
  flex-direction: column;
}

/* Navigation and Header Wrapper */
.nav-header-wrapper {
  width: 650px; /* Leave ~250px for countdown on the right */
  display: flex;
  flex-direction: column;
}

/* Header: Contains navigation and title */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 210;
}

/* Main Navigation: Gradient with bright accents */
nav#navbar {
  background: linear-gradient(to right, #434850, #7f7397); /* Dark Gray to Muted Purple-Gray */
  border: 5px solid #000;
  border-radius: 10px;
  padding: 5px;
  margin-bottom: 3px;
  text-align: center;
  display: flex;
  justify-content: center;
  box-shadow: 0 0 10px #7b9af3; /* Vivid Blue glow */
  z-index: 210;
  width: 100%;
}

nav#navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center; /* Center navigation items */
  gap: 10px; /* Even spacing */
  flex-wrap: wrap;
}

nav#navbar li {
  margin: 0;
}

nav#navbar a {
  color: #e1e5a6; /* Light Greenish-Yellow */
  text-decoration: none;
  font-family: 'VT323', monospace;
  font-size: 16px;
  padding: 10px 15px;
  background: transparent;
  border: none;
  display: block;
  transition: background 0.2s, transform 0.1s, box-shadow 0.1s, text-shadow 0.2s;
  box-shadow: 0 4px 0 #000;
  text-shadow: 2px 2px 3px #000;
  animation: neon-flicker 3s infinite;
}

nav#navbar a:hover {
  animation: none;
  background: rgba(225, 229, 166, 0.2); /* Light Greenish-Yellow overlay */
  transform: translateY(2px);
  box-shadow: 0 2px 0 #000;
  text-shadow: 0 0 5px #e1e5a6;
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px #e1e5a6, 0 0 10px #e1e5a6, 0 0 15px #7b9af3;
    opacity: 1;
  }
  20%, 24%, 55% {
    text-shadow: none;
    opacity: 0.7;
  }
}

/* Navigation Container for Social Nav */
.nav-container {
  width: 100%;
  margin-bottom: 5px;
}

/* Social Navigation: Mini icon-based nav bar */
nav#social-nav-container {
  background: linear-gradient(to right, #434850, #7f7397); /* Dark Gray to Muted Purple-Gray */
  border: 3px solid #000;
  border-radius: 8px;
  padding: 5px;
  text-align: center;
  display: flex;
  justify-content: center;
  box-shadow: 0 0 8px #7b9af3; /* Vivid Blue glow */
  z-index: 210;
  width: 100%;
}

nav#social-nav-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
  justify-content: center; /* Center social icons */
}

nav#social-nav-container li {
  margin: 0;
}

nav#social-nav-container a {
  display: block;
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}

nav#social-nav-container img {
  width: 32px;
  height: 32px;
  filter: pixelate(2px);
}

nav#social-nav-container a:hover img {
  transform: scale(1.2);
  filter: brightness(1.3);
  box-shadow: 0 0 8px #e1e5a6; /* Light Greenish-Yellow glow */
}

/* Header Title: Pixelated title */
header h1 {
  font-family: 'Comic Papyrus', cursive;
  font-size: 32px;
  color: #e1e5a6; /* Light Greenish-Yellow */
  text-shadow: 3px 3px 3px #000;
  background: #434850; /* Dark Gray */
  padding: 8px;
  border: 2px solid #000;
  border-radius: 6px;
  position: relative;
  animation: glitch 2s infinite;
  animation-play-state: paused;
  margin: 0;
  width: 100%;
  text-align: center;
}

header h1:hover {
  animation-play-state: running;
}

header h1::before, header h1::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip: rect(0, 900px, 0, 0);
}

header h1::before {
  color: #7b9af3; /* Vivid Blue */
  animation: glitch-top 1s infinite;
  animation-play-state: paused;
}

header h1::after {
  color: #e1e5a6; /* Light Greenish-Yellow */
  animation: glitch-bottom 1.5s infinite;
  animation-play-state: paused;
}

header h1:hover::before, header h1:hover::after {
  animation-play-state: running;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(2px, -2px); }
  60% { transform: translate(-2px, 0); }
  80% { transform: translate(2px, 2px); }
  100% { transform: translate(0); }
}

@keyframes glitch-top {
  0% { clip: rect(0, 900px, 0, 0); transform: translate(-2px, 0); }
  20% { clip: rect(20px, 900px, 30px, 0); transform: translate(2px, 0); }
  40% { clip: rect(40px, 900px, 50px, 0); transform: translate(-2px, 0); }
  60% { clip: rect(60px, 900px, 70px, 0); transform: translate(2px, 0); }
  80% { clip: rect(80px, 900px, 90px, 0); transform: translate(-2px, 0); }
  100% { clip: rect(0, 900px, 0, 0); transform: translate(0); }
}

@keyframes glitch-bottom {
  0% { clip: rect(0, 900px, 0, 0); transform: translate(2px, 0); }
  20% { clip: rect(30px, 900px, 40px, 0); transform: translate(-2px, 0); }
  40% { clip: rect(50px, 900px, 60px, 0); transform: translate(2px, 0); }
  60% { clip: rect(70px, 900px, 80px, 0); transform: translate(-2px, 0); }
  80% { clip: rect(90px, 900px, 100px, 0); transform: translate(2px, 0); }
  100% { clip: rect(0, 900px, 0, 0); transform: translate(0); }
}

/* Countdown Clock */
.countdown-wrapper {
  position: absolute;
  top: 10px; /* Align with top of nav */
  right: 10px; /* Right edge of #container */
  width: 200px; /* Fit clock and timer */
  z-index: 200;
}

.countdown-clock-container {
  display: flex;
  flex-direction: column; /* Stack clock above timer */
  align-items: center;
  gap: 10px;
}

.countdown-clock {
  position: relative;
  width: 150px; /* Smaller to fit */
  height: 150px;
}

.clock-face {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Minute Hand (Outer Circle) */
.minute-hand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #434850; /* Dark Gray */
  border: 4px solid #000;
  border-radius: 50%;
  box-shadow: 0 0 8px #7b9af3; /* Vivid Blue glow */
  z-index: 1;
  transform-origin: center;
}

/* Hour Hand (Middle Circle - Day/Night Art) */
.hour-hand {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 134px; /* Scaled down */
  height: 134px;
  border: 4px solid #000;
  border-radius: 50%;
  box-shadow: 0 0 8px #7b9af3; /* Vivid Blue glow */
  z-index: 2;
  transform-origin: center;
}

.hour-hand.day {
  background: url('../../Icons/day_clock.png') no-repeat center;
  background-size: cover;
  transform: rotate(180deg);
}

.hour-hand.night {
  background: #1f0763; /* Dark Navy-Purple */
  background-size: cover;
}

/* Days Remaining (Inner Circle) */
.days-remaining {
  position: absolute;
  top: 45px;
  left: 45px;
  width: 60px;
  height: 60px;
  background: #280732; /* Deep Purple */
  border: 4px solid #000;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 8px #7b9af3; /* Vivid Blue glow */
  z-index: 3;
}

.days-remaining span {
  font-family: 'VT323', monospace;
  color: #e1e5a6; /* Light Greenish-Yellow */
  text-shadow: 2px 2px 3px #000;
}

#days-remaining-clock {
  font-size: 16px;
  font-weight: bold;
}

.days-label {
  font-size: 10px;
}

/* Countdown Timer (Horizontal Layout) */
.countdown-timer {
  display: flex;
  flex-direction: row; /* Horizontal layout */
  gap: 8px;
  background: #434850; /* Dark Gray */
  padding: 8px;
  border: 3px solid #000;
  box-shadow: 0 0 8px #7b9af3; /* Vivid Blue glow */
  border-radius: 6px;
  justify-content: center;
}

.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #e1e5a6; /* Light Greenish-Yellow */
  font-family: 'VT323', monospace;
  text-shadow: 2px 2px 3px #000;
  min-width: 40px; /* Ensure units fit */
}

.countdown-unit span:first-child {
  font-size: 18px; /* Smaller for horizontal fit */
  font-weight: bold;
}

.unit-label {
  font-size: 10px; /* Smaller for horizontal fit */
}

/* Content Wrapper: Flexbox for List and Details */
.content-wrapper {
  display: flex;
  gap: 10px;
  flex: 1;
  min-height: 0;
}

/* Scrollable List Container */
.list-container {
  flex: 1;
  background: #1f0763; /* Dark Navy-Purple */
  border: 4px solid #000;
  box-shadow: inset 0 0 5px #7b9af3; /* Vivid Blue glow */
  padding: 8px;
  overflow-y: auto;
  z-index: 210;
  max-height: 100%;
}

/* Scrollable Details Container */
.details-container {
  flex: 1;
  background: #1f0763; /* Dark Navy-Purple */
  border: 4px solid #000;
  box-shadow: inset 0 0 5px #7b9af3; /* Vivid Blue glow */
  padding: 8px;
  overflow-y: auto;
  z-index: 210;
  max-height: 100%;
}

.details-container .placeholder {
  font-family: 'Comic Papyrus', cursive;
  font-style: italic;
  color: #7f7397; /* Muted Purple-Gray */
  text-align: center;
  text-shadow: 2px 2px 3px #000;
}

.details-container .details-content {
  font-family: 'KiwiSoda', 'VT323', monospace;
  font-size: 14px;
  line-height: 1.5;
  color: #e1e5a6; /* Light Greenish-Yellow */
  background: #434850; /* Dark Gray */
  padding: 10px;
  border: 3px solid #000;
  border-radius: 4px;
  box-shadow: 0 0 8px #7b9af3; /* Vivid Blue glow */
  text-shadow: 2px 2px 3px #000;
}

/* Details Header */
.details-content .details-header {
  font-family: 'Comic Papyrus', cursive;
  font-size: 20px;
  color: #e1e5a6; /* Light Greenish-Yellow */
  text-shadow: 3px 3px 3px #000;
  margin: 0 0 10px 0;
  text-align: center;
}

/* Style images in details-content */
.details-content img {
  max-width: 100%;
  max-height: 200px;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 10px auto;
  border: 3px solid #000;
  box-shadow: 0 0 8px #7b9af3; /* Vivid Blue glow */
}

/* Style paragraphs and lists in details-content */
.details-content p {
  margin: 8px 0;
}

/* Custom Scrollbar: Retro style */
.list-container::-webkit-scrollbar,
.details-container::-webkit-scrollbar {
  width: 10px;
}

.list-container::-webkit-scrollbar-track,
.details-container::-webkit-scrollbar-track {
  background: #280732; /* Deep Purple */
  border: 1px solid #000;
}

.list-container::-webkit-scrollbar-thumb,
.details-container::-webkit-scrollbar-thumb {
  background: #7b9af3; /* Vivid Blue */
  border: 1px solid #000;
}

.list-container::-webkit-scrollbar-thumb:hover,
.details-container::-webkit-scrollbar-thumb:hover {
  background: #e1e5a6; /* Light Greenish-Yellow */
}

/* Bucket List Items */
.bucket-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.bucket-list > li {
  font-family: 'VT323', monospace;
  font-size: 24px;
  line-height: 1.5;
  padding: 5px 8px;
  border-bottom: 1px dotted #4a3728;
  transition: background 0.3s, transform 0.2s;
  cursor: pointer;
  position: relative;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

.bucket-list > li:hover {
  background: rgba(74, 55, 40, 0.3);
  transform: translateX(3px);
}

/* Expandable Sublist */
.sublist {
  list-style: none;
  padding: 0;
  margin: 0 0 0 15px;
  display: none;
}

.sublist li {
  font-family: 'VT323', monospace;
  font-size: 18px;
  line-height: 1.4;
  padding: 3px 8px;
  border-bottom: 1px dotted #4a3728;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7);
}

/* State Styles */
.completed {
  color: #00FF00; /* OSRS Green */
}

.in-progress {
  color: #FFFF00; /* OSRS Yellow */
}

.incomplete {
  color: #FF0000; /* OSRS Red */
}

.sublist li:hover {
  background: rgba(74, 55, 40, 0.3);
  transform: translateX(3px);
}

/* Show sublist when parent has 'expanded' class */
.bucket-list > li.expanded .sublist {
  display: block;
}

/* Arrow indicator for expandable items */
.bucket-list > li.has-sublist::before {
  content: '▶';
  display: inline-block;
  margin-right: 5px;
  transition: transform 0.2s;
}

.bucket-list > li.expanded::before {
  content: '▼';
}

/* Responsive */
@media (max-width: 920px) {
  #container {
    width: 95%;
    height: 95vh;
    margin: 2.5vh auto;
    padding: 8px;
  }

  .nav-header-wrapper {
    width: 100%;
  }

  .countdown-wrapper {
    position: static;
    width: 100%;
    margin: 10px auto;
  }

  .countdown-clock-container {
    flex-direction: column;
    gap: 10px;
  }

  .countdown-timer {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
  }

  .countdown-unit {
    align-items: center;
    min-width: 60px; /* Slightly wider for mobile */
  }

  .countdown-unit span:first-child {
    font-size: 20px;
  }

  .unit-label {
    font-size: 12px;
  }

  .countdown-clock {
    width: 160px;
    height: 160px;
  }

  .hour-hand {
    top: 8px;
    left: 8px;
    width: 144px;
    height: 144px;
  }

  .days-remaining {
    top: 48px;
    left: 48px;
    width: 60px;
    height: 60px;
  }

  #days-remaining-clock {
    font-size: 16px;
  }

  .days-label {
    font-size: 10px;
  }

  .content-wrapper {
    flex-direction: column;
    gap: 8px;
  }

  .list-container,
  .details-container {
    flex: none;
    height: 40%;
    max-height: 40%;
    padding: 6px;
  }

  .bucket-list > li {
    font-size: 14px;
  }

  .sublist li {
    font-size: 12px;
  }

  .details-container .details-content {
    font-size: 12px;
  }

  .details-content img {
    max-height: 150px;
  }

  .details-content .details-header {
    font-size: 16px;
  }

  nav#social-nav-container ul {
    flex-direction: column;
    gap: 5px;
  }
}