/* Witching Hour: a Halloween reading room. Card artwork and reading data stay independent. */
html[data-theme="witching"] {
  color-scheme: dark;
  --page: #101316;
  --paper: #211a22;
  --felt: #1b2020;
  --card: #2c232b;
  --face: #171b1d;
  --ink: #f9eee4;
  --muted: #cfbcb9;
  --line: #785d63;
  --gold: #ffbc73;
  --focus: #ffdf9e;
  --witch-green: #a5c2a1;
  --witch-shadow: 0 18px 38px #0508079c, inset 0 1px #ffd6a51c;
}
html[data-theme="witching"] body {
  background:
    radial-gradient(ellipse 46rem 31rem at 92% -4%, #8044315b 0, transparent 72%),
    radial-gradient(ellipse 40rem 31rem at 2% 35%, #283d3970 0, transparent 70%),
    linear-gradient(165deg, #101517 0%, #19141b 52%, #111818 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif;
  line-height: 1.58;
}
html[data-theme="witching"] .site-shell { max-width: 1220px; }
html[data-theme="witching"] .topbar { border-bottom: 1px solid #a0706759; }
html[data-theme="witching"] .brand { color: #ffd29d; font-size: 21px; letter-spacing: .08em; text-shadow: 0 0 16px #f18c4f5e; }
html[data-theme="witching"] .nav-button { color: #d0c0ba; }
html[data-theme="witching"] .nav-button:is(:hover, :focus-visible),
html[data-theme="witching"] .nav-button.is-current { color: #ffcf97; }
html[data-theme="witching"] .nav-button span { border-radius: 4px; background: #3a282a; color: #ffcf97; }
html[data-theme="witching"] .theme-toggle { border-color: #aa795e; background: #2b2024; color: #ffd19a; box-shadow: 0 0 18px #e58e4d36; }
html[data-theme="witching"] .theme-toggle:hover { border-color: #f7b56f; box-shadow: 0 0 23px #e8955680; }
html[data-theme="witching"] h1, html[data-theme="witching"] h2, html[data-theme="witching"] h3 { font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif; letter-spacing: -.025em; line-height: 1.25; }
html[data-theme="witching"] .eyebrow { color: #ffbf78; letter-spacing: .14em; }
html[data-theme="witching"] .intro { margin-top: 46px; }

html[data-theme="witching"] .spread-picker { position: relative; isolation: isolate; max-width: 940px; margin: 54px auto 68px; }
html[data-theme="witching"] .spread-picker::before {
  content: ''; position: absolute; z-index: -1; top: -74px; right: -95px; width: min(52vw, 520px); height: 350px;
  background: url('/static/witching-ornament.svg') center / contain no-repeat; pointer-events: none;
}
html[data-theme="witching"] .spread-picker h1 { margin-bottom: 29px; font-size: clamp(29px, 4vw, 44px); text-shadow: 0 3px 20px #000b; }
html[data-theme="witching"] .spread-picker-grid { gap: 17px; }
html[data-theme="witching"] .spread-choice {
  overflow: hidden; min-height: 178px; border: 1px solid #a87965; border-radius: 14px;
  background: radial-gradient(circle at 90% 10%, #794a3938, transparent 40%), linear-gradient(145deg, #30232a, #1c2223 86%);
  box-shadow: var(--witch-shadow); transition: transform .22s ease-out, border-color .22s, box-shadow .22s;
}
html[data-theme="witching"] .spread-choice::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, #ffbf77, transparent); opacity: .72; }
html[data-theme="witching"] .spread-choice::after { content: '✧'; position: absolute; top: 15px; right: 21px; color: #eab8858a; font-size: 20px; }
html[data-theme="witching"] .spread-choice:nth-child(even) { background: radial-gradient(circle at 10% 15%, #55706538, transparent 43%), linear-gradient(145deg, #252a29, #252029 88%); }
html[data-theme="witching"] .spread-choice:not(:disabled):is(:hover, :focus-visible) { transform: translateY(-6px); border-color: #ffce94; box-shadow: 0 23px 35px #000b, 0 0 27px #d8814970; }
html[data-theme="witching"] .spread-choice-number { color: #ffbd76; font-size: 36px; text-shadow: 0 0 22px #e18d5180; }
html[data-theme="witching"] .spread-choice strong { font-size: 17px; letter-spacing: .06em; }
html[data-theme="witching"] .spread-choice > span:last-of-type { color: #d4c3bf; font-size: 12px; }
html[data-theme="witching"] .spread-choice-wide { min-height: 135px; }
html[data-theme="witching"] .home-deck-preview { width: min(100%, 475px); margin-bottom: 30px; padding: 10px 14px; border: 1px solid #a87965; border-radius: 10px; background: #211b22e8; box-shadow: 0 11px 27px #0009; }
html[data-theme="witching"] .home-deck-preview:is(:hover, :focus-visible) { box-shadow: 0 11px 27px #0009, 0 0 24px #e292555c; }
html[data-theme="witching"] .home-deck-preview img { border-radius: 3px; }

html[data-theme="witching"] :is(.table-wrap, .deck-option, .reading-item, .library-card, .detail-meaning, .history-entry, .journal-detail, .journal-list-entry, .stats-card, .stats-metric, .foundation-card, .single-controls, .single-mode, .clarifier-controls, .additional-stage) {
  border: 1px solid #725960; border-radius: 13px; background: #211b23; box-shadow: var(--witch-shadow);
}
html[data-theme="witching"] .table-wrap { border-radius: 18px; }
html[data-theme="witching"] .table-top { color: #ffbc73; }
html[data-theme="witching"] .table-surface, html[data-theme="witching"] .five-surface {
  border: 1px solid #8c695f; border-radius: 12px;
  background-color: #1b2221;
  background-image: radial-gradient(circle at 50% 15%, #4b463453, transparent 54%), radial-gradient(#be926233 1px, transparent 1px);
  background-size: auto, 24px 24px;
  box-shadow: inset 0 0 44px #070c0ac9;
}
html[data-theme="witching"] .five-surface { margin: 0 18px; }
html[data-theme="witching"] .table-bottom { border-top: 1px solid #71555e; }
html[data-theme="witching"] .deck { filter: drop-shadow(0 12px 10px #000a); }
html[data-theme="witching"] .tarot-card { filter: drop-shadow(0 10px 9px #0009); }
html[data-theme="witching"] .tarot-card.has-card:not(:disabled):is(:hover, :focus-visible) { filter: drop-shadow(0 0 9px #ffce90) drop-shadow(0 0 24px #df8959) drop-shadow(0 14px 12px #000b); }
html[data-theme="witching"] .tarot-card.is-empty { border-color: #846862; border-radius: 7px; background: #1c2122; box-shadow: none; }
html[data-theme="witching"] .position-label { color: #e4d0bd; font-size: 11px; letter-spacing: .045em; }
html[data-theme="witching"] :is(.card-orientation.is-reversed, .orientation.is-reversed) { border-color: #d49d79; background: #423037; color: #ffd29e; box-shadow: 0 0 12px #dd825b6b; }
html[data-theme="witching"] :is(.setting-tooltip, .reverse-help, .orientation-tooltip) { border-radius: 8px; background: #30252a; box-shadow: 0 10px 22px #000b; }
html[data-theme="witching"] .reverse-toggle[aria-pressed="true"] { background: #423039; box-shadow: 0 0 12px #dd825b55; }
html[data-theme="witching"] .reading-item.is-reversed { border-color: #b78672; background: linear-gradient(145deg, #35252d, #211d24); box-shadow: inset 3px 0 #e4a373, 0 9px 26px #0006; }
html[data-theme="witching"] .reading-item.is-reversed .meaning,
html[data-theme="witching"] .single-result.is-reversed .single-ai > p:not(.ai-error):not(.ai-loading) { border-color: #e3a26f; background: #422d2e; color: #ffead5; }
html[data-theme="witching"] .reading-keyword { border-radius: 5px; background: #302c2b; color: #ffcc95; }

html[data-theme="witching"] :is(.ai-panel, .single-result, .five-clarifier-picker, .five-clarifier-result) { border: 1px solid #bd8264; border-radius: 16px; background: radial-gradient(circle at 50% 0, #4a302f 0, #211b23 58%); box-shadow: 0 18px 36px #0009, 0 0 22px #d2874d21; }
html[data-theme="witching"] .ai-content { color: #f5e5d9; font-size: 15px; line-height: 1.84; }
html[data-theme="witching"] .single-empty { border-radius: 14px; background: radial-gradient(circle, #5a3b3555, transparent 70%); }
html[data-theme="witching"] .single-mode.is-current { background: #382a2c; box-shadow: 0 0 16px #df8e563e; }
html[data-theme="witching"] #five-clarifier-open { border-radius: 10px; background: #4b302d; color: #ffe0b1; }
html[data-theme="witching"] #five-clarifier-open:is(:hover, :focus-visible) { background: radial-gradient(circle 80px at var(--spark-x, 50%) var(--spark-y, 50%), #966746, #533532 73%); box-shadow: 0 0 12px #ffdc9c, 0 0 32px #ec914eb3; }
html[data-theme="witching"] :is(.primary-button, .followup-button) { border: 1px solid #ffbf79; border-radius: 9px; background: linear-gradient(120deg, #d57f49, #f3af6b); color: #21131a; box-shadow: 0 7px 20px #c76c3e4f; }
html[data-theme="witching"] :is(.primary-button, .followup-button):not(:disabled):hover { background: linear-gradient(120deg, #ed9b5f, #ffc588); box-shadow: 0 9px 27px #e78d53a1; }
html[data-theme="witching"] .secondary-button { border-radius: 9px; background: #2e262c; box-shadow: 0 5px 14px #0007; }
html[data-theme="witching"] :is(.question-controls input, .clarifier-row input, .single-controls input, .library-controls input, .library-controls select, .journal-form select, .journal-form textarea, .stats-toolbar select, #five-question, #love-question, #celtic-question, #five-clarifier-question) { border: 1px solid #8b6a65; border-radius: 9px; background: #181b1d; color: #fff0df; }
html[data-theme="witching"] input::placeholder, html[data-theme="witching"] textarea::placeholder { color: #bbaea8; }

html[data-theme="witching"] .deck-option.is-selected { border-color: #ffc180; box-shadow: 0 0 22px #e9985566; }
html[data-theme="witching"] .deck-option-images { border-radius: 8px; background: #151a1c; }
html[data-theme="witching"] .library-card:is(:hover, :focus-visible), html[data-theme="witching"] .journal-list-entry:is(:hover, :focus-visible) { box-shadow: 0 15px 26px #0009, 0 0 18px #bd744d66; }
html[data-theme="witching"] .detail-hero, html[data-theme="witching"] .matrix-detail { border: 1px solid #976b60; border-radius: 16px; background: radial-gradient(circle at 80% 12%, #653d3857, transparent 45%), #211b23; box-shadow: var(--witch-shadow); }
html[data-theme="witching"] .explore-hero { border: 1px solid #976b60; border-radius: 19px; background: radial-gradient(circle at 79% 30%, #aa65384f, transparent 43%), linear-gradient(120deg, #2b222a, #182322); box-shadow: var(--witch-shadow); }
html[data-theme="witching"] .explore-hero h2 { color: #ffead1; }
html[data-theme="witching"] .explore-hero-link, html[data-theme="witching"] .matrix-card-link { border-radius: 8px; background: #8b4f37; color: #fff5e5; box-shadow: 0 7px 18px #0008; }
html[data-theme="witching"] :is(.explore-hero-link, .matrix-card-link):is(:hover, :focus-visible) { background: #a9623e; box-shadow: 0 8px 21px #e18a525c; }
html[data-theme="witching"] .explore-jumps a { border-radius: 8px; background: #241d24; }
html[data-theme="witching"] .explore-jumps a:hover { background: #3a2c2c; }
html[data-theme="witching"] .foundation-card[open] { background: #2d2228; }
html[data-theme="witching"] .foundation-article-link { border-radius: 12px; background: radial-gradient(circle at 100% 0, #4b312f, #211b23 66%); }
html[data-theme="witching"] .foundation-article-link:is(:hover, :focus-visible) { box-shadow: 0 11px 23px #0009, 0 0 20px #d98e544d; }
html[data-theme="witching"] .lesson-article { border: 1px solid #8d6866; border-radius: 16px; background: linear-gradient(180deg, #2b2229, #211c23 340px, #1c2222); box-shadow: var(--witch-shadow); }
html[data-theme="witching"] :is(.lesson-header h1, .lesson-lead, .lesson-prose, .lesson-prose strong, .lesson-chapter .eyebrow, .lesson-takeaway .eyebrow, .lesson-count-diagram, .lesson-spread-example figcaption, .lesson-links) { font-family: 'Segoe UI', 'Noto Sans', Arial, sans-serif; }
html[data-theme="witching"] .lesson-header h1, html[data-theme="witching"] .lesson-chapter h2 { color: #ffe6cb; font-weight: 700; }
html[data-theme="witching"] .lesson-card-triptych { background: radial-gradient(ellipse at 50% 100%, #624333, #202725 74%); }
html[data-theme="witching"] .lesson-count-diagram, html[data-theme="witching"] .lesson-spread-example { border-radius: 10px; background: #29252a; }
html[data-theme="witching"] .lesson-prose blockquote { border-radius: 0 9px 9px 0; background: #3e302e; color: #ffe9d2; }
html[data-theme="witching"] .lesson-takeaway { border-radius: 10px; background: #332b29; }
html[data-theme="witching"] .lesson-links a, html[data-theme="witching"] .lesson-links button { border-radius: 7px; background: #4c302c; }
html[data-theme="witching"] .matrix-cell { background: radial-gradient(circle at 50% 0, var(--matrix-glow), #202023 76%); }
html[data-theme="witching"] .matrix-cell-number { color: #ffe5c6; }
html[data-theme="witching"] .matrix-detail-vi { color: #d8af8d; }
html[data-theme="witching"] .archetype-profile, html[data-theme="witching"] .archetype-hero { border: 1px solid #8e675d; border-radius: 16px; background: radial-gradient(circle at 8% 8%, #633a31, transparent 40%), #221c23; box-shadow: var(--witch-shadow); }
html[data-theme="witching"] .archetype-detail, html[data-theme="witching"] .archetype-reflection { border-radius: 10px; background: #1c2020; }
html[data-theme="witching"] .stats-bar-fill { background: linear-gradient(90deg, #8b715a, #ffb671); }
html[data-theme="witching"] footer { border-top: 1px solid #775962; }

@media (max-width: 1000px) {
  html[data-theme="witching"] .topbar { flex-wrap: wrap; }
  html[data-theme="witching"] .topbar nav { order: 3; width: 100%; justify-content: center; }
}
@media (max-width: 560px) {
  html[data-theme="witching"] .topbar { flex-direction: row; align-items: center; }
  html[data-theme="witching"] .topbar nav { justify-content: space-between; }
  html[data-theme="witching"] .theme-toggle { margin-left: auto; }
  html[data-theme="witching"] .spread-picker { margin-top: 39px; }
  html[data-theme="witching"] .spread-picker::before { top: -42px; right: -24px; width: 260px; opacity: .5; }
  html[data-theme="witching"] .spread-choice { min-height: 146px; }
}
