/* Rosary Spin · QuizQuest */
:root{--ink:#1e1b4b;--red:#ef2b3c;--paper:#fffdf6}
html,body{margin:0;background:#2a1a0c;font-family:Nunito,system-ui,sans-serif;color:var(--ink)}
body.rs-playing{overflow:hidden}
#rs [hidden]{display:none!important}
#rs button{font-family:inherit;cursor:pointer}
/* setup */
.rs-setup{background:radial-gradient(circle at 50% 0,#7c2d12 0,#2a1a0c 60%);padding:22px 16px 40px;color:#fff;min-height:calc(100vh - 62px);box-sizing:border-box}
.rs-hero{text-align:center;margin-bottom:14px}
.rs-logo{display:inline-grid;place-items:center;width:84px;height:84px;border-radius:50%;background:conic-gradient(#ef4444 0 25%,#2563eb 0 50%,#16a34a 0 75%,#d97706 0);box-shadow:0 0 0 6px #fff3,0 10px 30px #0008;animation:rsspin 6s linear infinite}
.rs-logo span{font-size:44px;animation:rsspin 6s linear infinite reverse}
@keyframes rsspin{to{transform:rotate(360deg)}}
.rs-hero h1{font:700 clamp(38px,8vw,64px)/1 Fredoka,sans-serif;margin:10px 0 4px;color:#fde68a;text-shadow:0 4px 0 #7c2d12}
.rs-hero h1 span{color:#fff}
.rs-sub{font:600 19px Fredoka,sans-serif;color:#fed7aa;margin:0}
.rs-modes{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:0 auto 14px;max-width:760px}
.rs-modes button{flex:1;min-width:200px;border:3px solid #fdba74;background:#fff7ed;border-radius:16px;padding:10px 16px;font:700 20px Fredoka,sans-serif;color:var(--ink);transition:transform .15s}
.rs-modes button small{display:block;font:800 13px Nunito,sans-serif;color:#9a3412}
.rs-modes button.on{background:#ea580c;border-color:#ea580c;color:#fff}.rs-modes button.on small{color:#ffedd5}
.rs-modes button:hover{transform:translateY(-3px) rotate(-.6deg)}
.rs-box{background:var(--paper);color:var(--ink);border-radius:22px;padding:16px 20px;box-shadow:0 10px 0 #0004,0 20px 40px #0005;max-width:760px;margin:0 auto 14px}
.rs-box h2{font:700 22px Fredoka,sans-serif;color:#9a3412;margin:4px 0 8px}
.rs-how{margin:0;padding-left:22px;font-weight:700;line-height:1.5}
.rs-n{display:flex;gap:8px;margin-bottom:10px}
.rs-n button{border:2px solid #fdba74;background:#fff7ed;border-radius:12px;padding:8px 14px;font:700 16px Fredoka,sans-serif;color:var(--ink)}
.rs-n button.on{background:#ea580c;border-color:#ea580c;color:#fff}
.rs-pls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
@media (max-width:560px){.rs-pls{grid-template-columns:1fr}}
.rs-pl{display:flex;gap:8px;align-items:center;border:3px solid var(--pc);border-radius:14px;padding:6px 10px;background:#fff}
.rs-face{width:46px;height:46px;border-radius:50%;border:0;background:var(--pc);font-size:26px;transition:transform .2s}
.rs-face:hover{transform:scale(1.12) rotate(-10deg)}
.rs-pl input{flex:1;min-width:0;font:700 18px Nunito,sans-serif;border:0;outline:none;color:var(--ink)}
.rs-opts{display:flex;gap:16px;flex-wrap:wrap;font-weight:800;align-items:center}
.rs-opts select{font:700 16px Nunito,sans-serif;border-radius:8px;padding:3px 6px}
.rs-mast{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
@media (max-width:560px){.rs-mast{grid-template-columns:1fr 1fr}}
.rs-mast div{border:3px solid var(--wc);border-radius:12px;padding:6px 8px;text-align:center;background:#fff}
.rs-mast b{display:block;font:700 14px Fredoka,sans-serif;color:var(--wc)}
.rs-mast span{color:#d97706;font-size:18px;letter-spacing:2px}
.rs-mast.sm{margin-top:12px}.rs-mast.sm span{font-size:15px}
.rs-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.rs-btn{border:0;border-radius:14px;padding:10px 18px;font:700 17px Fredoka,sans-serif;background:#e0e7ff;color:var(--ink);box-shadow:0 4px 0 #a5b4fc;transition:transform .12s}
.rs-btn:hover{transform:translateY(-2px)}.rs-btn:active{transform:translateY(2px)}
.rs-btn.red{background:var(--red);color:#fff;box-shadow:0 4px 0 #9f1239}
.rs-btn.big{font-size:21px;padding:13px 24px}
.rs-btn.mic{background:#7c3aed;color:#fff;box-shadow:0 4px 0 #4c1d95}
.rs-btn.mic.live{background:#dc2626;animation:rspulse 1s infinite}
.rs-btn:disabled{opacity:.5}
@keyframes rspulse{0%,100%{box-shadow:0 0 0 0 #dc262688}50%{box-shadow:0 0 0 10px #dc262600}}
.rs-small{font-size:14px;font-weight:700;color:#64748b}
/* the table */
.rs-stage{position:fixed;left:0;right:0;bottom:0;top:62px;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;z-index:5}
.rs-stage canvas{display:block;width:100%;height:100%}
.rs-top{position:absolute;right:10px;top:10px;display:flex;gap:6px;align-items:center;z-index:3}
.rs-round{background:#0f172acc;color:#fde68a;border-radius:99px;padding:6px 14px;font:700 15px Fredoka,sans-serif}
.rs-tb{width:44px;height:44px;border-radius:12px;border:2px solid #ffffff44;background:#0f172acc;color:#fff;font-size:20px;transition:transform .15s}
.rs-tb:hover{transform:scale(1.1) rotate(-5deg)}
.rs-pull{position:absolute;left:14px;bottom:14px;border:0;border-radius:99px;padding:12px 20px;font:700 20px Fredoka,sans-serif;background:var(--red);color:#fff;box-shadow:0 5px 0 #9f1239;z-index:3;transition:transform .15s}
.rs-pull:hover:not(:disabled){transform:translateY(-3px) rotate(-3deg)}
.rs-pull:disabled{opacity:.4}
.rs-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--wc);color:#fff;border-radius:22px;padding:18px 26px;min-width:260px;text-align:center;box-shadow:0 0 0 6px #fff,0 20px 60px #000;z-index:4}
.rs-card small{display:block;font:800 15px Nunito,sans-serif;opacity:.9}
.rs-card b{display:block;font:700 30px Fredoka,sans-serif;margin:4px 0}
.rs-card em{font-style:normal;font-weight:800;opacity:.85}
.rs-card.flip{animation:rsflip .12s}
.rs-card.done{animation:rspop .5s}
@keyframes rsflip{from{transform:translate(-50%,-50%) rotateX(90deg)}to{transform:translate(-50%,-50%)}}
@keyframes rspop{0%{transform:translate(-50%,-50%) scale(.7)}60%{transform:translate(-50%,-50%) scale(1.12)}100%{transform:translate(-50%,-50%) scale(1)}}
.rs-ov{position:absolute;inset:0;background:#0f172acc;display:flex;align-items:center;justify-content:center;padding:12px;z-index:6;overflow:auto}
.rs-ans{background:var(--paper);border-radius:24px;padding:16px 20px;max-width:620px;width:100%;box-shadow:0 0 0 5px var(--wc,#f5c542),0 20px 60px #000;max-height:100%;overflow:auto;box-sizing:border-box}
.rs-who{display:inline-flex;gap:8px;align-items:center;background:var(--pc);color:#fff;border-radius:99px;padding:4px 14px 4px 6px;font:700 17px Fredoka,sans-serif}
.rs-who span{font-size:24px}
.rs-ans h2{font:700 24px Fredoka,sans-serif;margin:8px 0}
.rs-ans h2 b{color:var(--wc)}
.rs-clock{position:relative;height:22px;border-radius:99px;background:#e2e8f0;overflow:hidden;margin:6px 0 10px}
.rs-clock i{position:absolute;left:0;top:0;bottom:0;width:100%;background:#16a34a;transition:width .25s linear}
.rs-clock i.hot{background:#dc2626}
.rs-clock b{position:absolute;inset:0;display:grid;place-items:center;font:700 14px Fredoka,sans-serif}
.rs-slots{margin:0;padding-left:26px;display:grid;gap:6px;font:700 18px Fredoka,sans-serif}
.rs-slots input{width:100%;box-sizing:border-box;font:700 18px Nunito,sans-serif;border:2px solid #cbd5e1;border-radius:10px;padding:7px 10px}
.rs-slots input:focus{outline:none;border-color:var(--wc)}
.rs-slots input.heard{border-color:#16a34a;background:#f0fdf4}
.rs-pts{font:700 40px Fredoka,sans-serif;color:#16a34a;margin:6px 0}
.rs-check{padding-left:4px;list-style:none;margin:0;display:grid;gap:4px;font-weight:700;font-size:17px}
.rs-check li.ok{color:#15803d}.rs-check li.no{color:#b91c1c}
.rs-check small{display:block;color:#475569;font-weight:700;font-size:14px;margin-left:24px}
.rs-end{text-align:center;--wc:#f5c542}
.rs-big{font-size:60px}
.rs-rank{list-style:none;padding:0;margin:10px auto;max-width:360px;display:grid;gap:6px}
.rs-rank li{display:flex;align-items:center;gap:10px;border:3px solid var(--pc);border-radius:14px;padding:8px 12px;font:700 19px Fredoka,sans-serif;background:#fff}
.rs-rank li span{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--pc);color:#fff;font-size:15px}
.rs-rank li b{margin-left:auto;color:#d97706;font-size:22px}
@media (max-height:520px){.qqg-in{min-height:44px!important;padding-top:4px!important;padding-bottom:4px!important}.qqg-word{display:none}.qqg-title small{display:none}.rs-stage{top:52px}.rs-slots input{padding:4px 8px;font-size:16px}.rs-ans h2{font-size:19px}}
/* online play */
.rs-msg{max-width:760px;margin:0 auto 12px;background:#dcfce7;color:#14532d;border-radius:14px;padding:10px 16px;font-weight:800;text-align:center}
.rs-msg.bad{background:#fee2e2;color:#991b1b}
.rs-where{margin-top:-4px}
.rs-where button{font-size:18px;border-color:#93c5fd;background:#eff6ff}.rs-where button small{color:#1e40af}
.rs-where button.on{background:#2563eb;border-color:#2563eb}.rs-where button.on small{color:#dbeafe}
.rs-pls.one{grid-template-columns:1fr;max-width:380px}
.rs-joinrow input{width:120px;font:700 24px Fredoka,sans-serif;letter-spacing:.2em;text-transform:uppercase;text-align:center;border:3px solid #fdba74;border-radius:12px;padding:6px 8px;color:var(--ink)}
.rs-joinbox{border:4px solid #fbbf24}.rs-joinbox h2 b{color:#dc2626;letter-spacing:.12em}
.rs-lobby{text-align:center}
.rs-code{font:700 64px/1.1 Fredoka,sans-serif;letter-spacing:.18em;color:#dc2626;margin:4px 0 10px;animation:rspop .5s}
.rs-lpl{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rs-lpl div{display:flex;align-items:center;gap:8px;border:3px solid var(--pc);border-radius:99px;padding:4px 14px 4px 4px;background:#fff;animation:rspop .4s}
.rs-lpl span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--pc);font-size:22px;transition:transform .2s}
.rs-lpl div:hover span{transform:rotate(-12deg) scale(1.1)}
.rs-lpl b{font:700 17px Fredoka,sans-serif}
.rs-watch{text-align:center}
.rs-dots{display:flex;gap:8px;justify-content:center;margin:12px 0}
.rs-dots i{width:14px;height:14px;border-radius:50%;background:var(--wc,#f59e0b);animation:rsdot 1s infinite}
.rs-dots i:nth-child(2){animation-delay:.15s}.rs-dots i:nth-child(3){animation-delay:.3s}
@keyframes rsdot{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-8px);opacity:1}}
.rs-rank small{font-size:13px;color:#64748b}
.rs-toast{position:fixed;left:50%;top:76px;transform:translateX(-50%);background:#0f172aee;color:#fff;font-weight:800;padding:10px 16px;border-radius:12px;z-index:9600;max-width:90vw;text-align:center}
.rs-pull:disabled{font-size:17px}
/* Quizie the announcer */
.rs-quizie{position:absolute;left:12px;bottom:78px;z-index:5;display:flex;align-items:flex-end;gap:6px;pointer-events:none;animation:rsqin .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes rsqin{from{transform:translateY(40px) scale(.6);opacity:0}}
.rs-quizie svg{width:76px;height:76px;flex:none;filter:drop-shadow(0 4px 6px #0007)}
.rs-quizie .jaw{transform-origin:50px 66px}
.rs-quizie.talk .jaw{animation:rsjaw .16s ease-in-out infinite alternate}
.rs-quizie.talk svg{animation:rsbob .32s ease-in-out infinite alternate}
.rs-quizie .ear{transform-box:fill-box;transform-origin:50% 10%}
.rs-quizie.talk .ear.l{animation:rsear .4s ease-in-out infinite alternate}.rs-quizie.talk .ear.r{animation:rsear .4s ease-in-out infinite alternate-reverse}
@keyframes rsjaw{from{transform:scaleY(.35)}to{transform:scaleY(1.15)}}
@keyframes rsbob{from{transform:rotate(-4deg)}to{transform:rotate(4deg) translateY(-3px)}}
@keyframes rsear{from{transform:rotate(-8deg)}to{transform:rotate(10deg)}}
.rs-bub{position:relative;background:#fff;color:var(--ink);font:700 17px Fredoka,sans-serif;border-radius:16px;padding:8px 14px;max-width:min(60vw,320px);margin-bottom:44px;box-shadow:0 4px 0 #0003}
.rs-bub::before{content:"";position:absolute;left:-9px;bottom:10px;border:9px solid transparent;border-right-color:#fff;border-left:0}
@media (max-height:520px){.rs-quizie{bottom:64px}.rs-quizie svg{width:56px;height:56px}.rs-bub{font-size:14px;margin-bottom:30px}}
/* SPIN button (no more string) */
.rs-pull{left:50%;bottom:16px;transform:translateX(-50%);padding:14px 34px;font-size:26px;letter-spacing:.02em;white-space:nowrap;max-width:calc(100% - 28px);overflow:hidden;text-overflow:ellipsis}
.rs-pull:hover:not(:disabled){transform:translateX(-50%) translateY(-3px) scale(1.04)}
.rs-pull:active:not(:disabled){transform:translateX(-50%) translateY(3px);box-shadow:0 2px 0 #9f1239}
.rs-pull.go{animation:rsspin-go 1.2s ease-in-out infinite}
@keyframes rsspin-go{0%,100%{transform:translateX(-50%) scale(1);box-shadow:0 5px 0 #9f1239,0 0 0 0 #ef444499}50%{transform:translateX(-50%) scale(1.07);box-shadow:0 5px 0 #9f1239,0 0 0 14px #ef444400}}
.rs-pull.go:hover{animation:none;transform:translateX(-50%) translateY(-3px) scale(1.06) rotate(-2deg)}
@media (max-width:520px){.rs-pull{font-size:21px;padding:12px 24px}}
/* in-order answer screen */
.rs-ans{position:relative}
.rs-xs{display:flex;gap:8px;justify-content:center;margin:2px 0 8px}
.rs-xs i{font-style:normal;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:3px dashed #cbd5e1;color:#cbd5e1;font-weight:900;font-size:18px;transition:all .25s}
.rs-xs i.on{background:#dc2626;border:3px solid #991b1b;color:#fff;animation:rsxin .4s cubic-bezier(.34,1.56,.64,1)}
.rs-steps{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.rs-steps li{display:flex;align-items:center;gap:10px;border:3px solid #e2e8f0;border-radius:14px;padding:6px 10px;background:#fff;min-height:42px;box-sizing:border-box;transition:all .25s}
.rs-steps li span{flex:none;display:grid;place-items:center;width:44px;height:28px;border-radius:99px;background:#e2e8f0;font:700 14px Fredoka,sans-serif;color:#475569}
.rs-steps li b{font:700 17px Fredoka,sans-serif;color:var(--ink)}
.rs-steps li.ok{border-color:#16a34a;background:#f0fdf4}
.rs-steps li.ok span{background:#16a34a;color:#fff}
.rs-steps li.ok b::before{content:'✓ ';color:#16a34a}
.rs-steps li.now{border-color:var(--wc,#f59e0b);box-shadow:0 0 0 3px #fde68a}
.rs-steps li.now span{background:var(--wc,#f59e0b);color:#fff;animation:rsdot 1s infinite}
.rs-steps li.now b{color:#94a3b8}
.rs-enter{display:flex;gap:8px;margin-bottom:8px}
.rs-enter input{flex:1;min-width:0;font:600 18px Nunito,sans-serif;border:3px solid var(--wc,#f59e0b);border-radius:12px;padding:10px 12px;color:var(--ink)}
.rs-enter input:focus{outline:none;box-shadow:0 0 0 4px #fde68a}
.rs-enter.shake{animation:rsshake .4s}
@keyframes rsshake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.rs-bigx{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff8;border-radius:24px;z-index:3;pointer-events:none}
.rs-bigx b{font:900 190px/1 Fredoka,sans-serif;color:#dc2626;text-shadow:0 8px 0 #7f1d1d,0 0 40px #fff}
.rs-bigx span{margin-top:10px;background:#dc2626;color:#fff;font:700 21px Fredoka,sans-serif;padding:8px 18px;border-radius:99px;max-width:90%;text-align:center}
.rs-bigx.go b{animation:rsbigx .55s cubic-bezier(.34,1.56,.64,1)}
.rs-bigx.go span{animation:rsxin .45s .15s cubic-bezier(.34,1.56,.64,1) both}
@keyframes rsbigx{0%{transform:scale(3) rotate(-30deg);opacity:0}60%{transform:scale(.9) rotate(6deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@media (max-width:520px){.rs-bigx b{font-size:140px}}
.rs-bigx[hidden]{display:none}
@keyframes rsxin{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
/* study: the right order on the score screen */
.rs-order{font:700 17px Fredoka,sans-serif;color:var(--wc,#f59e0b);margin:6px 0 4px}
.rs-check em{font-style:normal;display:inline-block;min-width:34px;font:700 13px Fredoka,sans-serif;background:#e2e8f0;color:#475569;border-radius:99px;padding:1px 7px;margin-right:4px;text-align:center}
.rs-check li.ok em{background:#dcfce7;color:#15803d}