#rules-scene[data-variant=rps] .rules-header h1{font-size:clamp(18px,2.2vw,30px);line-height:1.12}
#rules-scene[data-variant=rps] .rules-board{isolation:isolate}
#rules-scene[data-variant=rps] .piece svg{width:96%;height:96%;overflow:visible;filter:drop-shadow(0 2px 2px #150f2933)}
.rps-glint{fill:none;stroke:#fff5dc;stroke-width:3;stroke-linecap:round;opacity:.5}
.rps-face{stroke:none;transform-origin:50px 50px}
.no-eyes .rps-face{display:none}
#rules-scene[data-variant=rps] .square[data-rps-last=true]:not([data-selected=true]){box-shadow:inset 0 0 0 3px #ffe38170;background-image:linear-gradient(#ffe38118,#ffe38118)}
#rules-scene[data-variant=rps] .square[data-selected=true]{background:#f7cc48!important;box-shadow:inset 0 0 0 3px #ffe98f!important}
#rules-scene[data-variant=rps] .square[data-rps-premove=true]{box-shadow:inset 0 0 0 3px #e36578!important}
#rules-scene[data-variant=rps] .square[data-rps-predator=true]{outline:2px solid #eea07e;outline-offset:-4px}
#rules-scene[data-variant=rps] .square[data-rps-prey=true]{outline:3px solid #a4edbd;outline-offset:-5px}
#rules-scene[data-variant=rps] .square[data-rps-training=true]::before{content:'✦';position:absolute;right:8%;top:4%;font-size:clamp(16px,2vw,25px);color:#ffe39a;text-shadow:0 1px 5px #351c3c;pointer-events:none}
.rps-cycle{display:flex;align-items:center;justify-content:center;gap:2px;max-height:54px;margin:0}
.rps-cycle-token{display:block;flex:1;max-width:48px;min-width:28px;height:48px}
.rps-cycle-token svg{width:100%;height:100%}.rps-cycle-arrow{color:#e3ba78;font-size:20px}
.rps-king-rule,.rps-premove-note,.rps-selection-note{font-size:12px;line-height:1.3;margin:3px 0 7px;text-align:center;color:#e8d9f0}
.rps-premove-note{color:#f4b4c0}.rps-captured{display:grid;gap:3px;margin-top:5px}
.rps-captured-row{display:flex;justify-content:center;gap:5px;min-height:32px}
.rps-captured-piece{display:flex;align-items:center;gap:2px}.rps-captured-piece svg{height:30px;width:30px}.rps-captured-piece small{font-size:12px;font-variant-numeric:tabular-nums}
.rps-lesson{border-top:1px solid #b998c63a;margin-top:7px;padding-top:9px;font-size:13px;line-height:1.35}
.rps-lesson strong{display:block;color:#ffedbd}.rps-lesson p{margin:6px 0 10px}.rps-training-actions,.rps-setup-links{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.rps-setup-links{margin-top:9px;grid-template-columns:repeat(3,1fr)}.rps-setup-links button{font-size:12px;min-height:38px;padding:7px 9px}
.rps-training-actions button{font-size:12px;min-height:34px;padding:6px 8px}
.rps-capture-effects{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden;border-radius:inherit}
.rps-capture-pop{position:absolute;width:12.5%;height:12.5%;transform:translate(-50%,-50%);animation:rps-pop .5s ease-out both}.rps-capture-pop svg{width:100%;height:100%}
.rps-capture-spark{position:absolute;top:0;left:60%;font-size:24px;color:#ffe79d}
@keyframes rps-pop{0%{opacity:.85;transform:translate(-50%,-50%) scale(.9)}40%{opacity:.8;transform:translate(-40%,-70%) scale(1.07) rotate(9deg)}100%{opacity:0;transform:translate(-30%,-115%) scale(.45) rotate(20deg)}}
.rps-leaders{width:100%;border-collapse:collapse;font-size:14px}.rps-leaders td{padding:8px 6px;border-bottom:1px solid #b998c626}.rps-leaders td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.rules-scene[data-rps-training=true] .rules-clock{visibility:hidden}
@media(max-width:600px){.rps-cycle{max-height:37px}.rps-cycle-token{max-width:34px;height:34px}.rps-cycle-arrow{font-size:16px}.rps-king-rule{font-size:11px;margin:0 0 3px}.rps-lesson{font-size:12px;padding-top:5px;margin-top:3px}.rps-lesson p{margin:4px 0 6px}.rps-setup-links{gap:5px}.rps-setup-links button{padding:6px;font-size:11px}.rps-captured-row{min-height:24px}.rps-captured-piece svg{width:22px;height:22px}}
@media(prefers-reduced-motion:reduce){.rps-capture-pop{animation:none;display:none}}
.rules-reduced-motion .rps-capture-pop{animation:none;display:none}
@media(max-height:740px){
 #rules-scene .rules-dialog:has([data-rps-layout]){padding:14px}
 #rules-scene .rules-dialog:has([data-rps-layout]) header{margin-bottom:8px}
 #rules-scene .rules-dialog:has([data-rps-layout]) header h2{font-size:20px!important;line-height:1.2}
 #rules-scene .rules-dialog:has([data-rps-layout]) .rules-setup{gap:8px}
 #rules-scene .rules-dialog:has([data-rps-layout]) p{margin:3px 0;font-size:12px;line-height:1.35}
 #rules-scene .rules-dialog:has([data-rps-layout]) .rules-setup-options{gap:7px}
 #rules-scene .rules-dialog:has([data-rps-layout]) label{font-size:12px;gap:4px}
 #rules-scene .rules-dialog:has([data-rps-layout]) select{padding:7px;min-height:36px}
 #rules-scene .rules-dialog:has([data-rps-layout]) .rules-setup-actions{gap:6px}
 #rules-scene .rules-dialog:has([data-rps-layout]) button:not(.arcade-profile-close){font-size:12px!important;padding:7px!important;min-height:44px!important}
 #rules-scene .rules-dialog:has([data-rps-layout]) .rps-setup-links{margin-top:0;gap:5px}
}
@media(max-height:500px) and (min-width:600px){
 #rules-scene .rules-dialog:has([data-rps-layout]){width:min(760px,calc(100vw - 28px))}
 #rules-scene .rules-dialog:has([data-rps-layout]) .rules-setup-options{grid-template-columns:repeat(5,minmax(0,1fr))}
 #rules-scene .rules-dialog:has([data-rps-layout]) .rules-setup-actions{grid-template-columns:repeat(4,minmax(0,1fr))}
 #rules-scene .rules-dialog:has([data-rps-layout]) .rules-setup-actions .primary{grid-column:auto}
}