/* ========== FONT-FACE DECLARATIONS ========== */
@font-face {
  font-family: 'SansSerifPlus7';
  src: url('./fonts/sans_serif_plus_7.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alagard';
  src: url('./fonts/alagard.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ========== VARIABLES ========== */
:root {
  --navy-bg: #181B32;
  --plum: #261315;
  --offwhite: #FDFBD4;
  --mauve: #b29d98;
  --slate: #878BAA;
  --section-text: #fff9ee;
  --panel-text: #222225;
  --glow-green: #39FF14;
}

/* ========== BASE STYLES ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'SansSerifPlus7', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--offwhite);
  background-color: var(--navy-bg);
  cursor: url("images/mouse.webp"), auto;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ========== HEADER ========== */
header {
  background: var(--plum);
  text-align: center;
  padding: 2.1em 0;  /* smaller top/bottom padding */
}

.site-title {
  font-family: 'Alagard', Arial, sans-serif;
  font-size: 1.89rem; /* smaller font size */
  color: var(--section-text);
  margin: -0.42em 0;  /* less negative margin */
  letter-spacing: 2px;
}

.header-divider {
  display: block;
  margin: 0 auto;
  margin-top: 7px;     /* optional: less space above the divider */
  max-width: 320px;    /* optional: make divider smaller too */
  height: auto;
}

/* ========== LAYOUT ========== */
main {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 2em;
  gap: 2em;
}

/* ========== SIDEBAR ========== */
.sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin: 1.5em 0;
}

.sidebar a {
  font-size: 0.9rem;
  font-weight: 500;
  font-family: 'SansSerifPlus7', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--offwhite);
  transition: color 0.3s;
}

.sidebar a:hover {
  color: var(--mauve);
  text-decoration: underline;
}
.sidebar a.active {
  color: var(--glow-green);
  font-weight:bold;
  text-decoration: underline;
}

/* ========== CONSTELLATION SECTION ========== */
.constellation-bg {
  position: relative;
  background: #000;
  outline: 4px solid var(--slate);
  outline-offset: -4px;
  border-radius: 18px;
  width: 400px;
  height: 250px;
  overflow: hidden;
  box-shadow: 0 0 20px #0004;
}

#arc-stars {
  position: relative;
  width: 100%;
  height: 100%;
}
/* 4 decorations in cosellation box*/ 

.constellation-decoration {
  position: absolute;
  width: 36px;
  height: 36px;
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  filter: drop-shadow(0 0 12px #36aafe) drop-shadow(0 0 18px #36aafe);
  transition: transform 0.2s;
}

/* Arc Stars */
.arc-star {
  width: 30px;
  height: 30px;
  position: absolute;
}

.arc-star img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 0 6px #329cff)
    drop-shadow(0 0 15px #329cff)
    drop-shadow(0 0 30px #329cff);
}

.arc-star.selected img,
.arc-star:hover img {
  filter:
    drop-shadow(0 0 6px #fff)
    drop-shadow(0 0 14px #fff)
    drop-shadow(0 0 24px #fff);
}




/* Story Panel */
.story-panel {
  display: none;
  max-width: 640px;
  margin: 2em auto;
  padding: 0; /* Padding is on header/body */
  border: 6px solid var(--mauve);
  border-radius: 20px;
  background: var(--offwhite);
  color: var(--panel-text);
  /* No font-family here, fonts set on child elements! */
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.story-panel p,
.story-body p {
  text-indent: 2em;   /* or pick the indent you like, e.g. 1.5em */
  margin-top: 0.6em;  /* optional: gives a little space between paragraphs */
}

/* Header Style */
.story-header {
  background-color: var(--plum);
  color: var(--offwhite);
  padding: 1.2em 1.5em;
  border-bottom: 4px solid var(--mauve);
  font-family: 'Alagard', Arial, sans-serif;  /* <-- Set header font here */
}

.story-header h2 {
  font-size: 1.6rem;
  margin: 0;
  letter-spacing: 1.5px;
}

/* Body Style */
.story-body {
  padding: 1.7em 1.5em;
  background: var(--offwhite);
  color: var(--panel-text);
  line-height: 1.6;
  font-family: 'SansSerifPlus7', Arial, sans-serif;  /* <-- Set body font here */
}



/* ========== MEDIA QUERIES ========== */
@media (max-width: 768px) {
  main {
    flex-direction: column;
    align-items: center;
    padding: 1.5em;
  }

  .constellation-bg {
    width: 90%;
    height: 220px;
  }

  .sidebar ul {
    text-align: center;
  }

  .story-panel {
    padding: 1.5em;
    margin: 1.5em 0;
  }
}
.character-section {
  padding: 2em 1em;
  background: var(--navy-bg, #181B32);
  color: var(--section-text, #fff9ee);
  max-width: 960px;
  margin: 0 auto 3em auto;
  border-radius: 18px;
  box-shadow: 0 0 20px #0009;
}

.character-title {
  font-family: 'Alagard', Arial, sans-serif;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.2em;
  letter-spacing: 2px;
}

.character-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2em;
}

.character-card {
  background: var(--plum, #261315);
  border: 2px solid var(--mauve, #b29d98);
  border-radius: 16px;
  width: 280px;
  padding: 1.5em;
  text-align: center;
  box-shadow: 0 2px 12px #0005;
  transition: background 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.character-card:hover {
  background: var(--mauve, #b29d98);
  box-shadow: 0 4px 20px #6659;
}

.character-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--offwhite, #FDFBD4);
  margin-bottom: 1em;
  background: #29293b;
}

.character-name {
  position: relative;
  font-family: 'SansSerifPlus7', Arial, sans-serif;
  font-size: 1.3rem;
  color: var(--glow-green, #39FF14);
  margin-bottom: 0.3em;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;

}

.character-name::before,
.character-name::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("images/blue-rot-star.webp") no-repeat center center / contain;
}

.character-role {
  font-size: 1em;
  font-weight: 600;
  color: var(--mauve, #b29d98);
  margin-bottom: 0.6em;
}

.character-desc {
  font-size: 0.95em;
  color: var(--section-text, #fff9ee);
  opacity: 0.9;
}

/* mobile*/ 
@media (max-width: 768px) {
  .character-list {
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
  }

  .character-card {
    width: 90%;
    max-width: 350px;
  }
}
/* ========== POLL SECTION ========== */
.poll-section {
  background: var(--plum, #261315);
  color: var(--section-text, #fff9ee);
  border-radius: 14px;
  width: 400px;
  height: 400px;
  margin: 2em auto;
  padding: 1.2em;
  box-shadow: 0 0 18px #0007;
  text-align: center;
  font-size: 1rem;
}

.poll-section h2 {
  font-family: 'Alagard', Arial, sans-serif;
  font-size: 1.5rem;
  margin-bottom: 0.5em;
}

.poll-divider {
  display: block;
  margin: 12px auto 20px auto;
  max-width: 180px;
  height: auto;
}

#poll-form label {
  display: block;
  font-size: 1rem;
  margin: 0.4em 0;
  cursor: pointer;
}

#poll-form button {
  margin-top: 1em;
  padding: 0.8em 1.5em;
  font-size: 1.1em;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  background: var(--glow-green, #39FF14);
  color: #222;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s;
}

#poll-result {
  margin-top: 1em;
  font-size: 1.1em;
  font-weight: bold;
  background: var(--offwhite, #FDFBD4);
  color: #222;
  padding: 1em;
  border-radius: 8px;
}

/* ========== RESPONSIVE (Mobile & iPad) ========== */
@media (max-width: 768px) {
  .poll-section {
    width: 90vw;
    height: 90vw;
    max-width: 400px;
    max-height: 400px;
    padding: 1em;
    font-size: 1em;
  }

  #poll-form label {
    font-size: 1em;
    margin: 0.3em 0;
  }

  #poll-form button {
    font-size: 1.15em;
    padding: 1em;
  }

  #poll-result {
    font-size: 1em;
    padding: 0.8em;
  }
}


.sword-divider {
  display: block;
  margin: 2em auto 1em auto;
  max-width: 200px;
  height: auto;
}
/* ========== MUSIC SECTION ========== */
.character-section iframe {
  max-width: 96%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  border: none;
  margin: 1.5em auto;
  background: #000;
  display: block;
}
.music-caption {
  margin-top: 1em;
}
.music-section {
  background: var(--plum, #261315);
  color: var(--section-text, #fff9ee);
  border-radius: 14px;
  max-width: 620px;
  margin: 2em auto;
  padding: 2em 1em 2.5em 1em;
  box-shadow: 0 0 18px #0007;
  text-align: center;
}
.music-section iframe {
  max-width: 100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  border: none;
  margin-top: 1em;
  background: #000;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.music-section .poll-divider {
  max-width: 170px;
  margin: 16px auto 16px auto;
  display: block;
}
@media (max-width: 700px) {
  .music-section {
    padding: 1em 0.2em;
    max-width: 98vw;
  }
}
.maps-section {
  background: var(--plum, #261315);
  color: var(--section-text, #fff9ee);
  border-radius: 14px;
  max-width: 620px;
  margin: 2em auto;
  padding: 2em 1em 2.5em 1em;
  box-shadow: 0 0 18px #0007;
  text-align: center;
}

.maps-title {
  font-family: 'Alagard', Arial, sans-serif;
  text-align: center;
  font-size: 2rem;
  margin-bottom: 1.2em;
  letter-spacing: 2px;
}

/* Responsive design: makes it look good on mobile */
@media (max-width: 700px) {
  .maps-section {
    padding: 1em 0.2em;
    max-width: 98vw;
  }
}
.page-maps {
  gap: 0em;       /* Example: slightly wider gap on maps */
  max-width: 800px;
  margin: 0 auto;
  padding: 2em;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.page-maps .sidebar {
  width: 230px;
}

.page-maps .maps-section {
  max-width: 650px;
}
.page-music {
  gap: 0em;       /* Example: tighter gap only on music */
  max-width: 800px;
  margin: 0 auto;
  padding: 11em;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.page-music .sidebar {
  width: 230px;
}

.page-music .music-section {
  max-width: 650px;
}
@media (max-width: 768px) {
  .page-maps {
    flex-direction: column;
    align-items: center;
    gap: 0.4em;
    padding: 1.2em;
  }
  .page-music {
    flex-direction: column;
    align-items: center;
    gap: 0.7em;
    padding: 1.8em;
  }
}
.snowflake {
  position: fixed;
  top: -10%;
  z-index: ; /* or try -1 if anything else still overlaps */
  user-select: none;
  animation-name: snowflakes-fall, snowflakes-shake;
  animation-duration: 10s, 3s;
  animation-timing-function: linear, ease-in-out;
  animation-iteration-count: infinite, infinite;
  animation-play-state: running, running;
}
@media (max-width: 768px) {
  .snowflake {
    z-index: -1; /* Places snowflakes behind all main content on mobile */
  }
}


@keyframes snowflakes-fall {
  0% { top: -10%; }
  100% { top: 100%; }
}

@keyframes snowflakes-shake {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(80px); }
}

.snowflake:nth-of-type(1)  { left: 10%;  animation-delay: 1s, 1s; }
.snowflake:nth-of-type(2)  { left: 20%;  animation-delay: 6s, .5s; }
.snowflake:nth-of-type(3)  { left: 30%;  animation-delay: 4s, 2s; }
.snowflake:nth-of-type(4)  { left: 40%;  animation-delay: 2s, 2s; }
.snowflake:nth-of-type(5)  { left: 50%;  animation-delay: 8s, 3s; }
.snowflake:nth-of-type(6)  { left: 60%;  animation-delay: 6s, 2s; }
.snowflake:nth-of-type(7)  { left: 70%;  animation-delay: 2.5s, 1s; }
.snowflake:nth-of-type(8)  { left: 80%;  animation-delay: 1s, 0s; }
.snowflake:nth-of-type(9)  { left: 90%;  animation-delay: 3s, 1.5s; }
.snowflake:nth-of-type(10) { left: 25%;  animation-delay: 2s, 0s; }
.snowflake:nth-of-type(11) { left: 65%;  animation-delay: 4s, 2.5s; }
.snowflake:nth-of-type(12) { left: 5%;   animation-delay: 5s, 1s; }
/* ========== Optimizations for Mobile and iPad (up to 1024px) ========== */
@media (max-width: 1024px) {
  /* Toggle button shown on mobile/tablet */
  .poll-toggle-btn {
    display: block;
    margin: 1.5em auto;
    padding: 0.8em 1.5em;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    background: var(--glow-green, #39FF14);
    color: #222;
    cursor: pointer;
    box-shadow: 0 0 10px #0004;
  }

  /* Poll section initially hidden on mobile/iPad */
  .poll-wrapper {
    display: none;
  }

  /* When toggled via JS */
  .poll-wrapper.show {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
  }

  /* Prevent overlap: snowflake in the back on mobile/iPad too */
  .snowflake {
    z-index: -1;
  }

  /* Optional: poll placement on small screens */
  .poll-container {
    position: static;
    width: 90vw;
    margin: 0 auto;
  }
}
@media (min-width: 1025px) {
  /* Poll always visible */
  .poll-wrapper {
    display: block;
  }

  /* Hide toggle button on desktop */
  .poll-toggle-btn {
    display: none;
  }

  .poll-container {
    position: absolute;
    left: 10vw;
    top: 10vh;
    cursor: grab;
    z-index: 1000;
  }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}