@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;800&family=VT323&display=swap";:root{--clr-neutral-000: #fff;--clr-neutral-100: #f1f1f1;--clr-neutral-200: #ccc;--clr-neutral-300: #aaa;--clr-neutral-700: #555;--clr-neutral-800: #333;--clr-neutral-900: #1e1e1e;--clr-background-primary: var(--clr-neutral-000);--clr-background-secondary: var(--clr-neutral-100);--clr-primary: #1c9e79;--clr-error: #e7195a}body{background:var(--clr-background-secondary);font-family:Poppins;margin:0}.pages{max-width:1400px;padding:20px;margin:0 auto}button{cursor:pointer;font-size:inherit}input{font-size:inherit}.notification{position:fixed;top:2rem;left:50%;translate:-50% 0;border-radius:5px;box-shadow:0 4px 10px #00000040;color:#fff;font-size:16px;padding:15px}.notification.success{background-color:var(--clr-primary)}.notification.error{background-color:var(--clr-error)}.notification p{margin:0}header{background:var(--clr-background-primary)}header .container{display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto;padding:10px 20px}header .container img{translate:0 .125rem}header a{color:var(--clr-neutral-800);text-decoration:none}header nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}header nav ul a{font-weight:600}header nav ul a:is(.active){text-decoration:underline solid .25rem!important;text-underline-offset:.375rem}.overlay{position:relative}.overlay .play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;background-color:var(--clr-primary);border:none;border-radius:.5rem;box-shadow:0 4px 6px #0003;color:var(--clr-neutral-000);cursor:pointer;font-size:clamp(1rem,3vw + .5rem,2rem);font-weight:700;padding:10px 20px;transition:box-shadow .3s ease}.overlay .play-button:hover,.overlay .play-button:focus-visible{box-shadow:0 6px 6px #0006}.overlay .chessboard{filter:blur(10px)}.game-details{font-size:clamp(1rem,2vw + .5rem,1.25rem);margin:0 auto;width:min(600px,100%)}.game-details header{display:flex;justify-content:space-between;background-color:inherit}.game-details header p{margin-bottom:0}.game-details main{display:flex;justify-content:space-between}.game-details main p{display:grid;justify-items:center}.exit-button{cursor:pointer;font-size:clamp(1rem,2vw + .5rem,1.25rem);padding:.25rem;width:100%}.chessboard{--_clr-light: #ecdab9;--_clr-dark: #ae8a68;display:flex;flex-direction:column;border-radius:.5rem;width:min(600px,100%);aspect-ratio:1;margin:0 auto;overflow:clip}.chessboard [role=row]{display:flex;flex:1 1 0}.square{flex:1 1 0;border:none;width:100%;aspect-ratio:1;padding:0}.square:not(.uninteractive){cursor:pointer}.square.light{background-color:var(--_clr-light)}.square.dark{background-color:var(--_clr-dark)}.square:not(.uninteractive):hover,.square:focus-visible{background-color:#d9a520bf}.square.correct{background-color:#008000bf!important}.square.incorrect{background-color:#ff0000bf!important}.dialog{background-color:var(--clr-background-secondary);border:none;border-radius:.5rem;padding:1.5rem;text-align:center}.dialog h2{margin-block:10px}.dialog main{font-size:clamp(1rem,2vw + .5rem,1.25rem)}.dialog .game-information{display:flex;justify-content:space-around}.dialog .game-information p{display:grid;justify-items:center}.dialog .button-group{display:flex;justify-content:center;gap:1rem;width:100%}.dialog .button-group button{transition:background-color .3s ease}.dialog .button-group .btn-primary{background-color:var(--clr-primary);border:none;border-radius:.125rem;color:var(--clr-neutral-100);padding:.75rem 1rem}.dialog .button-group .btn-primary:hover,.dialog .button-group .btn-primary:focus-visible{background-color:hsl(from var(--clr-primary) h s 35%)}.dialog::backdrop{background-color:#0003}.input-wrapper{display:flex;align-items:center;border:1px solid var(--clr-neutral-200);border-radius:4px;margin-block:0 1rem}.input-wrapper:focus-within{outline:2px solid var(--clr-neutral-800)}.input-wrapper input{flex:1;border:none;padding:0 .5rem;outline:none}.input-wrapper button{background-color:var(--clr-neutral-200);border:none;border-radius:4px;padding:1rem .5rem;transition:background-color .3s ease}.input-wrapper button:hover,.input-wrapper button:focus-visible{background-color:var(--clr-neutral-300)}.pages{container-type:inline-size}.highscores h2{color:var(--clr-neutral-800)}.highscores ul{list-style:none;margin:0;padding:0;counter-reset:highscore-counter}@container (min-width: 800px){.highscores{display:grid;grid-template-columns:1fr 1fr;gap:1rem}}.highscore-details{display:flex;align-items:center;gap:2rem;position:relative;background:var(--clr-background-primary);border-radius:4px;box-shadow:2px 2px 5px #0000000d;margin:10px auto;padding:20px;counter-increment:highscore-counter}.highscore-details span{display:inline-flex;justify-content:center;width:2.5ch;flex-shrink:0;font-variant-numeric:tabular-nums}.highscore-details span:before{content:counter(highscore-counter,decimal-leading-zero);font-size:1.75rem}.highscore-details>div{width:100%}.highscore-details h3{color:var(--clr-primary);font-size:1.2em;margin:0 0 10px}.highscore-details main{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}.highscore-details p{display:flex;flex-wrap:wrap;gap:.5ch;color:var(--clr-neutral-700);font-size:.9em;margin:0}