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