@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";@import "https://fonts.googleapis.com/css2?family=Asap:wght@400;500;700&display=swap";:root{--background:#1a1a2e;--foreground:#fff;--primary:#3b82f6;--primary-hover:#2563eb;--muted:#4b5563;--muted-foreground:#9ca3af;--card:#16213e;--card-border:#30475e;--green:#4ade80;--red:#f87171;--gray:#9ca3af}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--background);color:var(--foreground);flex-direction:column;min-height:100vh;font-family:Inter,sans-serif;display:flex}#root{flex-direction:column;min-height:100vh;display:flex}header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;border-bottom:1px solid var(--card-border);z-index:10;background:#16213ecc;padding:1.5rem;position:sticky;top:0}header h1{color:var(--foreground);letter-spacing:-.025em;background:linear-gradient(90deg,#60a5fa,#3b82f6);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-family:Asap,sans-serif;font-size:2rem;font-weight:700}main{flex-direction:column;flex:1;align-items:center;padding:2rem 1rem;display:flex}.score-board{border:2px solid var(--card-border);background:var(--card);text-align:center;width:280px;color:var(--foreground);border-radius:12px;justify-content:center;align-items:center;gap:1rem;margin:2rem auto;padding:1.5rem 2rem;font-family:Inter,sans-serif;font-size:3rem;font-weight:700;transition:transform .2s;display:flex;position:relative;box-shadow:0 10px 25px #0003}.score-board:hover{transform:translateY(-2px)}.badge{background:var(--primary);color:#fff;letter-spacing:.05em;text-transform:uppercase;border-radius:9999px;padding:.25rem .75rem;font-family:Inter,sans-serif;font-size:.875rem;font-weight:600}#user-label{position:absolute;top:50%;left:0;transform:translate(-50%,-50%)}#computer-label{background:#e11d48;position:absolute;top:50%;right:0;transform:translate(50%,-50%)}.score-value{font-variant-numeric:tabular-nums;min-width:40px;display:inline-block}.score-colon{color:var(--muted-foreground);font-weight:400}.battle-arena{border:1px solid var(--card-border);background:#16213e66;border-radius:16px;justify-content:center;align-items:center;width:100%;max-width:600px;height:250px;margin:1rem 0;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 20px #0003}.battle-placeholder{color:var(--muted-foreground);font-size:1.5rem;font-weight:500}.pulse-text{animation:2s infinite pulse}.battle-content{justify-content:space-around;align-items:center;width:100%;height:100%;padding:1rem;display:flex}.combatant{flex-direction:column;align-items:center;gap:1rem;display:flex}.combatant img{object-fit:contain;filter:drop-shadow(0 10px 15px #00000080);width:100px;height:100px}.combatant span{color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.1em;font-size:1.25rem;font-weight:700}.battle-result-details{z-index:10;text-align:center;pointer-events:none;opacity:0;flex-direction:column;justify-content:space-between;align-items:center;width:100%;height:100%;padding:1.5rem 1rem;display:flex;position:absolute;top:0;left:0}.action-text{color:var(--foreground);border:1px solid var(--card-border);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);white-space:nowrap;background:#16213ecc;border-radius:8px;padding:.5rem 1rem;font-size:1.5rem;font-weight:600}.outcome-text{white-space:nowrap;text-shadow:0 10px 30px #000c;-webkit-text-stroke:2px var(--background);font-size:4rem;font-style:italic;font-weight:900}.battle-result-details.win .outcome-text{color:var(--green)}.battle-result-details.lose .outcome-text{color:var(--red)}.battle-result-details.draw .outcome-text{color:var(--gray)}@keyframes clashLeft{0%{opacity:0;transform:translate(-200px)}40%{opacity:1;transform:translate(20px)}50%{transform:translate(0)}to{opacity:1;transform:translate(0)}}@keyframes clashRight{0%{opacity:0;transform:translate(200px)}40%{opacity:1;transform:translate(-20px)}50%{transform:translate(0)}to{opacity:1;transform:translate(0)}}@keyframes winnerAnim{0%,50%{filter:brightness();transform:scale(1)}60%{filter:brightness(1.2);transform:scale(1.3)}to{filter:brightness(1.2)drop-shadow(0 0 20px #4ade8099);transform:scale(1.2)}}@keyframes loserAnim{0%,50%{filter:grayscale(0)brightness();transform:scale(1)}60%{filter:grayscale(.8)brightness(.6);transform:scale(.8)rotate(-10deg)}to{filter:grayscale()brightness(.4);transform:scale(.7)rotate(-15deg)}}@keyframes drawAnim{0%,50%{transform:scale(1)}60%{transform:scale(.9)}to{filter:grayscale(.5);transform:scale(1)}}@keyframes popInDelayed{0%,50%{opacity:0;transform:scale(0)}70%{opacity:1;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.clash-left{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards clashLeft}.clash-right{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards clashRight}.clash-left.winner-anim{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards clashLeft,.5s ease-out .5s forwards winnerAnim}.clash-left.loser-anim{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards clashLeft,.5s ease-out .5s forwards loserAnim}.clash-left.draw-anim{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards clashLeft,.5s ease-out .5s forwards drawAnim}.clash-right.winner-anim{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards clashRight,.5s ease-out .5s forwards winnerAnim}.clash-right.loser-anim{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards clashRight,.5s ease-out .5s forwards loserAnim}.clash-right.draw-anim{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards clashRight,.5s ease-out .5s forwards drawAnim}.pop-in-delayed{animation:.6s cubic-bezier(.175,.885,.32,1.275) .5s forwards popInDelayed}.choices{flex-wrap:wrap;justify-content:center;gap:2rem;margin:2rem 0;display:flex}.choice{background:var(--card);cursor:pointer;border:4px solid #0000;border-radius:50%;justify-content:center;align-items:center;padding:1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}.choice img{object-fit:contain;filter:drop-shadow(0 4px 6px #0000004d);width:80px;height:80px;transition:transform .3s}.choice:hover{background:#1f2d4e;transform:translateY(-8px)scale(1.05);box-shadow:0 20px 25px -5px #0003,0 10px 10px -5px #0000000a}.choice:hover img{transform:scale(1.1)rotate(5deg)}.choice:active{transform:scale(.95)}.green-affect{border-color:var(--green);background:#4ade801a;box-shadow:0 0 20px #4ade8066}.red-affect{border-color:var(--red);background:#f871711a;box-shadow:0 0 20px #f8717166}.gray-affect{border-color:var(--gray);background:#9ca3af1a;box-shadow:0 0 20px #9ca3af66}#action-message{text-align:center;color:var(--muted-foreground);margin-top:2rem;font-size:1.2rem;font-weight:500;animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.py-8{padding-top:2rem;padding-bottom:2rem}.border-t{border-top:1px solid var(--card-border)}.bg-background{background-color:var(--background)}.container{width:100%;max-width:1200px}.mx-auto{margin-left:auto;margin-right:auto}.px-4{padding-left:1rem;padding-right:1rem}.text-center{text-align:center}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.hover\:underline:hover{text-decoration:underline}.font-medium{font-weight:500}@media (width<=768px){.battle-arena{height:280px}.outcome-text{font-size:3.5rem}.action-text{font-size:1.25rem}}@media (width<=600px){.choices{gap:.75rem}.choice{padding:1rem}.choice img{width:50px;height:50px}.score-board{width:220px;padding:.75rem 1rem;font-size:2rem}.battle-arena{height:250px}.combatant img{width:65px;height:65px}.combatant span{font-size:1rem}.outcome-text{font-size:2.5rem}.action-text{padding:.4rem .8rem;font-size:1rem}.battle-result-details{gap:.25rem}}