/* juketype name tags: how a name's keycaps look on leaderboards and profiles.
   One class per tag on the .caps wrapper: <span class="ntag t-sky lite"><span class="caps">…</span></span>.
   Shared by /nametags (the shop) and /account (the picker). */
.ntag .caps{flex-wrap:nowrap;gap:.16em}
.ntag .key{font-weight:700;min-width:1.55em;height:1.65em;padding:0 .26em;border-radius:.2em;border-color:transparent;background-size:400% 100%;animation:holo var(--sp,3s) linear infinite;box-shadow:0 1px 3px rgba(20,20,30,.18)}
/* a dark halo keeps light letters readable; the pale tags (ivory, opal) use dark ink instead */
.ntag.lite .key{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7),0 0 4px rgba(0,0,0,.45);border-bottom-color:rgba(0,0,0,.45)}
.ntag.ink .key{color:#2a241a;text-shadow:0 1px 0 rgba(255,255,255,.75);border-bottom-color:rgba(90,70,40,.35)}

/* the first three are plain and still: the shimmer starts at sky */
.t-standard .key{animation:none;background:#6d7078}
.t-ivory .key{animation:none;background:#f6efe0}
.t-cobalt .key{animation:none;background:#1a56e8}
/* sky: soft sky blue drifting into periwinkle and lilac, slow and gentle */
.t-sky .key{--sp:4.5s;background-image:linear-gradient(100deg,#6cb8f5,#8aa2f7,#a993f2,#8aa2f7,#6cb8f5)}
/* opal: white opal, pastel fire */
.t-opal .key{--sp:3s;background-image:linear-gradient(100deg,#f7f3ff,#ffd6ec,#d4f4ff,#e3ffd9,#fff1c9,#f7f3ff)}
/* prism: the full rainbow */
.t-prism .key{--sp:2.2s;background-image:var(--holo-grad)}
/* jade: deep greens into teal */
.t-jade .key{--sp:3.2s;background-image:linear-gradient(100deg,#0f4a33,#1f8a5c,#2dd4bf,#1f8a5c,#0f4a33)}
/* amethyst: violet into magenta */
.t-amethyst .key{--sp:3s;background-image:linear-gradient(100deg,#4c1d95,#8b2fc9,#d946ef,#8b2fc9,#4c1d95)}
/* platinum aurora: northern lights; comes with Juketype Pro (a lifetime licence) */
.t-aurora .key{--sp:2.6s;background-image:linear-gradient(100deg,#0e7490,#2dd4bf,#818cf8,#e879f9,#38bdf8,#0e7490)}
/* jackpot black: pure black keys with thin gold edges, bright bands of violet, cyan, pink and
   amber sweeping across them. Its letters bob in a slow, soft wave, one after another, and as
   each comes back down it clicks into its key like a keystroke (translate + a shrinking edge, so
   the press and the bob never fight over transform). --i counts from the right: see nametags.js */
.t-jackpot .key{--sp:2.2s;border:1px solid #c9a23a;border-bottom:.16em solid #7a5d16;background-image:linear-gradient(100deg,#050507 0%,#8b5cf6 12%,#050507 25%,#22d3ee 37%,#050507 50%,#f472b6 62%,#050507 75%,#fbbf24 87%,#050507 100%);animation:holo var(--sp) linear infinite,tagbob 2.4s cubic-bezier(.45,0,.55,1) infinite,tagclick 2.4s ease-out infinite;animation-delay:0s,calc(var(--i,0) * -.16s),calc(var(--i,0) * -.16s)}
@keyframes tagbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-.13em)}}
@keyframes tagclick{0%,10%,100%{translate:0 0;border-bottom-width:.16em}3%{translate:0 .1em;border-bottom-width:.06em}}
@media (prefers-reduced-motion:reduce){.ntag .key{animation:none!important}}

/* ---- the same tags as plain lettering, for leaderboard rows: no keycaps, the tag's colours run
   through the letters and shimmer at the tag's pace. Pale tags take deeper shades so they read on a
   light row; jackpot black keeps its thin gold edge. <span class="ntext t-<id>">name</span> ---- */
.ntext{font-weight:700;background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:holo var(--sp,3s) linear infinite}
.ntext.t-standard{animation:none;background:none;color:#6d7078;-webkit-text-fill-color:#6d7078}
.ntext.t-ivory{animation:none;background:none;color:#a88b57;-webkit-text-fill-color:#a88b57}
.ntext.t-cobalt{animation:none;background:none;color:#1a56e8;-webkit-text-fill-color:#1a56e8}
.ntext.t-sky{--sp:4.5s;background-image:linear-gradient(100deg,#3d9ae8,#6a84f0,#9a72e6,#6a84f0,#3d9ae8)}
.ntext.t-opal{--sp:3s;background-image:linear-gradient(100deg,#b07ad6,#e0679f,#3fa7cf,#4fae63,#d39a2c,#b07ad6)}
.ntext.t-prism{--sp:2.2s;background-image:var(--holo-grad)}
.ntext.t-jade{--sp:3.2s;background-image:linear-gradient(100deg,#0f4a33,#1f8a5c,#14b8a6,#1f8a5c,#0f4a33)}
.ntext.t-amethyst{--sp:3s;background-image:linear-gradient(100deg,#4c1d95,#8b2fc9,#d946ef,#8b2fc9,#4c1d95)}
.ntext.t-aurora{--sp:2.6s;background-image:linear-gradient(100deg,#0e7490,#14b8a6,#6366f1,#d946ef,#0ea5e9,#0e7490)}
/* jackpot black: every letter carries the sweeping bands and bobs in a slow wave, clicking back down,
   the same motion as its keycaps on the profile */
.ntext.t-jackpot{background:none;animation:none;color:inherit;-webkit-text-fill-color:currentColor}
.ntext.t-jackpot span{display:inline-block;--sp:2.2s;background-image:linear-gradient(100deg,#050507 0%,#8b5cf6 12%,#050507 25%,#22d3ee 37%,#050507 50%,#f472b6 62%,#050507 75%,#fbbf24 87%,#050507 100%);background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:.5px #c9a23a;animation:holo var(--sp) linear infinite,tagbob 2.4s cubic-bezier(.45,0,.55,1) infinite,tagclick 2.4s ease-out infinite;animation-delay:0s,calc(var(--i,0) * -.16s),calc(var(--i,0) * -.16s)}
@media (prefers-reduced-motion:reduce){.ntext.t-jackpot span{animation:none!important}}
@media (prefers-reduced-motion:reduce){.ntext{animation:none!important}}

/* ---- supernova ($4999.99): a blinding white-blue star. Polished chrome-white keys with a prismatic
   sheen (faint rainbow refraction, like a cut diamond) sliding across them, an icy silver-blue rim,
   crisp dark letters, a cool blue aura, the jackpot wave and click, and a white four-point sparkle
   flashing on each key in turn ---- */
.ntag.t-nova .key{position:relative;overflow:visible;border:1px solid #ffffff;border-bottom:.16em solid #8d9bb8;
  background-image:linear-gradient(100deg,#dfe6f3 0%,#ffffff 12%,#ffd9f1 20%,#d6f3ff 28%,#ffffff 36%,#c9d3e6 50%,#ffffff 62%,#e3ffe9 70%,#e6dcff 78%,#ffffff 86%,#dfe6f3 100%);background-size:300% 100%;
  color:#141a2a;text-shadow:0 1px 0 rgba(255,255,255,.8);box-shadow:0 0 10px rgba(120,170,255,.5),0 1px 3px rgba(20,30,60,.25);
  animation:holo 2.6s linear infinite,tagbob 2.4s cubic-bezier(.45,0,.55,1) infinite,tagclick 2.4s ease-out infinite;
  animation-delay:calc(var(--i,0) * -.12s),calc(var(--i,0) * -.16s),calc(var(--i,0) * -.16s)}
.ntag.t-nova .key::after{content:'';position:absolute;top:-.3em;right:-.24em;width:.55em;height:.55em;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px #7fb8ff);transform:scale(0);pointer-events:none;animation:novaspark 2.4s ease-out infinite;animation-delay:calc(var(--i,0) * -.37s)}
@keyframes novaspark{0%,60%,100%{transform:scale(0) rotate(0)}70%{transform:scale(1) rotate(45deg)}82%{transform:scale(0) rotate(90deg)}}

/* ---- singularity ($9999.99): every key is a black hole. A rainbow accretion ring spins around its
   edge, light bends into a violet centre, the letters split into red and cyan like light at an event
   horizon and snap back, each key flares in turn, and the whole name floats in the wave ---- */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
/* the ring is a thicker border than any other tag's, so the side padding gives that thickness back: every
   key comes out exactly as wide as in the other tags, and wearing singularity never moves the page */
.ntag.t-singularity .key{position:relative;overflow:visible;border:.12em solid transparent;border-bottom-width:.16em;padding-inline:calc(.26em - .12em + 1px);
  background:radial-gradient(circle at 50% 50%,#000 0%,#000 36%,#160b2e 64%,#2b0f4d 100%) padding-box,conic-gradient(from var(--ang),#ff2d75,#ffb81a,#2bff88,#1fe0ff,#4d7dff,#d43dff,#ff2d75) border-box;
  color:#fff;text-shadow:0 0 6px rgba(190,140,255,.9);
  animation:singspin 1.6s linear infinite,singsplit 2.4s ease-in-out infinite,tagbob 2.4s cubic-bezier(.45,0,.55,1) infinite,singflare 2.4s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -.2s),calc(var(--i,0) * -.16s),calc(var(--i,0) * -.16s),calc(var(--i,0) * -.3s)}
@keyframes singspin{to{--ang:360deg}}
@keyframes singsplit{0%,100%{text-shadow:0 0 6px rgba(190,140,255,.9)}45%{text-shadow:-.09em 0 0 #ff2d75,.09em 0 0 #1fe0ff,0 0 8px rgba(190,140,255,.9)}55%{text-shadow:.05em 0 0 #ff2d75,-.05em 0 0 #1fe0ff,0 0 10px #fff}}
@keyframes singflare{0%,68%,100%{box-shadow:0 0 6px rgba(160,90,255,.5)}80%{box-shadow:0 0 12px rgba(255,80,220,.9),0 0 20px rgba(31,224,255,.4)}}

/* their leaderboard lettering moves the same way: supernova is icy blue with a prismatic sweep and a cool glow,
   singularity is near-black ink with a slow band of violet light bending through each letter in turn */
.ntext.t-nova,.ntext.t-singularity{background:none;animation:none;color:inherit;-webkit-text-fill-color:currentColor}
.ntext.t-nova span{display:inline-block;background-image:linear-gradient(100deg,#3b5fa8 0%,#7f9fe0 18%,#b07ad6 32%,#3fa7cf 46%,#3b5fa8 60%,#7f9fe0 78%,#3b5fa8 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 3px rgba(120,170,255,.55));
  animation:holo 2.6s linear infinite,tagbob 2.4s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i,0) * -.12s),calc(var(--i,0) * -.16s)}
.ntext.t-singularity span{display:inline-block;background-image:linear-gradient(100deg,#0c0818 0%,#0c0818 34%,#6d28d9 44%,#c4b5fd 50%,#6d28d9 56%,#0c0818 66%,#0c0818 100%);background-size:400% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  animation:holo 3.6s linear infinite,tagbob 2.4s cubic-bezier(.45,0,.55,1) infinite;animation-delay:calc(var(--i,0) * -.1s),calc(var(--i,0) * -.16s)}
@media (prefers-reduced-motion:reduce){.ntag.t-nova .key,.ntag.t-nova .key::after,.ntag.t-singularity .key,.ntext.t-nova span,.ntext.t-singularity span{animation:none!important}}

/* ---- lettering on the dark site: the deep tags lift so they read on black ---- */
.jt-dark .ntext.t-cobalt{color:#5b8cff;-webkit-text-fill-color:#5b8cff}
.jt-dark .ntext.t-jade{background-image:linear-gradient(100deg,#2bd88f,#5eead4,#a7f3d0,#5eead4,#2bd88f)}
.jt-dark .ntext.t-amethyst{background-image:linear-gradient(100deg,#a78bfa,#d946ef,#f0abfc,#d946ef,#a78bfa)}
.jt-dark .ntext.t-jackpot span{background-image:linear-gradient(100deg,#f4f4fa 0%,#8b5cf6 12%,#f4f4fa 25%,#22d3ee 37%,#f4f4fa 50%,#f472b6 62%,#f4f4fa 75%,#fbbf24 87%,#f4f4fa 100%)}
.jt-dark .ntext.t-singularity span{background-image:linear-gradient(100deg,#ece8ff 0%,#ece8ff 34%,#8b5cf6 44%,#ffffff 50%,#8b5cf6 56%,#ece8ff 66%,#ece8ff 100%)}

/* ---- a tagged leaderboard row's rank key, a real key in the tag (nametagRank) standing in for the plain
   numbered ::before, which steps aside; the row itself counts so the numbers keep going ---- */
.lb li.tagged{counter-increment:lb}
.lb li.tagged::before{display:none}
.lbrank{flex:none;display:inline-flex}
.lbrank .key{width:20px;min-width:20px;height:20px;padding:0;font-size:11px;border-radius:4px}
.lbzone .lbrank .key{width:27px;min-width:27px;height:27px;font-size:14px;border-radius:5px}

/* a name typing itself out: each keycap is hidden until its turn, then pops in (opacity and scale only,
   so the tags' own moving transforms keep running) */
.ntag .key{transition:opacity .08s,scale .14s cubic-bezier(.2,1.4,.4,1)}
.ntag .key.typein{opacity:0;scale:.85}