/* ══ GHOST CASE — THE BINDER COVER ═══════════════════════════════════════════════════
   THE MASTER. One cover for every surface: the sets shelf, the profile showcase, the
   binder page, and the home page through its iframe. Nothing else may define a cover.

   HOW IT STAYS RIGHT AT EVERY SIZE. The cover is ALWAYS laid out at 458x640 and only
   ever resized by scaling .cover-sc — never by stretching the box. That matters because
   the radius (26px), the welt (inset 5px, radius 22px) and the stitch strokes are fixed
   pixel values while the seam is drawn in a viewBox that scales with the box: change the
   box and they drift apart. Measured, that drift is the entire reason the binder page
   read wrong while the shelf read right — the shelf renders 458x640 at scale 0.517 on
   web and 0.358 on a phone, the binder page was stretching to 492x687 and 366x511.

   SO THERE IS NO MOBILE VERSION. One master, one set of numbers; a surface picks its
   size by passing a scale, e.g. --cvs:0.517. Web and mobile differ by that number alone.

   Lifted verbatim out of ghost-case-collections.html, which was the copy Tom confirmed
   correct on both web and mobile. The tile chrome that page draws AROUND a cover (.bk,
   its hover lift and its drop shadow) is not the cover and stays with the page. */

/* full binder cover — verbatim ghost-case.html construction at 458x640, scaled per tile */
.cover-sc{position:absolute;top:0;left:0;width:458px;height:640px;transform:scale(var(--cvs,0.4));transform-origin:top left;pointer-events:none}
.coverface{position:relative;height:640px;width:auto;aspect-ratio:63/88;border:none;border-radius:3px 26px 26px 3px;overflow:hidden;box-shadow:0 0 70px rgba(12,0,255,.12)}
.cv-skin{position:absolute;top:0;bottom:0;right:0;left:38.5px;border-radius:0 26px 26px 0;z-index:2;pointer-events:none;background:radial-gradient(95% 82% at 42% 30%,rgba(255,255,255,.24),transparent 64%),linear-gradient(118deg,rgba(255,255,255,.11) 0%,transparent 28%),linear-gradient(0deg,rgba(0,0,0,.16),transparent 20%);box-shadow:inset 0 20px 34px rgba(255,255,255,.11),inset 0 -14px 24px rgba(0,0,0,.40),inset 20px 0 34px rgba(255,255,255,.06),inset -16px 0 28px rgba(0,0,0,.32)}
.cv-stitch{position:absolute;inset:0;z-index:2;pointer-events:none;clip-path:inset(0 0 0 37px)}
.cv-stitch svg{position:absolute;inset:0;width:100%;height:100%}
.cv-stitch .lip{position:absolute;top:5px;bottom:5px;right:5px;left:30px;border-radius:0 22px 22px 0;box-shadow:inset 0 2px 6px rgba(0,0,0,.26),inset 0 -2px 6px rgba(255,255,255,.06)}
.cv-bindline{position:absolute;top:0;bottom:0;left:37px;width:1.5px;background:rgba(0,0,0,.6);box-shadow:1px 0 0 rgba(255,255,255,.07);z-index:4;pointer-events:none}
.cv-bindedge{position:absolute;top:0;bottom:0;left:0;width:37px;border-radius:3px 0 0 3px;z-index:5;pointer-events:none;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.28),
    inset 0 4px 7px rgba(255,255,255,.10),
    inset 0 -1.5px 0 rgba(0,0,0,.58),
    inset 0 -7px 9px rgba(0,0,0,.40)}
.cv-zip{position:absolute;top:0;bottom:0;right:0;left:37px;border-radius:0 26px 26px 0;z-index:2;pointer-events:none;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.30),
    inset -1.5px 0 0 rgba(255,255,255,.16),
    inset 0 -1.5px 0 rgba(0,0,0,.55),
    inset 0 4px 7px rgba(255,255,255,.12),
    inset -4px 0 7px rgba(255,255,255,.06),
    inset 0 -7px 9px rgba(0,0,0,.38)}
.cv-zip::before{content:'';position:absolute;top:3px;bottom:3px;right:3px;left:0;border-radius:0 23px 23px 0;
  border-top:1px solid rgba(0,0,0,.42);border-right:1px solid rgba(0,0,0,.34);border-bottom:1px solid rgba(0,0,0,.30);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.cv-zip::after{content:'';position:absolute;top:9px;bottom:9px;right:9px;left:0;border-radius:0 19px 19px 0;
  border-top:1px solid rgba(0,0,0,.30);border-right:1px solid rgba(0,0,0,.24);border-bottom:1px solid rgba(0,0,0,.26);
  box-shadow:0 1px 0 rgba(255,255,255,.07), inset 0 1px 2px rgba(0,0,0,.2)}
.coverface::before{content:'';position:absolute;top:0;bottom:0;left:0;width:37px;background:linear-gradient(90deg,rgba(255,255,255,.14) 0%,rgba(0,0,0,.58) 3%,rgba(0,0,0,.34) 14%,rgba(255,255,255,.12) 32%,rgba(255,255,255,.03) 44%,rgba(0,0,0,.22) 62%,rgba(0,0,0,.44) 84%,rgba(0,0,0,.60) 96%,rgba(255,255,255,.08) 100%);z-index:4;pointer-events:none}
.coverface::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.09),transparent 38%),linear-gradient(0deg,rgba(0,0,0,.6),transparent 48%);pointer-events:none;z-index:2}
.coverface.t-void{background:linear-gradient(150deg,#2822a8,#0e0b46 88%)}
/* Character binder colourways — same palette and mapping as the home page (Tom 07-31):
   each binder wears its own character's colour family. */
.coverface.t-orange{background:linear-gradient(150deg,#ff8c1a,#a34700 88%)}
.coverface.t-orangeMid{background:linear-gradient(150deg,#ffab55,#c76f1f 88%)}
.coverface.t-blue{background:linear-gradient(150deg,#1f8cff,#0a4699 88%)}
.coverface.t-blueMid{background:linear-gradient(150deg,#66b4ff,#2a79c9 88%)}
.coverface.t-bluePastel{background:linear-gradient(150deg,#c2e2ff,#8ab6e5 88%)}
.coverface.t-green{background:linear-gradient(150deg,#1fd65f,#0a7a34 88%)}
.coverface.t-greenMid{background:linear-gradient(150deg,#5fe38f,#2a9e58 88%)}
.coverface.t-greenPastel{background:linear-gradient(150deg,#bff4d3,#8ccfa8 88%)}
.coverface.t-violet{background:linear-gradient(150deg,#b026ff,#5c0a8a 88%)}
.coverface.t-violetMid{background:linear-gradient(150deg,#cc6bff,#8a2cbf 88%)}
.coverface.t-yellow{background:linear-gradient(150deg,#ffd60a,#a37f00 88%)}
.coverface.t-pink{background:linear-gradient(150deg,#ff6fae,#b01f68 88%)}
.coverface.t-brown{background:linear-gradient(150deg,#c07a3a,#5c3413 88%)}
.coverface.t-black{background:linear-gradient(150deg,#33333a,#08080a 88%)}

.cv-center{position:absolute;top:0;bottom:0;left:38px;right:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center;z-index:4}
.cv-151{width:62%;max-width:280px;max-height:34%;object-fit:contain;filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))}
.cv-title{font-family:'Chakra Petch',sans-serif;font-weight:600;font-size:38px;letter-spacing:2px;color:#fff;line-height:1.06;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,.85);word-break:break-word;max-width:92%}
.cv-set{font-family:'Kode Mono',monospace;font-weight:500;font-size:16px;letter-spacing:1.6px;color:#fff;text-shadow:0 1px 4px #000;text-transform:uppercase}
.cv-gc{position:absolute;left:52px;bottom:28px;width:30px;height:auto;z-index:4;text-rendering:geometricPrecision}
.cv-gc .gce{font-family:'Share Tech Mono',monospace;font-size:60px;font-weight:bold}
.cv-gc .gcek{fill:black}
.cv-gc .gced{fill:rgba(0,0,0,.72)}
.cv-gc .gcel{fill:rgba(255,255,255,.44)}