@layer components{.sp-stage{-webkit-user-select:none;user-select:none;touch-action:none;background:radial-gradient(120% 80% at 50% 0,#ffffff14,#0000 60%),radial-gradient(90% 70% at 50% 35%,#44266f 0%,#2a1548 58%,#150b26 100%);padding:0;overflow:hidden}.sp-bar{z-index:3000;align-items:center;gap:8px;height:46px;display:flex;position:absolute;top:7px;left:12px;right:12px}.is-narrow .sp-bar{left:8px;right:8px}.sp-read{color:#ffffff9e;align-items:baseline;gap:12px;margin-right:auto;font-size:13px;display:flex}.sp-read b{font-family:var(--font-display), var(--font-sans);letter-spacing:-.02em;color:#fff;font-size:22px;font-weight:800}.sp-key{--key:#ffffff1a;--key-ink:#fff;--edge:#0000004d;height:44px;box-shadow:inset 0 -3px 0 var(--edge), inset 0 0 0 1.5px #ffffff24;gap:6px;padding:0 14px;font-size:14px}.sp-key svg{width:19px;height:19px}.is-narrow .sp-key{width:44px;padding:0}.is-narrow .sp-key-word{display:none}.sp-slot{width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .11);background:#00000014;transition:box-shadow .16s,background .16s;position:absolute;top:0;left:0;box-shadow:inset 0 0 0 1.5px #ffffff1f}.sp-slot.is-target{background:#ccff3d1f;box-shadow:inset 0 0 0 2.5px #ccff3dd9,0 0 18px #ccff3d59}.sp-home{font-size:clamp(11px, calc(var(--cw) * .24), 17px);color:#ffffff4d;place-items:center;font-weight:700;display:grid}.sp-stock{z-index:0;font-size:clamp(10px, calc(var(--cw) * .2), 14px);color:#ffffff59;cursor:pointer;box-shadow:none;background:0 0;place-items:center;padding:0;font-weight:650;display:grid}.sp-stock.is-empty{cursor:default;box-shadow:inset 0 0 0 1.5px #ffffff1a}.sp-stock.is-target{z-index:999;background:#ccff3d1a}.sp-stock:focus-visible{outline:3px solid var(--rn);outline-offset:3px}.sp-card{width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .11);color:#18181d;perspective:700px;transform-origin:0 0;transition:transform .3s var(--ease-out), translate .24s var(--ease-out), scale .16s var(--ease-out), box-shadow .16s ease;will-change:transform;pointer-events:none;position:absolute;top:0;left:0;box-shadow:0 1px 1.5px #0006,0 2px 6px #00000024}.sp-card.is-red{color:#d3263a}.sp-card.is-live{pointer-events:auto;cursor:grab}.sp-card.is-lifted{translate:var(--dx) var(--dy);transition:scale .14s var(--ease-out), box-shadow .14s ease;cursor:grabbing;scale:1.05;box-shadow:0 18px 30px #0000006b,0 4px 8px #0003}.sp-card.is-drop{box-shadow:0 0 0 3px var(--rn), 0 0 22px #ccff3d73}.sp-card.is-hint{animation:.9s ease-in-out 2 sp-hint}@keyframes sp-hint{50%{translate:0 calc(var(--cw) * -.14);box-shadow:0 0 0 3px var(--rn), 0 10px 22px #0006}}.sp-card.is-nope{animation:.28s sp-nope}@keyframes sp-nope{25%{translate:-5px}75%{translate:5px}}.sp-flip{transform-style:preserve-3d;transition:transform .32s var(--ease-out);position:absolute;inset:0}.sp-card.is-down .sp-flip{transform:rotateY(180deg)}.sp-face,.sp-back{border-radius:inherit;backface-visibility:hidden;position:absolute;inset:0}.sp-face{border-radius:calc(var(--cw) * .11);background:linear-gradient(170deg,#fffefb 0%,#f6f2e9 100%);overflow:hidden;box-shadow:inset 0 0 0 1px #0000001f,inset 0 -2px #0000000d}.sp-back{border-radius:calc(var(--cw) * .11);box-shadow:inset 0 0 0 calc(var(--cw) * .05) #f7f4ec, inset 0 0 0 calc(var(--cw) * .05 + 1.5px) #00000040;background:radial-gradient(circle,#ccff3de6 1px,#0000 1.5px) 0 0/7px 7px,linear-gradient(160deg,#2a2a33,#121216);transform:rotateY(180deg)}.sp-idx{height:calc(var(--cw) * .38);font-family:var(--font-display), var(--font-sans);font-size:calc(var(--cw) * .36);letter-spacing:-.07em;justify-content:space-between;align-items:center;font-weight:800;line-height:1;display:flex;position:absolute;top:3%;left:8%;right:7%}.sp-pip{width:calc(var(--cw) * .27);height:calc(var(--cw) * .27)}.sp-big{width:54%;height:54%;position:absolute;bottom:9%;left:50%;translate:-50%}.sp-ace{filter:drop-shadow(0 1px #0000001f);width:66%;height:60%;position:absolute;bottom:10%;left:50%;translate:-50%}.sp-court{border-radius:calc(var(--cw) * .07);background:color-mix(in oklab, currentColor 10%, #fffaf0);box-shadow:inset 0 0 0 1.5px color-mix(in oklab, currentColor 30%, transparent);place-items:center;display:grid;position:absolute;inset:34% 9% 6%}.sp-court svg{filter:drop-shadow(0 1px #00000026);width:86%;height:86%}.is-narrow .sp-idx{height:calc(var(--cw) * .5);font-size:calc(var(--cw) * .44);letter-spacing:-.09em;top:2%;left:5%;right:4%}.is-narrow .sp-pip{width:calc(var(--cw) * .34);height:calc(var(--cw) * .34)}.is-narrow .sp-back{background:radial-gradient(circle,#ccff3de6 .8px,#0000 1.2px) 0 0/5px 5px,linear-gradient(160deg,#2a2a33,#121216)}.sp-cursor{z-index:2900;width:var(--cw);height:var(--ch);border-radius:calc(var(--cw) * .11);box-shadow:0 0 0 3px var(--rn);pointer-events:none;transition:translate .14s var(--ease-out);position:absolute;top:0;left:0}.sp-note{z-index:3100;left:50%;bottom:calc(var(--ch) + 26px);text-align:center;color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;width:max-content;max-width:calc(100% - 32px);animation:pop .3s var(--ease-pop) both;background:#000000b8;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;position:absolute;translate:-50%}.sp-won{z-index:3200;text-align:center;pointer-events:none;position:absolute;top:38%;left:0;right:0}.sp-won p{letter-spacing:-.05em;color:#fff;text-shadow:0 4px 30px #0000008c;animation:pop .42s var(--ease-pop) .5s both;font-size:56px;font-weight:800}.sp-won .confetti{top:40%}.is-done .sp-card{animation:sp-fly 1.5s var(--fd) cubic-bezier(.45, 0, .7, 1) forwards}@keyframes sp-fly{0%{translate:0;rotate:none}22%{translate:calc(var(--fx) * .22) -42vh}to{translate:var(--fx) 115vh;rotate:var(--fr)}}.sp-sum{align-items:center;gap:16px;display:flex}.sp-sum-cards{flex:none;width:104px;height:58px;position:relative}.sp-sum-cards .sp-card{transition:none}.sp-sum p{color:var(--on-dark-dim);font-size:14px;line-height:1.35}.sp-sum b{color:var(--on-dark);font-weight:700}@media (prefers-reduced-motion:reduce){.sp-card,.sp-flip,.sp-cursor{transition:none}.sp-card.is-lifted{scale:none}.sp-card.is-hint{box-shadow:0 0 0 3px var(--rn);animation:none}.sp-card.is-nope{box-shadow:0 0 0 3px var(--bad,#ff4d4f);animation:none}.is-done .sp-card,.sp-note,.sp-won p{animation:none}}}