:root{--primary: #4c7cea;--secondary: #e4c076;--neutral: #dedede;--text: #3f0a1d;--text-primary: #eeeeee;--primary-10: color-mix(in srgb, var(--primary) 10%, transparent);--primary-20: color-mix(in srgb, var(--primary) 20%, transparent);--primary-40: color-mix(in srgb, var(--primary) 40%, transparent);--primary-60: color-mix(in srgb, var(--primary) 60%, transparent);--secondary-10: color-mix(in srgb, var(--secondary) 10%, transparent);--secondary-20: color-mix(in srgb, var(--secondary) 20%, transparent);--secondary-40: color-mix(in srgb, var(--secondary) 40%, transparent);--secondary-60: color-mix(in srgb, var(--secondary) 60%, transparent);--neutral-40: color-mix(in srgb, var(--neutral) 40%, transparent);--neutral-20: color-mix(in srgb, var(--neutral) 20%, transparent)}.players{display:grid;grid-template-columns:50% 50%;height:1.2em;padding:.1em}.player{border-radius:1em;padding-left:1.5em}.c4-board{position:relative;width:100%;padding-bottom:calc(100% * var(--board-height) / var(--board-width));display:block;overflow:hidden;background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='st'><path d='M 1,1 L 1,99 99,99 99,1 Z M 50,5 A 45,45 0 1,1 50,95 45,45 0 1,1 50,5 Z' style='fill:%23a6a5c9; stroke:%238685a2; stroke-width:2;'/></svg>");background-repeat:repeat;background-size:calc(100% / var(--board-width)) calc(100% / var(--board-height))}.column{position:absolute;height:100%;top:0;width:calc(100% / var(--board-width));left:calc(var(--x) * 100% / var(--board-width))}.playable{visibility:hidden}.column:hover .playable{visibility:visible;opacity:.25}.cell{position:absolute;height:calc(100% / var(--board-height));top:calc(var(--y) * 100% / var(--board-height));width:100%;left:0;z-index:-1}.token{animation-name:drop;animation-timing-function:cubic-bezier(.55,.09,.68,.53);animation-duration:calc(.2s * var(--duration))}@keyframes drop{0%{top:calc(-100% / var(--board-height))}to{top:calc(var(--y) * 100% / var(--board-height))}}.player1{background-image:url("data:image/svg+xml,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100'><defs><linearGradient id='redgradient' x1='0%' y1='0%' x2='0%' y2='100%'><stop offset='0%'   stop-color='%23761107' stop-opacity='1'/><stop offset='100%' stop-color='%23db210e' stop-opacity='1'/></linearGradient><linearGradient id='invredgradient' href='%23redgradient' y1='100%' y2='0%'/><linearGradient id='transparentgradient' x1='0%' y1='0%' x2='0%' y2='100%'><stop offset='0%'   stop-color='%23ffffff' stop-opacity='0.6'/><stop offset='100%' stop-color='%23ffffff' stop-opacity='0.1'/></linearGradient></defs><circle cx='50' cy='50' r='45' style='fill:url(%23redgradient); stroke:url(%23invredgradient); stroke-width: 5;' /><path d='m 82,39 c 11,0 -3,-29 -32,-29 -29,0 -39,27 -34,27 5,0 9,2 17,4 14,4 30,-3 37,-4 10,-1 7,2 12,2 z' style='fill:url(%23transparentgradient);'/></svg>");background-repeat:no-repeat}.player2{background-image:url("data:image/svg+xml,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100'><defs><linearGradient id='redgradient' x1='0%' y1='0%' x2='0%' y2='100%'><stop offset='0%'   stop-color='%23787800' stop-opacity='1'/><stop offset='100%' stop-color='%23ffff21' stop-opacity='1'/></linearGradient><linearGradient id='invredgradient' href='%23redgradient' y1='100%' y2='0%'/><linearGradient id='transparentgradient' x1='0%' y1='0%' x2='0%' y2='100%'><stop offset='0%'   stop-color='%23ffffff' stop-opacity='0.6'/><stop offset='100%' stop-color='%23ffffff' stop-opacity='0.1'/></linearGradient></defs><circle cx='50' cy='50' r='45' style='fill:url(%23redgradient); stroke:url(%23invredgradient); stroke-width: 5;' /><path d='m 82,39 c 11,0 -3,-29 -32,-29 -29,0 -39,27 -34,27 5,0 9,2 17,4 14,4 30,-3 37,-4 10,-1 7,2 12,2 z' style='fill:url(%23transparentgradient);'/></svg>");background-repeat:no-repeat}.victory{background-image:url("data:image/svg+xml,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 100 100'><circle cx='50' cy='50' r='10' fill='back' /></svg>");background-repeat:no-repeat;animation-name:show;animation-timing-function:step-end;animation-duration:calc(.2s * var(--duration))}@keyframes show{0%{opacity:0}to{opacity:1}}.modal{background-color:var(--secondary);opacity:.95;border-style:solid;border-color:var(--secondary);border-width:1px;border-radius:10px;min-width:25%;padding:0}.modal-header{padding:.75rem 1.25rem;background-color:#0003;border-bottom:1px solid rgba(0,0,0,.125);font-weight:700;font-size:large;display:flex;justify-content:center}.modal-footer{padding:1.25rem;display:flex;justify-content:space-around}button{border-radius:5px;border-width:1px;margin:.25rem .125rem;padding:1rem;font-size:large}button.primary{background-color:var(--primary);color:var(--text-primary)}button.primary:enabled:hover{background-color:color-mix(in srgb,var(--primary) 90%,black)}button.secondary{border-color:var(--secondary)}button.secondary:enabled:hover,button.secondary.selected{background-color:var(--secondary)}button.neutral{background-color:var(--neutral-40);color:var(--text);border-color:var(--neutral)}button:enabled{cursor:pointer}.square{width:2rem;height:2rem;padding:.1rem}#history{border-spacing:0;table-layout:fixed}#history tr>td:first-of-type{width:2rem;font-weight:700}#history tr>td:nth-of-type(2),#history tr>td:nth-of-type(3){width:5rem;cursor:pointer;empty-cells:hide;padding:2px}#history tr>td:nth-of-type(2):hover,#history tr>td:nth-of-type(3):hover{background-color:var(--secondary-40)}#history tr>td.current-position{background-color:var(--secondary)}#history tr:nth-of-type(2n){background-color:#0000001a}#game-panel{box-sizing:border-box;background-color:var(--primary-10);padding:5px;box-shadow:0 5px 5px 5px var(--primary-20);border-radius:5px;flex-grow:1;flex-shrink:1;flex-basis:min-content;overflow-x:hidden;position:relative;display:flex;flex-direction:column;width:100%;gap:.5rem}@media (min-width: 768px){#game-panel{min-width:250px;max-width:500px;height:100%}}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji"}