:root{--cyan:178 60% 48%;--cyan-light:178 76% 66%;--yellow:39 88% 58%;--yellow-light:39 100% 69%;--dark-navy:202 32% 15%;--semi-dark-navy:199 35% 19%;--silver:198 23% 72%;--silver-light:197 33% 89%;--primary:hsl(var(--cyan));--primary-hover:hsl(var(--cyan-light));--secondary:hsl(var(--yellow));--secondary-hover:hsl(var(--yellow-light));--background:hsl(var(--dark-navy));--surface:hsl(var(--semi-dark-navy));--text-primary:hsl(var(--silver));--text-secondary:hsl(var(--silver-light));--ff-primary:"Outfit",sans-serif;--fw-regular:400;--fw-medium:500;--fw-bold:700;--fs-heading-l:2.5rem;--fs-heading-m:1.5rem;--fs-heading-s:1.25rem;--fs-heading-xs:1rem;--fs-body:.875rem;--ls-normal:0;--ls-wide:.0625rem;--ls-wider:.09375rem;--ls-widest:.15625rem;--space-xs:.25rem;--space-sm:.5rem;--space-md:.75rem;--space-lg:1rem;--space-xl:1.25rem;--space-2xl:1.5rem;--space-3xl:1.75rem;--space-4xl:2rem;--space-5xl:2.25rem;--space-6xl:2.5rem;--radius-sm:.375rem;--radius-md:.625rem;--radius-lg:1rem;--radius-xl:1.25rem;--radius-round:50%;--shadow-sm:0 -4px 0 0 #0f2029;--shadow-md:0 -8px 0 0 #0f2029;--shadow-cyan:0 8px 0 0 #118d89;--shadow-cyan-hover:0 8px 0 0 #169c98;--shadow-cyan-sm:0 4px 0 0 #118d89;--shadow-cyan-hover-sm:0 4px 0 0 #169c98;--shadow-yellow:0 8px 0 0 #d28f14;--shadow-yellow-hover:0 8px 0 0 #da9c2b;--shadow-yellow-sm:0 -4px 0 0 #d28f14;--shadow-yellow-hover-sm:0 4px 0 0 #da9c2b;--shadow-silver-sm:0 -4px 0 0 #668a99;--shadow-silver-hover-sm:0 4px 0 0 #7b9aa7}*,:before,:after{box-sizing:border-box;margin:0;padding:0}button{cursor:pointer;color:inherit;background:0 0;border:none;font-family:inherit}img,svg{max-width:100%;display:block}.heading-l{font-size:var(--fs-heading-l);font-weight:var(--fw-bold);letter-spacing:var(--ls-widest);text-transform:uppercase}.heading-m{font-size:var(--fs-heading-m);font-weight:var(--fw-bold);letter-spacing:var(--ls-wider);text-transform:uppercase}.heading-s{font-size:var(--fs-heading-s);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase}.heading-xs{font-size:var(--fs-heading-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-wide);text-transform:uppercase}.body-text{font-size:var(--fs-body);font-weight:var(--fw-medium);letter-spacing:var(--ls-wide)}.btn-1,.btn-2{color:var(--background);border-radius:1rem;padding:.875rem 1rem}.btn-1{background-color:var(--secondary);box-shadow:var(--shadow-yellow);margin-block-end:var(--space-sm)}.btn-1:hover{background-color:var(--secondary-hover)}.btn-2{background-color:var(--primary);box-shadow:var(--shadow-cyan);margin-block-end:var(--space-sm)}.btn-2:hover{background-color:var(--primary-hover)}.btn-secondary-1,.btn-secondary-2{color:var(--background);border-radius:var(--radius-md);padding:1rem}.btn-secondary-1{background-color:var(--secondary);box-shadow:inset var(--shadow-yellow-sm)}.btn-secondary-1:hover{background-color:var(--secondary-hover)}.btn-secondary-2{background-color:var(--text-primary);box-shadow:inset var(--shadow-silver-sm)}.btn-secondary-2:hover{background-color:var(--text-secondary)}.btn-restart{background-color:var(--text-primary);border-radius:var(--radius-sm);box-shadow:inset var(--shadow-silver-sm);padding-block-end:var(--space-xs)}.btn-restart:hover{background-color:var(--text-secondary)}@media (min-width:48rem){.btn-1,.btn-2{font-size:var(--fs-heading-s)}}body{background-color:var(--background);color:var(--text-primary);font-family:var(--ff-primary)}#root{--max-width:28.75rem;--padding-inline:var(--space-2xl);inline-size:min(var(--max-width),100% - var(--padding-inline)*2);align-items:center;height:100vh;margin-inline:auto;display:flex}.new-game-menu{gap:var(--space-4xl);inline-size:100%;display:grid}.new-game-menu img{margin:0 auto}.main-header{background-color:var(--surface);padding:var(--space-2xl)var(--space-2xl)var(--space-4xl);border-radius:var(--radius-lg);text-align:center;box-shadow:inset var(--shadow-md)}.new-game-btns{gap:var(--space-lg);display:grid}@media (min-width:48rem){.new-game-menu{gap:var(--space-6xl)}.new-game-btns{gap:var(--space-2xl)}}.mark-container{background-color:var(--background);block-size:4.5rem;margin-block:var(--space-2xl)var(--space-lg);border-radius:var(--radius-md);padding:.5rem;display:flex;position:relative}.mark-container input{opacity:0;block-size:0;inline-size:0;position:absolute}.mark{z-index:1;cursor:pointer;border-radius:var(--radius-md);flex:1;place-items:center;transition:color;display:grid}.mark:hover{background-color:hsla(var(--silver)/5%)}.mark svg{block-size:2rem;inline-size:2rem;display:block}.slider{background-color:var(--text-primary);border-radius:var(--radius-md);block-size:calc(100% - 1rem);inline-size:calc(50% - .5rem);transition:transform .25s;position:absolute}.mark-container:has(#option2:checked) .slider{transform:translate(100%)}.mark-container:has(#option1:checked) .x-mark{color:var(--background)}.mark-container:has(#option2:checked) .o-mark{color:var(--background)}.game-on-container{grid-template-rows:repeat(3,auto);margin:auto;display:grid}.game-on-header{grid-template-columns:repeat(3,1fr);justify-content:space-between;align-items:center;display:grid}.turn-indicator{background-color:var(--surface);justify-content:center;align-items:center;gap:var(--space-sm);text-transform:uppercase;border-radius:var(--radius-sm);block-size:2.5rem;inline-size:6rem;box-shadow:inset var(--shadow-sm);justify-self:center;padding-block-end:var(--space-xs);display:flex}.turn-indicator svg{block-size:1rem;inline-size:1rem}.btn-restart{justify-content:center;justify-self:end;align-items:center;block-size:2.5rem;inline-size:2.5rem;display:flex}.board{gap:var(--space-xl);margin-block:4rem var(--space-xl);grid-template-columns:repeat(3,auto);display:grid}.cell{background-color:var(--surface);border-radius:var(--radius-md);block-size:6rem;inline-size:6rem;box-shadow:inset var(--shadow-md);justify-content:center;align-items:center;padding-block-end:var(--space-sm);display:flex}.cell svg{block-size:2.5rem;inline-size:2.5rem}.x svg{color:var(--primary)}.o svg{color:var(--secondary)}.cell-hover{opacity:0}.cell:hover .cell-hover,.cell:focus-visible .cell-hover{opacity:1}.cell-hover.x path{fill:none;color:var(--primary)}.cell-hover.o path{fill:none;color:var(--secondary)}.scoreboard{justify-content:center;align-items:center;gap:var(--space-xl);color:var(--background);text-align:center;text-wrap:wrap;display:flex}.scoreboard p{block-size:4rem;inline-size:6rem;padding-block:var(--space-md);border-radius:var(--radius-md)}.scoreboard p span{display:block}.scoreboard .x{background-color:var(--primary)}.scoreboard .ties{background-color:var(--text-primary)}.scoreboard .o{background-color:var(--secondary)}.overlay{z-index:1;background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}@media (min-width:48rem){.turn-indicator{gap:var(--space-md);block-size:3.25rem;inline-size:8.75rem;font-size:var(--fs-heading-xs)}.turn-indicator svg{block-size:1.25rem;inline-size:1.25rem}.btn-restart{block-size:3.25rem;inline-size:3.25rem}.board{margin-block:1.25rem}.cell{block-size:8.75rem;inline-size:8.75rem}.cell svg{block-size:4rem;inline-size:4rem}.scoreboard p{block-size:4.5rem;inline-size:8.75rem}.scoreboard p span{font-size:var(--fs-heading-m);display:block}}.round-over{background-color:var(--surface);align-items:center;gap:var(--space-lg);flex-direction:column;inline-size:100%;padding-block:3rem;display:flex}.winner-player{font-weight:var(--fw-bold);text-transform:uppercase}.winner-mark{align-items:center;gap:var(--space-sm);color:var(--secondary);display:flex}.X{color:var(--primary)}.winner-mark svg{block-size:1.75rem;inline-size:1.75rem}.winner-mark,.tied{margin-block-end:var(--space-sm)}.btns{gap:var(--space-lg);display:flex}@media (min-width:48rem){.round-over{gap:var(--space-2xl)}.winner-player{font-size:var(--fs-heading-xs)}.winner-mark{gap:var(--space-2xl)}.winner-mark svg{block-size:4rem;inline-size:4rem}.winner-mark,.tied{font-size:var(--fs-heading-l);margin-block-end:var(--space-sm)}}