:root{--bg-color: white;--color: black;--board-length: min(80vmin, 95vw, calc(100vh - 8rem) );--creator-size: 15;-webkit-user-select:none;user-select:none}.dark-mode{--bg-color: black;--color: white}body{margin:0;background-color:var(--bg-color);color:var(--color);text-align:center;display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}footer p{margin:0}.footer-brand{letter-spacing:.02em}main{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.uploader{display:flex;flex-direction:column;align-items:center;gap:.5rem;max-width:min(320px,90vw);text-align:center}.uploader-title{margin:0;text-transform:uppercase;letter-spacing:.08em;font-size:1rem}.uploader-instructions{margin:0;font-size:.9rem;line-height:1.4}.uploader-button{border:1px solid var(--color);padding:.4rem .75rem;border-radius:6px;text-transform:uppercase;letter-spacing:.08em}.uploader-status{min-height:1.4rem;margin:0;font-size:.85rem}.uploader-status.processing{color:#6b6b6b}.uploader-status.success{color:#1f6b2a}.uploader-status.error{color:#b81b2c}.dark-mode .uploader-status.processing{color:#aaa}.dark-mode .uploader-status.success{color:#7ddf88}.dark-mode .uploader-status.error{color:#ff6e7c}.board-area{display:flex;align-items:center;justify-content:center;width:100%;padding:0}.creator-board{border-collapse:collapse;width:var(--board-length);height:var(--board-length);background-color:var(--bg-color);color:var(--color);table-layout:fixed}.creator-board tr{padding:0;margin:0}.creator-cell{width:calc(var(--board-length) / var(--creator-size));height:calc(var(--board-length) / var(--creator-size));border:1px solid var(--color);padding:0;margin:0;background-color:var(--bg-color);cursor:pointer}.creator-cell:hover{background-color:#80808000}.creator-cell.filled{background-color:#00f}.dark-mode .creator-cell.filled{background-color:red}.creator-board tr:first-child .creator-cell{border-top-width:3px}.creator-board tr:nth-child(5n+1) .creator-cell{border-top-width:3px}.creator-board tr:last-child .creator-cell{border-bottom-width:3px}.creator-board .creator-cell:first-child{border-left-width:3px}.creator-board .creator-cell:nth-child(5n+1){border-left-width:3px}.creator-board .creator-cell:last-child{border-right-width:3px}.settings-group{display:flex;flex-direction:row;align-items:center;gap:.5rem;position:relative}.settings-button,.difficulty-button,button{cursor:pointer;margin:0;padding:0;font-size:16px;background-color:var(--bg-color);color:var(--color);border:none}.settings-button:hover,.difficulty-button:hover,button:hover{background-color:gray}.settings-panel{position:absolute;bottom:calc(100% + 4px);left:0;display:flex;flex-direction:column;background-color:var(--bg-color);font-size:1rem;width:max-content;max-width:min(26rem,calc(100vw - 2rem));padding:0}.settings-panel.hidden{display:none}.load-panel{position:fixed;left:50%;transform:translate(-50%);bottom:9rem;background:var(--bg-color);color:var(--color)}.load-panel.hidden{display:none}.difficulty-buttons-grid{display:grid;grid-template-columns:repeat(6,max-content);column-gap:.5rem;row-gap:.5rem;justify-items:start;align-items:center}.difficulty-button{padding:0;display:inline-block;width:auto;inline-size:max-content;justify-self:start}.difficulty-button.active{background-color:#00f;color:#00f}.dark-mode .difficulty-button.active{background-color:red;color:red}.hidden{display:none}.file-input-hidden{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1}@media (max-width: 768px){.settings-panel{left:50%;transform:translate(-50%)}}@media (max-width: 540px){.difficulty-buttons-grid{grid-template-columns:repeat(3,max-content);column-gap:.5rem;row-gap:.5rem}}