:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#d431a5}html{background-color:#d431a5;background:linear-gradient(to bottom,#d431a5,#b8258d,#9d1a75)}:root,[data-theme=light]{--bg-primary: #d431a5;--bg-secondary: #e047b8;--bg-tertiary: #ec5dca;--text-primary: #fff0fa;--text-secondary: #ffe8f5;--border-color: #f08dd1;--shadow: rgba(0, 0, 0, .3)}[data-theme=dark]{--bg-primary: #0a0a1a;--bg-secondary: #1a1a2e;--bg-tertiary: #2a2a3e;--text-primary: #e8f4f8;--text-secondary: #c0dee8;--border-color: #34495e;--shadow: rgba(0, 0, 0, .8)}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh;max-height:100vh;overflow:hidden;background-color:#d431a5;background:linear-gradient(to bottom,#d431a5,#b8258d,#9d1a75)}#root{width:100%;min-height:100vh;max-height:100vh;overflow:hidden;background-color:#d431a5}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#fff0fa;background-color:#d431a5}a:hover{color:#f08dd1}button{background-color:#e047b8}}.mode-selector{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;max-width:800px}.mode-selector{position:relative;z-index:1}.mode-selector h2{font-size:2rem;font-weight:600;margin:0;color:var(--text-primary);transition:color .3s ease}.mode-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;width:100%}.mode-button{background:var(--bg-secondary);border:3px solid var(--border-color);border-radius:15px;padding:1.5rem 2rem;cursor:pointer;transition:all .4s cubic-bezier(.68,-.55,.265,1.55);display:flex;flex-direction:column;align-items:center;gap:.75rem;box-shadow:0 10px 30px var(--shadow),inset 0 1px 2px #ffffff0d;text-align:center}.mode-button:hover{transform:translateY(-10px) scale(1.02);border-color:var(--border-color);background:var(--bg-tertiary);box-shadow:0 15px 40px var(--shadow),inset 0 1px 2px #ffffff0d}.mode-button:active{transform:translateY(-5px) scale(.98)}.mode-button.mode-friend:hover{border-color:#42a5f5;box-shadow:0 15px 40px #42a5f566}.mode-button.mode-robot:hover{border-color:#ff5252;box-shadow:0 15px 40px #ff525266}.mode-icon{width:64px;height:64px;border-radius:50%;transition:transform .3s ease;position:relative;display:flex;align-items:center;justify-content:center}.mode-icon-friend{background:linear-gradient(135deg,#42a5f5,#1e88e5);box-shadow:0 4px 12px #42a5f566}.mode-icon-friend:before{content:"2P";font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-2px}.mode-icon-robot{background:linear-gradient(135deg,#ff5252,#e53935);box-shadow:0 4px 12px #ff525266}.mode-icon-robot:before{content:"AI";font-size:1.5rem;font-weight:700;color:#fff;letter-spacing:-2px}.mode-button:hover .mode-icon{transform:scale(1.2) rotate(5deg)}.mode-title{font-size:1.4rem;font-weight:700;color:var(--text-primary);transition:color .3s ease}.mode-description{font-size:.9rem;color:var(--text-secondary);font-weight:400;line-height:1.4;transition:color .3s ease}@media(max-width:768px){.mode-selector h2{font-size:1.5rem}.mode-buttons{grid-template-columns:1fr;gap:1.5rem}.mode-button{padding:2rem}.mode-icon{width:56px;height:56px}.mode-icon-friend:before,.mode-icon-robot:before{font-size:1.3rem}.mode-title{font-size:1.5rem}.mode-description{font-size:.9rem}}.game-board-container{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin:0 auto;perspective:1000px;position:relative;z-index:10;opacity:1;visibility:visible;width:100%;max-width:fit-content;flex-shrink:1;min-height:0}.game-board{display:grid;grid-template-rows:repeat(6,1fr);gap:6px;background:linear-gradient(180deg,#8b6914,#6b4e0f 30%,#5a3f0a);padding:15px;border-radius:12px;box-shadow:0 25px 50px var(--shadow),0 10px 20px var(--shadow),inset 0 2px 4px #fff3,inset 0 -2px 4px #0000004d;border:5px solid #4a3410;position:relative;transform-style:preserve-3d;transition:box-shadow .3s ease}.game-board:before{content:"";position:absolute;inset:-12px;background:linear-gradient(180deg,#a67c1a,#8b6914,#6b4e0f);border-radius:16px;z-index:-1;box-shadow:0 15px 30px #0000004d,inset 0 1px 2px #ffffff4d}@media(max-width:768px){.game-board:before{inset:-8px;border-radius:14px}}@media(max-width:480px){.game-board:before{inset:-6px;border-radius:12px}}.game-board:after{content:"";position:absolute;inset:15px;border:3px solid rgba(0,0,0,.2);border-radius:8px;pointer-events:none}.board-row{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.cell{width:52px;height:52px;background:radial-gradient(circle at center,#f5f5f5,#e8e8e8 40%,#d4d4d4);border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;border:4px solid #c0c0c0;box-shadow:inset 0 3px 6px #00000040,inset 0 -2px 4px #fff9,0 2px 3px #0003;transition:all .2s ease;overflow:visible}.cell:before{content:"";position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.4) 0%,transparent 70%);pointer-events:none}.piece{width:88%;height:88%;border-radius:50%;position:relative;animation:dropPiece .5s cubic-bezier(.68,-.55,.265,1.55);box-shadow:0 6px 12px #0006,inset 0 -3px 6px #0000004d,inset 0 3px 6px #fff6,0 0 0 3px #0000001a}.piece.player1{background:radial-gradient(circle at 30% 30%,#ff6b6b,#ee5a5a,#dc4646 60%,#c92a2a);border:4px solid #a71e1e}.piece.player1:before{content:"";position:absolute;top:15%;left:20%;width:35%;height:35%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 50%,transparent 100%);pointer-events:none}.piece.player1:after{content:"";position:absolute;top:50%;left:50%;width:60%;height:60%;border-radius:50%;background:radial-gradient(circle,transparent 0%,rgba(0,0,0,.2) 100%);transform:translate(-50%,-50%);pointer-events:none}.piece.player2{background:radial-gradient(circle at 30% 30%,#4dabf7,#339af0,#1c7ed6 60%,#1864ab);border:4px solid #0c4a6e}.piece.player2:before{content:"";position:absolute;top:15%;left:20%;width:35%;height:35%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.7) 0%,rgba(255,255,255,.3) 50%,transparent 100%);pointer-events:none}.piece.player2:after{content:"";position:absolute;top:50%;left:50%;width:60%;height:60%;border-radius:50%;background:radial-gradient(circle,transparent 0%,rgba(0,0,0,.2) 100%);transform:translate(-50%,-50%);pointer-events:none}.cell.winning{animation:winningPulse 1s ease-in-out infinite;z-index:5;position:relative}.cell.winning .piece{box-shadow:0 6px 12px #0006,inset 0 -3px 6px #0000004d,inset 0 3px 6px #fff6,0 0 0 4px #ffd700e6,0 0 20px #ffd700cc,0 0 40px #ffd70099;animation:winningGlow 1s ease-in-out infinite;border-width:5px}@keyframes winningPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes winningGlow{0%,to{filter:brightness(1.2) drop-shadow(0 0 10px rgba(255,215,0,.8))}50%{filter:brightness(1.5) drop-shadow(0 0 20px rgba(255,215,0,1))}}.piece-shine{position:absolute;top:20%;left:25%;width:30%;height:30%;background:radial-gradient(circle,rgba(255,255,255,.8) 0%,rgba(255,255,255,.4) 50%,transparent 100%);border-radius:50%;pointer-events:none}@keyframes dropPiece{0%{transform:translateY(-450px) scale(.7);opacity:0}60%{transform:translateY(8px) scale(1.05)}75%{transform:translateY(-4px) scale(.98)}90%{transform:translateY(2px) scale(1.01)}to{transform:translateY(0) scale(1);opacity:1}}@keyframes slowMotionWinDrop{0%{transform:translateY(-450px) scale(.4);opacity:0}10%{transform:translateY(-400px) scale(.45);opacity:.15}20%{transform:translateY(-320px) scale(.55);opacity:.3}35%{transform:translateY(-220px) scale(.7);opacity:.5}50%{transform:translateY(-120px) scale(.85);opacity:.7}65%{transform:translateY(-40px) scale(.95);opacity:.85}78%{transform:translateY(25px) scale(1.25);opacity:1}85%{transform:translateY(-12px) scale(1.15)}92%{transform:translateY(8px) scale(1.08)}96%{transform:translateY(-4px) scale(1.03)}to{transform:translateY(0) scale(1);opacity:1}}@keyframes slowMotionBounce{0%{transform:translateY(0) scale(1)}12%{transform:translateY(-15px) scale(1.2)}25%{transform:translateY(0) scale(1.15)}37%{transform:translateY(-12px) scale(1.18)}50%{transform:translateY(0) scale(1.12)}62%{transform:translateY(-8px) scale(1.1)}75%{transform:translateY(0) scale(1.06)}87%{transform:translateY(-4px) scale(1.03)}to{transform:translateY(0) scale(1)}}.piece.final-winning-piece,.cell.final-winning .piece{animation:slowMotionWinDrop 3s cubic-bezier(.25,.46,.45,.94) forwards;z-index:10;position:relative;animation-fill-mode:both}.cell.final-winning{z-index:5;position:relative}@keyframes pulse{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.05);opacity:.8}}.cell.dropping{animation:columnFlash .3s ease}@keyframes columnFlash{0%,to{background:radial-gradient(circle at center,#f5f5f5,#e8e8e8 40%,#d4d4d4)}50%{background:radial-gradient(circle at center,#fff9c4,#fff59d 40%,#ffeb3b)}}.column-buttons{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:400px;padding:0;margin:0 auto;justify-content:center}.column-button{width:52px;height:32px;font-size:22px;background:linear-gradient(180deg,#8b6914e6,#6b4e0fe6);border:3px solid #4a3410;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;color:#fffc;font-size:28px;font-weight:700;box-shadow:0 4px 8px #0000004d,inset 0 2px 4px #fff3;position:relative}.column-button:before{content:"";position:absolute;inset:3px;border-radius:7px;background:linear-gradient(180deg,rgba(255,255,255,.1) 0%,transparent 100%);pointer-events:none}.column-button:disabled{opacity:.5;cursor:not-allowed;background:linear-gradient(180deg,#8b691499,#6b4e0f99)}.column-button.clickable{cursor:pointer;animation:bounceIndicator 1.5s ease-in-out infinite}.column-button.clickable:hover{background:linear-gradient(180deg,#a67c1af2,#8b6914f2);border-color:#6b4e0f;transform:translateY(-3px) scale(1.05);box-shadow:0 6px 12px #0006,inset 0 2px 4px #ffffff4d;color:#fff}.column-button.clickable.player1-indicator:hover{background:linear-gradient(180deg,#ff6b6be6,#ee5a5ae6);border-color:#dc4646;box-shadow:0 6px 12px #ee5a5a80,inset 0 2px 4px #ffffff4d}.column-button.clickable.player2-indicator:hover{background:linear-gradient(180deg,#4dabf7e6,#339af0e6);border-color:#1c7ed6;box-shadow:0 6px 12px #339af080,inset 0 2px 4px #ffffff4d}.drop-arrow{transition:transform .2s ease;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}.column-button.clickable:hover .drop-arrow{transform:translateY(4px)}@keyframes bounceIndicator{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@media(max-width:1024px){.cell{width:60px;height:60px}.game-board{padding:20px;gap:8px}.board-row{gap:8px}.column-buttons{width:468px;gap:8px;padding:0;margin:0 auto;justify-content:center;max-width:100%}.column-button{width:60px;height:50px;font-size:24px}}@media(max-width:768px){.cell{width:40px;height:40px}.game-board{padding:18px;gap:5px;border:5px solid #4a3410}.board-row{gap:5px}.column-buttons{width:310px;gap:5px;padding:0;margin:0 auto;justify-content:center;max-width:100%}.column-button{width:40px;height:40px;font-size:18px}.piece{width:88%;height:88%}}@media(max-width:480px){.cell{width:32px;height:32px}.game-board{padding:18px;gap:4px;border:4px solid #4a3410}.board-row{gap:4px}.column-buttons{width:248px;gap:4px;padding:0;margin:0 auto;justify-content:center;max-width:100%}.column-button{width:32px;height:35px;font-size:16px}}.winner-announcement{position:fixed;top:15%;left:50%;transform:translate(-50%) scale(.8);z-index:2000;pointer-events:none;opacity:0;transition:all .5s cubic-bezier(.68,-.55,.265,1.55)}.winner-announcement.show{opacity:1;transform:translate(-50%) scale(1)}.winner-announcement.hide{opacity:0;transform:translate(-50%) scale(.8)}.winner-content{background:linear-gradient(135deg,#fffffff2,#f8f9faf2);padding:2rem 3rem;border-radius:20px;box-shadow:0 20px 60px #0006,0 10px 30px #0000004d,inset 0 1px 2px #fff;border:4px solid #f59e0b;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);max-width:90%}[data-theme=dark] .winner-content{background:linear-gradient(135deg,#1a1a2efa,#16213efa);border-color:#f59e0b}.winner-text{font-size:3rem;font-weight:800;margin:0;background:linear-gradient(135deg,#f59e0b,#d97706);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:2px 2px 4px rgba(0,0,0,.2);animation:winnerPulse 1s ease-in-out infinite}@keyframes winnerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@media(max-width:768px){.winner-content{padding:2rem 2.5rem}.winner-text{font-size:2rem}}@media(max-width:480px){.winner-content{padding:1.5rem 2rem}.winner-text{font-size:1.5rem}}.game-controls{display:flex;flex-direction:column;align-items:center;gap:.35rem;width:100%;max-width:600px;margin-bottom:.6rem;flex-shrink:0}.game-status{text-align:center;min-height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center}.status-message{font-size:.85rem;font-weight:600;padding:.4rem 1rem;background:var(--bg-secondary);border-radius:8px;box-shadow:0 4px 12px var(--shadow),inset 0 1px 2px #ffffff0d;border:2px solid var(--border-color);transition:all .3s ease;min-width:200px;color:var(--text-primary)}.status-message.thinking{animation:thinkingPulse 1.5s ease-in-out infinite;color:#f59e0b;background:linear-gradient(135deg,#ffedd5f2,#fff4ebf2);border-color:#f59e0b}.status-message.winner{background:linear-gradient(135deg,#ffedd5fa,#fff4ebfa);border-color:#f59e0b;color:#d97706;animation:celebrate .6s ease-in-out;font-size:1.2rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.1);box-shadow:0 6px 16px #f59e0b4d,inset 0 1px 2px #fff}@keyframes thinkingPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes celebrate{0%,to{transform:scale(1)}25%{transform:scale(1.1) rotate(-5deg)}75%{transform:scale(1.1) rotate(5deg)}}.control-buttons{display:flex;gap:.75rem;width:100%;max-width:600px;justify-content:center;flex-wrap:wrap}.btn{padding:.5rem 1.2rem;font-size:.9rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;transition:all .3s ease;min-width:140px;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 4px 15px #0003;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);flex:1;max-width:100%}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.btn:active{transform:translateY(0)}.btn-reset{background:var(--bg-secondary);color:var(--text-primary);border:2px solid var(--border-color);box-shadow:0 4px 8px var(--shadow),inset 0 1px 2px #ffffff0d;transition:all .3s ease}.btn-reset:hover{background:var(--bg-tertiary);border-color:var(--border-color);box-shadow:0 6px 12px var(--shadow),inset 0 1px 2px #ffffff0d}.btn-menu{background:var(--bg-secondary);color:var(--text-primary);border:2px solid var(--border-color);box-shadow:0 4px 8px var(--shadow),inset 0 1px 2px #ffffff0d;transition:all .3s ease}.btn-menu:hover{background:var(--bg-tertiary);border-color:var(--border-color);box-shadow:0 6px 12px var(--shadow),inset 0 1px 2px #ffffff0d}@media(max-width:768px){.status-message{font-size:1rem;padding:.5rem 1.2rem;min-height:40px;width:100%;max-width:600px;box-sizing:border-box}.status-message.winner{font-size:1.1rem}.btn{font-size:.85rem;padding:.5rem 1rem;min-width:unset;width:100%;max-width:600px;box-sizing:border-box}.control-buttons{flex-direction:column;align-items:stretch;gap:.5rem;width:100%;max-width:600px}.game-controls{gap:.5rem;margin-bottom:.5rem;width:100%;align-items:center}.game-status{width:100%;max-width:600px}}.game-container{height:100vh;max-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:.5rem 1rem;background:#d431a5;background-image:linear-gradient(to bottom,#d431a5,#b8258d,#9d1a75),radial-gradient(circle at 20% 50%,rgba(212,49,165,.4) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(224,71,184,.3) 0%,transparent 50%);color:var(--text-primary);position:relative;transition:background-color .3s ease,color .3s ease;overflow:hidden;box-sizing:border-box}.game-container:before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.03) 10px,rgba(255,255,255,.03) 20px);pointer-events:none;z-index:0}[data-theme=light] .game-container{background:linear-gradient(to bottom,#d431a5,#b8258d,#9d1a75);background-image:radial-gradient(circle at 20% 50%,rgba(212,49,165,.4) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(224,71,184,.3) 0%,transparent 50%)}[data-theme=dark] .game-container{background:linear-gradient(to bottom,#9d1a75,#7a145a,#5d0f42);background-image:radial-gradient(circle at 20% 50%,rgba(212,49,165,.3) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(224,71,184,.2) 0%,transparent 50%)}.game-header{text-align:center;margin-bottom:.25rem;position:relative;z-index:1;flex-shrink:0;padding-top:0}.game-header h1{font-size:1.4rem;margin:0;font-weight:700;text-shadow:2px 2px 4px var(--shadow);letter-spacing:1px;color:var(--text-primary);transition:color .3s ease;line-height:1.1}.game-subtitle{font-size:.9rem;margin-top:.25rem;color:var(--text-secondary);font-weight:400;transition:color .3s ease}@media(max-width:1024px){.game-header h1{font-size:1.6rem}.game-subtitle{font-size:.8rem}}@media(max-width:768px){.game-header h1{font-size:1.3rem}.game-subtitle{font-size:.75rem}.game-container{padding:.5rem .75rem}}@media(max-width:480px){.game-header h1{font-size:1.1rem}.game-subtitle{font-size:.7rem}.game-container{padding:.25rem .5rem}}