:root{--color-background: #1f2937;--color-text: #d1d5db;--color-main-container: #2e4355;--color-title: #F4D35E;--color-status: #d1d5db;--color-cell: #2f4252;--color-cell-border: #4b5563;--color-cell-disappear: #F4D35E;--color-button-bg: #F4D35E;--color-button-hover: #f59e0b;--color-button-text: #1f2937;--color-x: #f44640;--color-o: #d24b31;--popup-bg: #1f2937;--color-divider: #64748b}body{margin:0;font-family:Courier New,Courier,monospace;background:var(--color-background);color:var(--color-text);display:flex;justify-content:center;align-items:center;height:100vh}.main-container{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:2rem;background:var(--color-main-container);border-radius:16px;box-shadow:0 8px 24px #00000080;max-width:90vw;position:relative}.title{font-size:2.75rem;font-weight:700;color:var(--color-title);margin:.5rem 0}.status{font-size:1.25rem;font-weight:500;color:var(--color-status)}.grid-container{display:grid;grid-template-columns:repeat(3,80px);gap:10px}.cell{width:80px;height:80px;background-color:var(--color-cell);border:2px solid var(--color-cell-border);font-size:2.25rem;font-weight:700;color:var(--color-title);display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:background-color .3s ease,transform .2s ease}.cell:hover{filter:brightness(1.1);transform:scale(1.05)}.reset-button,.rules-button{padding:.6rem 1.4rem;font-size:1rem;font-weight:600;color:var(--color-cell-border);background-color:var(--color-button-bg);border:none;border-radius:8px;cursor:pointer;transition:background-color .2s ease}.reset-button:hover,.rules-button:hover{background-color:var(--color-o)}.opacity-0{opacity:0}.opacity-100{opacity:1;transition:opacity .3s ease-in-out}.rules-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--popup-bg);border:2px solid var(--color-cell-border);padding:1.5rem;border-radius:12px;color:var(--color-text);box-shadow:0 8px 24px #0009;max-width:320px;z-index:10;text-align:center}.rules-popup h2{font-size:1.5rem;margin-bottom:1rem;color:var(--color-title)}.rules-popup p{font-size:.95rem;margin-bottom:1rem;color:var(--color-status)}.close-button{padding:.4rem 1rem;background-color:var(--color-o);color:var(--color-button-text);font-weight:700;border:none;border-radius:6px;cursor:pointer}.close-button:hover{background-color:var(--color-button-hover)}.icon-x{color:var(--color-x);font-size:3rem;stroke-width:2.5}.icon-o{color:var(--color-o);font-size:3.5rem;stroke-width:3}.icon-x,.icon-o{vertical-align:middle}.cell-disappear{background-color:var(--color-cell-disappear)}.cell-winning{background-color:#0d3b66;border:2px solid #0D3B66;animation:pulse-winning 1s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.main-container.bounce{animation:bounce .5s ease-in-out}@keyframes pulse-winning{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}50%{transform:translate(5px)}75%{transform:translate(-5px)}}.main-container.shake{animation:shake .3s ease-in-out 6}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.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:#888}.scoreboard{display:flex;align-items:center;justify-content:center;gap:0rem;margin:auto;border-radius:1rem;box-shadow:0 4px 24px #0002;font-size:1.5rem;font-weight:600;letter-spacing:.05em;color:#f3f4f6;width:-moz-fit-content;width:fit-content;min-width:260px}.score-x,.score-o{display:flex;align-items:center;gap:.75rem;padding:.5rem 1.25rem;border-radius:1rem;transition:background .2s}.score-x{color:var(--color-x)}.score-o{color:var(--color-o)}.score-x-value,.score-o-value{color:var(--color-divider)}.score-divider{font-size:2rem;color:var(--color-divider);font-weight:700;padding:0 .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}