/* Homepage prayer generator: parchment, church gold, and carved frames. */
#pray { --generator-ink: #493019; --generator-gold: #c9a453; }
#pray .pray-wrap { gap: 32px; min-width: 0; }
#pray :where(.generator-input, .generator-topics, .verse-card, #resultBox) {
  position: relative;
  border: 0;
  border-radius: 4px;
  padding: 38px 40px;
  overflow: visible;
  background: linear-gradient(135deg, #f8efd9, #efe2c2);
  color: var(--generator-ink);
  box-shadow: inset 0 0 28px #8c632322, 0 8px 24px #09060333;
}
#pray :where(.generator-input, .generator-topics, .verse-card, #resultBox)::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 44px solid transparent;
  border-image: url(../images/ui/ornate-frame.svg) 80 / 44px stretch;
  pointer-events: none;
}
#pray .card-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
#pray .card-title { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--generator-ink); font: 700 24px/1.4 var(--serif); flex-shrink: 0; }
#pray .generator-quill { width: 28px; height: 28px; flex-shrink: 0; color: #a57a2c; }
#pray .card-hint { color: #80613b; font-size: 13px; line-height: 1.7; }
#pray .generator-writing { position: relative; }
#pray #needInput { display: block; box-sizing: border-box; width: 100%; height: 190px; min-height: 150px; padding: 16px 18px 38px; background: linear-gradient(135deg, #fcf6e8, #f6ecd5); border: 1px solid #b5914c99; border-radius: 8px; color: var(--generator-ink); font: 400 18px/1.9 var(--serif); box-shadow: inset 0 2px 8px #7d582313; color-scheme: light; }
#pray #needInput::placeholder { color: #937b58; }
#pray #needInput:focus-visible { outline: 2px solid #aa7c2d; outline-offset: 3px; }
#pray .char-counter-row { position: absolute; bottom: 10px; right: 18px; margin: 0; pointer-events: none; }
#pray #charCount { color: #907b5d; font-size: 12px; }
#pray .generator-topics { background: radial-gradient(ellipse at top, #30231466, transparent 80%), #15110b; }
#pray .generator-topics .card-title { color: #e2c47f; }
#pray .generator-topic-verse { color: #bca16c; max-width: 620px; }
#pray .tone-group { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
#pray .tone-option label { border: 1px solid #c9a4538c; border-radius: 999px; background: #20170b33; color: #e2c47f; min-height: 48px; padding: 10px 8px; font-size: 15px; gap: 6px; height: 100%; box-sizing: border-box; }
#pray .tone-option label > span:first-child { filter: none; }
#pray .tone-option label:hover { background: #c9a45318; border-color: #eed497; }
#pray .tone-option input:checked + label { background: linear-gradient(135deg, #f6dc93, #d4a548); color: #3b240f; border-color: #f6dc93; font-weight: 700; box-shadow: 0 0 16px #d4a54833; }
#pray .tone-option input:focus-visible + label { outline: 2px solid #f6dc93; outline-offset: 3px; }
#pray #generateBtn { --gold-button-height: 76px; width: 100%; max-width: 640px; align-self: center; margin: 6px 0; font: 700 26px/1 var(--serif); letter-spacing: .2em; background: url(../images/ui/btn-cap-l3.webp) left center / auto 100% no-repeat, url(../images/ui/btn-cap-r3.webp) right center / auto 100% no-repeat, url(../images/ui/btn-mid2.webp) center / 100% 100% no-repeat; }
#pray #btnText { display: inline-flex; align-items: center; justify-content: center; }
#pray .result-section { gap: 30px; min-width: 0; }
#pray .verse-cards { gap: 28px; }
#pray .verse-card { padding: 32px 44px; }
#pray .verse-card .verse-text { color: var(--generator-ink); font: 400 18px/2 var(--serif); }
#pray .verse-card .verse-ref { text-align: right; color: #947039; font: 500 14px/1.7 var(--serif); margin-top: 10px; }
#pray #prayerDivider { display: flex; align-items: center; justify-content: center; gap: 16px; color: #c6ac73; font: 400 14px/1.8 var(--serif); letter-spacing: .15em; text-align: center; }
#pray #prayerDivider.hidden { display: none; }
#pray #prayerDivider::before, #pray #prayerDivider::after { content: ""; flex: 1; max-width: 100px; height: 1px; background: linear-gradient(90deg, transparent, #c9a45380); }
#pray #prayerDivider::after { transform: rotate(180deg); }
#pray .prayer-title { color: var(--generator-ink); font: 700 24px/1.6 var(--serif); justify-content: center; gap: 14px; margin: 0 0 24px; }
#pray .prayer-title::before, #pray .prayer-title::after { content: "◆"; flex: 1; max-width: 90px; height: 14px; color: #ac8037; font-size: 10px; line-height: 14px; background: linear-gradient(90deg, transparent, #b88f45, transparent) center / 100% 1px no-repeat; text-align: center; }
#pray .prayer-body { color: var(--generator-ink); font: 400 18px/2 var(--serif); text-indent: 2em; margin: 0 0 16px; overflow-wrap: anywhere; }
#pray .prayer-amen { color: #947039; font: 700 18px/2 var(--serif); text-align: right; text-indent: 0; margin: 12px 0 0; }
#pray #resultText { color: var(--generator-ink); font: 400 18px/2 var(--serif); overflow-wrap: anywhere; }
#pray #resultControls { gap: 10px; padding: 24px 0 0; align-items: center; }
#pray #resultControls .btn-secondary { background: #fbf3e1; color: #87632d; border: 1px solid #b58b47; border-radius: 999px; white-space: nowrap; padding: 10px 14px; min-height: 42px; font: 600 14px/1.4 var(--serif); }
#pray #resultControls .btn-secondary:hover { background: #ecd9ae; }
#pray #resultControls svg { stroke: currentColor; flex-shrink: 0; }
#pray #shareBtn { --gold-button-height: 52px; padding-inline: 28px; font-size: 17px; }
#pray #savePrompt { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; background: #19130d; border: 1px solid #c9a45366; border-radius: 10px; padding: 12px 16px; }
#pray #savePrompt.hidden { display: none; }
#pray #savePrompt p { flex: 1; flex-basis: auto; margin: 0; color: #e6d7b5; font-size: 14px; line-height: 1.6; min-width: 0; }
#pray .save-actions { display: flex; flex-shrink: 0; gap: 8px; }
#pray .save-actions .btn { min-width: 4.5em; white-space: nowrap; font-size: 14px; }
#pray #skipSave { border: 1px solid #c9a453; border-radius: 999px; background: transparent; color: #ddc48a; padding: 8px 12px; }
#pray #confirmSave { --gold-button-height: 40px; padding-inline: 18px; }
@media (max-width: 760px) {
  #pray .tone-group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #pray .card-heading-row { flex-wrap: wrap; gap: 8px; }
  #pray .card-hint { text-align: left; }
}
@media (max-width: 600px) {
  #pray .generator-topic-verse { display: none; }
  #pray #generateBtn { --gold-button-height: 64px; font-size: 23px; }
}
@media (max-width: 480px) {
  #pray .pray-wrap { gap: 26px; }
  #pray :where(.generator-input, .generator-topics, #resultBox) { padding: 26px 20px; }
  #pray :where(.generator-input, .generator-topics, .verse-card, #resultBox)::before { inset: -6px; border-width: 30px; border-image-width: 30px; }
  #pray .card-title { font-size: 22px; }
  #pray #needInput { height: 180px; font-size: 17px; padding-inline: 12px; }
  #pray .tone-group { gap: 10px 6px; }
  #pray .tone-option label { font-size: 14px; padding-inline: 4px; gap: 4px; }
  #pray .verse-card { padding: 26px 30px; }
  #pray .prayer-title { font-size: 22px; gap: 10px; }
  #pray .prayer-body { font-size: 17px; }
  #pray #resultControls { gap: 8px; }
  #pray #savePrompt { padding: 10px; gap: 8px; }
  #pray #savePrompt p { font-size: 12px; }
  #pray .save-actions { gap: 6px; }
}
@media (max-width: 380px) {
  #pray .tone-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Carved gold baroque frame (raster, 9-slice) — overrides the earlier SVG frame. */
#pray :where(.generator-input, .generator-topics, .verse-card, #resultBox) { --fb: 96px; }
#pray :where(.verse-card) { --fb: 62px; }
#pray :where(.generator-input, .generator-topics, .verse-card, #resultBox)::before {
  inset: calc(var(--fb) * -.544) calc(var(--fb) * -.24) calc(var(--fb) * -.419);
  border-style: solid; border-color: transparent;
  border-width: calc(var(--fb) * 1.111) var(--fb) calc(var(--fb) * 1.105);
  border-image: url(../images/ui/frame-9.webp?v=2) 180 162 179 162 / calc(var(--fb) * 1.111) var(--fb) calc(var(--fb) * 1.105) stretch;
  background:
    url(../images/ui/fleur-top.webp) center top / calc(var(--fb) * 1.578) auto no-repeat,
    url(../images/ui/fleur-bottom.webp) center bottom / calc(var(--fb) * 1.578) auto no-repeat;
  background-origin: border-box; background-clip: border-box;
}
#pray :where(.generator-input, #resultBox)::before {
  background:
    url(../images/ui/fleur-top.webp) center top / calc(var(--fb) * 1.578) auto no-repeat,
    url(../images/ui/fleur-bottom.webp) center bottom / calc(var(--fb) * 1.578) auto no-repeat,
    url(../images/ui/fleur-side.webp) left center / calc(var(--fb) * .519) auto no-repeat,
    url(../images/ui/fleur-side.webp) right center / calc(var(--fb) * .519) auto no-repeat;
  background-origin: border-box; background-clip: border-box;
}
#pray .verse-card { margin: 14px 0; }
#pray #resultBox { margin-top: 44px; }
#pray #savePrompt { margin-top: 44px; }
#pray .verse-cards { gap: 40px; margin-top: 30px; }
#pray #prayerDivider { margin-top: 30px; }
@media (max-width: 480px) {
  #pray :where(.generator-input, .generator-topics, .verse-card, #resultBox) { --fb: 64px; }
  #pray :where(.verse-card) { --fb: 46px; }
  #pray :where(.generator-input, .generator-topics, .verse-card, #resultBox)::before { inset: calc(var(--fb) * -.544) calc(var(--fb) * -.24) calc(var(--fb) * -.419); border-width: calc(var(--fb) * 1.111) var(--fb) calc(var(--fb) * 1.105); border-image-width: calc(var(--fb) * 1.111) var(--fb) calc(var(--fb) * 1.105); }
}
#pray .pray-wrap { gap: 56px; }
#pray #prayerDivider { text-transform: none; }
/* loading state: keep the solid gold face; only the spinner shows (dark brown for contrast) */
#pray #generateBtn:disabled { opacity: 1; filter: none; cursor: wait; pointer-events: none; }
#pray #generateBtn .spinner { border-color: rgba(58, 36, 14, .28); border-top-color: #3a240e; }
/* prayer body fills the frame symmetrically (CJK lines justified so no ragged right gap on iOS) */
#pray #resultText { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }
#pray #resultText .prayer-body { max-width: none; text-align: justify; text-justify: inter-character; }
/* 阿们: centred, large Songti, deep antique gold-brown — same as the share image */
#pray .prayer-amen { text-align: center; text-indent: 0; margin: 22px 0 4px; padding-left: .45em; font: 700 34px/1.4 "Noto Serif SC", var(--serif); letter-spacing: .45em; color: #6e4b18; background: linear-gradient(180deg, #8f6420, #5e3e14); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
@media (max-width: 480px) { #pray .prayer-amen { font-size: 32px; } }
/* result actions: gold 分享 on its own row, then four equal secondary pills */
#pray #resultControls { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 10px; justify-items: stretch; align-items: center; }
#pray #resultControls[style*="none"] { display: none !important; }
#pray #resultControls #shareBtn { order: -1; grid-column: 1 / -1; justify-self: center; width: min(100%, 440px); }
#pray #resultControls #copyBtn { order: 1; } #pray #resultControls #copyImgBtn { order: 2; }
#pray #resultControls #downloadImgBtn { order: 3; } #pray #resultControls #speakBtn { order: 4; }
#pray #resultControls .btn-secondary { width: 100%; min-width: 0; height: 44px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; font-size: clamp(12px, 3.4vw, 14px); }
#pray #resultControls .btn-secondary svg { flex: 0 0 auto; width: 15px; height: 15px; }
@media (max-width: 359px) { #pray #resultControls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) {
  #pray #resultControls { gap: 10px 7px; }
  #pray #resultControls .btn-secondary { font-size: clamp(11.5px, 3.1vw, 13px); gap: 3px; padding: 0 4px; letter-spacing: 0; }
  #pray #resultControls .btn-secondary svg { width: 13px; height: 13px; }
}