.pull-card{--card-ground:#0d1016;--rarity:var(--f-kind);--frame:color-mix(in oklab, var(--rarity) 55%, var(--rule-strong));--edge:color-mix(in oklab, var(--rarity) 45%, var(--ground-3));--u:1;--shade:0;--back-shade:0;--lift:0;--tell:0;width:var(--card-w,340px);aspect-ratio:5/7;transform-style:preserve-3d;visibility:hidden;letter-spacing:normal;text-transform:none;position:absolute;top:0;left:0}.pull-card[data-rarity=common]{--frame:var(--rule-strong);--edge:var(--ground-4)}.pull-card[data-rarity=legendary]{--edge:linear-gradient(#f7ce6e, #d37c17)}.pull-card .turn{transform-style:preserve-3d;position:absolute;inset:0}.pull-card :is(.face,.back){isolation:isolate;border:1px solid var(--frame);background:var(--card-ground);backface-visibility:hidden;box-shadow:0 calc(20px + var(--lift) * 60px) calc(40px + var(--lift) * 80px) calc(-18px + var(--lift) * 6px) #010204e6;border-radius:2px;position:absolute;inset:0;overflow:hidden}.pull-card .face{flex-direction:column;display:flex;transform:translateZ(1px)}.pull-card .back{border-color:color-mix(in oklab, var(--rarity) calc(var(--tell) * 80%), var(--rule-strong));background:repeating-linear-gradient(45deg, #181d25b3 0 1px, transparent 1px 7px), var(--card-ground);place-items:center;display:grid;transform:rotateY(180deg)translateZ(1px)}.pull-card .back:before{box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--rarity) calc(var(--tell) * 70%), transparent), inset 0 0 calc(var(--tell) * 40px * var(--u)) color-mix(in oklab, var(--rarity) 34%, transparent);content:"";position:absolute;inset:0}.pull-card :is(.face,.back):after{z-index:4;opacity:var(--shade);content:"";pointer-events:none;background:#030407;position:absolute;inset:0}.pull-card .back:after{opacity:var(--back-shade)}.pull-card .emblem{aspect-ratio:1;background:color-mix(in oklab, var(--accent) calc((1 - var(--tell)) * 100%), var(--rarity));width:44%;mask:var(--emblem) center / contain no-repeat}.pull-card .edge{background:var(--edge);width:2px;height:calc(100% - 2px);position:absolute;top:1px;transform:rotateY(90deg)}.pull-card .edge.left{left:-1px}.pull-card .edge.right{left:calc(100% - 1px)}.pull-card .art{aspect-ratio:4/3;border-bottom:1px solid var(--rule);pointer-events:none;flex:none;position:relative;overflow:hidden}.pull-card .art canvas{z-index:0;image-rendering:pixelated;display:block;position:relative}.pull-card .foil{z-index:1;image-rendering:pixelated;pointer-events:none;position:absolute}.pull-card .caption{z-index:2;align-content:start;gap:calc(6px * var(--u));padding:calc(14px * var(--u)) calc(16px * var(--u)) 0;flex:1;display:grid;position:relative}.pull-card .kicker{gap:var(--s-2);color:var(--muted);font:400 calc(10px * var(--u)) / 1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;align-items:baseline;display:flex}.pull-card .kicker :first-child{color:var(--accent)}.pull-card .title{font:500 calc(20px * var(--u)) / 1.2 var(--font-sans);letter-spacing:-.01em;margin:0}.pull-card .title a{color:var(--text);text-decoration:none}.pull-card .title a:after{content:"";position:absolute;inset:-100vmax}.pull-card .caption p{color:var(--muted);font:400 calc(11px * var(--u)) / 1.6 var(--font-mono);-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;margin:0;display:-webkit-box;overflow:hidden}.pull-card .caption ul{gap:var(--s-1);margin:calc(4px * var(--u)) 0 0;flex-wrap:wrap;padding:0;list-style:none;display:flex}.pull-card .foot{z-index:2;margin:0 calc(16px * var(--u));padding:calc(10px * var(--u)) 0 calc(12px * var(--u));border-top:1px solid var(--rule);color:var(--muted);font:500 calc(10px * var(--u)) / 1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;justify-content:space-between;align-items:center;display:flex;position:relative}.pull-card .tier{gap:calc(8px * var(--u));color:var(--rarity);align-items:center;display:inline-flex}.pull-card .gem{width:calc(6px * var(--u));aspect-ratio:1;background:currentColor;rotate:45deg}dialog:is(.pull,.binder){-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;overflow:hidden}dialog:is(.pull,.binder)::backdrop{background:color-mix(in oklab, var(--ground) 88%, transparent);backdrop-filter:blur(3px)}.pull-stage,.binder-stage{-webkit-user-select:none;user-select:none;outline:none;position:absolute;inset:0}.pull-row,.binder-row{gap:var(--s-3);justify-items:center;display:grid;position:absolute;left:50%;translate:-50%}.pull-primary,.binder-row .binder-open{min-height:32px;padding:0 var(--s-3);border:1px solid var(--accent);color:var(--link);font:500 var(--type-label) / 1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;background:0 0;border-radius:2px}.pull-close,:is(.binder-head,.binder-foot) button{border:1px solid var(--rule-strong);background:color-mix(in oklab, var(--ground) 70%, transparent);width:36px;height:36px;color:var(--muted);cursor:pointer;pointer-events:auto;border-radius:2px;place-items:center;padding:0;display:grid}dialog.pull button:focus-visible,dialog.binder :is(a,button):not(.pull-card *):focus-visible{outline:2px solid var(--accent);outline-offset:3px}