html,body,:root{color:#55a;user-select:none;background:#224;width:100vw;height:100vh;margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Oxygen,Open Sans,sans-serif;font-size:1rem}.game{display:grid;grid-template-areas:"score" "board";grid-template-rows:auto 1fr;position:fixed;box-sizing:border-box;overflow:hidden;border:1px solid #336;border-radius:1rem;width:auto;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);top:50%;left:50%;translate:-50% -50%;box-shadow:0 0 5rem #336}.score{grid-area:score;text-align:center;text-shadow:0 0 1rem #336;color:#55a;border-bottom:1px solid #336;padding:.5rem;font-size:1rem}.board{grid-area:board;aspect-ratio:1;display:block;width:90vw;max-width:calc(100vw - 2rem);height:auto;max-height:calc(100vh - 2rem);margin:0 auto}@media (orientation:landscape){.board{aspect-ratio:1;width:auto;height:90vh}}.toasts{display:flex;position:fixed;flex-flow:column;align-items: center;gap:1rem;width:100%;padding:1rem;top:0;left:0}.toast{--timeout:1s;text-align:center;outline:1px solid #336;color:#55a;text-shadow:0 0 1rem #336;animation:fade-out .3s var(--timeout)ease-out fill;background:#224;border-radius:2rem;min-width:50%;padding:.5rem;font-size:1rem;font-weight:700;box-shadow:0 .125rem 1rem #336}@keyframes fade-out{0%{opacity:1;margin-top:0}to{opacity:0;margin-top:-100%}}@media (min-width:320px){.score,.toast{padding:.5rem;font-size:1rem}}@media (min-width:375px){.score,.toast{padding:.75rem;font-size:1.25rem}}@media (min-width:490px){.score,.toast{padding:1rem;font-size:1.5rem}}@media (min-width:525px){.score,.toast{padding:1.25rem;font-size:2rem}}