/* Tapp The Button - holiday kits.
 *
 * A theme is not only a palette: a kit also hangs its own things on the widget.
 * This file draws those things, and it draws the small picture on every theme
 * card in the shop, so a player who is deciding what to buy sees a scene rather
 * than three bands of colour.
 *
 * Two places, one vocabulary:
 *
 *   #decor-layer   js/decor.js fills it from theme.decor. It sits above the
 *                  field and below the HUD, so a pumpkin never covers a button.
 *   .theme-thumb   the shop card's little picture, filled with the same props.
 *
 * Every prop is gradients, border-radius, clip-path and box-shadow. No images,
 * no SVG files, no per-frame work: one CSS animation per prop and nothing else.
 * Sizes are in em, so a prop scales by setting font-size once.
 */

/* ------------------------------------------------------------ the decor layer */

#decor-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.decor {
  position: absolute;
  left: var(--x, 50%);
  bottom: var(--y, 11%);
  width: 1em;
  height: 1em;
  font-size: var(--s, 1.4rem);
  transform: translateX(-50%);
  opacity: .92;
  animation: decor-bob var(--d, 7s) ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s);
  will-change: transform;
}

.decor::before,
.decor::after {
  content: '';
  position: absolute;
}

/* The subtle one: things sit in the air and drift a couple of pixels. */
@keyframes decor-bob {
  from { transform: translateX(-50%) translateY(0); }
  to { transform: translateX(-50%) translateY(-.35em); }
}

/* Leaves and flags swing instead of bobbing, which reads as wind. */
@keyframes decor-sway {
  from { transform: translateX(-50%) rotate(-4deg); }
  to { transform: translateX(-50%) rotate(5deg); }
}

/* Stars and moons breathe rather than move. */
@keyframes decor-pulse {
  from { transform: translateX(-50%) scale(.94); opacity: .78; }
  to { transform: translateX(-50%) scale(1.06); opacity: 1; }
}

@keyframes decor-twinkle {
  0%, 100% { transform: translateX(-50%) scale(.86); opacity: .8; }
  50% { transform: translateX(-50%) scale(1.1); opacity: 1; }
}

@keyframes decor-burst {
  0%, 100% { transform: translateX(-50%) scale(.72); opacity: .55; }
  46% { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

/* Snow is the one prop that goes somewhere: a slow fall from the top bar. */
@keyframes decor-fall {
  from { transform: translateX(-50%) translateY(-2em); opacity: 0; }
  18% { opacity: .9; }
  to { transform: translateX(-50%) translateY(26em); opacity: 0; }
}

/* ------------------------------------------------------------- prop shapes */
/* Shared by the widget layer and the shop thumbnail. Appearance only: where a
   prop stands is decided below, per surface. */

.decor--sun,
.tp--sun {
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, #fffdf0 0 24%, #ffe27a 62%, #ffb347 100%);
  box-shadow: 0 0 1em rgba(255, 214, 110, .8), inset 0 0 .35em rgba(255, 255, 255, .9);
}

.decor--wave,
.tp--wave {
  width: 3em;
  height: .6em;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(140, 214, 246, .55));
  opacity: .6;
}

.decor--star,
.tp--star {
  clip-path: polygon(50% 0, 59% 41%, 100% 50%, 59% 59%, 50% 100%, 41% 59%, 0 50%, 41% 41%);
  background: radial-gradient(circle at 50% 50%, #fffdf2, #ffd166);
}

.decor--heart,
.tp--heart {
  clip-path: polygon(50% 100%, 6% 48%, 6% 28%, 24% 10%, 50% 26%, 76% 10%, 94% 28%, 94% 48%);
  background: radial-gradient(circle at 38% 28%, #ffa3c6, #ff3d6e 72%);
}

.decor--bunting,
.tp--bunting {
  width: 5em;
  height: .9em;
  border-top: .09em solid rgba(61, 50, 32, .5);
  background: repeating-conic-gradient(from 180deg at 50% 0,
      #ef4d6b 0deg 55deg, transparent 55deg 180deg);
  background-size: .7em .82em;
  background-repeat: repeat-x;
  -webkit-mask-image: linear-gradient(#000 0 .8em, transparent .82em);
  mask-image: linear-gradient(#000 0 .8em, transparent .82em);
}

.decor--pumpkin,
.tp--pumpkin {
  border-radius: 50% 50% 46% 46% / 56% 56% 42% 42%;
  background:
    radial-gradient(ellipse at 32% 24%, rgba(255, 255, 255, .5), transparent 48%),
    repeating-linear-gradient(90deg, #e8751a 0 .1em, #ff9a3c .1em .28em, #e8751a .28em .4em);
  box-shadow: inset 0 -.09em .16em rgba(90, 40, 0, .35);
}

.decor--pumpkin::before,
.tp--pumpkin::before {
  left: 50%;
  top: -.15em;
  width: .13em;
  height: .2em;
  margin-left: -.065em;
  border-radius: .05em;
  background: #4a6b21;
  transform: rotate(-7deg);
}

.decor--pumpkin::after,
.tp--pumpkin::after {
  left: 50%;
  top: 40%;
  width: .36em;
  height: .22em;
  margin-left: -.18em;
  border-bottom: .07em solid #3a1a02;
  border-radius: 0 0 .1em .1em;
  background:
    radial-gradient(circle at 20% 26%, #3a1a02 0 .055em, transparent .06em),
    radial-gradient(circle at 80% 26%, #3a1a02 0 .055em, transparent .06em);
}

.decor--bat,
.tp--bat {
  width: 1.05em;
  height: .68em;
  border-radius: 52% 52% 42% 42%;
  background: #2a1236;
  box-shadow: 0 .06em .1em rgba(20, 4, 30, .4);
}

.decor--bat::before,
.tp--bat::before {
  left: -.56em;
  top: .1em;
  width: .6em;
  height: .48em;
  background: #2a1236;
  border-radius: 70% 8% 58% 22%;
  transform: rotate(-15deg) skewY(7deg);
}

.decor--bat::after,
.tp--bat::after {
  right: -.56em;
  top: .1em;
  width: .6em;
  height: .48em;
  background: #2a1236;
  border-radius: 8% 70% 22% 58%;
  transform: rotate(15deg) skewY(-7deg);
}

/* A crescent, not a disc: the mask is what makes the dark side a hole. */
.decor--moon,
.tp--moon {
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fffdf0, #ffea9f 66%, #f3c766);
  -webkit-mask-image: radial-gradient(circle at 72% 34%, transparent 0 47%, #000 49%);
  mask-image: radial-gradient(circle at 72% 34%, transparent 0 47%, #000 49%);
}

.decor--snow,
.tp--snow {
  width: .34em;
  height: .34em;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 42%, rgba(255, 255, 255, .12) 72%);
}

.decor--tree,
.tp--tree {
  clip-path: polygon(50% 0, 86% 32%, 72% 32%, 100% 66%, 82% 66%, 100% 96%, 0 96%, 18% 66%, 0 66%, 28% 32%, 14% 32%);
  background: linear-gradient(180deg, #2f7a3d, #14512a);
}

.decor--tree::before,
.tp--tree::before {
  left: 50%;
  top: 40%;
  width: .08em;
  height: .08em;
  margin-left: -.04em;
  border-radius: 50%;
  background: #ffe066;
  box-shadow: .19em .17em 0 0 #ff8a5c, -.17em .31em 0 0 #8ce99a;
}

.decor--snowman,
.tp--snowman {
  width: .84em;
  height: .84em;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, #dceaf5 80%);
  box-shadow: 0 .05em .1em rgba(20, 60, 90, .28);
}

.decor--snowman::before,
.tp--snowman::before {
  left: 50%;
  top: -.54em;
  width: .62em;
  height: .62em;
  margin-left: -.31em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 40%, #2b3a45 0 .04em, transparent .045em),
    radial-gradient(circle at 68% 40%, #2b3a45 0 .04em, transparent .045em),
    radial-gradient(circle at 38% 30%, #fff, #e4f0f8 82%);
}

.decor--snowman::after,
.tp--snowman::after {
  left: 50%;
  top: -.32em;
  width: .2em;
  height: .1em;
  margin-left: -.01em;
  background: #ff8c28;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.decor--firework,
.tp--firework {
  background: repeating-conic-gradient(from 0deg at 50% 50%,
      var(--fw, #ffd166) 0deg 3deg, transparent 3deg 30deg);
  -webkit-mask-image: radial-gradient(circle, transparent 0 26%, #000 33% 64%, transparent 72%);
  mask-image: radial-gradient(circle, transparent 0 26%, #000 33% 64%, transparent 72%);
}

/* The pole and the cloth are two shapes, so the flag can flap on its own. */
.decor--flag,
.tp--flag {
  width: .15em;
  height: 1.15em;
  border-radius: .04em;
  background: linear-gradient(180deg, #8a6d3b, #5f4a24);
}

.decor--flag::before,
.tp--flag::before {
  left: .13em;
  top: 0;
  width: .64em;
  height: .46em;
  border-radius: 0 .05em .05em 0;
  background: linear-gradient(180deg, var(--flag, #ff7a1a), color-mix(in srgb, var(--flag, #ff7a1a) 70%, #fff));
  clip-path: polygon(0 0, 100% 6%, 100% 100%, 0 92%);
  transform-origin: 0 50%;
  animation: flag-flap var(--d, 5s) ease-in-out infinite alternate;
  animation-delay: var(--dl, 0s);
}

@keyframes flag-flap {
  from { transform: skewY(-3deg) scaleX(.96); }
  to { transform: skewY(4deg) scaleX(1); }
}

.decor--blossom,
.tp--blossom {
  width: .32em;
  height: .32em;
  border-radius: 50%;
  background: #ffd1e6;
  box-shadow:
    0 -.22em 0 0 #ffd1e6,
    .21em -.07em 0 0 #ffd1e6,
    .13em .18em 0 0 #ffd1e6,
    -.13em .18em 0 0 #ffd1e6,
    -.21em -.07em 0 0 #ffd1e6;
}

.decor--blossom::after,
.tp--blossom::after {
  inset: 0;
  border-radius: 50%;
  background: #ffeaa7;
}

.decor--egg,
.tp--egg {
  width: .68em;
  height: .9em;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, #fffaf0, #ffe7c4);
  box-shadow: inset 0 -.07em .12em rgba(160, 110, 40, .22);
}

.decor--egg::before,
.tp--egg::before {
  left: 0;
  right: 0;
  top: 44%;
  height: .16em;
  background: repeating-linear-gradient(115deg, #ff9ec4 0 .09em, transparent .09em .2em);
}

/* ------------------------------------------------- where each prop stands */
/* Horizontal placement comes from the game (--x), vertical is the prop's own
   business: a sun belongs in the sky and a pumpkin belongs in the grass. */

.decor--sun { top: 9%; right: 11%; bottom: auto; left: auto; font-size: calc(var(--s, 1.4rem) * 1.35); }
.decor--moon { top: 12%; bottom: auto; font-size: calc(var(--s, 1.4rem) * 1.2); }
.decor--bat { top: 24%; bottom: auto; }
.decor--star { top: 15%; bottom: auto; font-size: calc(var(--s, 1.4rem) * .8); }
.decor--firework { top: 14%; bottom: auto; font-size: calc(var(--s, 1.4rem) * 1.7); }
.decor--snow { top: -.5em; bottom: auto; }
.decor--tree { bottom: 13%; font-size: calc(var(--s, 1.4rem) * 1.15); }
.decor--snowman { bottom: 11%; }
.decor--pumpkin { bottom: 12%; }
.decor--egg { bottom: 11%; }
.decor--blossom { bottom: 14%; }
.decor--heart { bottom: 18%; }
.decor--wave { bottom: 13%; }
.decor--flag { bottom: 12%; }

/* A bunting is one string across the whole widget, not a prop on a spot. */
.decor--bunting {
  top: 0;
  left: 0;
  bottom: auto;
  width: 100%;
  transform: none;
  animation: none;
  opacity: .85;
}

/* Motion, per kind. A pumpkin sways, a bat flits, a firework fires. */
.decor--sun,
.decor--moon { animation-name: decor-pulse; }
.decor--star { animation-name: decor-twinkle; }
.decor--snow { animation-name: decor-fall; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: normal; }
.decor--bat { animation-name: decor-sway; animation-duration: calc(var(--d, 7s) * .7); }
.decor--wave,
.decor--tree,
.decor--flag,
.decor--pumpkin { animation-name: decor-sway; }
.decor--firework { animation-name: decor-burst; animation-iteration-count: infinite; }

/* Snow needs a long fall, so its own duration is stretched. */
.decor--snow { animation-duration: calc(var(--d, 7s) * 1.8); }

@media (prefers-reduced-motion: reduce) {
  .decor,
  .decor::before,
  .decor::after {
    animation: none !important;
    opacity: .8;
  }
}

/* --------------------------------------------------------- shop thumbnails */

.theme-thumb {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 9px;
  overflow: hidden;
  isolation: isolate;
  background:
    linear-gradient(180deg,
      var(--th-sky, #87ceeb) 0%,
      var(--th-sky2, var(--th-sky, #87ceeb)) 46%,
      var(--th-grass, #6bcb77) 54%,
      color-mix(in srgb, var(--th-grass, #6bcb77) 72%, #000) 100%);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18), 2px 2px 0 var(--shadow, rgba(40, 30, 20, .3));
}

/* A horizon line, so the picture reads as sky over ground and not as a stripe. */
.theme-thumb::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  height: 1px;
  background: rgba(255, 255, 255, .5);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
}

.theme-thumb .tp {
  position: absolute;
  width: 1em;
  height: 1em;
  font-size: 10px;
  z-index: 1;
}

/* Per kit: the sky, the ground and where its props land. Each one is a small
   scene, so a row of cards is a row of places and not a row of swatches. */

.theme-card[data-theme="classic-white"] .theme-thumb {
  background: linear-gradient(180deg, #8fd3f4 0%, #cfeafa 46%, #74d07f 54%, #43a05a 100%);
}
.theme-card[data-theme="classic-white"] .tp:nth-of-type(1) { top: 8%; right: 12%; font-size: 13px; }
.theme-card[data-theme="classic-white"] .tp:nth-of-type(2) { bottom: 6%; left: 18%; font-size: 8px; }

.theme-card[data-theme="sunset-blush"] .theme-thumb {
  background: linear-gradient(180deg, #ff9a8b 0%, #ffd9b8 46%, #c4a35a 54%, #8e6b33 100%);
}
.theme-card[data-theme="sunset-blush"] .tp:nth-of-type(1) { bottom: 34%; right: 22%; font-size: 15px; }

.theme-card[data-theme="ocean-mint"] .theme-thumb {
  background: linear-gradient(180deg, #48cae4 0%, #caf0f8 44%, #2f9bd0 52%, #14567a 100%);
}
.theme-card[data-theme="ocean-mint"] .tp:nth-of-type(1) { bottom: 30%; left: -4%; font-size: 17px; }
.theme-card[data-theme="ocean-mint"] .tp:nth-of-type(2) { bottom: 16%; left: 46%; font-size: 13px; opacity: .8; }

.theme-card[data-theme="neon-night"] .theme-thumb {
  background: linear-gradient(180deg, #14062a 0%, #3d1a5c 52%, #1f3140 56%, #101d26 100%);
}
.theme-card[data-theme="neon-night"] .tp:nth-of-type(1) { top: 14%; left: 16%; font-size: 12px; }
.theme-card[data-theme="neon-night"] .tp:nth-of-type(2) { top: 34%; right: 14%; font-size: 8px; }

.theme-card[data-theme="golden-jackpot"] .theme-thumb {
  background: linear-gradient(180deg, #ffd89b 0%, #fff8dc 46%, #daa520 54%, #9a6f14 100%);
}
.theme-card[data-theme="golden-jackpot"] .tp:nth-of-type(1) { top: 18%; left: 32%; font-size: 20px; }
.theme-card[data-theme="golden-jackpot"] .tp:nth-of-type(2) { top: 4%; left: 0; font-size: 8px; width: 100%; }

.theme-card[data-theme="candy-pop"] .theme-thumb {
  background: linear-gradient(180deg, #ff9ff3 0%, #ffd6f0 46%, #55efc4 54%, #2fae87 100%);
}
.theme-card[data-theme="candy-pop"] .tp:nth-of-type(1) { bottom: 32%; left: 16%; font-size: 11px; }
.theme-card[data-theme="candy-pop"] .tp:nth-of-type(2) { top: 12%; right: 18%; font-size: 8px; }

.theme-card[data-theme="pumpkin-night"] .theme-thumb {
  background: linear-gradient(180deg, #1d0f2c 0%, #4a2350 50%, #3a2a1c 56%, #1d140c 100%);
}
.theme-card[data-theme="pumpkin-night"] .tp--moon { top: 10%; right: 12%; font-size: 16px; filter: drop-shadow(0 0 4px rgba(255, 234, 159, .8)); }
.theme-card[data-theme="pumpkin-night"] .tp--bat { top: 30%; left: 18%; font-size: 8px; }
.theme-card[data-theme="pumpkin-night"] .tp--pumpkin { bottom: 8%; left: 50%; margin-left: -8px; font-size: 16px; }

.theme-card[data-theme="sinterklaas"] .theme-thumb {
  background: linear-gradient(180deg, #101d3d 0%, #24365f 50%, #5b4a2f 56%, #2f2616 100%);
}
.theme-card[data-theme="sinterklaas"] .tp--bunting { top: 0; left: 0; font-size: 6px; width: 100%; }
.theme-card[data-theme="sinterklaas"] .tp--star { top: 30%; left: 14%; font-size: 10px; }
.theme-card[data-theme="sinterklaas"] .tp--flag { bottom: 10%; right: 16%; font-size: 13px; --flag: #e63946; }

.theme-card[data-theme="midwinter"] .theme-thumb {
  background: linear-gradient(180deg, #9ec7e8 0%, #eef8ff 48%, #f4fbff 55%, #c9dfec 100%);
}
.theme-card[data-theme="midwinter"] .tp--tree { bottom: 12%; left: 20%; font-size: 16px; }
.theme-card[data-theme="midwinter"] .tp--snowman { bottom: 10%; right: 22%; font-size: 13px; }
.theme-card[data-theme="midwinter"] .tp--snow { top: 14%; left: 58%; font-size: 9px; }

.theme-card[data-theme="new-year-gold"] .theme-thumb {
  background: linear-gradient(180deg, #0b1233 0%, #2a2f63 52%, #1f2440 58%, #0d1024 100%);
}
.theme-card[data-theme="new-year-gold"] .tp--firework { top: 22%; left: 26%; font-size: 22px; --fw: #ffd166; }
.theme-card[data-theme="new-year-gold"] .tp--star { top: 16%; right: 18%; font-size: 10px; }
.theme-card[data-theme="new-year-gold"] .tp--bunting { top: 0; left: 0; font-size: 6px; width: 100%; }

.theme-card[data-theme="valentine"] .theme-thumb {
  background: linear-gradient(180deg, #ffd3e4 0%, #fff1f6 48%, #e58aa6 55%, #b8617c 100%);
}
.theme-card[data-theme="valentine"] .tp--bunting { top: 0; left: 0; font-size: 6px; width: 100%; }
.theme-card[data-theme="valentine"] .tp--heart { bottom: 26%; left: 26%; font-size: 13px; }
.theme-card[data-theme="valentine"] .tp--heart:last-child { bottom: 12%; right: 18%; left: auto; font-size: 9px; opacity: .85; }

.theme-card[data-theme="spring-bloom"] .theme-thumb {
  background: linear-gradient(180deg, #bfe9ff 0%, #eafff2 46%, #7ed957 54%, #4a9b35 100%);
}
.theme-card[data-theme="spring-bloom"] .tp--blossom { top: 18%; left: 20%; font-size: 11px; }
.theme-card[data-theme="spring-bloom"] .tp--blossom:last-child { top: 30%; right: 18%; left: auto; font-size: 8px; }
.theme-card[data-theme="spring-bloom"] .tp--egg { bottom: 8%; left: 44%; font-size: 12px; }

.theme-card[data-theme="kingsday"] .theme-thumb {
  background: linear-gradient(180deg, #ff8a1f 0%, #ffc46b 46%, #ff6a00 54%, #b34a00 100%);
}
.theme-card[data-theme="kingsday"] .tp--bunting { top: 0; left: 0; font-size: 7px; width: 100%; }
.theme-card[data-theme="kingsday"] .tp--flag { bottom: 8%; right: 20%; font-size: 15px; --flag: #1f4fae; }
.theme-card[data-theme="kingsday"] .tp--flag:last-child { bottom: 12%; left: 20%; right: auto; font-size: 11px; --flag: #ffd166; }

.theme-card[data-theme="high-summer"] .theme-thumb {
  background: linear-gradient(180deg, #4fc3f7 0%, #d9f4ff 40%, #22a7c4 50%, #0d6f8a 100%);
}
.theme-card[data-theme="high-summer"] .tp--sun { top: 8%; left: 22%; font-size: 13px; }
.theme-card[data-theme="high-summer"] .tp--wave { bottom: 18%; left: -4%; font-size: 12px; opacity: .75; }
.theme-card[data-theme="high-summer"] .tp--wave:last-child { bottom: 28%; left: 40%; font-size: 9px; opacity: .55; }

/* ------------------------------------------------------- card furniture */

/* The kit's own name, on a chip in the theme's paper colour: it says "this is
   a set, not a single colour" without a sentence explaining it. */
.theme-card .kit-ribbon {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 999px;
  font-family: var(--pixel, monospace);
  font-size: .44rem;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #3d3220;
  background: var(--th-body, #f5f0e8);
  box-shadow: inset 0 0 0 1px rgba(61, 50, 32, .28);
}

.theme-card .season-tag {
  display: block;
  margin-top: 2px;
  font-family: var(--pixel, monospace);
  font-size: .44rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #b45309;
}

.theme-card.is-equipped .season-tag { color: #2f8b4c; }