:root{
  --ink:#1f2a44; --muted:#3d4a69; --white:#fff;
  --u:min(1vw,4.8px); /* 1% della larghezza del telefono (la colonna è al massimo 480px) */
  --sky:#aee4ff; --cream:#fff7e6;
  --sun:#ffd23f; --orange:#ff9f1c; --coral:#ff6b6b; --mint:#3ddc97; --sea:#4cc9f0; --grape:#9b5de5;
  --common:#94a3b8; --rare:#2f9bff; --epic:#a855f7; --legendary:#ffb800;
  --font:"Fredoka","Baloo 2",ui-rounded,"Nunito","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;color:var(--ink);font-family:var(--font);font-weight:500;overscroll-behavior:none}
body{background:
  radial-gradient(60px 30px at 12% 8%,#fff 98%,transparent),radial-gradient(90px 38px at 20% 8.6%,#fff 98%,transparent),
  radial-gradient(70px 30px at 82% 14%,#fff 98%,transparent),radial-gradient(100px 40px at 90% 14.6%,#fff 98%,transparent),
  linear-gradient(#aee4ff 0,#d8f2ff 35%,#fff7e6 100%) fixed}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;cursor:pointer;background:none}
h2{margin:0;font-size:22px;font-weight:700;letter-spacing:.2px}

#app{max-width:480px;margin:0 auto;padding:0 16px calc(116px + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(14px + env(safe-area-inset-top)) 0 4px}
.brand{display:flex;align-items:center;gap:10px;font-size:30px;font-weight:700;letter-spacing:-.3px}
.brand img{width:44px;height:44px;border-radius:14px;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink)}
.brand b{color:var(--coral)}

/* ---------- bottoni cartoon ---------- */
.big-btn,.cta{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--sun);color:var(--ink);
  border:3px solid var(--ink);border-radius:18px;box-shadow:0 5px 0 var(--ink);padding:14px 18px;font-weight:700;font-size:19px;
  transition:transform .08s,box-shadow .08s}
.big-btn:active,.cta:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.big-btn.alt{background:#fff}
.big-btn.small{padding:10px 22px;font-size:17px}
.big-btn:disabled{background:#dfe5f1;color:#4a5878;border-color:#4a5878;box-shadow:0 5px 0 #4a5878}
.link-btn{background:none;color:var(--muted);padding:12px;font-size:16px;font-weight:600}
.link-btn.danger{color:var(--coral)}
.link-btn.sm{padding:4px 0 12px;font-size:15px;color:var(--coral);font-weight:700}

/* ---------- HOME ---------- */
.hero{padding:18px 0 6px;text-align:center}
.tag{margin:0 0 18px;font-size:27px;line-height:1.15;font-weight:600;color:#26314f}
.tag b{color:var(--ink);font-weight:700}
.cta{width:100%;padding:18px;font-size:22px;background:linear-gradient(#ffe066,var(--sun))}
.cta-ic{font-size:26px}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:24px 0 6px}
.tile{background:#fff;border:3px solid var(--ink);border-radius:18px;padding:12px 8px;text-align:center;box-shadow:0 4px 0 var(--ink)}
.tile:nth-child(1) .v{color:var(--sea)}.tile:nth-child(2) .v{color:var(--coral)}.tile:nth-child(3) .v{color:#17b978}
.tile .v{font-size:30px;font-weight:700;line-height:1}
.tile .l{margin-top:6px;font-size:12px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted);font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:5px}
.tile .l svg{width:15px;height:15px}

.block{margin-top:28px}
.block h2{margin-bottom:12px}
.h-row{display:flex;align-items:center;justify-content:space-between}
.h-row h2{margin-bottom:12px}
.best{display:flex;justify-content:center;padding:8px 0 10px}
.best .card{width:min(calc(62 * var(--u)),250px);cursor:pointer;animation:float 4.5s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-7px) rotate(-1deg)}}

.rar-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rchip{background:#fff;border:3px solid var(--ink);border-radius:16px;padding:9px 4px 8px;text-align:center;box-shadow:0 4px 0 var(--c)}
.rchip .n{font-size:24px;font-weight:700}
.rchip .s{display:flex;justify-content:center;gap:1px;margin-top:2px;min-height:14px}
.rchip .s svg{width:13px;height:13px}
.rchip .t{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}

.scroller{display:flex;gap:14px;overflow-x:auto;padding:6px 16px 16px;margin:0 -16px;scroll-snap-type:x proximity;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller .card{flex:0 0 118px;scroll-snap-align:start;cursor:pointer}
.home-empty{text-align:center;color:var(--muted);margin-top:34px;font-size:17px}
.home-empty img{width:104px;height:104px;border-radius:28px;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.home-empty p{line-height:1.45}

/* ---------- COLLEZIONE ---------- */
.coll-head{display:flex;align-items:baseline;justify-content:space-between;padding:12px 0 0}
.count{color:var(--muted);font-size:15px;font-weight:600}
.filters{position:sticky;top:0;z-index:5;padding:10px 0;background:linear-gradient(#d0efff 78%,transparent)}
.filters input,.filters select{width:100%;background:#fff;border:3px solid var(--ink);color:var(--ink);font-family:var(--font);
  border-radius:14px;padding:10px 12px;font-size:16px;font-weight:600;outline:none}
.filters input:focus,.filters select:focus{border-color:var(--coral)}
.filters .row{display:flex;gap:8px;margin-top:8px}
.filters .row select{flex:1.4}
.mini{flex:1;display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);white-space:nowrap;font-weight:600}
.mini input{padding:10px 6px}
#grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;padding-top:8px}
@media(min-width:520px){#grid{grid-template-columns:repeat(3,1fr)}}
.empty{text-align:center;margin-top:50px;color:var(--muted);font-size:17px}
#grid .card{cursor:pointer;transition:transform .15s}
#grid .card:active{transform:scale(.97)}

/* ---------- monete e livelli ---------- */
.coins{display:flex;align-items:center;gap:6px;background:var(--sun);border:3px solid var(--ink);border-radius:99px;box-shadow:0 3px 0 var(--ink);
  padding:4px 14px;font-weight:700;font-size:18px}
.coins b{font-weight:700}
.card .lv{position:absolute;top:3.5cqw;left:4cqw;z-index:4;background:var(--sun);color:var(--ink);border:.9cqw solid var(--ink);
  border-radius:99px;padding:.8cqw 2.6cqw;font-weight:700;font-size:6cqw;line-height:1.1}
.lv-box{padding:6px 18px 2px}
.lv-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.lv-row b{display:block;font-size:19px;color:#fff}
.lv-row span{font-size:14px;color:#cbd5f5;font-weight:600}
.xpbar{height:12px;border-radius:99px;background:rgba(255,255,255,.18);border:2px solid #fff;overflow:hidden;margin-top:6px}
.xpbar i{display:block;height:100%;background:var(--sun);transition:width .4s}
.overlay.full .big-btn:disabled{background:#47507a;color:#aab3d6;border-color:#aab3d6;box-shadow:0 5px 0 #aab3d6}

/* ---------- ALBUM ---------- */
.filters{position:static;background:none;padding:8px 0}
.album{width:var(--bw,100%);margin:8px auto 0}
.binder{position:relative;padding:8px 8px 8px 24px;border-radius:16px;border:3px solid var(--ink);
  background:linear-gradient(135deg,#ff8a80,var(--coral));box-shadow:0 6px 0 var(--ink);perspective:1100px}
.rings{position:absolute;left:-2px;top:0;bottom:0;width:26px;display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;z-index:8;pointer-events:none}
.rings i{width:22px;height:12px;border-radius:99px;background:linear-gradient(#f4f7ff,#aab4cc);border:2.5px solid var(--ink)}
.pages{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:8px;border:3px solid var(--ink);
  background:#262c46}
.album:not(.open) .pages{visibility:hidden;transition:visibility 0s .7s}
.pages::-webkit-scrollbar{display:none}
/* pagina del raccoglitore: 9 foderine separate da cuciture tratteggiate */
.page{--thread:rgba(255,226,160,.85);position:relative;flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;padding:10px;
  display:grid;grid-template-columns:repeat(3,auto);justify-content:center;align-content:center;gap:0;
  background:linear-gradient(160deg,#2f3658,#222740)}
.page::before{content:"";position:absolute;inset:6px;border:2.5px dashed rgba(255,226,160,.5);border-radius:10px;pointer-events:none}
.pocket{position:relative;padding:9px;border-right:2.5px dashed var(--thread);border-bottom:2.5px dashed var(--thread)}
.pocket:nth-child(3n){border-right:0}
.pocket:nth-child(n+7){border-bottom:0}
/* foderina di plastica trasparente: bordo lucido, orlo di apertura in alto, riflesso diagonale */
.pocket::after{content:"";position:absolute;inset:3px;border-radius:7px;pointer-events:none;z-index:6;
  border:1.5px solid rgba(255,255,255,.38);border-top:4px solid rgba(255,255,255,.55);
  background:linear-gradient(118deg,rgba(255,255,255,.26) 0,rgba(255,255,255,.06) 26%,transparent 38%,rgba(255,255,255,.12) 62%,transparent 72%)}
.pocket .card{width:var(--aw);cursor:pointer;box-shadow:0 0 0 2px var(--ink),0 3px 6px rgba(0,0,0,.5)}
.pocket .card.r-legendary{box-shadow:0 0 0 2px var(--ink),0 0 12px rgba(255,184,0,.9)}
.pocket .card.r-epic{box-shadow:0 0 0 2px var(--ink),0 0 9px rgba(168,85,247,.8)}
.pocket.free{width:calc(var(--aw) + 18px + 2.5px);height:calc(var(--aw) * 1.4 + 18px + 2.5px)}
.pocket.free::before{content:"🐾";position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--aw) * .3);opacity:.16;filter:grayscale(1) brightness(2)}
.pocket.pop::after{animation:sleeveflash .7s ease-out}
.pocket.pop .card{animation:tuck .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes sleeveflash{0%{box-shadow:0 0 0 0 rgba(255,210,63,.95),inset 0 0 22px rgba(255,236,150,.9)}100%{box-shadow:0 0 0 14px rgba(255,210,63,0),inset 0 0 0 rgba(255,236,150,0)}}
@keyframes tuck{0%{transform:scale(1.1)}60%{transform:scale(.96)}100%{transform:scale(1)}}

/* copertina: si apre ruotando attorno al dorso */
.cover{position:absolute;inset:0;z-index:7;border-radius:13px;cursor:pointer;transform-origin:left center;
  background:linear-gradient(135deg,#ff8a80,var(--coral));transition:transform .75s cubic-bezier(.5,0,.2,1),opacity .35s .35s;
  transform:perspective(1100px) rotateY(0deg);backface-visibility:hidden}
.album.open .cover{transform:perspective(1100px) rotateY(-112deg);opacity:0;pointer-events:none}
.cover::before{content:"";position:absolute;inset:9px 9px 9px 22px;border:2.5px dashed rgba(255,255,255,.7);border-radius:10px;pointer-events:none}
.cv-inner{position:absolute;inset:0 0 0 14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;color:#fff}
.cv-inner img{width:34%;max-width:96px;border-radius:24px;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
.cv-title{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:12px;padding:4px 14px;font-weight:700;font-size:20px;box-shadow:0 4px 0 var(--ink);transform:rotate(-2deg)}
.cv-count{font-weight:700;font-size:16px;text-shadow:0 2px 0 rgba(31,42,68,.5)}
.cv-hint{font-size:13px;font-weight:700;background:rgba(31,42,68,.55);border-radius:99px;padding:2px 12px;animation:pulse 1.4s ease-in-out infinite}
.album-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px}
.pg-btn{width:46px;height:46px;border-radius:14px;background:#fff;border:3px solid var(--ink);box-shadow:0 4px 0 var(--ink);font-size:18px;font-weight:700}
.pg-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.pg-btn:disabled{opacity:.35;box-shadow:none;transform:translateY(3px)}
.pg-mid{flex:1;text-align:center}
.pg-label{font-weight:700;font-size:16px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:5px;min-height:9px}
.dots i{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.dots i.on{background:var(--coral)}

/* ---------- NAV ---------- */
.nav{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;align-items:flex-end;justify-content:space-around;
  max-width:480px;margin:0 auto;padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  background:#fff;border:3px solid var(--ink);border-bottom:0;border-radius:26px 26px 0 0;box-shadow:0 -4px 0 rgba(31,42,68,.12)}
.tab{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;color:#56648a;font-size:12px;font-weight:700}
.tab svg{width:25px;height:25px;fill:currentColor}
.tab.on{color:var(--coral)}
#fab{flex:0 0 auto;width:70px;height:70px;margin:-34px 4px 4px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(#ffe066,var(--sun));border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink)}
#fab svg{width:34px;height:34px;fill:var(--ink)}
#fab:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}

/* ---------- CARTA ---------- */
.card{--rc:var(--common);--holo:.0;position:relative;aspect-ratio:5/7;border-radius:5.5% / 4%;overflow:hidden;
  background:#000;border:3px solid var(--rc);box-shadow:0 0 0 2.5px var(--ink),0 9px 14px rgba(31,42,68,.35);
  isolation:isolate;container-type:inline-size;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.card.r-rare{--rc:var(--rare);--holo:.5}
.card.r-epic{--rc:var(--epic);--holo:.6}
.card.r-legendary{--rc:var(--legendary);--holo:.7}
.card img.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.card::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(to top,rgba(20,28,52,.82) 0,rgba(20,28,52,.45) 22%,transparent 40%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.card .holo{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:screen;
  opacity:calc(var(--holo) * var(--act,.3));
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 45%,rgba(255,236,170,.4) 52%,transparent 64%);
  background-size:260% 260%;background-position:calc(var(--mx,30)*1%) calc(var(--my,30)*1%)}
.card.r-epic .holo,.card.r-legendary .holo{
  background:linear-gradient(115deg,transparent 22%,rgba(255,80,160,.28) 34%,rgba(80,230,255,.3) 45%,rgba(255,236,120,.3) 56%,rgba(255,255,255,.5) 62%,transparent 74%);
  background-size:260% 260%;background-position:calc(var(--mx,30)*1%) calc(var(--my,30)*1%)}
.card .glare{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
  opacity:var(--act,.25);background:radial-gradient(circle at calc(var(--mx,30)*1%) calc(var(--my,30)*1%),rgba(255,255,255,.7),transparent 42%)}
.card.r-legendary{box-shadow:0 0 0 2.5px var(--ink),0 0 22px rgba(255,184,0,.7),0 9px 14px rgba(31,42,68,.35)}
.card.r-epic{box-shadow:0 0 0 2.5px var(--ink),0 0 16px rgba(168,85,247,.55),0 9px 14px rgba(31,42,68,.35)}

.card .stars{position:absolute;top:3.5cqw;left:0;right:0;z-index:4;display:flex;justify-content:center;pointer-events:none}
.card .stars .pill{display:flex;gap:.6cqw;padding:1.2cqw 3.2cqw;border-radius:99px;background:#fff7d6;border:.9cqw solid var(--ink)}
.card .stars svg{width:8cqw;height:8cqw}

.card .info{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:0 6cqw 6cqw}
.card .name{font-weight:700;font-size:11.5cqw;line-height:1.1;text-align:center;overflow:hidden;color:#fff;
  text-overflow:ellipsis;white-space:nowrap;-webkit-text-stroke:1.6cqw var(--ink);paint-order:stroke fill;letter-spacing:.2cqw}
.card .stats{display:flex;gap:4cqw;margin-top:3.5cqw}
.card .stat{position:relative;flex:1;height:13cqw;display:flex;align-items:center;justify-content:center;
  padding-left:11cqw;border-radius:99px;background:#fff;border:.9cqw solid var(--ink);color:var(--ink);
  font-weight:700;font-size:9.5cqw;line-height:1}
.card .stat small{font-size:4.4cqw;font-weight:700;color:#3d4a69;margin-left:1.2cqw;margin-top:3cqw}
.card .emb{position:absolute;left:-2cqw;top:50%;transform:translateY(-50%);width:16.5cqw;height:16.5cqw;border-radius:50%;
  display:grid;place-items:center;border:.9cqw solid var(--ink)}
.card .emb svg{width:64%;height:64%}
.card .stat.hp .emb{background:radial-gradient(circle at 35% 28%,#8ff0c4,#12a56b 72%)}
.card .stat.atk .emb{background:radial-gradient(circle at 35% 28%,#ffc27a,#e53935 75%)}

/* ---------- overlay ---------- */
.overlay{position:fixed;top:0;bottom:0;left:50%;width:min(100%,480px);transform:translateX(-50%);z-index:50;background:rgba(31,42,68,.6);backdrop-filter:blur(6px);
  display:flex;align-items:flex-end;justify-content:center}
.overlay.full{align-items:stretch;flex-direction:column;color:#fff;background:radial-gradient(90% 55% at 50% 30%,#3b4a8c,#1f2450)}
.sheet-box{width:100%;max-width:520px;background:#fff;color:var(--ink);border:3px solid var(--ink);border-bottom:0;border-radius:28px 28px 0 0;
  padding:22px 20px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;animation:up .25s ease}
.sheet-box h2{margin:0 0 4px;text-align:center}
@keyframes up{from{transform:translateY(40px);opacity:0}}

.crop-top{text-align:center;padding:calc(16px + env(safe-area-inset-top)) 16px 6px;color:#cbd5f5;font-size:15px}
.crop-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px 16px}
#cropFrame{height:100%;max-height:100%;aspect-ratio:5/7;max-width:100%;position:relative;overflow:hidden;
  border-radius:20px;border:4px solid var(--sun);background:#000;touch-action:none;box-shadow:0 0 0 100vmax rgba(10,14,40,.5)}
#cropImg{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;pointer-events:none}
.crop-bottom{padding:10px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:8px}
.crop-bottom input{background:#fff;border:3px solid var(--ink);color:var(--ink);font-family:var(--font);font-weight:600;
  border-radius:16px;padding:13px;font-size:19px;text-align:center;outline:none}
.crop-bottom input:focus{border-color:var(--coral)}
.row2{display:flex;gap:10px;align-items:center}
.row2 .big-btn{flex:1}
.row2 .link-btn{color:#cbd5f5}

.detail-title{text-align:center;padding:calc(16px + env(safe-area-inset-top)) 16px 0;font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;min-height:42px}
.tilt-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;perspective:900px;padding:10px 24px;touch-action:none}
.tilt-wrap .card{height:100%;max-height:100%;max-width:100%;transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .12s ease-out;will-change:transform}
.tilt-wrap .card.dragging{transition:none}
.tilt-wrap .card.rest{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tilt-wrap .card.reveal{animation:reveal 1s cubic-bezier(.2,.8,.2,1)}
@keyframes reveal{0%{transform:rotateY(900deg) scale(.2);opacity:0}60%{opacity:1}100%{transform:rotateY(0) scale(1)}}
.detail-hint{text-align:center;color:#cbd5f5;font-size:14px;padding:2px 16px}
.detail-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 16px calc(14px + env(safe-area-inset-bottom))}
.overlay.full .link-btn{color:#cbd5f5}.overlay.full .link-btn.danger{color:#ff9d9d}

#toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%) translateY(-20px);
  background:var(--ink);color:#fff;padding:11px 18px;border-radius:99px;font-size:15px;font-weight:600;opacity:0;pointer-events:none;
  transition:.3s;z-index:99;max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%)}

/* anteprima "tieni premuto" */
#peek{position:fixed;top:0;bottom:0;left:50%;width:min(100%,480px);transform:translateX(-50%);z-index:80;background:rgba(20,26,60,.72);backdrop-filter:blur(7px);display:flex;align-items:center;
  justify-content:center;perspective:900px;pointer-events:none;animation:fade .15s}
@keyframes fade{from{opacity:0}}
#peekCard{height:min(74vh,600px);aspect-ratio:5/7;max-width:calc(88 * var(--u))}

/* telefono girato in orizzontale: si gioca in verticale */
#rotate{display:none}
@media (orientation:landscape) and (max-height:520px){
  #rotate{position:fixed;inset:0;z-index:999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
    background:linear-gradient(#aee4ff,#fff7e6);color:var(--ink);font-size:24px;font-weight:700;text-align:center;padding:24px}
  #rotate span{font-size:64px;display:block;animation:turn 2s ease-in-out infinite}
}
@keyframes turn{0%,20%{transform:rotate(90deg)}60%,100%{transform:rotate(0)}}
/* su schermo largo (PC) la colonna telefono resta al centro */
@media (min-width:481px){
  html{background:#7fcaf0}
  body{box-shadow:none}
  #app,.nav{box-shadow:0 0 0 100vmax rgba(31,42,68,.0)}
}
#peekCard .card{width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.02);
  transition:transform .08s linear;box-shadow:0 0 0 3px var(--ink),0 30px 50px rgba(0,0,0,.55)}
#peekCard .card.r-legendary{box-shadow:0 0 0 3px var(--ink),0 0 40px rgba(255,184,0,.6),0 30px 50px rgba(0,0,0,.55)}