@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  --serif: "Lora", "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --serif-text: "Lora", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: "Lora", Georgia, serif;
  --ink: #382b1f;
  --ink-soft: #6b5a48;
  --gold: #9b6b25;
  --gold-deep: #76511d;
  --gold-soft: #c9a45d;
  --gold-line: #d4b878;
  --cream: #f8f5ee;
  --cream-deep: #ebe1cd;
  --paper: #fffdf8;
  --line: #e8dcc8;
  --shadow-sm: 0 2px 8px #73551d10;
  --shadow: 0 8px 24px #73551d18;
  --shadow-lg: 0 16px 48px #271a0d3a;
  color: var(--ink);
  background: var(--cream);
  font-family: var(--serif-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% -10%, #fff 0, var(--cream) 42%, var(--cream-deep) 130%);
}

main {
  max-width: 540px;
  margin: 0 auto;
  height: 100dvh;
  min-height: 100dvh;
  padding: calc(10px + env(safe-area-inset-top)) 18px calc(6px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  position: relative;
}

header { text-align: center; flex-shrink: 0; padding: 2px 0 0; }
header p {
  margin: 0;
  color: var(--ink-soft);
  font: 600 11px/1 var(--ui);
  letter-spacing: .18em;
  text-transform: uppercase;
}
h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  margin: 3px 0 0;
  color: var(--gold-deep);
  letter-spacing: .015em;
}

.icon-btn, .info-btn {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  width: 20px; height: 20px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  background: transparent;
  color: var(--gold-deep);
  cursor: pointer;
  display: grid; place-items: center;
  padding: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.icon-btn { right: 46px; font-size: 11px; }
.info-btn { right: 18px; font: italic 700 12px/1 var(--serif); padding: 0 0 1px; }
.icon-btn:hover, .info-btn:hover { background: var(--gold-soft); color: #fff; border-color: var(--gold-soft); }

#beads { margin: 2px 0 4px; display: grid; place-items: center; flex-shrink: 0; }
.rosary { width: 100%; max-width: 340px; height: auto; }
.chain { fill: none; stroke: var(--gold-soft); stroke-width: 2; opacity: .85; }
.mary-glow { fill: #f6ecd6; opacity: .5; }
.mary-ring { fill: none; stroke: var(--gold-soft); stroke-width: 1.3; opacity: .7; }
.mary-stars { fill: var(--gold-soft); opacity: .75; }
.bead { fill: url(#pearlFill); stroke: #8d7a9a; stroke-width: 1; }
.bead.large { fill: url(#goldFill); stroke: #7a4e12; stroke-width: 1.5; }
.bead.done { fill: url(#goldFill); stroke: #8a5a18; opacity: .9; }
.bead.held { stroke: #3f260a; stroke-width: 2.1; }
.bead.large.held { stroke: #3f260a; stroke-width: 2.5; }
.medal-plate { fill: url(#goldFill); stroke: #7a4e12; stroke-width: 1.4; }
.medal-inner { fill: #f7e7bc; stroke: #fff4d3; stroke-width: 1; }
.medal-m { fill: none; stroke: #7a4e12; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.medal.done .medal-plate { opacity: .95; }
.medal.held .medal-plate { stroke: #5c380c; stroke-width: 1.7; }
.cross path { fill: none; stroke: #8b601f; stroke-width: 5; stroke-linecap: round; }
.cross.done path { stroke: #a06c20; }
.cross.held path { stroke: #4e300c; }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 22px 12px;
  box-shadow: var(--shadow);
  height: 208px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); opacity: .5;
}
.card span { font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.card h2 { font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1.15; margin: 5px 0 2px; color: var(--ink); }
.card > p { margin: 0 0 6px; color: var(--ink-soft); font: italic 500 14px/1.35 var(--serif-text); }
.card #prayer {
  white-space: pre-line; line-height: 1.55; font-size: 18px; font-weight: 500;
  font-family: var(--serif-text); flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
.card #prayer::-webkit-scrollbar { width: 0; }

.outline {
  margin-top: 10px; flex-shrink: 0; align-self: center;
  border: 1px solid var(--gold); background: transparent; color: var(--gold-deep);
  border-radius: 999px; padding: 8px 22px; font: 600 13px/1 var(--ui);
  letter-spacing: .06em; cursor: pointer; transition: background .2s, color .2s;
}
.outline:hover { background: var(--gold); color: #fff; }

nav {
  flex-shrink: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr;
  gap: 8px; margin-top: 8px; padding-bottom: 2px;
}
nav button {
  border: 0; background: transparent; color: var(--ink-soft); padding: 11px 6px;
  font: 600 14px/1 var(--ui); letter-spacing: .03em; cursor: pointer;
  border-radius: 10px; transition: background .18s, color .18s;
}
nav button:not(.primary):hover { background: var(--cream-deep); color: var(--gold-deep); }
nav button:disabled { opacity: .3; cursor: default; }
.primary {
  background: linear-gradient(180deg, #a06a22, #7a4e14); color: #fff !important;
  box-shadow: 0 3px 12px #7a4e1440; letter-spacing: .05em; font-weight: 700;
}
.primary:hover { filter: brightness(1.08); }

dialog {
  border: 0; border-radius: 18px; padding: 0;
  width: min(92vw, 420px); max-width: min(92vw, 420px);
  height: min(72vh, 540px); max-height: min(72vh, 540px);
  box-shadow: var(--shadow-lg); overflow: hidden;
  color: var(--ink);
}
dialog::backdrop { background: #2f231588; }
dialog article {
  position: relative; height: 100%; padding: 22px 24px 18px;
  background: var(--paper); display: flex; flex-direction: column; box-sizing: border-box;
}
dialog article::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); opacity: .5;
}
.close {
  position: absolute; right: 8px; top: 4px; border: 0; background: transparent;
  font-size: 24px; line-height: 1; color: var(--gold-deep); cursor: pointer;
  padding: 6px 10px; opacity: .6; transition: opacity .2s;
}
.close:hover { opacity: 1; }
dialog span { font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
dialog h2 { font-family: var(--serif); font-weight: 700; font-size: 25px; line-height: 1.15; margin: 5px 0 2px; color: var(--ink); }
dialog p { margin: 0 0 8px; color: var(--ink-soft); font: italic 500 14px/1.35 var(--serif-text); }
dialog #full {
  white-space: normal;
  line-height: 1.6;
  font-family: var(--serif-text);
  font-weight: 500;
  font-size: 19px;
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
}
dialog #full .verse { margin: 0 0 2px; color: var(--ink); font: 500 19px/1.6 var(--serif-text); }
dialog #full .ref {
  font: 600 13px/1 var(--ui);
  letter-spacing: .04em;
  color: var(--gold);
  margin: 0 0 16px;
}
dialog #full .meditate {
  font: italic 500 16px/1.5 var(--serif-text);
  color: var(--ink-soft);
  margin: 0;
}

#about {
  border: 0; border-radius: 16px; padding: 0;
  width: min(84vw, 320px); max-width: min(84vw, 320px);
  height: fit-content; max-height: 90vh; box-shadow: var(--shadow-lg);
}
#about::backdrop { background: #2f231588; }
.about-card {
  position: relative; padding: 20px 20px 16px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-sizing: border-box; height: auto;
}
.about-card::before {
  content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); opacity: .5;
}
.about-verse { font: 600 16px/1.4 var(--serif); color: var(--ink); margin: 4px 0 4px; }
.about-sub { font: italic 500 13px/1.35 var(--serif-text); color: var(--ink-soft); margin: 0 0 8px; }
.about-brand { font: 600 10px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.about-actions { display: flex; gap: 8px; width: 100%; }
.about-btn {
  flex: 1; border: 1px solid var(--gold); background: transparent; color: var(--gold-deep);
  border-radius: 999px; padding: 9px 8px; font: 600 13px/1 var(--ui);
  cursor: pointer; transition: background .2s, color .2s;
}
.about-btn:hover { background: var(--gold); color: #fff; }

#done {
  border: 0; border-radius: 16px; padding: 0;
  width: min(84vw, 340px); max-width: min(84vw, 340px);
  height: fit-content; max-height: 90vh; box-shadow: var(--shadow-lg);
}
#done::backdrop { background: #2f231588; }
.done-card {
  position: relative; padding: 26px 22px 18px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-sizing: border-box; height: auto; gap: 4px;
}
.done-card::before {
  content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent); opacity: .5;
}
.done-verse { font: 700 20px/1.3 var(--serif); color: var(--gold-deep); margin: 6px 0 2px; }
.done-sub { font: italic 500 14px/1.4 var(--serif-text); color: var(--ink-soft); margin: 0 0 14px; }
.done-card .about-btn { width: 100%; margin-bottom: 6px; }

[data-theme="dark"] {
  --ink: #e8dcc8; --ink-soft: #c4b49a; --gold: #c9a45d; --gold-deep: #d4ae6a;
  --gold-soft: #8a6f3e; --gold-line: #5a4a30; --cream: #1a1612; --cream-deep: #100d0a;
  --paper: #252019; --line: #3d3528; --shadow: 0 8px 24px #00000044; --shadow-lg: 0 16px 48px #00000066;
}
[data-theme="dark"] body { background: radial-gradient(circle at 50% -10%, #2a241d 0, var(--cream) 42%, var(--cream-deep) 130%); }
[data-theme="dark"] .bead { stroke: #6b5a78; }
[data-theme="dark"] .mary-glow { fill: #3a3225; opacity: .65; }
[data-theme="dark"] .chain { opacity: .55; }

/* === TEMA PER PERISTIWA === */
/* Gembira — emas hangat (default, tidak perlu override) */

/* Terang — emas bercahaya */
[data-mystery="Terang"] {
  --gold: #b8821e; --gold-deep: #8a5e1a; --gold-soft: #dab070; --gold-line: #e0c890;
}
[data-mystery="Terang"] body {
  background: radial-gradient(circle at 50% -10%, #fffdf5 0, var(--cream) 42%, var(--cream-deep) 130%);
}

/* Sedih — ungu violet pertobatan */
[data-mystery="Sedih"] {
  --gold: #7a6489; --gold-deep: #5a4470; --gold-soft: #a890b8; --gold-line: #c8b4d4;
}
[data-mystery="Sedih"] body {
  background: radial-gradient(circle at 50% -10%, #f9f6f8 0, #f4f0f3 42%, #ebe4e8 130%);
}
[data-mystery="Sedih"] .bead.large { stroke: #6a5478; }
[data-mystery="Sedih"] .cross path { stroke: #7a6090; }
[data-mystery="Sedih"] .medal-plate { stroke: #6a5478; }

/* Mulia — emas mulia kaya */
[data-mystery="Mulia"] {
  --gold: #a87420; --gold-deep: #7a4e14; --gold-soft: #d4a850; --gold-line: #e0c070;
}
[data-mystery="Mulia"] body {
  background: radial-gradient(circle at 50% -10%, #fffef8 0, var(--cream) 42%, #f0e6d0 130%);
}

/* Dark mode + peristiwa */
[data-theme="dark"][data-mystery="Terang"] {
  --gold: #d4b070; --gold-deep: #e0c080; --gold-soft: #9a7a40; --gold-line: #6a5830;
}
[data-theme="dark"][data-mystery="Sedih"] {
  --gold: #a890c0; --gold-deep: #c0a0d0; --gold-soft: #6a5a7e; --gold-line: #4a3a5e;
}
[data-theme="dark"][data-mystery="Sedih"] body {
  background: radial-gradient(circle at 50% -10%, #2a242e 0, #1f1a22 42%, #15121a 130%);
}
[data-theme="dark"][data-mystery="Mulia"] {
  --gold: #d4a850; --gold-deep: #e0b860; --gold-soft: #8a6a30; --gold-line: #5a4a20;
}

@media (max-width: 300px) {
  main { padding-left: 10px; padding-right: 10px; }
  .card { height: 198px; padding: 10px 14px 10px; }
  .card h2 { font-size: 20px; }
  .card > p { display: none; }
  .card #prayer { font-size: 16px; }
  nav button { font-size: 13px; padding: 9px 3px; }
  h1 { font-size: 24px; }
  .icon-btn { right: 40px; }
}
@media (max-width: 370px) {
  main { padding-left: 13px; padding-right: 13px; }
  .card { padding: 12px 16px 10px; height: 194px; }
  .card h2 { font-size: 22px; }
  .card #prayer { font-size: 17px; }
  nav button { font-size: 13px; padding: 10px 4px; }
  h1 { font-size: 26px; }
}