/* ===== TAROT CARDS & MOTION ===== */
    .tarot-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 11px;
      padding: 2px 2px 10px;
    }
    .tarot-card {
      perspective: 800px;
      cursor: pointer;
      animation: tarotIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
      animation-delay: var(--d, 0s);
      transition: transform 0.25s ease, filter 0.25s ease;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
    }
    .tarot-card:hover { transform: translateY(-6px) scale(1.03); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.55)); }
    .tarot-card-inner {
      position: relative;
      width: 100%;
      aspect-ratio: 5 / 8;
      transform-style: preserve-3d;
      transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
    }
    .tarot-card.flipped .tarot-card-inner { transform: rotateY(180deg); }
    .tarot-face {
      position: absolute;
      inset: 0;
      border-radius: 8px;
      overflow: hidden;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      border: 1px solid rgba(150, 110, 60, 0.6);
    }
    .tarot-front { background: #171310; }
    .tarot-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .tarot-chance {
      position: absolute; top: 4px; right: 4px;
      background: rgba(15, 12, 10, 0.75); color: #fca5a5;
      font-size: 0.56rem; font-weight: 700; padding: 1px 6px; border-radius: 999px;
      letter-spacing: 0.02em;
    }
    .tarot-front-name {
      position: absolute; left: 0; right: 0; bottom: 0;
      padding: 6px 5px 3px; font-size: 0.6rem; font-weight: 700; color: #f5e9d0;
      text-align: center; background: linear-gradient(transparent, rgba(10, 8, 6, 0.92));
    }
    .tarot-back {
      transform: rotateY(180deg);
      background: radial-gradient(circle at 50% 20%, #2a241c, #14110d);
      color: #e3d3b6; padding: 8px; display: flex; flex-direction: column; gap: 4px; overflow: auto;
    }
    .tarot-back .tarot-name { font-weight: 700; font-size: 0.72rem; color: #f0c987; }
    .tarot-back .tarot-flame { font-size: 0.58rem; color: #9fb6d0; }
    .tarot-back .tarot-effect { font-size: 0.62rem; line-height: 1.32; }
    @keyframes tarotIn {
      from { opacity: 0; transform: translateY(20px) rotate(-6deg) scale(0.88); }
      to { opacity: 1; transform: none; }
    }

    /* Mượt & chuyển cảnh tab */
    .scrollable-page-content { scroll-behavior: smooth; }
    @keyframes viewIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
    .view-anim { animation: viewIn 0.32s cubic-bezier(0.2, 0.8, 0.2, 1); }

    @media (max-width: 860px) {
      .tarot-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* ===== PREMIUM MOTION ===== */
    .book { perspective: 2200px; }
    .book .page { will-change: transform, opacity; }
    .book.turn-next .page.left-page { animation: turnFromLeft 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .book.turn-next .page.right-page { animation: turnFromRight 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .book.turn-prev .page.left-page { animation: turnFromRight 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
    .book.turn-prev .page.right-page { animation: turnFromLeft 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
    @keyframes turnFromLeft { 0% { opacity: 0.3; transform: rotateY(16deg) translateZ(-45px); } 100% { opacity: 1; transform: none; } }
    @keyframes turnFromRight { 0% { opacity: 0.3; transform: rotateY(-16deg) translateZ(-45px); } 100% { opacity: 1; transform: none; } }

    .book::after {
      content: '';
      position: absolute; inset: 0; z-index: 12; pointer-events: none;
      background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.12) 50%, transparent 66%);
      opacity: 0;
    }
    .book.turn-next::after, .book.turn-prev::after { animation: bookSheen 0.6s ease; }
    @keyframes bookSheen { 0% { opacity: 0; transform: translateX(-26%); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateX(26%); } }

    .filter-chip, .compendium-toggle-chip, .journal-btn, .btn-zoom-dossier, .preset-btn-play, .fx-button, .page-turn, .comp-tab-btn {
      transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.2s ease;
    }
    .filter-chip:hover, .compendium-toggle-chip:hover { transform: translateY(-2px); }
    .j-tab { transition: transform 0.2s ease, box-shadow 0.2s ease; }
    .j-tab:hover { transform: translateY(-3px); }
    .j-tab.active { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); }

    .ghost-slot-anim { animation: ghostIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
    @keyframes ghostIn { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }

    /* ===== U AM: VIGNETTE + GRAIN + LAMP FLICKER ===== */
    .fx-overlays { position: fixed; inset: 0; pointer-events: none; z-index: 4; }
    .fx-vignette {
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 50% 42%, transparent 40%, rgba(0,0,0,0.66) 100%);
      mix-blend-mode: multiply;
    }
    .fx-grain {
      position: absolute; inset: -60%;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
      opacity: 0.05;
      animation: grainShift 0.7s steps(3) infinite;
    }
    @keyframes grainShift {
      0% { transform: translate(0, 0); }
      33% { transform: translate(-3%, 2%); }
      66% { transform: translate(2%, -3%); }
      100% { transform: translate(0, 0); }
    }
    .fx-flicker {
      position: absolute; inset: 0; opacity: 0;
      background: radial-gradient(ellipse at 50% 30%, rgba(150, 180, 210, 0.10), transparent 70%);
      animation: lampFlicker 11s infinite;
    }
    @keyframes lampFlicker {
      0%, 87%, 100% { opacity: 0; }
      88% { opacity: 0.10; } 89% { opacity: 0; }
      91% { opacity: 0.16; } 91.6% { opacity: 0; }
      93% { opacity: 0.08; } 93.6% { opacity: 0; }
    }

    /* ===== JUMPSCARE ===== */
    .jumpscare-layer {
      position: fixed; inset: 0; z-index: 6000;
      display: none; align-items: center; justify-content: center;
      pointer-events: none;
      background: radial-gradient(circle at 50% 45%, rgba(40, 0, 0, 0.55), rgba(0, 0, 0, 0.94));
    }
    .jumpscare-layer.show { display: flex; animation: jumpFade 0.95s ease forwards; }
    .jumpscare-layer .js-face {
      width: min(72vw, 430px); height: auto;
      filter: contrast(1.15) saturate(0.55) drop-shadow(0 0 34px rgba(160, 0, 0, 0.55));
      animation: jumpZoom 0.95s cubic-bezier(0.16, 0.9, 0.3, 1) forwards, jumpShake 0.09s linear 0s 7;
    }
    @keyframes jumpFade { 0% { opacity: 0; } 6% { opacity: 1; } 78% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes jumpZoom {
      0% { transform: scale(0.35) rotate(-5deg); opacity: 0; }
      9% { transform: scale(1.12) rotate(3deg); opacity: 1; }
      100% { transform: scale(1.72); opacity: 0; }
    }
    @keyframes jumpShake { 0% { margin-left: -5px; } 50% { margin-left: 6px; } 100% { margin-left: -4px; } }
    @keyframes bodyQuake {
      0% { transform: translate(0, 0); }
      20% { transform: translate(-6px, 3px); }
      40% { transform: translate(5px, -4px); }
      60% { transform: translate(-4px, -3px); }
      80% { transform: translate(4px, 3px); }
      100% { transform: translate(0, 0); }
    }
    body.quake { animation: bodyQuake 0.4s ease; }

    /* ===== COMPENDIUM RE-THEME (tông nâu u tối cho hợp web) ===== */
    #compendiumContainer {
      background:
        radial-gradient(ellipse at 50% -10%, rgba(110, 65, 25, 0.35), transparent 65%),
        linear-gradient(180deg, #140e09 0%, #090604 100%);
      box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.06);
      filter: sepia(0.95) saturate(1.6) hue-rotate(-28deg) brightness(0.88) contrast(1.06);
    }

    /* ===== COMPENDIUM TOOLTIP (chi tiết khi rê/chạm vào dòng) ===== */
    .comp-card li[data-detail] {
      cursor: help;
      border-bottom: 1px dotted rgba(208, 162, 74, 0.45);
    }
    .comp-card li[data-detail]:hover { color: #f2e6c8; }
    #compTip {
      position: fixed;
      z-index: 7000;
      max-width: 330px;
      background: #1b130d;
      color: #e7d9bd;
      border: 1px solid rgba(208, 162, 74, 0.55);
      border-left: 3px solid #d0a24a;
      border-radius: 6px;
      padding: 8px 11px;
      font-size: 0.78rem;
      line-height: 1.45;
      box-shadow: 0 10px 26px rgba(0, 0, 0, 0.75);
      pointer-events: none;
      display: none;
    }
    #compTip .tip-name { font-weight: 700; color: #e6bd68; display: block; margin-bottom: 2px; }

    /* ===== MA ÁM KHI TREO WEB (idle haunt): sách rách + khóc than ===== */
    .haunt-layer { position: fixed; inset: 0; z-index: 5900; pointer-events: none; display: none; }
    .haunt-layer.show { display: block; animation: hauntFade 2.6s ease forwards; }
    .haunt-layer .haunt-tear {
      position: absolute; left: -6%; right: -6%; top: 50%; height: 240px;
      transform: translateY(-50%);
      filter: drop-shadow(0 0 16px rgba(170, 25, 25, 0.55));
      animation: tearGrow 2.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    }
    @keyframes hauntFade { 0% { opacity: 0; } 10% { opacity: 1; } 72% { opacity: 1; } 100% { opacity: 0; } }
    @keyframes tearGrow {
      0% { transform: translateY(-50%) scaleX(0.15); opacity: 0; }
      16% { opacity: 1; }
      100% { transform: translateY(-50%) scaleX(1.06); opacity: 0; }
    }
    body.haunt-shake { animation: bodyQuake 0.5s ease; }