/* SaitoDex 3.20: supporter extras that show on any theme.
 *   - binder skins (binders/skins.py) on binder covers and the skin picker;
 *   - profile rings round the picture on a public profile;
 *   - the Supporter extras section of the Account page.
 * Card pictures are never covered or recoloured.
 */

/* ------------------------------------------------------- binder skins -- */
.binder-skin{isolation:isolate}
.binder-skin .binder-skin-art{position:absolute;inset:0;z-index:0;pointer-events:none}
.binder-skin img,.binder-skin .binder-cover-grid,.binder-skin strong{z-index:1}
.binder-skin .binder-cover-spine{z-index:2}
/* A glossy sheen that sweeps across on hover, like light on lacquer. */
.binder-skin:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 48%,transparent 60%);background-size:260% 100%;background-position:120% 0;transition:background-position .9s ease}
.binder-shelf-cover:hover .binder-skin:after,.binder-shelf-cover:focus-visible .binder-skin:after,.binder-skin-option:hover .binder-skin:after{background-position:-30% 0}

.binder-skin-sakura{background:radial-gradient(ellipse at 80% 0%,#6b1f45 0%,transparent 60%),linear-gradient(160deg,#4a1330 0%,#2a0a1c 55%,#17050f 100%)!important;border-color:rgba(255,170,200,.3)!important}
.binder-skin-sakura .binder-skin-art{background:url("../../img/supporter/skins/sakura.db08219de614.svg") center/cover no-repeat}
.binder-skin-sakura strong{color:#ffe6ef!important}
.binder-skin-sakura .binder-cover-grid i{border-color:rgba(255,190,212,.28)!important}

.binder-skin-seigaiha{background:#0e1d46!important;border-color:rgba(201,214,240,.28)!important}
.binder-skin-seigaiha .binder-skin-art{opacity:.55;
  background-color:#0e1d46;
  background-image:
    radial-gradient(circle at 100% 150%,#0e1d46 24%,#c9d6f0 24% 27%,#0e1d46 27% 36%,#c9d6f0 36% 39%,transparent 39%),
    radial-gradient(circle at 0 150%,#0e1d46 24%,#c9d6f0 24% 27%,#0e1d46 27% 36%,#c9d6f0 36% 39%,transparent 39%),
    radial-gradient(circle at 50% 100%,#c9d6f0 10%,#0e1d46 10% 23%,#c9d6f0 23% 28%,#0e1d46 28% 43%,#c9d6f0 43% 48%,#0e1d46 48% 63%,#c9d6f0 63% 68%,transparent 68%),
    radial-gradient(circle at 100% 50%,#c9d6f0 5%,#0e1d46 5% 15%,#c9d6f0 15% 19%,#0e1d46 19% 29%,#c9d6f0 29% 33%,#0e1d46 33% 44%,#c9d6f0 44% 48%,transparent 48%),
    radial-gradient(circle at 0 50%,#c9d6f0 5%,#0e1d46 5% 15%,#c9d6f0 15% 19%,#0e1d46 19% 29%,#c9d6f0 29% 33%,#0e1d46 33% 44%,#c9d6f0 44% 48%,transparent 48%);
  background-size:44px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.35) 70%,#000 100%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.35) 70%,#000 100%)}
.binder-skin-seigaiha strong{color:#eef3ff!important}
.binder-skin-seigaiha .binder-cover-grid i{border-color:rgba(201,214,240,.3)!important}

.binder-skin-kintsugi{background:radial-gradient(ellipse at 30% 10%,#2c2620,transparent 60%),linear-gradient(160deg,#1b1813,#0b0a08)!important;border-color:rgba(201,154,62,.45)!important;box-shadow:inset 0 0 0 1px rgba(201,154,62,.25)}
.binder-skin-kintsugi .binder-skin-art{background:url("../../img/supporter/skins/kintsugi.3219c82e0bde.svg") center/100% 100% no-repeat;opacity:.9}
.binder-skin-kintsugi strong{color:#f3d58a!important}
.binder-skin-kintsugi .binder-cover-grid i{border-color:rgba(201,154,62,.35)!important}

.binder-skin-neon{background:linear-gradient(180deg,#0a1528,#05080f 60%,#0b0718)!important;border-color:rgba(46,230,255,.45)!important;box-shadow:0 0 0 1px rgba(255,62,165,.35),0 0 18px rgba(46,230,255,.18)}
.binder-skin-neon .binder-skin-art{overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,62,165,.45),inset 0 0 16px rgba(255,62,165,.28)}
.binder-skin-neon .binder-skin-art:before{content:"";position:absolute;left:-40%;right:-40%;bottom:-6%;height:48%;
  background:linear-gradient(rgba(46,230,255,.5) 1px,transparent 1px) 0 0/100% 16px,linear-gradient(90deg,rgba(255,62,165,.45) 1px,transparent 1px) 0 0/22px 100%;
  transform:perspective(160px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.binder-skin-neon .binder-skin-art:after{content:"";position:absolute;left:0;right:0;top:52%;height:2px;background:linear-gradient(90deg,transparent,#2ee6ff,transparent);box-shadow:0 0 12px #2ee6ff}
.binder-skin-neon strong{color:#e9fdff!important;text-shadow:0 0 8px rgba(46,230,255,.8)}
.binder-skin-neon .binder-cover-grid i{border-color:rgba(46,230,255,.35)!important}

/* Inside an open skinned binder: the same art on every page, behind the
 * pockets, so the skin is the whole binder and not just its cover. The
 * pockets turn to clear sleeves so the art shows round the cards. */
:root .binder-skinned :is(.binder-page,.binder-ghost){isolation:isolate}
:root .binder-skinned :is(.binder-page,.binder-ghost):before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit}
:root .binder-skinned .binder-spread:not(.is-single) .binder-page:first-child:before,:root .binder-skinned .binder-ghost.is-left:before{transform:scaleX(-1)}
:root .binder-skinned .binder-page-grid{position:relative;z-index:1}
:root .binder-skinned .binder-pocket{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),inset 0 14px 22px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.25);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
:root .binder-skinned .binder-pocket.is-empty{background:rgba(255,255,255,.02);-webkit-backdrop-filter:none;backdrop-filter:none}
:root .binder-skinned .binder-page-number{z-index:1;text-shadow:0 1px 4px rgba(0,0,0,.7)}

/* Sakura: plum lacquer, a blossoming branch from the outer corner, petals drifting down. */
:root .binder-skin-in-sakura :is(.binder-page,.binder-ghost){background:radial-gradient(ellipse 80% 60% at 100% 0%,#5c1a3c,transparent 70%),linear-gradient(170deg,#3a0f27,#21081a 55%,#14040e)!important;border-color:rgba(255,170,200,.22)!important}
:root .binder-skin-in-sakura :is(.binder-page,.binder-ghost):before{
  background:url("../../img/supporter/skins/sakura-page.a706761d2aaa.svg") right top/min(78%,460px) auto no-repeat,url("../../img/supporter/skins/sakura-petals.cff0d862996f.svg") 0 0/260px 260px repeat;
  opacity:.85;animation:bs-petals 38s linear infinite}
@keyframes bs-petals{to{background-position:right top,-260px 520px}}
:root .binder-skin-in-sakura .binder-pocket{border-color:rgba(255,190,212,.26)}
:root .binder-skin-in-sakura .binder-page-number{color:#ffc2d4}

/* Seigaiha: indigo waves rising from the bottom of each page, with moonlight sweeping across. */
:root .binder-skin-in-seigaiha :is(.binder-page,.binder-ghost){background:radial-gradient(circle at 84% 9%,#f4ecd6 0 26px,rgba(244,236,214,.28) 28px,rgba(201,214,240,.10) 60px,transparent 120px),radial-gradient(ellipse 60% 40% at 85% 6%,rgba(201,214,240,.16),transparent 70%),linear-gradient(180deg,#0b1736,#0e1d46 60%,#0a1638)!important;border-color:rgba(201,214,240,.22)!important}
:root .binder-skin-in-seigaiha :is(.binder-page,.binder-ghost):before{opacity:.5;
  background-image:
    linear-gradient(105deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%),
    radial-gradient(circle at 100% 150%,#0e1d46 24%,#c9d6f0 24% 27%,#0e1d46 27% 36%,#c9d6f0 36% 39%,transparent 39%),
    radial-gradient(circle at 0 150%,#0e1d46 24%,#c9d6f0 24% 27%,#0e1d46 27% 36%,#c9d6f0 36% 39%,transparent 39%),
    radial-gradient(circle at 50% 100%,#c9d6f0 10%,#0e1d46 10% 23%,#c9d6f0 23% 28%,#0e1d46 28% 43%,#c9d6f0 43% 48%,#0e1d46 48% 63%,#c9d6f0 63% 68%,transparent 68%),
    radial-gradient(circle at 100% 50%,#c9d6f0 5%,#0e1d46 5% 15%,#c9d6f0 15% 19%,#0e1d46 19% 29%,#c9d6f0 29% 33%,#0e1d46 33% 44%,#c9d6f0 44% 48%,transparent 48%),
    radial-gradient(circle at 0 50%,#c9d6f0 5%,#0e1d46 5% 15%,#c9d6f0 15% 19%,#0e1d46 19% 29%,#c9d6f0 29% 33%,#0e1d46 33% 44%,#c9d6f0 44% 48%,transparent 48%);
  background-size:300% 100%,56px 28px,56px 28px,56px 28px,56px 28px,56px 28px;background-position:110% 0,0 100%,0 100%,0 100%,0 100%,0 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.25) 35%,#000 100%);
  animation:bs-moon 14s ease-in-out infinite}
@keyframes bs-moon{0%,100%{background-position:110% 0,0 100%,0 100%,0 100%,0 100%,0 100%}50%{background-position:-10% 0,0 100%,0 100%,0 100%,0 100%,0 100%}}
:root .binder-skin-in-seigaiha .binder-pocket{border-color:rgba(201,214,240,.25)}
:root .binder-skin-in-seigaiha .binder-page-number{color:#c9d6f0}

/* Kintsugi: black urushi lacquer mended right across with gold, glinting now and then. */
:root .binder-skin-in-kintsugi :is(.binder-page,.binder-ghost){background:radial-gradient(ellipse 70% 50% at 20% 0%,#2c2620,transparent 70%),linear-gradient(170deg,#1b1813,#0b0a08)!important;border-color:rgba(201,154,62,.4)!important}
:root .binder-skin-in-kintsugi :is(.binder-page,.binder-ghost):before{background:url("../../img/supporter/skins/kintsugi-page.dac4de0a745c.svg") center/100% 100% no-repeat;opacity:.8;animation:bs-glint 10s ease-in-out infinite}
@keyframes bs-glint{0%,80%,100%{filter:none}88%{filter:brightness(1.4) drop-shadow(0 0 4px rgba(243,213,138,.7))}}
:root .binder-skin-in-kintsugi .binder-pocket{border-color:rgba(201,154,62,.3)}
:root .binder-skin-in-kintsugi .binder-page-number{color:#e8c26a}

/* Neon: a midnight grid rolling towards a glowing horizon, neon tube edges. */
:root .binder-skin-in-neon :is(.binder-page,.binder-ghost){background:linear-gradient(90deg,transparent,#2ee6ff 20% 80%,transparent) 0 45%/100% 2px no-repeat,radial-gradient(ellipse 60% 14px at 50% 45%,rgba(46,230,255,.45),transparent) 0 0/100% 100% no-repeat,radial-gradient(ellipse 70% 30% at 50% 45%,rgba(255,62,165,.16),transparent 70%),linear-gradient(180deg,#0a1528,#05080f 55%,#0b0718)!important;border-color:rgba(46,230,255,.4)!important;box-shadow:inset 0 0 0 1px rgba(255,62,165,.3),inset 0 0 26px rgba(255,62,165,.16)!important}
:root .binder-skin-in-neon :is(.binder-page,.binder-ghost):before{top:auto;height:55%;
  background:linear-gradient(rgba(46,230,255,.45) 1px,transparent 1px) 0 0/100% 34px,linear-gradient(90deg,rgba(255,62,165,.4) 1px,transparent 1px) 0 0/46px 100%;
  transform:perspective(260px) rotateX(60deg);transform-origin:50% 100%;border-radius:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 45%);mask-image:linear-gradient(180deg,transparent,#000 45%);animation:bs-grid 3s linear infinite}
:root .binder-skinned.binder-skin-in-neon .binder-spread:not(.is-single) .binder-page:first-child:before,:root .binder-skin-in-neon .binder-ghost.is-left:before{transform:perspective(260px) rotateX(60deg)}
@keyframes bs-grid{to{background-position:0 34px,0 0}}
:root .binder-skin-in-neon .binder-pocket{border-color:rgba(46,230,255,.3)}
:root .binder-skin-in-neon .binder-page-number{color:#7ff3ff;text-shadow:0 0 8px rgba(46,230,255,.8)}

/* Page-turn effects (js/supporter/binder-fx.js), laid over the turning page. */
.bfx-layer{position:absolute;inset:0;z-index:7;pointer-events:none;perspective:600px}
.bfx-layer>i{position:absolute;left:0;top:0;display:block;will-change:transform,opacity}
.bfx-petal{border-radius:70% 0 70% 0;background:linear-gradient(135deg,#fff0f4,#ff8fb0 65%,#f2387d);box-shadow:0 1px 3px rgba(80,0,30,.35)}
.bfx-drop{border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#c9d6f0 45%,rgba(120,150,210,.6));box-shadow:0 0 6px rgba(201,214,240,.6)}
.bfx-wave{top:0;bottom:0;width:120px;margin-left:-60px;
  background:radial-gradient(ellipse 30% 50% at 50% 50%,rgba(240,246,255,.75),transparent 70%),
    repeating-radial-gradient(circle at 50% 120%,rgba(201,214,240,.0) 0 8px,rgba(201,214,240,.35) 8px 10px);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35% 65%,transparent);mask-image:linear-gradient(90deg,transparent,#000 35% 65%,transparent);filter:blur(.4px)}
.bfx-flake{border-radius:1px 4px 1px 3px;background:linear-gradient(110deg,#8a5c16,#f3d58a 40%,#fff6d6 50%,#c99a3e 70%,#8a5c16);box-shadow:0 0 4px rgba(243,213,138,.7)}
.bfx-glint{left:50%!important;top:4%!important;bottom:4%;width:3px;margin-left:-1.5px;background:linear-gradient(180deg,transparent,#fff3cf 20%,#e8c26a 50%,#fff3cf 80%,transparent);
  box-shadow:0 0 10px #f3d58a,0 0 22px rgba(243,213,138,.7);transform-origin:50% 50%}
.bfx-scan{top:0;bottom:0;width:3px;margin-left:-1.5px;background:#bffaff;box-shadow:0 0 6px #2ee6ff,0 0 14px #2ee6ff,0 0 30px rgba(255,62,165,.8)}
.bfx-spark{width:18px;height:2.5px;border-radius:2px;background:#7ff3ff;box-shadow:0 0 6px #2ee6ff}
.bfx-spark.is-pink{background:#ff8fd0;box-shadow:0 0 6px #ff3ea5}
.binder-spread.bfx-glitch{animation:bfx-glitch .26s steps(2) 1}
@keyframes bfx-glitch{0%{filter:drop-shadow(3px 0 0 rgba(255,62,165,.75)) drop-shadow(-3px 0 0 rgba(46,230,255,.75))}50%{filter:drop-shadow(-2px 0 0 rgba(255,62,165,.75)) drop-shadow(2px 0 0 rgba(46,230,255,.75))}100%{filter:none}}
@media (prefers-reduced-motion:reduce){.bfx-layer{display:none}}

/* The picker on the binder form. */
.binder-skins legend,.binder-skins-locked-title{display:flex;align-items:center;gap:10px}
.binder-skin-tag{display:inline-block;padding:3px 8px;border-radius:999px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;background:linear-gradient(100deg,#b8862a,#f5d58a,#c99a3e);color:#1b1408;font-weight:700}
.binder-skin-help{margin:6px 0 12px;font-size:12px;opacity:.8}
.binder-skin-options{display:flex;flex-wrap:wrap;gap:12px}
.binder-skin-option{position:relative;display:grid;justify-items:center;gap:6px;cursor:pointer;font-size:11px;letter-spacing:.06em}
.binder-skin-option input{position:absolute;opacity:0;pointer-events:none}
.binder-skin-preview{position:relative;display:block;width:64px;aspect-ratio:5/7;border-radius:6px 9px 9px 6px;overflow:hidden;border:1px solid rgba(127,127,127,.35);background:linear-gradient(160deg,#1a1a1a,#0c0c0c);transition:transform .2s,box-shadow .2s}
.binder-skin-option:hover .binder-skin-preview{transform:translateY(-2px)}
.binder-skin-option input:checked+.binder-skin-preview{box-shadow:0 0 0 2px var(--pink,#f2387d),0 8px 18px rgba(0,0,0,.3)}
.binder-skin-option input:focus-visible+.binder-skin-preview{outline:2px solid var(--pink,#f2387d);outline-offset:3px}
.binder-skins.is-locked .binder-skin-option{cursor:default;opacity:.75}
.binder-skins.is-locked .binder-skin-preview{filter:saturate(.8)}

/* ------------------------------------------------------- profile rings -- */
.supporter-ring{position:relative;display:inline-grid;place-items:center;border-radius:50%;padding:5px;isolation:isolate}
.supporter-ring:before{content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;animation:sr-spin 6s linear infinite}
.supporter-ring:after{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-2;filter:blur(10px);opacity:.55;animation:sr-spin 6s linear infinite}
.supporter-ring .public-profile-avatar,.supporter-ring .account-ring-avatar{border:3px solid var(--bg,#0a0a0a)!important}
@keyframes sr-spin{to{transform:rotate(360deg)}}
.supporter-ring-sakura:before,.supporter-ring-sakura:after{background:conic-gradient(from 0deg,#ffb3cb,#ff5c93,#ffe1ea,#ff7aa6,#ffb3cb)}
.supporter-ring-neon:before,.supporter-ring-neon:after{background:conic-gradient(from 0deg,#2ee6ff,#7ff3ff,#ff3ea5,#2ee6ff 55%,#ff3ea5 80%,#2ee6ff)}
.supporter-ring-neon:before{animation-duration:3s}
.supporter-ring-gold:before,.supporter-ring-gold:after{background:conic-gradient(from 0deg,#8a5c16,#e8c26a,#fff3cf,#c99a3e,#8a5c16,#f3d58a,#a8761f,#8a5c16)}
.supporter-ring-gold:before{animation-duration:9s}
/* Sakura: petals come loose from the spinning ring and blow away. */
.supporter-ring-sakura .sr-fx{position:absolute;inset:0;pointer-events:none;container-type:size;animation:sr-spin 6s linear infinite}
.supporter-ring-sakura .sr-fx i{position:absolute;left:50%;top:50%;width:max(9px,8.5cqmin);height:max(7px,6.6cqmin);translate:-50% -50%;border-radius:70% 0 70% 0;
  background:linear-gradient(135deg,#ffe3ec,#ff7aa6 70%,#f2387d);filter:drop-shadow(0 0 1px rgba(140,20,60,.35));opacity:0;animation:sr-fly 4.2s cubic-bezier(.2,.6,.4,1) infinite;
  --a:0deg;--d:0s;--s:1}
.supporter-ring-sakura .sr-fx i:nth-child(1){--a:20deg;--d:0s}
.supporter-ring-sakura .sr-fx i:nth-child(2){--a:75deg;--d:-.6s;--s:.8}
.supporter-ring-sakura .sr-fx i:nth-child(3){--a:130deg;--d:-1.2s;--s:1.1}
.supporter-ring-sakura .sr-fx i:nth-child(4){--a:185deg;--d:-1.8s;--s:.85}
.supporter-ring-sakura .sr-fx i:nth-child(5){--a:240deg;--d:-2.4s}
.supporter-ring-sakura .sr-fx i:nth-child(6){--a:290deg;--d:-3s;--s:.75}
.supporter-ring-sakura .sr-fx i:nth-child(7){--a:340deg;--d:-3.6s;--s:.95}
.supporter-ring-sakura .sr-fx i{animation-delay:var(--d)}
@keyframes sr-fly{
  0%{opacity:0;transform:rotate(var(--a)) translateY(-47cqmin) rotate(0deg) scale(calc(var(--s) * .5))}
  10%{opacity:1;transform:rotate(var(--a)) translateY(-50cqmin) rotate(40deg) scale(var(--s))}
  65%{opacity:.85}
  100%{opacity:0;transform:rotate(calc(var(--a) + 34deg)) translateY(calc(-50cqmin - 30px)) rotate(260deg) scale(calc(var(--s) * .7))}}
.sr-fx{position:absolute;inset:0;pointer-events:none;container-type:size}
.sr-fx i{display:none}
.supporter-ring-sakura .sr-fx i{display:block}

/* Koi: a ripple of pond water, a kohaku and a golden ogon chasing round it. */
.supporter-ring-koi:before,.supporter-ring-koi:after{background:conic-gradient(from 0deg,#06313a,#1d7f86,#bfe9e4,#1d7f86,#06313a,#14606a,#9fdcd6,#06313a)}
.supporter-ring-koi:before{animation-duration:11s}
.supporter-ring-koi .sr-fx{animation:sr-spin 8s linear infinite}
.supporter-ring-koi .sr-fx i:nth-child(-n+2){display:block;position:absolute;left:50%;top:50%;width:max(22px,24cqmin);height:max(8px,8.5cqmin);
  translate:-50% -50%;transform:rotate(var(--a,0deg)) translateY(-49cqmin);border-radius:42% 58% 58% 42%/50%;
  background:radial-gradient(ellipse 30% 42% at 66% 42%,#e8432a 0 92%,transparent 100%),radial-gradient(ellipse 18% 36% at 34% 58%,#e8432a 0 90%,transparent 100%),linear-gradient(#fffaf2,#efe6d8);
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.supporter-ring-koi .sr-fx i:nth-child(2){--a:180deg;background:radial-gradient(ellipse 40% 30% at 60% 40%,#fff6cf,transparent 70%),linear-gradient(#ffd56b,#e2a12c)}
/* tail and fins */
.supporter-ring-koi .sr-fx i:before{content:"";position:absolute;right:92%;top:50%;width:46%;height:150%;translate:0 -50%;background:inherit;opacity:.8;
  clip-path:polygon(100% 44%,100% 56%,0 100%,22% 50%,0 0);transform-origin:100% 50%;animation:sr-tail .5s ease-in-out infinite alternate}
.supporter-ring-koi .sr-fx i:after{content:"";position:absolute;left:46%;top:-55%;width:22%;height:210%;
  background:radial-gradient(ellipse 50% 22% at 50% 12%,rgba(255,255,255,.4),transparent),radial-gradient(ellipse 50% 22% at 50% 88%,rgba(255,255,255,.4),transparent)}
@keyframes sr-tail{from{transform:scaleY(.75) skewY(-10deg)}to{transform:scaleY(1) skewY(10deg)}}

/* Raijin: violet storm light, with real lightning arcs crackling along
   the ring (branching bolts drawn in img/supporter/rings/raijin-*.svg). */
.supporter-ring-raiden:before,.supporter-ring-raiden:after{background:conic-gradient(from 0deg,#120634,#5a28d6,#d9c8ff,#5a28d6,#120634,#3a1896,#b48cff,#120634)}
.supporter-ring-raiden:before{animation-duration:3.2s}
.supporter-ring-raiden:after{animation:sr-spin 3.2s linear infinite,sr-storm 3.1s steps(1) infinite}
@keyframes sr-storm{0%,100%{opacity:.5}20%{opacity:1}22%{opacity:.6}24%{opacity:1}34%{opacity:.5}66%{opacity:.95}69%{opacity:.5}}
.supporter-ring-raiden .sr-fx i:nth-child(-n+4){display:block;position:absolute;inset:-14%;background:url("../../img/supporter/rings/raijin-1.c251396bb33e.svg") center/100% 100% no-repeat;
  filter:drop-shadow(0 0 3px rgba(150,100,255,.9));opacity:0;transform:rotate(var(--a));animation:sr-arc 3.1s steps(1) infinite}
.supporter-ring-raiden .sr-fx i:nth-child(1){--a:25deg;--b:190deg}
.supporter-ring-raiden .sr-fx i:nth-child(2){--a:120deg;--b:305deg;background-image:url("../../img/supporter/rings/raijin-2.29c808ca9749.svg");animation-duration:2.7s;animation-delay:-1.1s}
.supporter-ring-raiden .sr-fx i:nth-child(3){--a:230deg;--b:60deg;background-image:url("../../img/supporter/rings/raijin-3.e1d8248b207f.svg");animation-duration:3.7s;animation-delay:-2.2s}
.supporter-ring-raiden .sr-fx i:nth-child(4){--a:320deg;--b:150deg;background-image:url("../../img/supporter/rings/raijin-4.a03fbda14188.svg");animation-duration:2.3s;animation-delay:-.6s}
/* flash, flicker, gone; then strike again somewhere else on the ring */
@keyframes sr-arc{
  0%{opacity:0;transform:rotate(var(--a))}
  8%{opacity:1;transform:rotate(var(--a))}
  10%{opacity:.2;transform:rotate(var(--a))}
  12%{opacity:1;transform:rotate(var(--a)) scaleX(-1)}
  18%{opacity:0}
  42%{opacity:1;transform:rotate(var(--b))}
  44%{opacity:.25;transform:rotate(var(--b))}
  46%{opacity:1;transform:rotate(var(--b)) scaleY(-1)}
  52%{opacity:0}
  76%{opacity:.9;transform:rotate(calc(var(--a) + 100deg)) scaleX(-1)}
  81%{opacity:0}
  100%{opacity:0}}
/* Manga: black and white speed lines that jolt round, halftone dots and a ドン!. */
.supporter-ring-manga:before{background:conic-gradient(#fff 0 0);box-shadow:0 0 0 2px #111,inset 0 0 0 1.5px #111}
.supporter-ring-manga:before{animation:none}
/* focus lines bursting outward, like a manga reveal panel */
.supporter-ring-manga:after{inset:-16px;filter:none;opacity:.9;animation:sr-spin 2.4s steps(9) infinite;
  background:repeating-conic-gradient(from 0deg,var(--ink,#fff) 0 1.4deg,transparent 1.4deg 6deg,var(--ink,#fff) 6deg 7deg,transparent 7deg 13deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 66%,#000 72%,rgba(0,0,0,.35) 88%,transparent 100%);mask-image:radial-gradient(circle closest-side,transparent 66%,#000 72%,rgba(0,0,0,.35) 88%,transparent 100%)}
.supporter-ring-manga .public-profile-avatar,.supporter-ring-manga .account-ring-avatar{box-shadow:0 0 0 2px #111}
.supporter-ring-manga .sr-fx i:nth-child(1){display:block;position:absolute;right:-14%;top:-8%;font-style:normal;transform:rotate(12deg) scale(0);transform-origin:30% 80%;animation:sr-don 3.4s cubic-bezier(.3,1.6,.5,1) infinite}
.supporter-ring-manga .sr-fx i:nth-child(1):before{content:"ドン!";display:block;font:900 max(12px,15cqmin)/1 "Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;color:#e8202a;
  -webkit-text-stroke:3px #fff;paint-order:stroke fill;letter-spacing:-.04em;white-space:nowrap;text-shadow:2px 2px 0 #111}
@keyframes sr-don{0%,30%{transform:rotate(12deg) scale(0)}36%{transform:rotate(12deg) scale(1.15)}40%,86%{transform:rotate(12deg) scale(1)}92%,100%{transform:rotate(12deg) scale(0)}}

/* Foxfire: kitsunebi, blue fox flames drifting round a moonlit ring. */
.supporter-ring-foxfire:before,.supporter-ring-foxfire:after{background:conic-gradient(from 0deg,#071531,#1b5fff,#9ff6ff,#071531 40%,#1b5fff 70%,#9ff6ff 85%,#071531)}
.supporter-ring-foxfire:before{animation-duration:9s}
.supporter-ring-foxfire .sr-fx{animation:sr-spin 10s linear infinite reverse}
.supporter-ring-foxfire .sr-fx i:nth-child(-n+3){display:block;position:absolute;left:50%;top:50%;width:max(9px,10cqmin);height:max(9px,10cqmin);translate:-50% -50%;
  transform:rotate(var(--a)) translateY(calc(-50cqmin - 6px)) rotate(-45deg);border-radius:50% 0 50% 50%;
  background:radial-gradient(circle at 62% 38%,#ffffff 0 14%,#b9fbff 30%,#38c8ff 62%,rgba(27,95,255,.2) 100%);
  filter:drop-shadow(0 0 4px #38c8ff) drop-shadow(0 0 9px rgba(27,95,255,.8));animation:sr-flame 1.3s ease-in-out infinite alternate}
.supporter-ring-foxfire .sr-fx i:nth-child(1){--a:0deg}
.supporter-ring-foxfire .sr-fx i:nth-child(2){--a:120deg;animation-delay:-.45s}
.supporter-ring-foxfire .sr-fx i:nth-child(3){--a:240deg;animation-delay:-.9s}
@keyframes sr-flame{from{scale:.82;opacity:.75}to{scale:1.12;opacity:1}}

/* -------------------------------------------------------- name effects -- */
.name-fx{position:relative;display:inline-block;isolation:isolate}
/* Gold leaf: real leaf colours with a shine running across now and then. */
.name-fx-gold{color:transparent;background:linear-gradient(100deg,#8a5c16 0%,#c99a3e 18%,#f3d58a 34%,#fff6d6 42%,#e8c26a 50%,#a8761f 66%,#e8c26a 84%,#8a5c16 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));animation:nfx-shine 6s ease-in-out infinite}
@keyframes nfx-shine{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}
/* Neon: a sign that buzzes into life, then hums. */
.name-fx-neon{color:#f2feff;text-shadow:0 0 2px #fff,0 0 8px #2ee6ff,0 0 18px #2ee6ff,0 0 34px #ff3ea5;animation:nfx-on 1.4s steps(1) both,nfx-hum 4.5s ease-in-out 1.4s infinite}
@keyframes nfx-on{0%{opacity:.15;text-shadow:none}12%{opacity:1}16%{opacity:.25;text-shadow:none}24%{opacity:1}30%{opacity:.4}38%,100%{opacity:1}}
@keyframes nfx-hum{0%,100%{text-shadow:0 0 2px #fff,0 0 8px #2ee6ff,0 0 18px #2ee6ff,0 0 34px #ff3ea5}50%{text-shadow:0 0 2px #fff,0 0 10px #2ee6ff,0 0 24px #2ee6ff,0 0 44px #ff3ea5}}
/* Sakura: blossom pink, with petals drifting down past the letters. */
.name-fx-sakura{color:transparent;background:linear-gradient(180deg,#ffd3e0 0%,#ff8fb0 45%,#f2387d 100%);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 6px rgba(242,56,125,.35))}
.name-fx-sakura:after{content:"";position:absolute;inset:-30% -6%;pointer-events:none;background:url("../../img/supporter/skins/sakura-petals.cff0d862996f.svg") 0 0/150px 150px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 25% 75%,transparent);mask-image:linear-gradient(180deg,transparent,#000 25% 75%,transparent);animation:nfx-petals 9s linear infinite}
@keyframes nfx-petals{to{background-position:-150px 300px}}
/* Sumi brush: a sweep of ink, in the theme's accent, painted under the name. */
.name-fx-sumi:before{content:"";position:absolute;left:-4%;right:-6%;bottom:-2%;height:46%;z-index:-1;background:var(--pink,#f2387d);opacity:.85;
  -webkit-mask:url("../../img/supporter/name/sumi-swash.8ae5e01eaca9.svg") 0 0/100% 100% no-repeat;mask:url("../../img/supporter/name/sumi-swash.8ae5e01eaca9.svg") 0 0/100% 100% no-repeat;
  clip-path:inset(0 100% 0 0);animation:nfx-sweep 1.1s cubic-bezier(.6,0,.2,1) .3s forwards}
@keyframes nfx-sweep{to{clip-path:inset(0 0 0 0)}}
/* Manga: inked letters, a hard shadow, speed lines rushing past and a ドン!. */
.name-fx-manga{color:#fff;-webkit-text-stroke:.07em #111;paint-order:stroke fill;text-shadow:.06em .06em 0 #111;font-weight:900;font-style:italic;padding-right:.15em}
.name-fx-manga:before{content:"";position:absolute;inset:8% -12% 8% -24%;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(180deg,var(--ink,#fff) 0 1.5px,transparent 1.5px 9px,var(--ink,#fff) 9px 10px,transparent 10px 17px);opacity:.35;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30% 70%,transparent);mask-image:linear-gradient(90deg,transparent,#000 30% 70%,transparent);animation:nfx-speed .5s linear infinite}
@keyframes nfx-speed{from{background-position:0 0}to{background-position:0 17px}}
.name-fx-manga:after{content:"ドン!";position:absolute;right:-.62em;top:-.12em;font:900 .3em/1 "Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;font-style:normal;color:#e8202a;
  -webkit-text-stroke:.07em #fff;paint-order:stroke fill;text-shadow:.07em .07em 0 #111;letter-spacing:0;transform:rotate(14deg) scale(0);transform-origin:20% 80%;animation:nfx-don 4s cubic-bezier(.3,1.6,.5,1) 1s infinite}
@keyframes nfx-don{0%{transform:rotate(14deg) scale(0)}6%{transform:rotate(14deg) scale(1.2)}10%,70%{transform:rotate(14deg) scale(1)}76%,100%{transform:rotate(14deg) scale(0)}}
/* Light pages: neon needs a dark glow to read. */
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"]) .name-fx-neon{color:#0aa8c8;text-shadow:0 0 1px #0aa8c8,0 0 10px rgba(46,230,255,.7),0 0 24px rgba(255,62,165,.45);animation:none}

/* The name effect picker on the Account page. */
.sx-names{display:flex;flex-wrap:wrap;gap:10px}
.sx-name{position:relative;display:grid;justify-items:center;gap:6px;padding:12px 16px 8px;min-width:120px;border:1px solid var(--line,#2a2a2a);border-radius:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.sx-name input{position:absolute;opacity:0;pointer-events:none}
.sx-name-preview{font-size:22px;font-weight:800;letter-spacing:-.03em;white-space:nowrap}
.sx-name small{font-size:11px;opacity:.75}
.sx-name:has(input:checked){border-color:var(--pink,#f2387d);box-shadow:0 0 0 1px var(--pink,#f2387d)}
.sx-name:has(input:checked) small{opacity:1;font-weight:700}
.sx-name:has(input:focus-visible){outline:2px solid var(--pink,#f2387d);outline-offset:3px}
.supporter-extras-card.is-locked .sx-name{cursor:default}

/* ---------------------------------------------- Account: supporter extras -- */
.supporter-extras-card .account-card-head .eyebrow{color:#c99a3e}
.sx-themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.sx-theme{position:relative;display:grid;border-radius:14px;overflow:hidden;border:1px solid var(--line,#2a2a2a);background:var(--panel,#111);cursor:pointer;transition:transform .25s,box-shadow .25s,border-color .25s;text-align:left;color:inherit;padding:0;font:inherit}
.sx-theme:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.28)}
.sx-theme input{position:absolute;opacity:0;pointer-events:none}
.sx-theme:has(input:checked){border-color:var(--pink,#f2387d);box-shadow:0 0 0 1px var(--pink,#f2387d)}
.sx-theme:has(input:focus-visible){outline:2px solid var(--pink,#f2387d);outline-offset:3px}
.sx-theme-art{position:relative;display:block;aspect-ratio:16/9;background-size:cover;background-position:center}
.sx-theme-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55))}
.sx-theme-art-toge{background-image:url("../../img/supporter/toge/saitodex-hero-mobile.c60fb25c5936.webp")}
.sx-theme-art-koi{background-image:url("../../img/supporter/koi/saitodex-hero-mobile.5fc777a8c6a5.webp")}
.sx-theme-art-kintsugi{background-image:url("../../img/supporter/kintsugi/saitodex-hero-mobile.acd4d7ad5144.webp")}
.sx-theme-art-sakura{background-image:url("../../img/supporter/sakura/saitodex-hero-mobile.50b4dc4aa84e.webp")}
.sx-theme-art-manga{background-image:url("../../img/supporter/manga/saitodex-hero-mobile.0934dbf11fec.webp")}
.sx-theme-art b{position:absolute;right:12px;bottom:8px;z-index:1;font-family:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;font-size:20px;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.sx-theme-copy{display:grid;gap:6px;padding:12px 14px 14px}
.sx-theme-copy strong{font-size:14px;letter-spacing:.04em}
.sx-theme-copy small{font-size:12px;line-height:1.45;opacity:.75}
.sx-swatches{display:flex;gap:5px}
.sx-swatches i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(127,127,127,.4)}
.sx-sw-toge i:nth-child(1){background:#05080f}
.sx-sw-toge i:nth-child(2){background:#0b1626}
.sx-sw-toge i:nth-child(3){background:#2ee6ff}
.sx-sw-toge i:nth-child(4){background:#ff3ea5}
.sx-sw-toge i:nth-child(5){background:#ff2a3d}
.sx-sw-kintsugi i:nth-child(1){background:#f3eee3}
.sx-sw-kintsugi i:nth-child(2){background:#fbf8f1}
.sx-sw-kintsugi i:nth-child(3){background:#1b1712}
.sx-sw-kintsugi i:nth-child(4){background:#c99a3e}
.sx-sw-kintsugi i:nth-child(5){background:#c8392b}
.sx-sw-koi i:nth-child(1){background:#04161b}
.sx-sw-koi i:nth-child(2){background:#0a2830}
.sx-sw-koi i:nth-child(3){background:#ff6a3d}
.sx-sw-koi i:nth-child(4){background:#f6ead8}
.sx-sw-koi i:nth-child(5){background:#e9b44c}
.sx-sw-sakura i:nth-child(1){background:#fff5f7}
.sx-sw-sakura i:nth-child(2){background:#ffffff}
.sx-sw-sakura i:nth-child(3){background:#2b1d33}
.sx-sw-sakura i:nth-child(4){background:#d63d73}
.sx-sw-sakura i:nth-child(5){background:#ffc2d4}
.sx-sw-manga i:nth-child(1){background:#fbfaf7}
.sx-sw-manga i:nth-child(2){background:#ffffff}
.sx-sw-manga i:nth-child(3){background:#111111}
.sx-sw-manga i:nth-child(4){background:#8a8a8a}
.sx-sw-manga i:nth-child(5){background:#e8202a}
.sx-theme-none .sx-theme-art{background:linear-gradient(135deg,#1a1a1a,#0b0b0b)}
.sx-theme-none .sx-theme-art b{font-family:inherit;font-size:12px;letter-spacing:.14em;left:14px;right:auto}
.sx-rings{display:flex;flex-wrap:wrap;gap:18px;margin-top:6px}
.sx-ring{position:relative;display:grid;justify-items:center;gap:8px;cursor:pointer;font-size:12px}
.sx-ring input{position:absolute;opacity:0;pointer-events:none}
.sx-ring .account-ring-avatar{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--panel,#111);border:2px solid var(--line,#2a2a2a);object-fit:cover;font-weight:700;font-size:20px}
.sx-ring:has(input:checked) span:last-child{color:var(--pink,#f2387d);font-weight:700}
.sx-ring:has(input:focus-visible) .account-ring-avatar{outline:2px solid var(--pink,#f2387d);outline-offset:6px}
.sx-subhead{margin:22px 0 10px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.sx-note{margin:-4px 0 10px;font-size:13px;opacity:.75}
.sx-pthemes{display:flex;flex-wrap:wrap;gap:10px}
.sx-ptheme{position:relative;display:inline-flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border:1px solid var(--line,#2a2a2a);border-radius:999px;cursor:pointer;font-size:13px;transition:border-color .2s,box-shadow .2s}
.sx-ptheme input{position:absolute;opacity:0;pointer-events:none}
.sx-ptheme-chip{display:block;width:34px;height:34px;border-radius:50%;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.sx-ptheme-none{background:conic-gradient(from 45deg,#0b0b0b 0 25%,#f4f1ea 0 50%,#0b0b0b 0 75%,#f4f1ea 0)}
.sx-ptheme:has(input:checked){border-color:var(--pink,#f2387d);box-shadow:0 0 0 1px var(--pink,#f2387d)}
.sx-ptheme:has(input:checked) span:last-child{font-weight:700}
.sx-ptheme:has(input:focus-visible){outline:2px solid var(--pink,#f2387d);outline-offset:3px}
.supporter-extras-card.is-locked .sx-ptheme{cursor:default}
.sx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px}
.sx-actions small{opacity:.7}
.supporter-extras-card.is-locked .sx-theme{cursor:default}
.supporter-extras-card.is-locked .sx-theme:hover{transform:none;box-shadow:none}
.sx-lock{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .binder-skinned .binder-page:before,.binder-skinned .binder-page:after,.binder-skinned .binder-ghost:before,.binder-skinned .binder-ghost:after{animation:none!important}
  .supporter-ring:before,.supporter-ring:after,.supporter-ring .sr-fx,.supporter-ring .sr-fx i,.supporter-ring .sr-fx i:before,.supporter-ring .sr-fx i:after{animation:none!important}
  .supporter-ring-sakura .sr-fx i{animation:none;opacity:.9;transform:rotate(var(--a)) translateY(-50cqmin) rotate(40deg) scale(var(--s))}
  .supporter-ring-sakura .sr-fx i:nth-child(even){display:none}
  .supporter-ring-raiden .sr-fx i:nth-child(1){opacity:.85}
  .binder-skin:after{transition:none}
  .name-fx,.name-fx:before,.name-fx:after{animation:none!important}
  .name-fx-sumi:before{clip-path:none}
  .name-fx-manga:after{transform:rotate(14deg)}
}
.sx-theme{align-content:start;white-space:normal}
.sx-theme-copy small,.sx-theme-copy strong{white-space:normal}
.sx-ring>.account-ring-avatar{margin:5px}
/* 3.20.5: Yozakura's card art and swatches (missing in 3.20.3) */
.sx-theme-art-yozakura{background-image:url("../../img/supporter/yozakura/saitodex-hero-mobile.e61d47ca1eef.webp")}
.sx-sw-yozakura i:nth-child(1){background:#120d1c}
.sx-sw-yozakura i:nth-child(2){background:#1c1530}
.sx-sw-yozakura i:nth-child(3){background:#fdf2f6}
.sx-sw-yozakura i:nth-child(4){background:#ff8fb4}
.sx-sw-yozakura i:nth-child(5){background:#ffb35a}

/* =====================================================================
 * 3.21: tuner extras. Inspired by tuning culture, never a real brand.
 * ===================================================================== */

/* ---------------------------------------------------- tuner theme cards -- */
.sx-theme-art-boost{background-image:url("../../img/supporter/boost/saitodex-hero-mobile.4d8a4312a0d3.webp")}
.sx-theme-art-shakotan{background-image:url("../../img/supporter/shakotan/saitodex-hero-mobile.dbbae09ba23b.webp")}
.sx-theme-art-timeattack{background-image:url("../../img/supporter/timeattack/saitodex-hero-mobile.26b843f500a3.webp")}
.sx-sw-boost i:nth-child(1){background:#07070b}
.sx-sw-boost i:nth-child(2){background:#1ee3c8}
.sx-sw-boost i:nth-child(3){background:#2f6bff}
.sx-sw-boost i:nth-child(4){background:#7b3cff}
.sx-sw-boost i:nth-child(5){background:#ff3d8f}
.sx-sw-shakotan i:nth-child(1){background:#0b0607}
.sx-sw-shakotan i:nth-child(2){background:#2a2d33}
.sx-sw-shakotan i:nth-child(3){background:#ff2d3a}
.sx-sw-shakotan i:nth-child(4){background:#d9a441}
.sx-sw-shakotan i:nth-child(5){background:#f3f5f8}
.sx-sw-timeattack i:nth-child(1){background:#f3f5f8}
.sx-sw-timeattack i:nth-child(2){background:#ffffff}
.sx-sw-timeattack i:nth-child(3){background:#11151c}
.sx-sw-timeattack i:nth-child(4){background:#7b2cf5}
.sx-sw-timeattack i:nth-child(5){background:#e10600}

/* ---------------------------------------------------------- tuner rings -- */
/* Boost gauge: a gauge face that doesn't spin; the needle spools up to the
   redline, flutters, and drops back like a blow-off. */
.supporter-ring-boost:before{animation:none;background:
  conic-gradient(from -135deg,transparent 0 198deg,#7b3cff 198deg 232deg,#ff3d8f 232deg 270deg,transparent 270deg),
  repeating-conic-gradient(from -135deg,#f6f3ec 0 1.6deg,transparent 1.6deg 13.5deg),
  conic-gradient(#0b0c0f 0 0);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 74%,#000 76%);mask-image:radial-gradient(circle closest-side,transparent 74%,#000 76%);
  box-shadow:0 0 0 2px #8d929b,0 0 0 3px #2a2d33}
.supporter-ring-boost:after{animation:none;background:conic-gradient(from -135deg,#1ee3c8 0 198deg,#ff3d8f 198deg 270deg,transparent 270deg);opacity:.45}
.supporter-ring-boost .sr-fx i:nth-child(1){display:block;position:absolute;left:50%;top:-4%;width:max(5px,5.5cqmin);height:54%;margin-left:min(-2.5px,-2.75cqmin);
  background:linear-gradient(180deg,#e4fffa,#1ee3c8 10%,#7b3cff 22%,transparent 22%);border-radius:4px;transform-origin:50% 100%;
  filter:drop-shadow(0 0 3px #1ee3c8) drop-shadow(0 0 7px rgba(123,60,255,.9));
  animation:sr-needle 4.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sr-needle{
  0%{transform:rotate(-120deg)}
  32%{transform:rotate(112deg)}
  36%{transform:rotate(104deg)}40%{transform:rotate(114deg)}44%{transform:rotate(106deg)}48%{transform:rotate(113deg)}
  60%{transform:rotate(-70deg)}
  100%{transform:rotate(-120deg)}}

/* Burnt titanium: heat-blued colours turning slowly, with a heat shimmer. */
.supporter-ring-titanium:before,.supporter-ring-titanium:after{background:conic-gradient(from 0deg,#d9b45a,#e8a24a,#b06ab3,#5b4fd6,#3f6fd8,#6fd3e8,#3f6fd8,#8a5cc8,#d18a52,#d9b45a)}
.supporter-ring-titanium:before{animation-duration:12s}
.supporter-ring-titanium:after{animation:sr-spin 12s linear infinite,sr-heat 3.6s ease-in-out infinite alternate}
@keyframes sr-heat{from{filter:blur(10px) hue-rotate(0deg);opacity:.45}to{filter:blur(13px) hue-rotate(-24deg);opacity:.8}}

/* Coilover: red coils wound round the picture that compress and rebound. */
.supporter-ring-coil{animation:sr-coil 2.2s cubic-bezier(.45,0,.55,1) infinite}
.supporter-ring-coil:before{animation:none;background:
  repeating-conic-gradient(from 8deg,#ff2d3a 0 9deg,#ff8a92 9deg 11deg,#a5101a 11deg 17deg,#3a060a 17deg 22.5deg)}
.supporter-ring-coil:after{animation:none;background:conic-gradient(#ff2d3a 0 0);opacity:.35}
.supporter-ring-coil .public-profile-avatar,.supporter-ring-coil .account-ring-avatar{box-shadow:0 0 0 2px #d9a441}
@keyframes sr-coil{0%,100%{padding:5px}40%{padding:3px}60%{padding:6px}75%{padding:4.5px}}
/* a glint running along the coils */
.supporter-ring-coil .sr-fx{animation:sr-spin 2.2s linear infinite}
.supporter-ring-coil .sr-fx i:nth-child(1){display:block;position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 82%,rgba(255,240,240,.85) 90%,transparent 97%);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 84%,#000 86%);mask-image:radial-gradient(circle closest-side,transparent 84%,#000 86%)}

/* Chequered: a chequered flag ring, with a purple sector light lapping it. */
.supporter-ring-chequered:before{animation:sr-spin 14s linear infinite;background:
  repeating-conic-gradient(from 0deg,#11151c 0 7.5deg,#ffffff 7.5deg 15deg);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 70%,#000 72%);mask-image:radial-gradient(circle closest-side,transparent 70%,#000 72%);
  box-shadow:0 0 0 1.5px #11151c}
.supporter-ring-chequered:after{animation:none;background:conic-gradient(#7b2cf5 0 0);opacity:.35}
.supporter-ring-chequered .sr-fx{animation:sr-spin 2.6s linear infinite}
.supporter-ring-chequered .sr-fx i:nth-child(1){display:block;position:absolute;left:50%;top:50%;width:max(8px,8cqmin);height:max(8px,8cqmin);translate:-50% -50%;border-radius:50%;
  transform:translateY(calc(-50cqmin + 2px));background:#b48cff;box-shadow:0 0 0 2px #fff,0 0 10px #7b2cf5,0 0 22px #7b2cf5}
.supporter-ring-chequered .sr-fx i:nth-child(2){display:block;position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 70%,rgba(123,44,245,.0) 70%,rgba(123,44,245,.65) 99%,transparent 100%);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 82%,#000 84%);mask-image:radial-gradient(circle closest-side,transparent 82%,#000 84%)}

/* ---------------------------------------------------- tuner name effects -- */
/* Burnt titanium: heat-blued gradient letters with a shimmer running through. */
.name-fx-titanium{color:transparent;text-shadow:none;background:linear-gradient(100deg,#c79a3e 0%,#e8b25a 14%,#c46fa8 30%,#6a55d8 46%,#3f78e0 58%,#7fe0f0 66%,#3f78e0 74%,#9a62c8 86%,#d9a44a 100%);
  background-size:150% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3));animation:nfx-heat 8s ease-in-out infinite alternate}
@keyframes nfx-heat{from{background-position:0 0}to{background-position:100% 0}}
/* Livery: slanted race letters with teal, blue, purple and pink stripes behind. */
.name-fx-livery{font-style:italic;font-weight:900;color:#fff;transform:skewX(-6deg);text-shadow:.04em .04em 0 rgba(0,0,0,.55);padding:0 .2em 0 .05em}
.name-fx-livery:before{content:"";position:absolute;left:-4%;right:-10%;bottom:4%;height:30%;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#1ee3c8 0 30%,transparent 30% 36%,#2f6bff 36% 56%,transparent 56% 62%,#7b3cff 62% 80%,transparent 80% 86%,#ff3d8f 86%);
  transform:skewX(-30deg) scaleX(0);transform-origin:0 50%;animation:nfx-livery .9s cubic-bezier(.2,.8,.2,1) .25s forwards}
@keyframes nfx-livery{to{transform:skewX(-30deg) scaleX(1)}}
/* Timing board: LED dot letters that flash purple for a best lap now and then. */
.name-fx-timing{font-weight:900;letter-spacing:.06em;color:transparent;
  background:radial-gradient(circle,#f6f8ff 0 56%,transparent 64%) 0 0/max(2.6px,.065em) max(2.6px,.065em);text-shadow:none;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35));animation:nfx-pb 6s steps(1) infinite}
@keyframes nfx-pb{0%,78%{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}80%,84%,88%{filter:drop-shadow(0 0 2px #b48cff) drop-shadow(0 0 10px #7b2cf5) hue-rotate(0deg) brightness(.85) sepia(1) saturate(6) hue-rotate(215deg)}82%,86%,90%,100%{filter:drop-shadow(0 0 6px rgba(255,255,255,.35))}}
/* Light pages: dark letters so they read. */
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-livery{color:#11151c;text-shadow:none}
:root:is([data-theme="light"],[data-theme="ink"],[data-theme="kintsugi"],[data-theme="sakura"],[data-theme="manga"],[data-theme="timeattack"]) .name-fx-timing{background-image:radial-gradient(circle,#11151c 0 60%,transparent 68%);filter:none;animation-name:nfx-pb-light}
@keyframes nfx-pb-light{0%,78%,82%,86%,90%,100%{filter:drop-shadow(0 1px 0 rgba(255,255,255,.7))}80%,84%,88%{filter:drop-shadow(0 0 1px #7b2cf5) sepia(1) saturate(8) hue-rotate(220deg)}}
:root[data-theme="timeattack"] .name-fx-neon{color:#0aa8c8;text-shadow:0 0 1px #0aa8c8,0 0 10px rgba(46,230,255,.7),0 0 24px rgba(255,62,165,.45);animation:none}

/* ---------------------------------------------------------- tuner skins -- */
.binder-skin-carbon{background:#0d0e11!important;border-color:rgba(30,227,200,.35)!important}
.binder-skin-carbon .binder-skin-art{background:
  linear-gradient(170deg,rgba(255,255,255,.12),transparent 30%,transparent 70%,rgba(0,0,0,.45)),
  url("../../img/supporter/boost/slashes-dense.dee74513efdb.svg") 0 0/150px 150px,
  linear-gradient(45deg,#1c1e23 25%,transparent 25% 75%,#1c1e23 75%) 0 0/10px 10px,
  linear-gradient(-45deg,#1c1e23 25%,transparent 25% 75%,#1c1e23 75%) 0 0/10px 10px,#0d0e11}
.binder-skin-carbon strong{color:#8ff5e6!important;font-style:italic}
.binder-skin-carbon .binder-cover-grid i{border-color:rgba(30,227,200,.3)!important}

.binder-skin-anodised{background:linear-gradient(90deg,#8f0d15,#ff2d3a 45%,#ff6b74 55%,#a5101a)!important;border-color:rgba(217,164,65,.6)!important}
.binder-skin-anodised .binder-skin-art{background:
  radial-gradient(circle at 10px 10px,#fff3cf 0 1.5px,#c4912f 2px 4px,#5c3d0c 4.5px,transparent 5px),
  radial-gradient(circle at calc(100% - 10px) 10px,#fff3cf 0 1.5px,#c4912f 2px 4px,#5c3d0c 4.5px,transparent 5px),
  radial-gradient(circle at 10px calc(100% - 10px),#fff3cf 0 1.5px,#c4912f 2px 4px,#5c3d0c 4.5px,transparent 5px),
  radial-gradient(circle at calc(100% - 10px) calc(100% - 10px),#fff3cf 0 1.5px,#c4912f 2px 4px,#5c3d0c 4.5px,transparent 5px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
  linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.3))}
.binder-skin-anodised strong{color:#fff!important;text-shadow:0 1px 0 rgba(0,0,0,.5)}
.binder-skin-anodised .binder-cover-grid i{border-color:rgba(255,255,255,.3)!important}

.binder-skin-chequered{background:#ffffff!important;border-color:#11151c!important}
.binder-skin-chequered .binder-skin-art{background:
  repeating-linear-gradient(90deg,#e10600 0 8px,#ffffff 8px 16px) 0 0/100% 6px no-repeat,
  repeating-linear-gradient(90deg,#e10600 0 8px,#ffffff 8px 16px) 0 100%/100% 6px no-repeat,
  repeating-conic-gradient(#11151c 0 25%,#ffffff 0 50%) 0 0/16px 16px;opacity:.95}
.binder-skin-chequered strong{color:#fff!important;background:#11151c;padding:2px 6px;box-shadow:inset 3px 0 0 #7b2cf5}
.binder-skin-chequered .binder-cover-grid i{border-color:rgba(123,44,245,.6)!important;background:rgba(255,255,255,.6)}

/* Inside an open tuner-skinned binder. */
:root .binder-skin-in-carbon :is(.binder-page,.binder-ghost){background:#0d0e11!important;border-color:rgba(30,227,200,.3)!important}
:root .binder-skin-in-carbon :is(.binder-page,.binder-ghost):before{background:
  linear-gradient(170deg,rgba(255,255,255,.08),transparent 25%,transparent 75%,rgba(0,0,0,.4)),
  linear-gradient(100deg,transparent 0 77%,rgba(30,227,200,.85) 77% 79.5%,transparent 79.5% 80.5%,rgba(47,107,255,.85) 80.5% 82%,transparent 82% 83%,rgba(123,60,255,.85) 83% 84.2%,transparent 84.2% 85%,rgba(255,61,143,.85) 85% 86%,transparent 86%),
  linear-gradient(45deg,#1a1c21 25%,transparent 25% 75%,#1a1c21 75%) 0 0/14px 14px,
  linear-gradient(-45deg,#1a1c21 25%,transparent 25% 75%,#1a1c21 75%) 0 0/14px 14px;
  animation:bs-clear 9s ease-in-out infinite}
@keyframes bs-clear{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
:root .binder-skin-in-carbon .binder-pocket{border-color:rgba(30,227,200,.22)}
:root .binder-skin-in-carbon .binder-page-number{color:#8ff5e6}

:root .binder-skin-in-anodised :is(.binder-page,.binder-ghost){background:linear-gradient(180deg,#b3141d,#7a0b12)!important;border-color:rgba(217,164,65,.5)!important}
:root .binder-skin-in-anodised :is(.binder-page,.binder-ghost):before{background:
  radial-gradient(circle at 14px 14px,#fff3cf 0 2px,#c4912f 2.5px 5px,#5c3d0c 5.5px,transparent 6px),
  radial-gradient(circle at calc(100% - 14px) 14px,#fff3cf 0 2px,#c4912f 2.5px 5px,#5c3d0c 5.5px,transparent 6px),
  radial-gradient(circle at 14px calc(100% - 14px),#fff3cf 0 2px,#c4912f 2.5px 5px,#5c3d0c 5.5px,transparent 6px),
  radial-gradient(circle at calc(100% - 14px) calc(100% - 14px),#fff3cf 0 2px,#c4912f 2.5px 5px,#5c3d0c 5.5px,transparent 6px),
  linear-gradient(115deg,transparent 35%,rgba(255,255,255,.14) 48%,transparent 60%) 0 0/300% 100%,
  repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 3px);
  animation:bs-anodised 11s ease-in-out infinite}
@keyframes bs-anodised{0%,100%{background-position:0 0,0 0,0 0,0 0,110% 0,0 0}50%{background-position:0 0,0 0,0 0,0 0,-10% 0,0 0}}
:root .binder-skin-in-anodised .binder-pocket{border-color:rgba(255,255,255,.22)}
:root .binder-skin-in-anodised .binder-page-number{color:#f3d58a}

:root .binder-skin-in-chequered :is(.binder-page,.binder-ghost){background:#e9ecf1!important;border-color:#11151c!important}
:root .binder-skin-in-chequered :is(.binder-page,.binder-ghost):before{background:
  repeating-linear-gradient(90deg,#e10600 0 16px,#ffffff 16px 32px) 0 0/100% 8px no-repeat,
  repeating-linear-gradient(90deg,#e10600 0 16px,#ffffff 16px 32px) 0 100%/100% 8px no-repeat,
  repeating-conic-gradient(rgba(17,21,28,.16) 0 25%,transparent 0 50%) 0 0/28px 28px}
:root .binder-skin-in-chequered .binder-pocket{border-color:rgba(17,21,28,.4);background:rgba(255,255,255,.62)}
:root .binder-skin-in-chequered .binder-page-number{color:#11151c;text-shadow:none}

/* Page-turn effects for the tuner skins (js/supporter/binder-fx.js). */
.bfx-streak{top:0;bottom:0;width:4px;margin-left:-2px;background:linear-gradient(180deg,transparent,#1ee3c8 15%,#2f6bff 40%,#7b3cff 62%,#ff3d8f 85%,transparent);box-shadow:0 0 10px #1ee3c8,0 0 24px rgba(123,60,255,.7)}
.bfx-ember{width:10px;height:2.5px;border-radius:2px;background:#8ff5e6;box-shadow:0 0 6px #7b3cff}
.bfx-check{border-radius:1px;background:repeating-conic-gradient(#11151c 0 25%,#ffffff 0 50%) 0 0/50% 50%;box-shadow:0 1px 3px rgba(17,21,28,.35)}
.bfx-check.is-purple{background:#7b2cf5}

@media (prefers-reduced-motion:reduce){
  .supporter-ring-coil,.supporter-ring-boost .sr-fx i,.supporter-ring-chequered .sr-fx{animation:none!important}
  .supporter-ring-boost .sr-fx i:nth-child(1){transform:rotate(-40deg)}
  .name-fx-livery:before{transform:skewX(-30deg)}
}