/* The homepage has one small deck: spread first, then reveal the game faces. */
.eighty-home .sheet { position: relative; overflow: hidden; }
.eighty-hand { position: absolute; inset: 0; pointer-events: none; }
.eh-card {
  position: absolute;
  left: 50%; top: 292px;
  width: 200px; height: 300px;
  margin: -150px 0 0 -100px;
  transform: translate(var(--rest-x), var(--rest-y)) rotate(var(--rest-angle));
  transform-origin: 50% 88%;
  perspective: 1400px;
  z-index: var(--depth);
}
.eh-flipper { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; }
.eh-side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.eh-card-back { filter: drop-shadow(1px 3px 1px rgb(25 24 25 / 16%)); }
.eh-card-back > svg { display: block; width: 100%; height: 100%; }
.eh-card-front { transform: rotateY(180deg); }
.eh-card-front .face { box-shadow: 1px 3px 1px rgb(25 24 25 / 16%); }
/* Resolve ink against its paper before the 3D flip. Cross-layer blending can
   otherwise expose the bitmap's light rectangle on mobile compositors. */
.eh-card-front .illustration {
  background-image: url('./assets/eighty/home-deck/pixel-court-paper.svg');
  filter: none;
  mix-blend-mode: normal;
}
.eh-court-wire { display: none; position: absolute; inset: 20% 22%; }
.eh-court-wire > svg { width: 100%; height: 100%; }
.eh-caption {
  position: absolute;
  width: 900px;
  left: 150px;
  bottom: 50px;
  color: #242428;
  pointer-events: none;
}
.eh-caption svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Real wire mode: no paper fills, raster court images or painted shadows.
   The same card geometry, ranks, pips and back ornaments remain visible. */
.root[data-debug="true"] .eh-card-back { filter: none; }
.root[data-debug="true"] .eh-card-back svg [fill] { fill: none; }
.root[data-debug="true"] .eh-card-back svg :is(path, rect) {
  stroke: var(--wire); stroke-width: .28px;
}
.root[data-debug="true"] .eh-card-back svg [data-paper] { stroke-width: .45px; }
.root[data-debug="true"] .eh-card-front .face {
  background: transparent;
  box-shadow: none;
  border-color: var(--wire);
  border-width: 1px;
  color: var(--wire);
}
.root[data-debug="true"] .eh-card-front .illustration {
  background-image: none;
  background-color: transparent;
  outline: 1px solid var(--wire);
  outline-offset: -1px;
  filter: none;
  mix-blend-mode: normal;
}
.root[data-debug="true"] .eh-card-front svg path {
  fill: none; stroke: var(--wire); stroke-width: .18px;
}
.root[data-debug="true"] .eh-court-wire { display: block; }
.root[data-debug="true"] .eh-caption { color: var(--wire); }
.root[data-debug="true"] .eh-caption svg path { fill: none; stroke: var(--wire); stroke-width: 2px; }