:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;background-color:#fff;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{display:flex;place-items:center;height:100%}body,html,#root{margin:0;padding:0;width:100%;overflow-x:hidden;height:100dvh}:root{--blue: #0066e3;--red: #ff7171;--red-outline: #db3434;--green: #45e455;--green-outline: #18ad40;--orange: #ffd877;--orange-outline: #db8f00;--button-bg-color: #e5eeff;--button-bg-color-hovered: #bed5ff}*{box-sizing:border-box}#connect4-canvas{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;touch-action:none}#connect4-canvas:focus{outline:none}.connect4-logo{width:100%;max-width:320px;height:auto;transform:rotate(-6deg);transform-origin:center;margin-top:32px;-webkit-user-select:none;user-select:none;user-drag:none;-webkit-user-drag:none;pointer-events:none}.connect4-home{display:flex;flex-direction:column;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}h1{font-family:Anton,system-ui;font-size:72px}.connect4-title-blue{-webkit-user-select:none;user-select:none;color:var(--blue);-webkit-text-stroke:3px var(--blue-outline);display:inline}.connect4-title-red,.connect4-title-lose{-webkit-user-select:none;user-select:none;color:var(--red);-webkit-text-stroke:3px var(--red-outline);display:inline}.connect4-title-win{-webkit-user-select:none;user-select:none;color:var(--green);-webkit-text-stroke:3px var(--green-outline);display:inline}.connect4-title-tie{-webkit-user-select:none;user-select:none;color:var(--orange);-webkit-text-stroke:3px var(--orange-outline);display:inline}.connect4-menu-container{display:flex;width:100%;flex-direction:column;justify-content:flex-end;align-items:center;padding-inline:32px;padding-block:8px 48px;flex:1}.column{display:flex;justify-content:space-between;flex-direction:column;align-items:center;height:100%}.button-container{display:flex;flex-direction:column;width:200px;gap:16px}button,input,.button-small{font-family:Anton,system-ui;color:var(--blue);font-size:24px;background-color:var(--button-bg-color);border:4px solid var(--blue);width:100%;text-transform:uppercase;-webkit-user-select:none;user-select:none;pointer-events:all;opacity:.9;cursor:pointer}input{text-align:center;cursor:auto;outline:none}button:disabled{opacity:.4;cursor:auto}button:hover:not(:disabled){background-color:var(--button-bg-color-hovered)}.connect4-overlay-clear{pointer-events:none;display:flex;gap:8px;flex-direction:row;justify-content:flex-end;align-items:flex-end;position:absolute;min-width:0;bottom:0;right:0;width:100%;z-index:3;padding:8px;height:fit-content}.button-small{display:flex;justify-content:center;align-items:center;width:fit-content;height:32px;background-color:#e5eeff;font-size:18px;border:2px solid var(--blue);opacity:.9}.info-text{position:absolute;padding:8px;z-index:1;right:0;top:0;font-size:14px;white-space:pre;font-family:Lato,system-ui;font-weight:500;width:100%;text-align:center;color:#000;pointer-events:none;-webkit-user-select:none;user-select:none;height:fit-content;text-shadow:0 0 5px white,0 0 8px white,0 0 11px white,0 0 14px white}.reconnect-screen{position:absolute;left:0;top:0;z-index:10;width:100%;height:100%;pointer-events:none;display:flex;align-items:center;justify-content:center}.reconnect-box{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;padding:8px 16px;border-radius:8px;background:#0000004c;-webkit-user-select:none;user-select:none;pointer-events:none;box-shadow:0 0 8px 4px #0000001a}span{background-color:transparent}h2{pointer-events:none;font-size:18px;white-space:pre;font-family:Anton,system-ui;width:100%;text-align:center;mix-blend-mode:difference;color:#fff;margin:0}h4{margin-block:0;margin-bottom:4px}ol{padding:0;margin:0;list-style-position:inside}