/* The opening suite: pearl wrappers stay intact; movement belongs to the hand. */
:root { --experience-pearl: #f7dfbf; --experience-sky: #b4eafa; }
.pack-view { position: relative; }
.tempo-toggle:focus-visible { outline: 2px solid #f8ddaa; outline-offset: 4px; }
.pack.is-opening { animation: foil-tension 560ms cubic-bezier(.2,.65,.3,1) both; will-change: transform, opacity; }
.pack.is-opening .pack-top { transform-origin: 8% 85%; animation: foil-seal 560ms cubic-bezier(.2,.74,.24,1) both; }
.pack.is-opening .pack-body,
.pack.is-opening .pack-bottom { animation: foil-release 560ms cubic-bezier(.24,.66,.25,1) both; }
.pack.is-opening .pack-sheen { animation: foil-light 440ms ease-out both; }
@keyframes foil-tension {
  0% { transform: rotate(0deg) scale(1); opacity: 1; }
  16% { transform: rotate(-1.2deg) scale(.982,1.012); }
  34% { transform: rotate(.7deg) scale(1.015,.992); }
  68% { transform: rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(10px) scale(.98); opacity: 0; }
}
@keyframes foil-seal {
  0%, 14% { transform: translate(0,0) rotate(0); opacity: 1; }
  30% { transform: translate(10px,-9px) rotate(-5deg); opacity: 1; }
  62% { transform: translate(65px,-56px) rotate(21deg); opacity: .95; }
  100% { transform: translate(112px,-84px) rotate(32deg); opacity: 0; }
}
@keyframes foil-release {
  0%, 25% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
  46% { transform: translateY(8px) rotate(-.6deg) scale(.995,1.015); opacity: 1; }
  100% { transform: translateY(75px) rotate(2deg) scale(.94,.98); opacity: 0; }
}
@keyframes foil-light {
  0% { opacity: .35; } 27% { opacity: .9; } 70%, 100% { opacity: 0; }
}

/* Five objects leave a single point and settle on felt. Card geometry stays stable. */
@media (min-width: 761px) and (pointer: fine) {
  .results-view .cards > .card:not(.no-arrival) {
    animation: collector-deal 460ms cubic-bezier(.16,.82,.22,1) backwards;
    animation-delay: var(--delay, 0ms);
  }
}
@keyframes collector-deal {
  from { opacity: 0; transform: translate(var(--deal-x, 0px), 62px) rotate(var(--deal-angle, 0deg)) scale(.86); }
  66% { opacity: 1; }
  to { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
}
.card.is-face-down.is-reveal-ready .card-back { animation: none; }
.card.is-face-down .card-back { transition: box-shadow 160ms ease; }
@media (hover: hover) and (pointer: fine) {
  .card.is-face-down:hover .card-back { box-shadow: inset 0 0 30px rgb(255 236 203 / 12%); }
}
.card.is-revealing .card-back { animation: collector-turn-away 175ms cubic-bezier(.55,.04,.77,.42) both; }
.card.is-revealing .card-face { animation: collector-turn-in 270ms cubic-bezier(.14,.8,.24,1) 170ms both; }
@keyframes collector-turn-away {
  from { opacity: 1; transform: perspective(1000px) rotateY(0); }
  to { opacity: 1; transform: perspective(1000px) rotateY(-90deg); }
}
@keyframes collector-turn-in {
  from { opacity: 1; transform: perspective(1000px) rotateY(90deg); }
  72% { transform: perspective(1000px) rotateY(-3deg); }
  to { opacity: 1; transform: perspective(1000px) rotateY(0); }
}
.card.is-reveal-hit { --reveal-glow: #c8d0d4; animation: reveal-impact 520ms ease-out both; }
.card.is-reveal-hit[data-rarity="R"] { --reveal-glow: #a8dbf5; }
.card.is-reveal-hit[data-rarity="SR"] { --reveal-glow: #cea7f5; }
.card.is-reveal-hit[data-rarity="SSR"] { --reveal-glow: #f9d480; }
.card.is-reveal-hit[data-rarity="UR"] { --reveal-glow: #f3c5e1; }
.card.is-reveal-hit[data-finish="prismatic"] { --reveal-glow: #b3f5ee; }
.card.is-reveal-hit .card-face::after {
  position: absolute; z-index: 22; inset: 0; pointer-events: none; content: "";
  background: linear-gradient(112deg, transparent 30%, rgb(255 252 227 / 23%) 48%, transparent 64%);
  transform: translateX(-115%); animation: collector-light-pass 520ms ease-out both;
}
.card[data-finish="prismatic"].is-reveal-hit .card-face::after {
  background: linear-gradient(112deg, transparent 20%, rgb(164 236 255 / 22%) 38%, rgb(255 220 247 / 32%) 48%, rgb(255 237 173 / 25%) 57%, transparent 74%);
}
@keyframes collector-light-pass { to { transform: translateX(115%); } }

.results-meta { letter-spacing: .1em; }
.reveal-instruction { color: #c4b9c2; letter-spacing: .08em; }
.reveal-instruction:empty { display: none; }
.results-actions { flex-wrap: wrap; }
.dock-ledger .tempo-toggle {
  display: grid; grid-template-columns: 18px minmax(0,1fr); align-items: center;
  width: 100%; min-height: 46px; gap: 10px; padding: 8px 12px; border-radius: 9px;
  border: 1px solid rgb(255 255 255 / 14%); background: rgb(255 255 255 / 7%);
  text-align: left; color: var(--desk-ink); cursor: pointer;
}
.tempo-toggle .utility-label { display: grid; gap: 4px; }
.tempo-toggle svg { width: 15px; height: 15px; }
.tempo-toggle svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
/* Fast mode is a pace preference; Light mode limits effects independently. */
[data-tempo="quick"] .pack.is-opening,
[data-tempo="quick"] .pack.is-opening :is(.pack-top,.pack-body,.pack-bottom,.pack-sheen) { animation: collector-dissolve 100ms ease both; }
@keyframes collector-dissolve { to { opacity: 0; } }
[data-tempo="quick"] .results-view .cards > .card { animation: none; }
.card.is-instant-reveal .card-back { display: none; animation: none !important; }
.card.is-instant-reveal .card-face { animation: none !important; transform: none; opacity: 1; }
.is-performance-lite .card.is-reveal-hit .card-face::after { display: none; }
.is-performance-lite .card.is-reveal-hit { animation: none; }
@media (max-width: 760px), (pointer: coarse) {
  /* The status takes its intrinsic height; the wrapper gets the remaining
     visible space. Container sizing also handles the expanded queue naturally. */
  .app:has(.pack-screen:not([hidden]) .pack-view:not([hidden])) { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .pack-view {
    height: max(200px, calc(100dvh - 134px - env(safe-area-inset-bottom)));
    width: 100%;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
  }
  .pack-view .pack-plinth { width: 100%; height: 100%; min-height: 0; container-type: size; }
  .pack-view:has(.pack-preparation:not([hidden])) .pack-plinth { padding-bottom: 64px; }
  /* Desktop's enlarged hover target must not widen a phone's layout viewport. */
  .pack-view .pack-interaction::before { inset: 0; }
  .pack-view .plinth-shadow { max-width: 100%; }
  .pack-view .pack-plinth .pack {
    height: max(1px, min(calc(100cqh - 16px), calc((100cqw - 16px) * 375 / 252)));
    width: auto;
    max-width: none;
    aspect-ratio: 252 / 375;
  }
  .pack-view .floating-status { width: 100%; padding: 4px 8px 0; }
  .pack-view .floating-status .pack-bank { margin-bottom: 10px; gap: 16px; }
  .pack-view .floating-status .supply-stat { flex-direction: row; align-items: baseline; gap: 7px; }
  .pack-view .floating-status .supply-stat:last-child { padding-left: 16px; }
  .pack-view .floating-status .supply-value,
  .pack-view .floating-status .supply-value b,
  .pack-view .floating-status .pack-bank [data-pack-timer] { font-size: 22px; letter-spacing: -.5px; }
  .pack-view .floating-status .supply-value i { font-size: 13px; }
  .pack-view .floating-status .supply-label { font-size: 11px; }
  .pack-view .floating-status .pack-milestones,
  .pack-view .floating-status .pack-milestones:has(.is-expansion:not([hidden])) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .pack-view .floating-status .milestone-rail { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pack-view .floating-status .milestone-rail .rail-copy { text-align: left; font-size: 11px; }
  .pack-view .floating-status .rail-track { margin-top: 2px; }
  .pack-view .floating-status .milestone-rail.is-expansion { grid-column: 1 / -1; grid-template-columns: auto 1fr; }
  .pack-view .floating-status .milestone-rail.is-expansion .rail-copy { text-align: right; }
  .pack-view .floating-status [data-expansion-next] { margin-top: 2px; }
  .pack-view .floating-status .purchased-queue { margin-top: 8px; }
  .results-actions { gap: 8px; }
  .results-actions .secondary-action { min-width: 0; flex: 1; font-size: 9px; letter-spacing: .04em; white-space: nowrap; }
  .results-view .cards > .card.is-reveal-hit { animation: none; }
  .results-view .cards > .card.is-revealing .card-face,
  .results-view .cards > .card.is-revealing .card-back { animation-play-state: running !important; }
}
@media (prefers-reduced-motion: reduce) {
  .pack.is-opening,
  .pack.is-opening :is(.pack-top,.pack-body,.pack-bottom,.pack-sheen) { animation: collector-dissolve 100ms ease both !important; }
  .card.is-revealing .card-face { animation: none !important; transform: none; opacity: 1; }
  .card.is-revealing .card-back { display: none; }
  .card.is-reveal-hit .card-face::after { display: none; }
  .results-view .cards > .card { animation: none !important; }
}

/* The wrapper is the opening button; use the former action row for its art. */
@media (min-width: 761px) and (pointer: fine) {
  .pack-view {
    --pack-base-height: clamp(220px, calc(100svh - 540px), 540px);
    --pack-height-reserve: clamp(345px, calc(30svh + 165px), 390px);
    --pack-stage-height: max(170px, min(calc(var(--pack-base-height) * 1.3), calc(100svh - var(--pack-height-reserve))));
    --pack-stage-width: calc(var(--pack-stage-height) * .6725);
    grid-template-rows: auto var(--pack-stage-height);
    row-gap: clamp(28px, 3.5svh, 48px);
    min-height: 0; transform: none;
  }
  .pack-view:has(.pack-preparation:not([hidden])) {
    --pack-height-reserve: calc(clamp(345px, calc(30svh + 165px), 390px) + 80px);
  }
  .pack-preparation { top: calc(100% + 8px); }
  .results-view .cards {
    --pack-spread-width: min(1500px, calc(100vw - 48px), calc((100svh - 440px) * 3.25));
    width: var(--pack-spread-width);
  }
}

/* Reserve space for the queue summary and its optional horizontal item row. */
@media (min-width: 761px) and (pointer: fine) {
  .pack-view:has([data-purchased-queue]:not([hidden])) {
    --pack-stage-height: max(170px, min(calc(var(--pack-base-height) * 1.3), calc(100svh - var(--pack-height-reserve) - 40px)));
  }
  .pack-view:has([data-purchased-queue][open]) {
    --pack-base-height: clamp(220px, calc(100svh - 580px), 540px);
    --pack-stage-height: max(170px, min(calc(var(--pack-base-height) * 1.3), calc(100svh - var(--pack-height-reserve) - 80px)));
  }
}
@media (min-width: 761px) and (max-height: 800px) and (pointer: fine) {
  .app:has(.pack-screen:not([hidden])) { padding-top: 84px; padding-bottom: 106px; }
}
@media (min-width: 620px) and (max-height: 500px) and (pointer: coarse) {
  .pack-view { grid-template-columns: minmax(220px, .9fr) minmax(0, 1.1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; }
}