/* Portfolio presentation only. The game lives in its own repository. */
.eighty-card {
  --ec-paper: #faf8f2;
  --ec-ink: #232a2b;
  --ec-muted: #6a706c;
  display: block;
  color: var(--ec-ink);
  background: var(--ec-paper);
  text-decoration: none;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgb(27 37 30 / 10%);
  box-shadow: 0 2px 2px rgb(30 25 15 / 2%), 0 16px 40px -28px rgb(30 25 15 / 35%);
  -webkit-tap-highlight-color: transparent;
}
.eighty-cover {
  --card-width: 72px;
  --card-gap: 12px;
  --rotation: -11deg;
  --pan-x: 0px;
  --pan-y: 0px;
  position: relative;
  height: clamp(260px, 33vw, 440px);
  overflow: hidden;
  isolation: isolate;
  background: #d7d9cc;
  contain: paint;
}
.eighty-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgb(255 255 255 / 12%), transparent 38%, rgb(13 25 30 / 10%));
  pointer-events: none;
  z-index: 3;
}
.eighty-grid {
  position: absolute;
  display: grid;
  grid-template-columns: repeat(14, var(--card-width));
  gap: var(--card-gap);
  width: max-content;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(var(--rotation)) translate(var(--pan-x), var(--pan-y));
  transition: transform 700ms cubic-bezier(.16, 1, .3, 1);
}
.eighty-tile {
  position: relative;
  display: block;
  width: var(--card-width);
  aspect-ratio: 72 / 104;
  filter: drop-shadow(0 2px 1px rgb(0 0 0 / 15%));
  transition: transform 400ms cubic-bezier(.16, 1, .3, 1), filter 400ms;
  transform: translateY(0);
}
.eighty-tile img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
@media (hover: hover) {
  .eighty-tile:hover { transform: translateY(-9px) rotate(-3deg); filter: drop-shadow(0 9px 4px rgb(0 0 0 / 18%)) brightness(1.07); z-index: 2; }
}
.eighty-caption { display: flex; align-items: center; gap: 20px; padding: 23px 25px; }
.eighty-caption-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; flex: 1; }
.eighty-caption strong { font-size: 30px; line-height: 1; font-weight: 600; letter-spacing: -.045em; }
.eighty-caption small { font-size: 13px; color: var(--ec-muted); line-height: 1.6; }
.eighty-arrow { width: 34px; height: 34px; border: 1px solid rgb(85 95 88 / 20%); border-radius: 50%; display: grid; place-items: center; font-size: 20px; transition: transform 300ms; }
.eighty-card:hover .eighty-arrow { transform: rotate(-35deg); }
.eighty-card:focus-visible { outline: 2px solid var(--colors-gray12, #263e33); outline-offset: 6px; }
html.dark .eighty-card { --ec-paper: #202424; --ec-ink: #efece3; --ec-muted: #abaea6; border-color: #38403b; }
@media (max-width: 600px) {
  .eighty-cover { height: 270px; --card-width: 59px; --card-gap: 10px; }
  .eighty-caption { padding: 19px 20px; gap: 10px; }
  .eighty-caption-copy { display: grid; gap: 7px; }
  .eighty-caption strong { font-size: 27px; }
  .eighty-caption small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .eighty-grid, .eighty-tile, .eighty-arrow { transition: none; }
  .eighty-tile:hover, .eighty-card:hover .eighty-arrow { transform: none; }
  .eighty-grid { transform: translate(-50%, -50%) rotate(var(--rotation)); }
}