Template:QuickSummary/styles.css

/* === SECTION HEADINGS === */
.luna-heading {
  font-family: 'AngerStyles', serif;
  font-size: 32px;
  line-height: 1.2;
  text-align: left;
  margin: 40px 0 8px;
  position: relative;
  text-shadow: 0 0 10px #000;
  color: inherit;
  word-wrap: break-word;
}

/* Color Variants */
.luna-heading.gold    { color: #ffd666; }
.luna-heading.crimson { color: #cc4444; }
.luna-heading.purple  { color: #b266ff; }
.luna-heading.cyan    { color: #33ccee; }
.luna-heading.green   { color: #66cc66; }
.luna-heading.orange  { color: #ff9933; }

/* Glowing underline (inherits currentColor) */
.luna-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 100%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0) 0%,
    currentColor 20%,
    #ffffffaa 50%,
    currentColor 80%,
    rgba(0,0,0,0) 100%
  );
  box-shadow: 0 0 8px currentColor;
}

/* === SECTION BODY === */
.luna-section {
  margin: 16px 0 32px;
  padding: 18px 24px;
  border-left: 3px solid currentColor;
  border-radius: 6px;
  background: rgba(20,20,20,0.7);
  line-height: 1.55;
  box-shadow: 0 0 12px #000 inset;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Background accents per color */
.luna-section.gold    { border-color: #ffd666; background: rgba(35,30,10,0.25); }
.luna-section.crimson { border-color: #cc4444; background: rgba(35,20,20,0.25); }
.luna-section.purple  { border-color: #b266ff; background: rgba(30,20,40,0.25); }
.luna-section.cyan    { border-color: #33ccee; background: rgba(15,30,35,0.25); }
.luna-section.green   { border-color: #66cc66; background: rgba(20,35,20,0.25); }
.luna-section.orange  { border-color: #ff9933; background: rgba(40,25,10,0.25); }

/* === LISTS === */
.luna-section ul {
  margin: 8px 0 8px 20px;
}
.luna-section li {
  margin: 4px 0;
  padding-left: 4px;
}

/* === DIAMOND BULLETS === */
.luna-section li::marker {
  content: "◆ ";
  color: currentColor;
}

/* === HOVER GIF SWAP === */
.hover-gif-wrapper {
  display: inline-block;
  text-align: center;
  max-width: 100%;
  overflow-x: auto;
}
.hover-gif {
  transition: transform 0.25s ease;
  max-width: 100%;
  height: auto;
}
.hover-gif:hover {
  content: url("https://wiki.cathedralofblades.com/images/Valravndemo.gif");
  transform: scale(1.03);
}
.gif-caption {
  margin-top: 6px;
  font-family: 'AngerStyles', serif;
  font-size: 18px;
  color: #ffd666;
  text-shadow: 0 0 6px #000;
}

/* === GLOBAL LAYOUT FIX === */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
}

* {
  box-sizing: border-box;
  max-width: 100%;
  word-wrap: break-word;
}

/* Force containment of wide elements inside wiki pages */
.mw-parser-output {
  padding-left: 8px;
  padding-right: 8px;
  max-width: 100%;
  overflow-x: auto;
}
.mw-parser-output img,
.mw-parser-output table,
.mw-parser-output div {
  max-width: 100%;
  height: auto;
  box-sizing: border-box;
}

/* === MOBILE OVERRIDES === */
@media screen and (max-width: 768px) {
  .luna-heading {
    font-size: 24px;
  }
  .gif-caption {
    font-size: 16px;
  }
}