body,html{background:#d3ddf0;font-family:Helvetica Neue,Arial,Hiragino Kaku Gothic ProN,Hiragino Sans,Meiryo,sans-serif;margin:0;padding:0}*{box-sizing:border-box}.board{align-items:center;display:flex;flex-direction:column;gap:12px;position:relative}.board-header{margin-bottom:5px;text-align:center}.board-grid{background-color:#34495e;border-radius:8px;box-shadow:0 4px 8px #0000004d;flex-direction:column;order:1;padding:8px}.board-grid,.board-row{display:flex;gap:2px}.board-cell{align-items:center;background-color:#ecf0f1;border-radius:50%;display:flex;height:clamp(30px,6vw,50px);justify-content:center;position:relative;transition:background-color .2s ease;width:clamp(30px,6vw,50px)}.board-cell.player-1{background-color:#e74c3c}.board-cell.player-1 .coin{background:radial-gradient(circle at 30% 30%,#ff6b6b,#e74c3c)}.board-cell.player-2{background-color:#3498db}.board-cell.player-2 .coin{background:radial-gradient(circle at 30% 30%,#74b9ff,#3498db)}.coin{background:radial-gradient(circle at 30% 30%,#ffffff4d,#0000);border-radius:50%;box-shadow:inset 0 2px 4px #0003;height:calc(100% - 8px);width:calc(100% - 8px)}.insert-buttons{display:flex;gap:2px;padding:0 10px}.insert-buttons.top{margin-bottom:clamp(8px,2vw,12px)}.insert-buttons.bottom{margin-top:clamp(8px,2vw,12px);order:2;position:relative;z-index:1}.insert-buttons.left{left:clamp(-80px,-12vw,-90px)}.insert-buttons.left,.insert-buttons.right{align-items:center;flex-direction:column;gap:2px;height:100%;justify-content:center;position:absolute;top:0}.insert-buttons.right{right:clamp(-80px,-12vw,-90px)}.insert-btn{align-items:center;background:#567ba0;border:none;border-radius:6px;color:#fff;cursor:pointer;display:flex;font-size:clamp(1rem,2.5vw,1.4rem);height:clamp(30px,6vw,50px);justify-content:center;overflow:hidden;position:relative;transition:all .3s ease;width:clamp(30px,6vw,50px)}.insert-btn.active{box-shadow:0 4px 15px #567ba066;transform:translateY(0)}.insert-btn.active:active{transform:translateY(-1px)}.insert-buttons.top .insert-btn.active:hover{transform:translateY(3px)}.insert-buttons.bottom .insert-btn.active:hover{transform:translateY(-3px)}.insert-buttons.left .insert-btn.active:hover{transform:translateX(3px)}.insert-buttons.right .insert-btn.active:hover{transform:translateX(-3px)}.insert-btn.active[data-player="1"]:hover{background:linear-gradient(135deg,#ff5252,#d32f2f);box-shadow:0 8px 25px #ff6b6b99}.insert-btn.active[data-player="2"]:hover{background:linear-gradient(135deg,#5dade2,#3498db);box-shadow:0 8px 25px #74b9ff99}.insert-btn.inactive{background:linear-gradient(135deg,#bdc3c7,#95a5a6);box-shadow:0 2px 8px #0003;color:#7f8c8d;cursor:not-allowed}.insert-btn.gravity-control{background:#567ba0;box-shadow:0 4px 15px #567ba066;color:#fff;cursor:pointer;font-weight:700}.insert-btn.gravity-control.wide{height:clamp(30px,6vw,50px);width:calc(clamp(30px, 6vw, 50px)*7 + 12px)}.insert-btn.gravity-control.tall{height:calc(clamp(30px, 6vw, 50px)*6 + 10px);width:clamp(30px,6vw,50px)}.insert-btn.gravity-control:hover{background:linear-gradient(135deg,#ff5252,#d32f2f);box-shadow:0 6px 20px #ff6b6b99}.insert-btn.gravity-control[data-player="2"]:hover{background:linear-gradient(135deg,#5dade2,#3498db);box-shadow:0 6px 20px #74b9ff99}.insert-buttons.top .insert-btn.gravity-control:hover{transform:translateY(3px)}.insert-buttons.bottom .insert-btn.gravity-control:hover{transform:translateY(-3px)}.insert-buttons.left .insert-btn.gravity-control:hover{transform:translateX(3px)}.insert-buttons.right .insert-btn.gravity-control:hover{transform:translateX(-3px)}.gravity-text{font-size:1.2rem;font-weight:600;line-height:1.2;text-align:center}.gravity-arrow{font-size:1.2rem;font-weight:700}.insert-buttons.left .gravity-text,.insert-buttons.right .gravity-text{display:inline;font-size:1.2rem;font-weight:600;line-height:1.2;text-align:center;transform:rotate(90deg);white-space:nowrap}.insert-buttons.left .gravity-text{transform:rotate(270deg)}.current-player{font-size:1.2rem;font-weight:700}.player-1{color:#e74c3c}.player-2{color:#3498db}.board.victory{animation:boardVictory 1.5s ease-out}.board.victory .board-grid{animation:gridVictory 1.5s ease-out}.board.victory .board-cell.player-1 .coin{animation:coinVictoryRed 2s ease-in-out infinite}.board.victory .board-cell.player-2 .coin{animation:coinVictoryBlue 2s ease-in-out infinite}@keyframes boardVictory{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}@keyframes gridVictory{0%{box-shadow:0 4px 8px #0000004d}50%{box-shadow:0 8px 25px #ffd70099}to{box-shadow:0 4px 8px #0000004d}}@keyframes coinVictoryRed{0%,to{filter:drop-shadow(0 0 5px rgba(231,76,60,.5));transform:scale(1)}50%{filter:drop-shadow(0 0 15px rgba(231,76,60,.8));transform:scale(1.1)}}@keyframes coinVictoryBlue{0%,to{filter:drop-shadow(0 0 5px rgba(52,152,219,.5));transform:scale(1)}50%{filter:drop-shadow(0 0 15px rgba(52,152,219,.8));transform:scale(1.1)}}@media (max-width:768px){.board{gap:0}.board-grid{padding:6px}.board-row{gap:2px}.board-cell,.insert-btn{height:clamp(25px,8vw,40px);width:clamp(25px,8vw,40px)}.insert-btn{font-size:clamp(.8rem,3vw,1.2rem)}.insert-btn.gravity-control.wide{height:clamp(25px,8vw,40px);width:calc(clamp(25px, 8vw, 40px)*7 + 12px)}.insert-btn.gravity-control.tall{height:calc(clamp(25px, 8vw, 40px)*6 + 10px);width:clamp(25px,8vw,40px)}.insert-buttons.left{left:clamp(-60px,-15vw,-70px);top:0}.insert-buttons.right{right:clamp(-60px,-15vw,-70px);top:0}.gravity-arrow,.gravity-text,.insert-buttons.left .gravity-text,.insert-buttons.right .gravity-text{font-size:clamp(.8rem,2.5vw,1rem)}}@media (max-width:480px){.board-cell,.insert-btn{height:clamp(20px,10vw,30px);width:clamp(20px,10vw,30px)}.insert-btn{font-size:clamp(.7rem,4vw,1rem)}.insert-btn.gravity-control.wide{height:clamp(20px,10vw,30px);width:calc(clamp(20px, 10vw, 30px)*7 + 12px)}.insert-btn.gravity-control.tall{height:calc(clamp(20px, 10vw, 30px)*6 + 10px);width:clamp(20px,10vw,30px)}.insert-buttons.left{left:clamp(-45px,-25vw,-70px);top:0}.insert-buttons.right{right:clamp(-45px,-25vw,-70px);top:0}.gravity-arrow,.gravity-text,.insert-buttons.left .gravity-text,.insert-buttons.right .gravity-text{font-size:clamp(.7rem,2vw,.9rem)}}.game-info{align-items:center;display:flex;flex-direction:column;gap:15px;margin-top:15px}.status-message{animation:fadeIn .5s ease-in;color:#34495e;font-size:1.5rem;font-weight:700;text-align:center}.status-message.won{animation:victoryCelebration 1s ease-out,victoryGlow 2s ease-in-out infinite alternate;color:#348a57}.status-message.won.player-1{animation:victoryCelebration 1s ease-out,victoryGlowRed 2s ease-in-out infinite alternate;color:#e74c3c}.status-message.won.player-2{animation:victoryCelebration 1s ease-out,victoryGlowBlue 2s ease-in-out infinite alternate;color:#3498db}.status-message.draw{animation:drawResult 1s ease-out,drawPulse 2s ease-in-out infinite;color:#f39c12}.status-message.playing{color:#34495e}.status-message.playing.player-1 .player-name{color:#e74c3c}.status-message.playing.player-2 .player-name{color:#3498db}.reset-button{background-color:#567ba0;border:none;border-radius:6px;box-shadow:0 2px 4px #2c3e504d;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:10px 20px;transition:all .2s ease}.reset-button:hover{background-color:#6890b8;box-shadow:0 4px 8px #2c3e5066;transform:translateY(-2px)}.reset-button:active{transform:translateY(0)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes victoryCelebration{0%{opacity:0;transform:scale(.8) rotate(-5deg)}50%{transform:scale(1.2) rotate(2deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}@keyframes victoryGlowRed{0%{filter:drop-shadow(0 0 5px rgba(231,76,60,.3));text-shadow:0 0 10px #e74c3c80}to{filter:drop-shadow(0 0 15px rgba(231,76,60,.6));text-shadow:0 0 20px #e74c3ccc}}@keyframes victoryGlowBlue{0%{filter:drop-shadow(0 0 5px rgba(52,152,219,.3));text-shadow:0 0 10px #3498db80}to{filter:drop-shadow(0 0 15px rgba(52,152,219,.6));text-shadow:0 0 20px #3498dbcc}}@keyframes victoryGlow{0%{filter:drop-shadow(0 0 5px rgba(52,138,87,.3));text-shadow:0 0 10px #348a5780}to{filter:drop-shadow(0 0 15px rgba(52,138,87,.6));text-shadow:0 0 20px #348a57cc}}@keyframes drawResult{0%{opacity:0;transform:scale(.9)}50%{transform:scale(1.1)}to{opacity:1;transform:scale(1)}}@keyframes drawPulse{0%,to{filter:drop-shadow(0 0 3px rgba(243,156,18,.3));transform:scale(1)}50%{filter:drop-shadow(0 0 8px rgba(243,156,18,.5));transform:scale(1.05)}}.App{background:#d3ddf0;color:#2c3e50;height:100vh;padding-top:5px;text-align:center}.App-header{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#fff6;border:1px solid #fff3;border-radius:12px;box-shadow:0 4px 15px #2c3e5026;margin:0 10px 5px;padding:8px}.App-header h1{color:#34495e;font-size:1.5rem;font-weight:700;margin:0 0 5px;text-shadow:2px 2px 4px #2c3e5033}.App-header p{color:#5d6d7e;font-size:.9rem;font-weight:500;margin:0}.App-main{gap:10px;height:calc(100vh - 80px);padding:10px}.App-main,.game-container{align-items:center;display:flex;flex-direction:column}.game-container{gap:20px;height:100%;justify-content:space-evenly}.controls-section{gap:15px;justify-content:center;margin-left:0;min-width:200px}.controls-section,.mode-controls{align-items:center;display:flex;flex-direction:column}.mode-controls{gap:8px}.mode-controls:has(.mode-label){padding-top:20px;position:relative}.mode-controls:has(.mode-label) .mode-label{left:50%;margin-left:0;position:absolute;top:0;transform:translateX(-50%)}.mode-bar{align-items:flex-end;column-gap:16px;display:flex;justify-content:space-between;max-width:800px;position:relative;width:100%}@media (max-width:768px){.mode-bar{align-items:center;flex-direction:column;gap:10px;max-width:100%}.mode-controls{max-width:320px;width:100%}.mode-label{text-align:center}.mode-controls.difficulty .mode-label,.mode-label{margin-left:0!important}.difficulty-row,.mode-row{flex-wrap:wrap;justify-content:center}.App-header{margin:0 5px 5px}.App-main{padding:5px}}@media (max-width:480px){.mode-btn{height:36px;min-height:36px;padding:6px 10px}.mode-btn,.mode-text{font-size:.8rem}.mode-icon{font-size:.9rem}.App-header h1{font-size:1.2rem}.App-header p{font-size:.8rem}}.mode-controls.difficulty .mode-btn:disabled{cursor:not-allowed;opacity:.5}.mode-controls.difficulty .mode-label{margin-left:0}.difficulty-row,.mode-row{align-items:center;display:flex;gap:12px}.reset-inline{margin-right:12px}.info-inline,.reset-inline{margin-left:12px}.mode-label{color:#5d6d7e;font-size:.85rem;letter-spacing:.02em;margin-left:125px;text-align:center}.mode-toggle{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffa6;border:1px solid #0000000f;border-radius:10px;box-shadow:0 4px 12px #2c3e501f;display:inline-flex;overflow:hidden}.mode-btn{align-items:center;-webkit-appearance:none;appearance:none;background:#0000;border:none;box-sizing:border-box;color:#34495e;cursor:pointer;display:inline-flex;gap:8px;height:40px;min-height:40px;padding:8px 14px;transition:background .2s ease,color .2s ease}.mode-btn:hover{background:#34495e0f}.mode-btn.active{background:linear-gradient(180deg,#4dabf7,#228be6);color:#fff}.mode-icon{font-size:1rem}.mode-text{font-size:.9rem;font-weight:600;white-space:nowrap}.info-modal-overlay{align-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#00000080;bottom:0;display:flex;justify-content:center;left:0;padding:20px;position:fixed;right:0;top:0;z-index:1000}.info-modal{animation:modalSlideIn .3s ease-out;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0003;max-height:80vh;max-width:500px;overflow-y:auto;width:100%}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(-20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.info-modal-header{align-items:center;border-bottom:1px solid #e1e5e9;display:flex;justify-content:space-between;padding:20px 24px 16px}.info-modal-header h2{color:#2c3e50;font-size:1.5rem;font-weight:700;margin:0}.close-btn{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:4px;color:#6c757d;cursor:pointer;display:flex;font-size:1.5rem;height:32px;justify-content:center;padding:4px;transition:all .2s ease;width:32px}.close-btn:hover{background:#f8f9fa;color:#495057}.info-modal-content{padding:20px 24px 24px}.info-modal-content h3,.info-modal-content ul{text-align:left}.info-modal-content h3{border-bottom:2px solid #3498db;color:#34495e;font-size:1.1rem;font-weight:600;margin:0 0 12px;padding-bottom:4px}.info-modal-content ul{margin:0 0 20px;padding-left:20px}.info-modal-content li{color:#2c3e50;line-height:1.5;margin-bottom:8px}.info-modal-content strong{color:#3498db}
/*# sourceMappingURL=main.52b19680.css.map*/