:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:var(--color-text);background-color:var(--color-bg-lighter);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-primary);text-decoration:inherit}a:hover{color:var(--color-primary-hover)}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:var(--radius-md);border:1px solid transparent;padding:var(--spacing-sm) var(--spacing-md);font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--color-primary)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:var(--color-primary)}button{background-color:#f9f9f9}}:root{--color-bg-lighter: #242424;--color-bg: #1e1e1e;--color-primary: #646cff;--color-primary-hover: #535bf2;--color-secondary: #333;--color-text: rgba(255, 255, 255, .87);--color-border: #444;--color-muted: #888;--color-go-board: #dba15f;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 2rem;--radius-md: 8px;--shadow-md: 0 0 10px rgba(0, 0, 0, .5)}#root{width:100%;margin:0 auto;padding:2rem;text-align:center}@media (max-width: 640px){#root{padding:1rem}}.app-container{display:flex;flex-direction:column;align-items:center;background-color:var(--color-bg);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-md);animation:fade-in .6s ease-out}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:var(--color-muted)}.game-container{display:flex;flex-direction:column;align-items:center;animation:fade-in .5s ease-out}.game-status{margin-top:var(--spacing-md);font-weight:700}.move-history{margin-top:var(--spacing-sm);padding-left:1.2rem;text-align:left}.start-buttons{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-sm)}.timers{display:flex;gap:var(--spacing-md);margin-top:var(--spacing-sm)}.timers div{font-weight:700}button[disabled]{opacity:.5;cursor:not-allowed}.menu-toggle{margin-bottom:var(--spacing-md)}.match-manager{margin-bottom:var(--spacing-lg)}.connect4-board{display:flex;flex-direction:column;border:2px solid var(--color-secondary)}.c4-row{display:flex}.c4-cell{border:1px solid var(--color-border);background-color:#222;cursor:pointer}.c4-cell.red{background-color:red}.c4-cell.yellow{background-color:#ff0}.go-board{position:relative;border:2px solid var(--color-secondary);background-color:var(--color-go-board)}.go-point{position:absolute;cursor:pointer}.go-stone{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%}.go-stone.black{background-color:#000}.go-stone.white{background-color:#fff}.game-carousel{display:flex;align-items:center;justify-content:center;gap:var(--spacing-md);margin:var(--spacing-md) 0}.game-slide{display:flex;flex-direction:column;align-items:center;padding:.5rem 1rem;border:1px solid var(--color-border);border-radius:var(--radius-md);min-width:80px;transition:transform .3s ease}.game-slide.slide-right{animation:slide-right .3s ease-out}.game-slide.slide-left{animation:slide-left .3s ease-out}.game-slide.active{background-color:var(--color-secondary);border-color:var(--color-primary);transform:scale(1.05)}.game-carousel button{background:none;border:none;color:inherit;font-size:2rem;transition:transform .2s ease}@keyframes fade-in{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-right{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slide-left{0%{opacity:0;transform:translate(-100%)}to{opacity:1;transform:translate(0)}}.game-carousel button:active{transform:scale(.9)}.game-carousel button:hover{transform:scale(1.2)}.side-panel,.game-panel{width:100%}@media (min-width: 768px){.app-container{flex-direction:row;align-items:flex-start}.side-panel{max-width:350px;margin-right:var(--spacing-lg)}.game-panel{flex:1}}@media (min-width: 1024px){.side-panel{max-width:400px}}