/* 
  Ju Fufu Mains - secret stylesheet
*/

:root {
  --gold:      #F4C871;
  --gold-deep: #E3B164;
  --gold-dark: #986E33;
  --brown:     #614024;
  --ember:     #b23a26;
  --slate:     #383742;
  --cream:     #fbe7c0;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream) url("assets/shrine/heart-tile.png") repeat;
  font-family: "Times New Roman", Times, serif;
  text-align: center;
  color: var(--slate);
}

body { padding: 18px 16px 60px; }

/* ---------- Top heading row ---------- */
.hd-top {
  position: relative;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.hd-corner-heart {
  position: absolute;
  left: 18px;
  top: 0;
  width: 46px;
  height: 46px;
  image-rendering: pixelated;
  animation: hd-beat 1s ease-in-out infinite;
}

.hd-title {
  color: var(--ember);
  font-weight: bold;
  font-size: clamp(22px, 4.2vw, 42px);
  line-height: 1.15;
  text-shadow: 1px 1px 0 #fff;
  max-width: 1100px;
}

.hd-title .heart {
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.16em;
  image-rendering: pixelated;
  animation: hd-beat 1s ease-in-out infinite;
}

/* ---------- Centered portrait ---------- */
.hd-portrait {
  display: block;
  margin: 18px auto 28px;
  max-width: 420px;
  width: 100%;
  height: auto;
  border: 5px solid #fff;
  outline: 3px solid var(--gold-dark);
  box-shadow: 4px 4px 0 rgba(56,55,66,.35);
}

/* ---------- Captions ---------- */
.hd-caption {
  font-style: italic;
  font-size: clamp(22px, 3.6vw, 38px);
  color: var(--slate);
  margin: 8px 0 14px;
  text-shadow: 1px 1px 0 #fff;
}

.hd-shout {
  font-weight: bold;
  font-size: clamp(18px, 3vw, 32px);
  letter-spacing: 1px;
  margin: 0 auto 26px;
  max-width: 1000px;
  text-shadow: 1px 1px 0 rgba(255,255,255,.6);
}

/* per-letter warm rainbow (filled in by the tiny inline script) */
.hd-shout span:nth-child(6n+1) { color: var(--ember); }
.hd-shout span:nth-child(6n+2) { color: #e08a36; }
.hd-shout span:nth-child(6n+3) { color: var(--gold-deep); }
.hd-shout span:nth-child(6n+4) { color: var(--gold-dark); }
.hd-shout span:nth-child(6n+5) { color: #cf7a2c; }
.hd-shout span:nth-child(6n+6) { color: var(--brown); }

/* ---------- tiny secret footer ---------- */
.hd-secret {
  margin-top: 26px;
  font-size: 12px;
  font-style: italic;
  color: var(--brown);
}

.hd-secret a { color: var(--gold-dark); }

/* ---------- ♫ background music — simple audio tag, top-right ---------- */
.hd-audio {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 50;
  width: 240px;
  max-width: 70vw;
  height: 38px;
  filter: drop-shadow(2px 2px 0 rgba(56,55,66,.3));
}