[data-screen="play"] { padding: 130px 16px 16px; }

.packs {
  flex: 1;
  width: 100%;
  display: flex;
  gap: 3vmin;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.packs figure {
  margin: 0;
  height: 100%;
  min-height: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.packs figcaption {
  font-family: var(--font-display);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 16px;
  color: var(--brand);
  text-transform: uppercase;
  letter-spacing: .2em;
}
.pack {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
}
.pack svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  filter: drop-shadow(0 0 24px rgba(56, 189, 248, .25));
}
.found-ring { fill: none; stroke: var(--ok); stroke-width: 6; animation: ring .4s ease-out; }
.miss-x { stroke: var(--bad); stroke-width: 7; stroke-linecap: round; animation: miss .7s forwards; }
@keyframes ring { from { transform-box: fill-box; transform-origin: center; transform: scale(1.8); opacity: 0; } }
@keyframes miss { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

@media (orientation: portrait) {
  .packs { flex-direction: column; }
  .packs figure { height: auto; width: 100%; flex: 1 1 0; }
}