/* ============================================================
   LIBRARY / REDEEM — "WELCOME BACK" renovation (2026-07-24)
   Loads AFTER styles.css AND checkout.css and holds only the
   library-specific deltas. The header, title plates, console
   card, cyan pop, pet, peek rig and crew all come from the
   checkout design system. library.js is untouched.
   ============================================================ */

/* the store's [hidden] guard is scoped to .ck-shell, which this page doesn't use,
   so .ck-card form{display:grid} was beating the UA rule and rendering the hidden
   step-2 form as a sliver (its button animating early). Restore it here. */
.lib-login [hidden], .lib-wrap [hidden]{display:none !important}

/* KILL the sprite-sheet shadow on BOTH pets on this page (login card + shelf
   toolbar). styles.css puts a drop-shadow on `.cpet img`, but that img is the
   6-frame SHEET (width:600%) clipped by .cpet's overflow:hidden — the filter
   renders a shadow of the WHOLE strip and the clip crops it into a hard
   rectangle, which reads as a box shadow behind the dancing pet. */
.ck-pet .cpet img{filter:none}

/* page frame */
.lib-wrap{max-width:1000px; margin:0 auto; width:100%; padding:6px 22px 30px; position:relative; z-index:1}
.lib-login{max-width:470px; margin:30px auto 96px}

/* the step tracker lamp: the console head reports where you are.
   The <i> is empty in the markup; CSS writes the step. */
.lib-login .ck-cardhead i{animation:none}
.lib-login .ck-cardhead i::after{content:"● STEP 1 OF 2"; color:#4ade80}
.lib-login .ck-card:has(#libCodeForm:not([hidden])) .ck-cardhead i::after{content:"● STEP 2 OF 2"; color:#f4c95c}
html[data-theme="dark"] .lib-login .ck-cardhead i::after{color:#4ade80}
html[data-theme="dark"] .lib-login .ck-card:has(#libCodeForm:not([hidden])) .ck-cardhead i::after{color:#f4c95c}

/* step 2's final action key "Open My Floppy Shelf" reads ORANGE (coral), not cyan,
   to mark it as the finish button. id+class beats .btn.cyan's two classes. */
#libCodeForm .ck-pay{background:var(--coral); color:#2a1500}
#libCodeForm .ck-pay:hover{background:var(--coral)}

/* step 2's quiet secondary key: back to step 1 for a fresh code. Reads as a
   plain key, never competing with the orange finish button above it. */
.lib-again{width:100%; justify-content:center; font-family:var(--font-pixel);
  font-size:8.5px; letter-spacing:1px; padding:12px; margin-top:-4px}
/* step 1 while the 60s gate is counting: the key states the wait, and the
   nudge shake is already suppressed on :disabled */
#libForm .ck-pay:disabled{opacity:.55; cursor:not-allowed}

/* step 2: the code sent line + the big pixel code cells */
.lib-sent{margin:0; font-size:11px; color:var(--muted); line-height:1.8}
.lib-sent b{color:var(--ink); font-weight:400; word-break:break-all}#libCode{font-family:var(--font-pixel); font-size:20px; letter-spacing:10px; text-align:center; padding:14px 6px 14px 16px}

/* guided nudge: whichever step is on screen, its ONE action key politely
   shakes every few seconds to say "press me next". Step 1 = Send my code;
   step 2 (revealed after the request) = Open My Floppy Shelf, which restarts
   the animation on reveal since [hidden] unmounts it. */
@keyframes libNudge{
  0%,86%,100%{transform:translateX(0)}
  88%{transform:translateX(-4px) rotate(-1.2deg)}
  90%{transform:translateX(4px) rotate(1.2deg)}
  92%{transform:translateX(-3px)}
  94%{transform:translateX(3px)}
  96%{transform:translateX(-1px)}
  98%{transform:translateX(0)}
}
.lib-login .ck-pay{animation:libNudge 4.5s ease-in-out 1.2s infinite}
.lib-login .ck-pay:hover,.lib-login .ck-pay:disabled{animation:none}
@media (prefers-reduced-motion: reduce){.lib-login .ck-pay{animation:none}}

/* quiet helper lines + links */
.lib-login .ck-secure a{color:var(--cyan-deep); text-decoration:underline; text-underline-offset:2px; font-weight:700}
.lib-login .ck-secure a:hover{color:var(--ink)}

/* logged in: exactly ONE welcome message — hide the top login masthead so the
   in-shelf greeting is the only headline */
.ck-main:has(#libIn:not([hidden])) > .ck-head{display:none}
/* TWO crew signatures, one per state (see the pair in library.html): the mascot
   waves at the login gate, thumbs-up once you're in. Default to the logged-OUT
   one so the gate is right even before :has() resolves — browsers without :has()
   then simply keep the wave, which is the safe fallback. */
.ck-crew.crew-in{display:none}
.ck-main:has(#libIn:not([hidden])) .ck-crew.crew-out{display:none}
.ck-main:has(#libIn:not([hidden])) .ck-crew.crew-in{display:flex}
.lib-in{padding-top:8px}
.lib-welcome{text-align:center; margin:6px 0 24px}
/* black ink text with the cyan 3D plate (the "Your Floppies Online" look), whole title */
.lib-welcome-title{font-family:var(--font-pixel); font-weight:400; font-size:clamp(16px,2.4vw,23px); line-height:1.5;
  color:var(--ink);
  text-shadow:3px 3px 0 rgba(23,205,230,.55), 6px 6px 0 rgba(218,119,86,.4)}
html[data-theme="dark"] .lib-welcome-title{text-shadow:3px 3px 0 rgba(23,205,230,.45), 6px 6px 0 rgba(218,119,86,.38)}
.lib-welcome-sub{margin:14px auto 0; max-width:520px; font-size:11px; color:var(--muted); line-height:1.9}

/* the embedded hype man: the old fixed tops (111px / 366px) were measured when
   BOTH forms rendered in one tall card. Each step is its own short panel now, so
   366px dropped him below the card entirely (a mascot stranded in the void).
   Anchor him to the card's bottom edge instead — correct for either step, and
   it can't drift again when the copy changes. */
.lib-login .ck-register::before{top:auto; bottom:34px}

/* mobile */
@media(max-width:560px){
  .lib-login{margin-top:16px}
  #libCode{font-size:16px; letter-spacing:7px}
}

/* ============================================================
   THE GRID — toolbar + pet, category headings, 3D tilt grid of
   the big downloadable floppies, hover bloom
   ============================================================ */
/* logged in, the page frame widens so the 6-across floppies render BIGGER at rest
   without adding rows or scroll — same layout, more inches per disk. */
/* logged in, the frame widens and the gutters tighten so the 6-across floppies
   render as BIG as one row allows, with no extra rows and no scroll */
/* side padding = room for the END floppies to expand OUTWARD (they used to grow
   inward). The zoom overhang is ~(frame*0.95)/2 ≈ 80px per side, so the gutters
   are sized just past that; max-width grows by the same amount so the resting
   floppies stay the size they were. */
.ck-main:has(#libIn:not([hidden])) .lib-wrap{max-width:1460px;
  padding-left:clamp(18px,7vw,96px); padding-right:clamp(18px,7vw,96px)}
/* the end floppies now have real gutters to breathe into, so their bloom is no
   longer clamped — the halo is symmetric across the whole row */

/* shelf toolbar with the register pet perched on it */
/* the toolbar sits lower, and well clear of the grid: an expanded floppy grows
   ~46px above its resting top, so nothing above it may sit closer than that */
/* PUSHED DOWN 22px (2026-07-28, Hadi): the toolbar + the category heading below it
   both drop by 22px (this margin-top), and .lib-cat-head gives back the same 22px
   from its bottom margin — so the floppy row, its names and buttons do not move a
   pixel. Only the breathing room above the toolbar grows. */
.lib-head{position:relative; display:flex; align-items:center; gap:12px; margin:46px 0 34px; flex-wrap:wrap}
.lib-head .ck-pet{position:absolute; top:-56px; right:16px; width:66px}
.lib-head:has(#libAll:hover) .ck-pet .cpet img{animation:cpetdance .84s steps(6) infinite}
.lib-head-l .ck-title{margin:0}
.lib-head-l .lib-email{font-size:11px; color:var(--muted); margin-top:6px; word-break:break-all}
.lib-head .btn{font-size:11px; padding:12px 17px}

/* category section: a big stacked-plate heading (no counter chip).
   Generous margins all round so an expanded floppy overlays NOTHING: it grows
   ~46px up (clears the heading) and ~102px down past its own button (clears the
   receipts below). */
/* +12px (2026-07-28): drops JUST the "Website Builders" heading a touch lower,
   without moving the toolbar above it. */
.lib-cat{margin:56px 0 104px}
/* 76px -> 42px: pays back both the toolbar's 22px and the heading's extra 12px, so
   the floppy row, names and buttons stay exactly where they were. */
.lib-cat-head{display:flex; align-items:center; gap:10px; margin:0 0 42px}
.lib-cat-head .ck-title{margin:0; font-size:14px; line-height:1.4; letter-spacing:1px;
  text-shadow:2px 2px 0 rgba(23,205,230,.45), 4px 4px 0 rgba(218,119,86,.3)}
html[data-theme="dark"] .lib-cat-head .ck-title{text-shadow:2px 2px 0 rgba(23,205,230,.38), 4px 4px 0 rgba(218,119,86,.28)}

/* the 3D tilt grid — PURE floppies, no background light (hero fan recipe).
   perspective on the still .lib-item; transform-only on the tilting .li-lift. */
/* all 6 floppies on ONE row */
.lib-grid{display:grid; gap:8px; grid-template-columns:repeat(6,minmax(0,1fr))}
/* the whole card is one clickable download link AND one tilt hit-area. The tilt
   transform is JS-owned. JITTER-PROOF: NO filter on the tilting img (a drop-shadow
   filter re-rasters the sprite every transform frame — the documented shimmer). */
.lib-item{display:block; text-decoration:none; position:relative; perspective:700px; text-align:center; cursor:pointer}
/* the hovered floppy grows past its cell — pop it above its neighbors so the
   zoom overlaps cleanly instead of slipping under the next card */
.lib-item:hover{z-index:5}
/* spotlight bloom behind the hovered floppy — the HERO FAN recipe (styles.css
   .combo-fan::before): pure-cyan radial + blur, opacity-only fade, glow at
   z-index:0 with the art raised to 1 ABOVE it (negative z-index buried it
   behind the page background — the invisible-glow bug). The blur filter lives
   on this STILL layer, never on the tilting .li-lift (filter there = jitter). */
.lib-item::before{content:""; position:absolute; z-index:0; left:-30%; right:-30%; top:-24%; bottom:4%;
  border-radius:24px; pointer-events:none;
  /* the disk art is opaque and covers the card — the gradient stays BRIGHT out
     to 58% so a strong halo ring shows AROUND the floppy, not under it */
  background:radial-gradient(58% 58% at 50% 48%, rgba(23,205,230,.75) 0%, rgba(23,205,230,.6) 42%, rgba(23,205,230,.28) 66%, transparent 84%);
  filter:blur(16px); opacity:0; transition:opacity .35s ease}
.lib-item:hover::before{opacity:1}
.lib-item .li-lift, .lib-item .li-name, .lib-item .li-dl{position:relative; z-index:1}
/* aspect-ratio (not the img) sets the box height, so the HD layer inside can be
   absolutely positioned and laid out BIGGER than the frame */
.lib-item .li-lift{display:block; width:100%; aspect-ratio:560/584;
  transition:transform .28s cubic-bezier(.2,.8,.2,1);
  will-change:transform; transform-style:preserve-3d; backface-visibility:hidden}

/* HD ZOOM — the storefront's .disk-hd lesson, at this page's 1.95 zoom.
   The art layer is laid out 95% BIGGER than the frame and shown shrunk to
   1/1.95 = .51282 at rest, so the resting size is pixel-identical to before and
   shrinking never blurs. Hover releases it to scale(1) = its NATIVE layout size,
   a true 1:1 render, so the zoom is razor sharp instead of stretching a snapshot.
   Lift + tilt stay on .li-lift; the zoom lives HERE ONLY — never put a scale back
   on .li-lift, that reintroduces the stretch.
   Zoom ceiling: the sprite is 560px, so the HD box must stay under that or the
   hover starts upscaling and the blur returns (at 198px frames, Z<=2.82).

   GROWTH DIRECTION: the vertical origin sits at 28% (not 50%) so the floppy
   expands mostly DOWNWARD — it covers its own name/button (wanted) instead of
   punching up into the toolbar and the category heading (not wanted).
   Off-centre origins misalign the shrunk resting art, so each one is paired with
   a compensating translate:  offset% = (Z-1)*(0.5-origin)/Z.
     vertical  (origin .28): .95*.22/1.95 = 10.72%
     horizontal (origin 0/1): .95*.50/1.95 = 24.36%   [edge floppies only] */
.lib-item .li-hd{position:absolute; inset:-76.75%; transform-origin:50% 28%;
  transform:translateY(13.32%) scale(.39448);
  transition:transform .28s cubic-bezier(.2,.8,.2,1); will-change:transform;
  /* STICKY HOVER (2026-07-28 v2): the art is LIVE, not inert. Because .li-hd is a
     DESCENDANT of .li-lift, hovering the expanded art keeps .li-lift:hover true —
     so the floppy stays open until the pointer leaves the EXPANDED floppy itself,
     which is what Hadi asked for. Trade-off accepted: while it is open the art
     covers its own name + Download button. The whole card is the download anchor,
     so clicking the expanded art still downloads. */
  pointer-events:auto}
/* --lz = how far the art opens, same idea as the shelf's --dz / coming soon's --sz
   in styles.css. Full stage keeps the native 1:1 render; the phone ramp at the end
   of this file eases it off, because this grid's art box is the biggest of the
   three (2.535x the card vs 1.849 / 2.371) and on a phone it read oversized next
   to the other two. Never above 1 — that is the blurry-upscale trap. */
/* 30% TARGET (2026-07-29): was --lz:1 (native 1:1), which opened 174px -> 440px
   = 34.5% of a 1280 viewport, the same size the shelf and coming soon reached.
   x .87 -> 384px, so all three grids stay matched exactly at 30%. Every step
   below is likewise the old value x .87, preserving this page's taper. */
.lib-item{--lz:.87}
.lib-item .li-lift:hover .li-hd{transform:translateY(13.32%) scale(var(--lz))}

/* EDGE FLOPPIES: no longer anchored to their outer edge. The old 0%/100% origins
   made the first and last floppy grow INWARD toward the centre of the row, which
   read as lopsided. Every floppy now uses the same centred origin (50% 28%) and
   grows evenly both ways; .lib-wrap carries extra side padding on this page so the
   two end floppies have room to expand outward without hitting the viewport edge. */

/* HOVER TARGET = THE FLOPPY, NOT THE CARD (fix 2026-07-28).
   The zoom used to fire on .lib-item:hover, so hovering the Download button
   expanded the floppy, and the art (raised to z-index:3) then covered the very
   button you were reaching for — unpressable. Now only the floppy FRAME
   (.li-lift, a fixed-size box that never moves) triggers the zoom, so the button
   sits under a RESTING floppy and stays clear.
   The expanded art still sits in front of its own NAME on purpose. */
.lib-item .li-lift:hover{z-index:3}
/* The button stays UNDER the art (z-index 1, as designed) so an expanded floppy
   still covers its own name + button. Reaching it works because the art is inert
   (pointer-events:none on .li-hd, below): the overhang cannot hold the hover, so
   the instant the pointer leaves the floppy FRAME the zoom settles back and the
   button is clear. Lifting the button above the art instead made it paint on top
   of the expanded floppy — wrong look. */

/* the img must be inert (only .li-lift tilts and only .li-hd zooms). This
   OVERRIDES the legacy styles.css `.lib-item img` + `.lib-item:hover img`
   (filter re-raster + a competing hover transform = the jitter). */
.lib-in .lib-item .li-hd img{display:block; width:100%; height:100%;
  filter:none; transform:none; transition:none}
/* the main downloadable floppies ALWAYS show their name + download button */
.lib-item .li-name{display:block; font-family:var(--font-pixel); font-size:8.5px; line-height:1.5; margin:10px 0 8px; color:var(--ink)}
.lib-item .li-dl{display:inline-block; font-family:var(--font-pixel); font-size:8.5px; color:#062b33;
  background:var(--cyan); border:2px solid var(--edge); border-radius:8px; padding:6px 11px;
  box-shadow:2px 2px 0 var(--slab); transition:box-shadow .14s, transform .14s}
.lib-item:hover .li-dl{box-shadow:4px 4px 0 var(--slab); transform:translate(-1px,-1px)}

/* NOTE (2026-07-27): the collection-display section lived here — shelf /
   caddy / closet / vending machine iterations. All removed at Hadi's
   request; the vending-machine concept is parked for a future STOREFRONT
   GAME (play to win a free floppy). Art + gen scripts are kept:
   _qa\gen_vendo.py, gen_shelf*.py, gen_closet_wide.py and
   Mockupsloppy-template\_SHELF OUTPUTS\. */

/* orders + receipts: golden-ticket rows, each with a Download invoice button */
.lib-orders{margin-top:30px}
.lib-orders .ck-title{margin:0 0 14px; font-size:8.5px; letter-spacing:1px; text-shadow:2px 2px 0 rgba(23,205,230,.4)}
html[data-theme="dark"] .lib-orders .ck-title{text-shadow:2px 2px 0 rgba(23,205,230,.32)}
.lib-orders-list{display:grid; gap:10px}
.lib-ord{display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:linear-gradient(135deg,#f7efdb 0%,#f4e4bb 55%,#eed393 100%);
  border:2px solid var(--edge); border-radius:12px; box-shadow:3px 3px 0 var(--slab); padding:13px 16px}
.lib-ord .lo-main{display:flex; align-items:center; gap:14px; min-width:0; flex-wrap:wrap}
.lib-ord b{font-family:var(--font-pixel); font-size:9px; color:#2a2530; word-break:break-all}
.lib-ord .lo-amt{font-family:var(--font-pixel); font-size:9px; color:#5c4a22}
.lib-ord .lo-date{font-size:11px; color:#5c4a22}
.li-inv{flex:none; font-size:9px}

/* shelf mobile */
@media(max-width:560px){
  .lib-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
  /* toolbar, phone floor plan (Hadi 2026-07-29):
     row 1  YOUR FLOPPIES + email .............. Log out
     row 2  Download all .................. Download guide  */
  .lib-head{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px;
    align-items:center; margin:40px 0 26px}
  .lib-head .spacer{display:none}
  .lib-head-l{grid-column:1; grid-row:1; min-width:0}
  .lib-head #libOut{grid-column:2; grid-row:1; justify-self:end}
  .lib-head #libAll{grid-column:1; grid-row:2}
  .lib-head #libGuide{grid-column:2; grid-row:2; justify-self:end}
  .lib-head .btn{font-size:10px; padding:11px 12px}
  .lib-head .ck-pet{width:54px; top:-46px; right:12px}
  .lib-ord{flex-direction:column; align-items:stretch}
  .li-inv{width:100%; justify-content:center}
}

/* reduced motion: no tilt spring, no pet dance, no chip pulse */
@media(prefers-reduced-motion:reduce){
  .lib-item .li-lift{transition:none}
  .lib-head:has(#libAll:hover) .ck-pet .cpet img{animation:none}
}

/* ============================================================
   THE INVOICE PDF STAGE (2026-07-28)
   "Download invoice" reprints the CHECKOUT receipt as a real PDF:
   library.js builds the same .ck-receipt markup offscreen, html2canvas
   snapshots it, and the bitmap is wrapped in a one page PDF. These rules
   only flatten the paper for printing (no tilt, no drop shadow, no mask)
   and add the two printed blocks the live register doesn't need.
   ============================================================ */
.inv-stage{position:fixed; left:-10000px; top:0; width:360px; z-index:-1;
  pointer-events:none; opacity:1}
.inv-stage .ck-receipt{width:360px; rotate:none; filter:none; margin:0}
.inv-stage .rc-paper{-webkit-mask:none; mask:none; padding:14px 18px 2px}
/* baked teeth standing in for the CSS mask html2canvas cannot rasterize */
.inv-tear{display:block; width:100%; height:auto; image-rendering:pixelated}
/* READABLE AT 100% WITHOUT SCROLLING: the page maps 1 CSS px -> 1 pt, so every
   pixel of height is a point of page. The type stays full size and the SPACING
   pays instead — trimmed until the whole receipt clears a normal window at
   100% zoom. Don't loosen these back up without re-measuring the page height. */
.inv-stage .ck-item{animation:none; padding:8px 2px}
/* the last printed line and the order block would otherwise rule twice */
.inv-stage .ck-item:last-child{border-bottom:none}
.inv-stage .ck-item .em{width:42px; height:42px}
.inv-stage .ck-item .em img{width:100%; height:100%; object-fit:contain; filter:none}
/* the receipt HEAD (rules, mark, title, crew) now lives in checkout.css,
   which this page also loads - one component for the checkout receipt, the
   invoice PDF and (as baked art) the emails. */

/* the printed order block: order id, paid date, billed to — receipt ink */
.inv-meta{margin-top:9px; padding:8px 0 0; border-top:2px dotted rgba(42,37,48,.28);
  display:grid; gap:5px}
.inv-meta>div{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.inv-meta span{font-family:var(--font-pixel); font-size:6.5px; letter-spacing:1.5px; color:#6f6552}
.inv-meta b{font-family:"Space Mono",monospace; font-weight:400; font-size:10px; color:#2a2530;
  text-align:right; word-break:break-all}
/* .inv-note (the "one time purchase" fine print) was removed 2026-07-28, the
   same day it came out of the order email — the barcode foot now follows the
   totals directly and takes over its top margin. */
.inv-stage .rc-footart{margin-top:16px}

/* the totals sit closer on the invoice than on the live register */
.inv-stage .ck-totals{margin-top:9px; gap:5px}
.inv-stage .ck-totals .grand{margin-top:6px; padding:10px 14px}
/* the code line: which code was used and what it took off */
.inv-code{margin:-1px 0 0; font-family:var(--font-pixel); font-size:6.5px; letter-spacing:1.5px;
  color:#6f6552; text-align:right}
/* it lives inside .ck-totals, so checkout's `>div:not(.grand)` rule would make it
   a flex row and hang a dotted leader off it — it's a caption, not a total */
.inv-stage .ck-totals .inv-code{display:block}
.inv-stage .ck-totals .inv-code::after{content:none}
/* the barcode footer prints smaller here — it was the tallest block on the page */
.inv-stage .rc-footart{width:60%; margin:9px auto 0; padding-bottom:6px}


/* ============================================================
   DARK MODE v2 — "CLOSING TIME", library. Order plaques join the
   amber-on-velvet family; everything else re-lights via tokens.
   ============================================================ */
html[data-theme="dark"] .lib-ord{
  background:
    radial-gradient(120% 150% at 12% 10%, rgba(23,205,230,.15), transparent 55%),
    linear-gradient(135deg,#07161c 0%,#0a1d24 50%,#0c242e 82%,#050f14 100%);
  border-color:#17cde6; box-shadow:3px 3px 0 var(--slab), 0 0 16px rgba(23,205,230,.18)}
html[data-theme="dark"] .lib-ord b{color:#eafcff}
html[data-theme="dark"] .lib-ord .lo-amt{color:#5ce4f5}
html[data-theme="dark"] .lib-ord .lo-date{color:#b9dde6}

/* ============================================================
   THE ZOOM RAMP — redeem matches the shelf (2026-07-29)
   The opened floppy here was the biggest of the three grids: its art box is
   2.535x the card, so on a 390px phone a 94px card opened to 238px — 61% of
   the frame, against the shelf's 44% and coming soon's 53%. Same fault the
   storefront had: the card scaled with the frame, the zoom did not.
   --lz eases the opening back so redeem lands in the same band as the other
   two. Steps mirror styles.css so all three grids taper together.
   ============================================================ */
@media(max-width:700px){ .lib-item{--lz:.6264} }
@media(max-width:430px){ .lib-item{--lz:.609} }
@media(max-width:360px){ .lib-item{--lz:.5916} }

/* EDGE COLUMNS on the phone (3 across): the two outer floppies grew evenly both
   ways and ran off the glass. They now anchor to their own outer edge and spend
   the whole growth INWARD — the same move the storefront grids make, done with
   transform-origin instead of a pixel shift so it holds at ANY page padding:
   origin 0%/100% + the paired compensating translate (30.28% = 76.75/253.5, the
   art box's overhang as a share of its own width) leaves the resting art exactly
   where it is and pins the opened art's outer edge to the card's outer edge.
   Desktop is untouched — six across, centred growth, as designed. */
@media(max-width:700px){
  .lib-grid .lib-item:nth-child(3n+1) .li-hd{transform-origin:0% 28%;
    transform:translate(30.28%,13.32%) scale(.39448)}
  .lib-grid .lib-item:nth-child(3n+1) .li-lift:hover .li-hd{
    transform:translate(30.28%,13.32%) scale(var(--lz))}
  .lib-grid .lib-item:nth-child(3n) .li-hd{transform-origin:100% 28%;
    transform:translate(-30.28%,13.32%) scale(.39448)}
  .lib-grid .lib-item:nth-child(3n) .li-lift:hover .li-hd{
    transform:translate(-30.28%,13.32%) scale(var(--lz))}
}

/* ============================================================
   ...AND THE SAME ON THE DESKTOP (2026-07-29, Hadi: "i swear its bigger
   in library"). He was right, and the reason is layout, not the zoom:
   the storefront's shelf and coming-soon grids are CAPPED, so an opened
   floppy is 441px on any wide screen. The redeem shelf keeps widening with
   the frame (max-width 1460, 6 across), so its cards grow — 174px at 1280,
   205px once the wrap caps — and 2.535x of that opens to 519px. Identical
   at 1280, ~18% bigger by 1460.
   So --lz eases off as the cards grow, holding the opened floppy at ~441px
   (within ~3%) right across the desktop range. Same size as the shelf, same
   size as coming soon, whatever the window. ============================================================ */
@media(min-width:1281px){ .lib-item{--lz:.8352} }
@media(min-width:1340px){ .lib-item{--lz:.8004} }
@media(min-width:1400px){ .lib-item{--lz:.7656} }
@media(min-width:1460px){ .lib-item{--lz:.7395} }