/* lane S: shop expansion. Store pages (Featured, Bundles, Cosmetics filters, Gems ribbons), 8 new companions,
   10 banners, 4 card sleeves, the Folio Foil card treatment and 3 battle boards. js/shop*.js, js/screens-store.js. */

/* ================================================================ store: tiles */
.lcs-tile.rar-Epic, .lcs-tile.rar-Legendary { box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--r) 30%, transparent) inset; }
.lcs-tile.rar-Legendary .lcs-prev { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--r) 30%, transparent), rgba(10,5,24,.85) 75%); }
.lcs-tile.rar-Epic .lcs-prev { background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--r) 26%, transparent), rgba(10,5,24,.85) 75%); }
.lcs-tile.own::after { content: "✓"; position: absolute; top: 14px; right: 14px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font: 900 14px var(--font-ui); color: #0c2a18; background: linear-gradient(180deg, #b8ffd6, #5dff9a); box-shadow: 0 0 12px rgba(93,255,154,.5); }
.lcs-dealtag, .lcs-tagtag { position: absolute; top: 14px; left: 14px; z-index: 3; font: 900 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; font-style: normal;
  padding: 5px 10px; border-radius: 99px; color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); box-shadow: 0 4px 12px rgba(0,0,0,.5); }
.lcs-tagtag { background: linear-gradient(180deg, #e6d8ff, #a86bff); color: #1a0a33; }
.lcs-price s, .lcs-heroprice s, .lcs-dealprice s { color: #9d8fc0; font: 700 13px var(--font-ui); text-decoration-thickness: 2px; }
.lcs-save { font-style: normal; font: 900 12px var(--font-ui); color: #0c2a18; background: #7dffb0; border-radius: 99px; padding: 3px 8px; }
.lcs-looks { display: inline-flex; gap: 5px; margin-left: auto; }
.lcs-looks i { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--e) 0 22%, var(--a) 30%); border: 1.5px solid rgba(255,255,255,.35); }
.lcs-looks i.own { border-color: #7dffb0; box-shadow: 0 0 6px rgba(125,255,176,.6); }
.lcs-btile .lcs-prev { height: 170px; }

/* bundle contents: small previews side by side */
.lcs-bthumbs { display: flex; gap: 8px; align-items: stretch; justify-content: center; width: 100%; height: 100%; padding: 6px; }
.lcs-thumb { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; overflow: hidden;
  border-radius: 10px; background: rgba(8,4,18,.35); padding: 4px 2px 6px; }
.lcs-mini { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; overflow: hidden; }
.lcs-mbn { position: relative; width: 94%; aspect-ratio: 39 / 10; border-radius: 6px; overflow: hidden; }
.lcs-mbn .bn { border-radius: 6px; }
.lcs-msl { width: 46px; height: 64px; }
.lcs-mcard .card { zoom: .56; }
.lcs-mtitle { font-size: 10.5px !important; padding: 6px 8px !important; line-height: 1.2; max-width: 94%; }
.lcs-mrec { transform: scale(.6); }
.lcs-thumb span { font: 700 10.5px var(--font-ui); color: #d8ccef; text-align: center; line-height: 1.15; max-height: 2.4em; overflow: hidden; }
.lcs-thumb.own span { color: #7dffb0; }
.lcs-thumb.own span::before { content: "✓ "; }
.lcs-sprev .lcs-bthumbs { flex-wrap: wrap; gap: 12px; }
.lcs-sprev .lcs-thumb { flex: 1 1 40%; min-height: 120px; }
.lcs-herothumbs .lcs-bthumbs { gap: 10px; }
.lcs-sprev .lcs-msl, .lcs-herothumbs .lcs-msl { width: 70px; height: 98px; }
.lcs-sprev .lcs-mtitle, .lcs-herothumbs .lcs-mtitle { font-size: 14px !important; }
.lcs-sprev .lcs-thumb span, .lcs-herothumbs .lcs-thumb span { font-size: 13px; }

/* cosmetics sub-filters: one calm chip row */
.lcs-subs { position: sticky; top: -4px; z-index: 5; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; margin-bottom: 4px; scrollbar-width: none; touch-action: pan-x;
  background: linear-gradient(180deg, rgba(12,7,26,.96) 70%, rgba(12,7,26,0)); }
.lcs-subs::-webkit-scrollbar { display: none; }
.lcs-subs button { flex: none; padding: 9px 16px; border-radius: 99px; border: 1px solid rgba(232,186,90,.22); background: rgba(20,11,40,.8); color: #cbb9ee; font: 700 14px var(--font-ui); cursor: pointer; }
.lcs-subs button:hover { color: #fff; border-color: rgba(232,186,90,.5); }
.lcs-subs button.on { color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); border-color: #f6d98a; }

/* featured: one hero bundle + the daily deal, then four picks */
.lcs-feat { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; margin-bottom: 6px; }
.lcs-hero, .lcs-deal { position: relative; border-radius: 18px; border: 1px solid rgba(232,186,90,.35); cursor: pointer; overflow: hidden;
  background: radial-gradient(ellipse 70% 90% at 20% 30%, rgba(140,80,240,.35), transparent 70%), linear-gradient(180deg, rgba(34,19,64,.95), rgba(14,8,28,.96)); box-shadow: 0 18px 40px rgba(0,0,0,.5);
  transition: transform .3s var(--ease-back, ease-out), border-color .25s; }
.lcs-hero:hover, .lcs-deal:hover { transform: translateY(-4px); border-color: #f6d98a; }
.lcs-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; padding: 16px; min-height: 300px; }
.lcs-herothumbs .lcs-prev { height: 100%; min-height: 260px; }
.lcs-heroinfo { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.lcs-heroinfo > b { font: 900 26px var(--font-title); color: #fff4d6; letter-spacing: .03em; line-height: 1.1; }
.lcs-heroinfo > span { color: #cdbfe8; font-size: 14px; line-height: 1.45; }
.lcs-heroprice, .lcs-dealprice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.lcs-heroprice b, .lcs-dealprice b { display: inline-flex; align-items: center; gap: 6px; font: 900 22px var(--font-title); color: #fff4d6; }
.lcs-dealprice span { display: inline-flex; align-items: center; gap: 6px; }
.lcs-heroprice .gemicon, .lcs-dealprice .gemicon, .lcs-dealprice .coin { width: 20px; height: 20px; }
.lcs-ribbon { align-self: flex-start; font: 900 11px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; font-style: normal; padding: 5px 12px; border-radius: 99px;
  color: #1a0a33; background: linear-gradient(180deg, #e6d8ff, #a86bff); }
.lcs-ribbon.deal { color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); }
.lcs-deal { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.lcs-deal > b { font: 900 19px var(--font-title); color: #fff4d6; }
.lcs-dealhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lcs-dealhead small { color: #bfb0dd; font: 600 12px var(--font-ui); }
.lcs-dealprev .lcs-prev { height: 150px; }
.lcs-deal .lcs-rar { align-self: flex-start; }
.lcs-dealnote { margin: 4px 0 8px; color: #f6d98a; font-size: 14px; line-height: 1.5; }
.lcs-sub small { font: 600 13px var(--font-ui); letter-spacing: .02em; color: #9d8fc0; }

/* season bundle tile (opens lane P's pass sheet) */
.lcs-passart { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(ellipse at 50% 40%, rgba(242,193,78,.35), transparent 65%), linear-gradient(135deg, #2a1552, #120a26); }
.lcs-passart i { width: 54px; height: 54px; border-radius: 50%; border: 3px solid #f2c14e; box-shadow: 0 0 18px rgba(242,193,78,.6), inset 0 0 12px rgba(242,193,78,.4);
  background: conic-gradient(from 0deg, #f2c14e 0 25%, transparent 0 50%, #f2c14e 0 75%, transparent 0); animation: czSpin 14s linear infinite; }
.lcs-passart b { font: 900 20px var(--font-title); color: #fff4d6; letter-spacing: .08em; }
.lcs-passart span { font: 700 13px var(--font-ui); color: #f6d98a; letter-spacing: .12em; text-transform: uppercase; }
.lcs-seasontile .lcs-small { margin: 0; }

/* pet look picker (item sheet) */
.lcs-lookrow { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.lcs-lookrow button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 99px; border: 1px solid rgba(232,186,90,.25); background: rgba(20,11,40,.8); color: #d8ccef; font: 700 13px var(--font-ui); cursor: pointer; }
.lcs-lookrow button.on { border-color: #f6d98a; color: #fff4d6; background: rgba(242,193,78,.18); }
.lcs-lookrow i { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--e) 0 22%, var(--a) 30%); border: 1.5px solid rgba(255,255,255,.4); }
.lcs-lookrow em { font-style: normal; color: #7dffb0; }

/* gems: ribbons */
.lcs-gempack { position: relative; }
.lcs-bonus, .lcs-bestval, .lcs-firstx { position: absolute; font-style: normal; font: 900 11px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 99px; z-index: 2; }
.lcs-bonus { top: 10px; left: 10px; color: #0a2030; background: linear-gradient(180deg, #d8f6ff, #6fd3ff); }
.lcs-bestval { top: 10px; right: 10px; color: #2b1600; background: linear-gradient(180deg, #fff0c2, #e2b04a); box-shadow: 0 0 14px rgba(242,193,78,.5); }
.lcs-firstx { bottom: 64px; left: 50%; transform: translateX(-50%); white-space: nowrap; color: #0c2a18; background: linear-gradient(180deg, #d4ffe6, #5dff9a); }
.lcs-gempack.best { border-color: rgba(242,193,78,.7); box-shadow: 0 16px 34px rgba(0,0,0,.5), 0 0 24px rgba(242,193,78,.25); }
.lcs-gemart.huge i { width: 34px; height: 34px; }
.lcs-gemrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lcs-gemrow .lcs-gempack { width: auto; padding-top: 34px; }
.lcs-firstnote { color: #7dffb0; }

/* after a purchase */
.lcs-bought { display: flex; justify-content: center; margin: 6px 0 10px; }
.lcs-bought .lcs-prev { min-height: 220px; width: min(560px, 100%); }

/* ================================================================ card sleeves (the back of every card) */
.lcs-sleeves { display: flex; gap: 18px; align-items: center; justify-content: center; }
.lcs-sleeve { position: relative; width: 84px; height: 118px; container-type: inline-size; }
.lcs-sleeves.big .lcs-sleeve { width: 150px; height: 210px; }
.lcs-sleeve.tilt { transform: rotate(8deg) translateY(10px); }
.lcs-sleeve .cardback { position: absolute; inset: 0; border-radius: 7.5cqw; overflow: hidden; }

.sl-sleeve-inkwash .cardback { background: radial-gradient(ellipse at 50% 40%, rgba(111,160,255,.35), transparent 60%),
  repeating-linear-gradient(170deg, transparent 0 14px, rgba(160,190,255,.12) 14px 16px), linear-gradient(170deg, #1b2452, #070a1c 75%);
  border: 3px solid #b8c4e8; box-shadow: inset 0 0 0 2px #0a1030, inset 0 0 22px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.55); }
.sl-sleeve-inkwash .cardback::after { background: radial-gradient(circle at 50% 44%, #eef3ff 0 6%, transparent 7%), radial-gradient(circle at 50% 44%, transparent 0 16%, rgba(200,215,255,.5) 17% 18%, transparent 19%),
  linear-gradient(transparent 60%, rgba(120,150,230,.3) 61% 62%, transparent 63% 70%, rgba(120,150,230,.25) 71% 72%, transparent 73%); mix-blend-mode: normal; opacity: 1; }
.sl-sleeve-cogwork .cardback { background: radial-gradient(circle at 18% 12%, #5a3c0e 0 3px, transparent 4px), radial-gradient(circle at 82% 12%, #5a3c0e 0 3px, transparent 4px),
  radial-gradient(circle at 18% 88%, #5a3c0e 0 3px, transparent 4px), radial-gradient(circle at 82% 88%, #5a3c0e 0 3px, transparent 4px), linear-gradient(160deg, #e8c06a, #b3842f 45%, #6e4b14);
  border: 3px solid #3a2a0c; box-shadow: inset 0 0 0 2px #f2d898, inset 0 0 22px rgba(60,30,0,.6), 0 6px 16px rgba(0,0,0,.55); }
.sl-sleeve-cogwork .cardback::after { inset: 22%; border-radius: 50%; background: radial-gradient(circle, #6e4b14 0 18%, transparent 19%), repeating-conic-gradient(#5a3c0e 0 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 0 30%, #000 31% 70%, transparent 71%); mask: radial-gradient(circle, transparent 0 30%, #000 31% 70%, transparent 71%);
  mix-blend-mode: normal; opacity: .9; animation: czSpin 18s linear infinite; }
.sl-sleeve-travelers .cardback { background: radial-gradient(ellipse 40% 26% at 50% 40%, rgba(214,184,255,.9), rgba(168,107,255,.35) 55%, transparent 75%), linear-gradient(180deg, #120a26, #2a1a40 60%, #150e24);
  border: 3px solid #d6b8ff; box-shadow: inset 0 0 0 2px #2a1640, inset 0 0 22px rgba(0,0,0,.6), 0 6px 16px rgba(0,0,0,.55); }
.sl-sleeve-travelers .cardback::after { inset: auto 10% 12% 10%; height: 16%; border-radius: 0; background: radial-gradient(circle at 10% 50%, #ffd36e 0 8%, transparent 20%), radial-gradient(circle at 30% 50%, #ffd36e 0 8%, transparent 20%),
  radial-gradient(circle at 50% 50%, #ffd36e 0 8%, transparent 20%), radial-gradient(circle at 70% 50%, #ffd36e 0 8%, transparent 20%), radial-gradient(circle at 90% 50%, #ffd36e 0 8%, transparent 20%); mix-blend-mode: normal; opacity: 1; }
.sl-sleeve-gilt-folio .cardback { background: linear-gradient(115deg, transparent 30%, rgba(255,240,200,.35) 45%, transparent 60%) 0 0 / 300% 100%,
  repeating-linear-gradient(45deg, rgba(242,193,78,.12) 0 2px, transparent 2px 10px), radial-gradient(ellipse at 50% 45%, #5a1a1a, #2a0a0c 75%);
  border: 3px solid #f2c14e; box-shadow: inset 0 0 0 3px #3a0c0c, inset 0 0 0 5px rgba(242,193,78,.6), inset 0 0 24px rgba(0,0,0,.7), 0 6px 16px rgba(0,0,0,.55); animation: slSheen 6s ease-in-out infinite; }
.sl-sleeve-gilt-folio .cardback::after { inset: 18%; border-radius: 4px; background: radial-gradient(circle at 50% 50%, #f2c14e 0 9%, transparent 10%), linear-gradient(#f2c14e, #f2c14e) center / 70% 2px no-repeat,
  linear-gradient(#f2c14e, #f2c14e) center / 2px 70% no-repeat; border: 2px solid rgba(242,193,78,.7); mix-blend-mode: normal; opacity: .9; }
@keyframes slSheen { 0%, 100% { background-position: 100% 0, 0 0, 0 0; } 50% { background-position: 0 0, 0 0, 0 0; } }
body.fx-low [class*="sl-sleeve"] .cardback, body.fx-low .sl-sleeve-cogwork .cardback::after { animation: none !important; }

/* ================================================================ Folio Foil card treatment (full-art feel, slow rainbow foil) */
.cs-folio-foil .card .face:not(.fa-face) .art { left: 0 !important; top: 0 !important; width: 100% !important; height: 62% !important; object-fit: cover; border-radius: 0; }
.cs-folio-foil .card .face:not(.fa-face) .cf-frame { -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 50%, #000 60%); mask-image: linear-gradient(180deg, transparent 0, transparent 50%, #000 60%); }
.cs-folio-foil .card .face:not(.fa-face) .cf-name { z-index: 2; text-shadow: 0 0 .8cqw #000, 0 .3cqw .6cqw #000; }
.cs-folio-foil .card .face::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: .35;
  background: linear-gradient(125deg, rgba(255,90,90,.6), rgba(255,220,90,.6) 20%, rgba(90,255,160,.6) 40%, rgba(90,180,255,.6) 60%, rgba(200,110,255,.6) 80%, rgba(255,90,90,.6)) 0 0 / 300% 300%;
  animation: csFoil 9s linear infinite; }
.cs-folio-foil .card .face { box-shadow: 0 0 0 .9cqw #f2c14e, 0 0 5cqw rgba(242,193,78,.35), 0 6px 16px rgba(0,0,0,.55); }
@keyframes csFoil { to { background-position: 300% 300%; } }
body.fx-low .cs-folio-foil .card .face::before { animation: none !important; }

/* ================================================================ new companions (drawings in js/shop-pets.js) */
.czs .cz-shadow { transform-box: fill-box; transform-origin: 50% 50%; }
/* Blot: wobbles like a drop */
.czs-ink-sprite .cz-body { transform-origin: 50% 100% !important; animation: czsWobble 3.2s ease-in-out infinite; }
@keyframes czsWobble { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.06, .95); } 60% { transform: scale(.96, 1.05); } }
.czs-ink-sprite .cz-drops circle { animation: czsDrip 3.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes czsDrip { 50% { transform: translateY(-3px); opacity: .6; } }
/* Fold: hovers and flaps slowly */
.czs-paper-crane, .czs-little-echo, .czs-lantern-bat { animation: czHover 4s ease-in-out infinite; }
.czs-paper-crane .cz-wing-l { transform-origin: 100% 100% !important; animation: czsCrane 2.6s ease-in-out infinite; }
.czs-paper-crane .cz-wing-r { transform-origin: 0% 100% !important; animation: czsCrane 2.6s ease-in-out infinite; }
@keyframes czsCrane { 50% { transform: scaleY(.7) skewX(-6deg); } }
.czs-paper-crane .cz-tail { transform-origin: 0% 100% !important; animation: czWag 3.8s ease-in-out infinite; }
/* Wick: wings beat, lantern glows */
.czs-lantern-bat .cz-wing-l { transform-origin: 100% 40% !important; animation: czsBat .9s ease-in-out infinite; }
.czs-lantern-bat .cz-wing-r { transform-origin: 0% 40% !important; animation: czsBat .9s ease-in-out infinite; }
@keyframes czsBat { 50% { transform: scaleX(.62) scaleY(.9); } }
.czs-lantern-bat .cz-lamp { transform-origin: 50% 0% !important; animation: czsSway 3s ease-in-out infinite; }
@keyframes czsSway { 50% { transform: rotate(7deg); } }
.czs-lantern-bat .cz-lampglow { animation: czGlow 2.2s ease-in-out infinite; }
.czs-lantern-bat.cz-glowing .cz-lampglow { transform: scale(1.5); }
/* Glint: legs skitter, crystal shine sweeps */
.czs-rimecrawler .cz-leg, .czs-clockwork-beetle .cz-leg { transform-origin: 50% 0% !important; animation: czsLeg 1.6s ease-in-out infinite; }
.czs-rimecrawler .cz-leg.l2, .czs-clockwork-beetle .cz-leg.l2 { animation-delay: -.8s; }
@keyframes czsLeg { 50% { transform: rotate(8deg); } }
.czs-rimecrawler .cz-shine { animation: czsShine 3.6s ease-in-out infinite; }
@keyframes czsShine { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .9; } }
.czs-rimecrawler .cz-eye, .czs-lantern-bat .cz-eye { filter: drop-shadow(0 0 2px currentColor); }
.czs-rimecrawler .cz-svg { filter: drop-shadow(0 6px 8px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(160,220,255,.35)); }
/* Tock: the wind-up key turns */
.czs-clockwork-beetle .cz-key { transform-origin: 50% 70% !important; animation: czsKey 4s ease-in-out infinite; }
@keyframes czsKey { 0%, 20% { transform: scaleX(1); } 45% { transform: scaleX(-1); } 70%, 100% { transform: scaleX(1); } }
/* Mote: flickers like a page in a draft */
.czs-little-echo .cz-tail { transform-origin: 50% 20% !important; animation: czsEcho 3s ease-in-out infinite; }
@keyframes czsEcho { 50% { transform: skewX(-4deg) scaleY(1.03); } }
.czs-little-echo .cz-motes circle { animation: czZ 3.6s infinite; } .czs-little-echo .cz-motes circle:nth-child(2) { animation-delay: 1.2s; } .czs-little-echo .cz-motes circle:nth-child(3) { animation-delay: 2.4s; }
.czs-little-echo .cz-glow { opacity: .55; animation: czGlow 3s ease-in-out infinite; }
/* Nibs: breathes, quills ruffle */
.czs-quill-hedgehog .cz-body { transform-origin: 50% 100% !important; animation: czBreathe 3.4s ease-in-out infinite; }
.czs-quill-hedgehog .cz-spines { transform-origin: 55% 90% !important; animation: czsRuffle 5s ease-in-out infinite; }
@keyframes czsRuffle { 0%, 80%, 100% { transform: scale(1); } 86% { transform: scale(1.07, 1.1); } 92% { transform: scale(.98); } }
/* Dog-Ear: head sways, wing flicks, a page turns */
.czs-bookwyrm .cz-head { transform-origin: 20% 90% !important; animation: czTilt 5.4s ease-in-out infinite; }
.czs-bookwyrm .cz-wing { transform-origin: 100% 100% !important; animation: czsCrane 3.2s ease-in-out infinite; }
.czs-bookwyrm .cz-page { transform-origin: 0% 50% !important; animation: czsPage 6s ease-in-out infinite; }
@keyframes czsPage { 0%, 70%, 100% { transform: scaleX(1); } 80% { transform: scaleX(-.9) translateX(2px); } 90% { transform: scaleX(1); } }
.czs-bookwyrm .cz-tail { transform-origin: 0% 100% !important; animation: czWag 3s ease-in-out infinite; }
/* reactions shared with the originals (hop/cheer/sad/startle from cosmetics.css) */
.czs.cz-flare .cz-svg { filter: drop-shadow(0 0 12px rgba(255,211,110,.9)); }
.czb.czs-rimecrawler .cz, .czb-rimecrawler .cz, .czb-rimecrawler-v2 .cz, .czb-rimecrawler-v3 .cz { transform: translateX(-10px); }
body.fx-low .czs *, body.fx-low .czs { animation: none !important; }

/* ================================================================ banners (js/shop-art.js) */
.bns-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bns-inkwash { background: linear-gradient(180deg, #060a20, #121a44 60%, #0a0e26); }
.bns-flow path { animation: bnsFlow 9s linear infinite; }
.bns-flow path:nth-child(2) { animation-duration: 12s; } .bns-flow path:nth-child(3) { animation-duration: 15s; }
@keyframes bnsFlow { to { stroke-dashoffset: -560; } }
.bns-glint { animation: bnTwinkle 3s ease-in-out infinite alternate; }
.bns-corner { background: #1c1030; }
.bns-win rect { animation: bnsFlicker 4.2s ease-in-out infinite; } .bns-win rect:nth-child(2n) { animation-delay: -1.7s; }
@keyframes bnsFlicker { 0%, 100% { opacity: .95; } 40% { opacity: .75; } 55% { opacity: 1; } }
.bns-teslawin { filter: drop-shadow(0 0 6px #ffd36e); animation: bnsFlicker 5s ease-in-out infinite; }
.bns-sign { position: absolute; right: 2%; top: 33%; width: 16%; transform-origin: 50% 0; animation: bnsSwing 4s ease-in-out infinite; }
.bns-sign::before { content: ""; position: absolute; left: 20%; right: 20%; top: -6px; height: 8px; border-left: 2px solid #3a2418; border-right: 2px solid #3a2418; }
.bns-sign i { display: block; margin-top: 2px; padding: 3px 4px; border-radius: 3px; background: #3a2418; border: 1.5px solid #c9953a; color: #f6d98a; font: 700 7.5px var(--font-title); font-style: normal; text-align: center; white-space: nowrap; overflow: hidden; transform: rotate(-4deg); }
.cc-lg .bns-sign i { font-size: 10px; } .cc-sm .bns-sign i { font-size: 6px; }
@keyframes bnsSwing { 50% { transform: rotate(7deg); } }
.bns-cog { background: radial-gradient(ellipse at 70% 50%, #2a2410, #0e0c06 75%); }
.bns-needle { animation: bnsNeedle 2.8s ease-in-out infinite; }
@keyframes bnsNeedle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-40deg); } 60% { transform: rotate(20deg); } }
.bns-steam { position: absolute; bottom: 30%; width: 18px; height: 18px; border-radius: 50%; background: rgba(230,225,215,.4); filter: blur(4px); animation: bnsSteam 3.6s ease-out infinite; opacity: 0; }
.bns-steam.s1 { left: 44%; } .bns-steam.s2 { left: 76%; animation-delay: 1.2s; } .bns-steam.s3 { left: 84%; animation-delay: 2.4s; }
@keyframes bnsSteam { 0% { opacity: 0; transform: translateY(20px) scale(.6); } 30% { opacity: .8; } 100% { opacity: 0; transform: translateY(-60px) scale(2.2); } }
.bns-wilds { background: linear-gradient(180deg, #0a1a24, #16323a 60%, #0c1a14); }
.bns-flies { position: absolute; inset: 0; }
.bns-flies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #e8ff8a; box-shadow: 0 0 8px 2px rgba(220,255,120,.7); animation: bnsFly 7s ease-in-out infinite; }
.bns-flies i:nth-child(1) { left: 18%; top: 60%; } .bns-flies i:nth-child(2) { left: 34%; top: 40%; animation-delay: -1s; animation-duration: 8s; } .bns-flies i:nth-child(3) { left: 52%; top: 66%; animation-delay: -2s; }
.bns-flies i:nth-child(4) { left: 64%; top: 34%; animation-delay: -3s; animation-duration: 9s; } .bns-flies i:nth-child(5) { left: 78%; top: 56%; animation-delay: -4s; } .bns-flies i:nth-child(6) { left: 88%; top: 30%; animation-delay: -5s; animation-duration: 6s; }
.bns-flies i:nth-child(7) { left: 8%; top: 36%; animation-delay: -6s; }
@keyframes bnsFly { 0%, 100% { transform: translate(0, 0); opacity: .2; } 25% { opacity: 1; } 50% { transform: translate(14px, -10px); opacity: .5; } 75% { transform: translate(-8px, -18px); opacity: 1; } }
.bns-spine { background: #231440; }
.bns-pennant { position: absolute; width: 5%; height: 9%; background: linear-gradient(90deg, #b3261e, #e0564a); clip-path: polygon(0 0, 100% 50%, 0 100%); transform-origin: 0 50%; animation: bnsFlag 1.6s ease-in-out infinite; }
.bns-pennant.p1 { left: 64.75%; top: 3%; } .bns-pennant.p2 { left: 81.75%; top: 3%; animation-delay: -.8s; }
@keyframes bnsFlag { 50% { transform: scaleX(.8) skewY(8deg); } }
.bns-rime { background: linear-gradient(180deg, #030818, #0c1a36); }
.bns-aurora { position: absolute; left: -20%; right: -20%; top: -10%; height: 70%; filter: blur(8px); opacity: .75;
  background: linear-gradient(100deg, transparent 10%, rgba(90,255,180,.55) 25%, transparent 38%, rgba(120,200,255,.4) 52%, transparent 64%, rgba(160,110,255,.45) 78%, transparent 90%); animation: bnsAurora 12s ease-in-out infinite alternate; }
@keyframes bnsAurora { from { transform: translateX(-8%) skewX(-10deg); opacity: .55; } to { transform: translateX(8%) skewX(8deg); opacity: .9; } }
.bns-harbor { background: linear-gradient(180deg, #06102a, #102448 70%, #0a1830); overflow: hidden; }
.bns-beam { position: absolute; right: 16.5%; top: 29%; width: 260%; height: 30%; transform-origin: 100% 50%; background: linear-gradient(270deg, rgba(255,230,150,.55), rgba(255,230,150,0) 70%);
  clip-path: polygon(0 0, 100% 45%, 100% 55%, 0 100%); animation: bnsBeam 7s ease-in-out infinite; }
@keyframes bnsBeam { 0%, 100% { transform: rotate(-8deg); opacity: .8; } 50% { transform: rotate(10deg); opacity: .5; } }
.bns-waves { animation: bnsWaves 4s linear infinite; }
@keyframes bnsWaves { to { transform: translateX(40px); } }
.bns-shard { background: radial-gradient(ellipse at 62% 20%, #3a1a6a, #120824 70%); }
.bns-crack { filter: drop-shadow(0 0 6px #b58cff); animation: bnsCrack 4s ease-in-out infinite; }
@keyframes bnsCrack { 50% { stroke: #fff; } }
.bns-shards { position: absolute; inset: 0; }
.bns-shards i { position: absolute; top: -10%; width: 8px; height: 12px; background: linear-gradient(135deg, #f3e6ff, #a86bff); clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); filter: drop-shadow(0 0 4px #b58cff); animation: bnsFall 6s linear infinite; }
.bns-shards i:nth-child(1) { left: 56%; } .bns-shards i:nth-child(2) { left: 62%; animation-delay: -1s; animation-duration: 7s; } .bns-shards i:nth-child(3) { left: 68%; animation-delay: -2s; }
.bns-shards i:nth-child(4) { left: 48%; animation-delay: -3s; animation-duration: 8s; } .bns-shards i:nth-child(5) { left: 74%; animation-delay: -4s; } .bns-shards i:nth-child(6) { left: 84%; animation-delay: -5s; animation-duration: 9s; }
@keyframes bnsFall { from { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(140px) rotate(200deg); opacity: 0; } }
.bns-blank { background: linear-gradient(180deg, #4a4658, #6a6678 60%, #3a3648); }
.bns-fog { position: absolute; top: 0; bottom: 0; width: 70%; background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(245,242,250,.55), transparent 70%); animation: bnsFog 14s ease-in-out infinite alternate; }
.bns-fog.f1 { left: -20%; } .bns-fog.f2 { right: -24%; animation-direction: alternate-reverse; animation-duration: 18s; }
@keyframes bnsFog { from { transform: translateX(-8%); } to { transform: translateX(10%); } }
.bns-trav { background: linear-gradient(180deg, #0a0820, #241640 70%, #150e24); }
.bns-shardglow { animation: czGlow 4s ease-in-out infinite; }
.bns-lamps { position: absolute; left: 30%; right: 36%; bottom: 20%; height: 20%; display: flex; justify-content: space-between; align-items: flex-end; }
.bns-lamps i { width: 7px; height: 9px; border-radius: 2px; background: #ffd36e; box-shadow: 0 0 10px 4px rgba(255,190,90,.5); animation: bnsBob 2.4s ease-in-out infinite; }
.bns-lamps i:nth-child(2) { animation-delay: -.5s; transform: translateY(-3px); } .bns-lamps i:nth-child(3) { animation-delay: -1s; } .bns-lamps i:nth-child(4) { animation-delay: -1.5s; } .bns-lamps i:nth-child(5) { animation-delay: -2s; }
@keyframes bnsBob { 50% { translate: 0 -4px; } }
body.fx-low .bns *, body.fx-low .bns { animation: none !important; }

/* ================================================================ battle boards (js/shop-art.js) */
.lcb-fc-halo { animation: lcbFcPulse 7s ease-in-out infinite; }
.lcb-fc-light { animation: lcbFcPulse 7s ease-in-out infinite; }
@keyframes lcbFcPulse { 50% { opacity: .55; } }
.lcb-fc-lamp { position: absolute; top: 120px; width: 260px; height: 260px; margin-left: -130px; border-radius: 50%; background: radial-gradient(circle, rgba(255,190,100,.32), rgba(255,160,70,.08) 45%, transparent 70%); animation: lcbFcLamp 5s ease-in-out infinite; }
.lcb-fc-lamp::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 24px; margin: -12px 0 0 -9px; border-radius: 40% 40% 50% 50%; background: #ffd9a0; box-shadow: 0 0 20px 8px rgba(255,190,100,.6); }
.lcb-fc-lamp.l1 { left: 140px; } .lcb-fc-lamp.l2 { left: 470px; animation-delay: -1.3s; } .lcb-fc-lamp.l3 { left: 1130px; animation-delay: -2.6s; } .lcb-fc-lamp.l4 { left: 1460px; animation-delay: -3.9s; }
@keyframes lcbFcLamp { 0%, 100% { opacity: 1; } 20% { opacity: .82; } 26% { opacity: .96; } 60% { opacity: .88; } }
.lcb-ik-lamp { animation: lcbIkSway 5s ease-in-out infinite; }
.lcb-ik-lamp:nth-child(2n) { animation-delay: -2.5s; }
@keyframes lcbIkSway { 50% { transform: rotate(5deg); } }
.lcb-ik-current { position: absolute; left: -10%; right: -10%; height: 90px; bottom: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(120,150,255,.25) 60px 140px, transparent 140px 260px) 0 0 / 520px 100%;
  -webkit-mask: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent); animation: lcbIkFlow 14s linear infinite; }
.lcb-ik-current.c2 { bottom: 40px; height: 50px; opacity: .3; animation-duration: 22s; }
@keyframes lcbIkFlow { to { background-position: 520px 0; } }
.lcb-rf-aurora { position: absolute; left: -10%; right: -10%; top: 0; height: 330px; filter: blur(22px); opacity: .6;
  background: linear-gradient(100deg, transparent 8%, rgba(90,255,180,.5) 22%, transparent 36%, rgba(110,190,255,.4) 50%, transparent 62%, rgba(170,110,255,.4) 76%, transparent 90%);
  -webkit-mask: linear-gradient(180deg, #000 40%, transparent); mask: linear-gradient(180deg, #000 40%, transparent); animation: bnsAurora 26s ease-in-out infinite alternate; }
.lcb-rf-aurora.a2 { top: 40px; height: 220px; opacity: .4; animation-duration: 34s; animation-direction: alternate-reverse; }

/* ================================================================ portrait + phones */
body.portrait :is(#store) .lcs-feat { grid-template-columns: 1fr; gap: 20px; }
body.portrait #store .lcs-hero { grid-template-columns: 1fr; min-height: 0; padding: 22px; gap: 16px; border-radius: 26px; }
body.portrait #store .lcs-herothumbs .lcs-prev { min-height: 300px; }
body.portrait #store .lcs-heroinfo > b { font-size: 40px; }
body.portrait #store .lcs-heroinfo > span { font-size: 24px; }
body.portrait #store .lcs-heroprice b, body.portrait #store .lcs-dealprice b { font-size: 34px; }
body.portrait #store .lcs-heroprice s, body.portrait #store .lcs-dealprice s, body.portrait #store .lcs-price s { font-size: 20px; }
body.portrait #store .lcs-heroprice .gemicon, body.portrait #store .lcs-dealprice .gemicon, body.portrait #store .lcs-dealprice .coin { width: 30px; height: 30px; }
body.portrait #store .lcs-deal { padding: 22px; border-radius: 26px; gap: 12px; }
body.portrait #store .lcs-deal > b { font-size: 32px; }
body.portrait #store .lcs-dealhead small { font-size: 20px; }
body.portrait #store .lcs-dealprev .lcs-prev { height: 240px; }
body.portrait :is(#store, #sheet) .lcs-ribbon, body.portrait #store .lcs-dealtag, body.portrait #store .lcs-tagtag, body.portrait #store .lcs-save { font-size: 17px; padding: 7px 14px; }
body.portrait #store .lcs-sub { font-size: 30px; } body.portrait #store .lcs-sub small { font-size: 20px; }
body.portrait #store .lcs-subs { gap: 12px; padding-bottom: 16px; }
body.portrait #store .lcs-subs button { min-height: 80px; padding: 0 28px; font-size: 24px; }
body.portrait #store .lcs-tile.own::after { width: 40px; height: 40px; font-size: 22px; }
body.portrait #store .lcs-looks i { width: 24px; height: 24px; }
body.portrait #store .lcs-btile .lcs-prev { height: 250px; }
body.portrait #store .lcs-bgrid { grid-template-columns: 1fr; }
body.portrait #store .lcs-thumb span { font-size: 18px; }
body.portrait :is(#store, #sheet) .lcs-mtitle { font-size: 16px !important; } body.portrait :is(#store, #sheet) .lcs-msl { width: 64px; height: 90px; }
body.portrait #store .lcs-passart b { font-size: 32px; } body.portrait #store .lcs-passart span { font-size: 20px; }
body.portrait #store .lcs-gemrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.portrait #store .lcs-bonus, body.portrait #store .lcs-bestval, body.portrait #store .lcs-firstx { font-size: 16px; padding: 7px 12px; }
body.portrait #store .lcs-gemrow .lcs-gempack { padding-top: 54px; }
body.portrait #store .lcs-firstx { bottom: 118px; }
body.portrait #sheet .lcs-lookrow button { font-size: 22px; padding: 12px 20px 12px 12px; } body.portrait #sheet .lcs-lookrow i { width: 28px; height: 28px; }
body.portrait #sheet .lcs-dealnote { font-size: 22px; }
body.portrait #sheet .lcs-sprev .lcs-thumb span { font-size: 20px; }
body.mobile:not(.portrait) #store .lcs-subs button { font-size: 19px; padding: 12px 20px; }
body.mobile:not(.portrait) #store .lcs-heroinfo > span, body.mobile:not(.portrait) #store .lcs-dealhead small { font-size: 18px; }
body.mobile:not(.portrait) #store .lcs-thumb span { font-size: 14px; }
body.mobile:not(.portrait) #store .lcs-ribbon, body.mobile:not(.portrait) #store .lcs-dealtag, body.mobile:not(.portrait) #store .lcs-tagtag { font-size: 14px; }
body.mobile:not(.portrait) #store .lcs-gemrow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (prefers-reduced-motion: reduce) { .lcs-passart i, .czs *, .bns * { animation: none !important; } }
.lcs-bthumbs.n4 .lcs-mtitle { font-size: 9px !important; padding: 4px 5px !important; overflow-wrap: anywhere; }
body.portrait #store .lcs-bthumbs.n4 .lcs-mtitle { font-size: 14px !important; }
.lcs-firstx { position: static !important; transform: none !important; order: 0; margin: -2px 0 2px; }
body.mobile:not(.portrait) #store .lcs-heroinfo > b { font-size: 34px; }
body.mobile:not(.portrait) #store .lcs-heroinfo > span { font-size: 20px; }
body.mobile:not(.portrait) #store .lcs-deal > b { font-size: 28px; }
body.mobile:not(.portrait) #store .lcs-heroprice b, body.mobile:not(.portrait) #store .lcs-dealprice b { font-size: 30px; }
body.mobile:not(.portrait) #store .lcs-heroprice s, body.mobile:not(.portrait) #store .lcs-dealprice s, body.mobile:not(.portrait) #store .lcs-price s { font-size: 18px; }
body.mobile:not(.portrait) #store .lcs-sub small { font-size: 18px; }
body.mobile:not(.portrait) #store .lcs-save, body.mobile:not(.portrait) #store .lcs-bonus, body.mobile:not(.portrait) #store .lcs-bestval, body.mobile:not(.portrait) #store .lcs-firstx { font-size: 14px; }
body.mobile:not(.portrait) #store .lcs-thumb span { font-size: 15px; }
body.mobile:not(.portrait) #sheet .lcs-lookrow button { font-size: 18px; } body.mobile:not(.portrait) #sheet .lcs-dealnote { font-size: 18px; }