:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:700;line-height:2.5rem;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--gradient-backgound: linear-gradient(45deg, rgb(0, 0, 0) 0%, rgb(30, 60, 67) 50%, rgb(15, 10, 53) 80%, rgb(11, 35, 40) 100%);--gold: rgb(235, 255, 121)}body{margin:0;min-width:320px;min-height:100vh;align-content:center;background:var(--gradient-backgound);color:var(--gold)}@media (width <= 600px){body:has(.board){align-content:unset}}*{margin:0}:root{--black: black;--blue: blue;--grey: rgba(255,255,255,.1);--white: white;--gold: #ebff79;--robot: "🤖"}#root{max-width:1280px;margin:0 auto;padding:.5rem;text-align:center}#root main{display:flex;flex-direction:column;align-items:center;justify-content:center}#root main:not(:has(.board)){gap:1rem}@media (width <= 600px){#root main{display:block}}#root main .play-again{opacity:1}@starting-style{#root main .play-again{opacity:0}}#root p{color:var(--white)}#root h1{padding:1rem 0;font-size:4rem;background:var(--gold);background:linear-gradient(to bottom,var(--gold) 50%,#ff5555 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.5rem;filter:drop-shadow(0 0 50px var(--gold))}@media (width <= 600px){#root h1{font-size:2.75rem}}#root h1:before{content:var(--robot);-webkit-text-fill-color:initial}button{border:none;color:var(--black);padding:1rem;border-radius:.25rem;cursor:pointer;font-weight:600;width:100%}button:not(.cell){transition:ease-in all .2s;background-color:var(--black);color:var(--gold);outline:1px solid var(--gold);font-size:1.25rem}.players{display:flex;gap:1rem;justify-content:center;margin-bottom:.5rem}.players p{padding:0 1rem}.players .highlight{color:var(--gold)}.players .ai-thinking{transition:ease all .2s;opacity:1}@starting-style{.players .ai-thinking{opacity:0;transform:scale(.1)}}.players .ai-thinking:before{content:var(--robot)}.start-screen{transition:ease-in all .2s;opacity:1}@starting-style{.start-screen{opacity:0}}@media (width >= 600px){.start-screen{width:50%}}.start-screen .choose-letter{display:flex;gap:1rem;justify-content:center}.board{opacity:1;transition:ease all 1s;display:grid;justify-items:center;grid-template-rows:repeat(3,1fr);grid-template-columns:repeat(3,1fr);gap:.5rem}.board .cell{color:var(--gold);background-color:inherit;place-content:center;width:10vmax;height:10vmax;border:1px solid var(--gold);font-size:6vmax}@media (width <= 600px){.board .cell{font-size:6vmax;height:15vmax;width:clamp(15vmax,100%,200px)}}.board .cell.playable{cursor:pointer}.board .cell.playable:focus{border:3px solid var(--blue)}.board .cell.unplayable{cursor:not-allowed}.board .cell.unplayable:focus{border:none}@starting-style{.board{opacity:0}}@media (hover: hover){.cell.playable:hover{background-color:var(--grey)}button:not(.cell):hover{color:var(--white);box-shadow:5px 5px var(--gold)}}