/* Ventesima sessione: CSS dei cosmetici portato dal prototipo (sticker delle emoji, tag, cornici del profilo).
   Le animazioni hanno il prefisso cx- per non toccare quelle del gioco. */
.sticker { display: inline-block; position: relative; isolation: isolate; font: 400 17px/1 "Lilita One", "Noto Color Emoji", sans-serif; padding: 7px 10px 8px; border: 3px solid #111; border-radius: 12px;
  background: var(--c, #fff); color: var(--f, #111); box-shadow: 0 0 0 3px #fff, 0 4px 0 3px #111; max-width: 118px; text-align: center; line-height: 1.08; }
.sticker.bare { background: none; border: 0; box-shadow: none; padding: 0; font-size: 46px; max-width: none; white-space: nowrap; }
.sticker.big { background: none; border: 0; box-shadow: none; padding: 0; font-size: 56px; color: var(--f); -webkit-text-stroke: 3px #111; max-width: none; }
.flying .sticker { max-width: 150px; }
.sticker.sm { font-size: 14px; }
.sticker i, .sticker b { font-style: normal; display: inline-block; }
.a-wob { animation: cx-wob 1.2s ease-in-out infinite; }
.a-stamp { animation: cx-stamp 1.8s ease-in-out infinite; text-transform: uppercase; }
.a-float { animation: cx-float 2s ease-in-out infinite; }
.a-pulse { animation: cx-pulse 0.9s ease-in-out infinite; }
.a-rattle { animation: cx-rattle 0.4s linear infinite; }
.a-sink { animation: cx-sink 2s ease-in-out infinite; }
.a-pog { animation: cx-pog 1.1s ease-in-out infinite; }
.a-npc { font-family: "Press Start 2P", monospace; font-size: 10px; animation: cx-npc 2.4s steps(1) infinite; }
.a-shake { animation: cx-shake 0.18s linear infinite; }
.a-jelly { animation: cx-jelly 0.9s ease-in-out infinite; }
.a-sway { animation: cx-sway 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
.a-tilt { animation: cx-tilt 1.6s ease-in-out infinite; }
.a-beat { animation: cx-beat 1s ease-in-out infinite; }
.a-zoom { animation: cx-zoom 2.2s ease-in-out infinite; }
.a-look { animation: cx-look 1.6s ease-in-out infinite; }
.a-salute { animation: cx-salute 1.5s ease-in-out infinite; transform-origin: 20% 80%; }
.a-drop { animation: cx-dropfall 2.2s ease-in-out infinite; }
.a-glitch { animation: cx-glitchT 1.1s steps(2) infinite; }
.a-melt { animation: cx-melt 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.a-snap { animation: cx-snap 1.6s ease-in-out infinite; }
@keyframes cx-wob { 0%, 100% { transform: rotate(-6deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
@keyframes cx-stamp { 0%, 60%, 100% { transform: rotate(-8deg) scale(1); } 10% { transform: rotate(-8deg) scale(1.6); opacity: 0.2; } 20% { transform: rotate(-8deg) scale(0.92); opacity: 1; } }
@keyframes cx-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9px) rotate(3deg); } }
@keyframes cx-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
@keyframes cx-npc { 0% { transform: translateX(0); } 25% { transform: translateX(6px); } 50% { transform: translateX(0) scaleX(-1); } 75% { transform: translateX(-6px); } }
@keyframes cx-rattle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes cx-sink { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(6px) scaleY(0.85); } }
@keyframes cx-pog { 0%, 100% { transform: scale(1) rotate(0); } 30% { transform: scale(1.35) rotate(-10deg); } 60% { transform: scale(0.95) rotate(8deg); } }
@keyframes cx-shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-3px, 1px) rotate(-3deg); } 50% { transform: translate(2px, -2px) rotate(2deg); } 75% { transform: translate(-1px, 2px) rotate(-1deg); } }
@keyframes cx-jelly { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.25, 0.8); } 50% { transform: scale(0.85, 1.2); } 70% { transform: scale(1.08, 0.95); } }
@keyframes cx-sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes cx-tilt { 0%, 100% { transform: rotate(0); } 40%, 60% { transform: rotate(-14deg) translateX(-3px); } }
@keyframes cx-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } }
@keyframes cx-zoom { 0%, 55%, 100% { transform: scale(1); filter: none; } 62% { transform: scale(1.45); filter: drop-shadow(0 0 0 #000) brightness(0.6); } 75% { transform: scale(1.3); filter: brightness(0.8); } }
@keyframes cx-look { 0%, 100% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
@keyframes cx-salute { 0%, 60%, 100% { transform: rotate(0); } 70%, 85% { transform: rotate(-12deg); } }
@keyframes cx-dropfall { 0% { transform: translateY(-4px); } 50% { transform: translateY(10px) rotate(-10deg); } 100% { transform: translateY(-4px); } }
@keyframes cx-glitchT { 0%, 90%, 100% { text-shadow: none; transform: none; } 92% { text-shadow: -2px 0 #ff004c, 2px 0 #00e1ff; transform: translateX(2px); } 96% { text-shadow: 2px 0 #ff004c, -2px 0 #00e1ff; transform: translateX(-2px); } }
@keyframes cx-melt { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.15, 0.72); } }
@keyframes cx-snap { 0%, 70%, 100% { transform: scale(1); } 76% { transform: scale(1.3) rotate(-4deg); } 84% { transform: scale(0.95); } }
@keyframes cx-spin { to { transform: rotate(360deg); } }
@keyframes cx-blink { 50% { opacity: 0; } }
/* pezzi speciali */
.s67 b { font-size: 28px; color: #ffd23f; -webkit-text-stroke: 1px #111; }
.s67 b:first-child { animation: cx-up67 0.55s ease-in-out infinite alternate; }
.s67 b:last-child { animation: cx-up67 0.55s ease-in-out infinite alternate-reverse; }
.s67 i { font-size: 22px; margin: 0 4px; }
@keyframes cx-up67 { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
.aura::before { content: ""; position: absolute; inset: -20px; z-index: -1; border-radius: 50%; animation: cx-spin 5s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255, 200, 0, 0.6) 0 10deg, transparent 10deg 22deg); -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); }
.aura { animation: cx-pulse 1.4s ease-in-out infinite; }
.auraneg { animation: cx-sink 1.6s ease-in-out infinite; text-shadow: 0 0 6px #ff3b3b; }
.flipcard { display: inline-grid; perspective: 400px; }
.flipcard > * { grid-area: 1 / 1; backface-visibility: hidden; animation: cx-flipA 3.2s ease-in-out infinite; }
.flipcard > .f2 { animation-name: flipB; }
@keyframes cx-flipA { 0%, 40% { transform: rotateX(0); } 50%, 90% { transform: rotateX(180deg); } 100% { transform: rotateX(360deg); } }
@keyframes cx-flipB { 0%, 40% { transform: rotateX(-180deg); } 50%, 90% { transform: rotateX(0); } 100% { transform: rotateX(180deg); } }
.drip::after { content: ""; position: absolute; left: 50%; top: 88%; width: 9px; height: 11px; background: #ff8fb1; border: 2px solid #111; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; animation: cx-drip 1.4s ease-in infinite; }
@keyframes cx-drip { 0% { transform: translate(-50%, -4px) scale(0.3); opacity: 1; } 70% { transform: translate(-50%, 16px) scale(1); opacity: 1; } 100% { transform: translate(-50%, 26px) scale(0.8); opacity: 0; } }
.flash::after { content: ""; position: absolute; inset: -6px; background: #fff; border-radius: 14px; opacity: 0; animation: cx-flashA 1.6s steps(1) infinite; }
@keyframes cx-flashA { 0% { opacity: 0; } 70% { opacity: 0.95; } 78% { opacity: 0; } }
.search i { animation: cx-searchA 1.5s ease-in-out infinite; }
@keyframes cx-searchA { 0%, 100% { transform: translate(-5px, 0) rotate(-12deg); } 50% { transform: translate(5px, -3px) rotate(12deg); } }
.cardb { background: repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 3px, transparent 3px 7px), #c8995c; color: #3b2410; border-color: #5a3a1a; box-shadow: 0 0 0 3px #f3e3c8, 0 4px 0 3px #5a3a1a; animation: cx-wob 1.8s ease-in-out infinite; }
.cardb i { animation: cx-swing 0.6s ease-in-out infinite alternate; transform-origin: 30% 80%; }
@keyframes cx-swing { from { transform: rotate(-25deg); } to { transform: rotate(20deg); } }
.scan { background: #111; color: #ff3b3b; font: 400 9px/1.4 "Press Start 2P", monospace; overflow: hidden; padding: 9px 22px 8px 10px; }
.scan::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; top: -40%; background: linear-gradient(transparent, rgba(255,59,59,.55), transparent); animation: cx-scanA 1.2s linear infinite; }
.scan::before { content: ""; position: absolute; right: 7px; top: 50%; margin-top: -3px; width: 6px; height: 6px; border-radius: 50%; background: #ff3b3b; animation: cx-blink 0.6s steps(1) infinite; }
@keyframes cx-scanA { to { top: 110%; } }
.rose { position: relative; display: inline-block; font-size: 50px; line-height: 1; }
.rose > i { display: inline-block; font-style: normal; transform-origin: 50% 90%; animation: cx-droop 3s ease-in-out infinite; }
.rose em { position: absolute; top: 16px; left: 24px; width: 8px; height: 10px; background: #8e1b2a; border-radius: 80% 0 80% 0; opacity: 0; animation: cx-petal 3s ease-in infinite; }
.rose em:nth-of-type(2) { left: 16px; animation-delay: 0.75s; background: #a3263a; }
.rose em:nth-of-type(3) { left: 32px; animation-delay: 1.5s; background: #6b1420; }
.rose em:nth-of-type(4) { left: 21px; animation-delay: 2.25s; }
@keyframes cx-droop { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(14deg) translateY(2px); } }
@keyframes cx-petal { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(-16px, 44px) rotate(260deg); } }
.notes::after { content: "♪ ♫"; position: absolute; right: -8px; top: -14px; font: 400 15px "Lilita One"; color: #111; animation: cx-notesA 1.8s ease-out infinite; }
@keyframes cx-notesA { from { transform: translateY(8px); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-14px) rotate(10deg); opacity: 0; } }
.key { font: 400 30px "Lilita One"; width: 54px; height: 50px; display: inline-grid; place-items: center; background: linear-gradient(#f7f7f7, #cfcfcf); color: #111;
  border: 3px solid #111; border-radius: 10px; box-shadow: 0 6px 0 #111; animation: cx-press 1.3s ease-in-out infinite; }
@keyframes cx-press { 0%, 60%, 100% { transform: translateY(0); box-shadow: 0 6px 0 #111; } 70%, 82% { transform: translateY(5px); box-shadow: 0 1px 0 #111; } }
.candle i { animation: cx-flame 0.35s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes cx-flame { from { transform: scale(1, 1) rotate(-2deg); filter: brightness(1); } to { transform: scale(0.93, 1.08) rotate(2deg); filter: brightness(1.25); } }
.rain { position: relative; display: inline-block; width: 110px; height: 76px; overflow: hidden; }
.rain i { position: absolute; top: -30px; font-style: normal; font-size: 26px; animation: cx-rainA 1.6s linear infinite; }
.rain i:nth-child(1) { left: 4px; } .rain i:nth-child(2) { left: 28px; animation-delay: 0.5s; } .rain i:nth-child(3) { left: 52px; animation-delay: 0.2s; }
.rain i:nth-child(4) { left: 74px; animation-delay: 0.9s; } .rain i:nth-child(5) { left: 40px; animation-delay: 1.2s; }
@keyframes cx-rainA { to { transform: translateY(120px) rotate(40deg); } }
.croc { display: inline-block; font-size: 40px; animation: cx-croc 2.4s ease-in-out infinite; }
.croc b { font-size: 24px; margin-left: -18px; vertical-align: 14px; }
@keyframes cx-croc { 0%, 100% { transform: translate(-12px, 0) rotate(-6deg); } 50% { transform: translate(12px, -8px) rotate(6deg); } }
.nerd i:last-child { animation: cx-wag 0.35s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes cx-wag { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
.steam::after { content: "♨"; position: absolute; top: -18px; left: 50%; font-size: 18px; color: #999; animation: cx-notesA 1.4s ease-out infinite; }
/* cornici del profilo */
.av { width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 20px; background: #dfe7f3; position: relative; }
.av.f-gold { box-shadow: 0 0 0 3px #f4b534, 0 0 0 5px #7a5200; }
.avatar.f-gold { box-shadow: 0 0 0 3px #f4b534, 0 0 0 5px #7a5200; }
.av.f-fire { box-shadow: 0 0 0 3px #ff6a00; animation: cx-fire 0.6s ease-in-out infinite alternate; }
.avatar.f-fire { box-shadow: 0 0 0 3px #ff6a00; animation: cx-fire 0.6s ease-in-out infinite alternate; }
.av.f-pixel { border-radius: 0; box-shadow: 0 0 0 3px #111, 4px 4px 0 3px #2f6fe0; }
.avatar.f-pixel { border-radius: 0; box-shadow: 0 0 0 3px #111, 4px 4px 0 3px #2f6fe0; }
.av.f-rgb { animation: cx-rgb 2s linear infinite; }
.avatar.f-rgb { animation: cx-rgb 2s linear infinite; }
.av.f-laurel::after { content: "🌿"; position: absolute; left: -10px; bottom: -6px; font-size: 16px; transform: rotate(-30deg); }
.avatar.f-laurel::after { content: "🌿"; position: absolute; left: -10px; bottom: -6px; font-size: 16px; transform: rotate(-30deg); }
.av.f-cat { box-shadow: 0 0 0 3px #ff9ec4; }
.avatar.f-cat { box-shadow: 0 0 0 3px #ff9ec4; }
.av.f-cat::before, .av.f-cat::after { content: ""; position: absolute; top: -9px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid #ff9ec4; }
.avatar.f-cat::before, .avatar.f-cat::after { content: ""; position: absolute; top: -9px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid #ff9ec4; }
.av.f-cat::before { left: -2px; transform: rotate(-22deg); } .av.f-cat::after { right: -2px; transform: rotate(22deg); }
.avatar.f-cat::before { left: -2px; transform: rotate(-22deg); } .avatar.f-cat::after { right: -2px; transform: rotate(22deg); }
.av.f-rose { box-shadow: 0 0 0 3px #8e1b2a; }
.avatar.f-rose { box-shadow: 0 0 0 3px #8e1b2a; }
.av.f-rose::after { content: "🥀"; position: absolute; right: -9px; bottom: -7px; font-size: 16px; }
.avatar.f-rose::after { content: "🥀"; position: absolute; right: -9px; bottom: -7px; font-size: 16px; }
.av.f-card { border-radius: 8px; box-shadow: 0 0 0 3px #c8995c, 0 0 0 5px #5a3a1a; }
.avatar.f-card { border-radius: 8px; box-shadow: 0 0 0 3px #c8995c, 0 0 0 5px #5a3a1a; }
@keyframes cx-fire { from { box-shadow: 0 0 0 3px #ff6a00, 0 -4px 10px 2px #ffb300; } to { box-shadow: 0 0 0 3px #ff2d00, 0 -8px 16px 4px #ff6a00; } }
@keyframes cx-rgb { 0% { box-shadow: 0 0 0 3px #ff004c; } 33% { box-shadow: 0 0 0 3px #00e1ff; } 66% { box-shadow: 0 0 0 3px #b6ff00; } 100% { box-shadow: 0 0 0 3px #ff004c; } }
/* tag */
.tag { display: inline-block; font: 800 10px/1.5 "Rubik", sans-serif; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 6px; margin-right: 5px; vertical-align: 1px;
  border: 1.5px solid #111; white-space: nowrap; }
.t-og { background: #111; color: #ffd23f; }
.t-nuke { background: repeating-linear-gradient(-45deg, #ffd23f 0 6px, #111 6px 12px); color: #fff; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.t-goat { background: #fff; color: #111; }
.t-pizza { background: #ffe0b2; color: #b23b00; }
.t-chad { background: linear-gradient(90deg, #6a11cb, #2575fc); color: #fff; }
.t-void { background: radial-gradient(circle at 30% 30%, #7b3be6, #16052e); color: #f0e2ff; box-shadow: 0 0 8px rgba(139, 63, 224, 0.75); }
.t-card { background: repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 2px, transparent 2px 5px), #c8995c; color: #3b2410; border-color: #5a3a1a; }
.t-pix { font: 400 7px/1.9 "Press Start 2P", monospace; background: #c9c9c9; color: #111; border-radius: 0; padding: 1px 5px; letter-spacing: 0; }
.t-grass { background: #7fd35b; color: #0f3d05; }
.t-stamp { background: #fff; color: #d32f2f; border-color: #d32f2f; transform: rotate(-4deg); }
.t-holo { background: linear-gradient(110deg, #ff9ad5, #9ae8ff, #c8ff9a, #fff09a, #ff9ad5); background-size: 300% 100%; animation: cx-holo 3s linear infinite; color: #2a2150; }
.t-foil { background: linear-gradient(100deg, #9c7a22, #f7e199 35%, #fffbe6 45%, #d9b34f 60%, #9c7a22); background-size: 250% 100%; animation: cx-holo 2.5s linear infinite; color: #3b2a00; }
.t-rizz { background: linear-gradient(90deg, #ff4d8d, #ff9a3c); color: #fff; }
.t-fire { background: linear-gradient(0deg, #ff3d00, #ffb300); color: #fff; text-shadow: 0 0 3px #7a1a00; animation: cx-fireT 0.5s ease-in-out infinite alternate; }
.t-chef { background: #fff; color: #111; }
.t-delulu { background: linear-gradient(90deg, #ffd1f0, #d8c8ff, #c8f5ff); color: #7a2a6b; }
.t-blue { background: #2f7de0; color: #fff; }
.t-gray { background: #b8bec9; color: #333; }
.t-bw { background: #fff; color: #111; box-shadow: 2px 2px 0 #111; }
.t-ice { background: #d6f3ff; color: #0b5c80; }
.t-glitch { background: #111; color: #fff; animation: cx-glitchT 1.2s steps(2) infinite; }
.t-donut { background: #ffb3d1; color: #7a1f47; }
.t-shake { background: #d32f2f; color: #fff; animation: cx-shake 0.3s linear infinite; }
.t-neon { background: #0b0618; color: #22f3ff; border-color: #ff3df2; box-shadow: 0 0 8px #ff3df2; text-shadow: 0 0 4px #22f3ff; }
.t-corn { background: #ffe066; color: #5a4200; }
.t-red { background: #ff3b3b; color: #fff; }
.t-sweat { background: #8fd3ff; color: #06395e; }
.t-matrix { background: #000; color: #39ff6a; font: 400 14px/1.1 "VT323", monospace; letter-spacing: 0.02em; padding: 1px 6px; }
.t-green { background: #2bd900; color: #fff; }
.t-crown { background: #111; color: #ffd23f; }
.t-be { background: linear-gradient(90deg, #111 33%, #ffd90c 33% 66%, #ef3340 66%); color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
.t-traitor { background: #2b0a0a; color: #ff6b6b; }
.t-peace { background: #e8f7ff; color: #0b5c80; }
.t-rose { background: #2a0d12; color: #ff8fa3; border-color: #8e1b2a; }
.t-steel { background: linear-gradient(180deg, #eef2f5, #9aa5b1); color: #1f2a44; }
.t-unc { background: #efe3c8; color: #5a3a1a; font: italic 700 11px/1.4 Georgia, serif; letter-spacing: 0; }
.t-cat { background: #ffe0ec; color: #d9468f; border-color: #d9468f; }
.t-creator { background: linear-gradient(90deg, #ff0050, #00f2ea); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.t-nerd { background: #fff; color: #2f7de0; }
.t-stone { background: #9e9e9e; color: #fff; }
.t-shout { background: #ffe14d; color: #d32f2f; font-style: italic; font-size: 11px; }
.t-peak { background: linear-gradient(90deg, #6a11cb, #ff3df2); color: #fff; }
.t-black { background: #111; color: #fff; }
.t-gold { background: linear-gradient(180deg, #ffe58a, #e0a820); color: #3b2a00; }
@keyframes cx-holo { to { background-position: -300% 0; } }
@keyframes cx-fireT { from { filter: brightness(1); } to { filter: brightness(1.25); } }

/* animazioni usate sopra e definite altrove nel prototipo */


.avatar.framed { overflow: visible; }
.avatar.framed img { border-radius: 50%; }