.tt-table {
  position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#16241d;
  --tt-card-width:110px;--tt-paper:#b79865;
}
.tt-table::before {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:#16241d url("assets/tarot-table.webp") 50% 48% / cover no-repeat;
  transform:scaleX(-1);
}
.tt-table::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,#06161645,transparent 26%),linear-gradient(90deg,#100e0a38,transparent 56%);
}
.tt-candlelight { position:absolute;pointer-events:none;mix-blend-mode:screen;transform:scaleX(-1); }
.tt-light {
  position:absolute;width:2.7%;height:6%;left:4.6%;top:2%;border-radius:50%;
  background:radial-gradient(ellipse,#fff7be93 0%,#ffa22d5c 25%,transparent 69%);
  transform:translate(-50%,-50%);opacity:.23;animation:tt-wick 4.7s linear infinite alternate;
}
.tt-light:nth-child(2) { left:12.75%;top:8.3%;animation-duration:3.1s;animation-direction:alternate-reverse; }
.tt-light:nth-child(3) { left:8.35%;top:14.5%;animation-duration:3.9s;animation-delay:-1.7s; }
.tt-light:nth-child(4) { left:17%;top:33%;width:37%;height:44%;animation-duration:5.1s;
  background:radial-gradient(ellipse,#ffb64c26,transparent 71%); }
@keyframes tt-wick { 0%,65%{opacity:.13}21%{opacity:.50}35%{opacity:.27}44%{opacity:.42}78%{opacity:.39}100%{opacity:.20} }
.tt-table[data-paused=true] .tt-light { animation-play-state:paused; }
.tt-workspace {
  position:absolute;z-index:1;inset-block-start:var(--tt-inset-top,1%);inset-block-end:var(--tt-inset-bottom,3%);
  inset-inline-start:var(--tt-inset-inline-start,clamp(320px,30vw,465px));inset-inline-end:var(--tt-inset-inline-end,3%);
  min-width:0;min-height:0;pointer-events:none;user-select:none;-webkit-user-select:none;
}
.tt-deck,.tt-fan,.tt-reveal-layer { position:absolute;inset:0;pointer-events:none; }
.tt-table .tt-paper {
  position:absolute;left:0;top:0;display:block;width:var(--tt-card-width);height:auto;aspect-ratio:10 / 17;
  margin:0;padding:0;border:none;border-radius:4.2% / 2.5%;background:transparent;box-sizing:border-box;
  transform-style:preserve-3d;transform-origin:50% 50%;-webkit-tap-highlight-color:transparent;
}
.tt-back,.tt-front {
  position:absolute;inset:0;display:block;box-sizing:border-box;overflow:hidden;pointer-events:none;
  border-radius:inherit;backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.tt-back {
  background:#34232c url("assets/tarot-back.webp") center/100% 100% no-repeat;
  box-shadow:inset 0 0 0 1px #e7c894a8,inset -1px -1px 1px #351b179c;
}
.tt-back::after {
  content:"";position:absolute;inset:0;
  background:linear-gradient(122deg,#ffe6ba21,transparent 39%,#1c11151c 85%);
}
.tt-deck .tt-paper,.tt-table .tt-card-hit {
  box-shadow:0 .8px 0 #d3ae76,.3px 1.7px 0 #524335,2px 4px 5px #180e0e69;
}
.tt-deck .tt-paper:last-child { box-shadow:0 .8px 0 #eed2a1,.6px 1.7px 0 #765c40,2px 3px 4px #0c0a0977; }
.tt-table .tt-card-hit {
  pointer-events:auto;appearance:none;cursor:grab;color:inherit;touch-action:none;
}
.tt-table .tt-card-hit:active { cursor:grabbing; }
.tt-table .tt-card-hit:disabled { pointer-events:none;cursor:default;background:transparent; }
.tt-table .tt-card-hit[data-taken=true] { visibility:hidden; }
.tt-table .tt-card-hit:focus-visible { outline:3px solid #ffeab2;outline-offset:3px; }
.tt-card-hit:not(:disabled):is(:hover,:focus-visible) .tt-back { box-shadow:inset 0 0 0 2px #ffdfa2,0 0 9px #fff1c949; }
.tt-card-hit:not(:disabled):is(:hover,:focus-visible) .tt-back::after { background:linear-gradient(128deg,#ffeece3b,transparent 70%); }
.tt-table .tt-lifted {
  box-shadow:1px 2px 1px #e1bf87,2px 3px 0 #7b5e40,6px 13px 14px #130f0b80;
}
.tt-reveal { pointer-events:none; }
.tt-reveal .tt-back { box-shadow:inset 0 0 0 1px #e8c99c,1px 3px 4px #0c090b55; }
.tt-front {
  display:grid;place-items:center;background:#e9dcc1;color:#332b25;
  transform:rotateY(180deg);box-shadow:inset 0 0 0 1px #d8c6a1,0 1px 0 #b29b77,2px 3px 1px #624d38,
    5px 9px 12px #070c0982,13px 22px 32px #080c0a4d;
}
.tt-front img { display:block;width:100%;height:100%;object-fit:fill;pointer-events:none; }
.tt-front img[data-reversed=true] { transform:rotate(180deg); }
.tt-front::after { content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px #fbefd970; }
.tt-table[data-pose=held] .tt-fan,.tt-table[data-pose=showing] .tt-fan { opacity:.67; }
.tt-table[data-pose=showing] .tt-card-hit,.tt-table[data-pose=held] .tt-card-hit { pointer-events:none; }
@media(max-width:800px){
  .tt-table { position:relative;inset:auto;width:100%;height:clamp(245px,43svh,465px);flex:none; }
  .tt-table::before { background-position:9% 47%;transform:none; }
  .tt-candlelight { transform:none; }
  .tt-workspace { inset-inline-start:var(--tt-inset-inline-start,5px);inset-inline-end:var(--tt-inset-inline-end,5px);
    inset-block-start:var(--tt-inset-top,0px);inset-block-end:var(--tt-inset-bottom,5px); }
}
@media(prefers-reduced-motion:reduce){
  .tt-table *, .tt-table::before,.tt-table::after { scroll-behavior:auto; }
  .tt-table .tt-light { animation:none; }
}

/* The wood, fingertips, paper projection and light use the same camera coordinates. */
.tt-table.tt-hosted { background:#211a19; }
.tt-table.tt-hosted::before,.tt-table.tt-hosted::after { display:none; }
.tt-npc-view { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;isolation:isolate;overflow:hidden;background:#211a19; }
/* The square set extension was registered to the cinema plate at (0, 276) in its 1254px frame. */
.tt-npc-surround { position:absolute;left:0;top:-282.2px;width:1280px;height:1282px;pointer-events:none; }
.tt-npc-view::after {
  content:"";position:absolute;z-index:2;inset:0;pointer-events:none;
  background:linear-gradient(180deg,#0c0a101c,transparent 17%,transparent 86%,#100c1359);
}
.tt-npc-plane { position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0; }
.tt-hosted[data-actor=offer] .tt-npc-plane { transition:transform .43s cubic-bezier(.22,.65,.3,1); }
.tt-npc-photo,.tt-npc-idle,.tt-npc-film { position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;
  mask-image:linear-gradient(to bottom,transparent,#000 1.8%,#000 98.2%,transparent); }
.tt-npc-idle,.tt-npc-film { opacity:0; }
.tt-hosted[data-film=idle] .tt-npc-idle,.tt-hosted[data-film=gesture] .tt-npc-film { opacity:1; }
.tt-hosted[data-actor=shuffle][data-film=gesture] .tt-candlelight {visibility:hidden}
.tt-hosted[data-actor=shuffle][data-film=gesture] .tt-npc-film {mask-image:none}
.tt-hosted[data-actor=shuffle][data-film=gesture] .tt-npc-surround {filter:brightness(.5) blur(8px)}
.tt-hosted .tt-workspace { inset:0!important;width:100%;height:100%; }
.tt-hosted .tt-fan { transition:none; }
.tt-hosted[data-actor=shuffle] .tt-deck,.tt-hosted:is([data-actor=offer],[data-actor=held]) .tt-fan { visibility:hidden; }
.tt-hosted .tt-candlelight { inset:0;width:100%;height:100%;transform:none;z-index:1; }
.tt-hosted .tt-light:nth-child(1){left:4.9%;top:41.2%;width:2.8%;height:8%}
.tt-hosted .tt-light:nth-child(2){left:10.95%;top:52.1%;width:2%;height:4.7%}
.tt-hosted .tt-light:nth-child(3){left:94%;top:32.7%;width:2.2%;height:4.3%}
.tt-hosted .tt-light:nth-child(4){left:12.5%;top:74%;width:40%;height:40%;opacity:.15}
.tt-hosted .tt-deck .tt-paper,.tt-hosted .tt-card-hit {
  box-shadow:0 1.2px 0 #d1ae7a,1px 2px 0 #64462f,1px 3px 4px #140e0bf0;
}
.tt-hosted .tt-reveal-layer { z-index:3; }
.tt-pick-sleeve,.tt-pick-fingers{position:absolute;inset:0;width:1280px;height:720px;max-width:none;pointer-events:none;visibility:hidden}
.tt-pick-sleeve{z-index:1}.tt-pick-fingers{z-index:4}
.tt-hosted[data-pickup] .tt-workspace{z-index:2}
.tt-hosted[data-pickup] :is(.tt-pick-sleeve,.tt-pick-fingers){visibility:visible}
.tt-hosted[data-pickup] .tt-npc-idle{opacity:0}
.tt-grip-target{position:absolute;top:42%;left:50%;width:0;height:0;pointer-events:none}
.tt-card-hit.tt-chosen .tt-back{box-shadow:inset 0 0 0 2px #e9c77c,0 3px 7px #27131855}
.tt-table .tt-projected { width:100px!important;height:170px!important;aspect-ratio:auto;transform-origin:0 0;border-radius:0; }
.tt-projected .tt-back { display:none; }
.tt-projected .tt-front {
  transform:none;backface-visibility:visible;border-radius:0;background:#ddc9a5;box-shadow:none;opacity:.975;
}
.tt-projected .tt-front img { filter:sepia(.09) saturate(.94) brightness(.98); }
.tt-projected .tt-front::after {box-shadow:inset 0 0 1px 1px #ad83564d;}
@media(prefers-reduced-motion:reduce){
  .tt-hosted .tt-npc-plane,.tt-hosted .tt-workspace,.tt-hosted .tt-workspace * {transition:none!important;animation:none!important;}
}