:root{--black: black;--dark: #202020;--dark-hover: #404040;--error: #ff6644;--primary-1: #800000;--primary-2: #008080;--white: white}body,html{background-color:var(--black);color:var(--white);font-family:Source Code Pro,monospace;height:100vh;margin:0;min-width:400px;width:100vw;overflow:hidden;user-select:none;-webkit-user-select:none}h1,h2{align-items:center;display:flex;font-size:initial;margin:0}input{background-color:transparent;border:none;color:var(--white);font-family:Source Code Pro,monospace;font-size:16px;width:32px;padding:16px;outline:none}.material-symbols-rounded{margin:8px}#root{display:flex;flex-direction:column;height:100%;width:100%}#root>div{display:contents}.contents{flex:1 1 0}.button{background-color:var(--dark);border:1px solid var(--white);box-sizing:border-box;border-radius:4px;cursor:pointer;padding:16px 32px;transition:background-color .25s linear}.button:hover{background-color:var(--dark-hover)}.header-button{cursor:pointer}.board{>.header{box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b;display:flex;flex-direction:column;left:0;position:absolute;right:0;top:0;>.header-actions{display:flex;padding:8px;>div>div{align-items:center;display:flex;flex:1 1 0;flex-direction:row;justify-content:center;padding-right:8px;&.header-button{cursor:pointer}}@media screen and (max-width: 500px){>div{display:flex;flex-direction:row;gap:8px}align-items:stretch;flex-direction:column}@media screen and (min-width: 501px){>div{display:contents}flex-direction:row;gap:8px}}>.outcome{padding:16px;text-align:center;&[data-outcome=died]{background-color:var(--primary-1)}&[data-outcome=win]{background-color:var(--primary-2)}}}>.contents{display:grid;font-size:32px;overflow:scroll;padding:50vh 50vw;@media screen and (max-width: 500px){margin-top:96px}@media screen and (min-width: 501px){margin-top:56px}}}.cell{align-items:center;border-radius:4px;cursor:pointer;display:flex;grid-column-end:span 1;grid-row-end:span 1;justify-content:center;margin:2px;transition:background-color .25s linear;&[data-status="0"]{background-color:var(--dark)}&[data-status="1"]{background-color:transparent}&[data-status="3"]{background-color:var(--primary-2);display:inherit;font-size:inherit}&[data-status="4"]{background-color:var(--primary-1);display:inherit;font-size:inherit}@media (hover: hover){&:not([data-status="3"],[data-status="4"]):hover{background-color:var(--dark-hover)}}}.selector{h1{flex-direction:row;height:56px;justify-content:center}h2{height:40px}>.contents{align-items:stretch;display:flex;flex-direction:column;gap:32px;justify-content:center;>.size-selector{display:flex;gap:16px}@media screen and (max-width: 800px){>.size-selector{flex-direction:column}>.size-selector>label>div{flex-direction:row;gap:16px}align-self:stretch;padding:0 8px}@media screen and (min-width: 801px){>.size-selector{flex-direction:row;>label>div{align-items:center;flex-direction:column;justify-content:center}}align-self:center;width:720px}>.custom-inputs{display:contents;>*{align-items:center;display:flex;flex-direction:row;gap:8px;>.input{flex:1 1 0}}}>.start-game{display:flex;flex-direction:row;justify-content:end}}}label.checkbox{align-items:center;cursor:pointer;display:flex;flex-direction:row;gap:8px;>input{display:none}>input+.material-symbols-rounded:before{content:"check_box_outline_blank"}>input:checked~.material-symbols-rounded:before{content:"check_box"}}label.input{align-items:center;background-color:var(--dark);border-bottom:1px solid var(--white);border-top-left-radius:4px;border-top-right-radius:4px;color:var(--white);cursor:text;display:flex;flex-direction:row;padding-right:16px;transition:background-color .25s linear;&[data-invalid=true]{border-color:var(--error);color:var(--error)}&:hover{background-color:var(--dark-hover)}>span{flex-grow:0}>input{flex:1 1 0}}label.radio-button{display:contents;>input{display:none}>div{background-color:var(--dark);border:1px solid var(--dark);box-sizing:border-box;border-radius:4px;cursor:pointer;display:flex;flex:1 1 0;padding:16px;transition:background-color .25s linear}>div:hover{background-color:var(--dark-hover)}>input:checked+div{border:1px solid var(--white)}}