.draw-page {
  --tarot-red: #c95f50;
  --tarot-gold: #c79b58;
  --tarot-green: #244b43;
  min-height: 100svh;
  overflow-x: hidden;
  background: radial-gradient(circle at 50% -10%, #fff8e9 0, #edf3e8 44%, #dce9df 100%);
}

.draw-header { background: #fffdf9cc; backdrop-filter: blur(14px); }
.draw-shell { width: min(calc(100% - 32px), 1040px); margin: auto; padding: 42px 0 150px; }
.draw-intro { text-align: center; }
.draw-intro h1 { margin: .24em 0; font: 700 clamp(46px, 8vw, 82px)/1.05 Georgia, "Noto Serif TC", serif; letter-spacing: -.04em; }
.draw-intro p { max-width: 680px; margin: 0 auto; color: #5e716c; font-size: 17px; line-height: 1.75; }

.mode-section { margin: 52px auto 34px; }
.section-heading small, .spread-heading small { color: var(--tarot-red); font-weight: 800; letter-spacing: .12em; }
.section-heading h2 { margin: 6px 0 20px; font: 700 30px Georgia, "Noto Serif TC", serif; }
.mode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mode-grid button { display: grid; grid-template-columns: 48px 1fr; grid-template-rows: 1fr 1fr; min-width: 0; padding: 15px; border: 1px solid #d8ded8; border-radius: 18px; background: #fffdf9c9; color: #244b43; text-align: left; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.mode-grid button:hover { transform: translateY(-2px); border-color: #c79b58; }
.mode-grid button.active { border-color: #c95f50; background: #fff7ef; box-shadow: 0 10px 24px #8c5e4930; }
.mode-grid button span { grid-row: 1 / 3; align-self: center; font-size: 29px; }
.mode-grid button strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.mode-grid button small { color: #758580; }

.spread-workspace { display: grid; justify-items: center; margin: 24px auto; padding: 28px 20px 26px; border: 1px solid #ffffffbd; border-radius: 32px; background: #fffdf8a6; box-shadow: 0 18px 54px #244b4312; }
.spread-heading { display: grid; grid-template-columns: auto 1fr; gap: 18px; width: min(100%, 760px); margin-bottom: 28px; }
.spread-heading > span { display: grid; width: 60px; height: 60px; place-items: center; border-radius: 20px; background: #f5e7d7; font-size: 30px; }
.spread-heading h2 { margin: 5px 0 4px; font: 700 32px Georgia, "Noto Serif TC", serif; }
.spread-heading p { margin: 0; color: #64746f; line-height: 1.6; }
.tarot-question-panel { width: min(100%, 760px); margin: 0 0 28px; padding: 18px; border: 1px solid #d9dfd7; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px #244b430b; }
.tarot-question-panel label { display: block; margin-bottom: 10px; color: var(--tarot-green); font-size: 18px; font-weight: 850; }
.tarot-question-panel textarea, .tarot-chat textarea { box-sizing: border-box; width: 100%; resize: vertical; border: 1px solid #cbd4cf; border-radius: 15px; padding: 14px 15px; background: #fffdf9; color: #244b43; font: 16px/1.55 inherit; outline: none; }
.tarot-question-panel textarea:focus, .tarot-chat textarea:focus { border-color: var(--tarot-red); box-shadow: 0 0 0 3px #c95f5018; }
.tarot-question-panel > div { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; color: #71817c; }
.tarot-question-panel small { line-height: 1.45; }
.tarot-question-panel span { flex: none; font-size: 12px; }
.spread-cards { display: grid; grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr)); align-items: start; justify-content: center; gap: 18px; width: 100%; transition: transform .3s ease, opacity .3s ease; }
.spread-cards.count-1 { --columns: 1; max-width: 342px; }
.spread-cards.count-3 { --columns: 3; max-width: 860px; }
.spread-cards.count-4 { --columns: 4; max-width: 940px; }
.spread-cards.count-5 { --columns: 5; max-width: 1000px; }
.spread-cards.is-revealing { transform: scale(.97); opacity: .58; }
.spread-card-wrap { display: grid; justify-items: center; gap: 9px; min-width: 0; }
.spread-card-wrap > small { min-height: 34px; color: #a25246; font-size: 12px; font-weight: 800; text-align: center; }
.tarot-card { position: relative; width: 100%; aspect-ratio: 2 / 3; border: 7px solid #f8edd8; border-radius: 19px; overflow: hidden; background: #fff8ea; box-shadow: 0 18px 44px #183b3525; }
.count-1 .tarot-card { border-width: 10px; border-radius: 24px; }
.tarot-card.is-back { display: grid; place-items: center; background: #244b43; }
.tarot-back-pattern { display: grid; width: 72%; aspect-ratio: 1; place-items: center; border: 2px solid #eac480; border-radius: 50%; background: #f7ead8e8; color: var(--tarot-green); }
.tarot-back-pattern span { font: italic 900 92px Georgia; }
.tarot-back-pattern i { font-size: 12px; font-style: normal; letter-spacing: .16em; }
.tarot-face { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 18px; background: linear-gradient(155deg, #fff9ec, #f4e2c8); }
.tarot-face::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--tarot-gold); border-radius: 12px; pointer-events: none; }
.tarot-number { z-index: 1; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #805843; font: 700 10px Georgia; letter-spacing: .08em; }
.tarot-number span:nth-child(2) { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--tarot-gold); border-radius: 50%; background: #fff9ee; font-size: 12px; }
.count-1 .tarot-number { font-size: 13px; letter-spacing: .12em; }
.count-1 .tarot-number span:nth-child(2) { width: 50px; height: 50px; font-size: 17px; }
.tarot-scene { z-index: 1; display: grid; align-content: center; justify-items: center; gap: 12px; margin: 12px 0; padding: 18px 12px; border: 1px solid #d8b67f; border-radius: 100px 100px 22px 22px; background: radial-gradient(circle at 50% 20%, #ffdba8 0, #f2a79c 40%, #6f9ca0 100%); color: #173c36; text-align: center; }
.tarot-scene b { font: 700 18px/1.2 Georgia, "Noto Serif TC", serif; }
.tarot-scene p { margin: 0; padding: 8px; border-radius: 10px; background: #fff9e9d9; font-size: 9px; line-height: 1.45; }
.tarot-title { z-index: 1; display: grid; gap: 3px; text-align: center; }
.tarot-title strong { font: 700 16px Georgia, "Noto Serif TC", serif; }
.tarot-title small { font-size: 7px; letter-spacing: .08em; }
.count-1 .tarot-title strong { font-size: 28px; }
.count-1 .tarot-title small { font-size: 9px; }
.tarot-card.is-reversed .tarot-face { transform: rotate(180deg); }

.draw-button, .secondary-button, .share-button { border: 0; border-radius: 999px; padding: 15px 26px; font: 800 16px inherit; cursor: pointer; }
.draw-button { margin-top: 26px; background: var(--tarot-red); box-shadow: 0 12px 28px #c95f5040; color: #fff; }
.draw-button:disabled { background: #7b8d88; cursor: default; }
.draw-lock-note { margin-bottom: 0; color: #6d7c78; font-size: 12px; text-align: center; }
.tarot-support-card { width: min(100%, 680px); margin-top: 22px; padding: 22px; border-radius: 22px; background: #fff1e9; color: #613b35; }
.tarot-support-card h3 { margin: 0 0 8px; }
.tarot-support-card p { line-height: 1.65; }
.tarot-support-card a, .chat-paywall a { display: inline-block; border-radius: 999px; padding: 11px 17px; background: var(--tarot-green); color: #fff; font-weight: 800; text-decoration: none; }
.spread-result { max-width: 820px; margin: 24px auto; }
.reading-card { display: grid; grid-template-columns: 58px 1fr; gap: 18px; margin: 14px 0; padding: 24px; border: 1px solid #ffffffad; border-radius: 25px; background: #fffdf8; box-shadow: 0 14px 38px #244b4310; }
.reading-index { color: #c79b58; font: 700 30px Georgia; }
.reading-card small { color: var(--tarot-red); font-weight: 800; }
.reading-card h3 { margin: 5px 0 10px; font: 700 30px Georgia, "Noto Serif TC", serif; }
.reading-card h3 em { color: #b67954; font-size: 20px; font-style: normal; }
.reading-card p { line-height: 1.75; }
.draw-keywords, .draw-weights > div { display: flex; flex-wrap: wrap; gap: 8px; }
.draw-keywords span { padding: 8px 12px; border-radius: 999px; background: #edf3e8; font-size: 13px; font-weight: 800; }
.draw-weights { margin-top: 18px; padding: 16px; border-radius: 18px; background: #f5eee3; }
.draw-weights small { display: block; margin-bottom: 10px; }
.draw-weights b { padding: 8px 11px; border: 1px solid #dbc6ab; border-radius: 12px; background: #fffaf1; font-size: 13px; }
.draw-action { padding-left: 15px; border-left: 3px solid var(--tarot-red); font-weight: 800; }
.draw-status-link { display: inline-block; margin-top: 12px; color: var(--tarot-green); font-weight: 800; }
.tailored-reading { margin: 28px 0; padding: clamp(22px, 5vw, 42px); border: 1px solid #eadbc8; border-radius: 30px; background: linear-gradient(145deg, #fffdf9, #f7efe4); box-shadow: 0 20px 52px #244b4314; }
.tailored-heading, .chat-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.tailored-heading small, .chat-heading small { color: var(--tarot-red); font-weight: 850; letter-spacing: .08em; }
.tailored-heading span, .chat-heading strong { border-radius: 999px; padding: 7px 11px; background: #e8efe9; color: #516a63; font-size: 12px; }
.tailored-reading > h2 { margin: 14px 0 12px; font: 700 clamp(30px, 5vw, 44px)/1.15 Georgia, "Noto Serif TC", serif; }
.reading-answer, .tailored-reading section p { color: #405952; font-size: 16px; line-height: 1.8; }
.reading-details { display: grid; gap: 12px; margin: 24px 0; }
.reading-detail { padding: 18px; border: 1px solid #e3d7c6; border-radius: 18px; background: #fffdf9; }
.reading-detail small { color: var(--tarot-red); font-weight: 850; }
.reading-detail h3 { margin: 6px 0 8px; font-size: 19px; }
.reading-detail p { margin: 6px 0; color: #50645f; line-height: 1.65; }
.reading-next { padding: 18px 20px; border-left: 4px solid var(--tarot-red); border-radius: 6px 18px 18px 6px; background: #fff6ec; }
.reading-next h3, .tailored-reading section h3 { margin: 0 0 6px; }
.reading-closing { margin: 24px 0 0; color: #6d7d78; font-size: 13px; line-height: 1.65; }
.tarot-chat { margin: 28px 0; padding: 24px; border: 1px solid #dbe2dc; border-radius: 26px; background: #f8fbf7; }
.chat-heading h2 { margin: 5px 0 18px; font: 700 27px Georgia, "Noto Serif TC", serif; }
.chat-history { display: grid; gap: 10px; margin-bottom: 14px; }
.chat-bubble { max-width: 88%; padding: 13px 15px; border-radius: 18px; line-height: 1.65; white-space: pre-wrap; }
.chat-bubble.user { justify-self: end; border-bottom-right-radius: 5px; background: #244b43; color: #fff; }
.chat-bubble.assistant { justify-self: start; border-bottom-left-radius: 5px; background: #fff; color: #405952; }
.tarot-chat form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px; }
.tarot-chat form button { min-height: 50px; border: 0; border-radius: 15px; padding: 0 18px; background: var(--tarot-red); color: #fff; font-weight: 850; cursor: pointer; }
.tarot-chat form button:disabled { opacity: .55; cursor: wait; }
.chat-paywall { margin-top: 14px; padding: 18px; border-radius: 18px; background: #fff3e2; }
.chat-paywall p { color: #5e6f6a; line-height: 1.6; }
.chat-note { margin: 13px 0 0; color: #71817c; font-size: 12px; line-height: 1.55; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.result-actions { display: flex; justify-content: center; gap: 12px; margin: 24px 0 8px; }
.secondary-button { border: 1px solid #bdc9c3; background: #fffdf8; color: #244b43; }
.share-button { background: #244b43; color: #fff; }
.share-note { min-height: 24px; color: #657772; font-size: 13px; text-align: center; }
.draw-boundary { max-width: 720px; margin: 24px auto; padding: 17px 20px; border-radius: 18px; background: #ffffff80; color: #5f6f6a; font-size: 12px; line-height: 1.6; }

@media (max-width: 780px) {
  .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spread-cards.count-4, .spread-cards.count-5 { --columns: 2; max-width: 560px; }
  .spread-cards.count-3 { max-width: 720px; }
}

@media (max-width: 540px) {
  .draw-shell { width: min(calc(100% - 24px), 1040px); padding-top: 26px; }
  .draw-intro h1 { font-size: 43px; }
  .mode-section { margin-top: 38px; }
  .mode-grid { gap: 9px; }
  .mode-grid button { grid-template-columns: 40px 1fr; padding: 12px 10px; border-radius: 15px; }
  .mode-grid button span { font-size: 23px; }
  .mode-grid button strong { font-size: 13px; }
  .spread-workspace { padding: 22px 12px; border-radius: 24px; }
  .spread-heading { grid-template-columns: 48px 1fr; gap: 12px; }
  .spread-heading > span { width: 48px; height: 48px; border-radius: 16px; font-size: 24px; }
  .spread-heading h2 { font-size: 26px; }
  .spread-cards.count-3, .spread-cards.count-4, .spread-cards.count-5 { --columns: 2; gap: 14px 9px; }
  .spread-cards.count-1 { width: min(78vw, 320px); }
  .spread-card-wrap > small { min-height: 30px; font-size: 10px; }
  .tarot-card { border-width: 5px; border-radius: 13px; }
  .tarot-face { padding: 10px; }
  .tarot-face::before { inset: 6px; }
  .tarot-number span:nth-child(2) { width: 26px; height: 26px; font-size: 9px; }
  .tarot-art ~ .tarot-title { margin: -48px 8px 8px; padding: 6px; }
  .tarot-art ~ .tarot-title strong { font-size: 13px; }
  .tarot-art ~ .tarot-title small { font-size: 6px; }
  .count-1 .tarot-card { border-width: 8px; }
  .count-1 .tarot-face { padding: 18px; }
  .count-1 .tarot-art ~ .tarot-title { margin: -78px 20px 18px; padding: 11px 14px; }
  .count-1 .tarot-art ~ .tarot-title strong { font-size: 24px; }
  .count-1 .tarot-art ~ .tarot-title small { font-size: 9px; }
  .reading-card { grid-template-columns: 1fr; padding: 20px; }
  .reading-index { font-size: 22px; }
  .reading-card h3 { font-size: 28px; }
  .tailored-reading { border-radius: 24px; }
  .tailored-heading, .chat-heading { align-items: flex-start; }
  .tarot-chat { padding: 18px; }
  .tarot-chat form { grid-template-columns: 1fr; }
  .tarot-chat form button { width: 100%; }
  .result-actions { align-items: stretch; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .tarot-card, .mode-grid button, .spread-cards { transition: none; }
}