/* Authored Meowa PNGs supply every card and UI surface. CSS only arranges them. */
.tarot-animation { position:absolute; inset:0; z-index:60; overflow:auto; overscroll-behavior:contain; padding:18px 36px 16px; color:#f4e2bc; background:rgba(13,25,22,.28); isolation:isolate; font-family:inherit; text-align:center; }
.tarot-content { min-height:100%; }
.tarot-heading { position:relative; isolation:isolate; width:440px; margin:0 auto; padding:8px 20px; color:#284b3f; }
.tarot-eyebrow { margin:0 0 4px; color:#826440; font-size:12px; line-height:1.3; letter-spacing:3px; }
.tarot-heading h2 { margin:0; font-size:34px; font-weight:400; line-height:1.2; letter-spacing:3px; }
.tarot-close { position:absolute; top:25px; right:24px; min-height:44px; padding:9px 16px; font:inherit; font-size:16px; color:#f2dcae; background:transparent; border:0; isolation:isolate; border-radius:0; cursor:pointer; }
.tarot-close:hover { color:#fff4d8; }
.tarot-animation button:focus-visible { outline:2px solid #f3d391; outline-offset:5px; }
.tarot-status { width:max-content; max-width:740px; min-height:27px; margin:8px auto 12px; padding:3px 14px; font-size:18px; line-height:1.5; color:#f1e2c2; background:rgba(17,29,25,.82); }
.tarot-stage { position:relative; height:450px; max-width:890px; margin:0 auto; }
.tarot-animation:is([data-phase="revealing"],[data-phase="complete"]) .tarot-stage { height:280px; }
.tarot-slot-label { position:absolute; left:50%; top:3px; width:220px; margin:0 0 0 -110px; color:#f2dfb4; font-size:15px; line-height:1.4; text-shadow:0 2px 4px #15251e; }
.tarot-animation:is([data-phase="loading"],[data-phase="shuffling"]) .tarot-slot-label { visibility:hidden; }
.tarot-animation:is([data-phase="revealing"],[data-phase="complete"]) .tarot-slot-label { top:254px; }
.tarot-card { position:absolute; left:50%; top:175px; display:block; width:126px; height:224px; margin-left:-63px; padding:0; border:0; border-radius:0; background:transparent; perspective:900px; transform-origin:50% 50%; cursor:pointer; -webkit-tap-highlight-color:transparent; filter:drop-shadow(0 8px 10px #0007); }
.tarot-card:disabled { opacity:1; cursor:default; }
.tarot-card:not(:disabled):is(:hover,:focus-visible) .tarot-card-flip { transform:translateY(-12px); }
.tarot-card.is-chosen { z-index:12 !important; }
.tarot-card[data-focused="true"] { z-index:30 !important; }
.tarot-card[data-next="true"] { filter:drop-shadow(0 9px 13px #000a) drop-shadow(0 0 3px #efd8a6); }
.tarot-card-flip { display:block; position:relative; width:100%; height:100%; transform-origin:50% 50%; transform-style:preserve-3d; transition:transform .18s cubic-bezier(.2,.7,.25,1); }
.tarot-card-face { display:block; position:absolute; inset:0; width:100%; height:100%; overflow:hidden; pointer-events:none; image-rendering:auto; }
.tarot-card-back { object-fit:fill; }
.tarot-card-art { position:absolute; display:block; max-width:none; object-fit:fill; image-rendering:auto; }
.tarot-readings { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:0 auto; max-width:890px; text-align:left; }
.tarot-readings:empty { display:none; }
.tarot-reading { position:relative; isolation:isolate; padding:12px 16px; color:#315244; }
.tarot-reading-order { margin:0; font-size:12px; line-height:1.4; color:#8e704a; letter-spacing:2px; }
.tarot-reading h3 { margin:3px 0 5px; font-size:21px; font-weight:400; line-height:1.3; color:#315244; }
.tarot-reading-text { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; font-size:18px; line-height:1.45; color:#6e573c; }
.tarot-inspect { margin:7px 0 0; padding:2px 0; border:0; background:transparent; color:#8b3f2e; font:inherit; font-size:15px; line-height:1.4; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.tarot-summary { position:relative; isolation:isolate; margin:10px auto 0; max-width:890px; padding:10px 20px; font-size:18px; line-height:1.5; color:#943d2b; }
.tarot-footnote { margin:10px auto 0; color:#e0d3b7; font-size:13px; line-height:1.5; text-shadow:0 1px 4px #14261e; }
.tarot-animation[data-phase="error"] .tarot-status { width:auto; margin-top:40px; margin-bottom:24px; padding:14px 20px; }
.tarot-animation[data-phase="error"] .tarot-reading-text { display:block; overflow:visible; }
/* A separate, reversible reading surface receives only an already-revealed face. */
.tarot-detail { position:absolute; inset:0; z-index:50; display:grid; place-items:center; padding:30px; overflow:auto; overscroll-behavior:contain; background:rgba(12,23,20,.94); }
.tarot-detail-sheet { position:relative; isolation:isolate; display:grid; grid-template-columns:270px minmax(0,1fr); align-items:center; gap:36px; width:880px; max-width:100%; min-height:556px; padding:36px; text-align:left; color:#315244; }
.tarot-detail-art { position:relative; width:270px; height:480px; filter:drop-shadow(0 9px 12px #42332245); }
.tarot-detail-copy { display:flex; flex-direction:column; align-items:flex-start; min-width:0; min-height:468px; }
.tarot-detail-order { margin:0 0 12px; font-size:16px; letter-spacing:3px; line-height:1.4; color:#947443; }
.tarot-detail-copy h2 { margin:0 0 20px; font-size:38px; font-weight:400; line-height:1.3; letter-spacing:2px; }
.tarot-detail-text { margin:0 0 22px; font-size:25px; line-height:1.75; color:#625039; overflow-wrap:anywhere; }
.tarot-detail-count { margin:auto 0 16px; font-size:14px; line-height:1.65; color:#867252; }
.tarot-detail-nav { display:flex; gap:12px; margin-bottom:20px; }
.tarot-detail-button { min-width:92px; min-height:42px; padding:7px 15px; border:1px solid #a78a5c; background:transparent; color:#315244; font:inherit; font-size:18px; cursor:pointer; }
.tarot-detail-button:disabled { opacity:.4; cursor:default; }
.tarot-detail-return { position:relative; isolation:isolate; min-height:46px; padding:9px 24px; border:0; background:transparent; color:#f6e1b6; font:inherit; font-size:20px; cursor:pointer; }
.tarot-animation [hidden] { display:none !important; }
body.reduced-motion .tarot-card .tarot-card-flip,.tarot-animation.is-reduced .tarot-card-flip { transition:none; }
body.reduced-motion .tarot-card:not(:disabled):is(:hover,:focus-visible) .tarot-card-flip,.tarot-animation.is-reduced .tarot-card:not(:disabled):is(:hover,:focus-visible) .tarot-card-flip { transform:none; }
@media (prefers-reduced-motion:reduce) {
  .tarot-card-flip { transition:none; }
  .tarot-card:not(:disabled):is(:hover,:focus-visible) .tarot-card-flip { transform:none; }
}
/* The game keeps its 1024×768 plane on small screens; text grows within that plane. */
@container (max-width:600px) {
  .tarot-heading h2 { font-size:42px; }
  .tarot-eyebrow { font-size:20px; }
  .tarot-close { position:fixed; z-index:35; min-height:68px; font-size:28px; right:18px; }
  .tarot-status { font-size:30px; }
  .tarot-slot-label { font-size:24px; }
  .tarot-animation:is([data-phase="revealing"],[data-phase="complete"]) .tarot-stage { height:300px; }
  .tarot-reading h3 { font-size:32px; }
  .tarot-reading-text { font-size:28px; }
  .tarot-reading-order { font-size:22px; }
  .tarot-inspect { min-height:56px; font-size:27px; }
  .tarot-summary { font-size:28px; }
  .tarot-footnote { font-size:23px; }
  .tarot-detail { align-items:start; padding:24px; }
  .tarot-detail-sheet { grid-template-columns:396px minmax(0,1fr); width:920px; gap:24px; padding:24px; }
  .tarot-detail-art { width:396px; height:704px; }
  .tarot-detail-copy { min-height:688px; }
  .tarot-detail-order { font-size:24px; }
  .tarot-detail-copy h2 { font-size:42px; }
  .tarot-detail-text { font-size:32px; line-height:1.55; }
  .tarot-detail-count { font-size:24px; }
  .tarot-detail-button { min-height:64px; font-size:28px; }
  .tarot-detail-return { min-height:72px; font-size:30px; }
}