/* ================= BINDER SKINS =================

   HOW THESE ARE BUILT, because the first attempt got it wrong twice.

   1 · THE COVER IS THE ART, NOT THE FRAME.
   A binder is about 85% pockets. Painting the border around a grid of holes
   gives you nothing to look at, which is why ten "materials" all collapsed into
   the same rectangle. So every skin here is ONE BIG GRAPHIC across the whole
   cover — a Poké Ball, a bolt, a flame — and the pockets are translucent glass
   laid over it. The art reads through the empty ones and shows in the gutters
   when the page is full. If it isn't legible at 40px in the rail, it's wrong.

   2 · BRIGHT.
   This app is dark. A dark binder in a dark binder view on a dark page is
   invisible, and nine of the last ten were dark. Every cover here is
   high-chroma and high-contrast against #0a0c1c.

   3 · THE LADDER IS THE BALL LADDER.
   Poké Ball → Great Ball → Ultra Ball → Master Ball. Nothing else in this game
   communicates "this one is the expensive one" as instantly, because the person
   playing already knew it before they opened the app.

   ---- the six surfaces, in this order every time ----
     cover · spine · rings · pocket · sleeve · leaf   (+ the fx layer)

   ---- motion ----
   transform and opacity only, on the .skinfx layer, which is a sibling of the
   page that turns. Paused when the tab is hidden, off entirely under
   prefers-reduced-motion. This runs behind nine card images on the most-looked
   at screen in the app; anything that repaints per frame is a dropped
   page-turn on a phone. */

/* ---------------- the effects layer ----------------
   BEHIND THE CARDS. It shipped at z-index:5, which put a white light sweep
   straight over the card faces — a shine crossing on top of a Charizard is not
   a binder catching the light, it's a bug.

   The rule the layer has to satisfy is two things at once, and getting one
   right is what hid the other:
     · OUTSIDE #binderScene, so the 3D page-turn can't carry the water through
       the fold — that part was right,
     · UNDERNEATH it, because cards are opaque objects sitting in pockets and
       nothing on the cover can be in front of them.

   So the fx sits at 0 and the page is lifted to 2. The light now shows where it
   physically should: in the 10px gutters between pockets, around the margin,
   and through the translucent glass of any pocket you haven't filled yet.

   The page lift is done HERE rather than in binder.css so the whole stacking
   decision reads in one place — a z-index in one file that only makes sense
   because of a z-index in another is how this went wrong the first time. */
.skinfx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  border-radius:16px;contain:paint}
.skinfx>i{position:absolute;display:block}
/* the real binder (a scene that turns) and the shop preview (a bare grid) */
.binder3d>.binder-scene,
.binder3d>.bindgrid{position:relative;z-index:2}
body.skin-paused .skinfx>i{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){ .skinfx>i{animation:none!important} }

/* ---------------- shared parts ----------------
   The glass pocket. Every skin overrides the tint; this is the shape. Kept
   translucent on purpose — it is the window the cover art shows through.

   `.binder3d .pocket`, NOT `.binder3d[class*="bs-"] .pocket`. The attribute
   version is (0,3,0) and every per-skin rule below is `.bs-<id> .pocket` at
   (0,2,0) — so the shared default would have beaten all ten tints and every
   skin would have come out wearing identical glass. Which is precisely the
   failure this whole rewrite exists to fix, arriving by a different door.
   `.binder3d .pocket` is (0,2,0): it still beats binder.css's bare `.pocket`,
   and it loses to the per-skin rules that come after it in this file. */
.binder3d .pocket{
  background:rgba(4,6,16,.34);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 2px 10px rgba(0,0,0,.4)}
/* ---------------- THE PRINT TEXTURE ----------------
   THE SINGLE BIGGEST REASON THE LAST SET READ AS GENERATED. A smooth radial
   gradient is the one surface a computer makes and a printer cannot, so a page
   full of them looks machine-made no matter what colours you pick. Trading
   cards are PRINTED — they carry a halftone rosette you can see with a loupe
   and feel with a fingernail.

   So every cover gets one: a two-layer CMYK-ish dot screen at 3px, offset from
   itself, in overlay. It costs one pseudo-element with no animation, it applies
   to all ten at once, and it is what stops the flat colour blocks below from
   looking like flat colour blocks.

   ::before, because binder.css already owns ::after. No z-index: a pseudo with
   `auto` paints with its element's background, which is exactly where a printed
   texture belongs — under the cards, on the cover. */
.binder3d::before{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(circle at 1px 1px,rgba(0,0,0,.30) .55px,transparent 1.1px) 0 0/3px 3px,
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.16) .55px,transparent 1.1px) 1.5px 1.5px/3px 3px;
  mix-blend-mode:overlay;opacity:.8}

/* one sweep of light travelling across the whole cover, used by the ball skins */
@keyframes skShine{
  0%,66%{transform:translate3d(-130%,0,0)}
  100%  {transform:translate3d(320%,0,0)}
}
.sk-shine{top:-20%;bottom:-20%;left:0;width:38%;
  background:linear-gradient(104deg,transparent,rgba(255,255,255,.42) 48%,transparent);
  animation:skShine 6.5s ease-in-out infinite}

/* ============================================================
   1 · CLASSIC BINDER — free
   THE BINDER THIS APP ALWAYS HAD: navy board, steel rings, plain glossy
   pockets. v268 replaced it with a red-and-white Poké Ball cover, which is a
   fine object and the wrong DEFAULT — the free skin is the one you look at all
   day, every day, behind every card you own, and it should get out of the way
   of the cards rather than compete with them. The ball ladder starts at Great
   Ball instead.

   Values copied from css/binder.css so the two cannot drift; if the base binder
   is ever restyled, this is the rule to update with it.
   ============================================================ */
.binder3d.bs-classic{
  background:linear-gradient(160deg,#2b3160,#1a1e3c 55%,#141733);
  border-color:#3c4278;
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08),
             inset 0 -6px 20px rgba(0,0,0,.35)}
.bs-classic .binder-spine{background:linear-gradient(90deg,#0e1024,#191d3d 60%,rgba(20,23,51,0))}
.bs-classic .binder-spine .ring{border-color:#aeb6dd;
  background:radial-gradient(circle at 38% 30%,#f3f5ff,#8189b0 70%,#575d82)}
/* rgba rather than the original flat hexes: the shared rule this overrides is
   translucent so cover art can read through, and a skin that goes opaque would
   be the one place that stops being true. At .97 it is the same colour. */
.bs-classic .pocket{
  background:linear-gradient(160deg,rgba(23,27,48,.97),rgba(13,15,30,.97));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05),inset 0 2px 9px rgba(0,0,0,.55)}
.bs-classic .pocket .sleeve{background:linear-gradient(125deg,rgba(255,255,255,.16) 0 16%,
  transparent 30%,transparent 72%,rgba(255,255,255,.05) 100%)}
.bs-classic .binder-leaf .leaf-face.front{background:linear-gradient(160deg,#20254a,#151935)}
.bs-classic .binder-leaf .leaf-face.back{background:linear-gradient(160deg,#242a54,#151935)}

/* ============================================================
   2 · GREAT BALL — $1,500
   Blue, with the two red flashes that meet at the band.
   ============================================================ */
.binder3d.bs-greatball{
  background:
    radial-gradient(circle at 50% 50%,#fff 0 6.5%,#15171d 6.5% 9.5%,transparent 9.6%),
    /* the two red flashes, mirrored */
    linear-gradient(72deg,transparent 0 26%,#ee2b2b 26% 34%,transparent 34%),
    linear-gradient(-72deg,transparent 0 26%,#ee2b2b 26% 34%,transparent 34%),
    linear-gradient(180deg,transparent 0 45%,#15171d 45% 55%,transparent 55%),
    linear-gradient(180deg,#3f8dff 0 45%,#1b62d4 45% 55%,#fdfdfd 55% 100%);
  border-color:#8ec0ff;
  box-shadow:0 24px 60px rgba(63,141,255,.24),inset 0 1px 0 rgba(255,255,255,.5)}
.bs-greatball .binder-spine{background:linear-gradient(90deg,#0d2f6b,#1b62d4 70%,rgba(27,98,212,0))}
.bs-greatball .binder-spine .ring{border-color:#fff;
  background:radial-gradient(circle at 38% 30%,#fff,#c9d6ee 70%,#8a99b8)}
.bs-greatball .pocket{background:rgba(6,14,38,.32);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 2px 10px rgba(0,0,0,.35)}
.bs-greatball .pocket .sleeve{background:linear-gradient(125deg,rgba(220,240,255,.24) 0 16%,
  transparent 32%,transparent 76%,rgba(220,240,255,.08) 100%)}
.bs-greatball .binder-leaf .leaf-face.front{background:linear-gradient(180deg,#3f8dff,#1b62d4)}
.bs-greatball .binder-leaf .leaf-face.back{background:linear-gradient(180deg,#fdfdfd,#d6dde8)}

/* ============================================================
   3 · ULTRA BALL — $6,000
   Black over white with the gold band and the two gold bars.
   ============================================================ */
.binder3d.bs-ultraball{
  background:
    radial-gradient(circle at 50% 50%,#fff 0 6.5%,#15171d 6.5% 9.5%,transparent 9.6%),
    /* the two bars of the H */
    linear-gradient(90deg,transparent 0 22%,#ffc31f 22% 33%,transparent 33% 67%,#ffc31f 67% 78%,transparent 78%)
      no-repeat 0 0/100% 45%,
    linear-gradient(180deg,transparent 0 43%,#ffc31f 43% 57%,transparent 57%),
    linear-gradient(180deg,#26262e 0 45%,#15171d 45% 55%,#fdfdfd 55% 100%);
  border-color:#ffd75c;
  box-shadow:0 24px 60px rgba(255,195,31,.20),inset 0 1px 0 rgba(255,255,255,.4)}
.bs-ultraball .binder-spine{background:linear-gradient(90deg,#0b0b0f,#2a2a33 70%,rgba(38,38,46,0))}
.bs-ultraball .binder-spine .ring{border-color:#ffc31f;
  background:radial-gradient(circle at 38% 30%,#fff4cf,#c99400 70%,#8a6500)}
.bs-ultraball .pocket{background:rgba(4,4,10,.42);
  box-shadow:inset 0 0 0 1px rgba(255,195,31,.34),inset 0 2px 10px rgba(0,0,0,.45)}
.bs-ultraball .pocket .sleeve{background:linear-gradient(125deg,rgba(255,232,160,.22) 0 16%,
  transparent 32%,transparent 76%,rgba(255,232,160,.07) 100%)}
.bs-ultraball .binder-leaf .leaf-face.front{background:linear-gradient(180deg,#26262e,#0f0f14)}
.bs-ultraball .binder-leaf .leaf-face.back{background:linear-gradient(180deg,#fdfdfd,#d8dae2)}
/* a single spark crossing the gold band */
.sk-spark{top:47%;left:0;width:16px;height:6%;border-radius:50%;
  background:radial-gradient(closest-side,#fff8dc,rgba(255,232,160,.5),transparent);
  animation:skSpark 5.4s linear infinite}
@keyframes skSpark{
  0%{transform:translate3d(-40px,0,0);opacity:0}
  12%{opacity:1} 82%{opacity:1}
  100%{transform:translate3d(420%,0,0);opacity:0}
}

/* ============================================================
   4 · THUNDER — $20,000
   TINSEL HOLO. The vertical-streak foil every collector knows on sight, in
   electric yellow over storm indigo — hard 2px stripes, not a glow. Over it, a
   bolt with a dark keyline, because a shape without an outline is a smudge and
   a shape with one is a graphic. That distinction is the entire difference
   between this and what shipped last time.
   ============================================================ */
.binder3d.bs-thunder{
  background:
    /* the tinsel: hard streaks, two weights, so it reads as foil not as lines */
    repeating-linear-gradient(90deg,
      transparent 0 7px,
      rgba(255,226,61,.26) 7px 9px,
      rgba(255,255,255,.20) 9px 10px,
      transparent 10px 17px),
    repeating-linear-gradient(90deg,
      transparent 0 23px,
      rgba(160,220,255,.16) 23px 25px,
      transparent 25px 41px),
    linear-gradient(180deg,#3a2f8f 0%,#241c68 52%,#120d3a 100%);
  border-color:#ffe23d;
  box-shadow:0 24px 60px rgba(255,226,61,.22),inset 0 1px 0 rgba(255,255,255,.22)}
.bs-thunder .binder-spine{background:linear-gradient(90deg,#0a0820,#3a2f8f 70%,rgba(36,28,104,0))}
.bs-thunder .binder-spine .ring{border-color:#ffe23d;
  background:radial-gradient(circle at 38% 30%,#fffbe0,#d8b800 70%,#8f7a00)}
.bs-thunder .pocket{background:rgba(10,8,34,.44);
  box-shadow:inset 0 0 0 1px rgba(255,226,61,.34),inset 0 2px 10px rgba(0,0,0,.45)}
.bs-thunder .pocket .sleeve{background:linear-gradient(125deg,rgba(255,246,180,.20) 0 16%,
  transparent 32%,transparent 76%,rgba(255,246,180,.06) 100%)}
.bs-thunder .binder-leaf .leaf-face.front{background:linear-gradient(180deg,#3a2f8f,#120d3a)}
.bs-thunder .binder-leaf .leaf-face.back{background:linear-gradient(180deg,#241c68,#120d3a)}
/* the bolt: flat yellow, hard edges, dark keyline behind it */
.sk-bolt{inset:8%;
  background:linear-gradient(180deg,#fff06a,#ffc31f);
  clip-path:polygon(60% 2%,28% 50%,47% 50%,24% 98%,76% 44%,54% 44%,74% 2%);
  animation:skBolt 7s ease-in-out infinite}
.sk-bolt.out{inset:6%;background:#0d0a26;
  clip-path:polygon(60% 2%,28% 50%,47% 50%,24% 98%,76% 44%,54% 44%,74% 2%);
  animation:none;opacity:.9}
@keyframes skBolt{
  0%,54%,100%{opacity:.55}
  57%{opacity:1} 59%{opacity:.6} 62%{opacity:1} 66%{opacity:.58}
}
.sk-flash{inset:0;background:rgba(255,246,190,.55);opacity:0;
  animation:skFlash 7s ease-in-out infinite}
@keyframes skFlash{
  0%,54%,100%{opacity:0}
  57%{opacity:.36} 59%{opacity:.05} 62%{opacity:.24} 67%{opacity:0}
}

/* ============================================================
   5 · BLAZE — $55,000
   CRACKED ICE HOLO in fire colours. The angular shard foil, built from three
   repeating gradients at different angles with 2px hard stops — so the surface
   fractures instead of fading. A flat flame with a keyline sits on it, and the
   embers still climb.
   ============================================================ */
.binder3d.bs-blaze{
  background:
    repeating-linear-gradient(62deg,rgba(255,236,170,.22) 0 2px,transparent 2px 21px),
    repeating-linear-gradient(-49deg,rgba(255,120,30,.28) 0 2px,transparent 2px 27px),
    repeating-linear-gradient(14deg,rgba(255,255,255,.13) 0 1px,transparent 1px 17px),
    linear-gradient(180deg,#ff9422 0%,#e8480e 46%,#8a1204 100%);
  border-color:#ffd76a;
  box-shadow:0 24px 60px rgba(255,106,31,.34),inset 0 1px 0 rgba(255,230,170,.4)}
.bs-blaze .binder-spine{background:linear-gradient(90deg,#3a0805,#c2340d 70%,rgba(194,52,13,0))}
.bs-blaze .binder-spine .ring{border-color:#ffd76a;
  background:radial-gradient(circle at 38% 30%,#fff6d8,#e08a00 70%,#8f5300)}
.bs-blaze .pocket{background:rgba(40,7,2,.46);
  box-shadow:inset 0 0 0 1px rgba(255,214,106,.42),inset 0 2px 10px rgba(0,0,0,.45)}
.bs-blaze .pocket .sleeve{background:linear-gradient(125deg,rgba(255,214,150,.24) 0 16%,
  transparent 32%,transparent 76%,rgba(255,214,150,.08) 100%)}
.bs-blaze .binder-leaf .leaf-face.front{background:linear-gradient(180deg,#e8480e,#8a1204)}
.bs-blaze .binder-leaf .leaf-face.back{background:linear-gradient(180deg,#ff9422,#8a1204)}
/* a flat flame, keylined. No blur anywhere in it. */
.sk-flame{left:50%;bottom:4%;width:56%;height:72%;margin-left:-28%;
  background:linear-gradient(180deg,#fff3b0,#ffc21f 42%,#ff6a1f);
  clip-path:polygon(50% 0%,68% 26%,60% 30%,78% 52%,70% 58%,84% 82%,
                    62% 100%,38% 100%,16% 82%,30% 58%,22% 52%,40% 30%,32% 26%);
  opacity:.92}
.sk-flame.out{width:62%;height:78%;margin-left:-31%;bottom:2%;
  background:#6b0f03;opacity:.85}
.sk-ember{bottom:-8%;width:5px;height:5px;border-radius:50%;
  background:#fff3c4;box-shadow:0 0 0 2px rgba(255,138,31,.7)}
.sk-ember.e1{left:20%;animation:skEmber 6.2s linear infinite}
.sk-ember.e2{left:56%;animation:skEmber 8.1s linear infinite .9s;width:4px;height:4px}
.sk-ember.e3{left:80%;animation:skEmber 7.1s linear infinite 2.4s}
@keyframes skEmber{
  0%  {transform:translate3d(0,0,0) scale(.7);opacity:0}
  12% {opacity:1}
  50% {transform:translate3d(-13px,-52%,0) scale(1)}
  85% {opacity:.85}
  100%{transform:translate3d(9px,-115%,0) scale(.5);opacity:0}
}

/* ============================================================
   6 · AURORA — $140,000
   COSMOS HOLO. The galaxy foil off a 1999 Base Set holo: hard-edged nebula
   blobs and a dense speck field, not a blurred ribbon. Every stop here is a
   hard stop — `0 58%, transparent 60%` — which is what makes it read as foil
   printed on card stock instead of light rendered on glass.
   ============================================================ */
.binder3d.bs-aurora{
  background:
    /* specks: three offset grids so the field never shows its lattice */
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.95) .9px,transparent 1.4px) 0 0/17px 21px,
    radial-gradient(circle at 1px 1px,rgba(190,240,255,.8) .7px,transparent 1.2px) 8px 13px/23px 19px,
    radial-gradient(circle at 1px 1px,rgba(255,255,255,.55) .6px,transparent 1px) 14px 5px/13px 29px,
    /* nebulae: hard-edged blobs */
    radial-gradient(42% 26% at 26% 26%,rgba(98,240,216,.62) 0 58%,transparent 60%),
    radial-gradient(34% 22% at 74% 40%,rgba(150,130,255,.58) 0 58%,transparent 60%),
    radial-gradient(30% 20% at 46% 74%,rgba(255,138,209,.46) 0 58%,transparent 60%),
    linear-gradient(180deg,#12246b 0%,#0a1444 52%,#050a26 100%);
  border-color:#62f0d8;
  box-shadow:0 24px 60px rgba(98,240,216,.28),inset 0 1px 0 rgba(255,255,255,.22)}
.bs-aurora .binder-spine{background:linear-gradient(90deg,#03121c,#16307a 70%,rgba(10,20,68,0))}
.bs-aurora .binder-spine .ring{border-color:#bff7ee;
  background:radial-gradient(circle at 38% 30%,#fff,#7fd8cc 70%,#3f8a80)}
.bs-aurora .pocket{background:rgba(4,10,32,.44);
  box-shadow:inset 0 0 0 1px rgba(98,240,216,.40),inset 0 2px 10px rgba(0,0,0,.42)}
.bs-aurora .pocket .sleeve{background:linear-gradient(125deg,rgba(200,255,248,.24) 0 16%,
  transparent 32%,transparent 76%,rgba(200,255,248,.08) 100%)}
.bs-aurora .binder-leaf .leaf-face.front{background:linear-gradient(180deg,#12246b,#050a26)}
.bs-aurora .binder-leaf .leaf-face.back{background:linear-gradient(180deg,#0a1444,#050a26)}
/* the cosmos drifts as one sheet — foil moving under a light, not clouds */
.sk-cosmos{inset:-14%;
  background:
    radial-gradient(26% 18% at 30% 34%,rgba(120,255,235,.5) 0 56%,transparent 58%),
    radial-gradient(22% 15% at 68% 58%,rgba(180,150,255,.45) 0 56%,transparent 58%);
  animation:skCosmos 16s ease-in-out infinite alternate}
@keyframes skCosmos{
  from{transform:translate3d(-4%,-2%,0)}
  to  {transform:translate3d(5%,3%,0)}
}
.sk-twinkle{inset:0;
  background:
    radial-gradient(circle at 1px 1px,#fff 1.1px,transparent 1.6px) 5px 9px/31px 37px,
    radial-gradient(circle at 1px 1px,#bff7ee 1px,transparent 1.5px) 19px 24px/29px 41px;
  animation:skTwinkle 4.2s steps(2,end) infinite alternate}
@keyframes skTwinkle{from{opacity:.25}to{opacity:1}}

/* ============================================================
   7 · MASTER BALL — $350,000
   The one everybody was already saving for before they knew it existed.
   ============================================================ */
.binder3d.bs-masterball{
  background:
    radial-gradient(circle at 50% 50%,#fff 0 6.5%,#15171d 6.5% 9.5%,transparent 9.6%),
    /* the M */
    linear-gradient(64deg,transparent 0 30%,#ff5cc8 30% 37%,transparent 37%)
      no-repeat 22% 4%/24% 34%,
    linear-gradient(-64deg,transparent 0 30%,#ff5cc8 30% 37%,transparent 37%)
      no-repeat 54% 4%/24% 34%,
    /* the two white dots */
    radial-gradient(circle at 20% 22%,#fdfdfd 0 5.5%,transparent 5.6%),
    radial-gradient(circle at 80% 22%,#fdfdfd 0 5.5%,transparent 5.6%),
    linear-gradient(180deg,transparent 0 45%,#15171d 45% 55%,transparent 55%),
    linear-gradient(180deg,#8b4ae0 0 45%,#6b2fbf 45% 55%,#fdfdfd 55% 100%);
  border-color:#c58cff;
  box-shadow:0 24px 66px rgba(176,108,255,.36),inset 0 1px 0 rgba(255,255,255,.45)}
.bs-masterball .binder-spine{background:linear-gradient(90deg,#2c0d55,#6b2fbf 70%,rgba(107,47,191,0))}
.bs-masterball .binder-spine .ring{border-color:#ff5cc8;
  background:radial-gradient(circle at 38% 30%,#fff,#e0a8ff 70%,#8b4ae0)}
.bs-masterball .pocket{background:rgba(14,4,34,.36);
  box-shadow:inset 0 0 0 1px rgba(255,92,200,.34),inset 0 2px 10px rgba(0,0,0,.4)}
.bs-masterball .pocket .sleeve{background:linear-gradient(125deg,rgba(255,214,250,.26) 0 16%,
  transparent 32%,transparent 76%,rgba(255,214,250,.09) 100%)}
.bs-masterball .binder-leaf .leaf-face.front{background:linear-gradient(180deg,#8b4ae0,#4a1a91)}
.bs-masterball .binder-leaf .leaf-face.back{background:linear-gradient(180deg,#fdfdfd,#ddd3ea)}
/* a slow halo, so it is quietly the brightest object on any screen it is on */
.sk-halo{inset:-25%;
  background:radial-gradient(closest-side,rgba(176,108,255,.42),transparent 70%);
  animation:skHalo 5.2s ease-in-out infinite alternate}
@keyframes skHalo{from{transform:scale(.9);opacity:.55}to{transform:scale(1.12);opacity:1}}

/* ============================================================
   7 · CHERISH BALL — $260,000
   The rarest ball in the games, and the only one you cannot earn in them — it
   comes on event Pokémon. Crimson over white with a THICK gold band and a
   magenta heart struck on the top half. Completes the ball ladder at the rung
   below Master Ball, which is where a collector would put it.
   ============================================================ */
.binder3d.bs-cherish{
  background:
    radial-gradient(circle at 50% 50%,#fff 0 6.5%,#7a0f22 6.5% 9.5%,transparent 9.6%),
    /* the gold band, thicker than the others carry */
    linear-gradient(180deg,transparent 0 43%,#ffcb05 43% 46%,#a8790a 46% 54%,
      #ffcb05 54% 57%,transparent 57%),
    linear-gradient(180deg,#e0245e 0 45%,#b0113f 45% 55%,#fdfdfd 55% 100%);
  border-color:#ff8ec0;
  box-shadow:0 24px 60px rgba(255,92,200,.30),inset 0 1px 0 rgba(255,255,255,.5)}
.bs-cherish .binder-spine{background:linear-gradient(90deg,#5c0620,#e0245e 70%,rgba(224,36,94,0))}
.bs-cherish .binder-spine .ring{border-color:#ffcb05;
  background:radial-gradient(circle at 38% 30%,#fff3c4,#c99400 70%,#8a6500)}
.bs-cherish .pocket{background:rgba(26,3,14,.36);
  box-shadow:inset 0 0 0 1px rgba(255,203,5,.40),inset 0 2px 10px rgba(0,0,0,.4)}
.bs-cherish .pocket .sleeve{background:linear-gradient(125deg,rgba(255,226,244,.26) 0 16%,
  transparent 32%,transparent 76%,rgba(255,226,244,.09) 100%)}
.bs-cherish .binder-leaf .leaf-face.front{background:linear-gradient(180deg,#e0245e,#7a0f22)}
.bs-cherish .binder-leaf .leaf-face.back{background:linear-gradient(180deg,#fdfdfd,#e6d3da)}
/* the heart, as a rotated square and two circles — the shape a clip-path
   polygon can only approximate as a chunky arrowhead */
.sk-heart{left:50%;top:15%;width:15%;aspect-ratio:1;margin-left:-7.5%;
  background:#ff5cc8;transform:rotate(-45deg);
  box-shadow:0 0 0 2px #7a0f22}
.sk-heart::before,.sk-heart::after{content:'';position:absolute;
  width:100%;height:100%;border-radius:50%;background:#ff5cc8;
  box-shadow:0 0 0 2px #7a0f22}
.sk-heart::before{top:-50%;left:0}
.sk-heart::after{top:0;right:-50%}

/* ============================================================
   9 · HALL OF FAME — finish one master set
   WHY THE LAST ONE LOOKED LIKE CAUTION TAPE: it was gold bands on a gold
   ground. Gold has no value as a colour — it reads as precious only by contrast
   with something dark, which is why every trophy, every medal and every
   certificate in the world puts it on black, navy or deep red. Gold on gold is
   just yellow stripes.

   So this is near-black. Hard gold rays from the centre, a struck medallion
   carrying the symbol of the set you finished, and gold brackets in the four
   corners like a mounted plaque.
   ============================================================ */
.binder3d.bs-hall{
  background:
    /* corner brackets, drawn as four clipped squares */
    linear-gradient(90deg,#ffcb05 0 22px,transparent 22px) no-repeat 8px 8px/22px 3px,
    linear-gradient(180deg,#ffcb05 0 22px,transparent 22px) no-repeat 8px 8px/3px 22px,
    linear-gradient(90deg,#ffcb05 0 22px,transparent 22px) no-repeat calc(100% - 8px) 8px/22px 3px,
    linear-gradient(180deg,#ffcb05 0 22px,transparent 22px) no-repeat calc(100% - 8px) 8px/3px 22px,
    linear-gradient(90deg,#ffcb05 0 22px,transparent 22px) no-repeat 8px calc(100% - 8px)/22px 3px,
    linear-gradient(180deg,transparent 0 calc(100% - 22px),#ffcb05 calc(100% - 22px)) no-repeat 8px calc(100% - 8px)/3px 22px,
    linear-gradient(90deg,transparent 0 calc(100% - 22px),#ffcb05 calc(100% - 22px)) no-repeat calc(100% - 8px) calc(100% - 8px)/22px 3px,
    linear-gradient(180deg,transparent 0 calc(100% - 22px),#ffcb05 calc(100% - 22px)) no-repeat calc(100% - 8px) calc(100% - 8px)/3px 22px,
    /* a fine gold pinstripe, so the black is a material and not a hole */
    repeating-linear-gradient(45deg,rgba(255,203,5,.09) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,#1c1a12 0%,#0d0c10 55%,#141119 100%);
  border-color:#ffcb05;
  box-shadow:0 24px 60px rgba(255,203,5,.24),inset 0 1px 0 rgba(255,203,5,.35)}
.bs-hall .binder-spine{background:linear-gradient(90deg,#0a0906,#3a2f10 70%,rgba(13,12,16,0))}
.bs-hall .binder-spine .ring{border-color:#ffcb05;
  background:radial-gradient(circle at 38% 30%,#fff3c4,#c99400 70%,#8a6500)}
.bs-hall .pocket{background:rgba(6,5,10,.46);
  box-shadow:inset 0 0 0 1.5px rgba(255,203,5,.45),inset 0 2px 10px rgba(0,0,0,.5)}
.bs-hall .pocket .sleeve{background:linear-gradient(125deg,rgba(255,240,190,.22) 0 16%,
  transparent 32%,transparent 76%,rgba(255,240,190,.07) 100%)}
.bs-hall .binder-leaf .leaf-face.front{background:linear-gradient(180deg,#1c1a12,#0d0c10)}
.bs-hall .binder-leaf .leaf-face.back{background:linear-gradient(180deg,#141119,#0d0c10)}
/* rays you can count, turning once every forty seconds */
.sk-rays{inset:-30%;opacity:.5;
  background:repeating-conic-gradient(from 0deg,
    rgba(255,203,5,.5) 0 4deg,transparent 4deg 12deg);
  -webkit-mask:radial-gradient(closest-side,#000 20%,transparent 66%);
          mask:radial-gradient(closest-side,#000 20%,transparent 66%);
  animation:skRays 44s linear infinite}
@keyframes skRays{to{transform:rotate(1turn)}}
/* the medallion, struck with the set you finished */
.sk-seal{left:50%;top:50%;width:40%;aspect-ratio:1;margin:-20% 0 0 -20%;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:3px solid #ffcb05;background:#0d0c10;
  box-shadow:0 0 0 3px #0d0c10,0 0 0 5px rgba(255,203,5,.55),0 4px 18px rgba(0,0,0,.7)}
.sk-seal img{width:58%;height:58%;object-fit:contain}
.sk-seal b{font-family:'Bebas Neue',sans-serif;font-size:28px;color:#ffcb05}
.sk-seal::after{content:'';position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(255,203,5,.5);
  animation:skSeal 6s ease-in-out infinite}
@keyframes skSeal{
  0%,100%{transform:scale(1);opacity:.28}
  50%    {transform:scale(1.11);opacity:.8}
}
/* one hard point of light crossing the gold */
.sk-glint{top:-20%;bottom:-20%;left:0;width:8%;
  background:linear-gradient(100deg,transparent 0 34%,rgba(255,246,210,.9) 40% 60%,transparent 66%);
  animation:skGlint 9s ease-in-out infinite}
@keyframes skGlint{0%,76%{transform:translate3d(-300%,0,0)}100%{transform:translate3d(1350%,0,0)}}

/* ============================================================
   10 · UNCUT SHEET — level 50
   WHY THE LAST ONE LOOKED MUDDY: a conic gradient blends every hue into its
   neighbour, so a six-colour rainbow spends most of its area on the muddled
   browns and greys BETWEEN the colours. A real foil sheet separates cleanly.

   So the rainbow is hard bands now — repeating-linear-gradient with hard stops,
   fully saturated, no interpolation anywhere. Over it: black rules dividing the
   sheet into cards, crop marks at the corners, and a CMYK bar in register
   order. It should look like something that came off a press, not something
   that came out of a shader.

   --mx/--my come from makeTiltable, so the specular tracks your hand. 50%
   fallback means a centred sheen before you touch it, never a broken gradient.
   ============================================================ */
.binder3d.bs-uncut{
  background:
    /* the cut lines: hard black rules on a 1/3 grid */
    repeating-linear-gradient(90deg,transparent 0 calc(33.333% - 1.2px),
      #08060f calc(33.333% - 1.2px) calc(33.333% + .8px),transparent calc(33.333% + .8px)),
    repeating-linear-gradient(180deg,transparent 0 calc(33.333% - 1.2px),
      #08060f calc(33.333% - 1.2px) calc(33.333% + .8px),transparent calc(33.333% + .8px)),
    /* HARD rainbow bands — no blending, no mud */
    repeating-linear-gradient(118deg,
      #ff2d78  0    13px,
      #ff8a1f  13px 26px,
      #ffe23d  26px 39px,
      #3ddc84  39px 52px,
      #35b8ff  52px 65px,
      #8b4ae0  65px 78px);
  border-color:#08060f;
  box-shadow:0 24px 66px rgba(255,45,120,.34),inset 0 1px 0 rgba(255,255,255,.6)}
.bs-uncut .binder-spine{background:linear-gradient(90deg,#08060f,rgba(255,255,255,.45) 70%,transparent)}
.bs-uncut .binder-spine .ring{border-color:#08060f;
  background:radial-gradient(circle at 38% 30%,#fff,#c9cede 70%,#8a90a8)}
.bs-uncut .pocket{background:rgba(8,6,15,.30);
  box-shadow:inset 0 0 0 2px #08060f,inset 0 2px 9px rgba(0,0,0,.35)}
.bs-uncut .pocket .sleeve{background:linear-gradient(125deg,rgba(255,255,255,.42) 0 18%,
  transparent 36%,transparent 74%,rgba(255,255,255,.18) 100%)}
.bs-uncut .binder-leaf .leaf-face.front,
.bs-uncut .binder-leaf .leaf-face.back{background:repeating-linear-gradient(118deg,
  #ff2d78 0 13px,#ff8a1f 13px 26px,#ffe23d 26px 39px,
  #3ddc84 39px 52px,#35b8ff 52px 65px,#8b4ae0 65px 78px)}
/* the specular, following your hand */
.sk-foil{inset:0;mix-blend-mode:overlay;
  background:radial-gradient(58% 44% at var(--mx,50%) var(--my,50%),
    rgba(255,255,255,.85),rgba(255,255,255,.25) 46%,transparent 74%)}
/* crop marks, four corners, exactly as a printer sets them */
.sk-cuts{inset:5px;
  background:
    linear-gradient(90deg,#08060f 0 12px,transparent 12px) 0 0/100% 2px,
    linear-gradient(90deg,transparent calc(100% - 12px),#08060f calc(100% - 12px)) 0 0/100% 2px,
    linear-gradient(90deg,#08060f 0 12px,transparent 12px) 0 100%/100% 2px,
    linear-gradient(90deg,transparent calc(100% - 12px),#08060f calc(100% - 12px)) 0 100%/100% 2px,
    linear-gradient(180deg,#08060f 0 12px,transparent 12px) 0 0/2px 100%,
    linear-gradient(180deg,transparent calc(100% - 12px),#08060f calc(100% - 12px)) 0 0/2px 100%,
    linear-gradient(180deg,#08060f 0 12px,transparent 12px) 100% 0/2px 100%,
    linear-gradient(180deg,transparent calc(100% - 12px),#08060f calc(100% - 12px)) 100% 0/2px 100%;
  background-repeat:no-repeat}
/* the colour bar, in register order */
.sk-bars{right:3px;top:9px;bottom:9px;width:8px;
  background:linear-gradient(180deg,
    #00b7ce 0 16.6%,#d63ba8 16.6% 33.3%,#f2d43a 33.3% 50%,
    #08060f 50% 66.6%,#fff 66.6% 83.3%,#8a8f9e 83.3% 100%);
  box-shadow:0 0 0 1.5px #08060f}
@media(max-width:459px){ .sk-bars{width:6px} }