.sp-shell{--sp-accent:#4f7cff;--sp-accent-2:#22c55e;--sp-card:#2b3352;--sp-card-bg:#f4f6ff;--sp-card-line:#dfe4f7;--sp-highlight:#ec4899;max-width:860px;margin:0 auto;padding:16px}.sp-play-shell{max-width:900px}.sp-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:10px;display:flex}.sp-back-link{color:var(--sp-accent);border:2px solid var(--sp-accent);background:#fff;border-radius:12px;flex:none;align-items:center;gap:8px;padding:10px 18px;font-size:.95rem;font-weight:800;text-decoration:none;transition:transform .12s,background .12s,color .12s;display:inline-flex;box-shadow:0 2px #00000014}.sp-back-link:hover{background:var(--sp-accent);color:#fff;transform:translateY(-1px)}.sp-back-link-icon{font-size:1.1rem;line-height:1}.sp-header-left{flex-wrap:wrap;flex:none;align-items:center;gap:10px;display:flex}.sp-help-btn{color:#b45309;cursor:pointer;background:#fff7ed;border:2px solid #f5b301;border-radius:12px;align-items:center;gap:6px;padding:10px 16px;font-size:.9rem;font-weight:800;transition:transform .12s,background .12s;display:inline-flex;box-shadow:0 2px #00000014}.sp-help-btn:hover{background:#ffedd5;transform:translateY(-1px)}.sp-help-btn-icon{color:#fff;background:#f5b301;border-radius:999px;justify-content:center;align-items:center;width:20px;height:20px;font-size:.85rem;font-weight:900;line-height:1;display:inline-flex}.sp-header-meta{text-align:right;flex:260px;min-width:220px}.sp-stage-meta-line{color:#778;margin:0 0 4px;font-size:.95rem;font-weight:700}.sp-stage-hint{color:#556;margin:0 0 4px;font-size:1.04rem}.sp-stage-title{text-align:center;margin:0 0 14px;font-size:1.35rem}.sp-board-wrap{border:2px solid var(--sp-card-line);background:#f8faff;border-radius:16px;justify-content:center;padding:28px 16px;display:flex;position:relative}.sp-board{--card-w:64px;--card-h:140px;min-height:var(--card-h);align-items:flex-end;gap:10px;display:flex;position:relative}@media (width<=520px){.sp-board{--card-w:46px;--card-h:110px;gap:6px}}.sp-card{width:var(--card-w);height:var(--card-h);background:0 0;border:none;justify-content:center;align-items:flex-end;padding:0;transition:transform .25s cubic-bezier(.22,1,.36,1);display:flex;position:relative}.sp-card-body{color:#fff;text-shadow:0 1px 2px #00000040;border-radius:12px 12px 8px 8px;justify-content:center;align-items:center;width:100%;font-size:1.5rem;font-weight:900;transition:background .2s,border-color .2s,box-shadow .2s;display:flex;position:relative;overflow:visible;box-shadow:0 3px #0000001f}.sp-card-num{z-index:2;line-height:1;position:relative}@media (width<=520px){.sp-card-body{font-size:1.15rem}}.sp-cloud{pointer-events:none;z-index:3;width:116%;height:30px;position:absolute;top:-16px;left:50%;transform:translate(-50%)}.sp-cloud-puff{background:linear-gradient(#fff 0%,#f1f4fb 70%,#dfe4f2 100%);border-radius:50%;position:absolute;bottom:0;box-shadow:0 1px 3px #3c46642e}.sp-cloud-puff-1{width:46%;height:22px;left:4%}.sp-cloud-puff-2{width:54%;height:30px;left:28%}.sp-cloud-puff-3{width:46%;height:22px;right:4%}@media (width<=520px){.sp-cloud{height:24px;top:-12px}.sp-cloud-puff-1,.sp-cloud-puff-3{height:17px}.sp-cloud-puff-2{height:24px}}.sp-card-cloud .sp-card-body{background:linear-gradient(#c2cbe4 0%,#a3adcc 60%,#8b95bd 100%);border:2px solid #7d88ad;border-top-color:#cfd6e8}.sp-card-open .sp-card-body{color:#4a3200;text-shadow:none;background:linear-gradient(#fff2a8 0%,#ffd23f 60%,#f5b301 100%);border:2px solid #d68f00;box-shadow:0 0 0 3px #f5b30166,0 4px 10px #0003}.sp-card-side-badge{z-index:4;color:#9a5b00;text-align:center;min-width:30px;text-shadow:none;white-space:nowrap;background:#fff;border:2px solid #d68f00;border-radius:999px;padding:2px 8px;font-size:.7rem;font-weight:900;line-height:1.1;position:absolute;top:-12px;left:50%;transform:translate(-50%)}.sp-card-candidate .sp-card-body{color:#fff;text-shadow:0 1px 2px #00000040;background:linear-gradient(#c7d2ff 0%,#818cf8 60%,#6366f1 100%);border:2px solid #4338ca;box-shadow:0 0 0 3px #6366f159,0 4px 10px #0003}.sp-card-candidate-badge{color:#4338ca;white-space:nowrap;z-index:3;background:#fff;border-radius:999px;padding:1px 8px;font-size:.62rem;font-weight:900;position:absolute;top:-10px;left:50%;transform:translate(-50%);box-shadow:0 1px 3px #0003}.sp-card-compare-badge{z-index:2;color:#7c4a03;white-space:nowrap;background:#fff7d6;border:2px solid #d68f00;border-radius:999px;padding:2px 6px;font-size:.66rem;font-weight:900;line-height:1;position:absolute;top:-10px;left:50%;transform:translate(-50%)}.sp-card-selectable{cursor:pointer}.sp-card-selectable:hover{transform:translateY(-7px)scale(1.04)}.sp-card-selectable:focus-visible{outline-offset:5px;border-radius:14px;outline:4px solid #2563eb}.sp-card-band .sp-card-body{background:linear-gradient(#d7ddf5 0%,#b7c0e6 60%,#9aa5d6 100%);border:2px solid #6b76a8;border-top-color:#e3e7f7}.sp-card-quick-region .sp-card-body{background:linear-gradient(#f3d9ee 0%,#dba9d1 60%,#c07ab3 100%);border:2px solid #8f4b83;border-top-color:#f6e3f2}.sp-card-hand{transform:translateY(-14px)}.sp-card-hand .sp-card-body{box-shadow:0 0 0 3px #f5b30166,0 10px 16px #00000047}.sp-card-hand-badge{color:#b45309;white-space:nowrap;z-index:3;background:#fff;border-radius:999px;padding:1px 8px;font-size:.62rem;font-weight:900;position:absolute;top:-10px;left:50%;transform:translate(-50%);box-shadow:0 1px 3px #0003}.sp-card-fixed .sp-card-body{color:#05391f;text-shadow:none;opacity:.95;background:linear-gradient(#a7f3d0 0%,#4ade80 60%,#22c55e 100%);border:2px solid #15803d}.sp-card-check{color:#15803d;z-index:2;font-size:.8rem;font-weight:900;position:absolute;top:4px;right:5px}.sp-card.sp-swap-left{animation:.32s sp-swap-left}.sp-card.sp-swap-right{animation:.32s sp-swap-right}@keyframes sp-swap-left{0%{transform:translate(0)}50%{transform:translateX(calc(-1 * (var(--card-w) + 10px))) translateY(-14px)}to{transform:translate(0)}}@keyframes sp-swap-right{0%{transform:translate(0)}50%{transform:translateX(calc(var(--card-w) + 10px)) translateY(-14px)}to{transform:translate(0)}}.sp-card.sp-card-select-swap{animation:.32s sp-select-swap-pop}@keyframes sp-select-swap-pop{0%{transform:translateY(0)scale(1)}40%{transform:translateY(-16px)scale(1.05)}to{transform:translateY(0)scale(1)}}.sp-card-miss{animation:.3s sp-miss-shake}@keyframes sp-miss-shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.sp-pass-line{text-align:center;color:#4a5578;letter-spacing:.02em;margin:0 0 10px;font-size:1.05rem;font-weight:800}.sp-decision{flex-direction:column;align-items:center;gap:10px;margin-top:16px;display:flex}.sp-decision[hidden],.sp-decision-click-cards .sp-decision-buttons{display:none}.sp-bubble-guide{text-align:center;background:linear-gradient(#fffdf4 0%,#fff7d6 100%);border:2px solid #f5b301;border-radius:16px;width:min(460px,100%);padding:12px 16px 10px;box-shadow:0 3px #d68f0029}.sp-bubble-guide[hidden]{display:none}.sp-bubble-guide-label{color:#7c4a03;letter-spacing:.08em;margin:0 0 8px;font-size:.95rem;font-weight:900}.sp-bubble-guide-pair{justify-content:center;align-items:center;gap:10px;display:flex}.sp-bubble-guide-number{color:#7c4a03;background:#fff;border:2px solid #d68f00;border-radius:12px;justify-content:center;align-items:baseline;gap:6px;min-width:104px;padding:7px 12px;font-size:.95rem;font-weight:900;display:inline-flex}.sp-bubble-guide-number strong{color:#4a3200;font-size:1.7rem;line-height:1}.sp-bubble-guide-versus{color:#9a5b00;font-size:.95rem;font-weight:900}.sp-bubble-guide-flow{color:#9a5b00;margin:8px 0 0;font-size:.84rem;font-weight:900}.sp-select-guide{text-align:center;background:linear-gradient(135deg,#eef2ff 0%,#fff9df 100%);border:2px solid #6366f1;border-radius:14px;width:min(520px,100%);padding:12px 16px 10px;box-shadow:0 3px #4f46e526}.sp-select-guide[hidden]{display:none}.sp-select-guide-label{color:#3730a3;letter-spacing:.08em;margin:0 0 8px;font-size:.95rem;font-weight:900}.sp-select-guide-pair{justify-content:center;align-items:center;gap:10px;display:flex}.sp-select-guide-number{border:2px solid;border-radius:10px;align-items:baseline;gap:6px;min-width:132px;padding:7px 10px;font-size:.95rem;font-weight:900;display:inline-flex}.sp-select-guide-choice{color:#3730a3;background:#e0e7ff;border-color:#4338ca}.sp-select-guide-compare{color:#7c4a03;background:#fff1b8;border-color:#d68f00}.sp-select-guide-number strong{margin-left:auto;font-size:1.7rem;line-height:1}.sp-select-guide-versus{color:#6b5c3a;font-size:.95rem;font-weight:900}.sp-decision-prompt{color:#556;text-align:center;margin:0;font-size:1.05rem;font-weight:700}.sp-decision-buttons{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.sp-decision-buttons .btn-ultra{min-width:190px;padding:12px 20px;font-size:1.18rem}.sp-status-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px;display:flex}.sp-counters{color:#445;align-items:baseline;gap:8px;font-size:1.05rem;font-weight:700;display:flex}.sp-counter strong{color:var(--sp-accent);font-size:1.22rem}.sp-counter-sep{color:#ccd}.sp-controls{gap:8px;display:flex}.sp-status{color:#667;text-align:center;min-height:1.4em;margin-top:10px;font-size:.92rem;font-weight:700}.sp-status[data-kind=miss]{color:#b45309}.sp-status[data-kind=advance]{color:#1d4ed8}.sp-status[data-kind=pass],.sp-status[data-kind=cleared]{color:#15803d}.sp-clear-overlay{z-index:5;pointer-events:none;flex-direction:column;justify-content:center;align-items:center;gap:2px;display:flex;position:absolute;inset:0}.sp-clear-overlay[hidden]{display:none}.sp-clear-overlay-mark{filter:drop-shadow(0 3px 8px #00000047);font-size:clamp(64px,18vw,116px);font-weight:900;line-height:1}.sp-clear-overlay-label{background:#ffffffeb;border-radius:999px;padding:2px 14px;font-size:clamp(1.05rem,3vw,1.4rem);font-weight:900;box-shadow:0 2px 8px #0000002e}.sp-clear-overlay-steps{color:#445;background:#ffffffe0;border-radius:999px;margin-top:2px;padding:2px 10px;font-size:.85rem;font-weight:800}.sp-clear-overlay-reward{color:#875300;background:#fff6c2f5;border:1px solid #e4a7009e;border-radius:999px;min-height:1.25em;margin-top:2px;padding:3px 11px;font-size:.9rem;font-weight:900}.sp-clear-overlay-reward:empty{display:none}.sp-clear-overlay[data-rank=cleared] .sp-clear-overlay-mark{color:var(--sp-accent-2)}.sp-clear-overlay[data-rank=cleared] .sp-clear-overlay-label{color:#15803d}.sp-clear-overlay[data-rank=perfect] .sp-clear-overlay-mark{background:linear-gradient(145deg,#ffe27a,#f5b301 55%,#d68f00);color:#0000;-webkit-background-clip:text;background-clip:text}.sp-clear-overlay[data-rank=perfect] .sp-clear-overlay-label{color:#b45309}.sp-clear-overlay-pop .sp-clear-overlay-mark,.sp-clear-overlay-pop .sp-clear-overlay-label,.sp-clear-overlay-pop .sp-clear-overlay-steps{animation:.42s cubic-bezier(.22,1.4,.36,1) both sp-clear-overlay-pop}.sp-clear-overlay-pop .sp-clear-overlay-reward{animation:.42s cubic-bezier(.22,1.4,.36,1) .15s both sp-clear-overlay-pop}.sp-clear-overlay-pop .sp-clear-overlay-label{animation-delay:50ms}.sp-clear-overlay-pop .sp-clear-overlay-steps{animation-delay:.1s}@keyframes sp-clear-overlay-pop{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@media (width<=520px){.sp-clear-overlay-label{font-size:1rem}.sp-clear-overlay-steps{font-size:.78rem}}.sp-modal-overlay{--sp-accent:#4f7cff;--sp-card-line:#dfe4f7;z-index:50;backdrop-filter:blur(2px);background:#1a1a2e8c;justify-content:center;align-items:center;padding:20px;animation:.18s both sp-modal-fade;display:flex;position:fixed;inset:0}.sp-modal-overlay[hidden]{display:none}@keyframes sp-modal-fade{0%{opacity:0}to{opacity:1}}.sp-modal{border:2px solid var(--sp-card-line);background:#fff;border-radius:18px;width:min(560px,100%);max-height:calc(100vh - 40px);padding:24px 22px 20px;animation:.24s cubic-bezier(.22,1.4,.36,1) both sp-modal-pop;position:relative;overflow-y:auto;box-shadow:0 12px 40px #00000047}@keyframes sp-modal-pop{0%{opacity:0;transform:translateY(12px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.sp-modal-close{color:#556;cursor:pointer;background:#eef1fa;border:none;border-radius:999px;width:34px;height:34px;font-size:1.3rem;font-weight:900;line-height:1;transition:background .12s,transform .12s;position:absolute;top:12px;right:12px}.sp-modal-close:hover{background:#e0e5f5;transform:scale(1.05)}.sp-modal-title{text-align:center;color:var(--sp-accent);margin:0 0 16px;font-size:1.3rem;font-weight:900}.sp-demo{border:2px solid var(--sp-card-line);background:#f8faff;border-radius:14px;margin:0 0 16px;padding:16px 12px 12px}.sp-demo-board{--card-w:40px;justify-content:center;align-items:flex-end;gap:8px;min-height:88px;display:flex}.sp-demo-card{width:var(--card-w);align-items:flex-end;height:72px}.sp-demo-card .sp-card-body{border-radius:10px 10px 7px 7px;height:72px;font-size:1.05rem}.sp-demo-card .sp-cloud{height:24px;top:-12px}.sp-demo-caption{text-align:center;color:#4a5578;min-height:1.3em;margin:10px 0 0;font-size:.9rem;font-weight:800}.sp-demo-dots{flex-wrap:wrap;justify-content:center;gap:6px;margin-top:10px;display:flex}.sp-demo-dot{background:#ccd4ea;border-radius:50%;width:8px;height:8px;transition:background .2s,transform .2s}.sp-demo-dot-active{background:var(--sp-accent,#4f7cff);transform:scale(1.35)}.sp-demo-card.sp-demo-swap-right{animation:sp-demo-swap-right var(--sp-demo-swap-dur,.72s) ease}.sp-demo-card.sp-demo-swap-left{animation:sp-demo-swap-left var(--sp-demo-swap-dur,.72s) ease}@keyframes sp-demo-swap-right{0%{transform:translate(0)}50%{transform:translateX(calc(var(--card-w) + 8px)) translateY(-12px)}to{transform:translate(0)}}@keyframes sp-demo-swap-left{0%{transform:translate(0)}50%{transform:translateX(calc(-1 * (var(--card-w) + 8px))) translateY(-12px)}to{transform:translate(0)}}@media (width<=520px){.sp-demo-board{--card-w:34px;gap:6px}.sp-demo-card,.sp-demo-card .sp-card-body{height:62px}.sp-demo-caption{font-size:.84rem}}.sp-help-steps{counter-reset:sp-help;flex-direction:column;gap:14px;margin:0;padding:0;list-style:none;display:flex}.sp-help-step{counter-increment:sp-help;border:2px solid var(--sp-card-line);background:#f8faff;border-radius:14px;padding:12px 14px 12px 46px;position:relative}.sp-help-step:before{content:counter(sp-help);background:var(--sp-accent);color:#fff;border-radius:999px;justify-content:center;align-items:center;width:24px;height:24px;font-size:.85rem;font-weight:900;display:inline-flex;position:absolute;top:12px;left:12px}.sp-help-text{color:#334;margin:8px 0 0;font-size:.98rem;line-height:1.55}.sp-help-text b{color:var(--sp-accent)}.sp-help-figure{flex-wrap:wrap;align-items:center;gap:5px;display:flex}.sp-help-fig-card{color:#fff;border-radius:7px;justify-content:center;align-items:center;width:30px;height:34px;font-size:.95rem;font-weight:900;display:inline-flex;position:relative}.sp-help-fig-lid{background:linear-gradient(#aeb7d6 0%,#8b95bd 100%);border:2px solid #5c6690}.sp-help-fig-open{color:#4a3200;background:linear-gradient(#ffd23f 0%,#f5b301 100%);border:2px solid #d68f00}.sp-help-fig-choice{background:linear-gradient(#c7d2ff 0%,#818cf8 100%);border:2px solid #4338ca}.sp-help-fig-sorted{color:#05391f;background:linear-gradient(#4ade80 0%,#22c55e 100%);border:2px solid #15803d}.sp-help-fig-check{color:#15803d;background:#fff;border-radius:999px;padding:1px;font-size:.7rem;line-height:1;position:absolute;top:-6px;right:-6px}.sp-help-fig-arrow{color:#99a;font-size:1rem;font-weight:900}.sp-help-fig-badge{border-radius:999px;align-items:center;padding:4px 10px;font-size:.95rem;font-weight:900;display:inline-flex}.sp-help-fig-swap{background:var(--sp-accent);color:#fff}.sp-help-fig-pass{color:#9a5b00;background:#fff7d6;border:2px solid #f5b301}.sp-modal-actions{justify-content:center;margin-top:18px;display:flex}.sp-modal-actions .btn-ultra{min-width:160px;padding:12px 24px;font-size:1.05rem}@media (width<=520px){.sp-modal{padding:20px 16px 16px}.sp-modal-title{font-size:1.15rem}.sp-help-text{font-size:.92rem}.sp-bubble-guide-number{min-width:88px;padding-inline:9px}.sp-select-guide-number{min-width:112px;padding-inline:8px}}