.rps{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;padding:20px}.rps .container{background:white;border-radius:20px;padding:40px;max-width:900px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3)}.rps .title{text-align:center;color:#667eea;margin-bottom:30px;font-size:2rem}.pick-area{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px;margin:10px 0 22px}.pick-button{padding:16px 12px;border-radius:16px;border:2px solid #dee2e6;background:white;cursor:pointer;transition:all .2s ease}.pick-button:disabled{opacity:.7;cursor:not-allowed;transform:none}.pick-button:hover{transform:translateY(-2px);border-color:#667eea;box-shadow:0 10px 22px rgba(0,0,0,.12)}.pick-emoji{font-size:2.2rem;line-height:1}.pick-label{margin-top:6px;font-weight:900;color:#495057}.status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;grid-gap:12px;gap:12px;margin:10px 0 16px}.status-card{background:#f8f9fa;border:2px solid #dee2e6;border-radius:16px;padding:14px}.status-title{color:#667eea;font-weight:900;margin-bottom:6px}.status-value{display:flex;gap:10px;align-items:center;justify-content:center;min-height:44px}.status-emoji{font-size:1.8rem}.status-label{font-size:1.1rem;font-weight:900;color:#495057}.status-placeholder{color:rgba(73,80,87,.65);font-weight:700}.status-vs{font-weight:900;color:#764ba2}.result{width:100%;background:#f8f9fa;border:2px solid #dee2e6;border-radius:16px;padding:16px;display:flex;justify-content:center;align-items:center;min-height:56px;position:relative;overflow:hidden}.result--shown{border-color:#667eea;box-shadow:0 10px 28px rgba(0,0,0,.14)}.result--shown.result--win{border-color:#28a745}.result--shown.result--draw{border-color:#764ba2}.result--shown.result--lose{border-color:#ff6b6b}.result-text{font-size:1.25rem;font-weight:900;color:#495057;animation:rps-pop .42s cubic-bezier(.2,.9,.2,1) 1}.result--shown.result--win .result-text{color:#28a745;text-shadow:0 10px 22px rgba(40,167,69,.25);animation:rps-pop .42s cubic-bezier(.2,.9,.2,1) 1,rps-win-pulse .9s ease-in-out .42s 2}.result--shown.result--win:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 35%,rgba(40,167,69,.22),transparent 55%),radial-gradient(circle at 80% 30%,rgba(255,215,0,.18),transparent 55%),radial-gradient(circle at 55% 85%,rgba(40,167,69,.16),transparent 60%),conic-gradient(from 0deg,rgba(255,255,255,0) 0 40deg,rgba(255,255,255,.35) 40deg 52deg,rgba(255,255,255,0) 52deg 1turn);opacity:0;transform:scale(.98);animation:rps-win-glow .78s ease-out 1;pointer-events:none}.result--shown.result--win:after{content:"";position:absolute;inset:-10px;background:radial-gradient(circle at 15% 30%,rgba(255,255,255,.98) 0 5px,transparent 6px),radial-gradient(circle at 35% 15%,rgba(255,215,0,.75) 0 4px,transparent 5px),radial-gradient(circle at 70% 25%,rgba(255,255,255,.92) 0 4px,transparent 5px),radial-gradient(circle at 85% 45%,rgba(40,167,69,.5) 0 5px,transparent 6px),radial-gradient(circle at 25% 70%,rgba(255,255,255,.9) 0 4px,transparent 5px),radial-gradient(circle at 55% 85%,rgba(255,215,0,.6) 0 5px,transparent 6px),radial-gradient(circle at 80% 80%,rgba(255,255,255,.88) 0 4px,transparent 5px),radial-gradient(circle at 10% 85%,rgba(40,167,69,.45) 0 4px,transparent 5px);filter:drop-shadow(0 10px 18px rgba(40,167,69,.22));opacity:0;transform:scale(.88);animation:rps-win-burst .78s ease-out 1;pointer-events:none}.result--shown.result--draw .result-text{color:#764ba2;text-shadow:0 10px 22px rgba(118,75,162,.22);animation:rps-pop .42s cubic-bezier(.2,.9,.2,1) 1}.result--shown.result--draw:after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;border-radius:999px;border:3px solid rgba(118,75,162,.35);transform:translate(-50%,-50%) scale(.2);opacity:0;animation:rps-draw-ripple .7s ease-out 1;pointer-events:none}.result--shown.result--lose .result-text{color:#ff6b6b;text-shadow:0 10px 22px rgba(255,107,107,.22);animation:rps-pop .42s cubic-bezier(.2,.9,.2,1) 1,rps-lose-shake .38s ease-in-out 1}.result--pending{border-color:#764ba2}.result--pending:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.7) 35%,transparent 70%);transform:translateX(-120%);animation:rps-wait .9s ease-in-out infinite;pointer-events:none}.result--pending .result-text{color:#764ba2;animation:rps-breathe .7s ease-in-out infinite}@keyframes rps-pop{0%{transform:translateY(2px) scale(.94);opacity:.2}70%{transform:translateY(0) scale(1.06);opacity:1}to{transform:translateY(0) scale(1)}}@keyframes rps-win-burst{0%{opacity:0;transform:scale(.88)}18%{opacity:1}to{opacity:0;transform:scale(1.22)}}@keyframes rps-win-glow{0%{opacity:0;transform:scale(.98)}20%{opacity:1}to{opacity:0;transform:scale(1.04)}}@keyframes rps-win-pulse{0%{transform:scale(1)}50%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes rps-draw-ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}20%{opacity:1}to{opacity:0;transform:translate(-50%,-50%) scale(10)}}@keyframes rps-lose-shake{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}to{transform:translateX(0)}}@keyframes rps-wait{0%{transform:translateX(-120%);opacity:.3}50%{opacity:.9}to{transform:translateX(120%);opacity:.3}}@keyframes rps-breathe{0%{transform:scale(1);opacity:.75}50%{transform:scale(1.03);opacity:1}to{transform:scale(1);opacity:.75}}.hint{margin:12px 0 0;text-align:center;color:rgba(73,80,87,.7);font-weight:700}@media (max-width:768px){.rps .container{padding:24px 16px}.rps .title{font-size:1.8rem}.pick-area{gap:10px}.pick-button{padding:14px 10px}.status{grid-template-columns:1fr;gap:10px}.status-vs{text-align:center}}