/* --- Root Variables for easy theme changes --- */
:root {
  --font-handwriting: 'Kalam', cursive;
  --font-sans: sans-serif; /* A fallback font */
  --border-color: #9a8f78;
  --color-text: #3d3522;
  --color-bg: #fefdf8;
  --color-primary: #8ec5a0;  /* Soft summer green */
  --color-secondary: #fbeaa5; /* Soft summer yellow */
  --color-accent: #f5b9b0;  /* Soft summer pink */
  --border-style: 2px solid var(--border-color);
}

/* --- Time-of-Day Themes --- */
body.theme-morning {
  --color-bg: #fdf3e7;
  --color-secondary: #fde2c5;
}
body.theme-morning #sun-moon-anim {
  background: #fbeaa5; box-shadow: 0 0 20px #fbeaa5;
  animation: rise-set 30s linear infinite;
}
body.theme-day {
  --color-bg: #f0f8ff;
  --color-secondary: #fbeaa5;
}
body.theme-day #sun-moon-anim {
  background: #fbeaa5; box-shadow: 0 0 20px #fbeaa5;
  animation: rise-set 30s linear infinite; animation-delay: -15s;
}
body.theme-evening {
  --color-bg: #f8e7f5;
  --color-secondary: #f5b9b0;
}
body.theme-evening #sun-moon-anim {
  background: #fbeaa5; box-shadow: 0 0 20px #f5b9b0;
  animation: rise-set 30s linear infinite; animation-delay: -22s;
}
body.theme-night {
  --border-color-night: rgba(240, 238, 230, 0.7);
  --color-text: #fefdf8;
  --color-bg: #2c3e50;
  --color-primary: #5a7d8c;
  --color-secondary: #fbeaa5;
  --color-accent: #f5b9b0;
  --border-style: 2px solid var(--border-color-night);
}
body.theme-night #sun-moon-anim {
  background: #f4f4f4; box-shadow: 0 0 10px #ffffff;
  animation: rise-set 30s linear infinite;
}

/* --- Night Mode Specific Overrides --- */
body.theme-night .container { background: #34495e; box-shadow: 5px 5px 0px var(--color-primary); }
body.theme-night .tab-button { background: #2c3e50; color: var(--color-text); border: 2px solid var(--border-color-night); }
body.theme-night .tab-button:hover { background: var(--color-primary); }
body.theme-night .tab-button.active { background: var(--color-secondary); color: #3d3522; border-color: var(--color-secondary); }
body.theme-night #countdown-timer { background: var(--color-secondary); color: #3d3522; border: 2px solid var(--color-secondary); box-shadow: 3px 3px 0px var(--color-accent); }
body.theme-night #theme-test-button { background: #34495e; color: var(--color-text); border: 2px solid var(--border-color-night); }
body.theme-night .hotspot { background: #2c3e50; color: var(--color-text); border: 2px solid var(--border-color-night); }
body.theme-night .hotspot.active { background: var(--color-secondary); color: #3d3522; border-color: var(--color-secondary); }
body.theme-night .form-group input[type="text"],
body.theme-night .form-group input[type="email"],
body.theme-night .form-group select,
body.theme-night .form-group textarea {
  background: #34495e;
  color: var(--color-text);
  border: 2px solid var(--border-color-night);
}
body.theme-night .checkbox-group label { color: var(--color-text); }
body.theme-night #top-friends { background: #34495e; }
body.theme-night .item-divider { border-color: var(--border-color-night); }
body.theme-night #game-timer,
body.theme-night #game-score {
  color: #ffffff;
  text-shadow: 2px 2px 0px var(--color-primary);
}
body.theme-night #game-scoreboard {
  background: #34495e;
  border-color: var(--border-color-night);
  box-shadow: 5px 5px 0px var(--color-primary);
}
body.theme-night #close-scoreboard-button {
  color: var(--border-color-night);
}
body.theme-night .schedule-day-button {
  background: #2c3e50;
  color: var(--color-text);
  border-color: var(--border-color-night);
}
body.theme-night .schedule-day-button.active {
  background: var(--color-secondary);
  color: #3d3522;
  border-color: var(--color-secondary);
}
body.theme-night .schedule-item::before {
  background-color: var(--border-color-night);
}
body.theme-night .schedule-item::after {
  background-color: var(--color-secondary);
  border-color: var(--border-color-night);
}
body.theme-night .favorite-btn {
  color: var(--color-secondary);
}
body.theme-night .favorite-btn.favorited {
  color: var(--color-accent);
}
body.theme-night .schedule-toggle-switch .slider {
  background-color: #5a7d8c;
}
body.theme-night #game-title {
  color: #fff;
  text-shadow: 2px 2px 0px var(--color-accent);
}
body.theme-night #game-title span {
  color: var(--color-secondary);
}
body.theme-night #milo-celebration-overlay.active {
  background-color: rgba(44, 62, 80, 0.75);
}

/* FIX: MAP TOGGLE BUTTONS IN NIGHT MODE */
body.theme-night .map-toggle-button {
  background: #2c3e50;
  color: #fefdf8; /* Force white text */
  border: 2px solid var(--border-color-night);
}
body.theme-night .map-toggle-button.active {
  background: var(--color-secondary);
  color: #3d3522; /* Dark text on yellow background */
  border-color: var(--color-secondary);
}

/* FIX: GUEST LIST IN NIGHT MODE */
body.theme-night .scrollable-guest-list {
  background: rgba(0, 0, 0, 0.2); /* Dark background instead of white */
  border: 2px solid var(--border-color-night);
}
body.theme-night .guest-list-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle separator */
  color: var(--color-text);
}
body.theme-night .guest-list-item:hover {
  background: rgba(255, 255, 255, 0.15); /* Subtle light highlight */
}
body.theme-night .guest-connection-note {
  color: #bdc3c7; /* Lighter grey for readability */
}


/* --- NIGHT MODE FOR PEEKING ICONS (FIXED) --- */
/* 1. Invert turns black lines white, and white bg black */
/* 2. Screen makes the black bg transparent, keeping the white lines! */
body.theme-night [id^="peeking-"] {
  filter: invert(1) grayscale(1) contrast(2);
  mix-blend-mode: screen;
  opacity: 1;
}


/* --- General Styles --- */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: 20px;
  font-family: var(--font-handwriting);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.7; font-size: 18px;
  transition: background-color 1s ease, color 1s ease;
  overflow-x: hidden;
}

/* --- Bass Drop Celebration Animation --- */
@keyframes bass-drop {
  0% { transform: scale(1); }
  15% { transform: scale(1.05); } /* The Inhale */
  25% { transform: scale(0.95); } /* THE DROP (Impact) */
  35% { transform: scale(1.03); } /* Reverb 1 */
  45% { transform: scale(0.98); } /* Reverb 2 */
  55% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

.bass-drop-active {
  /* Use the animation */
  animation: bass-drop 0.5s ease-in-out forwards;
  /* Critical: Prevent scrollbars from flashing during zoom */
  overflow: hidden;
  /* Force hardware acceleration for smooth punch */
  will-change: transform;
}


/* --- Countdown Timer "Sticker" --- */
#countdown-timer {
  position: absolute; top: -20px; right: 20px;
  z-index: 1001;
  transform: rotate(5deg);
  font-size: 1.1rem; font-weight: 700;
  background: var(--color-secondary);
  color: var(--color-text);
  padding: 10px 15px; border-radius: 10px;
  border: var(--border-style);
  box-shadow: 3px 3px 0px var(--color-primary);
  transition: all 0.5s ease;
  /* ADDED: Make sure cursor changes so user knows it's interactive */
  cursor: pointer;
}

/* NEW: Wrapper for container and cat */
.container-wrapper {
  position: relative;
  max-width: 960px;
  /* Increased margins to prevent icons from getting cut off */
  margin: 80px auto 80px auto;
}

.container {
  /* max-width and margin are now on the wrapper */
  max-width: 100%;
  margin: 0;
  padding: 20px 40px;
  background: var(--color-bg);
  border: var(--border-style);
  border-radius: 15px;
  box-shadow: 5px 5px 0px var(--color-secondary);
  position: relative;
  z-index: 10; /* Paper sits ON TOP of icons */
  transition: all 0.5s ease;
}

/* --- Header & Animated Banner --- */
header { text-align: center; margin-bottom: 30px; }
/* ADDED: Cursor for the whole header */
header#dt { cursor: pointer; }
header h1 { font-size: 3.5rem; color: var(--color-accent); margin: 0; font-weight: 700; }
header h2 { font-size: 1.5rem; margin: 10px 0 0 0; perspective: 300px; }
header h2 span {
  display: inline-block;
  background: var(--color-accent);
  color: white;
  padding: 5px 20px; border-radius: 5px;
  box-shadow: 2px 2px 0px var(--color-secondary);
  animation: wiggle 3s ease-in-out infinite;
  /* cursor: pointer; (REMOVED, moved to header#dt) */
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
header .date { font-size: 1.2rem; color: var(--color-primary); font-weight: 700; margin-top: 20px; }

/* NEW: Mobile Menu Toggle */
#mobile-menu-toggle {
  display: none; /* Hidden on desktop */
  position: absolute;
  top: 15px;
  right: 15px;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
  line-height: 1;
  padding: 5px;
}
body.theme-night #mobile-menu-toggle {
  color: var(--color-secondary);
}


h3, h4 {
  font-weight: 700; color: var(--color-primary);
  border-bottom: var(--border-style);
  padding-bottom: 5px; display: inline-block;
}
a { color: var(--color-accent); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Tab Navigation (FIXED) --- */
.tab-nav {
  display: flex; justify-content: center;
  flex-wrap: nowrap; /* <-- Prevents wrapping */
  overflow-x: auto; /* <-- Allows scrolling on tiny screens */
  margin-bottom: 20px; border-bottom: var(--border-style); padding-bottom: 20px;
  transition: max-height 0.3s ease-out; /* NEW: For mobile dropdown */
}
.tab-button {
  font-family: var(--font-handwriting);
  /* UPDATED: Smaller font and padding to fit all tabs */
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 12px;
  margin: 5px;
  border: var(--border-style); border-radius: 10px;
  background: #ffffff;
  color: var(--color-text);
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0; /* <-- Prevents buttons from shrinking */
}
.tab-button:hover { background-color: var(--color-secondary); transform: translateY(-2px); }
.tab-button.active {
  background-color: var(--color-primary); color: white;
  border-color: var(--color-primary);
  box-shadow: 2px 2px 0px var(--color-secondary);
}

/* --- Tab Content Panes --- */
.tab-pane { display: none; animation: fadeIn 0.5s ease; }
.tab-pane.active { display: block; }
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.placeholder-graphic {
  width: 100%; height: 250px;
  background: #f0f0f0; border: var(--border-style); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; margin: 20px 0;
  color: #888; font-size: 1rem; padding: 20px;
}

/* Polaroid strip */
.td-polaroid-strip {
  margin: 40px auto 50px;
  max-width: 900px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0;                 /* we’ll overlap via negative margins */
  position: relative;
}

.td-polaroid {
  background: #fffdf4;
  border-radius: 8px;
  padding: 10px 10px 26px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  border: 2px solid #fbeaa5;
  width: 160px;
  aspect-ratio: 3 / 4;    /* keeps the “photo” shape */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 -16px;        /* slight overlap between cards */
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.td-polaroid img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* no distortion; fill the frame */
  border-radius: 4px;
  display: block;
}

/* Subtle scattered look */
.td-polaroid-1 { transform: rotate(-6deg) translateY(10px); }
.td-polaroid-2 { transform: rotate(-2deg) translateY(0); }
.td-polaroid-3 { transform: rotate(3deg) translateY(8px); }
.td-polaroid-4 { transform: rotate(-3deg) translateY(4px); }
.td-polaroid-5 { transform: rotate(5deg) translateY(12px); }

/* Hover: bring one photo forward a bit */
.td-polaroid:hover {
  transform: translateY(-6px) scale(1.03) rotate(0deg);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.22);
  z-index: 2;
}

/* Stack nicer on small screens */
@media (max-width: 700px) {
  .td-polaroid-strip {
    flex-wrap: wrap;
    justify-content: center;
  }
  .td-polaroid {
    margin: 8px;
    width: 140px;
    transform: none;
  }
}

/* --- "How to Get There" Interactive Map --- */
.interactive-map-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.hotspot {
  position: absolute;
  font-family: var(--font-handwriting);
  font-size: 1rem; font-weight: 700;
  background: #ffffff;
  border: var(--border-style); border-radius: 50%; /* Circular spots */
  width: 80px; height: 80px;
  cursor: pointer;
  color: var(--color-text);
  transition: all 0.3s ease;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 5px;
  line-height: 1.2;
}
.hotspot:hover {
  background-color: var(--color-secondary);
  transform: scale(1.1);
}
.hotspot.active {
  background-color: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
  transform: scale(1.1);
}
.info-panel-box {
  border: var(--border-style);
  border-radius: 10px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.5);
}
.info-panel { display: none; }
.info-panel.active { display: block; animation: fadeIn 0.3s ease; }

/* --- "What to Do" Map Toggles --- */
.map-toggle-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}
.map-toggle-button {
  font-family: var(--font-handwriting);
  font-size: 1rem; font-weight: 700;
  background: #ffffff;
  border: var(--border-style); border-radius: 10px;
  padding: 8px 15px;
  cursor: pointer; color: var(--color-text);
  transition: all 0.3s ease;
}
.map-toggle-button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.map-content-pane { display: none; }
.map-content-pane.active { display: block; animation: fadeIn 0.5s ease; }


/* --- NEW: Event Schedule Tab --- */
.schedule-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 15px;
}
.schedule-toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
  margin-left: 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.schedule-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.schedule-toggle-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 28px;
}
.schedule-toggle-switch .slider:before {
  position: absolute;
  content: "★";
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  color: var(--color-accent);
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}
.schedule-toggle-switch input:checked + .slider {
  background-color: var(--color-primary);
}
.schedule-toggle-switch input:checked + .slider:before {
  transform: translateX(22px);
}
.schedule-day-nav {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: var(--border-style);
  padding-bottom: 20px;
}
.schedule-day-button {
  font-family: var(--font-handwriting);
  font-size: 1rem; font-weight: 700;
  background: #ffffff;
  border: var(--border-style); border-radius: 10px;
  padding: 8px 15px;
  cursor: pointer; color: var(--color-text);
  transition: all 0.3s ease;
}
.schedule-day-button.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.schedule-timeline {
  display: none;
}
.schedule-timeline.active {
  display: block;
  animation: fadeIn 0.5s ease;
}
.schedule-timeline ul {
  list-style: none;
  padding: 0 0 0 40px; /* UPDATED: Was 20px */
  margin: 0;
  position: relative;
}
/* The timeline "line" */
.schedule-timeline ul::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 20px; /* UPDATED: Was 28px */
  bottom: 10px;
  width: 4px;
  background: var(--border-color);
  border-radius: 2px;
  opacity: 0.3;
}
.schedule-item {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-bottom: 25px;
  padding-left: 40px; /* UPDATED: Was 20px */
}
/* The timeline "dot" */
.schedule-item::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 12px; /* UPDATED: Was -8px. (20px line - 8px radius) */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-secondary);
  border: 4px solid var(--border-color);
  z-index: 2;
}
.schedule-time {
  font-weight: 700;
  font-size: 1.1rem;
  width: 100px;
  flex-shrink: 0;
  padding-top: 5px;
}
.schedule-details {
  padding-left: 20px;
}
.schedule-details h4 {
  font-size: 1.3rem;
  border-bottom: none;
  margin: 0 0 5px 0;
  padding: 0;
}
.schedule-details p {
  margin: 0;
  font-size: 1.1rem;
}
.favorite-btn {
  position: absolute;
  top: 5px;
  left: -24px; /* UPDATED: Was -42px. (20px line - 44px) */
  font-size: 2rem;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--color-secondary);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
  cursor: pointer;
  z-index: 3;
  transition: all 0.2s ease;
}
.favorite-btn.favorited {
  color: var(--color-accent);
  transform: scale(1.1);
}
/* "My Schedule" filtering logic */
#schedule.show-favorites .schedule-item {
  display: none;
}
#schedule.show-favorites .schedule-item.favorited {
  display: flex;
}


/* --- Google Map Container --- */
.map-container {
  position: relative; overflow: hidden;
  width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin: 20px 0;
}
.map-container iframe {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border: var(--border-style);
  border-radius: 10px;
}

/* --- Registry Page Buttons --- */
.registry-links { display: flex; flex-direction: column; gap: 15px; margin-top: 20px; }
.registry-button {
  display: block; background: var(--color-accent);
  color: white; padding: 15px; text-align: center;
  border-radius: 10px; font-size: 1.2rem;
  transition: all 0.3s ease;
  /* ADDED: Styles for form button */
  font-family: var(--font-handwriting);
  border: none;
  width: 100%;
  cursor: pointer;
}
.registry-button:hover { background: var(--color-primary); text-decoration: none; transform: scale(1.02); }

/* --- ADDED: RSVP Form Styles --- */
#rsvp-form {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-group { display: flex; flex-direction: column; }
.form-group label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 5px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group select,
.form-group textarea {
  font-family: var(--font-handwriting);
  font-size: 1.1rem;
  padding: 10px;
  border: var(--border-style);
  border-radius: 10px;
  background: #fff;
  color: var(--color-text);
  transition: all 0.5s ease;
}
.checkbox-group {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.checkbox-group input[type="checkbox"] {
  width: 20px; height: 20px;
  margin-right: 10px;
  accent-color: var(--color-accent); /* Fun check color */
}
.checkbox-group label {
  font-size: 1.1rem;
  color: var(--color-text);
  font-weight: 400; /* Regular weight */
  margin-bottom: 0;
  transition: color 0.5s ease;
}
#days-attending-group { display: none; /* Hidden by default */ }


/* --- ADDED: Top 8 Friends List (MySpace Style) --- */
.myspace-container {
  border: var(--border-style);
  border-radius: 10px;
  padding: 20px;
  background: white;
  margin-bottom: 30px;
}
.myspace-header {
  color: var(--color-primary);
  border-bottom: var(--border-style);
  padding-bottom: 5px;
  margin-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.myspace-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-top: 15px;
}
.friend-box {
  text-align: center;
}
.friend-pic {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: var(--color-secondary);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-text);
  margin-bottom: 5px;
}
.friend-name {
  font-weight: bold;
  font-size: 0.9rem;
  color: var(--color-accent);
}
.tom-text { color: var(--color-primary) !important; }

/* --- Side-by-Side Map Layout --- */
.rsvp-grid-layout {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.scrollable-guest-list {
  max-height: 400px;
  overflow-y: auto;
  border: var(--border-style);
  border-radius: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.5);
}
.guest-list-item {
  padding: 8px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
  cursor: pointer;
}
.guest-list-item:hover {
  background: rgba(255,255,255,0.8);
}
.guest-list-header {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}
.guest-connection-note {
  display: none;
  font-size: 0.9rem;
  color: #666;
  font-style: italic;
  margin-top: 4px;
}
.guest-list-item.open .guest-connection-note {
  display: block;
}

/* --- Festival Pass Ticket --- */
.festival-pass {
  border: 3px dashed var(--color-text);
  background: var(--color-bg);
  padding: 20px;
  margin-bottom: 30px;
  position: relative;
  border-radius: 10px;
  box-shadow: 5px 5px 0px var(--color-secondary);
}
.pass-header {
  text-align: center;
  border-bottom: 2px solid var(--color-text);
  margin-bottom: 15px;
  padding-bottom: 10px;
}
.pass-header h2 { margin: 0; color: var(--color-primary); }
.pass-header span { font-size: 0.9rem; letter-spacing: 2px; text-transform: uppercase; }
.pass-details {
  font-family: 'Courier New', monospace; /* Monospace for ticket feel */
  font-weight: bold;
}
.pass-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}


/* --- NEW: Lodging Item Divider --- */
hr.item-divider {
  border: 0;
  height: 2px;
  border-top: 2px solid var(--border-color);
  opacity: 0.5;
  margin: 30px 0;
}

/* --- Footer --- */
footer { text-align: center; margin-top: 30px; font-size: 0.9rem; opacity: 0.8; }
#theme-test-button {
  font-family: var(--font-handwriting); font-size: 0.9rem;
  background: #fff; border: var(--border-style); border-radius: 5px;
  padding: 5px 10px; cursor: pointer;
  margin-top: 10px; transition: all 0.3s ease;
}
#theme-test-button:hover { background: var(--color-secondary); }


/* --- Sky Animations (RESTORED FULLY) --- */
#sky-elements {
  position: fixed; top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; /* Allows clicking through */
}

#sun-moon-anim {
  width: 60px; height: 60px;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  transition: background-color 1s ease, box-shadow 1s ease;
  pointer-events: auto; /* Make ONLY the sun/moon clickable */
  cursor: pointer;
}
@keyframes rise-set {
  0% { transform: translate(-10vw, 35vh) rotate(0deg); }
  50% { transform: translate(50vw, 10vh) rotate(180deg); }
  100% { transform: translate(110vw, 35vh) rotate(360deg); }
}

/* Sun Particle Explosion */
.sun-particle {
  position: fixed; /* Position relative to viewport */
  width: 10px;
  height: 10px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  animation: explode 1s ease-out forwards;
}
@keyframes explode {
  from {
    transform: translate(0, 0);
    opacity: 1;
  }
  to {
    transform: translate(var(--x), var(--y));
    opacity: 0;
  }
}

/* Cloud Styles (Denser) */
.cloud {
  position: absolute; width: 120px; height: 40px;
  background: #ffffff; border-radius: 20px;
  opacity: 0.8;
  transition: opacity 1.5s ease, background-color 1.5s ease, filter 1.5s ease;
  animation: drift 60s linear infinite;
}
.cloud::before, .cloud::after {
  content: ''; position: absolute;
  background: #ffffff; border-radius: 50%;
  transition: background-color 1.5s ease;
}
.cloud::before { width: 50px; height: 50px; top: -25px; left: 20px; }
.cloud::after { width: 60px; height: 60px; top: -20px; right: 15px; }
/* Clouds */
#cloud-1 { top: 20vh; transform: scale(0.8); animation-duration: 45s; }
#cloud-2 { top: 35vh; transform: scale(1.1); animation-duration: 60s; animation-delay: -10s; }
#cloud-3 { top: 25vh; transform: scale(0.6); animation-duration: 70s; animation-delay: -30s; }
#cloud-4 { top: 40vh; transform: scale(0.9); animation-duration: 50s; animation-delay: -20s; }
#cloud-5 { top: 15vh; transform: scale(0.7); animation-duration: 80s; animation-delay: -5s; }

@keyframes drift {
  from { transform: translateX(-200px); }
  to { transform: translateX(100vw); }
}
/* Night clouds */
body.theme-night .cloud { background: #4a6078; opacity: 0.3; filter: blur(1px); }
body.theme-night .cloud::before, body.theme-night .cloud::after { background: #4a6078; }

/* Star Styles */
.star {
  position: absolute; width: 3px; height: 3px;
  background: #ffffff; border-radius: 50%;
  opacity: 0; box-shadow: 0 0 5px #ffffff;
  transition: opacity 1.5s ease;
  animation: twinkle 2s infinite alternate;
}
body.theme-night .star { opacity: 1; }
@keyframes twinkle { from { opacity: 0.3; } to { opacity: 1; } }
/* Star positions (All 20) */
#star-1 { top: 10%; left: 15%; animation-delay: 0.5s; }
#star-2 { top: 30%; left: 30%; animation-delay: 1s; }
#star-3 { top: 15%; left: 70%; animation-delay: 0.2s; }
#star-4 { top: 50%; left: 50%; animation-delay: 1.5s; }
#star-5 { top: 40%; left: 85%; animation-delay: 0.7s; }
#star-6 { top: 60%; left: 20%; animation-delay: 1.2s; }
#star-7 { top: 80%; left: 75%; animation-delay: 0.3s; }
#star-8 { top: 5%; left: 90%; animation-delay: 0.8s; }
#star-9 { top: 70%; left: 5%; animation-delay: 0.1s; }
#star-10 { top: 25%; left: 45%; animation-delay: 1.3s; }
#star-11 { top: 45%; left: 5%; animation-delay: 0.6s; }
#star-12 { top: 85%; left: 30%; animation-delay: 1.1s; }
#star-13 { top: 90%; left: 90%; animation-delay: 0.4s; }
#star-14 { top: 55%; left: 65%; animation-delay: 1.7s; }
#star-15 { top: 20%; left: 80%; animation-delay: 0.9s; }
#star-16 { top: 75%; left: 40%; animation-delay: 0.2s; }
#star-17 { top: 60%; left: 95%; animation-delay: 1.4s; }
#star-18 { top: 35%; left: 20%; animation-delay: 0.3s; }
#star-19 { top: 5%; left: 50%; animation-delay: 1.6s; }
#star-20 { top: 95%; left: 50%; animation-delay: 1.8s; }

/* Constellation Styles */
.constellation {
  position: absolute;
  opacity: 0;
  transition: opacity 1.5s ease;
}
body.theme-night .constellation { opacity: 1; }
.c-star { /* Constellation star */
  position: absolute;
  width: 4px; height: 4px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 6px #fff;
  animation: twinkle 3s infinite alternate;
  animation-delay: 0.5s;
}
#big-dipper { top: 15%; left: 10%; width: 130px; height: 60px; }
#orion { top: 60%; left: 70%; width: 70px; height: 80px; }


/* --- NEW: Milo Celebration Animation --- */
#milo-celebration-overlay {
  position: fixed; /* Full screen */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;

  /* The "multiply" effect (applies to all children) */
  mix-blend-mode: multiply;
  background-color: rgba(255, 255, 255, 0); /* Start transparent */

  /* Hide by default */
  opacity: 0;
  visibility: hidden;

  /* z-index to be on top, but allow clicks through when hidden */
  z-index: 1000;
  pointer-events: none; /* Let clicks go through by default */

  transition: opacity 0.5s ease, visibility 0.5s ease, background-color 0.5s ease;

  /* ADDED: to contain absolute particles */
  overflow: hidden;
}

#milo-celebration-overlay.active {
  /* Show when active */
  opacity: 1;
  visibility: visible;
  /* NEW: Add the custom cheese cursor */
  cursor: url('../img/cheese_2.png') 50 50, auto; /* 50 50 centers 100x100 img */
  pointer-events: auto; /* Allow mousemove events */

  /* UPDATED: Fix night mode and set up 3D */
  mix-blend-mode: normal;
  perspective: 1000px;
  background-color: rgba(255, 255, 255, 0.75); /* UPDATED: Added opacity */
}

/* NEW: Class for the bouncing cats */
.milo-bouncer {
  position: absolute;
  width: 100px; /* Base size */
  height: 100px;
  background-image: url('../img/milo_graphic.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Optimize for transform changes */
  will-change: transform;
  /* NEW: Transition for getting caught */
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

/* --- NEW: Game UI Styles --- */

/* NEW: Game Title */
@keyframes gameTitlePop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}
#game-title {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  font-family: var(--font-handwriting);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--color-text);
  text-shadow: 2px 2px 0px var(--color-accent);
  text-align: center;
  z-index: 1002; /* Above door */
  opacity: 0;
  pointer-events: none;
}
#game-title span {
  display: block;
  font-size: 2rem;
  color: var(--color-primary);
  text-shadow: none;
}
#game-title.active {
  animation: gameTitlePop 3s ease-in-out forwards;
}


#game-door {
  position: absolute;
  top: 25%; /* UPDATED: from user */
  right: 0;
  width: 250px; /* UPDATED: Was 400px */
  height: 50%;
  background-image: url('../img/whisper_tree.png');
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
  z-index: 1001; /* Above cats */
  transform: translateX(100%); /* Hidden by default */
  transition: transform 0.5s ease-in-out;
  transform-origin: right center; /* UPDATED: Set "hinge" */
}
#milo-celebration-overlay.active #game-door {
  transform: translateX(0%) rotateY(-50deg); /* UPDATED: from user */
}

#game-timer,
#game-score {
  position: absolute;
  top: 20px;
  font-family: var(--font-handwriting);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-text);
  text-shadow: 2px 2px 0px var(--color-secondary);
  z-index: 1001;
  opacity: 0;
  transition: opacity 0.5s ease;
}
#milo-celebration-overlay.active #game-timer,
#milo-celebration-overlay.active #game-score {
  opacity: 0.8;
}

#game-timer {
  left: 30px;
}
#game-score {
  left: 30px; /* UPDATED: Was right: 220px */
  top: 85px;  /* UPDATED: Was 20px (implied) */
  font-size: 2.5rem; /* UPDATED: Was 3rem (implied) */
}

#game-scoreboard-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2000; /* On top of everything */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#game-scoreboard-container.show {
  opacity: 1;
  visibility: visible;
}

#game-scoreboard {
  position: relative; /* Anchor for the close button */
  background: var(--color-bg);
  border: var(--border-style);
  border-radius: 15px;
  box-shadow: 5px 5px 0px var(--color-secondary);
  padding: 30px 50px;
  text-align: center;
  /* Use the same fadeIn as other pop-ups */
  transform: translateY(10px);
  animation: fadeIn 0.3s ease forwards;
}
#game-scoreboard h2 {
  font-size: 2.5rem;
  color: var(--color-accent);
  margin: 0 0 10px 0;
}
#game-scoreboard p {
  font-size: 1.5rem;
  margin: 0 0 25px 0;
}
#game-scoreboard #final-score {
  font-size: 2rem;
  color: var(--color-primary);
  font-weight: 700;
}

/* NEW: Close button for scoreboard */
#close-scoreboard-button {
  position: absolute;
  top: 10px;
  right: 15px;
  background: none;
  border: none;
  font-family: var(--font-sans); /* Use a standard font for 'x' */
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--border-color);
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
#close-scoreboard-button:hover {
  opacity: 1;
}


/* --- SHARED PEEKING STYLES --- */
/* These stay behind the container (z-index 9) and pop out on hover */
[id^="peeking-"] {
  position: absolute;
  width: 100px;
  height: 100px;
  z-index: 9; /* BEHIND the container */
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply; /* Default for day mode */
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* --- INDIVIDUAL PEEKING ICON POSITIONS (Distributed Ring) --- */

/* TOP EDGE */
/* 1. Top-Left Corner: Martini (Tilted in) */
#peeking-martini {
  top: -40px;
  left: -10px;
  background-image: url('../img/martini.png');
  transform: translateY(80px) translateX(50px) rotate(40deg);
}
#peeking-martini.show { transform: translateY(10px) translateX(-100px) rotate(-20deg); }

/* 2. Top-Center Left: Flower (Sprouting UP from top edge) */
#peeking-home {
  top: -45px;
  left: 20%;
  background-image: url('../img/flower_poppy.png');
  transform-origin: bottom center;
  transform: translateY(80px) scale(0.8);
}
#peeking-home.show { transform: translateY(-50px) scale(1) rotate(-10deg); }

/* 3. Top-Center Right: NEW Champagne (Hanging DOWN) */
#peeking-champagne-top {
  top: -50px;
  left: 55%;
  background-image: url('../img/champaign.png');
  transform-origin: top center;
  transform: translateY(80px) rotate(15deg);
}
#peeking-champagne-top.show { transform: translateY(-50px) rotate(15deg); }

/* 4. Top-Right Corner: Countdown/Rings */
#peeking-countdown {
  top: -35px;
  right: -10px;
  background-image: url('../img/rings.png');
  transform: translateY(80px) translateX(-50px) rotate(-40deg);
}
#peeking-countdown.show { transform: translateY(-40px) translateX(65px) rotate(20deg); }

/* RIGHT EDGE */
/* 5. Right Top: Oyster */
#peeking-registry {
  top: 20%;
  right: -55px;
  background-image: url('../img/flower_poppy.png');
  transform: translateX(-60px) rotate(-10deg);
}
#peeking-registry.show { transform: translateX(50px) rotate(20deg); }

/* 6. Right Middle: Cheese */
#peeking-todo {
  top: 50%;
  right: -50px;
  background-image: url('../img/cheese_2.png');
  transform: translateX(-50px) rotate(-10deg);
}
#peeking-todo.show { transform: translateX(90px) rotate(15deg); }

/* 7. Right Bottom: Champagne */
#peeking-lodging {
  top: 80%;
  right: -45px;
  background-image: url('../img/champaign.png');
  transform: translateX(-50px) rotate(-10deg);
}
#peeking-lodging.show { transform: translateX(90px) rotate(15deg); }

/* BOTTOM EDGE */
/* 8. Bottom Right Corner: Disco Ball (Hanging DOWN from bottom edge) */
#peeking-rsvp {
  bottom: -50px;
  right: 10px;
  background-image: url('../img/disco_ball.png');
  transform-origin: top center;
  transform: translateY(-80px);
}
#peeking-rsvp.show { transform: translateY(48px) rotate(-5deg); }

/* 9. Bottom Center Right: Flower (Sprouting UP from behind bottom edge) */
#peeking-flower-bot {
  bottom: -45px;
  right: 30%;
  background-image: url('../img/oyster.png');
  transform-origin: bottom center;
  transform: translateY(-80px) scale(0.8);
}
#peeking-flower-bot.show { transform: translateY(50px) scale(1) rotate(15deg); }

/* 10. Bottom Center Left: Cheese Bot */
#peeking-cheese-bot {
  bottom: -45px;
  left: 30%;
  background-image: url('../img/cheese_2.png');
  transform: translateY(-80px);
}
#peeking-cheese-bot.show { transform: translateY(60px) translateX(-30px) rotate(-15deg); }

/* 11. Bottom Left Corner: Mic */
#peeking-disco-bot {
  bottom: -45px;
  left: 10px;
  background-image: url('../img/mic.png');
  transform: translateY(-80px) translateX(50px) rotate(-40deg);
}
#peeking-disco-bot.show { transform: translateY(30px) translateX(-120px) rotate(-20deg); }

/* LEFT EDGE */
/* 12. Left Bottom: Rings */
#peeking-rings-left {
  top: 80%;
  left: -55px;
  background-image: url('../img/rings.png');
  transform: translateX(60px) rotate(10deg);
}
#peeking-rings-left.show { transform:  translateY(-30px) translateX(-90px) rotate(-20deg); }

/* 13. Left Middle: Mic */
#peeking-mic-left {
  top: 50%;
  left: -50px;
  background-image: url('../img/mic.png');
  transform: translateX(50px) rotate(10deg);
}

#milo-game {
  /* Ensure the cursor is hidden so the custom striker is visible */
  cursor: none;
  /* Make sure it's nice and responsive */
  touch-action: none;
}

/* Hide the old HUD elements since we are drawing them in Canvas now for performance */
#game-door, #game-timer, #game-score {
  display: none !important;
}
#peeking-mic-left.show { transform: translateX(-90px) rotate(15deg); }

/* 14. Left Top: Oyster */
#peeking-oyster-left {
  top: 20%;
  left: -55px;
  background-image: url('../img/oyster.png');
  transform: translateX(60px) rotate(10deg);
}
#peeking-oyster-left.show { transform: translateX(-90px) rotate(-20deg); }


/* REMOVED the placeholder cat styles */
.cat-head,
.cat-ear-left,
.cat-ear-right {
  display: none;
}


/* --- Mobile Responsiveness --- */
@media (max-width: 600px) {
  body { padding: 5px; }
  #countdown-timer {
    top: -15px; right: 5px;
    font-size: 0.8rem; padding: 6px 10px;
    transform: rotate(3deg);
  }
  /* UPDATED: container-wrapper handles mobile margin */
  .container-wrapper {
    margin: 60px 5px 5px 5px;
  }
  .container {
    padding: 20px 15px;
    /* margin: 60px 5px 5px 5px; (moved to wrapper) */
  }

  /* NEW: Add top padding for header to prevent overlap */
  header {
    position: relative; /* Anchor for mobile menu button */
    padding-top: 40px; /* Push content down */
  }
  header h1 {
    font-size: 2.5rem;
    margin-top: 0; /* Reset margin since we have padding */
  }

  /* NEW: Mobile Menu Styles */
  #mobile-menu-toggle {
    display: block;
    top: 10px; /* Adjust position */
    right: 10px;
  }
  .tab-nav {
    flex-direction: column;
    overflow: hidden;
    max-height: 0; /* Hidden by default */
    padding-bottom: 0;
    margin-bottom: 0;
    /* Smooth animation */
    transition: max-height 0.4s ease-out, margin-bottom 0.4s ease-out, padding-bottom 0.4s ease-out;
  }
  .tab-nav.open {
    max-height: 500px; /* Animate open */
    padding-bottom: 15px;
    margin-bottom: 15px;
  }
  .tab-button {
    width: 100%;
    margin: 4px 0;
  }

  /* NEW: Show schedule on mobile */
  /* (Removed the display:none) */

  /* NEW: Adjust schedule for mobile */
  .schedule-controls {
    justify-content: center; /* Center toggle */
    margin-bottom: 20px; /* Extra space */
  }
  .schedule-day-nav {
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
  }
  .schedule-timeline ul {
    padding-left: 20px;
  }
  .schedule-item {
    padding-left: 30px;
  }
  .schedule-item::after {
    left: 2px; /* (20px line) - (8px radius) */
  }
  .favorite-btn {
    left: -28px; /* (20px line) - (48px) */
  }
  .schedule-time {
    width: 80px;
    font-size: 1rem;
    padding-top: 7px;
  }
  .schedule-details p {
    font-size: 1rem;
  }

  /* Hide some elements on mobile for performance/clutter */
  #cloud-3, #cloud-5, .constellation, [id^="peeking-"] {
    display: none;
  }

  /* NEW: Show game on mobile, but simplified */
  /* (Removed display:none for game) */

  #game-title {
    font-size: 2.5rem;
  }
  #game-title span {
    font-size: 1.5rem;
  }

  #game-door {
    width: 120px; /* Smaller door */
    top: 25%; /* Match desktop */
    height: 50%; /* Match desktop */
    background-size: contain; /* Match desktop */
  }
  #milo-celebration-overlay.active #game-door {
    transform: translateX(0%); /* No 3D tilt */
  }
  #game-timer, #game-score {
    font-size: 2rem;
  }
  #game-score {
    right: auto; /* Override desktop style */
    left: 30px;
    top: 65px;
  }
  #game-scoreboard-container {
    /* (Removed display:none) */
  }
  #game-scoreboard {
    width: 90%;
    padding: 20px;
  }
  #game-scoreboard h2 {
    font-size: 2rem;
  }
  #game-scoreboard p {
    font-size: 1.2rem;
  }
  #game-scoreboard #final-score {
    font-size: 1.5rem;
  }

  /* NEW: Smaller cats for mobile */
  .milo-bouncer {
    width: 50px;
    height: 50px;
  }


  /* Make interactive map stack on mobile */
  .interactive-map-container { flex-direction: column; }
  .hotspot { width: 60px; height: 60px; font-size: 0.8rem; }
  .placeholder-graphic { height: 300px; } /* Give map more space */
  /* Reposition mobile hotspots */
  .hotspot[data-info="info-sfo"] { top: 80%; left: 20%; }
  .hotspot[data-info="info-stinson"] { top: 60%; left: 10%; }
  .hotspot[data-info="info-jenner"] { top: 30%; left: 5%; }
  .hotspot[data-info="info-booneville"] { top: 10%; left: 30%; }

  /* RSVP Form on mobile */
  .checkbox-group label { font-size: 1rem; }

  /* Stack Map and Guest List on mobile */
  .rsvp-grid-layout {
    grid-template-columns: 1fr;
  }
  .myspace-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- NEW: Attending Badge (Smaller & Cuter) --- */
#attending-badge {
  position: absolute;
  top: -20px;
  left: -10px;
  z-index: 1002;
  background: #27ae60;
  color: white;
  font-family: var(--font-handwriting);
  font-weight: 700;
  font-size: 1rem; /* Reduced from 1.4rem */
  padding: 8px 15px; /* Reduced from 10px 25px */
  transform: rotate(-15deg);
  border: 2px solid #fff;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.15);
  border-radius: 5px;
  display: none;
  pointer-events: none;
  animation: badge-wiggle 3s infinite ease-in-out;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes badge-wiggle {
  0%, 100% { transform: rotate(-15deg) scale(1); }
  50% { transform: rotate(-10deg) scale(1.1); }
}

@media (max-width: 600px) {
  #attending-badge {
    left: 5px;
    top: -15px;
    font-size: 0.8rem;
    padding: 6px 12px;
  }
}