@import"https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Caveat:wght@400;500;600;700&display=swap";:root{--bg-paper: #fefcf3;--bg-card: #fffef9;--line-color: #add8e6;--line-color-light: rgba(173, 216, 230, .4);--margin-red: #e88e8e;--border-color: #c9c5b8;--text-primary: #2d3436;--text-secondary: #636e72;--text-muted: #95a5a6;--pencil-gray: #4a4a4a;--player-x: #e74c3c;--player-o: #2980b9;--glow-x: rgba(231, 76, 60, .3);--glow-o: rgba(41, 128, 185, .3);--accent-green: #27ae60}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}body{font-family:Patrick Hand,cursive;background:var(--bg-paper);color:var(--text-primary);line-height:1.6;overflow-x:hidden}#root{min-height:100%;display:flex}.app{min-height:100vh;width:100%;display:flex;align-items:center;justify-content:center;padding:1rem;background:repeating-linear-gradient(to bottom,transparent,transparent 27px,var(--line-color) 27px,var(--line-color) 28px),linear-gradient(to right,transparent 60px,var(--margin-red) 60px,var(--margin-red) 62px,transparent 62px),var(--bg-paper);background-attachment:local}.game-wrapper{width:100%;max-width:720px;display:flex;flex-direction:column;gap:1.5rem;padding-left:20px}.header{text-align:center}.header h1{font-family:Caveat,cursive;font-size:3.5rem;font-weight:700;color:var(--pencil-gray);letter-spacing:.02em;margin-bottom:.25rem;text-shadow:1px 1px 0 rgba(0,0,0,.1);transform:rotate(-1deg)}.subtitle{font-family:Patrick Hand,cursive;color:var(--text-secondary);font-size:1.1rem;font-weight:400;letter-spacing:.05em}.game-container{background:var(--bg-card);border:2px solid var(--pencil-gray);border-radius:4px;padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem;box-shadow:3px 3px #0000001a,inset 0 0 30px #00000005;position:relative}.game-container:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border:2px solid var(--pencil-gray);border-radius:6px;transform:rotate(.3deg);pointer-events:none;opacity:.3}.board-wrapper{width:100%;aspect-ratio:1;overflow:auto;border-radius:2px;background:repeating-linear-gradient(to bottom,transparent,transparent 19px,var(--line-color-light) 19px,var(--line-color-light) 20px),var(--bg-paper);border:2px solid var(--pencil-gray);box-shadow:inset 2px 2px 4px #0000000d}.board{display:grid;width:max(100%,600px);height:max(100%,600px);gap:0}.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid var(--pencil-gray);cursor:pointer;transition:all .15s ease;position:relative;min-width:20px;min-height:20px;border-style:solid;border-width:1px;opacity:.6}.cell:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px dashed transparent;transition:border-color .2s}.cell:hover:not(.occupied){background:#27ae601a;opacity:1}.cell:hover:not(.occupied):before{border-color:var(--accent-green)}.cell.possible-move{background:#27ae6026;opacity:1}.cell.possible-move:after{content:"•";position:absolute;color:var(--accent-green);font-size:1.5em;opacity:.5}.cell.possible-move:hover{background:#27ae6040}.cell.occupied{cursor:not-allowed;opacity:1}.marker{font-family:Caveat,cursive;font-size:clamp(14px,2vw,20px);font-weight:700;animation:scribble .3s ease-out}.cell.X .marker{color:var(--player-x);text-shadow:1px 1px 0 rgba(231,76,60,.3);transform:rotate(-3deg)}.cell.O .marker{color:var(--player-o);text-shadow:1px 1px 0 rgba(41,128,185,.3);transform:rotate(2deg)}@keyframes scribble{0%{transform:scale(0) rotate(-10deg);opacity:0}50%{transform:scale(1.3) rotate(5deg)}to{transform:scale(1) rotate(0);opacity:1}}.cell.X .marker{animation:scribbleX .3s ease-out forwards}.cell.O .marker{animation:scribbleO .3s ease-out forwards}@keyframes scribbleX{0%{transform:scale(0) rotate(-15deg);opacity:0}50%{transform:scale(1.3) rotate(5deg)}to{transform:scale(1) rotate(-3deg);opacity:1}}@keyframes scribbleO{0%{transform:scale(0) rotate(15deg);opacity:0}50%{transform:scale(1.3) rotate(-3deg)}to{transform:scale(1) rotate(2deg);opacity:1}}.game-info{display:flex;flex-direction:column;gap:1rem}.status{display:flex;align-items:center;justify-content:center;gap:.75rem;padding:.875rem 1.25rem;background:var(--bg-paper);border:2px solid var(--pencil-gray);border-radius:4px;font-size:1.3rem;font-weight:500;transition:all .3s ease;box-shadow:2px 2px #0000001a}.status.winner{background:#27ae6026;border-color:var(--accent-green);animation:wiggle .5s ease-in-out}.status.thinking{animation:thinking 1s ease-in-out infinite}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}@keyframes thinking{0%,to{opacity:1}50%{opacity:.5}}.player-indicator{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;font-family:Caveat,cursive;font-weight:700;font-size:1.3rem;border:2px solid}.player-indicator.X{background:#e74c3c1a;color:var(--player-x);border-color:var(--player-x);transform:rotate(-3deg)}.player-indicator.O{background:#2980b91a;color:var(--player-o);border-color:var(--player-o);transform:rotate(2deg)}.status-text{color:var(--text-primary)}.controls{display:flex;gap:.75rem;flex-wrap:wrap}.control-group{display:flex;flex-direction:column;gap:.375rem;flex:1;min-width:140px}.control-group label{font-size:.95rem;font-weight:500;color:var(--text-secondary)}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--bg-paper);border:2px solid var(--pencil-gray);border-radius:4px;padding:.625rem 2rem .625rem .875rem;font-family:Patrick Hand,cursive;font-size:1.1rem;color:var(--text-primary);cursor:pointer;transition:all .2s ease;box-shadow:2px 2px #0000001a;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a4a4a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .75rem center}select:hover{border-color:var(--player-o);transform:translateY(-1px)}select:focus{outline:none;border-color:var(--player-o);box-shadow:3px 3px #2980b933}.reset-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem 1.25rem;background:var(--bg-paper);border:2px solid var(--player-x);border-radius:4px;font-family:Patrick Hand,cursive;font-size:1.1rem;font-weight:600;color:var(--player-x);cursor:pointer;transition:all .2s ease;flex:1;min-width:140px;box-shadow:2px 2px #e74c3c4d}.reset-button:hover{background:var(--player-x);color:#fff;transform:translateY(-2px) rotate(-1deg);box-shadow:4px 4px #e74c3c4d}.reset-button:active{transform:translateY(0) rotate(0);box-shadow:1px 1px #e74c3c4d}.reset-button svg{width:18px;height:18px}.footer{text-align:center}.footer p{color:var(--text-muted);font-size:1rem;font-style:italic}.board-wrapper::-webkit-scrollbar{width:10px;height:10px}.board-wrapper::-webkit-scrollbar-track{background:var(--bg-paper);border-radius:4px}.board-wrapper::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px;border:2px solid var(--bg-paper)}.board-wrapper::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width: 640px){.app{padding:.75rem;background:repeating-linear-gradient(to bottom,transparent,transparent 23px,var(--line-color) 23px,var(--line-color) 24px),linear-gradient(to right,transparent 30px,var(--margin-red) 30px,var(--margin-red) 32px,transparent 32px),var(--bg-paper)}.game-wrapper{padding-left:10px}.header h1{font-size:2.5rem}.game-container{padding:1rem}.status{padding:.75rem 1rem;font-size:1.1rem}.player-indicator{width:30px;height:30px;font-size:1.1rem}.controls{flex-direction:column}.control-group,.reset-button{min-width:100%}}