/* One material follows the crop from the source photo into the collection.
   These composited CSS shaders preserve the original canvas/PNG pixels. */
.foil-surface {
  position: relative;
  isolation: isolate;
  --foil-colors:
    transparent 8%, #b5ccdf44 26%, #ffffffa0 44%, #e9f3ff22 49%, #91aaca55 56%,
    transparent 78%;
  --foil-strength: 0.7;
}
.foil-surface[data-tier="shiny"] {
  --foil-colors:
    #f7b5ff11 0%, #efb9f799 15%, #9ea4ff88 25%, #72e9ff99 36%, #eaffeec9 47%,
    #ffed9c88 56%, #ffb9cb99 67%, #bbabff77 78%, #74e8ee55 90%, #e4caff22;
  --foil-strength: 0.8;
}
.foil-surface[data-tier="gold"] {
  --foil-colors:
    #6e390144 0%, #c88c2788 15%, #f9d47c99 29%, #fffbdccc 44%, #ffe49c88 49%,
    #c78b2288 61%, #f7d97e99 77%, #9f680644 100%;
  --foil-strength: 0.85;
}
.foil-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  mask-image: var(--foil-mask, none);
  mask-size: 100% 100%;
  z-index: 2;
  background:
    repeating-linear-gradient(118deg, #ffffff18 0 1px, transparent 1px 4px),
    linear-gradient(115deg, var(--foil-colors));
  background-size:
    100% 100%,
    240% 240%;
  background-position:
    50% 50%,
    var(--foil-x, 55%) var(--foil-y, 50%);
  mix-blend-mode: screen;
  opacity: var(--foil-strength);
  animation: material-light 5s ease-in-out infinite alternate;
}
.foil-surface[data-tier="gold"]::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 3;
  pointer-events: none;
  mask-image: var(--foil-mask, none);
  mask-size: 100% 100%;
  background:
    radial-gradient(ellipse at 27% 28%, #fffdf3 0 0.7px, #ffe9af00 3px),
    radial-gradient(ellipse at 77% 69%, #fff8d6 0 1px, #ffe9af00 4px);
  background-size:
    27px 37px,
    43px 31px;
  mix-blend-mode: screen;
  opacity: 0.5;
}
.foil-surface:not([data-tier])::after,
.foil-surface[data-tier="pending"]::after {
  opacity: 0;
}
.source-materials {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.has-posters .overlay {
  opacity: 1;
  z-index: 3;
}
.has-posters:not(.has-selection) .outside-dim {
  opacity: 0;
}
.source-material {
  position: absolute;
  transition: opacity 0.25s;
}
.source-material[data-phase="cutting"]::after {
  opacity: 0;
}
#posterBoxes g[data-phase="cutting"] path {
  stroke: #fff;
  stroke-width: 3;
  stroke-dasharray: 0.12 0.03;
  animation: cutting-edge 1s linear infinite;
}
#posterBoxes g[data-tier="shiny"] path {
  stroke: #eab9ff;
}
#posterBoxes g[data-tier="gold"] path {
  stroke: #e9c15c;
}
#posterBoxes g[data-phase="foiled"] path {
  stroke-width: 3;
}
.poster-art {
  position: relative;
  display: block;
  width: 76px;
  height: 92px;
  border-radius: 5px;
  overflow: hidden;
}
.poster-art img {
  width: 100%;
  height: 100%;
}
.poster-card[data-phase="cutting"] .poster-art {
  opacity: 0.4;
}
.poster-card[data-phase="foiled"] .poster-art {
  opacity: 0.8;
}
.poster-tile .foil-caption {
  font-size: 9px;
  line-height: 1.4;
}
.poster-tile .event-caption {
  max-width: 100%;
  font-size: 10px;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lifted-poster[data-tier="standard"] {
  background: linear-gradient(135deg, #f6fbff, #aec2d8, #f6fbff);
}
.lifted-poster[data-tier="shiny"] {
  background: linear-gradient(
    135deg,
    #ffcadf,
    #c1b2ff,
    #a3f4f5,
    #fff2b6,
    #e7bbff
  );
}
.lifted-poster[data-tier="gold"] {
  background: linear-gradient(135deg, #fff7d3, #c59031, #fff0ae, #aa7025);
}
.lifted-poster[data-tier="pending"] {
  background: #e5eaf1;
}
.flying-poster {
  position: fixed;
  padding: 0;
  margin: 0;
  border-radius: 3px;
  overflow: hidden;
  isolation: isolate;
}
.flying-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.stack-dock {
  position: fixed;
  z-index: 30;
  bottom: max(20px, env(safe-area-inset-bottom));
  right: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 18px 10px 14px;
  border: 1px solid #fff;
  border-radius: 24px;
  background: #f9fbfff0;
  box-shadow: 0 5px 30px #233e702a;
  backdrop-filter: blur(16px);
  color: #334466;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
}
.stack-cards {
  position: relative;
  width: 34px;
  height: 44px;
}
.stack-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid #fff;
  border-radius: 3px;
  transform: rotate(var(--stack-angle));
  background: #dce5f4;
  box-shadow: 0 2px 4px #293c5530;
}
.stack-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-details {
  padding: 0 24px 16px;
  text-align: center;
  color: #526783;
  font-size: 12px;
  line-height: 1.5;
}
.event-details strong {
  display: block;
  color: #28344b;
  font-size: 15px;
}
.event-details button {
  display: block;
  margin: 8px auto 0;
  min-height: 44px;
  color: #2b50e7;
  background: none;
  font: inherit;
}
.finish-preview {
  border: 1px solid #dfe5ee;
  padding: 14px;
  border-radius: 16px;
  margin: 20px 0;
}
.finish-preview p {
  font-size: 12px;
}
.finish-preview-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.finish-preview button {
  min-height: 44px;
  border-radius: 16px;
  padding: 8px 12px;
  background: #edf1ff;
  color: #2b50e7;
}
@keyframes material-light {
  from {
    background-position:
      50% 50%,
      10% 25%;
  }
  to {
    background-position:
      50% 50%,
      85% 70%;
  }
}
@keyframes cutting-edge {
  to {
    stroke-dashoffset: -0.3;
  }
}
@media (max-width: 780px) {
  .local-badge {
    max-width: 130px;
    text-align: right;
    font-size: 9px;
  }
  .poster-art {
    width: 68px;
    height: 84px;
  }
  .stack-dock {
    right: 16px;
    bottom: max(14px, env(safe-area-inset-bottom));
  }
  body {
    padding-bottom: 80px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .foil-surface::after,
  #posterBoxes g[data-phase="cutting"] path {
    animation: none;
  }
  .source-material {
    transition: none;
  }
}