/* ===================================================================
   album.css (v197) - the sticker album + the packet ceremony (js/album.js).
   Everything is drawn here (gradients), nothing to download. Motion is
   transforms + opacity only; html.lowfx (weak Android) drops the loops.
   =================================================================== */
.modal-back.alb-back,.modal-back.cer-back{display:block;padding:0;z-index:1800;backdrop-filter:none;-webkit-backdrop-filter:none;
  background:#120c07;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
/* the room: a dark wooden table under a warm lamp */
.alb-room{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:calc(var(--sat,0px) + 8px) 10px calc(var(--sab,0px) + 8px);
  background:radial-gradient(90% 60% at 50% 38%,rgba(255,196,120,.16),transparent 70%),
    repeating-linear-gradient(92deg,rgba(255,255,255,.025) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,#3a2414,#24150b 60%,#170d06)}
.alb-top{width:100%;max-width:640px;display:flex;align-items:center;gap:10px;height:44px;color:#f6e7cc}
.alb-x{width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.1);color:#f6e7cc;font-size:17px;cursor:pointer;touch-action:manipulation}
.alb-title{font-weight:800;font-size:17px;letter-spacing:.3px;flex:1}
.alb-cnt{font-size:13px;font-weight:700;opacity:.8;font-variant-numeric:tabular-nums}
.alb-stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;perspective:1800px;min-height:0}
.alb-book{position:relative;width:300px;height:420px;transform-style:preserve-3d}
/* the spine: the right edge in Hebrew/Arabic, the left edge otherwise */
.alb-book::before{content:"";position:absolute;top:-6px;bottom:-6px;width:16px;border-radius:6px;
  background:linear-gradient(90deg,#4a1d14,#7a3424 40%,#3c140d);box-shadow:0 10px 30px rgba(0,0,0,.5)}
html[dir=rtl] .alb-book::before{right:-10px}
html[dir=ltr] .alb-book::before{left:-10px}
.alb-leaf{position:absolute;inset:0;border-radius:4px 10px 10px 4px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  background:#f4ead6;box-shadow:0 18px 40px rgba(0,0,0,.45),inset 0 0 0 1px rgba(120,90,50,.18)}
html[dir=rtl] .alb-leaf{border-radius:10px 4px 4px 10px;transform-origin:100% 50%}
html[dir=ltr] .alb-leaf{transform-origin:0 50%}
.alb-under{z-index:1}.alb-cur{z-index:2}
.alb-leaf.flying{z-index:5;will-change:transform}
/* the paper: warm, slightly mottled, a soft shade by the spine */
.pg-in{position:absolute;inset:0;padding:12px 12px 10px;color:#3b2a17;display:flex;flex-direction:column;
  background:radial-gradient(120% 90% at 50% 40%,#fbf4e4,#efe2c6 85%),#f4ead6}
.pg-in::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-radial-gradient(circle at 30% 20%,rgba(140,100,50,.035) 0 1px,transparent 1px 4px)}
html[dir=rtl] .pg-in::after,html[dir=ltr] .pg-in::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none}
html[dir=rtl] .pg-in::after{right:0;background:linear-gradient(270deg,rgba(80,50,20,.22),transparent)}
html[dir=ltr] .pg-in::after{left:0;background:linear-gradient(90deg,rgba(80,50,20,.22),transparent)}
.pg-h{position:relative;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:13px;color:#6b4a22;
  padding:0 4px 6px;border-bottom:2px dotted rgba(120,85,40,.35);margin-bottom:6px}
.pg-h .gicon{vertical-align:-3px}
.pg-c{font-weight:700;font-size:11.5px;opacity:.8}
/* contents */
.toc{position:relative;display:flex;flex-direction:column;gap:5px;overflow:auto;flex:1;min-height:0}
.toc-row{display:flex;align-items:center;gap:9px;width:100%;padding:7px 8px;border:0;border-radius:10px;background:rgba(255,255,255,.45);
  color:inherit;font:inherit;text-align:start;cursor:pointer;touch-action:manipulation;box-shadow:inset 0 0 0 1px rgba(120,85,40,.14)}
.toc-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:#3b2a17;color:#f6e1b3;flex:none}
.toc-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.toc-n{font-weight:800;font-size:13.5px}
.toc-bar{height:6px;border-radius:4px;background:rgba(120,85,40,.18);overflow:hidden}
.toc-bar i{display:block;height:100%;background:linear-gradient(90deg,#c9892f,#e8b551);transform-origin:0 50%}
html[dir=rtl] .toc-bar i{transform-origin:100% 50%}
.toc-r{display:flex;flex-direction:column;align-items:flex-end;font-size:12px;font-variant-numeric:tabular-nums}
.toc-r small{display:flex;gap:6px;font-weight:700}
.tm-gold{color:#b07d12}.tm-holo{background:linear-gradient(90deg,#d0459b,#3a8fd6,#2fb38a);-webkit-background-clip:text;background-clip:text;color:transparent}
.alb-gstar{color:#f4c04e;line-height:1}
/* chapter opener: the game's own table */
.pg-op{align-items:center;justify-content:center;text-align:center;color:#fff;gap:6px;padding:20px}
.pg-op::before{opacity:1;background:radial-gradient(120% 80% at 50% 40%,rgba(255,255,255,.14),transparent 60%),
  repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.06) 0 1px,transparent 1px 3px)}
.pg-op[data-g=all]{background:radial-gradient(120% 90% at 50% 0%,#17406b,#0b2038 55%,#05101f)}
.pg-op[data-g=yaniv]{background:linear-gradient(155deg,#8a1f1a 0%,#4a100d 55%,#2b0a08 100%)}
.pg-op[data-g=president]{background:linear-gradient(155deg,#4a2a8a 0%,#2a1652 55%,#170b30 100%)}
.pg-op[data-g=war]{background:linear-gradient(155deg,#1f4d8a 0%,#123055 55%,#0a1c33 100%)}
.pg-op[data-g=rummy]{background:linear-gradient(155deg,#1c7a4a 0%,#0f4c2e 55%,#082e1c 100%)}
.pg-op[data-g=hearts]{background:linear-gradient(155deg,#b3263e 0%,#6e1426 55%,#3d0a15 100%)}
.pg-op[data-g=solitaire]{background:linear-gradient(155deg,#1f7f78 0%,#11504b 55%,#082e2b 100%)}
.pg-op[data-g=shithead]{background:linear-gradient(155deg,#a15c14 0%,#5e340a 55%,#361d05 100%)}
.pg-op[data-g=durak]{background:linear-gradient(155deg,#8a1f5a 0%,#4d1033 55%,#2b081c 100%)}
.op-felt{position:absolute;inset:14px;border-radius:50%/40%;border:2px solid rgba(255,255,255,.12);box-shadow:inset 0 0 40px rgba(0,0,0,.35);pointer-events:none}
.op-ic{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.25);
  box-shadow:0 0 0 3px rgba(244,192,78,.6),0 10px 24px rgba(0,0,0,.4);color:#ffe2a0}
.op-ic .alb-gstar{font-size:56px}
.op-title{position:relative;font-size:26px;font-weight:800;margin-top:8px;padding:4px 16px;background:#f4ead6;color:#3b2a17;border-radius:4px;
  box-shadow:0 4px 0 rgba(0,0,0,.25);transform:rotate(-1.5deg)}
.op-sub{position:relative;font-weight:700;opacity:.9;margin-top:4px}
.op-stats{position:relative;display:flex;gap:8px;margin-top:10px;min-height:56px}
.op-st{display:flex;flex-direction:column;align-items:center;min-width:72px;padding:7px 8px;border-radius:12px;background:rgba(0,0,0,.28)}
.op-st b{font-size:20px;font-variant-numeric:tabular-nums}.op-st span{font-size:11px;opacity:.85}
/* sticker pages */
.slots{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols,3),1fr);grid-template-rows:repeat(3,1fr);gap:4px 6px}
.slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-width:0;cursor:pointer;touch-action:manipulation;padding-top:13px}
.slot-no{position:absolute;top:0;inset-inline-start:2px;font-size:10px;font-weight:800;color:#9a7a4c;font-variant-numeric:tabular-nums}
.slot-cap{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:5px;max-width:100%;line-height:1.15}
.slot-cap b{font-size:11px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.slot-cap small{font-size:9.5px;opacity:.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.slot:not(.got) .slot-cap{opacity:.55}
/* ---- the sticker ---- */
.stk{position:relative;width:var(--sw,72px);aspect-ratio:4/5;border-radius:11%;padding:7%;flex:none;
  background:linear-gradient(135deg,#8a5a2b,#e6ad72 30%,#7a4a1f 55%,#d29452 80%,#8a5a2b);
  box-shadow:0 2px 0 rgba(0,0,0,.18),0 4px 9px rgba(60,35,10,.28)}
.stk-art{position:relative;width:100%;height:100%;border-radius:8%;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(90% 80% at 50% 30%,#fffaf0,#f3dcc0)}
.stk-ic{font-size:calc(var(--sw,72px)*.46);line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}
.stk.t-silver{background:linear-gradient(135deg,#8c96a0,#f6f9fb 28%,#9aa4ae 52%,#e3e9ee 78%,#8c96a0)}
.stk.t-silver .stk-art{background:radial-gradient(90% 80% at 50% 30%,#ffffff,#dfe6ec)}
.stk.t-gold{background:linear-gradient(135deg,#9c6a12,#ffe38c 26%,#b8862a 50%,#fff0b0 74%,#9c6a12)}
.stk.t-gold .stk-art{background:radial-gradient(90% 80% at 50% 30%,#fffbe8,#f6dc95)}
.stk.t-gold .stk-art::after{content:"✦";position:absolute;top:6%;inset-inline-end:9%;font-size:calc(var(--sw,72px)*.14);color:#c99a1e}
.stk.t-holo{background:conic-gradient(from 210deg,#ff7ac8,#ffd36e,#7cf2b0,#6cc7ff,#b48cff,#ff7ac8)}
.stk.t-holo .stk-art{background:linear-gradient(135deg,#e2f6ff,#f7dcff 35%,#fff4cc 60%,#d4ffe9)}
.stk-shine{position:absolute;inset:-30% -60%;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.9) 48%,rgba(255,170,240,.6) 52%,transparent 60%);
  transform:translateX(-60%) rotate(18deg);animation:stkShine 3.2s ease-in-out infinite}
@keyframes stkShine{0%,15%{transform:translateX(-70%) rotate(18deg)}60%,100%{transform:translateX(70%) rotate(18deg)}}
.stk.t-bad{transform:rotate(-7deg);background:linear-gradient(135deg,#b9a585,#e8dcc3 50%,#b9a585)}
.stk.t-bad .stk-art{background:radial-gradient(90% 80% at 50% 30%,#f7efdc,#e3d2b0);filter:sepia(.25)}
.stk.t-bad::after{content:"";position:absolute;width:78%;aspect-ratio:1;bottom:-16%;inset-inline-end:-22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,transparent 55%,rgba(120,72,30,.32) 57%,rgba(120,72,30,.14) 62%,transparent 66%)}
.stk.dup{box-shadow:3px 3px 0 -1px #efe5d2,3px 3px 0 0 rgba(90,60,25,.25),6px 6px 0 -1px #efe5d2,6px 6px 0 0 rgba(90,60,25,.2),0 4px 9px rgba(60,35,10,.28)}
html[dir=rtl] .stk.dup{box-shadow:-3px 3px 0 -1px #efe5d2,-3px 3px 0 0 rgba(90,60,25,.25),-6px 6px 0 -1px #efe5d2,-6px 6px 0 0 rgba(90,60,25,.2),0 4px 9px rgba(60,35,10,.28)}
.stk-x{direction:ltr;unicode-bidi:isolate;position:absolute;bottom:-6px;inset-inline-start:-6px;min-width:22px;height:18px;padding:0 5px;border-radius:9px;background:#3b2a17;color:#ffe2a0;
  font-size:10.5px;font-weight:800;display:grid;place-items:center;font-variant-numeric:tabular-nums}
.stk-date{position:absolute;bottom:4%;inset-inline-end:6%;font-size:calc(var(--sw,72px)*.1);font-weight:800;color:rgba(150,40,40,.75);
  border:1px solid rgba(150,40,40,.5);border-radius:3px;padding:0 2px;transform:rotate(-8deg);background:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.stk-new{position:absolute;top:-5px;inset-inline-end:-6px;background:#e23b3b;color:#fff;font-size:9.5px;font-weight:800;padding:1px 6px;border-radius:8px;
  box-shadow:0 2px 4px rgba(0,0,0,.3);transform:rotate(8deg)}
.stk.empty{background:none;box-shadow:none;border:2px dashed rgba(120,85,40,.38);padding:0;display:grid;place-items:center}
.stk.empty .stk-ic{filter:brightness(0);opacity:.1}
/* ribbons on the free edge: one per chapter */
.alb-tabs{position:absolute;top:22px;display:flex;flex-direction:column;gap:4px;z-index:0}
html[dir=rtl] .alb-tabs{left:-27px}
html[dir=ltr] .alb-tabs{right:-27px;align-items:flex-end}
.alb-tab{width:34px;height:28px;border:0;padding:0;cursor:pointer;touch-action:manipulation;display:grid;place-items:center;color:#fff;
  background:hsl(calc(var(--i)*40 + 10),55%,42%);box-shadow:0 2px 4px rgba(0,0,0,.35)}
html[dir=rtl] .alb-tab{border-radius:6px 0 0 6px;padding-inline-end:6px}
html[dir=ltr] .alb-tab{border-radius:0 6px 6px 0;padding-inline-start:6px}
.alb-tab.on{transform:translateX(-5px)}
html[dir=ltr] .alb-tab.on{transform:translateX(5px)}
.alb-tab .gicon{width:14px;height:14px}
/* the cover */
.alb-cover{position:absolute;inset:-4px;z-index:8;cursor:pointer;backface-visibility:hidden;-webkit-backface-visibility:hidden}
html[dir=rtl] .alb-cover{transform-origin:100% 50%}
html[dir=ltr] .alb-cover{transform-origin:0 50%}
.cv-front{position:absolute;inset:0;border-radius:6px 14px 14px 6px;padding:18px;
  background:radial-gradient(110% 80% at 30% 20%,rgba(255,255,255,.12),transparent 60%),
    repeating-linear-gradient(45deg,rgba(0,0,0,.07) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-45deg,rgba(255,255,255,.04) 0 2px,transparent 2px 5px),
    linear-gradient(160deg,#7c2b22,#5a1a14 60%,#3e110c);
  box-shadow:0 24px 50px rgba(0,0,0,.55),inset 0 0 0 2px rgba(0,0,0,.25)}
html[dir=rtl] .cv-front{border-radius:14px 6px 6px 14px}
.cv-frame{height:100%;border:2px solid rgba(232,190,110,.65);border-radius:10px;outline:1px solid rgba(232,190,110,.35);outline-offset:-7px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:10px;padding:16px;color:#f0c46c}
.cv-kicker{font-size:13px;font-weight:700;letter-spacing:2px;opacity:.85}
.cv-name{font-size:27px;font-weight:800;line-height:1.15;color:#f6d488;text-shadow:0 1px 0 #ffeec0,0 -1px 0 #6b3b10,0 3px 6px rgba(0,0,0,.45)}
.cv-suits{font-size:22px;letter-spacing:8px;color:#e8be6e;opacity:.85}
.cv-prog{font-weight:800;font-size:15px;padding:4px 14px;border-radius:20px;background:rgba(0,0,0,.25);font-variant-numeric:tabular-nums}
.cv-new{font-weight:800;font-size:13.5px;color:#fff3c7}
.cv-hint{font-size:12px;opacity:.7;margin-top:6px}
.alb-cover.turning{z-index:9}
.alb-nav{height:52px;display:flex;align-items:center;gap:18px;color:#f6e7cc}
.alb-arr{width:46px;height:40px;border-radius:20px;border:0;background:rgba(255,255,255,.12);color:#f6e7cc;font-size:24px;line-height:1;cursor:pointer;touch-action:manipulation}
.alb-arr:disabled{opacity:.25}
.alb-pno{direction:ltr;unicode-bidi:isolate;font-size:13px;font-weight:700;min-width:64px;text-align:center;font-variant-numeric:tabular-nums;opacity:.85}
/* a sticker up close */
.alb-detail{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(10,6,3,.72)}
.dt-card{width:min(64vw,260px);aspect-ratio:4/5;perspective:1200px;cursor:pointer}
.dt-in{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.dt-in.flipped{transform:rotateY(180deg)}
.dt-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.dt-face .stk{--sw:min(64vw,260px);width:100%}
.dt-backf{transform:rotateY(180deg)}
.stk-back{width:100%;height:100%;border-radius:11%;padding:16px 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
  background:repeating-linear-gradient(0deg,rgba(120,85,40,.06) 0 1px,transparent 1px 22px),#f6eedc;color:#3b2a17;
  border:6px solid #c9a46a;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.stk-back.t-silver{border-color:#b8c2cb}.stk-back.t-gold{border-color:#e0b23d}.stk-back.t-bad{border-color:#b9a585;transform:rotate(-2deg)}
.stk-back.t-holo{border-image:conic-gradient(#ff7ac8,#ffd36e,#7cf2b0,#6cc7ff,#b48cff,#ff7ac8) 1}
.stk-back.t-empty{border-style:dashed;border-color:rgba(120,85,40,.45)}
.sb-tier{font-size:11px;font-weight:800;letter-spacing:1.5px;padding:2px 10px;border-radius:10px;background:#3b2a17;color:#ffe2a0}
.sb-name{font-size:20px;font-weight:800;line-height:1.15}
.sb-desc{font-size:13px;line-height:1.3;opacity:.85}
.sb-meta{display:flex;flex-direction:column;gap:3px;font-size:11.5px;font-weight:700;opacity:.75;margin-top:4px}
.sb-meta .gicon{vertical-align:-3px}
.dt-hint{color:#f0dfc0;font-size:12px;opacity:.75;text-align:center;padding:0 20px}
.stk.big{--sw:min(64vw,260px);width:100%}

/* ---------------- the ceremony ---------------- */
.cer-felt{position:absolute;inset:0;background:radial-gradient(110% 70% at 50% 42%,#1f6a46,#0f3f29 55%,#082417);}
.cer-felt::after{content:"";position:absolute;inset:0;opacity:.5;background:repeating-radial-gradient(circle at 50% 50%,rgba(0,0,0,.05) 0 1px,transparent 1px 3px)}
.cer-skip{position:absolute;top:calc(var(--sat,0px) + 12px);inset-inline-end:14px;z-index:30;border:0;border-radius:18px;padding:8px 16px;
  background:rgba(0,0,0,.35);color:#fff;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;touch-action:manipulation}
.cer-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1400px}
.cer-hint{position:absolute;bottom:calc(var(--sab,0px) + 34px);left:0;right:0;text-align:center;color:#eaf6ee;font-weight:700;font-size:14px;transition:opacity .2s}
/* the packet: a foil sachet with a tear strip */
.cer-pack{position:relative;width:min(62vw,250px);aspect-ratio:3/4;cursor:pointer}
.pk-body{position:absolute;inset:0;border-radius:10px 10px 14px 14px;overflow:hidden;
  background:linear-gradient(160deg,#ffd76a,#e8a020 40%,#c06d10 70%,#f4c04e);
  box-shadow:0 26px 50px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.25)}
.pk-foil{position:absolute;inset:-20%;background:repeating-linear-gradient(115deg,rgba(255,255,255,.0) 0 18px,rgba(255,255,255,.22) 18px 22px,rgba(255,255,255,0) 22px 44px);opacity:.8}
.pk-body::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 4px,transparent 4px 8px)}
.pk-label{position:absolute;left:10%;right:10%;top:24%;bottom:18%;border-radius:12px;background:#1b3d6e;color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;box-shadow:inset 0 0 0 3px #f4c04e,0 4px 0 rgba(0,0,0,.2);transform:rotate(-2deg)}
.pk-brand{font-size:28px;font-weight:800;color:#f4c04e;letter-spacing:1px}
.pk-t{font-size:14px;font-weight:800}
.pk-n{font-size:12px;font-weight:700;opacity:.85;padding:2px 10px;border-radius:10px;background:rgba(255,255,255,.14)}
.pk-strip{position:absolute;left:0;right:0;top:0;height:16%;border-radius:10px 10px 0 0;
  background:linear-gradient(180deg,#fff1b8,#f0bc4a);border-bottom:2px dashed rgba(120,60,0,.55);display:grid;place-items:center}
.pk-cut{font-size:12px;font-weight:800;color:#7a3f00}
.cer-pack.torn .pk-body{clip-path:inset(16% 0 0 0)}
.cer-pack.torn{animation:none}
/* the stickers coming out */
.cer-cards{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.cer-card{grid-area:1/1;position:relative;width:min(52vw,210px);aspect-ratio:4/5;margin-bottom:80px}
.cc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.cc-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cc-front .stk{--sw:min(52vw,210px);width:100%;box-shadow:0 16px 36px rgba(0,0,0,.45)}
.cc-back{transform:rotateY(180deg)}
.stk-cover{width:100%;height:100%;border-radius:11%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:repeating-linear-gradient(45deg,#1b3d6e 0 10px,#173563 10px 20px);border:6px solid #f4ead6;box-shadow:0 16px 36px rgba(0,0,0,.45)}
.sc-logo{font-size:26px;font-weight:800;color:#f4c04e}.sc-suits{color:#f4ead6;letter-spacing:6px}
.cc-burst{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;border-radius:50%;pointer-events:none;opacity:0;z-index:-1;
  background:radial-gradient(circle,rgba(255,236,150,.85),rgba(255,200,60,.35) 35%,transparent 62%)}
.cer-card.t-holo .cc-burst{background:conic-gradient(from 0deg,rgba(255,122,200,.55),rgba(255,211,110,.55),rgba(124,242,176,.55),rgba(108,199,255,.55),rgba(180,140,255,.55),rgba(255,122,200,.55));
  -webkit-mask:radial-gradient(circle,#000 20%,transparent 62%);mask:radial-gradient(circle,#000 20%,transparent 62%)}
.cer-cap{position:absolute;left:16px;right:16px;bottom:calc(var(--sab,0px) + 70px);text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px}
.cc-tier{font-size:11px;font-weight:800;letter-spacing:1.5px;padding:2px 12px;border-radius:10px;background:#a0612a;color:#fff}
.cc-tier.t-silver{background:#7d8893}.cc-tier.t-gold{background:#c79313;color:#3a2a00}.cc-tier.t-bad{background:#8a7350}
.cc-tier.t-holo{background:linear-gradient(90deg,#ff7ac8,#ffd36e,#7cf2b0,#6cc7ff,#b48cff);color:#2a1440}
.cc-name{font-size:22px;font-weight:800}.cc-desc{font-size:13.5px;opacity:.9;max-width:320px}.cc-game{font-size:12px;opacity:.75;font-weight:700}
.cc-game .gicon{vertical-align:-3px}
/* the mini album page the sticker is glued into */
.cer-mini{position:absolute;width:min(88vw,380px);aspect-ratio:3/4.1;border-radius:6px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.5);--sw:min(17vw,74px);z-index:2}
.cer-mini .pg-in{padding:10px}
.cer-card{z-index:3}
.slot-cap.printing{will-change:clip-path}
.dust{position:absolute;left:50%;top:44%;width:0;height:0;pointer-events:none}
.dust i{position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:rgba(170,140,100,.8)}
/* the end card */
.cer-end{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(5,15,10,.55);padding:20px}
.ce-card{width:min(92vw,360px);border-radius:18px;padding:18px 16px 16px;text-align:center;background:#f4ead6;color:#3b2a17;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.ce-stamp{display:inline-block;font-size:20px;font-weight:800;color:#b23a2a;border:3px solid #b23a2a;border-radius:8px;padding:4px 14px;transform:rotate(-4deg);letter-spacing:.5px}
.ce-sub{margin-top:10px;font-weight:700;font-size:14px}
.ce-row{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:12px 0 4px;--sw:44px}
.ce-card .btn.ce-alb{color:#3b2a17;border:1.5px solid rgba(59,42,23,.4);background:#fffaf0;box-shadow:0 3px 0 rgba(59,42,23,.25)}
.ce-mini .stk-date,.ce-mini .stk-new,.ce-mini .stk-x{display:none}
/* the quiet line on the game-over screen */
.go-pack{font-weight:800;text-align:center}

/* weak phones: no endless shine */
html.lowfx .stk-shine{animation:none;transform:translateX(0) rotate(18deg);opacity:.5}
@media (prefers-reduced-motion: reduce){ .stk-shine{animation:none} }
@media (min-width:760px){ .cer-mini{width:420px} }