@import "https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";:root{--neutral-950:#000;--neutral-0:#fff;--slate-900:#1a2a33;--slate-850:#21313b;--slate-800:#1f3641;--slate-300:#a8bfc9;--slate-100:#dbe8ed;--amber-400:#f2b137;--amber-300:#ffc860;--teal-400:#31c3bd;--teal-300:#65e9e4}*,:after,:before{box-sizing:border-box;text-transform:uppercase;margin:0;padding:0}body{background-color:var(--slate-900);font-family:Outfit,sans-serif}button{cursor:pointer}.game-end-dialog,.restart-dialog{background-color:var(--slate-800);border:none;flex-direction:column;justify-content:center;align-items:center;width:100vw;min-height:228px;margin:auto 0;display:flex;max-width:100vw!important}.game-end-dialog>p{letter-spacing:.9px;color:var(--slate-300);font-size:.875rem;font-weight:700;line-height:1.3}.game-end-dialog>div:first-of-type{letter-spacing:1.5px;align-items:center;gap:1.5rem;margin-block:1rem 1.5rem;font-size:1.5rem;font-weight:700;line-height:1.25;display:flex}.game-end-dialog>div:first-of-type>img{width:26px}.game-end-dialog>div:last-of-type,.restart-dialog>div{gap:1rem;display:flex}.game-end-dialog button,.restart-dialog button{color:var(--slate-900);letter-spacing:1px;border:none;border-radius:10px;padding:1rem;font-size:1rem;font-weight:700;line-height:1.25}.quit-btn,.cancel-btn{background-color:var(--slate-300);box-shadow:inset 0 -4px #6b8997}.quit-btn:hover,.cancel-btn:hover{background-color:var(--slate-100)}.next-btn{background-color:var(--amber-400);box-shadow:0 -8px #10212a05,inset 0 -4px #cc8b13}.next-btn:hover{background-color:var(--amber-300)}.restart-dialog{letter-spacing:1.5px;color:var(--slate-300);gap:1.5rem;font-size:1.5rem;font-weight:700;line-height:1.25}@media (width>=768px){.game-end-dialog,.restart-dialog{min-height:266px}.game-end-dialog>p{letter-spacing:1px;font-size:1rem;line-height:1.25}.game-end-dialog>div:first-of-type{letter-spacing:2.5px;font-size:2.5rem}.game-end-dialog>div:first-of-type>img{width:64px}.restart-dialog{letter-spacing:2.5px;gap:1.875rem;font-size:2.5rem}}main.start-screen{flex-direction:column;justify-content:center;align-items:center;width:100%;min-height:95vh;padding:1.5em;display:flex}.logo-container{justify-content:center;gap:.5em;margin-bottom:2em;display:flex}.logo-svg{width:32px;height:32px}.toggle-container{background-color:var(--slate-800);border-radius:16px;flex-direction:column;align-items:center;width:100%;max-width:327px;margin-bottom:2em;padding:1.5em 1.5em 2em;display:flex;box-shadow:0 -8px #10212a80,inset 0 0 -8px #10212a}.toggle-container>h1{color:var(--slate-300);letter-spacing:1px;font-size:1rem;font-weight:700;line-height:1.25}.toggle-container>div{background-color:var(--slate-900);border-radius:10px;align-self:stretch;margin:1.5em 0 1em;padding:.5625em .46875em;display:flex}.toggle-container label{width:50%;min-height:72px;position:relative}label>input{opacity:0}label>div{cursor:pointer;border-radius:10px;justify-content:center;align-items:center;margin:auto;display:flex;position:absolute;inset:0}label>div.selected{background-color:var(--slate-300)}label>div:not(.selected):hover{background-color:var(--slate-850)}.toggle-svg{width:32px;height:32px}.toggle-container>p{color:var(--slate-300);letter-spacing:.9px;font-size:.875rem;font-weight:500;line-height:1.3}.game-btns-container{flex-direction:column;gap:1em;width:100%;max-width:327px;display:flex}.game-btns-container>button{width:100%;color:var(--slate-900);letter-spacing:1px;border-radius:16px;align-self:stretch;padding:1em 0 1.25em;font-family:inherit;font-size:1rem;font-weight:700;line-height:1.25}.game-btns-container>button:first-child{background-color:var(--amber-400);box-shadow:0 -8px #10212a80,inset 0 -8px #cc8b13}.game-btns-container>button:first-child:hover{background-color:var(--amber-300)}.game-btns-container>button:last-child{background-color:var(--teal-400);box-shadow:-8px 0 #10212a80,inset 0 -8px #118c87}.game-btns-container>button:last-child:hover{background-color:var(--teal-300)}@media (width>=768px){.logo-container{margin-bottom:2.5em}.toggle-container{max-width:460px;margin-bottom:2.5em}.toggle-container>div{margin:1.5rem 0}.game-btns-container{gap:1.25em;max-width:460px}.game-btns-container>button{letter-spacing:1.25px;padding:.8em 0 1.3em;font-size:1.25rem}}main.game{flex-direction:column;align-items:center;min-height:100vh;padding:1.5em;display:flex}.game-header{justify-content:space-between;align-items:center;width:100%;max-width:327px;display:flex}.game-header>div{letter-spacing:.9px;min-width:96px;min-height:40px;color:var(--slate-300);background-color:var(--slate-800);border-radius:6px;justify-content:center;align-items:center;gap:.5rem;font-size:.875rem;font-weight:700;line-height:1.3;display:flex;box-shadow:inset 0 -4px #10212a}.turn-svg{width:16px;height:16px}.game-header>button{background-color:var(--slate-300);border:none;border-radius:6px;justify-content:center;align-items:center;width:40px;height:40px;display:flex;box-shadow:inset 0 -4px #6b8997}.game-header>button:hover{background-color:var(--slate-100)}.field-grid{grid:auto auto auto/1fr 1fr 1fr;gap:1.25em;width:100%;max-width:327px;margin-top:4em;display:grid}.field-grid>button{background-color:var(--slate-800);border:none;border-radius:10px;width:96px;height:96px;box-shadow:0 -8px #10212a05,inset 0 -8px #10212a}.field-grid>button.xwon{background-color:var(--teal-400);box-shadow:0 -8px #10212a05,inset 0 -8px #118c87}.field-grid>button.owon{background-color:var(--amber-400);box-shadow:0 -8px #10212a05,inset 0 -8px #cc8b13}.statistics{justify-content:space-between;gap:1.25em;width:100%;max-width:327px;margin:1.25em 0;display:flex}.statistics>div{text-align:center;letter-spacing:.75px;width:96px;color:var(--slate-900);border-radius:10px;flex-direction:column;padding:.75rem 1.25rem;font-size:.75rem;font-weight:500;line-height:1.25;display:flex;box-shadow:0 -8px #10212a05,0 8px #10212a05}.statistics>div>span:last-child{letter-spacing:1.25px;font-size:1.25rem;font-weight:700}@media (width>=768px){main.game{justify-content:center}.game-header{max-width:461px}.game-header>div{letter-spacing:1px;border-radius:10px;gap:.75rem;width:140px;min-height:52px;font-size:1rem;line-height:1.25}.turn-svg{width:20px;height:20px}.game-header>button{border-radius:10px;width:52px;height:52px}.field-grid{max-width:461px;margin-top:1.25em}.field-grid>button{width:140px;height:140px}.statistics{max-width:461px}.statistics>div{width:140px}.statistics>div>span:last-child{letter-spacing:1.5px;font-size:1.5rem}}