:root {
  /* Core text + backgrounds */
  --text-color: #C9D4F0;
  --main-bg-color: #0B1224;

  /* Header / footer */
  --banner-color: #0A1630;
  --banner-text-color: #E6ECFF;

  /* Borders */
  --border-color: #3A5B8F;

  /* Structure */
  --subsection-border-color: #2A3A5F;
  --comment-border-color: #1C2A44;
  --heading-color: #121C34;

  /* Links */
  --link-color: #7FAEFF;
  --subtle: #6F86B3;

  /* Tags / highlights */
  --tag-color: #1A2540;
  --highlight: #16213A;

  /* Tables */
  --th-color: #182445;
  --td-odd-color: #0F1A33;
  --td-even-color: #0C162B;

  /* Accent palette */
  --red: #B85A6A;
  --orange: #C78A5A;
  --gold: #D6B86A;
  --green: #5FAF8F;
  --blue: #5F8FD6;
  --purple: #7A6AD6;
  --pink: #B76A9A;
}

body {
  font-family: Verdana, sans-serif;
  font-size: 14px;
  margin: 0;
  color: var(--text-color);
}

/* QoL */
html {scroll-behavior: smooth;}
details > summary {cursor: pointer;}
* {box-sizing: border-box;}

/* Selection */
::selection {
  background: #2A4A7A;
  color: #E6ECFF;
}

/* Links */
main a {color: var(--link-color);}
main a:visited {color: var(--subtle);}
main a:hover {color: var(--link-color);}
a:hover {
  color: var(--link-color);
  text-decoration: none;
}

/* Header / footer */
header, footer {
  background: var(--banner-color);
  color: var(--banner-text-color);
}

header h1 {
  margin: 0;
  padding: 12px 24px;
  max-width: 900px;
}

header a {
  text-decoration: none;
  color: var(--banner-text-color);
}

header a:visited,
header a:hover {
  color: var(--banner-text-color);
}

/* ── Floating sparkles ── */
.sparkle-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.sparkle {
    position: absolute;
    color: var(--accent-color);
    opacity: 0;
    font-size: 1rem;
    animation: floatSparkle 8s ease-in-out infinite;
    user-select: none;
}

.sparkle:nth-child(1)  { left:  5%; animation-delay: 0s;    font-size: 0.7rem; color: #a8b8cc; }
.sparkle:nth-child(2)  { left: 15%; animation-delay: 1.5s;  font-size: 1rem;   color: #8aafd4; }
.sparkle:nth-child(3)  { left: 30%; animation-delay: 3s;    font-size: 0.6rem; color: #c8d8e8; }
.sparkle:nth-child(4)  { left: 50%; animation-delay: 0.8s;  font-size: 0.9rem; color: #8aafd4; }
.sparkle:nth-child(5)  { left: 65%; animation-delay: 2.2s;  font-size: 0.7rem; color: #a8b8cc; }
.sparkle:nth-child(6)  { left: 78%; animation-delay: 4s;    font-size: 1rem;   color: #6888aa; }
.sparkle:nth-child(7)  { left: 88%; animation-delay: 1s;    font-size: 0.6rem; color: #c8d8e8; }
.sparkle:nth-child(8)  { left: 95%; animation-delay: 3.5s;  font-size: 0.8rem; color: #8aafd4; }

@keyframes floatSparkle {
    0%   { transform: translateY(100vh) rotate(0deg);   opacity: 0; }
    10%  { opacity: 0.7; }
    90%  { opacity: 0.5; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* Main container */
main {
  width: 900px;
  max-width: 100%;
  background: var(--main-bg-color);
  border: 3px solid var(--border-color);
  border-radius: .25em;
  margin: 20px auto;
  padding: 12px 48px;
}

/* Lists */
li {margin-bottom: 4px;}

/* Icon */
.icon {
  height: 32px;
  width: 32px;
  border-radius: .2em;
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 8px;
  image-rendering: pixelated;
}

/* Page title */
.character-name {
  background-color: var(--heading-color);
  padding: .5em;
  font-size: 24px;
}

/* Headings */
main h2,
main h3 {
  background-color: var(--heading-color);
  padding: .4em .5em;
}

main h4 {
  border-bottom: 2px dashed var(--subsection-border-color);
}

/* Definition lists */
dt {font-weight: bold;}
dd {margin-bottom: 8px;}

/* Images */
main img,
.bio img {
  max-width: 100%;
  display: block;
  margin: auto;
}

/* Bio panel */
.bio {
  float: right;
  border: 2px solid var(--border-color);
  margin-left: 16px;
  max-width: 280px;
  background: #0E1830;
}

.bio::after {
  content: "";
  clear: both;
  display: table;
}

.bio table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
}

.bio th,
.bio td {
  padding: 0.4em;
  vertical-align: top;
}

.bio th {
  background: var(--th-color);
  color: #E6ECFF;
}

.bio td {
  font-size: small;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.bio td:first-of-type {
  font-weight: bold;
  width: 35%;
}

.bio tr:nth-child(odd) {background: var(--td-odd-color);}
.bio tr:nth-child(even) {background: var(--td-even-color);}

/* Quote */
.quote {
  border-left: 6px solid var(--heading-color);
  padding: .5em 1em;
  font-style: italic;
}

/* Spoilers */
.spoilers {
  background: var(--highlight);
  border: dashed 2px #5F8FD680;
  margin: .5em 2px;
  padding: .5em;
}

.spoilers summary {
  color: var(--link-color);
  font-weight: bold;
}

/* =========================
   VIDEO EMBED (NEW)
   ========================= */

.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 20px auto;
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px;
  border-radius: 12px;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(122, 106, 214, 0.35);
}

/* Comments */
.comment {
  border: 2px solid var(--comment-border-color);
  border-radius: .3em;
  padding: .5em 1em;
  margin-bottom: 10px;
}

.reply {margin-left: 20px;}

.reply summary {
  text-decoration: underline;
  list-style-type: none;
  color: var(--subtle);
}

.reply summary:hover {
  color: var(--subtle);
  text-decoration: none;
}

.reply[open] summary {display:none;}

.user {font-weight:bold;}
.user small {font-weight: normal; margin-left: 8px;}

/* Color helpers */
.red {background: var(--red)!important;}
.orange {background: var(--orange)!important;}
.gold {background: var(--gold)!important;}
.green {background: var(--green)!important;}
.blue {background: var(--blue)!important;}
.purple {background: var(--purple)!important;}
.pink {background: var(--pink)!important;}

/* Nav */
nav ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
}

nav a {color: var(--subtle);}
nav a:hover {color: var(--subtle);}

nav li {padding-left: 4px;}
nav li:after {content: " /"}

/* Footer */
footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  font-size: 12px;
  opacity: 50%;
  padding: 6px;
  text-align: center;
  z-index: 2;
}

/* Responsive */
@media only screen and (max-width: 800px) {
  h1 {font-size: 24px; padding-inline: 12px;}

  main {
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding-inline: 1.5em;
  }

  .bio {
    float:none;
    max-width: 100%;
    width: 280px;
    margin: 0 auto;
  }
}