/* The trophies, as they are. No card, no sleeve, no holder (Pierce, 2026-10-08: "let them just be there as they are"): the gold
   render fills the tile on its own charcoal backdrop, the name sits low over a soft scrim, the number under it. Tap turns it over for
   the quote. holo.js still writes the tilt (--rx --ry) and the pointer (--gx --gy); the render comes forward a little against the tilt,
   and that is all the motion there is. Overrides the sticker rules in fv.css. */
.sticker { --card-gold: #f2c56b; aspect-ratio: 2 / 3; }
.sticker .face { border-radius: 10px; }
.sticker .front, .sticker .back { padding: 0; background: #121216; clip-path: none; box-shadow: none; }
.sticker .sheet { filter: drop-shadow(calc(var(--sx, 0px)) calc(8px + var(--sy, 0px)) 14px rgba(0, 0, 0, .7)); }
.sticker .ink { border-radius: 10px; overflow: hidden; background: #121216; isolation: isolate; container-type: inline-size; }
.sticker .ink > i { position: absolute; inset: 0; pointer-events: none; }
/* what the holder had: gone */
.sticker .tun, .sticker .stars, .sticker .frame, .sticker .holo, .sticker .laser, .sticker .glare, .sticker .vee, .sticker .metal, .sticker .holo2, .sticker .diff, .sticker .glit { display: none; }
.sticker .front .pill { display: none; }
/* the trophy: the render fills the tile; the printed emblem stands in until its render is here */
.sticker .art { position: absolute; inset: 0; z-index: 1; display: block; padding: 0; transform: translate(calc(var(--gx, 0px) * -.12), calc(var(--gy, 0px) * -.12)) scale(1.03); }
.sticker .art .tro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sticker .art .emb { position: absolute; left: 22%; top: 20%; width: 56%; height: 56%; display: grid; place-items: center; margin: 0; background: radial-gradient(60% 60% at 50% 60%, #26262e, #121216 75%); border-radius: 50%; }
.sticker .art .emb svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .75)) sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(1.05); }
.sticker .ink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 36%; z-index: 2; background: linear-gradient(180deg, rgba(10, 10, 14, 0), rgba(10, 10, 14, .82) 70%); pointer-events: none; }
.sticker .nm { position: absolute; left: 7%; right: 7%; bottom: 9%; z-index: 3; margin: 0; text-align: center; font: 700 clamp(9px, 7.2cqw, 17px)/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #fff; -webkit-text-stroke: 0; paint-order: normal; text-shadow: 0 1px 2px #000, 0 2px 12px rgba(0, 0, 0, .8); text-wrap: balance; }
.sticker .no { position: absolute; left: 0; right: 0; bottom: 4.6%; z-index: 3; margin: 0; text-align: center; font: 500 clamp(6px, 3.8cqw, 9px)/1 var(--ui); letter-spacing: .18em; color: var(--card-gold); -webkit-text-stroke: 0; text-shadow: none; opacity: .9; }
/* the back: the quote in gold, the category as a kicker */
.sticker .back { background: linear-gradient(180deg, #1a1a22, #0e0e13); }
.sticker .back .ink { background: linear-gradient(180deg, #1a1a22, #0e0e13); }
.sticker .back .pill { position: absolute; left: 0; right: 0; top: 9%; z-index: 3; margin: 0; padding: 0; transform: none; border-radius: 0; background: none; box-shadow: none; text-align: center; color: var(--card-gold); font: 600 clamp(6.5px, 4.6cqw, 10px)/1 var(--ui); letter-spacing: .22em; text-transform: uppercase; max-width: none; white-space: normal; }
.sticker .back .in { position: absolute; inset: 18% 10% 9%; z-index: 2; width: auto; height: auto; border-radius: 0; padding: 0; background: none; box-shadow: none; display: flex; flex-direction: column; justify-content: center; text-align: center; container-type: inline-size; overflow: hidden; }
.sticker .back .bn { font: 700 clamp(8px, 6.6cqw, 14px)/1.1 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .06em; margin-bottom: .6em; }
.sticker .back q { display: block; margin: 0 0 auto; font: 500 clamp(8.5px, 7.4cqw, 14px)/1.4 var(--ui); quotes: '\201C' '\201D'; color: var(--card-gold); text-shadow: 0 1px 2px #000; text-wrap: pretty; }
.sticker .back .earn { font: 500 clamp(7px, 5.4cqw, 11px)/1.3 var(--ui); border-top: 1px solid rgba(242, 197, 107, .35); padding-top: .6em; margin-top: .6em; color: #fff; }
.sticker .back .earn .spon { display: inline-grid; margin-top: .5em; }
/* states */
.sticker.locked .ink { filter: grayscale(1) brightness(.55); }
.sticker.locked .art { opacity: .5; }
.sticker.got .ink { box-shadow: inset 0 0 0 2px var(--card-gold), inset 0 0 18px rgba(255, 200, 87, .45); }
.sticker.got .front { box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .sticker .art { transform: none; } }