[hidden]{display:none!important}
*{box-sizing:border-box}html,body{margin:0;background:#0d0b12;color:#f3eee4;font:15px/1.4 system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
header{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid #2a2433;flex-wrap:wrap}
header h1{font-size:20px;margin:0;letter-spacing:1px}header h1 span{color:#ffc93c}.back{color:#ffc93c;text-decoration:none}.sim{margin-left:auto;font-size:12px;color:#a99;border:1px solid #443;padding:2px 8px;border-radius:99px}
main{max-width:1100px;margin:0 auto;padding:14px}
.stage{min-height:70vh;display:flex;align-items:center;justify-content:center;position:relative}
.start{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
button{font:inherit;border:0;border-radius:10px;padding:10px 18px;cursor:pointer;touch-action:manipulation}
.big{background:#ffc93c;color:#1a1400;font-weight:800;font-size:18px;padding:14px 28px}.ghost{background:#231d2c;color:#f3eee4;border:1px solid #3a3145}.small{padding:6px 12px;font-size:13px}.muted{color:#a69fb0}
.vidwrap{position:relative;height:70vh;aspect-ratio:9/16;max-width:100%}.vidwrap video{width:100%;height:100%;object-fit:cover;border-radius:14px}
.vidwrap .small{position:absolute;right:10px;bottom:10px}
.cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;width:100%;perspective:1400px}
@media (max-width:760px){.cards{grid-template-columns:repeat(6,1fr);gap:10px}.cards .card{grid-column:span 2}.cards .card:nth-child(4){grid-column:2/span 2}}
.card{aspect-ratio:5/7;position:relative;cursor:pointer;opacity:0;transform:translateY(40px) scale(.9);animation:deal .45s cubic-bezier(.2,.8,.3,1.2) forwards}
@keyframes deal{to{opacity:1;transform:none}}
.flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,.7,.3,1)}
.card.up .flip{transform:rotateY(180deg)}
.card.holo.up .flip{transition-duration:1.1s;transform:rotateY(540deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:4.5%/3.2%;overflow:hidden;box-shadow:0 8px 24px #0009}
.back-f{background:#1c1510;border:4px solid #c8902a;box-shadow:inset 0 0 0 2px #f5c04a,0 8px 24px #0009;display:flex;align-items:center;justify-content:center}
.back-f svg{width:46%;position:relative;z-index:1}

.card:not(.up):hover .back-f{filter:brightness(1.2)}
.front{transform:rotateY(180deg);background:#111}.front img{width:100%;height:100%;object-fit:cover;display:block}
.foil{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='38'%3E%3Cpath d='M11 1l10 6v12l-10 6L1 19V7z' fill='none' stroke='white' stroke-opacity='.55' stroke-width='1.4'/%3E%3Cpath d='M0 31l11-6 11 6' fill='none' stroke='white' stroke-opacity='.55' stroke-width='1.4'/%3E%3C/svg%3E"),
 linear-gradient(115deg,transparent 20%,var(--tint) 40%,#fff8 50%,var(--tint) 60%,transparent 80%);
 background-size:22px 38px,250% 250%;animation:shine 3.2s linear infinite}
.foil:before{content:"";position:absolute;inset:0;background:var(--tint);mix-blend-mode:overlay;opacity:.35}
@keyframes shine{from{background-position:0 0,120% 0}to{background-position:0 0,-120% 0}}
.tag{position:absolute;top:6%;right:6%;font-size:11px;font-weight:900;padding:2px 7px;border-radius:6px;background:linear-gradient(90deg,#ff6,#6ff,#f6f,#ff6);background-size:200%;color:#111;animation:shine 2s linear infinite}
.burst{position:absolute;inset:-20%;pointer-events:none;border-radius:50%;background:radial-gradient(circle,var(--tint) 0,transparent 60%);opacity:0;animation:burst .9s ease-out .55s}
@keyframes burst{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
.rar{position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-size:12px;font-weight:700;opacity:0;transition:opacity .3s .5s}.card.up .rar{opacity:1}
.r-Mythic{color:#ff6bd6}.r-Rare{color:#5ab8ff}.r-Uncommon{color:#7ee08a}.r-Common{color:#bbb}
.bar{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:34px;padding-bottom:env(safe-area-inset-bottom)}
.god .card .back-f{border-color:#fff;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 30px #ffd23c,0 0 0 3px #fff}}
.godfx{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.godfx i{position:absolute;top:-20px;width:10px;height:12px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}
.flash{position:fixed;inset:0;background:#fff;pointer-events:none;z-index:6;animation:flash .7s ease-out forwards}@keyframes flash{from{opacity:.85}to{opacity:0}}
.zoom{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:9}.zoom{perspective:1200px}
.zframe{position:relative;width:min(94vw,calc(90vh*5/7));aspect-ratio:5/7;border-radius:12px;overflow:hidden;transform:rotateX(var(--zrx,0deg)) rotateY(var(--zry,0deg));transition:transform .12s ease-out;box-shadow:0 30px 60px #000a}
.zframe img{width:100%;height:100%;object-fit:cover;display:block}
.zframe .zfoil,.zframe .zshine,.zframe .ztag{display:none}
.zframe.holo .zfoil{display:block;background-size:44px 76px,250% 250%}
.zframe.holo .zshine{display:block;position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),#fffc 0,var(--tint) 18%,transparent 48%);opacity:.55}
.zframe.holo .ztag{display:block;font-size:16px;padding:4px 10px}
.zframe.holo{box-shadow:0 0 34px var(--tint),0 30px 60px #000a}
@media (prefers-reduced-motion:reduce){.flip{transition-duration:.01s!important}.foil,.burst,.godfx{animation:none!important}}
/* ---- 3D look ---- */
.cards{perspective:1100px;perspective-origin:50% 30%}
.card{transform-style:preserve-3d;--rx:0deg;--ry:0deg}
.tilt{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(8deg + var(--rx))) rotateY(var(--ry));transition:transform .25s ease-out;animation:float 4s ease-in-out infinite}
.card:nth-child(2) .tilt{animation-delay:-.8s}.card:nth-child(3) .tilt{animation-delay:-1.6s}.card:nth-child(4) .tilt{animation-delay:-2.4s}.card:nth-child(5) .tilt{animation-delay:-3.2s}
@keyframes float{0%,100%{translate:0 0 0}50%{translate:0 -6px 10px}}
.card.up .tilt{animation:none}
.flip{transition:transform .8s cubic-bezier(.25,.8,.25,1)}
.card.up .flip{transform:rotateY(180deg) translateZ(0)}
.card.flipping .flip{animation:lift .8s ease-out}
@keyframes lift{50%{translate:0 -18px 60px}}
/* thickness: stacked edge layers between faces */
.edge{position:absolute;inset:0;border-radius:4.5%/3.2%;background:#8a5d12}
.edge.e1{transform:translateZ(-1px)}.edge.e2{transform:translateZ(-2px);background:#6e4a0e}.edge.e3{transform:translateZ(-3px);background:#c8902a}
.back-f{transform:translateZ(.5px)}
.front{transform:rotateY(180deg) translateZ(3.5px)}
/* lighting: warm key light top-left like the render */
.face:before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
 background:radial-gradient(120% 90% at var(--lx,30%) var(--ly,15%),rgba(255,214,140,.28),transparent 55%),linear-gradient(180deg,transparent 60%,rgba(0,0,0,.35))}
.back-f{box-shadow:inset 0 0 0 2px #f5c04a,inset 0 -10px 24px rgba(0,0,0,.55)}
/* soft floor shadow */
.card:after{content:"";position:absolute;left:8%;right:8%;bottom:-16px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(4px);transform:translateZ(-40px);pointer-events:none}
.face{box-shadow:none}.tilt{filter:drop-shadow(0 14px 18px rgba(0,0,0,.55))}
.cards .card .burst{transform:translateZ(20px)}
@media (prefers-reduced-motion:reduce){.tilt{animation:none!important}}

/* back face = the card back used in the Blender render */
.back-f{background:#e9c53a url(media/card_back.webp) center/cover no-repeat;border:0;box-shadow:inset 0 -10px 24px rgba(0,0,0,.35)}
.back-f:after{content:none}
.edge.e1,.edge.e2{background:#b8901a}.edge.e3{background:#f2d24a}
.vidwrap{transition:opacity .35s ease}.vidwrap.out{opacity:0}
.homelink{display:inline-flex;align-items:center;gap:7px;color:#ffc93c;text-decoration:none;font-weight:800;font-size:13px;padding:4px 10px 4px 5px;border:1px solid #ffc93c66;border-radius:999px;background:#ffc93c14;white-space:nowrap;min-height:34px}.homelink img{width:24px;height:24px;border-radius:50%}.homelink:hover{background:#ffc93c2b;border-color:#ffc93c}
@media (pointer:coarse){.homelink{min-height:44px}}