/* The game's real cards and gestures, on the presentation's ivory / forest palette. */
.showcase-collection {min-width:0;max-width:100%;position:relative}
.showcase-deck-heading {text-align:center;margin-bottom:18px}
.showcase-deck-host {
  position:relative;isolation:isolate;min-width:0;padding:18px 0;
  border-block:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 42%,#d8dcc988,transparent 72%);
}
.showcase-deck-host .card-deck {--deck-step:36px;position:relative;min-width:0;width:100%;overflow:clip}
.showcase-deck-host #showcase-creatures {
  display:grid;grid-template-columns:minmax(0,320px);justify-content:center;
  align-items:stretch;gap:0;width:100%;margin:0;padding:20px 42px 36px;
  list-style:none;isolation:isolate;touch-action:pan-y pinch-zoom;outline-offset:-3px;
}
.showcase-deck-host #showcase-creatures>li {
  grid-area:1 / 1;min-width:0;margin:0;transform-origin:50% 85%;
  transform:translate3d(calc(var(--deck-offset,0) * var(--deck-step)),calc(var(--deck-depth,0) * 7px),0)
    rotate(calc(var(--deck-offset,0) * 3deg)) scale(calc(1 - var(--deck-depth,0) * .045));
  opacity:0;visibility:hidden;cursor:pointer;
  transition:transform 420ms cubic-bezier(.22,.8,.24,1),opacity 260ms ease,visibility 420ms;
}
/* A crisp first portrait remains visible if scripting is unavailable. */
.showcase-deck-host #showcase-creatures>li:first-child:not([aria-hidden]),
.showcase-deck-host #showcase-creatures>li.is-deck-nearby {opacity:1;visibility:visible}
.showcase-deck-host #showcase-creatures>li.is-deck-active {
  transform-origin:center;
  transform:translate3d(var(--deck-drag,0px),0,0) rotate(var(--deck-tilt,0deg));cursor:grab;
}
.showcase-deck-host .is-deck-dragging #showcase-creatures>li.is-deck-active {transition:none;cursor:grabbing}
.showcase-deck-host .is-deck-dragging #showcase-creatures {user-select:none}
.showcase-deck-host #showcase-creatures>li:not(.is-deck-active)>* {pointer-events:none}
.showcase-deck-host .card-deck-controls {display:flex;align-items:center;justify-content:center;gap:20px}
.showcase-deck-host .card-deck-controls>button {
  display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);
  border-radius:50%;background:var(--paper-light);color:var(--ink);font:22px/1 var(--serif);cursor:pointer;
  transition:background .2s,border-color .2s;
}
.showcase-deck-host .card-deck-controls>button:hover:not(:disabled) {background:#e2e5d7;border-color:#8a957e}
.showcase-deck-host .card-deck-controls>button:disabled {opacity:.3;cursor:default}
.showcase-deck-host .card-deck-position {min-width:54px;text-align:center;font:italic 16px/1.5 var(--serif);font-variant-numeric:tabular-nums}
.showcase-deck-host .card-deck-hint {max-width:350px;margin:12px auto 0;padding:0 12px;text-align:center;font-size:11px;line-height:1.6;color:var(--muted)}
.showcase-deck-host [hidden] {display:none!important}
.showcase-deck-note {margin:18px auto 0;max-width:330px;text-align:center;font:italic 14px/1.6 var(--serif);color:var(--muted)}
.showcase-deck-host.is-card-inspecting {overflow:hidden;touch-action:pinch-zoom}
.showcase-deck-host.is-card-inspecting .card-deck {--deck-step:52px}
.showcase-deck-host .card-approach-path {position:relative;overflow:visible!important;z-index:30!important}
.showcase-deck-host #showcase-creatures>li.is-card-approaching {
  transform-origin:center;
  transform:translate3d(var(--card-approach-x,0px),var(--card-approach-y,0px),0) scale(min(var(--card-approach-scale,1),1.1))!important;
  z-index:40!important;cursor:zoom-out;touch-action:pinch-zoom;
}
.showcase-deck-host.is-card-inspecting #showcase-creatures>li.is-deck-nearby:not(.is-deck-active) {opacity:1}
/* Follow the painted, tilted silhouette instead of leaving a fixed card-shaped shadow. */
.showcase-deck-host .creature-card.is-pixi-covered {box-shadow:none}
.showcase-deck-host .card-pixi-surface {filter:drop-shadow(0 9px 10px #26332355)}
.showcase-deck-host.is-card-inspecting :is(.card-deck-controls,.card-deck-hint) {visibility:hidden}
.showcase-deck-host :is(button,#showcase-creatures):focus-visible {outline:2px solid var(--accent);outline-offset:3px}
/* Reader dialogs use the same paper and copper as the rest of the presentation. */
.showcase-deck-host #showcase-creatures .creature-reader .creature-reader-detail {max-width:min(720px,94vw);max-height:90dvh;color:var(--ink)}
.showcase-deck-host .creature-reader-detail::backdrop {background:#15241dd9;backdrop-filter:blur(5px)}
@media (max-width:760px) {
  .showcase-deck-host {padding:8px 0 14px}
  .showcase-deck-host .card-deck {--deck-step:24px}
  .showcase-deck-host.is-card-inspecting .card-deck {--deck-step:30px}
  .showcase-deck-host #showcase-creatures {grid-template-columns:minmax(0,min(240px,44svh));padding:16px 34px 26px}
  .showcase-deck-heading {margin-bottom:12px}
  .showcase-deck-note {font-size:13px;margin-top:12px}
}
@media (prefers-reduced-motion:reduce) {
  .showcase-deck-host #showcase-creatures>li,.showcase-deck-host .card-deck-controls>button {transition:none}
}