.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media(prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin infinite 20s linear}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.gameBoard{display:grid;grid-template-columns:repeat(5,100px);grid-template-rows:repeat(5,100px);justify-content:center;padding-top:50px}.result{color:red;text-transform:uppercase;font-size:xx-large}.controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;margin:6px auto;padding:0 8px;max-width:500px}.sidePicker{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px}.boardArea{position:relative;display:flex;justify-content:center;overflow:hidden}.gameOverOverlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#ffffffd1}.gameOverText{font-size:30px;font-weight:800;text-transform:uppercase;color:#c4661a;text-align:center;padding:0 12px}.newGameButton{font-size:16px;padding:8px 18px;border:none;border-radius:8px;background:#f6821f;color:#fff;cursor:pointer}@media(max-width:560px){.gameBoard{transform:scale(min(1,calc((100vw - 24px)/530px)));transform-origin:top center}.boardArea{height:min(550px,calc(1.04*(100vw - 24px)))}}.swapButton{font-size:1.1rem;line-height:1;padding:2px 8px;cursor:pointer}.goatsEatenWrapper,.nonLastGoatsEaten{margin:auto;width:90px;height:20px;text-align:left}.goatLastEatenWrapper{position:relative;margin:auto;width:90px;height:20px}.goatLastEaten.applyMove{font-size:50px}.goatLastEaten{transition:all 2s ease-in-out;margin:auto;position:absolute;left:0;right:0;bottom:21px;font-size:16px}.goatToPlace{cursor:move}.tiger:after{content:"🐅"}.goat:after{content:"🐐"}.tiger:after,.goat:after{font-size:50px}.piece{right:65px;bottom:75px;position:absolute;cursor:move;transition:all 1s;z-index:5}.piece.isDragging{opacity:.5;cursor:move}.square{position:relative}.visibleSquare{border:2px solid black}.diagBackward{background:linear-gradient(to top right,#fff calc(50% - 2px),#000,#fff calc(50% + 2px))}.diagForward{background:linear-gradient(to top left,#fff calc(50% - 2px),#000,#fff calc(50% + 2px))}.target{right:50px;bottom:50px;position:absolute;width:100px;height:100px}.target.isOver{background:#ff0;opacity:.25}.target.cannotDrop{background:red;opacity:.25}.target.isUnderSelf{background:none;opacity:1}.nav{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;max-width:720px;margin:0 auto 12px;padding:10px 16px;border-bottom:1px solid #ddd}.navTitle{font-weight:700;font-size:18px}.navLinks{display:flex;gap:6px}.navLink{text-decoration:none;color:#333;padding:6px 12px;border-radius:6px}.navLink:hover{background:#f0f0f0}.navLink.active{background:#f6821f;color:#fff}.page{max-width:720px;margin:0 auto;padding:0 20px 60px;text-align:left;line-height:1.6}.page h1{font-size:26px;margin-bottom:4px}.page h2{font-size:19px;margin-top:28px;border-bottom:1px solid #eee;padding-bottom:4px}.page code{background:#f3f3f3;border-radius:4px;padding:1px 5px;font-size:.9em}.page a{color:#c4661a}.ladder{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}.ladder th,.ladder td{text-align:left;padding:7px 9px;border-bottom:1px solid #eee;vertical-align:top}.ladder th{color:#777;font-size:12px;text-transform:uppercase;letter-spacing:.04em}.ladder .elo{font-weight:700;font-variant-numeric:tabular-nums}.ladder .wdl{white-space:nowrap;font-variant-numeric:tabular-nums;color:#555}.ladder .desc{color:#444}.ladder tr.aiRow{background:#fff7ee}.ladder tr.aiRow code{background:#f6821f;color:#fff}.heatmap{margin:14px 0 6px}.heatmap .heatmapTopAxis{font-size:12px;color:#777;margin-left:28px;margin-bottom:4px}.heatmap table{border-collapse:collapse}.heatmap th{font-size:12px;color:#777;padding:2px 6px;text-align:center}.heatmap th.corner{width:24px}.heatmap td.cell{width:40px;height:40px;text-align:center;font-size:13px;font-weight:600;color:#1a1205;border:1px solid #fff;font-variant-numeric:tabular-nums}.heatmap td.cell.diag{outline:2px solid #222;outline-offset:-2px}.heatmap .heatmapLegend{font-size:12px;color:#777;margin-top:6px}.heatmap .heatmapLeftAxis{font-weight:600;margin-right:8px}body{margin:0;overflow-x:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}