:root {
  --ink: #153f45;
  --muted: #58787b;
  --aqua: #249ba2;
  --jade: #75ad88;
  --gold: #d7b768;
  --glass: rgba(255, 255, 255, 0.72);
  --line: rgba(215, 183, 104, 0.62);
  --shadow: 0 12px 34px rgba(44, 113, 116, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  font-family: "Noto Serif SC", "Songti SC", SimSun, serif;
  background:
    radial-gradient(circle at 10% 16%, rgba(255,255,255,.92) 0 9%, transparent 28%),
    radial-gradient(circle at 92% 28%, rgba(118,206,211,.22) 0 12%, transparent 31%),
    radial-gradient(circle at 20% 79%, rgba(120,190,153,.20) 0 10%, transparent 30%),
    linear-gradient(160deg, #eefbf9 0%, #dff5f2 42%, #cbeae5 100%);
  background-attachment: fixed;
}

body::before,
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(255,255,255,.12), 0 0 0 42px rgba(85,180,179,.06);
}
body::before { right: -110px; top: 22%; }
body::after { left: -135px; bottom: 10%; }

button, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.app-shell {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 18px max(36px, env(safe-area-inset-bottom));
}

.glass-panel {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 24px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.question-panel { position: relative; padding: 20px 20px 16px; }
.question-panel label {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .12em;
}
.question-panel label::before,
.question-panel label::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold)); }
.question-panel label::after { transform: rotate(180deg); }
textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  resize: none;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  text-align: center;
  font-size: 18px;
  line-height: 1.65;
}
textarea::placeholder { color: #83a2a2; }
.counter { display: block; text-align: right; color: var(--muted); font: 12px/1.2 system-ui, sans-serif; }
.counter b { font-weight: 500; }

.draw-settings { margin: 20px 0 0; }
.count-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.64);
  box-shadow: 0 8px 24px rgba(51,128,127,.09);
}
.count-option {
  min-height: 50px;
  border: 0;
  border-radius: 999px;
  color: var(--ink);
  background: transparent;
  font-size: 19px;
  cursor: pointer;
}
.count-option.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--aqua), var(--jade));
  box-shadow: 0 7px 18px rgba(34,145,150,.22);
}
.draw-button {
  width: 100%;
  min-height: 54px;
  margin-top: 14px;
  border: 0;
  border-radius: 999px;
  color: white;
  background: linear-gradient(115deg, #1998a2, #8bb77c);
  box-shadow: 0 12px 28px rgba(37,143,145,.24);
  font-size: 18px;
  letter-spacing: .12em;
  cursor: pointer;
}
.draw-button:disabled { opacity: .65; cursor: wait; }

.result { padding-top: 26px; }
.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 18px;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: .13em;
  text-align: center;
}
.section-heading::before,
.section-heading::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.section-heading::after { transform: rotate(180deg); }
.section-heading.compact { margin-bottom: 12px; font-size: 21px; }
.result-question { margin: -9px 0 18px; color: var(--muted); text-align: center; font-size: 14px; line-height: 1.55; }

.spread { display: flex; flex-direction: column; gap: 14px; }
.spread-row { display: flex; justify-content: center; gap: clamp(8px, 2.8vw, 15px); }
.spread-card { width: var(--card-width); min-width: 0; text-align: center; }
.card-image-wrap,
.reading-image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 0.5714;
  border: 1.5px solid var(--gold);
  border-radius: 8px;
  background: linear-gradient(160deg, #ecfbf8, #9fd3ca);
  box-shadow: 0 8px 20px rgba(37,99,101,.14);
}
.card-image, .reading-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.is-reversed { transform: rotate(180deg); }
.image-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  color: #fff;
  background: linear-gradient(145deg, #166d75, #74a982);
  font-size: 14px;
  line-height: 1.45;
}
.position-label { margin: 7px 0 2px; font-size: clamp(14px, 4vw, 17px); font-weight: 700; }
.card-caption { margin: 0; color: var(--muted); font: 11px/1.35 system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spread[data-count="3"] { --card-width: min(29%, 122px); }
.spread[data-count="5"] { --card-width: min(29%, 118px); }
.spread[data-count="7"] { --card-width: min(22%, 94px); }
.spread[data-count="7"] .spread-row { gap: clamp(5px, 1.8vw, 10px); }
.spread[data-count="7"] .position-label { font-size: 13px; }
.spread[data-count="7"] .card-caption { display: none; }

.core-reading { margin: 25px 0 30px; padding: 20px; }
.core-reading p { margin: 0; font-size: 16px; line-height: 1.95; text-align: justify; }
.reading-list { display: grid; gap: 14px; }
.reading-card { display: grid; grid-template-columns: 30% 1fr; gap: 16px; padding: 13px; align-items: center; }
.reading-image-wrap { width: 100%; border-radius: 7px; }
.reading-copy { min-width: 0; }
.reading-copy h3 { margin: 0 0 9px; font-size: 17px; line-height: 1.45; }
.keywords { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.keywords span { padding: 3px 8px; border: 1px solid rgba(52,132,131,.2); border-radius: 999px; color: #347677; background: rgba(220,245,239,.72); font: 11px/1.2 system-ui, sans-serif; }
.reading-copy p { margin: 0; color: #31575b; font-size: 14px; line-height: 1.75; text-align: justify; }
.reset-button {
  display: block;
  min-width: 210px;
  min-height: 48px;
  margin: 26px auto 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255,255,255,.58);
  font-size: 17px;
  cursor: pointer;
}
.disclaimer { margin: 30px auto 0; max-width: 390px; color: #5f7e80; font: 12px/1.7 system-ui, sans-serif; text-align: center; }
.attribution { margin: 5px 0 0; color: #789294; font: 10px/1.6 system-ui, sans-serif; text-align: center; }

.spread-card.reveal { animation: reveal .48s both; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px) rotateY(22deg); } to { opacity: 1; transform: none; } }
@media (max-width: 360px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .reading-card { grid-template-columns: 28% 1fr; gap: 11px; padding: 10px; }
  .reading-copy p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .spread-card.reveal { animation: none; } }

/* Refined entry screen */
.entry-screen{min-height:calc(100svh - 56px);display:flex;flex-direction:column;justify-content:center;padding:8px 2px 20px}.question-panel{padding:2px 8px 0}.question-panel label{display:block;margin:0;text-align:left;font:700 27px/1.3 "Noto Serif SC","Songti SC",serif;letter-spacing:.04em}.question-panel label::before,.question-panel label::after{display:none}.question-hint{margin:7px 0 17px;color:var(--muted);font:14px/1.5 system-ui,sans-serif}.question-field{position:relative;padding:13px 15px 7px;border:1px solid rgba(255,255,255,.92);border-radius:19px;background:rgba(255,255,255,.64);box-shadow:0 10px 30px rgba(38,110,112,.10);backdrop-filter:blur(12px)}.question-field textarea{min-height:62px;text-align:left;font:16px/1.65 system-ui,sans-serif}.settings-title{margin:19px 7px 10px;font:600 14px/1.4 system-ui,sans-serif;color:#426c70}.count-selector{gap:7px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.count-option{min-height:62px;border:1px solid rgba(64,139,137,.15);border-radius:17px;background:rgba(255,255,255,.58);box-shadow:0 7px 18px rgba(45,110,111,.07);display:flex;flex-direction:column;justify-content:center;gap:3px}.count-option b{font-size:18px}.count-option small{font:11px/1.2 system-ui,sans-serif;color:#69888a}.count-option.is-active{background:linear-gradient(145deg,#208f99,#6eaa89);box-shadow:0 9px 22px rgba(34,137,140,.22)}.count-option.is-active small{color:rgba(255,255,255,.78)}.deck-stage{position:relative;height:235px;margin:10px 0 -1px;display:grid;place-items:center}.deck-card{position:absolute;width:112px;height:190px;border-radius:10px;border:1px solid #d9bd72;background:#176d76;box-shadow:0 14px 28px rgba(22,88,91,.21);transition:.5s}.deck-back{transform:translate(-14px,8px) rotate(-9deg);opacity:.55}.deck-mid{transform:translate(13px,5px) rotate(8deg);opacity:.75}.deck-front{overflow:hidden;background:radial-gradient(circle at 50% 46%,#2d9192,#145b69 70%);box-shadow:inset 0 0 0 5px #1b6e72,inset 0 0 0 6px rgba(226,196,119,.8),0 18px 34px rgba(21,91,94,.25)}.deck-front::before,.deck-front::after{content:"";position:absolute;inset:13px;border:1px solid rgba(224,196,122,.66);border-radius:50%}.deck-front::after{inset:25px;transform:rotate(45deg);border-radius:18px}.deck-moon{position:absolute;left:50%;top:50%;width:45px;height:45px;border:2px solid #dfc477;border-radius:50%;transform:translate(-50%,-50%)}.deck-moon::after{content:"";position:absolute;width:38px;height:38px;left:10px;top:-5px;border-radius:50%;background:#247f84}.deck-star{position:absolute;left:50%;top:50%;color:#edda9f;font-size:18px;transform:translate(-50%,-50%)}.ripple{position:absolute;width:180px;height:55px;border:1px solid rgba(61,158,157,.19);border-radius:50%}.r2{width:240px;height:80px;opacity:.55}.deck-guidance{margin:0 0 11px;text-align:center;color:#648386;font:13px/1.4 system-ui,sans-serif;letter-spacing:.12em}.draw-button{width:calc(100% - 16px);margin:0 auto;min-height:55px}.deck-stage.shuffling .deck-back{animation:shuffleLeft .55s ease-in-out infinite alternate}.deck-stage.shuffling .deck-mid{animation:shuffleRight .55s ease-in-out infinite alternate}@keyframes shuffleLeft{to{transform:translate(-52px,-2px) rotate(-16deg)}}@keyframes shuffleRight{to{transform:translate(52px,-2px) rotate(16deg)}}

.image-fallback[hidden]{display:none !important}


.draw-button.is-empty{opacity:.48;filter:saturate(.45);box-shadow:none;cursor:not-allowed}