:root{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;--grey-100: rgb(242,242,242);--grey-50: rgb(252,252,252);--blue-950: rgb(21,41,56);--blue-800: rgb(48,72,89);--blue-400: rgb(113, 145, 165);--blue-350: rgb(99,149,184);--blue-300: rgb(188,206,217);--blue-100: rgb(223,231,236);--orange-400: rgb(253, 162, 20);--orange-300: rgb(255,184,74)}.settings{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;width:654px;height:689px;margin:20px auto}.settings header{background-color:var(--grey-50);margin:20px auto;display:flex;flex-direction:row;justify-content:center;align-items:center;height:108px}.settings header img{display:block;margin:20px auto;height:28px;text-align:center}.settings main{border-radius:20px;max-width:545px;background-color:var(--grey-50);display:flex;flex-direction:column;justify-content:space-around;align-content:space-around;gap:32px;padding:6%}section{width:545px;height:93px;display:flex;flex-direction:column;justify-content:space-around;align-content:center;gap:16px}section label{height:25px;color:var(--blue-400);display:flex;flex-direction:row;justify-content:flex-start;align-items:center;text-transform:none;font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:20px;line-height:125%;letter-spacing:0}section .btns{margin:auto;width:545px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:32px}button{border-radius:26px;background-color:var(--blue-300);color:var(--color-grey-50);font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:26px;line-height:125%;letter-spacing:0;padding:4px 24px}button:hover{background-color:var(--blue-400);cursor:pointer}.theme-selector-button{border:none;background-color:var(--blue-300);color:#fff;width:256px;height:52px}.theme-selector-button:focus{background-color:var(--blue-950)}.num-of-players-button{border:none;background-color:var(--blue-300);color:#fff;width:118px;height:52px}.num-of-players-button:focus{background-color:var(--blue-950)}.size-setting-button{border:none;background-color:var(--blue-300);color:#fff;width:256px;height:52px}.size-setting-button:focus{background-color:var(--blue-950)}.btns .active{background-color:var(--blue-950)}.start-game-button{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;width:545px;height:70px;border:none;border-radius:35px;background-color:var(--orange-400);color:var(--grey-50)}.start-game-button:hover{background-color:var(--orange-300)}@media screen and (max-width:1200px){.settings{width:90vw;height:auto}.settings header{height:80px;margin:40px auto 10px}.settings header img{text-align:center}}@media screen and (max-width:600px){.settings{width:92vw;height:auto}.settings header{height:80px;margin:10px auto}.settings main{gap:24px}.settings main section{width:320px;height:93px;display:flex;flex-direction:column;justify-content:space-around;align-content:center;gap:16px}.settings main section .btns{margin:auto;width:320px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:24px}.logo-img{height:40px;margin-bottom:56px}.start-game-button{width:320px;height:70px}}body{margin:0 auto;background-color:var(--blue-800);height:auto}*{box-sizing:border-box}body{background-color:var(--grey-50)}.solo-player-board,.multi-player-board{margin:12px 24px;padding:2px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center}header,main,footer{margin:0 auto 10px;padding:10px 20px}header{height:52px;width:calc(100vw - 48px);margin:14px auto;background-color:var(--grey-50);gap:40vw;display:flex;flex-direction:row;justify-content:space-around;align-items:center}header .btns{height:auto;display:flex;flex-direction:row;justify-content:center;gap:10px;align-items:center}button{height:52px;border:none;font-size:20px;font-family:Atkinson Hyperlegible,sans-serif;font-weight:700}button:hover{background-color:var(--blue-350)}.restart-btn{width:127px;background-color:var(--orange-400);color:var(--grey-50)}button.active{background-color:var(--orange-400);color:var(--grey-50)}.new-game-btn{width:149px;background-color:var(--blue-100);color:var(--blue-800)}.cards4x4{margin:50px auto 20px;height:544px;width:544px;padding:5px;display:grid;grid-template-columns:repeat(4,120px);grid-template-rows:repeat(4,120px);gap:16px;background-color:var(--grey-50)}.cards6x6{width:572px;height:572px;margin:20px auto 48px;padding:10px;display:grid;grid-template-columns:repeat(6,86px);grid-template-rows:repeat(6,86px);gap:20px;background-color:var(--grey-50)}.card{width:102px;height:102px;background-color:var(--blue-800);color:var(--blue-800);border:none;border-radius:50%;padding:8px;font-size:64px;margin:0;display:flex;flex-direction:row;justify-content:center;align-items:center}.cards4x4>.card{width:116px;height:116px;gap:24px;font-size:56px}.cards6x6>.card{width:102px;height:102px;gap:16px}.selected-card{background-color:var(--blue-300);color:var(--grey-50);display:flex;flex-direction:row;justify-content:center;align-items:center}.clicked-card{background-color:var(--orange-400);font-size:44px;color:var(--grey-50);display:flex;flex-direction:row;justify-content:center;align-items:center}.iconcard{background-color:var(--blue-800);fill:var(--blue-800);border:none;border-radius:50%;margin:12px;display:flex;flex-direction:row;justify-content:center;align-items:center}.cards4x4>.iconcard{width:116px;height:116px;gap:16px;font-size:56px}.cards6x6>.iconcard{width:102px;height:102px;gap:16px;font-size:56px}.card img{display:none}.card img.selected-iconcard,.card img.clicked-iconcard{display:flex}.selected-iconcard{background-color:var(--blue-300);color:var(--grey-50);display:flex;flex-direction:row;justify-content:center;align-items:center}.clicked-iconcard{background-color:var(--orange-400);font-size:44px;color:var(--grey-50);display:flex;flex-direction:row;justify-content:center;align-items:center}.solo-player-board footer{width:50%;margin:40px auto;height:auto;gap:4px;flex-direction:row;flex-wrap:wrap;display:flex;justify-content:center;align-items:center}.solo-player-board footer .solo-results{width:100%;margin:20px auto;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;gap:10px}.solo-results .result-time,.solo-results .result-moves{width:45%;height:72px;background-color:var(--blue-100);color:var(--blue-800);border-radius:10px}footer .players-panel{margin:30px auto}@media(max-width:1200px){.solo-player-board,.multi-player-board{margin:20px auto;padding:10px;display:flex;flex-direction:column;justify-content:center;align-items:center}header,main,footer{margin:40px auto;display:flex;flex-direction:row;justify-content:center;align-items:center;width:calc(100% - 48px);text-align:center}.solo-player-board header{margin:24px auto;flex-wrap:nowrap}.solo-player-board main{margin:24px auto;flex-wrap:wrap}.solo-player-board footer{margin:20px auto;flex-wrap:wrap;width:64%}}@media(max-width:900px){.solo-player-board,.multi-player-board{margin:12px 24px;padding:10px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center}header,main,footer{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;text-align:center}header{margin:18px auto;padding:0 12px;gap:48%;display:flex;flex-direction:row;justify-content:space-around;align-items:center;width:calc(100vw - 64px);box-sizing:border-box}main{margin:18px auto;padding:0 12px}.solo-player-board footer{width:80%;margin:20px auto}}@media(max-width:600px){.solo-player-board,.multi-player-board{margin:0 24px;padding:10px 8px;display:flex;flex-direction:column;justify-content:center;align-items:center}header{margin:12px auto;gap:15vw;display:flex;flex-direction:row;justify-content:space-around;align-items:center;width:calc(100vw - 64px);box-sizing:border-box}.restart-btn{display:none}.btns{margin-right:0;padding-right:0;justify-content:center}.cards4x4{margin:12px auto;width:clamp(275px,70vw,320px);height:auto;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:4px}.cards6x6{margin:12px auto;width:clamp(275px,80vw,320px);height:auto;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:4px}main{margin:12px auto;display:flex;justify-content:center;align-items:center;width:calc(100vw - 64px);box-sizing:border-box}.cards4x4>.card,.cards4x4>.iconcard{width:72px;height:72px;font-size:40px;gap:16px}.cards6x6>.card,.cards6x6>.iconcard{width:54px;height:54px;font-size:40px;gap:16px}.info4x4{margin:12px auto;width:calc(100vw - 64px);height:auto}.solo-player-board footer{width:100%;margin:0 auto;height:auto;gap:4px;flex-direction:column;display:flex;justify-content:center;align-items:center}.solo-player-board footer .solo-results{width:100%;margin:0 auto;height:auto;gap:4px;flex-direction:column;display:flex;justify-content:center;align-items:center}.solo-results .result-time,.solo-results .result-moves{width:96%;height:72px;background-color:var(--blue-100);color:var(--blue-800);border-radius:10px}}.players-panel{top:-140px;height:72px;width:fit-content;background-color:var(--grey-50);margin:0 auto 10px;padding:5px 15px;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;align-items:center;gap:10px}.player{width:210px;height:72px;background-color:var(--blue-300);color:var(--blue-800);border-radius:10px;position:relative;overflow:visible;display:flex;flex-wrap:nowrap;flex-direction:column;justify-content:center;align-items:center;gap:2px}.player.active{background-color:var(--orange-400)}.rectangle{position:absolute;z-index:-3;background-color:var(--blue-100);width:24px;height:24px;left:88px;top:-12px;transform:rotate(45deg);display:none}.rectangle.active{display:block;background-color:var(--orange-400);z-index:5;margin-bottom:90px}.active .score-panel{margin:auto;padding-top:55px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:54px}.score-panel{margin:auto;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:54px}.pl-title,.pl-score{width:auto}.pl-title{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:18px;color:var(--blue-400)}.pl-score{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:32px;color:var(--blue-800)}.pl-score.active,.pl-title.active{color:var(--grey-50)}.players-panel label{font-size:13px;font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;letter-spacing:5px;color:var(--blue-400);text-transform:uppercase;margin:26px 0 0;padding:6px;display:none}.players-panel label.current{display:block;color:var(--blue-950)}.solo-overlay{width:100vw;height:100vh;z-index:8;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#646464bf;margin:0 auto}.solo-result{width:654px;max-height:510px;background-color:#fafafa;z-index:10;border-radius:20px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;box-shadow:0 4px 16px #0003}h2{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:48px;color:var(--blue-950);text-align:center;margin:40px auto 10px;padding:0}h3{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:18px;color:var(--blue-400);text-align:center}.result-time,.result-moves{width:75%;height:72px;background-color:var(--blue-100);color:var(--blue-400);font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:18px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;border-radius:10px;padding:10px 40px}.result{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:32px;color:var(--blue-800)}.btns{margin:40px auto;width:86%;display:flex;flex-direction:row;justify-content:space-between;align-items:center}button{width:310px}button:hover{cursor:pointer;background-color:var(--blue-400)}.reset-btn{color:#fff;background-color:var(--orange-400)}.reset-btn:hover{cursor:pointer;background-color:var(--blue-400);color:#fff}.setup-btn{color:var(--blue-800);background-color:var(--blue-100)}@media(max-width:1200px){.solo-result{width:90%;height:80%}.result-time,.result-moves{width:90%}.btns{width:90%;flex-direction:column;gap:20px}button{width:100%}}@media(max-width:600px){.solo-result{width:95%;margin:auto}.result-time,.result-moves{width:95%}.btns{width:95%;flex-direction:column;gap:16px}button{width:100%}}.multiplayer-overlay{width:100vw;height:100vh;z-index:8;position:fixed;top:0;left:0;display:flex;align-items:center;justify-content:center;background-color:#646464bf;margin:0 auto}.multi-result{background-color:#fafafa;width:654px;height:680px;z-index:10;border-radius:20px;display:flex;flex-direction:column;justify-content:space-around;align-items:center;gap:10px;box-shadow:0 4px 16px #0003;transform:scaleX(.8) scaleY(.8)}.texts{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px}h2{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:48px;color:var(--blue-950);margin:40px auto 0;text-align:center}h3{font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:20px;color:var(--blue-400);text-align:center}.results-board{width:76%;display:flex;flex-direction:column;justify-content:space-around;gap:2px;align-items:center}.winner,.not-winner{width:100%;height:73px;background-color:var(--blue-100);color:var(--blue-400);font-family:Atkinson Hyperlegible,sans-serif;font-weight:700;font-size:18px;display:flex;flex-direction:row;justify-content:space-between;gap:16px;align-items:center;border-radius:10px;padding:0 40px;margin:6px 16px}.winner{background-color:var(--blue-800);color:#fff}.btns{margin:40px auto;display:flex;flex-direction:row;justify-content:center;align-items:center}.setup-btn{color:var(--blue-800);background-color:var(--blue-400)}.setup-btn:hover{color:#fff;background-color:var(--blue-400);cursor:pointer}@media(max-width:1200px){.multi-result{width:90%;height:96vh;gap:2px;margin:25px auto}.results-board{width:70%;height:55%}.btns{width:70%;flex-direction:column;gap:12px}}@media(max-width:900px){.multi-result{width:55%;height:96vh;gap:2px;margin:5px auto}.results-board{width:80%;height:55%}.btns{width:80%;flex-direction:column;gap:12px}}@media(max-width:600px){.multi-result{width:90%;height:90%;margin:5px auto}.results-board{width:90%}.btns{width:90%;flex-direction:column;gap:12px}}