.sp-top{flex-shrink:0;align-items:center;gap:12px;display:flex}.sp-scores{gap:8px;display:flex}.sp-score{border-radius:var(--r-md);font:800 1.3rem "Nunito", var(--font-ui);font-variant-numeric:tabular-nums;align-items:center;gap:8px;padding:6px 16px;display:inline-flex}.sp-score:before{content:"";width:18px;height:18px;mask:var(--ico) center / contain no-repeat;-webkit-mask:var(--ico) center / contain no-repeat;background:currentColor}.sp-score--ok{background:var(--success-bg);color:var(--success);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6'/%3E%3C/svg%3E")}.sp-score--ko{background:var(--unread-bg);color:var(--unread);--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E")}.sp-progress{flex:1;align-items:center;gap:14px;min-width:0;display:flex}.sp-progress-txt{font:700 1.05rem var(--font-ui);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}.sp-bar{background:var(--surface-alt);border-radius:99px;flex:1;height:8px;overflow:hidden}.sp-bar[hidden]{display:none}.sp-bar-fill{background:var(--accent);transform-origin:0;border-radius:99px;width:100%;height:100%;transition:transform .5s cubic-bezier(.16,1,.3,1);transform:scaleX(0)}.sp-ghost{border:1px solid var(--border);border-radius:var(--r-md);color:var(--muted);font:600 .88rem var(--font-ui);cursor:pointer;white-space:nowrap;background:0 0;align-items:center;gap:6px;padding:9px 14px;transition:border-color .15s,color .15s,background .15s;display:inline-flex}.sp-ghost svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:16px;height:16px}.sp-ghost:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}.sp-ghost--stop:hover:not(:disabled){border-color:var(--unread);color:var(--unread);background:var(--unread-bg)}.sp-ghost:disabled{opacity:.35;cursor:not-allowed}.sp-consigne{text-align:center;flex-direction:column;flex-shrink:0;gap:2px;margin:0;display:flex}.sp-consigne-main{font-family:var(--font-display);color:var(--accent);letter-spacing:-.015em;font-size:clamp(2.2rem,5.2vh,3.6rem);font-style:italic;font-weight:600;line-height:1}.sp-consigne-sub{font:600 clamp(1rem, 2.3vh, 1.35rem) var(--font-ui);color:var(--muted)}.sp-actions{flex-shrink:0;justify-content:center;gap:12px;min-height:76px;display:flex}.sp-act{border-radius:var(--r-md);max-width:520px;min-height:76px;font:800 clamp(1.1rem, 2.4vh, 1.45rem) var(--font-ui);cursor:pointer;border:none;flex:1 1 0;justify-content:center;align-items:center;gap:12px;transition:filter .15s,transform .12s;display:inline-flex}.sp-act svg{fill:none;stroke:currentColor;stroke-width:2.6px;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px}.sp-act:hover{filter:brightness(1.06);transform:translateY(-1px)}.sp-act:active{transform:translateY(1px)}.sp-act--reveal{background:var(--text);color:#fff}.sp-act--ok{background:var(--success);color:#fff}.sp-act--ko{background:var(--unread);color:#fff}.sp-act--next{background:var(--text);color:#fff}.sp-choice{border:2px solid var(--border);border-radius:var(--r-lg);background:var(--surface);max-width:300px;min-height:clamp(96px,15vh,150px);color:var(--text);font:900 clamp(3rem, 9vh, 5.5rem)/1 "Nunito", var(--font-ui);cursor:pointer;box-shadow:var(--shadow-sm);flex:1 1 0;transition:border-color .15s,transform .12s,background .15s;position:relative}.sp-choice:hover:not(:disabled){border-color:var(--accent);transform:translateY(-2px)}.sp-choice-key{font:500 .72rem var(--font-mono);color:var(--subtle);position:absolute;top:8px;left:10px}.sp-choice.is-good{background:var(--success-bg);border-color:var(--success);color:var(--success)}.sp-choice.is-bad{background:var(--unread-bg);border-color:var(--unread);color:var(--unread);animation:.4s ease-out sp-shake}.sp-choice:disabled{cursor:default}.sp-choice:disabled:not(.is-good):not(.is-bad){opacity:.35}.sp-actions.has-choices{min-height:clamp(96px,15vh,150px)}@keyframes sp-shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}45%{transform:translate(8px)}70%{transform:translate(-5px)}}.sp-kbd{text-align:center;color:var(--muted);flex-shrink:0;margin:0;font-size:.78rem}.sp-kbd kbd{font-family:var(--font-mono);background:var(--surface-alt);border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:.74rem}@media (hover:none) and (pointer:coarse){.sp-kbd{display:none}}#sp-end{justify-content:center;align-items:center;gap:18px;padding:32px 28px}.sp-end{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:620px;box-shadow:var(--shadow-md);text-align:center;flex-direction:column;align-items:center;gap:26px;padding:40px 44px;display:flex}.sp-end-title{font-family:var(--font-display);color:var(--text);margin:0;font-size:clamp(2.2rem,5vw,3.2rem);font-style:italic;font-weight:600;line-height:1}.sp-end-scores{align-items:center;display:flex}.sp-end-item{flex-direction:column;align-items:center;gap:6px;display:flex}.sp-end-div{background:var(--border);width:1px;height:64px;margin:0 36px}.sp-end-num{font:900 clamp(3.5rem, 10vw, 5rem)/1 "Nunito", var(--font-ui);font-variant-numeric:tabular-nums}.sp-end-num--ok{color:var(--success)}.sp-end-num--ko{color:var(--unread)}.sp-end-lbl{font:600 .9rem var(--font-ui);color:var(--muted)}.sp-end-revoir{border-top:1px solid var(--border-light);flex-direction:column;gap:12px;width:100%;padding-top:20px;display:flex}.sp-end-revoir[hidden]{display:none}.sp-end-revoir-h{font:700 .95rem var(--font-ui);color:var(--text);margin:0}.sp-end-list{flex-wrap:wrap;justify-content:center;gap:8px;margin:0;padding:0;list-style:none;display:flex}.sp-end-list li{font:600 .95rem var(--font-ui);color:var(--text);background:var(--unread-bg);border-radius:var(--r-pill);padding:6px 14px}.sp-end-list b{font-family:"Nunito", var(--font-ui);font-weight:900}.sp-end-actions{flex-direction:column;gap:10px;width:100%;max-width:620px;display:flex}.sp-restart{border-radius:var(--r-lg);background:var(--text);color:#fff;font:700 1.05rem var(--font-ui);cursor:pointer;border:none;padding:18px}.sp-restart:hover{filter:brightness(1.2)}.sp-back{border:1px solid var(--border);border-radius:var(--r-lg);color:var(--muted);font:600 .95rem var(--font-ui);cursor:pointer;background:0 0;padding:14px}.sp-back:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-tint)}.sp-modal{z-index:300;background:#0e2a2d8c;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.sp-modal.open{display:flex}.sp-modal-box{background:var(--surface);border-radius:var(--r-lg);width:90%;max-width:380px;box-shadow:var(--shadow-lg);text-align:center;padding:30px 28px}.sp-modal-box h3{font:700 1.2rem var(--font-ui);color:var(--text);margin:0 0 8px}.sp-modal-box p{color:var(--muted);margin:0 0 22px;font-size:.92rem}.sp-modal-actions{gap:10px;display:flex}.sp-modal-actions button{border-radius:var(--r-md);font:700 .95rem var(--font-ui);cursor:pointer;flex:1;padding:13px}.sp-m-cancel{background:var(--surface);color:var(--text);border:1.5px solid var(--border)}.sp-m-cancel:hover{background:var(--surface-alt)}.sp-m-confirm{background:var(--accent);color:#fff;border:none}.sp-m-confirm:hover{background:var(--accent-hover)}#sp-settings button,#sp-game button,#sp-end button,.sp-modal button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}:where(#sp-settings,#sp-game,#sp-end,.sp-modal) :where(button,input):focus-visible{outline:3px solid var(--accent);outline-offset:2px}::selection{background:var(--accent-light);color:var(--text)}@media (prefers-reduced-motion:reduce){.sp-choice.is-bad{animation:none!important}.sp-bar-fill{transition:none}.sp-act:hover,.sp-choice:hover:not(:disabled){transform:none}}@media (width<=520px){.sp-top{flex-wrap:wrap}.sp-progress{flex-basis:100%;order:-1}.sp-ghost{padding:10px}.sp-ghost-lbl{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.sp-scores{flex:1}.sp-actions{flex-wrap:wrap}.sp-choice{min-height:88px}.sp-end{padding:28px 20px}}
