*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;--dark-square-color:#7ee081;--light-square-color:#c3f3c0;--highlighted-square-color:#62a87c;--pip-color:#313b72;--arrow-color:#ff8c42;--gap:.5rem;--square-size:4rem;background-color:#462255;font-family:sans-serif}.button{color:#000;cursor:pointer;background:#fff;border:2px solid #000}.button:hover:not(:disabled){background-color:var(--highlighted-square-color)}.button:disabled{opacity:.5;cursor:default}.footer{text-align:center}.footer a{color:#fff}.row{display:flex}.board-outer{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;position:relative}.board-outer .board-piece,.board-outer .pip,.board-outer .border,.board-outer .check-marker,.board-outer .drag-highlight{pointer-events:none;position:absolute;top:0;left:0}.board-outer .board-piece{width:var(--square-size);height:var(--square-size);transform:translate(calc(var(--x) * 100%), calc((7 - var(--y)) * 100%));object-fit:contain;z-index:2;transition:transform .2s linear}.board-outer .board-piece.dragging{z-index:4;cursor:grabbing;transition:none}.board-outer .board-piece.checkmated{transform:translate(calc(var(--x) * 100%), calc((7 - var(--y)) * 100%)) rotate(90deg)}.board-outer .pip,.board-outer .border,.board-outer .check-marker,.board-outer .drag-highlight{transform:translate(calc(var(--x) * var(--square-size)), calc((7 - var(--y)) * var(--square-size)))}.board-outer .pip{width:calc(var(--square-size) / 4);height:calc(var(--square-size) / 4);background-color:var(--pip-color);left:calc(var(--square-size) * .375);top:calc(var(--square-size) * .375);z-index:3;border-radius:50%}.board-outer .border{width:var(--square-size);height:var(--square-size);background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23313B72'%3e%3cpath%20d='M%201%201%20L%208%201%20L%201%208%20Z%20M%201%2016%20L%208%2023%20L%201%2023%20Z%20M%2016%201%20L%2023%208%20L%2023%201%20Z%20M%2023%2016%20L%2016%2023%20L%2023%2023%20Z'/%3e%3c/svg%3e") 50%/contain no-repeat}.board-outer .check-marker{width:var(--square-size);height:var(--square-size);z-index:1;background:radial-gradient(circle,red,red 15%,#0000 75%);border-radius:50%}.board-outer .drag-highlight{width:var(--square-size);height:var(--square-size);background-color:var(--highlighted-square-color);opacity:.5;z-index:1}.board-outer .arrows-layer{width:calc(8 * var(--square-size));height:calc(8 * var(--square-size));pointer-events:none;z-index:3;position:absolute;top:0;left:0;overflow:visible}.board-outer .arrows-layer .arrow-line{stroke:var(--arrow-color);stroke-width:.2px;stroke-linecap:butt;fill:none;opacity:.7}.board-outer .arrows-layer .arrow-circle{stroke:var(--arrow-color);stroke-width:.2px;fill:none;opacity:.7}.board-outer .arrows-layer .arrow-head{fill:var(--arrow-color);opacity:.7}.board-outer .arrows-layer .arrow-preview{opacity:.5}.board-outer.black .grid{flex-direction:column-reverse;display:flex}.board-outer.black .row{flex-direction:row-reverse}.board-outer.black .board-piece{transform:translate(calc((7 - var(--x)) * 100%), calc(var(--y) * 100%))}.board-outer.black .board-piece.checkmated{transform:translate(calc((7 - var(--x)) * 100%), calc(var(--y) * 100%)) rotate(-90deg)}.board-outer.black .pip,.board-outer.black .border,.board-outer.black .check-marker,.board-outer.black .drag-highlight{transform:translate(calc((7 - var(--x)) * var(--square-size)), calc(var(--y) * var(--square-size)))}.board-outer.black .arrows-layer{transform:rotate(180deg)}.left-column.black{flex-direction:column-reverse;display:flex}.left-column.black .game-notice{order:1}.cell{width:var(--square-size);height:var(--square-size);background-color:var(--light-square-color);touch-action:none;position:relative}.cell.even{background-color:var(--dark-square-color)}.cell.highlighted,.cell.even.highlighted{background-color:var(--highlighted-square-color)}.promotion-dialogue{top:calc(3.25 * var(--square-size));left:calc(1.5 * var(--square-size));z-index:3;background-color:#f5f5f5;border:2px solid #000;position:absolute}.promotion-dialogue button{width:calc(1.25 * var(--square-size));height:calc(1.25 * var(--square-size));padding:calc(var(--square-size) / 4);cursor:pointer;background-color:#0000;border:none}.promotion-dialogue button img{width:calc(.75 * var(--square-size));height:calc(.75 * var(--square-size))}.promotion-dialogue button:hover{background-color:var(--highlighted-square-color)}.promotion-dialogue img{width:var(--square-size);height:var(--square-size);object-fit:contain}.score-widget{background-color:var(--light-square-color);color:#000;border:2px solid #000;flex-direction:column;display:flex}.piece-info{background-color:var(--light-square-color);color:#000;border:2px solid #000;flex-direction:column;gap:.25rem;height:14.5rem;padding:.5rem;display:flex;overflow:hidden}.piece-info-title{font-size:1.2rem;font-weight:700}.piece-info-aliases{opacity:.75;white-space:nowrap;text-overflow:ellipsis;min-height:.9rem;font-size:.75rem;font-style:italic;overflow:hidden}.piece-info-diagram{grid-template-columns:repeat(var(--size,5), minmax(0, 1fr));grid-template-rows:repeat(var(--size,5), minmax(0, 1fr));border:2px solid #000;width:6rem;height:6rem;margin:0 auto;display:grid}.piece-info-tile{background-color:var(--light-square-color);aspect-ratio:1;min-width:0;position:relative}.piece-info-tile.even{background-color:var(--dark-square-color)}.piece-info-piece{object-fit:contain;width:100%;height:100%;position:absolute;inset:0}.piece-info-tile.move:after,.piece-info-tile.capture:after{content:"";pointer-events:none;position:absolute}.piece-info-tile.move:after{background-color:var(--pip-color);border-radius:50%;inset:30%}.piece-info-tile.capture:after{background:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23313B72'%3e%3cpath%20d='M%201%201%20L%208%201%20L%201%208%20Z%20M%201%2016%20L%208%2023%20L%201%2023%20Z%20M%2016%201%20L%2023%208%20L%2023%201%20Z%20M%2023%2016%20L%2016%2023%20L%2023%2023%20Z'/%3e%3c/svg%3e") 50%/contain no-repeat;inset:0}.piece-info-description{height:2.4em;font-size:.8rem;line-height:1.2;overflow:hidden}.piece-info.empty .piece-info-diagram,.score-widget.hidden{display:none}.score{text-align:center;min-height:1.2rem;padding:.5rem;font-size:1.2rem}.result-reason{text-align:center;padding:0 .5rem .5rem;font-size:.8rem}.result-reason[hidden]{display:none}.play-again-button{border:none;border-top:2px solid #000;padding:.5rem;font-size:1rem}#app{justify-content:center;display:flex;container-type:inline-size}#app:has(.left-column){gap:var(--gap);padding:var(--gap);max-width:calc(45.75rem + 2 * var(--gap));grid-template:"board actions""board moves-log"1fr"board piece-info"/1fr 13.25rem;margin-inline:auto;display:grid}.left-column{flex-direction:column;grid-area:board;display:flex}.piece-info{grid-area:piece-info}.moves-log-container{background-color:var(--light-square-color);color:#000;flex-direction:column;grid-area:moves-log;display:flex}.game-actions,.score-widget{grid-area:actions}#app:has(.score-widget:not(.hidden)) .game-actions{display:none}.moves-log-header{display:flex}.moves-log-header button{border-bottom:none;flex-grow:1;width:2rem;height:2rem}.moves-log-header button img{height:2rem}.moves-log-header button:not(:first-child){border-left:none}.moves-log{border:2px solid #000;flex-grow:1;flex-basis:5rem;grid-template-columns:2rem 5rem 5rem;grid-auto-rows:2rem;gap:0 .5rem;display:grid;overflow-y:scroll}.moves-log>*{padding:.2rem .5rem}.moves-log .active{background-color:var(--dark-square-color)}.moves-log :hover{background-color:var(--highlighted-square-color)}label{display:block}label input{margin-right:.5rem}button.play-button{width:100%;margin-top:1rem;padding:1rem;font-size:1.2rem}.ai-options,.online-options{background-color:var(--light-square-color);color:#000;border:2px solid #000;margin-top:.5rem;padding:.75rem}:is(.ai-options,.online-options)[hidden]{display:none}:is(.ai-options,.online-options) h2{margin-bottom:.5rem;font-size:1.2rem}.option-hint{opacity:.8;margin-top:.5rem;font-size:.8rem;font-style:italic}.player-name-input input{width:12rem}.min-turn-time input{width:5rem}.difficulty input[type=range]{width:8rem}.slider{align-items:center;gap:.5rem;display:flex}.slider input[type=range]{flex-grow:1}.slider .slider-value{text-align:center;min-width:3rem;display:inline-block}.radio-group.button-radio{gap:.5rem;display:flex}.radio-group.button-radio label{text-align:center;color:#000;cursor:pointer;background:#fff;border:2px solid #000;flex:1;padding:.5rem;display:block}.radio-group.button-radio label input{display:none}.radio-group.button-radio label:hover{background-color:var(--light-square-color)}.radio-group.button-radio label:has(input:checked){background-color:var(--highlighted-square-color)}.radio-group.button-radio label:has(input:checked):hover{background-color:var(--light-square-color)}.player-bar{width:calc(8 * var(--square-size));justify-content:space-between;align-items:center;padding:.4rem 0;font-size:1.1rem;font-weight:700;display:flex}.player-info{flex-direction:column;gap:.1rem;display:flex}.player-advantage{align-items:center;gap:.05rem;min-height:1.2rem;font-size:.9rem;font-weight:400;display:flex}.advantage-piece{object-fit:contain;filter:invert();width:1.2rem;height:1.2rem}.advantage-value{margin-left:.3rem}.player-clock{text-align:center;border-radius:.2rem;min-width:4.5rem;padding:.1rem .4rem}.player-clock.active{background-color:var(--highlighted-square-color);color:#000}.player-clock.low{color:#8b1a1a}.game-actions,.actions{gap:var(--gap);display:flex}:is(.game-actions,.actions) button{flex:1;height:3rem}.resign-button,.draw-button{flex:1;min-width:0;padding:.4rem;font-size:.9rem}.resign-button.confirming{background-color:#f4b6b6}.draw-button.confirming{background-color:#b6d4f4}.resign-button.abort-button{background-color:#f4e6b6}.game-notice{background-color:var(--light-square-color);color:#000;border:2px solid #000;padding:.4rem;font-size:.8rem}.game-notice[hidden]{display:none}.game-notice.error{background-color:#f4b6b6}.text-max-width{max-width:40rem;margin-top:.5rem}.discoveries{max-width:48rem;padding:1rem}.discovery-category{margin-top:1rem}.discovery-category h2{font-size:1.2rem}.discovery-grid{grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.75rem;margin:.5rem 0 0;display:grid}.discovery-card{background-color:var(--light-square-color);color:#000;flex-direction:column;align-items:center;gap:.25rem;height:9.5rem;padding:.5rem;display:flex;overflow:hidden}.discovery-card:not(.undiscovered){cursor:pointer}.discovery-card:not(.undiscovered):hover,.discovery-card:not(.undiscovered):focus-visible{background-color:var(--highlighted-square-color)}.discovery-card.won{border:3px solid var(--arrow-color)}.discovery-card.undiscovered{background-color:#000}.online-status-text{color:#8b1a1a;margin-top:.5rem;font-weight:700}.discovery-piece{object-fit:contain;width:3rem;height:3rem}.discovery-name{text-align:center;font-weight:700}.discovery-stats{text-align:center;font-size:.8rem}.discovery-opponents{text-align:center;opacity:.8;font-size:.75rem;font-style:italic}.modal-overlay{z-index:10;background-color:#0009;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0;overflow:auto}.piece-modal{background-color:#462255;border:2px solid #000;flex-direction:column;gap:.5rem;width:14rem;padding:.5rem;display:flex}.modal-close{padding:.5rem;font-size:1rem}@media (width<=46.75rem){body{--square-size:calc(100cqw / 8)}#app:has(.left-column){grid-template-rows:repeat(3,auto);grid-template-columns:1fr 1fr;grid-template-areas:"board board""piece-info moves-log""actions actions";max-width:none}.moves-log{grid-template-columns:2rem minmax(0,1fr) minmax(0,1fr)}.moves-log>*{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}}.history-page-element img{width:1rem;height:1rem}.history-page-element a{color:#fff}