/* Play buttons: rainbow, sparkly and a little bouncy, so they ask to be clicked.
   Applies to the header's Play tab (.tabs a.play-fun) and the home page's
   yellow Play buttons (.btn.hh-play). Loaded after ftb.css so it wins. */

.play-fun, .btn.hh-play{
  --rb:linear-gradient(100deg,#FF7A7A,#FFB45E,#FFE45C,#7FDF7F,#5CCBFF,#9F8CFF,#FF7FD4,#FF7A7A,#FFB45E,#FFE45C,#7FDF7F,#5CCBFF,#9F8CFF,#FF7FD4,#FF7A7A);
  position:relative;isolation:isolate;overflow:hidden;
  background:var(--rb) 0 0/200% 100%;
  color:#2A1B3D;border-color:transparent;font-weight:800;
  box-shadow:0 2px 0 rgba(42,27,61,.18),0 6px 18px -6px rgba(169,155,255,.7);
  animation:pf-flow 6s linear infinite,pf-hop 3.2s ease-in-out infinite;
  transition:transform .15s ease,box-shadow .15s ease;
}
/* Sparkles: little four-point stars that twinkle in and out. */
.play-fun::before, .btn.hh-play::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 8% 28%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 24% 80%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 42% 18%,#fff 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 60% 82%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 76% 24%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 94% 70%,#fff 0 2px,transparent 3px);
  animation:pf-twinkle 1.6s ease-in-out infinite alternate;
}
/* A shine that sweeps across now and then. */
.play-fun::after, .btn.hh-play::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg);
  animation:pf-shine 3.2s ease-in-out infinite;
}
/* Our zebra pleco swims along the right end of the home page buttons. */
.btn.hh-play{
  padding-right:54px;
  background:url("brand/mark.e97ce8c29ff7.svg") no-repeat right 12px center/30px 30px,var(--rb) 0 0/200% 100%;
  animation:pf-flow-fish 6s linear infinite,pf-hop 3.2s ease-in-out infinite;
}

/* Hover / focus: a happy wiggle and brighter sparkles. */
.play-fun:hover, .play-fun:focus-visible,
.btn.hh-play:hover, .btn.hh-play:focus-visible{
  color:#2A1B3D;border-color:transparent;
  animation:pf-flow 1.5s linear infinite,pf-wiggle .5s ease-in-out infinite;
  box-shadow:0 3px 0 rgba(42,27,61,.2),0 10px 26px -6px rgba(255,138,216,.8);
}
.btn.hh-play:hover, .btn.hh-play:focus-visible{
  background:url("brand/mark.e97ce8c29ff7.svg") no-repeat right 12px center/30px 30px,var(--rb) 0 0/200% 100%;
  animation:pf-flow-fish 1.5s linear infinite,pf-wiggle .5s ease-in-out infinite;
}
.play-fun:hover::before, .btn.hh-play:hover::before{animation-duration:.35s}
.play-fun:hover::after, .btn.hh-play:hover::after{animation-duration:1s}
.play-fun:active, .btn.hh-play:active{transform:scale(.94)}

/* Header tab: keep it a pill, a bit bolder than its neighbours. */
.tabs a.play-fun{color:#2A1B3D;font-weight:800}
.tabs a.play-fun[aria-current="page"]{background:var(--rb) 0 0/200% 100%;color:#2A1B3D;border-color:transparent;outline:2px solid var(--brand);outline-offset:1px}

/* Multiple Tank Syndrome card backs, in the same rainbow with the pleco on a
   white badge: the deck, the computer's hidden products (.hw-back .hb-in) and
   its secret goals (.fr-gcard.secret). Layout (inset, container) stays as in ftb.css. */
.hw-back{background:#fff;box-shadow:0 0 0 1px rgba(42,27,61,.14),0 2px 4px rgba(42,27,61,.15),0 10px 22px -14px rgba(42,27,61,.5)}
.hb-in, .fr-gcard.secret{
  --rb:linear-gradient(100deg,#FF7A7A,#FFB45E,#FFE45C,#7FDF7F,#5CCBFF,#9F8CFF,#FF7FD4,#FF7A7A,#FFB45E,#FFE45C,#7FDF7F,#5CCBFF,#9F8CFF,#FF7FD4,#FF7A7A);
  isolation:isolate;
  background:var(--rb) 0 0/200% 100%;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.75);
  color:#2A1B3D;justify-content:center;padding-top:52%;
  animation:pf-flow 9s linear infinite;
}
.fr-gcard.secret{border:3px solid #fff;box-shadow:0 0 0 1px rgba(42,27,61,.14),0 6px 14px -6px rgba(42,27,61,.5);position:relative;padding-top:9px}
.fr-gcard.secret .mts{margin-top:52cqw}
/* sparkles */
.hb-in::before, .fr-gcard.secret::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(circle at 12% 10%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 86% 14%,#fff 0 2.5px,transparent 3.5px),
    radial-gradient(circle at 8% 58%,#fff 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 92% 52%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 20% 90%,#fff 0 2px,transparent 3px),
    radial-gradient(circle at 78% 88%,#fff 0 1.5px,transparent 2.5px);
  animation:pf-twinkle 1.8s ease-in-out infinite alternate;
}
/* the pleco on its white badge */
.hb-in::after, .fr-gcard.secret::after{
  content:"";position:absolute;left:50%;top:8%;width:58%;aspect-ratio:1;transform:translateX(-50%);
  z-index:-1;pointer-events:none;border-radius:50%;
  background:url("brand/mark.e97ce8c29ff7.svg") no-repeat center/82% auto,#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.55),0 3px 10px -3px rgba(42,27,61,.35);
}
.hb-in .mts, .fr-gcard.secret .mts{color:#2A1B3D;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.hb-in small{color:#2A1B3D;opacity:1;font-weight:700}
.fr-gcard.secret .fr-goalname, .fr-gcard.secret .tc-kind{color:#2A1B3D}
/* the deck: room for the yellow Draw pill under the name */
#fr-deckback{padding-top:40%;justify-content:flex-start}
#fr-deckback::after{top:6%;width:50%}
#fr-deckback .mts{margin-top:14%}

@keyframes pf-flow{to{background-position:-200% 0}}
@keyframes pf-flow-fish{
  0%  {background-position:right 8px top 50%,0 0}
  25% {background-position:right 16px top 35%,-50% 0}
  50% {background-position:right 10px top 62%,-100% 0}
  75% {background-position:right 18px top 42%,-150% 0}
  100%{background-position:right 8px top 50%,-200% 0}}
@keyframes pf-hop{
  0%,70%,100%{transform:translateY(0) scale(1)}
  76%{transform:translateY(-4px) scale(1.04,.97)}
  82%{transform:translateY(0) scale(1.02,.98)}
  88%{transform:translateY(-2px)}}
@keyframes pf-wiggle{
  0%,100%{transform:translateY(-2px) rotate(0) scale(1.06)}
  25%{transform:translateY(-3px) rotate(-3deg) scale(1.07)}
  75%{transform:translateY(-3px) rotate(3deg) scale(1.07)}}
@keyframes pf-twinkle{
  from{opacity:.25;transform:scale(.9)}
  to{opacity:1;transform:scale(1.05)}}
@keyframes pf-shine{
  0%,55%{left:-60%}
  85%,100%{left:130%}}

@media (prefers-reduced-motion: reduce){
  .play-fun, .btn.hh-play,
  .play-fun::before, .btn.hh-play::before,
  .play-fun::after, .btn.hh-play::after,
  .hb-in, .fr-gcard.secret, .hb-in::before, .fr-gcard.secret::before{animation:none !important}
}