/* Prize Counter prizes that show on every page. Owned by the arcade agent.
   Spark Jar skins: the jar is button#jar.jar with data-skin="<id>" (set from save.equipped('jar')).
   .jar-mini is the little preview jar on /play; it wears the same skins. */

/* ── Golden Jar ─────────────────────────────────────────────────────────── */
.jar[data-skin="gold"] .jar-art, .jar-mini[data-skin="gold"] .jar-art {
  filter: sepia(1) saturate(4.5) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 5px rgba(255, 200, 60, .75));
}
.jar[data-skin="gold"]::before, .jar-mini[data-skin="gold"]::before {
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 230, 120, .85), rgba(255, 170, 30, .55) 55%, transparent 85%);
}
.jar[data-skin="gold"] .jar-count, .jar-mini[data-skin="gold"] .jar-count { border-color: #FFD76A; background: linear-gradient(180deg, #7A5200, #4A3000); color: #FFF3B0; box-shadow: 0 0 10px rgba(255, 200, 60, .55); }
.jar[data-skin="gold"] .jar-sparks i, .jar-mini[data-skin="gold"] .jar-sparks i { background: radial-gradient(circle at 50% 60%, #FFFFFF, #FFE680 45%, #FFB800 85%); box-shadow: 0 0 8px #FFE680; }
.jar[data-skin="gold"]::after, .jar-mini[data-skin="gold"]::after { /* a glint that sweeps across now and then */
  content: ''; position: absolute; left: 14%; right: 14%; top: 22%; bottom: 8%; border-radius: 10px 10px 16px 16px; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .7) 48%, transparent 60%) no-repeat;
  background-size: 250% 100%; background-position: 150% 0; animation: prize-glint 4.5s ease-in-out infinite;
}
@keyframes prize-glint { 0%, 70% { background-position: 150% 0; } 100% { background-position: -60% 0; } }

/* ── Frosted Jar ────────────────────────────────────────────────────────── */
.jar[data-skin="frost"] .jar-art, .jar-mini[data-skin="frost"] .jar-art {
  filter: hue-rotate(160deg) saturate(2.2) brightness(1.2) drop-shadow(0 0 6px rgba(143, 211, 255, .95));
}
.jar[data-skin="frost"]::before, .jar-mini[data-skin="frost"]::before {
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 194, 61, .55), rgba(143, 211, 255, .4) 55%, rgba(220, 245, 255, .15) 85%);
}
.jar[data-skin="frost"]::after, .jar-mini[data-skin="frost"]::after { /* frost on the glass */
  content: ''; position: absolute; left: 12%; right: 12%; top: 18%; bottom: 6%; border-radius: 10px 10px 16px 16px; pointer-events: none; opacity: .85;
  background:
    radial-gradient(circle at 20% 22%, #fff 0 1.4px, transparent 2px),
    radial-gradient(circle at 72% 30%, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 36% 70%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 80% 78%, #fff 0 1.4px, transparent 2px),
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(200, 238, 255, .55) 100%),
    linear-gradient(180deg, rgba(210, 244, 255, .6), rgba(143, 211, 255, .18) 32%, rgba(143, 211, 255, .12) 70%, rgba(220, 248, 255, .5));
}
.jar[data-skin="frost"] .jar-count, .jar-mini[data-skin="frost"] .jar-count { border-color: #8FD3FF; background: linear-gradient(180deg, #16405A, #0E2A3A); color: #E6F7FF; }

/* ── 8-bit Jar ──────────────────────────────────────────────────────────── */
.jar[data-skin="pixel"] .jar-art, .jar-mini[data-skin="pixel"] .jar-art {
  filter: saturate(2.4) hue-rotate(60deg) contrast(1.4) drop-shadow(2px 0 0 #0D1120) drop-shadow(-2px 0 0 #0D1120) drop-shadow(0 3px 0 #7CFF6B);
}
.jar[data-skin="pixel"]::after, .jar-mini[data-skin="pixel"]::after { /* a chunky pixel grid over the glass */
  content: ''; position: absolute; left: 14%; right: 14%; top: 22%; bottom: 8%; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(13, 17, 32, .35) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(13, 17, 32, .35) 0 1px, transparent 1px 4px);
}
.jar[data-skin="pixel"]::before, .jar-mini[data-skin="pixel"]::before { border-radius: 0; filter: none; background: repeating-linear-gradient(0deg, rgba(124, 255, 107, .25) 0 4px, rgba(124, 255, 107, .1) 4px 8px); }
.jar[data-skin="pixel"] .jar-sparks, .jar-mini[data-skin="pixel"] .jar-sparks { border-radius: 0; }
.jar[data-skin="pixel"] .jar-sparks i, .jar-mini[data-skin="pixel"] .jar-sparks i { border-radius: 0; width: 6px; height: 6px; background: #FFC23D; box-shadow: 1px 1px 0 #FF6B1A, 0 0 0 1px #0D1120; animation-timing-function: steps(3); }
.jar[data-skin="pixel"] .jar-count, .jar-mini[data-skin="pixel"] .jar-count { font: 400 .6rem/1 var(--font-pixel); border-radius: 0; border-color: #7CFF6B; color: #7CFF6B; padding: 4px 6px; box-shadow: 2px 2px 0 #0D1120; }

html.calm .jar[data-skin]::after, html.calm .jar-mini[data-skin]::after { animation: none; }