/* Grimoire v37 Tarot Deck repair: real deck behavior, safer image fallback, mobile fit. */
:root{
  --tarot-bg: rgba(8, 5, 13, .72);
  --tarot-panel: color-mix(in srgb, var(--surface, #17101f) 94%, #000 6%);
  --tarot-border: rgba(255,255,255,.14);
  --tarot-text: var(--text, #f8efff);
  --tarot-muted: var(--muted, #b6aabe);
  --tarot-accent: var(--accent, #d8a7ff);
  --tarot-accent2: var(--accent2, #83e6ff);
  --tarot-radius: 22px;
}
body.tarot-open{ overflow:hidden !important; touch-action:none; }
.grimoire-symbolized .btn[data-symbolized="true"]{ display:inline-flex; align-items:center; justify-content:center; gap:.42rem; }
.grimoire-symbolized .btn[data-symbolized="true"]::before{ content:attr(data-nav-symbol); display:inline-grid; place-items:center; width:1.25em; min-width:1.25em; height:1.25em; border-radius:999px; background:rgba(255,255,255,.07); line-height:1; }
.tarot-nav-btn{ position:relative; isolation:isolate; }
.tarot-nav-btn::after{ content:"deck"; position:absolute; right:8px; top:-7px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:1px 5px; background:linear-gradient(135deg, rgba(216,167,255,.92), rgba(131,230,255,.78)); color:#120a1e; pointer-events:none; }
.tarot-shell[hidden]{ display:none !important; }
.tarot-shell{ position:fixed; inset:0; z-index:2147483300; display:grid; place-items:center; padding:clamp(8px,2vw,22px); background:var(--tarot-bg); color:var(--tarot-text); }
.tarot-panel{ width:min(1120px,100%); height:min(820px, calc(100dvh - 16px)); max-height:calc(100dvh - 16px); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; overflow:hidden; border:1px solid var(--tarot-border); border-radius:var(--tarot-radius); background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)), var(--tarot-panel); box-shadow:0 28px 80px rgba(0,0,0,.45); }
.tarot-head{ display:flex; align-items:flex-start; gap:14px; padding:14px 16px 10px; border-bottom:1px solid rgba(255,255,255,.1); }
.tarot-title-wrap{ min-width:0; flex:1; }
.tarot-kicker{ display:inline-flex; gap:.35rem; align-items:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--tarot-muted); }
.tarot-title{ margin:2px 0 0; font-size:clamp(22px,4vw,34px); line-height:1.05; }
.tarot-subtitle{ margin:6px 0 0; color:var(--tarot-muted); max-width:70ch; font-size:13px; }
.tarot-close,.tarot-icon-btn,.tarot-action,.tarot-card-mini,.tarot-tab,.tarot-pill-btn{ border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); color:var(--tarot-text); border-radius:999px; cursor:pointer; }
.tarot-close:hover,.tarot-icon-btn:hover,.tarot-action:hover,.tarot-card-mini:hover,.tarot-tab:hover,.tarot-pill-btn:hover{ background:rgba(255,255,255,.13); }
.tarot-close{ width:44px; height:44px; display:grid; place-items:center; font-size:27px; line-height:1; flex:none; position:relative; z-index:2; }
.tarot-toolbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:9px 16px; border-bottom:1px solid rgba(255,255,255,.09); background:rgba(0,0,0,.08); }
.tarot-tab{ padding:8px 12px; font-weight:800; font-size:13px; }
.tarot-tab[aria-pressed="true"],.tarot-action.primary{ color:#130b1d; background:linear-gradient(135deg, var(--tarot-accent), var(--tarot-accent2)); border-color:transparent; font-weight:900; }
.tarot-action{ padding:9px 12px; font-size:13px; }
.tarot-icon-btn{ width:38px; height:38px; display:grid; place-items:center; }
.tarot-spacer{ flex:1; }
.tarot-body{ overflow:auto; min-height:0; padding:16px; display:grid; grid-template-columns:minmax(220px, 320px) minmax(0, 1fr); gap:16px; overscroll-behavior:contain; }
.tarot-deck-zone{ min-height:340px; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:radial-gradient(circle at 50% 34%, rgba(216,167,255,.1), transparent 56%), rgba(255,255,255,.04); display:grid; place-items:center; padding:18px; position:relative; overflow:hidden; }
.tarot-deck-stack{ width:148px; height:248px; position:relative; transform-style:preserve-3d; perspective:900px; border:0; background:transparent; cursor:pointer; }
.tarot-back-card{ position:absolute; inset:0; border-radius:15px; border:1px solid rgba(255,255,255,.22); background:radial-gradient(circle at 50% 50%, transparent 0 16%, rgba(255,255,255,.14) 17% 18%, transparent 19%), repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 5px, transparent 5px 12px), linear-gradient(135deg, #2a1740, #120719 55%, #1f3550); box-shadow:0 18px 35px rgba(0,0,0,.32); }
.tarot-back-card:nth-child(1){ transform:translate(0,0) rotate(-2deg); }
.tarot-back-card:nth-child(2){ transform:translate(6px,5px) rotate(1deg); opacity:.97; }
.tarot-back-card:nth-child(3){ transform:translate(12px,10px) rotate(4deg); opacity:.93; }
.tarot-back-card:nth-child(4){ transform:translate(18px,15px) rotate(6deg); opacity:.88; }
.tarot-deck-stack.is-shuffling .tarot-back-card:nth-child(1){ animation:tarotShuffleA .36s ease-in-out 3; }
.tarot-deck-stack.is-shuffling .tarot-back-card:nth-child(2){ animation:tarotShuffleB .36s ease-in-out 3; }
.tarot-deck-stack.is-shuffling .tarot-back-card:nth-child(3){ animation:tarotShuffleC .36s ease-in-out 3; }
.tarot-deck-stack.is-shuffling .tarot-back-card:nth-child(4){ animation:tarotShuffleD .36s ease-in-out 3; }
@keyframes tarotShuffleA{ 50%{ transform:translate(-46px,4px) rotate(-10deg); } }
@keyframes tarotShuffleB{ 50%{ transform:translate(42px,-6px) rotate(9deg); } }
@keyframes tarotShuffleC{ 50%{ transform:translate(-8px,24px) rotate(-3deg); } }
@keyframes tarotShuffleD{ 50%{ transform:translate(12px,-18px) rotate(11deg); } }
.tarot-deck-caption{ position:absolute; left:14px; right:14px; bottom:12px; color:var(--tarot-muted); font-size:13px; text-align:center; }
.tarot-reading-zone{ display:grid; gap:13px; align-content:start; }
.tarot-quick-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:10px; }
.tarot-card-mini{ padding:11px; text-align:left; border-radius:16px; min-height:82px; }
.tarot-card-mini strong{ display:block; margin-bottom:4px; }
.tarot-card-mini span{ color:var(--tarot-muted); font-size:12px; }
.tarot-spread{ display:grid; grid-template-columns:repeat(var(--tarot-cols,3), minmax(140px,1fr)); gap:14px; align-items:start; }
.tarot-draw-card{ border:1px solid rgba(255,255,255,.12); border-radius:18px; padding:11px; background:rgba(255,255,255,.045); text-align:center; animation:tarotDeal .32s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tarotDeal{ from{ transform:translate(-60px,-20px) rotate(-8deg) scale(.92); opacity:0; } to{ transform:none; opacity:1; } }
.tarot-card-frame{ margin:auto; width:min(178px,100%); aspect-ratio:2/3.35; border:0; padding:0; background:transparent; border-radius:12px; position:relative; transform-style:preserve-3d; transition:transform .52s cubic-bezier(.2,.8,.2,1); cursor:pointer; display:block; }
.tarot-draw-card.is-flipped .tarot-card-frame{ transform:rotateY(180deg); }
.tarot-card-side{ position:absolute; inset:0; border-radius:12px; backface-visibility:hidden; overflow:hidden; border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 28px rgba(0,0,0,.28); background:#130b1d; }
.tarot-card-front{ transform:rotateY(180deg); background:#f8f0df; }
.tarot-card-back{ display:grid; place-items:center; color:rgba(255,255,255,.85); background:radial-gradient(circle at center, rgba(255,255,255,.1), transparent 34%), repeating-linear-gradient(45deg, rgba(255,255,255,.07) 0 5px, transparent 5px 12px), linear-gradient(135deg,#24113b,#0d0713 55%, #18334b); }
.tarot-card-back span{ font-size:46px; opacity:.85; }
.tarot-card-img{ width:100%; height:100%; object-fit:cover; display:block; }
.tarot-img-fallback{ width:100%; height:100%; display:grid; place-items:center; gap:3px; padding:12px; color:#2b1a33; background:linear-gradient(#fff8e7, #e7d3a1); font-weight:800; }
.tarot-img-fallback strong{ font-size:24px; }.tarot-img-fallback span{ font-size:13px; }.tarot-img-fallback small{ color:#6a4b62; }
.tarot-card-hidden-label{ margin:10px 0 2px; color:var(--tarot-muted); font-weight:800; }
.tarot-card-reveal{ margin-top:10px; }
.tarot-card-name{ margin:0 0 2px; font-weight:900; }
.tarot-card-role{ color:var(--tarot-muted); font-size:12px; }
.tarot-card-meaning,.tarot-card-ritual{ color:var(--tarot-muted); font-size:13px; line-height:1.45; margin:8px 0 0; }
.tarot-card-actions{ display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:10px; }
.tarot-pill-btn{ padding:7px 10px; font-size:12px; }
.tarot-result-panel{ border:1px solid rgba(255,255,255,.12); border-radius:18px; background:rgba(255,255,255,.04); padding:14px; }
.tarot-result-panel h3{ margin:0 0 8px; }.tarot-result-panel p{ margin:6px 0; color:var(--tarot-muted); line-height:1.45; }
.tarot-search-row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.tarot-search{ flex:1; min-width:190px; border:1px solid rgba(255,255,255,.16); background:rgba(0,0,0,.14); color:var(--tarot-text); border-radius:999px; padding:10px 13px; }
.tarot-library{ display:grid; grid-template-columns:repeat(auto-fill, minmax(116px,1fr)); gap:10px; max-height:430px; overflow:auto; padding-right:3px; }
.tarot-lib-card{ border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:var(--tarot-text); border-radius:14px; padding:8px; cursor:pointer; text-align:center; }
.tarot-lib-card:hover{ background:rgba(255,255,255,.1); }
.tarot-lib-card img,.tarot-lib-card .tarot-img-fallback{ width:100%; aspect-ratio:2/3.35; object-fit:cover; border-radius:9px; display:grid; background:#241a2e; }
.tarot-lib-card strong{ display:block; font-size:12px; margin-top:6px; }.tarot-lib-card span{ display:block; font-size:11px; color:var(--tarot-muted); }
.tarot-foot{ padding:10px 15px; border-top:1px solid rgba(255,255,255,.09); color:var(--tarot-muted); font-size:12px; display:flex; gap:8px; justify-content:space-between; align-items:center; }
.tarot-toast{ position:fixed; left:50%; bottom:max(18px, env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(20px); z-index:2147483400; background:rgba(20,12,28,.94); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:10px 14px; opacity:0; pointer-events:none; transition:.2s ease; box-shadow:0 18px 40px rgba(0,0,0,.34); }
.tarot-toast.is-visible{ opacity:1; transform:translateX(-50%); }
@media (max-width: 820px){
  .tarot-shell{ padding:0; place-items:stretch; }
  .tarot-panel{ width:100%; height:100dvh; max-height:100dvh; border-radius:0; border-left:0; border-right:0; }
  .tarot-head{ padding:10px 10px 8px; align-items:center; }
  .tarot-subtitle{ display:none; }.tarot-title{ font-size:22px; }
  .tarot-toolbar{ padding:8px 10px; overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; }
  .tarot-tab,.tarot-action{ white-space:nowrap; }
  .tarot-body{ padding:10px; grid-template-columns:1fr; gap:12px; }
  .tarot-deck-zone{ min-height:220px; padding:14px; }
  .tarot-deck-stack{ width:106px; height:178px; }
  .tarot-quick-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tarot-spread{ grid-template-columns:repeat(var(--tarot-mobile-cols,2), minmax(0,1fr)); gap:10px; }
  .tarot-card-frame{ width:min(126px,100%); }
  .tarot-card-meaning,.tarot-card-ritual{ font-size:12px; }
  .tarot-library{ grid-template-columns:repeat(3,minmax(0,1fr)); max-height:none; }
  .tarot-foot{ padding-bottom:max(10px, env(safe-area-inset-bottom)); }
}
@media (max-width:430px){
  .tarot-close{ width:40px; height:40px; }
  .tarot-library{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tarot-card-frame{ width:min(112px,100%); }
}
@media (prefers-reduced-motion: reduce){ .tarot-deck-stack.is-shuffling .tarot-back-card,.tarot-draw-card{ animation:none !important; }.tarot-card-frame{ transition:none !important; } }