*,*:after,*:before{padding:0;margin:0;box-sizing:border-box}:root{--prime-text: hsl(229, 25%, 31%);--score-text: hsl(229, 64%, 46%);--light-border: hsl(217, 16%, 45%);--scissors-grad: hsl(39, 89%, 49%), hsl(40, 84%, 53%);--scissors-shadow: hsl(39deg 89% 49% / 65%);--paper-grad: hsl(230, 89%, 62%), hsl(230, 89%, 65%);--paper-shadow: hsl(230deg 89% 62% / 65%);--rock-grad: hsl(349, 71%, 52%), hsl(349, 70%, 56%);--rock-shadow: hsl(349deg 71% 52% / 65%);--liz-grad: hsl(261, 73%, 60%), hsl(261, 72%, 63%);--liz-shadow: hsl(261deg 73% 60% / 65%);--cayn-grad: hsl(189, 59%, 53%), hsl(189, 58%, 57%);--cayn-shadow: hsl(189deg 59% 53% / 65%)}html{background:radial-gradient(circle at top,#1f3756,#141539) no-repeat;font-family:Barlow Semi Condensed,sans-serif;font-weight:600;text-transform:uppercase;-webkit-user-select:none;user-select:none;color:#fff}.game-container{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:2rem}@media (max-width: 970px){.game-container{gap:4rem}}header{width:100%;max-width:40rem;display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.25rem;border:3px solid var(--light-border);border-radius:.625rem}header .image img{width:100%}header .score-box{background-color:#fff;padding:.625rem 1.5rem;border-radius:5px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-around;align-items:center}header .score-box h4{color:var(--score-text);font-size:1.25rem;letter-spacing:1px}header .score-box p{font-size:clamp(3rem,10vw / 2,4.5rem);line-height:1;font-weight:700;color:var(--prime-text)}main{display:flex;align-items:center;justify-content:center;flex-grow:1;padding-top:3rem}main .game{position:relative;text-align:center}main .game .bg-img{width:300px}main .game:not(.result) .card-grad{cursor:pointer;position:absolute}main .game.result .win-lose{display:flex;align-items:center;gap:3rem;margin-bottom:5rem}main .game.result .win-lose .card-grad{width:12rem;height:12rem;padding:1.25rem}main .game.result .win-lose .card-grad .card{padding:15px;box-shadow:0 7px #0003 inset}main .game.result .win-lose .card-grad .card img{width:60%}main .game.result .win-lose .placeholder{width:12rem;height:12rem;border-radius:50%;background-color:#0003}@media (max-width: 430px){main .game.result .win-lose{gap:2rem}main .game.result .win-lose .card-grad,main .game.result .win-lose .placeholder{width:9.5rem;height:9.5rem;padding:1rem}}main .game.result .result-title{font-size:2.5rem;letter-spacing:2px;margin-bottom:1rem}main .game.result .play-again{padding:1rem 4rem;background-color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:inherit;letter-spacing:1px;text-transform:inherit;color:var(--prime-text);cursor:pointer}main .card-grad{background:linear-gradient(var(--scissors-grad));width:8rem;height:8rem;border-radius:50%;padding:15px}main .card-grad.simple.paper{top:-60px;left:-30px}main .card-grad.simple.scissors{top:-60px;right:-30px}main .card-grad.simple.rock{bottom:-20px;left:85px}@media (max-width: 400px){main .card-grad.simple.paper{left:-15px}main .card-grad.simple.scissors{right:-15px}main .card-grad.simple.rock{bottom:0;left:85px}}main .card-grad.advanced.scissors{top:-40px;left:87px}main .card-grad.advanced.paper{right:-55px;top:55px}main .card-grad.advanced.spock{left:-55px;top:55px}main .card-grad.advanced.rock{bottom:-50px;right:0}main .card-grad.advanced.lizard{bottom:-50px;left:0}@media (max-width: 400px){main .card-grad.advanced.scissors{top:-50px}main .card-grad.advanced.paper{right:-25px}main .card-grad.advanced.spock{left:-25px}}main .card-grad .card{display:flex;align-items:center;justify-content:center;height:100%;background-color:#fff;border-radius:50%;padding:10px;box-shadow:0 5px #0003 inset}main .card-grad .card img{width:50%}footer{width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between}@media (max-width: 520px){footer{flex-direction:column-reverse;gap:.625rem}}footer .toggler{display:flex;align-items:center;gap:2rem;padding:1rem;border:3px solid var(--light-border);border-radius:7px;color:#fff;letter-spacing:1px}footer .toggler span{cursor:pointer}footer .toggler .switch-box{width:4rem;padding:.2rem;border:inherit;border-radius:20px}footer .toggler .switch-box .switcher{width:1rem;height:1rem;border-radius:50%;background-color:#fff;transition:.3s ease-out}footer .toggler .switch-box .switcher.advanced{transform:translate(35px)}footer .btn{padding:.625rem 2.5rem;font-size:1.25rem;font-family:inherit;color:#fff;text-transform:inherit;border:3px solid var(--light-border);border-radius:7px;outline:none;background-color:transparent;cursor:pointer;letter-spacing:2px}.overlay{position:fixed;width:100%;height:100%;top:0;left:0;background-color:#00000080;transform:scale(0);transition:.2s ease-out;display:flex;justify-content:center;align-items:center}.overlay.white{background-color:#fff}.overlay.open{transform:scale(1)}.overlay .rules-box{display:flex;flex-direction:column;align-items:center;justify-content:space-around;background-color:#fff;border-radius:10px;padding:2rem;gap:2rem;margin-inline:10px;color:var(--prime-text)}@media (max-width: 430px){.overlay .rules-box{gap:7rem;font-weight:700;font-size:1.5rem}}.overlay .rules-box .title{display:flex;align-items:center;justify-content:space-between;align-self:normal}.overlay .rules-box .close{object-fit:cover;width:100%;cursor:pointer}.overlay .rules-box .rules-image img{width:100%;object-fit:cover}