/* oracle.css — เสี่ยงทาย page (ไพ่ยิปซี + เซียมซี). Mooncake-box world: lacquer red, antique gold, ivory paper. */

.collection-cover[data-collection="oracle"] { background-position: right 30%; }

.or-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; margin: 0 0 16px; background: #F1E6CF; border: 1px solid #D9C8A8; border-radius: 10px; }
.or-seg button { min-height: 42px; border: 0; border-radius: 7px; background: none; color: #7A5B25; font: 500 15px 'Kanit', sans-serif; cursor: pointer; }
.or-seg button[aria-selected="true"] { background: #951A22; color: #FFF3D6; box-shadow: 0 4px 10px -4px rgba(122, 18, 25, .5); }

.or-hint { margin: 4px 0 12px; text-align: center; font: 14px/1.6 'Sarabun', sans-serif; color: #86715E; }
.or-go { width: 100%; margin: 14px 0 0; }
.or-note { margin: 12px 0 0; text-align: center; font: 11.5px/1.6 'Sarabun', sans-serif; color: #9A8573; }

/* ---------- flip cards ---------- */
.tc { display: inline-block; padding: 0; border: 0; background: none; perspective: 900px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tc-in { position: relative; display: block; width: 100%; aspect-ratio: 200 / 340; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2, .8, .2, 1); }
.tc.is-open .tc-in { transform: rotateY(180deg); }
.tc-back, .tc-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.tc-face { transform: rotateY(180deg); }
.tc-svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(90, 20, 20, .22)); }
.tc:focus-visible { outline: 2px solid #951A22; outline-offset: 4px; border-radius: 10px; }

.or-stage { display: flex; justify-content: center; margin: 4px 0 0; }
.tc-lg { width: min(56vw, 210px); }
.tc-lg:not(.is-open) .tc-in { animation: or-float 3.2s ease-in-out infinite; }
@keyframes or-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- three-card flow ---------- */
.or-topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 4px; }
.or-topics button { min-height: 40px; border: 1px solid #D9C8A8; border-radius: 999px; background: #FFF9EB; color: #7A2927; font: 500 14px 'Kanit', sans-serif; cursor: pointer; }
.or-topics button[aria-checked="true"] { background: #951A22; border-color: #951A22; color: #FFF3D6; }
#orQ { width: 100%; }

.or-deck { position: relative; height: 190px; margin: 18px 0 0; }
.or-deck-card { position: absolute; left: 50%; top: 0; width: 110px; margin-left: -55px; }
.or-deck-card .tc-svg { height: auto; }
.or-deck.is-shuffling .or-deck-card { animation: or-shuffle .9s cubic-bezier(.3, .7, .3, 1) both; animation-delay: calc(var(--i) * 40ms); }
@keyframes or-shuffle {
  0% { transform: translateX(0) rotate(0); }
  30% { transform: translateX(calc((var(--i) - 2) * 34px)) rotate(calc((var(--i) - 2) * 8deg)); }
  60% { transform: translateX(calc((2 - var(--i)) * 26px)) rotate(calc((2 - var(--i)) * 6deg)); }
  100% { transform: translateX(0) rotate(0); }
}

.or-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 6px 0 0; transition: opacity .3s ease; }
.or-grid.is-done { opacity: 0; }
.tc-pick { width: 100%; transition: transform .18s ease, opacity .25s ease; }
.tc-pick:active { transform: scale(.94); }
.tc-pick.is-taken { opacity: .18; transform: translateY(-6px); pointer-events: none; }
.tc-pick .tc-svg { filter: drop-shadow(0 3px 5px rgba(90, 20, 20, .2)); }

.or-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 16px 0 0; }
.or-slot { display: grid; gap: 6px; justify-items: center; }
.or-slot-l { font: 600 14px 'Kanit', sans-serif; color: #9A712F; }
.or-slot-c { width: 100%; aspect-ratio: 200 / 340; border: 1.5px dashed #D9C8A8; border-radius: 10px; display: block; }
.or-slot-c:has(.tc) { border: 0; }
.or-slot-c .tc { width: 100%; animation: or-land .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes or-land { from { transform: translateY(-24px) scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- readings ---------- */
.or-read:empty { display: none; }
.or-read { margin: 18px 0 0; }
.or-name b { display: block; font: 600 22px/1.3 'Kanit', sans-serif; color: #7A2927; }
.or-name small { font: 13px 'Sarabun', sans-serif; color: #86715E; }
.or-kw { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.or-kw span { padding: 1px 10px; border-radius: 999px; background: #F3E8CF; color: #7A5B25; font: 500 12.5px/1.8 'Kanit', sans-serif; }
.or-lead { margin: 12px 0 0; font: 15px/1.7 'Sarabun', sans-serif; color: #382C27; }
.or-rows { display: grid; gap: 8px; margin: 12px 0 0; }
.or-rows > div { display: grid; grid-template-columns: 96px 1fr; gap: 10px; padding: 10px 12px; background: #FFFDF8; border: 1px solid #D9C8A8; border-radius: 8px; }
.or-rows b { font: 600 13.5px/1.5 'Kanit', sans-serif; color: #951A22; }
.or-rows span { font: 14px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }
.or-advice { margin: 12px 0 0; padding: 12px 14px; border-radius: 8px; background: #F1E6CF; border: 1px solid #C6AD78; box-shadow: inset 0 0 0 3px #FBF6E9; }
.or-advice b { display: block; font: 600 14px 'Kanit', sans-serif; color: #7A2927; }
.or-advice span { font: 14.5px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }
.or-save { width: 100%; margin: 14px 0 0; }
.or-again { width: 100%; margin: 10px 0 0; }

.or-q { margin: 0; text-align: center; font: italic 15px/1.6 'Sarabun', sans-serif; color: #7A2927; }
.or-topic-l { margin: 4px 0 8px; text-align: center; font: 500 13px 'Kanit', sans-serif; color: #9A712F; }
.or-pos { display: grid; grid-template-columns: 64px 1fr; gap: 10px; padding: 12px 0; border-top: 1px solid #E4D2A9; }
.or-pos-l { font: 600 14px/1.6 'Kanit', sans-serif; color: #9A712F; }
.or-pos p { margin: 8px 0 0; font: 14.5px/1.65 'Sarabun', sans-serif; color: #5E4A3D; }
.or-pos .or-name b { font-size: 18px; }
.or-sum { margin: 8px 0 0; padding: 14px 16px; border-radius: 10px; color: #F1DDB5;
  background: radial-gradient(120% 90% at 90% 0%, #B3303A 0%, rgba(179, 48, 58, 0) 55%), linear-gradient(160deg, #9E1C25 0%, #7A1219 100%); }
.or-sum > b { font: 600 16px 'Kanit', sans-serif; color: #FFF3D6; }
.or-sum p { margin: 6px 0 0; font: 14.5px/1.65 'Sarabun', sans-serif; }
.or-sum-adv b { font-family: 'Kanit', sans-serif; color: #F3D9A0; margin-right: 4px; }

/* ---------- เซียมซี ---------- */
.ss-stage { position: relative; display: flex; flex-direction: column; align-items: center; }
.ss-cyl { width: 170px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ss-cyl svg { display: block; width: 100%; height: auto; transform-origin: 50% 95%; overflow: visible; }
.ss-cyl.is-shaking svg { animation: ss-shake .16s ease-in-out infinite alternate; }
@keyframes ss-shake { from { transform: rotate(-9deg) translateY(-2px); } to { transform: rotate(9deg) translateY(2px); } }
.ss-out { opacity: 0; transform: translateY(30px); transform-box: fill-box; transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.ss-cyl.is-out .ss-out { opacity: 1; transform: translateY(-58px); }
.ss-num { margin-top: -6px; padding: 4px 16px; border-radius: 999px; background: #951A22; color: #FFF3D6; font: 600 17px 'Kanit', sans-serif; animation: or-land .4s ease; }
.ss-poey { margin: 16px 0 0; text-align: center; }
.ss-poey p { margin: 0; font: 14.5px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }
.ss-poey .ss-res b { color: #951A22; font-family: 'Kanit', sans-serif; }
.ss-blocks { display: flex; justify-content: center; gap: 22px; margin: 6px 0 10px; }
.ss-blocks span { width: 70px; display: block; }
.ss-blocks.is-toss span { animation: ss-toss 1s cubic-bezier(.3, .8, .3, 1) both; }
.ss-blocks.is-toss span + span { animation-delay: .08s; }
@keyframes ss-toss { 0% { transform: translateY(-70px) rotate(0); opacity: 0; } 40% { opacity: 1; } 70% { transform: translateY(6px) rotate(540deg); } 100% { transform: translateY(0) rotate(720deg); } }
.ss-skip { display: block; margin: 10px auto 0; border: 0; background: none; color: #951A22; font: 13.5px 'Sarabun', sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.ss-slip { position: relative; padding: 18px 16px; border-radius: 10px; background: #FFF6E3; border: 2px solid #951A22; box-shadow: inset 0 0 0 5px #FFF6E3, inset 0 0 0 6px #D7B87C; }
.ss-slip-top { display: flex; align-items: center; justify-content: space-between; }
.ss-no { font: 600 24px 'Kanit', sans-serif; color: #7A2927; }
.ss-lv { padding: 2px 12px; border-radius: 999px; font: 600 14px/1.7 'Kanit', sans-serif; }
.lv-a { background: #951A22; color: #FFF3D6; }
.lv-b { background: #E7EDDC; color: #3F5A2C; }
.lv-c { background: #F3E8CF; color: #7A5B25; }
.lv-d { background: #F6DEDA; color: #8A1C24; }
.ss-verse { display: grid; gap: 2px; margin: 12px 0 0; padding: 12px; border-radius: 8px; background: #F6EAD0; text-align: center; }
.ss-verse span { font: 600 17px/1.6 'Kanit', sans-serif; color: #7A2927; }

@media (max-width: 359px) {
  .or-topics { grid-template-columns: repeat(2, 1fr); }
  .or-grid { gap: 4px; }
  .or-rows > div { grid-template-columns: 1fr; gap: 2px; }
}
@media (min-width: 720px) {
  .or-grid { grid-template-columns: repeat(7, 72px); justify-content: center; }
  .or-slots { max-width: 480px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .tc-in, .tc-lg:not(.is-open) .tc-in, .or-deck.is-shuffling .or-deck-card, .ss-cyl.is-shaking svg, .ss-blocks.is-toss span, .or-slot-c .tc { animation: none; transition: none; }
}

/* ---------- ไพ่ประจำวัน on the วันนี้ page ---------- */
.tt-row { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: start; }
.tt-card-btn { width: 96px; }
.tt-card-btn:not(.is-open) .tc-in { animation: or-float 3.2s ease-in-out infinite; }
.tt-title { margin: 2px 0 0; font: 600 19px/1.3 'Kanit', sans-serif; color: #7A2927; }
.tt-en { margin: 0; font: 12.5px 'Sarabun', sans-serif; color: #86715E; }
.tt-text { margin: 8px 0 0; font: 14px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }
.tt-open { margin: 12px 0 0; min-height: 40px; }
.tt-card .or-advice { margin-top: 12px; }
.tt-more { display: block; margin: 10px 0 0; text-align: right; font: 500 13.5px 'Kanit', sans-serif; color: #951A22; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .tt-card-btn:not(.is-open) .tc-in { animation: none; } }

/* ---------- 3D เซียมซี ---------- */
.ss3d-canvas { display: block; width: 100%; margin: 0 auto; touch-action: pan-y; cursor: grab; border-radius: 14px; background: #0c0605; box-shadow: 0 14px 30px -14px rgba(40, 8, 6, .7), inset 0 0 0 1px rgba(201, 162, 78, .35); }
.ss3d-canvas:active { cursor: grabbing; }
.ss3d-hint { display: block; margin: 10px auto 0; padding: 6px 14px; border: 1px solid #D9C8A8; border-radius: 999px; background: #FFF9EB;
  color: #7A2927; font: 500 13px 'Kanit', sans-serif; cursor: pointer; }
.ss3d-hint[data-act="ask"] { background: #951A22; border-color: #951A22; color: #FFF3D6; animation: wt-pulse 2.4s ease-out infinite; }
.ss3d-hint[hidden] { display: none; }
.has-3d .ss-num { margin-top: 10px; }

.ss3d-wrap { position: relative; }
.ss3d-sound { position: absolute; top: 10px; right: 10px; padding: 4px 11px; border: 1px solid rgba(225, 192, 127, .55); border-radius: 999px; background: rgba(20, 8, 6, .55); color: #F3D9A0; font: 500 12px 'Kanit', sans-serif; cursor: pointer; backdrop-filter: blur(4px); }
.ss3d-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; border-radius: 14px;
  background: radial-gradient(90% 70% at 50% 60%, #2a100c 0%, #0c0605 100%); color: #E9CFA4; font: 500 14px 'Kanit', sans-serif; transition: opacity .45s ease; }
.ss3d-loading i { display: block; width: 46%; height: 3px; border-radius: 2px; background: rgba(233, 207, 164, .18); overflow: hidden; }
.ss3d-loading b { display: block; width: 0; height: 100%; background: #E1C07F; transition: width .2s ease; }
.ss3d-loading.is-done { opacity: 0; pointer-events: none; }

/* ---------- 3D tarot table ---------- */
.or-stage3d { margin: 0 0 14px; }
.or-stage3d[hidden] { display: none; }
.tt3d-canvas { display: block; width: 100%; border-radius: 14px; background: #0c0506; touch-action: pan-y; box-shadow: 0 14px 30px -14px rgba(40, 8, 6, .7), inset 0 0 0 1px rgba(201, 162, 78, .35); }
.has-3d .or-stage, .has-3d #orGrid, .has-3d #orSlots, .has-3d #orDeck { display: none !important; }
.tc-art { object-fit: cover; border-radius: 6%/3.5%; }

.or-go[hidden], #page-oracle .btn[hidden] { display: none !important; }