* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0d0a1f; color: #f2f0ff; font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; overflow: hidden; overscroll-behavior: none; touch-action: manipulation; }
body { display: flex; justify-content: center; }
@supports (height: 100dvh) { body { height: 100dvh; } }

/* Desktop: pin the game inside a phone-sized frame so we always see the mobile form factor. */
@media (min-width: 600px) and (min-height: 700px) {
  body { align-items: center; background: radial-gradient(circle at 50% 30%, #1f1650, #07050f 70%); }
  #app { width: 390px; height: min(844px, 94vh); max-width: none; border-radius: 40px; border: 8px solid #15121f; box-shadow: 0 30px 80px rgba(0,0,0,0.7), inset 0 0 0 1px #2d2359; overflow: hidden; background: #0d0a1f; }
}
button { font: inherit; color: inherit; }

#app {
  position: relative; width: 100%; max-width: 420px; height: 100%; /* the cap only matters between phone and desktop widths; phones fill edge to edge (below) */
  display: flex; flex-direction: column; user-select: none; -webkit-user-select: none;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}
/* Phones fill the full width: newer phones are wider than 420 CSS px and a capped app leaves strips of body down each
   side. Must come after the #app rule above, since it has the same specificity. */
@media (max-width: 599px) { #app { max-width: none; } }

/* ---------- HUD ---------- */
#hud { padding: 8px 12px 4px; background: #14102b; border-bottom: 2px solid #2d2359; }
.hud-row { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
#hud-level { color: #b8b0e0; }
#hud-tokens { color: #ffd23f; font-size: 15px; }
.hud-right { display: flex; align-items: center; gap: 10px; }
.hud-btn { padding: 0 8px; height: 22px; border-radius: 6px; border: 1px solid #3b2f78; background: #221a4a; color: #c7c0ea; font-size: 13px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.hud-btn.off { opacity: 0.45; text-decoration: line-through; }
.score-row { align-items: baseline; margin-top: 2px; }
#hud-score { font-size: 34px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
#hud-target { font-size: 16px; color: #8f87b8; margin-left: auto; }
#hud-bar { height: 8px; border-radius: 4px; background: #241c48; margin: 6px 0; overflow: hidden; }
#hud-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, #3ddc84, #ffd23f); border-radius: 4px; transition: width 0.25s ease-out; }
/* Score preview: what the prize under the claw would score right now. Full width; border and tint follow the streak color.
   The total slot is always reserved so the box doesn't jump when the number lands. */
.pv { --sc: #3b2f78; display: flex; width: 100%; align-items: center; gap: 8px; margin: 8px 0 2px; padding: 7px 9px; border-radius: 12px; border: 2px solid var(--sc); background: #1a1338; font-weight: 800; font-size: 19px; line-height: 1; transition: border-color 0.2s, background 0.2s, box-shadow 0.2s; }
.pv.tint { background: color-mix(in srgb, var(--sc) 22%, #1a1338); }
.pv.glow { box-shadow: 0 0 12px color-mix(in srgb, var(--sc) 55%, transparent); }
/* Rainbow card: the streak is every color at once */
.pv.rainbow { border-color: transparent; background: linear-gradient(90deg, rgba(255,77,90,0.22), rgba(255,210,63,0.22), rgba(61,220,132,0.22), rgba(61,139,255,0.22), rgba(181,107,255,0.22)) padding-box, linear-gradient(90deg, #ff4d5a, #ffd23f, #3ddc84, #3d8bff, #b56bff) border-box; }
.pv.rainbow.glow { box-shadow: 0 0 14px rgba(255,255,255,0.35); }
.pv-chips, .pv-mult, .pv-streak, .pv-total { flex: 1 1 0; min-width: 0; padding: 8px 6px; border-radius: 8px; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; color: #fff; }
.pv-chips { background: #2f6fd6; } .pv-mult { background: #d63a48; }
/* streak multiplier cell: takes the streak colour when a chain is live, dim otherwise */
.pv-streak { flex: 0.8 1 0; background: #2a2350; color: #6f66a0; }
.pv.tint .pv-streak.on { background: var(--sc); color: #1a1338; }
.pv.rainbow .pv-streak.on { background: #a9a6bf; color: #1a1338; } /* gray: the border already carries the rainbow */
.pv-total { flex: 1.5 1 0; background: rgba(0,0,0,0.38); color: #ffd23f; text-align: right; padding-right: 10px; min-height: 1em; }
.pv-op { flex: 0 0 auto; color: #8f87b8; font-size: 14px; }
.pv-total { font-size: 21px; }
.pv .long { font-size: 16px; } .pv .longer { font-size: 13px; }
.pv-total.long { font-size: 18px; } .pv-total.longer { font-size: 15px; }
/* the landed total flying up into the level score */
.flow { position: absolute; z-index: 6; font-weight: 900; font-size: 18px; color: #ffd23f; text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 10px rgba(255,210,63,0.5); transition-property: transform, opacity; transition-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1); pointer-events: none; will-change: transform; }
#hud-score.roll { color: #ffd23f; animation: scoreroll 0.45s ease-out; }
@keyframes scoreroll { 0% { transform: scale(1); } 30% { transform: scale(1.12); } 100% { transform: scale(1); } }
#hud-score { transform-origin: left center; }
/* the caught prize flying from the claw into the preview box */
.fly { position: absolute; z-index: 5; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: rgba(0,0,0,0.6); box-shadow: 0 4px 12px rgba(0,0,0,0.5), inset -3px -4px 8px rgba(0,0,0,0.25), inset 3px 4px 8px rgba(255,255,255,0.35); transition-property: transform, opacity; transition-timing-function: cubic-bezier(0.3, 0.7, 0.2, 1); pointer-events: none; will-change: transform; }
.pv.miss .pv-total, .pv.miss .pv-chips, .pv.miss .pv-mult { opacity: 0.5; }
.pv .bump { animation: cellbump 0.32s cubic-bezier(0.2, 1.4, 0.4, 1); }
@keyframes cellbump { 0% { transform: scale(1); } 45% { transform: scale(1.16); } 100% { transform: scale(1); } }
.pv.land { animation: pvland 0.55s ease-out; }
@keyframes pvland { 0% { transform: scale(1); } 25% { transform: scale(1.18); border-color: #fff; } 100% { transform: scale(1); } }

/* ---------- pit ---------- */
#pit { display: block; width: 100%; height: auto; aspect-ratio: 360 / 430; flex: 0 1 auto; touch-action: none; cursor: pointer; background: #1b1140; min-height: 0; }

/* ---------- card tray ---------- */
/* The tray sits right under the score strip, so a card's ping floats up into the numbers it changed. */
#tray { position: relative; z-index: 1; height: 74px; background: #14102b; border-bottom: 2px solid #2d2359; flex: 0 0 auto; overflow: visible; }
.tcard { position: absolute; top: 8px; width: 48px; height: 58px; border-radius: 8px; border: 2px solid #3b2f78; background: #221a4a; color: #c7c0ea; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: -4px 0 10px rgba(0,0,0,0.5); cursor: pointer; touch-action: manipulation; }
.tcard.uncommon { border-color: #3d8bff; } .tcard.rare { border-color: #ffd23f; }
.ticon { font-size: 26px; line-height: 1; }
.tcount { position: absolute; top: -7px; right: -7px; background: #ffd23f; color: #1a1338; font-size: 10px; font-weight: 900; border-radius: 999px; padding: 1px 5px; border: 2px solid #14102b; line-height: 1.2; }
.ttip .count { color: #ffd23f; }
.tcard.ping { animation: tping calc(0.6s * var(--pace, 1)) cubic-bezier(0.2, 1.4, 0.4, 1); }
.tcard.ping.common { box-shadow: 0 0 18px rgba(255,255,255,0.75); border-color: #fff; }
.tcard.ping.uncommon { box-shadow: 0 0 18px rgba(61,139,255,0.95); border-color: #9cc4ff; }
.tcard.ping.rare { box-shadow: 0 0 20px rgba(255,210,63,1); border-color: #fff2b0; }
@keyframes tping { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(-16px) scale(1.24); } 100% { transform: translateY(0) scale(1); } }
.tping { position: absolute; top: -6px; transform: translateX(-50%); font-weight: 900; font-size: 13px; letter-spacing: 0.04em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.7), 0 0 8px rgba(0,0,0,0.6); animation: tpingfloat calc(0.95s * var(--pace, 1)) ease-out forwards; pointer-events: none; z-index: 200; white-space: nowrap; }
.tping.rare { color: #ffd23f; } .tping.uncommon { color: #8fbcff; }
@keyframes tpingfloat { 0% { opacity: 0; transform: translate(-50%, 12px); } 20% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.tray-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #6f66a0; font-size: 11px; }
.ttip { position: absolute; top: 78px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 320px; background: #1a1338; border: 2px solid #3b2f78; border-radius: 10px; padding: 8px 12px; font-size: 12px; line-height: 1.35; color: #c7c0ea; z-index: 300; box-shadow: 0 10px 30px rgba(0,0,0,0.65); text-align: center; }
.ttip.uncommon { border-color: #3d8bff; } .ttip.rare { border-color: #ffd23f; }
.ttip b { display: block; color: #fff; font-size: 13px; }
.ttip-rarity { display: block; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: #8f87b8; margin: 1px 0 4px; }

/* ---------- bottom bar ---------- */
#bar { display: flex; flex-direction: column; gap: 9px; padding: 9px 12px calc(10px + env(safe-area-inset-bottom)); background: #14102b; border-top: 2px solid #2d2359; flex: 0 0 auto; }
/* drops left, as horizontal bars right above the DROP button */
#drops { display: flex; gap: 6px; height: 10px; padding: 0 2px; }
#drops i { flex: 1; border-radius: 5px; background: #2d2359; transition: background 0.2s, box-shadow 0.2s; }
#drops i.on { background: #f2f0ff; box-shadow: 0 0 6px rgba(255,255,255,0.35); }
#drops i.on.last { background: #ffd23f; box-shadow: 0 0 8px rgba(255,210,63,0.6); }
.bar-row { display: flex; gap: 10px; }
.shake-btn { flex: 1 1 0; height: 66px; border-radius: 16px; border: 2px solid #3b2f78; background: #221a4a; color: #c7c0ea; font-weight: 900; font-size: 13px; letter-spacing: 0.1em; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; touch-action: manipulation; box-shadow: 0 5px 0 #15102b; }
.shake-btn:disabled { opacity: 0.3; box-shadow: none; }
.shake-btn:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #15102b; }
.shake-btn.shaking { animation: shakebtn 0.4s ease-in-out; }
/* Aftershock is loaded: the button glows until a grab scores */
.shake-btn.armed, .shake-btn.armed:disabled { opacity: 1; animation: armedglow 0.9s ease-in-out infinite alternate; }
@keyframes armedglow { from { box-shadow: 0 0 0 2px #ffd166, 0 0 10px 2px rgba(255,209,102,0.55); } to { box-shadow: 0 0 0 3px #ffe08a, 0 0 22px 6px rgba(255,209,102,0.9); } }
@keyframes shakebtn { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px) rotate(-3deg); } 40% { transform: translateX(5px) rotate(3deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.drop-btn { --t: 100%; flex: 3 1 0; height: 66px; border: 0; border-radius: 16px; background: #2d2359; color: #6f66a0; font-weight: 900; font-size: 24px; letter-spacing: 0.14em; box-shadow: 0 5px 0 #1b1540; cursor: pointer; touch-action: none; position: relative; overflow: hidden; }
.drop-btn.ready { color: #1a1338; box-shadow: 0 5px 0 #b8901a; background: linear-gradient(90deg, #ffd23f var(--t), #7a6420 var(--t)); }
.drop-btn.ready.urgent { animation: urgent 0.35s ease-in-out infinite; }
.drop-btn.ready:active { transform: translateY(3px); box-shadow: 0 2px 0 #b8901a; }
@keyframes urgent { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

/* ---------- overlays ---------- */
#overlay { position: absolute; inset: 0; background: rgba(8, 5, 22, 0.86); display: flex; align-items: center; justify-content: center; padding: 14px; overflow-y: auto; z-index: 10; }
#overlay.hidden { display: none; }
.panel { width: 100%; max-width: 380px; max-height: 100%; overflow-y: auto; background: #1a1338; border: 2px solid #3b2f78; border-radius: 16px; padding: 18px 16px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.6); }
.panel h1 { margin: 0; font-size: 44px; letter-spacing: 0.08em; color: #ffd23f; text-shadow: 0 4px 0 #8a5a00; }
.panel h2 { margin: 0 0 8px; font-size: 24px; letter-spacing: 0.06em; }
.panel p { margin: 6px 0; color: #c7c0ea; font-size: 14px; }
.panel .sub { color: #8f87b8; font-size: 13px; margin-bottom: 14px; }
.panel .muted { color: #8f87b8; font-size: 12px; }
/* history: one row per run, newest first */
.hist-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; overflow-x: hidden; margin: 10px 0 6px; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.35) transparent; }
.hist-list::-webkit-scrollbar { width: 6px; } .hist-list::-webkit-scrollbar-track { background: transparent; } .hist-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.35); border-radius: 3px; }
.hist { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 10px; border: 2px solid #3b2f78; background: #221a4a; color: #c7c0ea; cursor: pointer; text-align: left; touch-action: manipulation; }
.hist-date { flex: 0 0 44px; font-size: 11px; color: #8f87b8; }
.hist-level { flex: 0 0 auto; font-weight: 800; color: #fff; font-size: 13px; letter-spacing: 0.04em; }
.hist-icons { display: flex; align-items: center; gap: 2px; margin-left: auto; overflow: hidden; }
.hist-icons .hicon { width: 20px; height: 20px; display: block; font-size: 14px; line-height: 20px; text-align: center; }
.hist-more { font-size: 11px; color: #8f87b8; margin-left: 2px; }
/* leaderboard rows: rank, name and level on one line, the deck on the next */
.hist.wrap { flex-wrap: wrap; row-gap: 4px; }
.hist-rank { flex: 0 0 34px; font-size: 12px; color: #8f87b8; }
.hist-name { flex: 1 1 0; min-width: 0; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hist-icons.full { flex: 1 0 100%; margin-left: 0; }
.hist.you { border-color: #ffd23f; }
/* home-screen steps */
.panel ol.steps { text-align: left; margin: 4px auto 10px; padding-left: 24px; max-width: 300px; color: #c7c0ea; font-size: 13px; line-height: 1.4; }
.panel ol.steps li { margin: 4px 0; padding-left: 2px; }
.panel .label { font-size: 11px; letter-spacing: 0.2em; color: #8f87b8; text-transform: uppercase; }
.howto { text-align: left; margin: 0 auto 16px; padding-left: 18px; color: #c7c0ea; font-size: 14px; line-height: 1.5; }
.howto b { color: #fff; }
.best { margin: -6px 0 12px; font-size: 12px; letter-spacing: 0.2em; color: #3ddc84; text-transform: uppercase; }
.best.new { color: #ffd23f; font-size: 15px; }
.toggles { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.toggle { padding: 7px 12px; border-radius: 999px; border: 1px solid #3b2f78; background: #221a4a; color: #c7c0ea; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; cursor: pointer; }
.toggle.off { opacity: 0.5; }
/* game speed: a segmented row of toggles, the active one lit */
.seg { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 10px 0 4px; }
.seg-label { font-size: 12px; font-weight: 800; letter-spacing: 0.12em; color: #8f87b8; margin-right: 4px; }
.seg .toggle { min-width: 44px; padding-left: 8px; padding-right: 8px; }
button.big { display: block; width: 100%; margin-top: 12px; padding: 14px; border: 0; border-radius: 12px; background: #ffd23f; color: #1a1338; font-weight: 800; font-size: 17px; letter-spacing: 0.06em; cursor: pointer; box-shadow: 0 4px 0 #b8901a; }
button.big:active { transform: translateY(2px); box-shadow: 0 2px 0 #b8901a; }
.score-line { font-size: 30px; font-weight: 800; margin: 6px 0 10px; }
table.reward { width: 100%; border-collapse: collapse; font-size: 14px; color: #c7c0ea; }
table.reward td { padding: 4px 6px; text-align: left; }
table.reward td:last-child { text-align: right; color: #fff; font-weight: 700; }
table.reward tr.total td { border-top: 1px solid #3b2f78; padding-top: 8px; color: #ffd23f; font-size: 16px; }

/* ---------- pack opening ---------- */
.pack-panel { padding-bottom: 12px; }
.pack-panel .label { margin-bottom: 6px; }
.pack-panel button.big.secondary { margin-top: 6px; padding: 10px; font-size: 14px; }
.pack-stage { height: 250px; display: flex; align-items: center; justify-content: center; position: relative; }
.pack { position: relative; width: 160px; height: 224px; border: 0; background: none; padding: 0; cursor: pointer; animation: packWobble 1.8s ease-in-out infinite; }
/* three sealed packs to choose from */
.packs-row { display: flex; gap: 10px; justify-content: center; align-items: center; }
.pack.small { width: 104px; height: 150px; }
.pack.small .pack-top { height: 22px; top: -4px; }
.pack.small .pack-logo { font-size: 15px; letter-spacing: 0.08em; }
.pack-icon { font-size: 34px; line-height: 1; filter: drop-shadow(0 3px 0 rgba(0,0,0,0.35)); }
.pack-name { font-weight: 900; font-size: 13px; letter-spacing: 0.14em; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,0.4); margin-top: 6px; }
.pack-twist { position: absolute; top: -10px; right: -8px; z-index: 3; background: #ffd23f; color: #1a1338; font-size: 9px; font-weight: 900; letter-spacing: 0.1em; padding: 3px 7px; border-radius: 999px; border: 2px solid #1a1338; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.pack.tearing .pack-twist { animation: tearOff 0.45s ease-in forwards; }
/* Jumbo: five cards in the row */
.cards-row.five { gap: 5px; }
.cards-row.five .card3 { width: 64px; height: 138px; }
.cards-row.five .card-face { padding: 6px 3px; gap: 3px; }
.cards-row.five .card-icon { font-size: 22px; }
.cards-row.five .card-name { font-size: 9.5px; }
.cards-row.five .card-rarity { font-size: 7px; letter-spacing: 0.08em; }
.cards-row.five .card-desc { font-size: 8.5px; line-height: 1.2; }
.cards-row.five .card-back { font-size: 8px; }
.pack .pack-body { filter: hue-rotate(var(--hue, 0deg)); }
.pack.dismissed { animation: packDismiss 0.4s ease-in forwards; }
@keyframes packDismiss { to { opacity: 0; transform: translateY(24px) scale(0.85); } }
.pack-body { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(135deg, #5b3fd6 0%, #b56bff 30%, #ffd23f 50%, #3ddc84 70%, #3d8bff 100%); background-size: 300% 300%; animation: foil 3s linear infinite; box-shadow: 0 12px 30px rgba(0,0,0,0.55), inset 0 0 0 3px rgba(255,255,255,0.25); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.pack-top { position: absolute; left: -4px; right: -4px; top: -6px; height: 30px; background: #f2f0ff; z-index: 2; clip-path: polygon(0 0, 100% 0, 100% 55%, 90% 100%, 80% 55%, 70% 100%, 60% 55%, 50% 100%, 40% 55%, 30% 100%, 20% 55%, 10% 100%, 0 55%); }
.pack-logo { font-weight: 900; font-size: 24px; letter-spacing: 0.1em; color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,0.4); }
.pack.tearing { animation: none; }
.pack.tearing .pack-top { animation: tearOff 0.45s ease-in forwards; }
.pack.tearing .pack-body { animation: packDrop 0.45s ease-in forwards; }
@keyframes packWobble { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-6px); } }
@keyframes foil { 0% { background-position: 0% 0%; } 100% { background-position: 100% 100%; } }
@keyframes tearOff { to { transform: translateY(-90px) rotate(-14deg); opacity: 0; } }
@keyframes packDrop { to { transform: translateY(50px) scale(0.85); opacity: 0; } }

.cards-row { display: flex; gap: 8px; justify-content: center; align-items: stretch; }
.card3 { perspective: 700px; width: 108px; height: 176px; border: 0; background: none; padding: 0; cursor: pointer; opacity: 0; animation: cardRise 0.45s ease-out forwards; animation-delay: var(--d, 0ms); }
.card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); animation: flipIn 0.55s ease-out forwards; animation-delay: calc(var(--d, 0ms) + 0.35s); }
.card-face, .card-back { position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.card-back { transform: rotateY(180deg); background: repeating-linear-gradient(45deg, #2a1d5c 0 8px, #3b2a7a 8px 16px); border: 2px solid #5b4aa8; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 11px; letter-spacing: 0.15em; color: #ffd23f; }
.card-face { background: #221a4a; border: 2px solid #3b2f78; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px 6px; text-align: center; }
.card-face.uncommon { border-color: #3d8bff; box-shadow: 0 0 14px rgba(61,139,255,0.35); }
.card-face.rare { border-color: #ffd23f; box-shadow: 0 0 18px rgba(255,210,63,0.5); }
.card-icon { font-size: 30px; line-height: 1; }
.card-name { font-weight: 800; font-size: 12px; color: #fff; }
.card-rarity { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: #8f87b8; }
.card-face.uncommon .card-rarity { color: #3d8bff; } .card-face.rare .card-rarity { color: #ffd23f; }
.card-desc { font-size: 11px; line-height: 1.25; color: #c7c0ea; }
.card3.instant { animation: none; opacity: 1; }
.card3.instant .card-inner { animation: none; transform: rotateY(0deg); }
.card3.picked { animation: pickPop 0.5s ease-out forwards; z-index: 2; }
.card3.picked .card-face { box-shadow: 0 0 26px rgba(255,255,255,0.6); border-color: #fff; }
.card3.dismissed { animation: dismiss 0.4s ease-in forwards; }
@keyframes cardRise { from { opacity: 0; transform: translateY(80px) scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes flipIn { from { transform: rotateY(180deg); } to { transform: rotateY(0deg); } }
@keyframes pickPop { 0% { opacity: 1; transform: none; } 50% { transform: scale(1.16); } 100% { opacity: 1; transform: scale(1.08); } }
@keyframes dismiss { from { opacity: 1; } to { opacity: 0; transform: translateY(30px) scale(0.8); } }

/* ---------- collection ---------- */
.collection { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 52vh; overflow-y: auto; margin: 10px 0 4px; }
.mini { border-radius: 10px; background: #221a4a; border: 2px solid #3b2f78; padding: 8px 6px; text-align: center; font-size: 10px; line-height: 1.25; color: #c7c0ea; }
.mini.uncommon { border-color: #3d8bff; } .mini.rare { border-color: #ffd23f; }
.mini .card-icon { font-size: 22px; }
.mini b { display: block; color: #fff; font-size: 11px; margin: 3px 0 2px; }
.mini .count { color: #ffd23f; }
button.big.secondary { background: #221a4a; color: #c7c0ea; box-shadow: 0 4px 0 #15102b; border: 2px solid #3b2f78; }