/* SPIDERVERSES CARDS: trading cards printed on a comic page. Same family as daily / rank / draft / radio. */
:root {
  --paper: #f3ecda; --paper2: #e9e0c8; --card: #fffaf0; --ink: #141210; --red: #e3262f; --cyan: #1fb7d6; --yellow: #ffe14d; --blue: #2b59c3; --pink: #ff2bd6; --gold: #ffb81f; --mute: #6d6556;
  --display: 'Bangers', Impact, sans-serif; --marker: 'Permanent Marker', cursive; --mono: 'Space Mono', monospace; --body: 'Comic Neue', 'Comic Sans MS', sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); font: 700 16px/1.45 var(--body); overflow-x: clip;
  background: radial-gradient(circle, #0000001c 1px, transparent 1.6px) 0 0 / 6px 6px, var(--paper); }
a { color: var(--blue); }
button { font: inherit; cursor: pointer; color: inherit; }
input { font: inherit; }
.ic { width: 1em; height: 1em; vertical-align: -.14em; flex-shrink: 0; }
[hidden] { display: none !important; }

/* masthead */
.top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 16px; padding: 10px 22px; background: var(--ink); color: var(--paper); border-bottom: 5px solid var(--red); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--paper); text-decoration: none; flex-shrink: 0; }
.brand .mark { display: inline-flex; color: var(--red); filter: drop-shadow(2px 2px 0 #000); } .brand .mark .ic { width: 34px; height: 34px; }
.brand span:last-child { font-family: var(--display); font-size: 30px; letter-spacing: .04em; line-height: 1; text-shadow: -2px 0 var(--cyan), 2px 0 var(--red); }
.brand b { font-family: var(--marker); font-weight: 400; font-size: 20px; color: var(--yellow); text-shadow: none; margin-left: 4px; rotate: -4deg; display: inline-block; }
.nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.nav a, .nav button { display: inline-flex; gap: 6px; align-items: center; font: 400 19px/1 var(--display); letter-spacing: .05em; padding: 7px 11px 5px; color: var(--paper); text-decoration: none; border: 2px solid transparent; background: none; }
.nav a:hover, .nav button:hover { border-color: #ffffff44; }
.nav a.on { background: var(--yellow); color: var(--ink); border-color: var(--yellow); box-shadow: 3px 3px 0 var(--red); }
.nav .who { color: var(--yellow); }

main { max-width: 1240px; margin: 0 auto; padding: 22px 22px 40px; }
.loading { font-family: var(--display); font-size: 26px; padding: 40px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 3px solid var(--ink); background: var(--card); color: var(--ink); font: 400 20px/1 var(--display); letter-spacing: .05em;
  padding: .45em .8em .35em; text-decoration: none; box-shadow: 4px 4px 0 var(--ink); transition: translate .08s, box-shadow .08s; }
.btn:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ink); }
.btn:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.btn.red { background: var(--red); color: #fff; } .btn.x { background: var(--ink); color: #fff; } .btn.y { background: var(--yellow); }
.btn:disabled { opacity: .45; cursor: not-allowed; translate: none; }
.btn.sm { font-size: 16px; padding: .4em .65em .3em; box-shadow: 3px 3px 0 var(--ink); } .btn.big { font-size: 30px; padding: .4em 1.1em .3em; }
.kicker { display: inline-block; font: 700 11px var(--mono); letter-spacing: .18em; background: var(--yellow); border: 3px solid var(--ink); padding: 4px 10px 3px; box-shadow: 3px 3px 0 var(--ink); rotate: -2deg; }
h1.big { margin: 12px 0 6px; font: 400 clamp(46px, 7.4vw, 96px)/.86 var(--display); color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: -4px 0 var(--cyan), 4px 0 var(--red), 7px 7px 0 var(--ink); }
.lede { margin: 6px 0 0; max-width: 620px; font-size: 18px; }
.panel { background: var(--card); border: 4px solid var(--ink); box-shadow: 7px 7px 0 var(--ink); padding: 18px; }
.panel h2 { margin: 0 0 10px; font: 400 30px/1 var(--display); letter-spacing: .04em; }
.hint { margin: 0; font: 700 12px var(--mono); color: var(--mute); }

/* ========== THE CARD (v2: full-bleed art, Spider-Verse print) ========== */
/* size knob: --w. Inside, everything is in em, and 1em = 1/15 of the card's real width (container units). */
.card { --w: 220px; --rc: #e9e0c8; --rc2: #fffaf0; position: relative; width: var(--w); aspect-ratio: 5 / 7; container-type: inline-size; flex-shrink: 0;
  border-radius: 12px; transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .25s, filter .25s; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); box-shadow: 4px 5px 0 var(--ink); }
.card > * { font-size: calc(100cqw / 15); }
.card.tilting { transition: transform .06s linear, box-shadow .25s; }
.card .cf { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--ink); border: .2em solid var(--ink);
  box-shadow: inset 0 0 0 .28em var(--rc), inset 0 0 0 .42em var(--ink); }
/* the art fills the card */
.card .art { position: absolute; inset: .42em; overflow: hidden; border-radius: 6px; background: var(--ink); }
.card .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.card .art img.ca, .card .art img.cb { opacity: 0; mix-blend-mode: screen; }
/* print: halftone dots over the whole picture, darker toward the bottom for the text */
.card .art::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(circle, #00000040 1px, transparent 1.3px) 0 0 / 3px 3px; mix-blend-mode: multiply; }
.card .art::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #0000005c 0, transparent 22%, transparent 46%, #0b0908cc 70%, #0b0908f2 100%); }
/* spider-web hanging from the top-right corner */
.card .web { position: absolute; top: .42em; right: .42em; width: 58%; aspect-ratio: 1; z-index: 3; pointer-events: none; opacity: .5; mix-blend-mode: screen;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M100.0 0.0L100.0 135.0M100.0 0.0L65.1 130.4M100.0 0.0L32.5 116.9M100.0 0.0L4.5 95.5M100.0 0.0L-16.9 67.5M100.0 0.0L-30.4 34.9M100.0 0.0L-35.0 0.0M100.0 21.9Q97.7 17.8 94.3 21.2Q93.1 16.6 89.0 19.0Q89.1 14.3 84.5 15.5Q85.7 10.9 81.0 11.0Q83.4 6.9 78.8 5.7Q82.2 2.3 78.1 0.0M100.0 41.8Q95.5 33.9 89.2 40.3Q86.9 31.6 79.1 36.2Q79.2 27.2 70.5 29.5Q72.8 20.8 63.8 20.9Q68.4 13.1 59.7 10.8Q66.1 4.5 58.2 0.0M100.0 60.9Q93.5 49.5 84.2 58.9Q80.9 46.2 69.5 52.8Q69.6 39.6 56.9 43.1Q60.4 30.4 47.2 30.5Q53.8 19.1 41.1 15.8Q50.5 6.5 39.1 0.0M100.0 86.0Q90.8 70.0 77.7 83.1Q73.0 65.2 57.0 74.5Q57.0 56.0 39.2 60.8Q44.0 43.0 25.5 43.0Q34.8 27.0 16.9 22.3Q30.0 9.2 14.0 0.0M100.0 108.8Q88.4 88.5 71.8 105.1Q65.8 82.5 45.6 94.3Q45.7 70.8 23.0 77.0Q29.2 54.3 5.7 54.4Q17.5 34.2 -5.1 28.2Q11.5 11.6 -8.8 0.0M100.0 123.0Q86.8 100.0 68.2 118.8Q61.4 93.2 38.5 106.5Q38.6 80.0 13.0 87.0Q20.0 61.4 -6.5 61.5Q6.8 38.6 -18.8 31.8Q-0.0 13.2 -23.0 0.0%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%220.9%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / contain no-repeat; border-top-right-radius: 6px; }
/* top: rarity badge + number */
.card .badge { position: absolute; top: .85em; left: .85em; z-index: 4; display: flex; align-items: center; gap: .3em; }
.card .badge .em { width: 2em; height: 2em; display: grid; place-items: center; border-radius: 50%; background: var(--rc); border: .14em solid var(--ink); box-shadow: .1em .1em 0 var(--ink); color: var(--ink); }
.card .badge .em .ic { width: 1.3em; height: 1.3em; }
.card .badge .rn { font: 400 .78em/1 var(--display); letter-spacing: .08em; color: var(--ink); background: var(--rc); border: .12em solid var(--ink); padding: .28em .5em .18em; box-shadow: .1em .1em 0 var(--ink); }
.card .no { position: absolute; top: 1.05em; right: .9em; z-index: 4; font: 700 .55em/1 var(--mono); letter-spacing: .08em; color: #fff; background: #0b0908d9; padding: .35em .5em .3em; border: .1em solid #ffffff55; }
/* the role / kind, on a strip of tape */
.card .tape { position: absolute; left: .7em; top: 52%; z-index: 4; font: 400 .78em/1 var(--display); letter-spacing: .1em; color: var(--ink); background: var(--yellow); padding: .3em .7em .2em; border: .12em solid var(--ink); rotate: -4deg; box-shadow: .1em .1em 0 var(--ink); }
/* bottom: name, who, stats */
.card .lo { position: absolute; left: .9em; right: .9em; bottom: 1.7em; z-index: 4; color: #fff; }
.card .nm { display: block; font: 400 1.75em/.92 var(--display); letter-spacing: .02em; color: #fff;
  text-shadow: -.06em 0 var(--cyan), .06em 0 var(--red), .08em .1em 0 #000; overflow-wrap: anywhere; }
.card .nm.long { font-size: 1.4em; }
.card .sub { display: block; margin-top: .35em; font: 700 .52em/1.2 var(--mono); letter-spacing: .04em; color: #e6dfcc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .st { display: flex; gap: .3em; margin-top: .5em; }
.card .st span { display: inline-flex; align-items: center; gap: .2em; font: 400 .95em/1 var(--display); color: #fff; background: #0b0908; border: .1em solid #ffffff40; padding: .2em .4em .1em; }
.card .st .ic { width: .85em; height: .85em; } .card .st .pow .ic { color: #ff5a62; } .card .st .iq .ic { color: #6aa2ff; } .card .st .agi .ic { color: #3ee0a0; }
.card .tx { display: block; margin-top: .45em; font: 700 .6em/1.25 var(--body); color: #f3ecda; }
/* the foot strip in the rarity color */
.card .ft { position: absolute; left: .42em; right: .42em; bottom: .42em; z-index: 4; height: 1.25em; display: flex; justify-content: space-between; align-items: center; padding: 0 .55em;
  background: var(--rc); color: var(--ink); font: 700 .48em/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; border-radius: 0 0 6px 6px; }
.card .ft .ic { width: 1.5em; height: 1.5em; }
.card .ft span { font-size: 1em; }
/* rarities */
.card.r-C { --rc: #e9e0c8; }
.card.r-R { --rc: #4b84ff; }
.card.r-E { --rc: #ff2bd6; }
.card.r-E .cf { box-shadow: inset 0 0 0 .28em var(--rc), inset 0 0 0 .42em var(--ink); background: radial-gradient(circle, #ff2bd6 1px, transparent 1.4px) 0 0 / 5px 5px, var(--ink); }
.card.r-L { --rc: #ffb81f; }
/* legendary: a frame of gold and red that turns */
.card.r-L .cf::before { content: ""; position: absolute; inset: -60%; z-index: 0; background: conic-gradient(from 0deg, #ffb81f, #e3262f, #ffe58a, #ffb81f, #e3262f, #ffe58a, #ffb81f); animation: turn 6s linear infinite; }
.card.r-L .cf { box-shadow: inset 0 0 0 .42em transparent; }
.card.r-L .art { z-index: 1; outline: .14em solid var(--ink); }
@keyframes turn { to { rotate: 360deg; } }
/* epic + legendary: the picture glitches every few seconds */
.card.r-E .art img.ca, .card.r-L .art img.ca { animation: gA 4.5s steps(1) infinite; filter: sepia(1) saturate(8) hue-rotate(-50deg); }
.card.r-E .art img.cb, .card.r-L .art img.cb { animation: gB 4.5s steps(1) infinite; filter: sepia(1) saturate(8) hue-rotate(150deg); }
.card.r-L .art img.ca, .card.r-L .art img.cb { animation-duration: 3.2s; }
@keyframes gA { 0%, 86%, 100% { opacity: 0; } 87% { opacity: .55; translate: -.25em 0; clip-path: inset(18% 0 58% 0); } 89% { opacity: .55; translate: .3em 0; clip-path: inset(62% 0 12% 0); } 91% { opacity: .5; translate: -.15em 0; clip-path: inset(40% 0 40% 0); } 93% { opacity: 0; } }
@keyframes gB { 0%, 86%, 100% { opacity: 0; } 87% { opacity: .5; translate: .25em 0; clip-path: inset(30% 0 46% 0); } 89% { opacity: .5; translate: -.3em 0; clip-path: inset(8% 0 80% 0); } 91% { opacity: .45; translate: .2em 0; clip-path: inset(70% 0 6% 0); } 93% { opacity: 0; } }
/* holo foil: a rainbow sheet that follows the light */
.card .holo, .card .glare { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; }
.card .glare { background: radial-gradient(circle at var(--mx) var(--my), #ffffff50, transparent 45%); opacity: 0; transition: opacity .3s; mix-blend-mode: soft-light; }
.card:hover .glare, .card.tilting .glare { opacity: 1; }
.card.foil .holo { mix-blend-mode: color-dodge; opacity: .6;
  background:
    repeating-linear-gradient(115deg, #ff2bd6 0%, #ffe14d 7%, #1fe0a5 14%, #1fb7d6 21%, #8a5cff 28%, #ff2bd6 35%) calc(var(--mx) * 1.5) calc(var(--my) * 1.5) / 300% 300%,
    radial-gradient(circle, #fff 0 .6px, transparent 1px) 0 0 / 7px 7px; }
.card.foil .holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 35%, #ffffffaa 48%, transparent 60%) calc(var(--mx) * 2 - 50%) 0 / 200% 100% no-repeat; mix-blend-mode: overlay; }
.card.foil:not(.tilting) .holo { animation: holoDrift 5s ease-in-out infinite alternate; }
@keyframes holoDrift { from { --mx: 20%; --my: 30%; } to { --mx: 80%; --my: 70%; } }
@property --mx { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --my { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
.card.foil { box-shadow: 4px 5px 0 var(--ink), 0 0 22px #ff2bd666; }
.foilTag, .newTag, .count { position: absolute; z-index: 8; font: 400 .85em/1 var(--display); letter-spacing: .08em; border: .14em solid var(--ink); box-shadow: .1em .1em 0 var(--ink); }
.foilTag { top: 3.2em; right: -.45em; padding: .3em .5em .2em; color: var(--ink); background: linear-gradient(115deg, #ff9df0, #ffe14d, #8ff5d0, #9ad9ff); rotate: 8deg; }
.newTag { top: -.6em; left: -.5em; padding: .3em .55em .2em; background: var(--red); color: #fff; rotate: -10deg; }
.count { bottom: -.6em; right: -.5em; padding: .3em .5em .15em; background: var(--ink); color: #fff; border-color: #fff; box-shadow: .1em .1em 0 var(--ink); }
/* the back: a web, the emblem, the name */
.card.back .cf { display: grid; place-items: center; align-content: center; gap: .5em; color: var(--paper); text-align: center;
  background: radial-gradient(circle at 50% 42%, #3a0b12, #0b0908 70%); box-shadow: inset 0 0 0 .28em var(--red), inset 0 0 0 .42em var(--ink); }
.card.back .cf::after { content: ""; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M50.0 50.0L125.0 50.0M50.0 50.0L119.3 78.7M50.0 50.0L103.0 103.0M50.0 50.0L78.7 119.3M50.0 50.0L50.0 125.0M50.0 50.0L21.3 119.3M50.0 50.0L-3.0 103.0M50.0 50.0L-19.3 78.7M50.0 50.0L-25.0 50.0M50.0 50.0L-19.3 21.3M50.0 50.0L-3.0 -3.0M50.0 50.0L21.3 -19.3M50.0 50.0L50.0 -25.0M50.0 50.0L78.7 -19.3M50.0 50.0L103.0 -3.0M50.0 50.0L119.3 21.3M58.3 50.0Q57.0 51.4 57.7 53.2Q55.9 54.0 55.9 55.9Q54.0 55.9 53.2 57.7Q51.4 57.0 50.0 58.3Q48.6 57.0 46.8 57.7Q46.0 55.9 44.1 55.9Q44.1 54.0 42.3 53.2Q43.0 51.4 41.7 50.0Q43.0 48.6 42.3 46.8Q44.1 46.0 44.1 44.1Q46.0 44.1 46.8 42.3Q48.6 43.0 50.0 41.7Q51.4 43.0 53.2 42.3Q54.0 44.1 55.9 44.1Q55.9 46.0 57.7 46.8Q57.0 48.6 58.3 50.0M65.8 50.0Q63.3 52.6 64.6 56.0Q61.3 57.5 61.2 61.2Q57.5 61.3 56.0 64.6Q52.6 63.3 50.0 65.8Q47.4 63.3 44.0 64.6Q42.5 61.3 38.8 61.2Q38.7 57.5 35.4 56.0Q36.7 52.6 34.2 50.0Q36.7 47.4 35.4 44.0Q38.7 42.5 38.8 38.8Q42.5 38.7 44.0 35.4Q47.4 36.7 50.0 34.2Q52.6 36.7 56.0 35.4Q57.5 38.7 61.2 38.8Q61.3 42.5 64.6 44.0Q63.3 47.4 65.8 50.0M73.0 50.0Q69.4 53.9 71.3 58.8Q66.5 61.0 66.3 66.3Q61.0 66.5 58.8 71.3Q53.9 69.4 50.0 73.0Q46.1 69.4 41.2 71.3Q39.0 66.5 33.7 66.3Q33.5 61.0 28.7 58.8Q30.6 53.9 27.0 50.0Q30.6 46.1 28.7 41.2Q33.5 39.0 33.7 33.7Q39.0 33.5 41.2 28.7Q46.1 30.6 50.0 27.0Q53.9 30.6 58.8 28.7Q61.0 33.5 66.3 33.7Q66.5 39.0 71.3 41.2Q69.4 46.1 73.0 50.0M82.5 50.0Q77.5 55.5 80.1 62.5Q73.3 65.6 73.0 73.0Q65.6 73.3 62.5 80.1Q55.5 77.5 50.0 82.5Q44.5 77.5 37.5 80.1Q34.4 73.3 27.0 73.0Q26.7 65.6 19.9 62.5Q22.5 55.5 17.5 50.0Q22.5 44.5 19.9 37.5Q26.7 34.4 27.0 27.0Q34.4 26.7 37.5 19.9Q44.5 22.5 50.0 17.5Q55.5 22.5 62.5 19.9Q65.6 26.7 73.0 27.0Q73.3 34.4 80.1 37.5Q77.5 44.5 82.5 50.0M91.2 50.0Q84.7 56.9 88.0 65.8Q79.4 69.7 79.1 79.1Q69.7 79.4 65.8 88.0Q56.9 84.7 50.0 91.2Q43.1 84.7 34.2 88.0Q30.3 79.4 20.9 79.1Q20.6 69.7 12.0 65.8Q15.3 56.9 8.8 50.0Q15.3 43.1 12.0 34.2Q20.6 30.3 20.9 20.9Q30.3 20.6 34.2 12.0Q43.1 15.3 50.0 8.8Q56.9 15.3 65.8 12.0Q69.7 20.6 79.1 20.9Q79.4 30.3 88.0 34.2Q84.7 43.1 91.2 50.0M96.5 50.0Q89.2 57.8 93.0 67.8Q83.3 72.2 82.9 82.9Q72.2 83.3 67.8 93.0Q57.8 89.2 50.0 96.5Q42.2 89.2 32.2 93.0Q27.8 83.3 17.1 82.9Q16.7 72.2 7.0 67.8Q10.8 57.8 3.5 50.0Q10.8 42.2 7.0 32.2Q16.7 27.8 17.1 17.1Q27.8 16.7 32.2 7.0Q42.2 10.8 50.0 3.5Q57.8 10.8 67.8 7.0Q72.2 16.7 82.9 17.1Q83.3 27.8 93.0 32.2Q89.2 42.2 96.5 50.0M104.5 50.0Q95.9 59.1 100.3 70.8Q88.9 76.0 88.5 88.5Q76.0 88.9 70.8 100.3Q59.1 95.9 50.0 104.5Q40.9 95.9 29.2 100.3Q24.0 88.9 11.5 88.5Q11.1 76.0 -0.3 70.8Q4.1 59.1 -4.5 50.0Q4.1 40.9 -0.3 29.2Q11.1 24.0 11.5 11.5Q24.0 11.1 29.2 -0.3Q40.9 4.1 50.0 -4.5Q59.1 4.1 70.8 -0.3Q76.0 11.1 88.5 11.5Q88.9 24.0 100.3 29.2Q95.9 40.9 104.5 50.0M116.0 50.0Q105.7 61.1 111.0 75.3Q97.2 81.5 96.7 96.7Q81.5 97.2 75.3 111.0Q61.1 105.7 50.0 116.0Q38.9 105.7 24.7 111.0Q18.5 97.2 3.3 96.7Q2.8 81.5 -11.0 75.3Q-5.7 61.1 -16.0 50.0Q-5.7 38.9 -11.0 24.7Q2.8 18.5 3.3 3.3Q18.5 2.8 24.7 -11.0Q38.9 -5.7 50.0 -16.0Q61.1 -5.7 75.3 -11.0Q81.5 2.8 96.7 3.3Q97.2 18.5 111.0 24.7Q105.7 38.9 116.0 50.0M122.9 50.0Q111.5 62.2 117.4 77.9Q102.2 84.9 101.6 101.6Q84.9 102.2 77.9 117.4Q62.2 111.5 50.0 122.9Q37.8 111.5 22.1 117.4Q15.1 102.2 -1.6 101.6Q-2.2 84.9 -17.4 77.9Q-11.5 62.2 -22.9 50.0Q-11.5 37.8 -17.4 22.1Q-2.2 15.1 -1.6 -1.6Q15.1 -2.2 22.1 -17.4Q37.8 -11.5 50.0 -22.9Q62.2 -11.5 77.9 -17.4Q84.9 -2.2 101.6 -1.6Q102.2 15.1 117.4 22.1Q111.5 37.8 122.9 50.0%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%220.45%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / 135% no-repeat; opacity: .32; pointer-events: none; }
.card.back .cf > * { position: relative; z-index: 1; }
.card.back .cf .em { width: 4.6em; height: 4.6em; display: grid; place-items: center; border-radius: 50%; background: var(--red); border: .2em solid var(--ink); box-shadow: 0 0 0 .2em #fff3, .15em .15em 0 #000; color: var(--ink); }
.card.back .cf .em .ic { width: 3.2em; height: 3.2em; }
.card.back .cf b { font: 400 1.45em/.9 var(--display); letter-spacing: .06em; text-shadow: -.06em 0 var(--cyan), .06em 0 var(--red), .08em .08em 0 #000; }
.card.back .cf small { font: 700 .5em var(--mono); letter-spacing: .24em; color: #cfc6b0; }
/* not collected yet: the real card, see-through and grey */
.card.ghost { box-shadow: none; filter: grayscale(1) contrast(.85); opacity: .32; cursor: default; }
.card.ghost .art img.ca, .card.ghost .art img.cb, .card.ghost .cf::before { animation: none; }
.slot { position: relative; }
.slot .lock { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 9; white-space: nowrap; font: 400 15px/1 var(--display); letter-spacing: .08em; color: var(--ink); background: var(--paper); border: 3px solid var(--ink); padding: 5px 9px 3px; box-shadow: 3px 3px 0 var(--ink); rotate: -4deg; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .card .art img.ca, .card .art img.cb, .card.r-L .cf::before, .card.foil .holo { animation: none !important; } }

/* ========== HOME ========== */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: center; margin-bottom: 26px; }
.fan { position: relative; width: 380px; height: 330px; }
.fan .card { --w: 170px; position: absolute; top: 20px; }
.fan .card:nth-child(1) { left: 0; rotate: -14deg; top: 50px; } .fan .card:nth-child(2) { left: 70px; rotate: -5deg; top: 20px; } .fan .card:nth-child(3) { left: 140px; rotate: 5deg; top: 14px; } .fan .card:nth-child(4) { left: 210px; rotate: 14deg; top: 40px; }
.start { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.start input { font: 400 26px/1 var(--display); letter-spacing: .03em; border: 3px solid var(--ink); background: #fff; padding: 10px 12px 6px; width: min(320px, 100%); box-shadow: 4px 4px 0 var(--ink); }
.today { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 34px; align-items: center; margin-bottom: 30px; }
.statrow { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; }
.stat { background: #fff; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); padding: 6px 12px 5px; font: 700 11px var(--mono); letter-spacing: .1em; }
.stat b { display: block; font: 400 30px/1 var(--display); letter-spacing: .02em; }
.stat.fire b { color: var(--red); }
.timer { font: 400 54px/1 var(--display); letter-spacing: .04em; }

/* the pack */
.pack { --w: 250px; position: relative; width: var(--w); aspect-ratio: 5 / 7.6; border: 5px solid var(--ink); box-shadow: 9px 9px 0 var(--ink); cursor: pointer; padding: 0; overflow: hidden;
  background: linear-gradient(115deg, #2a2724, #141210 40%, #3b3631 55%, #141210 70%); transition: translate .12s, rotate .12s; color: #fff; display: block; }
.pack:hover { translate: -3px -4px; rotate: -1.5deg; }
.pack .crimp { position: absolute; left: 0; right: 0; height: 18px; background: repeating-linear-gradient(90deg, #ffffff22 0 6px, transparent 6px 12px), var(--red); border-bottom: 3px solid var(--ink); z-index: 2; }
.pack .crimp.t { top: 0; } .pack .crimp.b { bottom: 0; border-top: 3px solid var(--ink); border-bottom: 0; }
.pack .win { position: absolute; left: 14px; right: 14px; top: 34px; bottom: 112px; border: 4px solid #fff; overflow: hidden; background: #000; }
.pack .win img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2); }
.pack .win::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, #ffffff40 45%, transparent 60%) -100% 0 / 250% 100% no-repeat; animation: sheen 3.2s ease-in-out infinite; }
@keyframes sheen { 60%, 100% { background-position: 200% 0; } }
.pack .lbl { position: absolute; left: 0; right: 0; bottom: 26px; text-align: center; }
.pack .lbl b { display: block; font: 400 34px/.9 var(--display); letter-spacing: .03em; text-shadow: -2px 0 var(--cyan), 2px 0 var(--red), 3px 3px 0 #000; }
.pack .lbl small { display: inline-block; margin-top: 6px; font: 700 10px var(--mono); letter-spacing: .18em; color: var(--ink); background: var(--yellow); padding: 3px 8px 2px; }
.pack .tap { position: absolute; top: 46%; left: 50%; translate: -50% -50%; z-index: 3; font: 400 26px/1 var(--display); letter-spacing: .08em; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); padding: 8px 14px 4px; box-shadow: 4px 4px 0 var(--ink); rotate: -6deg; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { translate: -50% -58%; } }
.pack.done { filter: grayscale(1) brightness(.8); cursor: default; } .pack.done:hover { translate: none; rotate: none; } .pack.done .tap { display: none; }

/* opening: the stage */
.stage { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow: auto;
  background: radial-gradient(circle, #ffffff0d 1px, transparent 1.5px) 0 0 / 7px 7px, radial-gradient(ellipse at 50% 40%, #3a0b12, #0b0a09 70%); }
.stage::before { content: ""; position: fixed; inset: -10%; background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Cpath d=%22M50.0 50.0L125.0 50.0M50.0 50.0L119.3 78.7M50.0 50.0L103.0 103.0M50.0 50.0L78.7 119.3M50.0 50.0L50.0 125.0M50.0 50.0L21.3 119.3M50.0 50.0L-3.0 103.0M50.0 50.0L-19.3 78.7M50.0 50.0L-25.0 50.0M50.0 50.0L-19.3 21.3M50.0 50.0L-3.0 -3.0M50.0 50.0L21.3 -19.3M50.0 50.0L50.0 -25.0M50.0 50.0L78.7 -19.3M50.0 50.0L103.0 -3.0M50.0 50.0L119.3 21.3M58.3 50.0Q57.0 51.4 57.7 53.2Q55.9 54.0 55.9 55.9Q54.0 55.9 53.2 57.7Q51.4 57.0 50.0 58.3Q48.6 57.0 46.8 57.7Q46.0 55.9 44.1 55.9Q44.1 54.0 42.3 53.2Q43.0 51.4 41.7 50.0Q43.0 48.6 42.3 46.8Q44.1 46.0 44.1 44.1Q46.0 44.1 46.8 42.3Q48.6 43.0 50.0 41.7Q51.4 43.0 53.2 42.3Q54.0 44.1 55.9 44.1Q55.9 46.0 57.7 46.8Q57.0 48.6 58.3 50.0M65.8 50.0Q63.3 52.6 64.6 56.0Q61.3 57.5 61.2 61.2Q57.5 61.3 56.0 64.6Q52.6 63.3 50.0 65.8Q47.4 63.3 44.0 64.6Q42.5 61.3 38.8 61.2Q38.7 57.5 35.4 56.0Q36.7 52.6 34.2 50.0Q36.7 47.4 35.4 44.0Q38.7 42.5 38.8 38.8Q42.5 38.7 44.0 35.4Q47.4 36.7 50.0 34.2Q52.6 36.7 56.0 35.4Q57.5 38.7 61.2 38.8Q61.3 42.5 64.6 44.0Q63.3 47.4 65.8 50.0M73.0 50.0Q69.4 53.9 71.3 58.8Q66.5 61.0 66.3 66.3Q61.0 66.5 58.8 71.3Q53.9 69.4 50.0 73.0Q46.1 69.4 41.2 71.3Q39.0 66.5 33.7 66.3Q33.5 61.0 28.7 58.8Q30.6 53.9 27.0 50.0Q30.6 46.1 28.7 41.2Q33.5 39.0 33.7 33.7Q39.0 33.5 41.2 28.7Q46.1 30.6 50.0 27.0Q53.9 30.6 58.8 28.7Q61.0 33.5 66.3 33.7Q66.5 39.0 71.3 41.2Q69.4 46.1 73.0 50.0M82.5 50.0Q77.5 55.5 80.1 62.5Q73.3 65.6 73.0 73.0Q65.6 73.3 62.5 80.1Q55.5 77.5 50.0 82.5Q44.5 77.5 37.5 80.1Q34.4 73.3 27.0 73.0Q26.7 65.6 19.9 62.5Q22.5 55.5 17.5 50.0Q22.5 44.5 19.9 37.5Q26.7 34.4 27.0 27.0Q34.4 26.7 37.5 19.9Q44.5 22.5 50.0 17.5Q55.5 22.5 62.5 19.9Q65.6 26.7 73.0 27.0Q73.3 34.4 80.1 37.5Q77.5 44.5 82.5 50.0M91.2 50.0Q84.7 56.9 88.0 65.8Q79.4 69.7 79.1 79.1Q69.7 79.4 65.8 88.0Q56.9 84.7 50.0 91.2Q43.1 84.7 34.2 88.0Q30.3 79.4 20.9 79.1Q20.6 69.7 12.0 65.8Q15.3 56.9 8.8 50.0Q15.3 43.1 12.0 34.2Q20.6 30.3 20.9 20.9Q30.3 20.6 34.2 12.0Q43.1 15.3 50.0 8.8Q56.9 15.3 65.8 12.0Q69.7 20.6 79.1 20.9Q79.4 30.3 88.0 34.2Q84.7 43.1 91.2 50.0M96.5 50.0Q89.2 57.8 93.0 67.8Q83.3 72.2 82.9 82.9Q72.2 83.3 67.8 93.0Q57.8 89.2 50.0 96.5Q42.2 89.2 32.2 93.0Q27.8 83.3 17.1 82.9Q16.7 72.2 7.0 67.8Q10.8 57.8 3.5 50.0Q10.8 42.2 7.0 32.2Q16.7 27.8 17.1 17.1Q27.8 16.7 32.2 7.0Q42.2 10.8 50.0 3.5Q57.8 10.8 67.8 7.0Q72.2 16.7 82.9 17.1Q83.3 27.8 93.0 32.2Q89.2 42.2 96.5 50.0M104.5 50.0Q95.9 59.1 100.3 70.8Q88.9 76.0 88.5 88.5Q76.0 88.9 70.8 100.3Q59.1 95.9 50.0 104.5Q40.9 95.9 29.2 100.3Q24.0 88.9 11.5 88.5Q11.1 76.0 -0.3 70.8Q4.1 59.1 -4.5 50.0Q4.1 40.9 -0.3 29.2Q11.1 24.0 11.5 11.5Q24.0 11.1 29.2 -0.3Q40.9 4.1 50.0 -4.5Q59.1 4.1 70.8 -0.3Q76.0 11.1 88.5 11.5Q88.9 24.0 100.3 29.2Q95.9 40.9 104.5 50.0M116.0 50.0Q105.7 61.1 111.0 75.3Q97.2 81.5 96.7 96.7Q81.5 97.2 75.3 111.0Q61.1 105.7 50.0 116.0Q38.9 105.7 24.7 111.0Q18.5 97.2 3.3 96.7Q2.8 81.5 -11.0 75.3Q-5.7 61.1 -16.0 50.0Q-5.7 38.9 -11.0 24.7Q2.8 18.5 3.3 3.3Q18.5 2.8 24.7 -11.0Q38.9 -5.7 50.0 -16.0Q61.1 -5.7 75.3 -11.0Q81.5 2.8 96.7 3.3Q97.2 18.5 111.0 24.7Q105.7 38.9 116.0 50.0M122.9 50.0Q111.5 62.2 117.4 77.9Q102.2 84.9 101.6 101.6Q84.9 102.2 77.9 117.4Q62.2 111.5 50.0 122.9Q37.8 111.5 22.1 117.4Q15.1 102.2 -1.6 101.6Q-2.2 84.9 -17.4 77.9Q-11.5 62.2 -22.9 50.0Q-11.5 37.8 -17.4 22.1Q-2.2 15.1 -1.6 -1.6Q15.1 -2.2 22.1 -17.4Q37.8 -11.5 50.0 -22.9Q62.2 -11.5 77.9 -17.4Q84.9 -2.2 101.6 -1.6Q102.2 15.1 117.4 22.1Q111.5 37.8 122.9 50.0%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%220.45%22 stroke-linecap=%22round%22/%3E%3C/svg%3E") center / min(1500px, 170vmax) no-repeat; opacity: .09; pointer-events: none; }
.stage .rays { position: fixed; inset: -50%; background: repeating-conic-gradient(from 0deg, #ffffff0c 0 8deg, transparent 8deg 16deg); animation: spin 40s linear infinite; pointer-events: none; transition: filter .4s; }
.stage .rays.hot { background: repeating-conic-gradient(from 0deg, var(--rayc, #ffb81f44) 0 8deg, transparent 8deg 16deg); animation-duration: 14s; }
@keyframes spin { to { rotate: 360deg; } }
.stage.shake { animation: shake .45s; }
@keyframes shake { 15% { translate: -8px 4px; } 30% { translate: 7px -5px; } 45% { translate: -5px -3px; } 60% { translate: 4px 5px; } 75% { translate: -2px 2px; } }
.stage .pack { --w: min(280px, 60vw); position: relative; cursor: pointer; transition: translate .7s cubic-bezier(.5, -.3, .7, 1), opacity .5s; }
.stage .pack .crimp.t { transition: translate .45s cubic-bezier(.3, 1.4, .5, 1), rotate .45s; }
.stage.torn .pack .crimp.t { translate: 60px -120px; rotate: 25deg; }
.stage.out .pack { translate: 0 120vh; opacity: 0; }
.stage .hintTop { position: absolute; top: 22px; left: 0; right: 0; z-index: 2; text-align: center; color: #fff; font: 400 28px/1 var(--display); letter-spacing: .08em; text-shadow: -2px 0 var(--cyan), 2px 0 var(--red), 3px 3px 0 #000; pointer-events: none; }
.box { position: relative; z-index: 1; display: grid; justify-items: center; gap: 26px; padding: 80px 16px 40px; width: 100%; }
/* the five cards, face down, fanned out */
.fan5 { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px; max-width: 1180px; }
.fl { --w: clamp(150px, 17vw, 210px); position: relative; width: var(--w); aspect-ratio: 5 / 7; perspective: 1400px; cursor: pointer; background: none; border: 0; padding: 0;
  animation: dealIn .55s cubic-bezier(.2, 1.3, .4, 1) backwards; rotate: var(--tilt, 0deg); transition: translate .2s; }
.fl:nth-child(1) { --tilt: -6deg; animation-delay: .05s; } .fl:nth-child(2) { --tilt: -3deg; animation-delay: .15s; } .fl:nth-child(3) { --tilt: 0deg; animation-delay: .25s; }
.fl:nth-child(4) { --tilt: 3deg; animation-delay: .35s; } .fl:nth-child(5) { --tilt: 6deg; animation-delay: .45s; }
.fl:not(.shown):hover { translate: 0 -10px; }
@keyframes dealIn { from { translate: 0 70vh; rotate: 25deg; opacity: 0; } }
.fl .in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.3, 1.3, .5, 1); }
.fl.shown .in { transform: rotateY(180deg); }
.fl .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fl .face.front { transform: rotateY(180deg); }
.fl .face .card { --w: 100%; }
.fl .call { position: absolute; left: 50%; bottom: calc(100% + 8px); translate: -50% 0; z-index: 3; white-space: nowrap; font: 400 18px/1 var(--display); letter-spacing: .08em; color: var(--ink);
  padding: 5px 10px 3px; border: 3px solid #000; box-shadow: 3px 3px 0 #000; rotate: -3deg; opacity: 0; transition: opacity .2s .55s; }
.fl.shown .call { opacity: 1; }
.fl.shown.r-L .face.front .card { box-shadow: 0 0 0 3px #000, 0 0 46px 8px #ffb81fbb; }
.fl.shown.r-E .face.front .card { box-shadow: 0 0 0 3px #000, 0 0 40px 6px #ff2bd6aa; }
.fl.shown.isfoil .face.front .card { box-shadow: 0 0 0 3px #000, 0 0 40px 6px #8ff5d0aa; }
.fl.shown.r-L, .fl.shown.r-E { animation: pop .5s .4s; }
@keyframes pop { 40% { scale: 1.1; } }
.stageActs { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.stageActs .btn.ghostb { background: transparent; color: #fff; border-color: #fff; box-shadow: 4px 4px 0 #000; }
.tally { color: #fff; font: 700 13px var(--mono); letter-spacing: .14em; text-align: center; }
@media (max-width: 720px) {
  .fan5 { gap: 46px 14px; } .fl { --w: 40vw; } .fl:nth-child(n) { --tilt: 0deg; } .fl:nth-child(odd) { --tilt: -2deg; } .fl:nth-child(even) { --tilt: 2deg; }
  .fl .call { font-size: 13px; padding: 4px 7px 2px; bottom: calc(100% + 6px); }
  .box { padding-top: 70px; gap: 20px; }
}

/* binder */
.bhead { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 14px; }
.prog { flex: 1 1 320px; max-width: 520px; }
.prog .bar { height: 22px; border: 3px solid var(--ink); background: #fff; position: relative; box-shadow: 3px 3px 0 var(--ink); }
.prog .bar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(45deg, var(--red) 0 10px, #c81e27 10px 20px); }
.prog .bar b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 17px/1 var(--display); letter-spacing: .06em; color: var(--ink); mix-blend-mode: normal; text-shadow: 0 0 4px #fff, 0 0 4px #fff; }
.rbars { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; font: 700 11px var(--mono); }
.rbars span { display: inline-flex; gap: 5px; align-items: center; } .rbars i { width: 12px; height: 12px; border: 2px solid var(--ink); rotate: 45deg; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 16px; }
.chip { font: 400 18px/1 var(--display); letter-spacing: .05em; padding: 7px 12px 5px; border: 3px solid var(--ink); background: var(--card); box-shadow: 3px 3px 0 var(--ink); }
.chip.on { background: var(--ink); color: #fff; box-shadow: 3px 3px 0 var(--red); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 16px; }
.grid .slot { display: grid; justify-items: center; }
.grid .card { --w: 100%; width: 100%; max-width: 190px; cursor: pointer; }


/* dialog */
dialog { padding: 0; border: 5px solid var(--ink); background: var(--paper); color: var(--ink); width: min(720px, 94vw); max-height: 92vh; box-shadow: 14px 14px 0 #000a; }
dialog::backdrop { background: #141210e0; }
.close { position: absolute; top: 12px; right: 12px; z-index: 5; width: 42px; height: 42px; display: grid; place-items: center; border: 3px solid var(--ink); background: var(--paper); box-shadow: 3px 3px 0 var(--ink); }
.close .ic { width: 20px; height: 20px; }
.dl { padding: 22px; }
.dl h3 { margin: 0 0 12px; display: inline-block; font: 400 32px/1 var(--display); letter-spacing: .04em; background: var(--yellow); border: 3px solid var(--ink); padding: 6px 14px 2px; box-shadow: 4px 4px 0 var(--ink); rotate: -1deg; }
.zoom { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; }
.zoom .card { --w: 270px; }
.zoom .info b { display: block; font: 400 34px/1 var(--display); }
.zoom .info p { margin: 8px 0; }
.zoom .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.fuse { display: grid; gap: 10px; }
.fuse .fr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; background: #fff; border: 3px solid var(--ink); padding: 10px 12px; box-shadow: 3px 3px 0 var(--ink); }
.fuse .gm { width: 26px; height: 26px; border: 3px solid var(--ink); rotate: 45deg; }
.fuse b { font: 400 22px/1 var(--display); } .fuse small { display: block; font: 700 11px var(--mono); color: var(--mute); }
.url { font: 700 12px var(--mono); background: #fff; border: 2px dashed var(--ink); padding: 8px; word-break: break-all; margin: 10px 0 0; }
.tops { display: grid; gap: 6px; } .tops a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: #fff; border: 3px solid var(--ink); color: var(--ink); text-decoration: none; }
.tops a:hover { box-shadow: 3px 3px 0 var(--red); } .tops .rk { font: 400 22px/1 var(--display); } .tops b { font: 400 20px/1 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tops span { font: 700 12px var(--mono); }
.tops a.me { background: #fff6c9; }

/* share shots (1200x630, screenshotted by the Worker) */
#shot { position: fixed; left: 0; top: 0; width: 1200px; height: 630px; z-index: 999; overflow: hidden; background: radial-gradient(circle, #0000001f 1.2px, transparent 1.8px) 0 0 / 8px 8px, var(--paper); }
#shot .burst { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 30% 50%, #e3262f14 0 6deg, transparent 6deg 12deg); }
#shot .pos { position: absolute; }
#shot .tx { position: absolute; left: 520px; right: 50px; top: 70px; }
#shot .tx h1 { margin: 16px 0 10px; font: 400 76px/.9 var(--display); color: #fff; -webkit-text-stroke: 2px var(--ink); text-shadow: -4px 0 var(--cyan), 4px 0 var(--red), 7px 7px 0 var(--ink); }
#shot .tx p { font-size: 22px; margin: 0; }
#shot .url2 { position: absolute; right: 50px; bottom: 44px; font: 400 34px var(--display); letter-spacing: .03em; display: flex; gap: 10px; align-items: center; }
#shot .url2 .ic { width: 40px; height: 40px; color: var(--red); }

#toast { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 120; display: none; font: 400 19px var(--display); letter-spacing: .04em; background: var(--yellow); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 8px 16px 5px; white-space: nowrap; }
.foot { max-width: 1240px; margin: 10px auto 0; padding: 18px 22px 30px; border-top: 4px solid var(--ink); font-size: 13px; font-weight: 400; }
.foot p { margin: 6px 0; } .foot .note { color: var(--mute); }
.more { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; } .more b { font: 400 18px var(--display); letter-spacing: .04em; }

@media (max-width: 860px) {
  .hero, .today { grid-template-columns: 1fr; } .fan { width: 300px; height: 270px; margin: 0 auto; } .fan .card { --w: 140px; } .fan .card:nth-child(2) { left: 56px; } .fan .card:nth-child(3) { left: 112px; } .fan .card:nth-child(4) { left: 168px; }
  .today .pack { margin: 0 auto; }
  .zoom { grid-template-columns: 1fr; justify-items: center; text-align: center; } .zoom .acts { justify-content: center; }
}
@media (max-width: 720px) {
  .top { padding: 8px 12px; gap: 8px; } .brand span:last-child { font-size: 22px; } .brand b { font-size: 15px; } .brand .mark .ic { width: 26px; height: 26px; }
  .nav a, .nav button { font-size: 15px; padding: 5px 6px 3px; } .nav .lbl { display: none; }
  main { padding: 14px 12px 30px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .chips { gap: 6px; } .chip { font-size: 15px; padding: 6px 9px 4px; } .slot .lock { font-size: 12px; padding: 4px 6px 2px; }
  .sum .row .card { --w: 130px; }
  .timer { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { .stage .rays, .pack .tap, .pack .win::after { animation: none; } .card { transition: none; } }