@import"https://fonts.googleapis.com/css2?family=Afacad:wght@400..700&family=Poppins:wght@400;600;700&display=swap";.logo{font-family:Afacad,sans-serif;font-style:normal;font-weight:600;display:flex;align-items:center;gap:.5em;height:50px;margin-top:16px}.logo h1{font-size:32px}.logo .card-wrapper{position:relative;width:1rem;height:1rem;transform:translateY(-30%)}.logo .card-wrapper .card{width:100%;height:100%;border-radius:4px}.logo .card-wrapper .red{background-color:#171a26;border:solid #FF7E56 2px}.logo .card-wrapper .green{background-color:#171a26;border:solid #00A894 2px}.logo .card-wrapper .border{position:absolute;width:100%;height:100%;border-radius:4px;border:4px solid #171A26;top:30%;left:30%}.select-list{width:100%;position:relative}.select-list .item{background-color:#1d2232;padding:4px 24px;display:flex;justify-content:space-between;border-radius:16px;font-size:1rem;box-shadow:4px 4px 10px #0000001a;cursor:pointer}.select-list .select{display:flex;gap:1rem;align-items:center}.select-list .select .imgWrapper{aspect-ratio:1/1;width:32px;position:relative}.select-list .select .imgWrapper img{top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;height:32px}.select-list .list{background-color:#1d2232;border-radius:16px;box-shadow:4px 4px 10px #0000001a;padding:8px 24px;position:absolute;width:calc(100% - 48px);transform-origin:top center;z-index:50;top:100%;left:0}.select-list .list li{list-style-type:none;cursor:pointer}.select-list .list li:not(:last-child){border-bottom:solid 1px rgba(0,0,0,.24)}.button{width:fit-content;padding:16px 32px;margin:auto;border-radius:16px;outline:none;border:none;color:#fafafa;background:linear-gradient(145deg,#00a894,#0081c8,#00a894);background-size:200%;background-position:left;cursor:pointer;transition:.2s ease-in-out;font-family:Poppins,sans-serif;font-weight:600;font-style:normal;font-size:16px}.button:hover{background-position:right}.button.unactive{background:#5d5d5e!important}.new-game{width:100%;max-width:500px;display:flex;flex-direction:column;gap:24px;margin-top:32px;text-align:center}.new-game h2{font-family:Afacad,sans-serif;font-style:normal;font-weight:600;font-size:25px;line-height:20px;margin:0}.new-game .lists{width:100%;display:flex;flex-direction:column;gap:16px}@media (min-width: 800px){.new-game{gap:32px;margin-top:80px}}.game{width:100%;max-width:600px;margin-top:24px}.game .scores{display:flex;width:100%;justify-content:space-between}.game .scores .score{display:flex;gap:12px;align-items:center}.game .scores .score img{width:32px}.game .scores .score p{font-size:25px;line-height:1px;font-family:Afacad,sans-serif;font-style:normal;font-weight:500}.game .grid{display:grid;width:100%;margin-top:32px}.game .grid .card{width:100%;border-radius:8px;overflow:hidden;cursor:pointer;position:relative}.game .grid .card:hover .back .glow{left:100%;opacity:1}.game .grid .card .back{background-color:#303136;font-family:Poppins,sans-serif;font-weight:600;font-style:normal;display:flex;justify-content:center;align-items:center;font-size:62px;padding:10%;position:relative}.game .grid .card .back img{width:40%}.game .grid .card .back .glow{height:100%;width:100%;background:linear-gradient(100deg,#fff0 20%,#ffffff0d,#fff0 80%);position:absolute;left:-100%;transition:left .6s ease-in-out;opacity:0}.game .grid .card .front.red{background-color:#ff7e56}.game .grid .card .front.green{background-color:#00a894}.game .grid .card .front.blue{background-color:#0081c8}.game .grid .card .front{width:100%;height:100%;position:absolute;top:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center}.game .grid .card .front .shadow{width:100%;height:100%;position:absolute;top:0;left:0;z-index:30;background:radial-gradient(circle,#fff0,#0000003d 80%)}.game .grid .card .front img{height:50%}.game .easy{grid-template-columns:repeat(2,1fr);gap:16px}.game .normal{grid-template-columns:repeat(4,1fr);column-gap:32px;row-gap:8px;margin-bottom:24px}.game .normal .card,.game .normal .card .back{aspect-ratio:1/1}.game .hard{grid-template-columns:repeat(6,1fr);column-gap:8px;row-gap:8px;margin-bottom:24px}.game .hard .card,.game .hard .card .back{aspect-ratio:1/1}@media (min-width: 650px){.game{margin-top:40px}.game .scores .score img{width:48px}.game .scores .score p{font-size:40px}.game .easy{grid-template-columns:repeat(4,1fr)}.game .normal{grid-template-columns:repeat(6,1fr);column-gap:16px}.game .hard{grid-template-columns:repeat(8,1fr);column-gap:16px}.game .grid{margin-top:24px}.game .grid .card,.game .grid .card .back{aspect-ratio:1/1}}.game-history{width:100%;max-width:600px;margin-top:48px}.game-history h2{width:100%;text-align:center;font-family:Afacad,sans-serif;font-style:normal;font-weight:600;font-size:25px;line-height:20px;margin:0;padding-bottom:24px;border-bottom:#5D5D5E 1px solid}.game-history .container{display:grid;grid-template-columns:1;justify-content:center;row-gap:32px;column-gap:104px;margin-top:8px}.game-history .container .game{width:fit-content}.game-history .container .game .headline{display:flex;flex-direction:column-reverse;gap:16px;margin-bottom:16px}.game-history .container .game .headline h3{font-family:Afacad,sans-serif;font-style:normal;font-weight:500;font-size:32px;line-height:14px;margin:0}.game-history .container .game .headline p{opacity:50%;font-size:20px;line-height:8px;margin:0}.game-history .container .game .flex{display:flex;gap:16px}.game-history .container .game .stat{display:flex;gap:8px}.game-history .container .game .stat img{width:24px;color:#fafafa}.game-history .container .game .stat p{line-height:8px}@media (min-width: 600px){.game-history{margin-top:96px;width:fit-content}}@media (min-width: 500px){.game-history .container{grid-template-columns:repeat(2,1fr)}}*{outline:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}body{margin:0;padding:0;box-sizing:border-box;background-color:#171a26;color:#fafafa;font-family:Poppins,sans-serif;font-weight:400;font-style:normal}.app{width:90%;margin:auto;display:flex;flex-direction:column;align-items:center}a{color:#fafafa;text-decoration:none}