:root {
  --bg: #FFF1DC;
  --sky: var(--bg);
  --ink: #2B1204;
  --accent: #9E2A00;
  --sun: #F2A33A;
  --moon: #F6E7B4;
  --day: block;
  --night: none;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #050A1A;
  --sky: linear-gradient(180deg, #050A1A 0%, #0A1633 55%, #12264F 100%);
  --ink: #E8EEFF;
  --accent: #FFE9A0;
  --day: none;
  --night: block;
  color-scheme: dark;
}

/* Cadangan kalau JavaScript mati: ikuti pengaturan sistem */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #050A1A;
    --sky: linear-gradient(180deg, #050A1A 0%, #0A1633 55%, #12264F 100%);
    --ink: #E8EEFF;
    --accent: #FFE9A0;
    --day: none;
    --night: block;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; }

html { background: var(--bg); }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow-x: hidden;
  background: var(--sky);
  color: var(--ink);
  /* Serif sistem yang tebal dan hangat, tanpa memuat font dari luar */
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  transition: color .4s ease;
}

/* Elemen siang dan malam: yang tidak aktif disembunyikan, animasinya berhenti */
.rays, .sun, .embers { display: var(--day); }
.moon, .meteor, .stars { display: var(--night); }

/* ---------- TEMA TERANG ---------- */

/* Sinar: berpusat di titik tengah matahari (tepi bawah layar), memudar ke luar */
.rays {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: min(130vmax, 2200px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--sun) 0 6deg, transparent 6deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%);
  mask-image: radial-gradient(circle, #000 0, transparent 62%);
  opacity: .28;
  transform: translate(-50%, 50%);
  animation: spin 90s linear infinite;
}

@keyframes spin {
  from { transform: translate(-50%, 50%) rotate(0turn); }
  to   { transform: translate(-50%, 50%) rotate(1turn); }
}

/* Matahari terbit: setengah terlihat dari bawah layar */
.sun {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 0;
  width: clamp(16rem, 85vmin, 46rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sun);
  transform: translate(-50%, 55%);
  animation:
    sunrise 1.4s cubic-bezier(.2, .8, .2, 1) both,
    breathe 7s ease-in-out 1.4s infinite;
}

@keyframes sunrise {
  from { transform: translate(-50%, 110%); }
  to   { transform: translate(-50%, 55%); }
}

@keyframes breathe {
  0%, 100% { transform: translate(-50%, 55%) scale(1); }
  50%      { transform: translate(-50%, 55%) scale(1.05); }
}

/* Bara: dibuat oleh script.js, naik dari bawah dan memudar */
.embers {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ember {
  position: absolute;
  bottom: -12px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--accent);
  opacity: 0;
  animation: ember var(--dur) linear var(--delay) infinite;
}

@keyframes ember {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: .6; }
  100% { transform: translate(var(--drift), -105vh) scale(.4); opacity: 0; }
}

/* ---------- TEMA GELAP ---------- */

/* Bulan sabit: lingkaran transparan dengan bayangan bergeser, jadi sabit sungguhan tanpa menutupi langit.
   Diletakkan di pojok kiri atas supaya tidak menimpa judul dan tidak bertabrakan dengan tombol tema. */
.moon {
  --d: clamp(4.5rem, 18vmin, 10rem);
  position: fixed;
  top: clamp(1rem, 8vh, 5rem);
  left: clamp(1rem, 8vw, 6rem);
  z-index: 0;
  width: var(--d);
  height: var(--d);
  border-radius: 50%;
  box-shadow:
    calc(var(--d) * .26) calc(var(--d) * .08) 0 0 var(--moon),
    calc(var(--d) * .26) calc(var(--d) * .08) 40px 4px rgba(246, 231, 180, .28);
  animation:
    moonrise 1.6s cubic-bezier(.2, .8, .2, 1) both,
    sway 9s ease-in-out 1.6s infinite;
}

@keyframes moonrise {
  from { opacity: 0; transform: translateY(-1.5rem); }
  to   { opacity: 1; transform: none; }
}

@keyframes sway {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(.4rem) rotate(2deg); }
}

/* Bintang: dibuat oleh script.js, berkelip dengan jeda berbeda-beda */
.stars {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.star {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff;
  opacity: .85;
  animation: twinkle var(--dur) ease-in-out var(--delay) infinite alternate;
}

@keyframes twinkle {
  from { opacity: .15; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1.25); }
}

/* Bintang jatuh: satu goresan tipis yang lewat sesekali */
.meteor {
  position: fixed;
  top: 12vh;
  left: 90vw;
  z-index: 0;
  width: 90px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
  opacity: 0;
  transform: rotate(151deg);
  animation: meteor 13s linear 4s infinite;
}

@keyframes meteor {
  0%   { transform: translate(0, 0) rotate(151deg); opacity: 0; }
  1.5% { opacity: 1; }
  8%   { transform: translate(-45vw, 25vw) rotate(151deg); opacity: 0; }
  100% { transform: translate(-45vw, 25vw) rotate(151deg); opacity: 0; }
}

/* ---------- JUDUL DAN TOMBOL (dipakai kedua tema) ---------- */

main { position: relative; z-index: 1; }

h1 {
  font-size: clamp(2.75rem, min(16vw, 30vh), 10rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  text-align: center;
  white-space: nowrap;
}

/* Huruf muncul satu per satu, lalu tanda seru bergoyang sekali */
h1 .ch {
  display: inline-block;
  animation: letter .7s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(.35s + var(--i) * .06s);
}

h1 .bang {
  color: var(--accent);
  transform-origin: 50% 100%;
  animation:
    letter .7s cubic-bezier(.2, .8, .2, 1) both,
    wiggle .9s ease-in-out 1.5s 1;
  animation-delay: calc(.35s + var(--i) * .06s), 1.5s;
}

@keyframes letter {
  from { opacity: 0; transform: translateY(.4em); }
  to   { opacity: 1; transform: none; }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-12deg); }
  60%      { transform: rotate(8deg); }
}

/* Setelah animasi masuk selesai, huruf diam dan siap melompat */
h1.settled .ch {
  animation: none;
  opacity: 1;
  transform: none;
}

h1 .ch.hop {
  animation: hop .6s cubic-bezier(.3, 1.6, .5, 1);
}

@keyframes hop {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(-.28em) rotate(-4deg); }
  70%  { transform: translateY(0) rotate(2deg); }
  100% { transform: none; }
}

/* Tombol lagu dan tema: sebaris di layar lebar, bertumpuk di layar sempit supaya tidak menabrak bulan */
.controls {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  display: flex;
  gap: .5rem;
}

@media (max-width: 480px) {
  .controls {
    flex-direction: column;
    align-items: flex-end;
  }
}

.btn {
  min-width: 44px;
  min-height: 44px;
  padding: .5rem 1.1rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.btn[hidden] { display: none; }

.btn:not(:disabled):hover {
  background: var(--ink);
  color: var(--bg);
}

.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Keadaan gagal (misalnya file lagu tidak ada): tombol dinonaktifkan tapi tetap terbaca */
.btn:disabled {
  opacity: .7;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}