.snp-wrap{--cw: clamp(62px, 19vw, 92px);--ch: calc(var(--cw) * 1.4);max-width:560px;margin:0 auto}.snp-wrap .snp-table{display:grid;gap:8px;padding:10px 12px;border-radius:var(--radius);color:#fff;background:radial-gradient(ellipse at 50% 40%,var(--table),var(--table-2))}.snp-wrap .snp-side{display:flex;align-items:center;gap:14px}.snp-wrap .snp-deck{--cw: clamp(48px, 14vw, 70px);--ch: calc(var(--cw) * 1.4);position:relative;width:var(--cw);height:var(--ch);flex:none;border-radius:calc(var(--cw) * .08)}.snp-wrap .snp-deck-btn{appearance:none;border:0;padding:0;background:none;cursor:pointer}.snp-wrap .snp-deck-btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px}.snp-wrap .snp-deck-btn:disabled{cursor:default}.snp-wrap .snp-deck .card{pointer-events:none}.snp-wrap .snp-stacked .card{box-shadow:3px 3px #0000004d,6px 6px #0000002e}.snp-wrap .snp-go{animation:snp-pulse 1.1s ease-in-out infinite}.snp-wrap .snp-empty{width:100%;height:100%;display:grid;place-items:center;border-radius:inherit;border:2px dashed rgb(255 255 255 / .3);color:#fff9;font-size:.75rem}.snp-wrap .snp-info{display:flex;flex-direction:column;gap:2px;font-weight:600;line-height:1.25}.snp-wrap .snp-info b{font-size:1.4rem;font-variant-numeric:tabular-nums}.snp-wrap .snp-sub{font-size:.85rem;color:#ffffffb8;font-weight:500}.snp-wrap .snp-turn{color:#ffd166;font-weight:700}.snp-wrap .snp-pile{appearance:none;position:relative;display:flex;align-items:center;justify-content:center;width:100%;min-height:calc(var(--ch) + 40px);padding:14px 10px 22px;border:2px solid rgb(255 255 255 / .12);border-radius:var(--radius);background:#00000029;color:inherit;font:inherit;cursor:pointer}.snp-wrap .snp-pile:disabled{cursor:default}.snp-wrap .snp-pile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.snp-wrap .snp-pile .card{position:relative;flex:none;cursor:inherit}.snp-wrap .snp-pile .snp-under{transform:rotate(-7deg);margin-right:calc(var(--cw) * -.36)}.snp-wrap .snp-pile .snp-top{transform:rotate(5deg)}.snp-wrap .snp-pile .snp-new{animation:snp-in .2s ease-out both}.snp-wrap .snp-pile-empty{width:var(--cw);height:var(--ch);display:grid;place-items:center;border-radius:calc(var(--cw) * .08);border:2px dashed rgb(255 255 255 / .3);color:#ffffff80;font-weight:700}.snp-wrap .snp-pile-count{position:absolute;right:10px;bottom:4px;font-size:.75rem;color:#ffffffb3}.snp-wrap .snp-msg{min-height:2.6em;display:grid;place-items:center;text-align:center;font-weight:700;line-height:1.3}.snp-wrap .snp-msg.snp-good{color:#8ef0b0}.snp-wrap .snp-msg.snp-bad{color:#ffb38a}.snp-wrap .snp-actions{display:flex;gap:10px;margin-top:10px}.snp-wrap .snp-flip{flex:1;min-height:64px;font-size:1.15rem}.snp-wrap .snp-snap{flex:2;min-height:64px;font-size:1.6rem;font-weight:800;letter-spacing:.04em;background:var(--p1);border-color:var(--p1);color:#fff;touch-action:manipulation}.snp-wrap .snp-snap:hover{background:var(--p1);filter:brightness(1.08)}.snp-wrap .snp-flip,.snp-wrap .snp-deck-btn,.snp-wrap .snp-pile{touch-action:manipulation}.snp-wrap .snp-keys{text-align:center;margin:8px 0 0}.snp-wrap.snp-shake .snp-pile{animation:snp-shake .3s}@keyframes snp-in{0%{opacity:0;transform:translateY(30px) rotate(5deg)}}@keyframes snp-pulse{50%{box-shadow:0 0 0 4px #ffd166,0 0 18px #ffd16699}}@keyframes snp-shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}