:root{--dark: #1c1b22;--light: #f2f2f2;--back: #e9e9ed;--hover: #d0d0d7;--active: #b1b1b9;--shadow-color: #b1b1b969;--shadow: 2px 2px 1px 0px var(--shadow-color);--shadow-lg: 4px 4px 1px 0px var(--shadow-color)}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--light: #1c1b22;--dark: #f2f2f2;--back: #2b2a33;--hover: #52525e;--active: #5b5b66;--shadow-color: #5b5b6669}}body,html{height:100%}body{margin:0;display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;font-family:system-ui;text-align:center;background-color:var(--light)}header,footer{display:flex;align-items:center;justify-content:space-around;padding:1rem}header>*{margin:0}button{text-align:inherit;color:inherit;background-color:var(--back);padding:.45rem 1rem;margin:0;border:0;border-radius:.25rem;font-size:inherit;user-select:none;-webkit-user-select:none}button:hover{background-color:var(--hover)}button:active{background-color:var(--active)}a{color:inherit}*{box-sizing:border-box}#board{position:absolute;max-inline-size:25rem;max-block-size:calc(100% - 7rem);aspect-ratio:1;margin:auto;inset:1rem;display:grid}.tile{width:25%;height:25%;font-size:3.75vh;position:absolute;border-radius:1rem;border:.4rem solid var(--light);transition:transform,.15s;will-change:transform;padding:0;background-color:var(--shadow-color)}footer nav{color-scheme:dark;position:absolute;left:calc(50% - 150px);top:calc(50% - 25px);display:flex;flex-flow:column nowrap;width:300px}footer nav.playing{top:auto;left:auto;position:relative;flex-flow:row nowrap;justify-content:center;gap:1rem;width:100%}footer nav fieldset{display:flex;justify-content:space-between;border:0;margin:0;padding:1rem 0}footer nav label{flex:0 1 min-content}input,select{border:0;padding:.25rem;color:var(--dark);background-color:var(--light);font-size:inherit;border-radius:.15rem}select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%205'%3E%3Cpath%20fill='currentColor'%20d='M2%200L0%202h4zm0%205L0%203h4z'/%3E%3C/svg%3E");background-position:right .5em center;background-repeat:no-repeat;background-size:.5em .75em;padding-right:2em}footer nav button{cursor:pointer;position:relative;box-shadow:var(--shadow)}footer nav button.lg{font-size:2rem;box-shadow:var(--shadow-lg)}footer nav button:active{top:2px;left:2px;box-shadow:none}