#root{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.modalOverlay{position:absolute;top:1.5rem;z-index:1000}.promo--modal{position:absolute;pointer-events:auto}.promotionOptions{display:flex;flex-direction:column;width:calc((70vh - 3rem)/8);border-radius:4px;overflow:hidden;position:relative}.promotionButton{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;border-radius:0;outline:2px solid darkgray}.promotionButton:hover{transition:.2s ease-in-out;background-color:#ddd}.promo--dark{background-color:#1a1a1a}.promo--light{background-color:#f3f3f3}.board{display:grid;grid-template:repeat(8,1fr) / repeat(8,1fr);box-sizing:border-box;aspect-ratio:1;height:100%;padding:1.5rem;background-color:var(--boardBg);border-radius:16px;box-shadow:0 6px 16px #00000080}.cell{position:relative;display:flex;justify-content:center;align-items:center;aspect-ratio:1;transition:background-color .2s;border-radius:0;border:0px;padding:0;cursor:default}.cell:hover{border-color:none}.cell:focus,.cell:focus-visible{outline:none}.cell.light{background-color:var(--lightSquare)}.cell.dark{background-color:var(--darkSquare)}.pieceWrapper{position:absolute;width:100%;aspect-ratio:1;object-fit:contain;display:flex;align-items:center;justify-content:center;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none}.piece{width:95%;aspect-ratio:1;object-fit:contain;cursor:grab;transition:transform .2s;z-index:10;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none}.piece:hover{cursor:grab}.piece:active{cursor:grabbing;transform:scale(1.05)}.rowId,.colId{position:absolute;font-family:Segoe UI,sans-serif;font-weight:700;font-size:var(--labelSize);color:var(--labelColor);-webkit-user-select:none;user-select:none;pointer-events:none}.rowId{bottom:0%;right:5%}.colId{left:5%;top:5%}.rowId.light,.colId.light{color:var(--darkSquare)}.rowId.dark,.colId.dark{color:var(--lightSquare)}.selectedCover{position:absolute;top:0;right:0;bottom:0;left:0;background-color:var(--selection);pointer-events:none;border-radius:4px}:root{--offBlack: #1a1a1a;--lightSlate: rgb(84, 129, 126)}.game-history-modal{padding:20px;height:85%;overflow-y:scroll;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;width:100%}.game-card{background-color:#1e1e1e;border:1px solid #333;border-radius:12px;padding:16px;transition:transform .2s ease,background-color .2s ease;cursor:pointer}.game-card:hover{background-color:#292929;transform:scale(1.01)}.game-info,.game-meta{display:flex;justify-content:space-between;margin-bottom:4px}.game-title{font-weight:700;color:#f0f0f0;margin:0}.game-result{font-weight:700;margin:0}.game-result.Win{color:#63aa66}.game-result.Loss{color:#e67169}.game-result.Draw{color:#eba948}.game-moves,.engine-flag{color:#ccc;font-size:.9rem;margin:0}.engine-flag{font-style:italic;color:#9c27b0}.modalWrap{position:absolute;width:100vw;height:100vh;background-color:#0000004d;z-index:25;display:flex;justify-content:center;align-items:center}.modalBody{position:relative;min-width:500px;min-height:400px;background-color:#2f4f4f;height:50vh;width:40vw;border-radius:20px;border:10px solid black;padding:10px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;justify-content:start;align-items:center}.close{position:absolute;background-color:transparent;padding:5px;right:10px;top:5px;font-size:1.5rem;box-sizing:border-box;outline:none;border:none}.close:hover{color:red;transition:.2s ease-in-out}.modalHeader{font-size:2rem;box-sizing:border-box;margin:0 0 8px;height:10%;text-decoration:underline;text-underline-offset:4px;width:100%}.battleEngines{border-radius:8px;max-width:500px;display:flex;flex-direction:column;gap:1.25rem}.engineSettingsWrap{display:grid;grid-template-columns:1fr 1fr;width:100%}.engineSettingPanel{display:flex;flex-wrap:wrap;gap:var(--gap-size);margin-bottom:1rem;padding:1rem}#one.engineSettingPanel{border-right:4px solid var(--darkSquare)}.engineSettingPanel .engine,.engineSettingPanel .labelWrap{display:flex;flex-direction:column;flex:1 1 120px}.modalLabel{font-size:var(--label-size);font-weight:600;color:var(--label-color);margin-bottom:.25rem}.modalSelect,.numInput{padding:var(--input-padding);font-size:1rem;border:3px solid var(--input-border);border-radius:var(--input-radius);background-color:var(--input-bg);color:var(--engine-text)}.modalSelect:focus,.numInput:focus{outline:none;border-color:var(--input-focus-border);background-color:var(--lightSquare)}.modalSelect,.numInput{width:100%;box-sizing:border-box}.finalStats{border:2px solid var(--card-border);border-radius:var(--card-radius);box-shadow:0 6px 16px var(--card-shadow);color:var(--text-primary);padding:1rem;width:100%;max-width:400px;margin:0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.versusHeader{font-size:1.25rem;font-weight:600;text-align:center;margin:0}.versusHeader .vs{color:var(--accent);margin:0 .5rem}.summaryHeader{font-size:1.15rem;font-weight:500;margin:0;text-align:center;color:var(--text-secondary)}.statsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem;margin:0;padding:0;width:100%}.statItem{display:flex;flex-direction:column;background:#ffffff0d;padding:.2rem;border-radius:8px;text-align:center}.statItem dt{font-size:.85rem;color:var(--text-secondary);margin-bottom:.25rem}.statItem dd{font-size:1.1rem;font-weight:700;margin:0;color:var(--text-primary)}.fullWidth{grid-column:1 / -1}.resetBtn{align-self:center;padding:.75rem 1.5rem;font-size:1rem;border:none;border-radius:8px;background:var(--accent);color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s}.resetBtn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f19f4180}.loadingScreen{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;color:var(--text-primary);z-index:100}.spinner{width:3rem;aspect-ratio:1;border:.4rem solid rgba(255,255,255,.2);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.loadingText{font-size:1.25rem;font-weight:500;text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.newGameBody{height:85%;display:flex;flex-direction:column;gap:12px;width:100%}legend{font-size:1rem;font-weight:600;margin-bottom:.5rem;color:var(--legend-text)}.bottomRowWrap{display:flex;justify-content:space-around;align-items:center}.engineWrap{border:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--engine-gap)}.engine-selector{border:none;padding:0;margin:0;min-height:125px;overflow-y:scroll;border-radius:4px}.engine-selector::-webkit-scrollbar{width:4px}.engine-selector::-webkit-scrollbar-thumb{background:var(--darkSquare);border-radius:4px}.engineOption{position:relative;display:flex;flex-direction:column;justify-content:start;padding:.5rem;background:var(--engine-bg);border:3px solid var(--engine-border);border-radius:var(--engine-radius);cursor:pointer;box-sizing:border-box}.engineOption:hover{background:var(--engine-hover)}.engineOption.selected{background:var(--lightSquare);border-color:var(--darkSquare)}.engineOption input{position:absolute;opacity:0;width:0;height:0}.engineName{font-size:1rem;font-weight:600;color:var(--engine-text);margin-bottom:.25rem}.engineDesc{font-size:.8rem;color:var(--engine-desc);line-height:1.4}.side-selector{display:flex;gap:1rem;border:none;justify-content:start;align-items:center;margin:0;box-sizing:border-box;padding:0}.option{position:relative;cursor:pointer;height:100%;aspect-ratio:1/1;padding:4px;border-radius:12px;box-sizing:border-box;border:3px solid transparent}.option input{position:absolute;opacity:0;width:0;height:0}.option .newGameIcon{aspect-ratio:1/1;display:flex;justify-content:center;align-items:center}.option.selected{box-sizing:border-box;border-color:var(--darkSquare);background-color:var(--lightSquare)}.depthTimeWrap{display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;gap:var(--gap-size);height:25%;margin-bottom:1rem}.depthTimeWrap .form-group{display:flex;flex-direction:column;max-width:200px;position:relative}.depthTimeWrap .form-group label{font-size:var(--label-size);font-weight:600;color:var(--legend-text);margin-bottom:.25rem}.depthTimeWrap .form-group input{padding:var(--input-padding);font-size:1rem;border:3px solid var(--input-border);border-radius:var(--input-radius);background-color:var(--input-bg);color:var(--engine-text)}.depthTimeWrap .form-group input:focus{outline:none;border-color:var(--input-focus-border)}.depthWarning{position:absolute;top:80%;font-size:.7rem;color:var(--warning-color)}.modal-actions{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1.5rem}.btn{padding:.5rem 1rem;font-size:1rem;border:none;border-radius:6px;cursor:pointer;color:var(--engine-text)}.btn.cancel{background-color:var(--engine-bg);border:3px solid var(--engine-border);color:#333}.btn.cancel:hover{background-color:#d5d5d5}.btn.primary{background-color:var(--lightSquare);border:3px solid var(--darkSquare)}.btn.primary:hover{background-color:var(--lightSquareHover)}:root{--legend-text: #ddd;--engine-bg: #f9f9f9;--engine-border: #ddd;--engine-hover: #eef2f5;--engine-selected-bg: #e0f7fa;--engine-selected-border: #26c6da;--engine-text: #1b1b1b;--engine-desc: #666;--engine-radius: 8px;--engine-gap: 1rem;--lightSquareHover: #e4c387;--input-bg: #fff;--input-border: #ccc;--input-focus-border: #9c7452;--input-radius: 6px;--input-padding: .5rem;--label-size: .9rem;--gap-size: 1rem;--warning-color: #efa300;--darkSquare: #9c7452;--lightSquare: #f0d198;--boardBg: #674628;--highlight: rgba(255, 255, 255, .2);--selection: rgba(50, 150, 250, .4);--labelColor: #4d2709;--labelSize: 1rem;--card-bg: #2f4f4f;--card-border: #1e2d2d;--card-radius: 12px;--card-shadow: rgba(0, 0, 0, .5);--text-primary: #f0f0f0;--text-secondary: #ccc;--accent: #f08383;--gap: 1rem}.body{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#1e1e1e;font-family:Segoe UI,sans-serif}.gameWrap{display:flex;gap:4rem;height:70vh;position:relative}.sidebar{position:relative;box-sizing:border-box;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;width:30vh;height:100%;background-color:#355a5a;padding:20px 20px 5px;border-radius:16px;border:5px solid black;box-shadow:0 4px 12px #0006;color:#f0f0f0}.turnText{font-size:1.5rem;font-weight:700;box-sizing:border-box;padding:8px;margin-bottom:auto;align-self:center;width:100%;display:flex;justify-content:center;border-bottom:2px solid black}.moveList{display:flex;flex-direction:column;width:100%;height:70%;overflow-y:auto;gap:4px;padding:2px;box-sizing:border-box}.moveList::-webkit-scrollbar{width:6px}.moveList::-webkit-scrollbar-thumb{background:#767676;border-radius:4px}.moveNum{font-weight:700;color:#a7a7a7;cursor:default}.pastMove{box-sizing:border-box;display:grid;grid-template-columns:1fr 2fr 2fr;cursor:pointer;border-radius:6px;column-gap:4px;transition:background-color .2s}.move,.moveNum{box-sizing:border-box;padding:2px 4px}.move{background-color:transparent}.move:hover{background-color:#ffffff0d}.move.highlighted,.move.highlighted:hover{background-color:#ffffff26}.moveArrows{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:.3rem}.iconBtnWrap{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.sidebarIconBtn{padding:0;aspect-ratio:1 / 1;border:none;background:none;display:flex;justify-content:center;align-items:center;transition:transform .2s ease;cursor:pointer}.sidebarIconBtn:hover{transform:scale(1.1)}.sidebarIcon{width:60%;aspect-ratio:1/1}.sidebarIconBtn.moveArrow{min-width:15%}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}
