body{font-family:Inter,sans-serif;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;margin:0;background-color:#f0f2f5;color:#333;padding-top:20px;box-sizing:border-box}header{margin-bottom:20px;text-align:center}header h1{font-size:2.5em;color:#2c3e50;margin:0}.mode-selection,.game-container{background-color:#fff;padding:20px 30px;border-radius:12px;box-shadow:0 8px 16px #0000001a;text-align:center;width:90%;max-width:500px;margin-bottom:20px}.mode-selection h2{margin-top:0;margin-bottom:20px;color:#34495e}.mode-button,.action-button,.control-button,.direction-button{background-color:#3498db;color:#fff;border:none;padding:12px 20px;margin:8px;border-radius:8px;cursor:pointer;font-size:1em;transition:background-color .3s ease,transform .1s ease;box-shadow:0 2px 4px #0000001a}.mode-button:hover,.action-button:hover,.control-button:hover,.direction-button:hover{background-color:#2980b9}.mode-button:active,.action-button:active,.control-button:active,.direction-button:active{transform:translateY(1px)}.action-button.active{background-color:#e67e22;box-shadow:0 0 5px #e67e22,inset 0 0 5px #0003}.action-button:disabled{background-color:#bdc3c7;cursor:not-allowed}.game-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding:10px;background-color:#ecf0f1;border-radius:8px}.status{font-size:1.2em;font-weight:600;color:#2c3e50}.timer{font-size:1.1em;color:#7f8c8d}.action-buttons{margin-bottom:15px;display:flex;flex-wrap:wrap;justify-content:center}.board-container{display:flex;flex-direction:column;align-items:center;margin-bottom:15px}.board{display:grid;grid-template-columns:repeat(5,60px);grid-template-rows:repeat(5,60px);gap:5px;background-color:#bdc3c7;padding:10px;border-radius:8px;box-shadow:inset 0 0 10px #0000001a;margin-bottom:15px}.cell{width:60px;height:60px;background-color:#ecf0f1;border:1px solid #95a5a6;border-radius:6px;display:flex;justify-content:center;align-items:center;font-size:2em;font-weight:700;cursor:pointer;transition:background-color .2s ease,transform .2s ease;-webkit-user-select:none;user-select:none}.cell:hover{background-color:#dfe6e9}.cell.active-grid{background-color:#fff;border:2px solid #3498db}.cell.selected{background-color:#f1c40f;border-color:#f39c12;transform:scale(1.05)}.cell.x{color:#e74c3c}.cell.o{color:#2980b9}.grid-controls{margin-top:10px;padding:10px;background-color:#ecf0f1;border-radius:8px}.direction-grid{display:grid;grid-template-columns:repeat(3,50px);grid-template-rows:repeat(3,50px);gap:5px}.direction-button{width:50px;height:50px;font-size:1.5em;padding:0;background-color:#7f8c8d}.direction-button:hover{background-color:#95a5a6}.direction-button.center-button{background-color:#bdc3c7;cursor:default}.direction-button.center-button:hover{background-color:#bdc3c7}.game-controls{margin-top:20px;display:flex;justify-content:center;gap:10px}.control-button{background-color:#9b59b6}.control-button:hover{background-color:#8e44ad}.messages{margin-top:15px;padding:10px 15px;min-height:24px;font-size:1.1em;color:#c0392b;background-color:#f9ebec;border:1px solid #f5c6cb;border-radius:8px;text-align:center;font-weight:600}.messages.game-result{color:#16a085;background-color:#e8f6f3;border:1px solid #a9dfbf;font-size:1.3em}.hidden{display:none!important}@media (max-width: 600px){header h1{font-size:2em}.board{grid-template-columns:repeat(5,50px);grid-template-rows:repeat(5,50px);gap:4px}.cell{width:50px;height:50px;font-size:1.8em}.direction-grid{grid-template-columns:repeat(3,45px);grid-template-rows:repeat(3,45px)}.direction-button{width:45px;height:45px;font-size:1.3em}.mode-button,.action-button,.control-button{padding:10px 15px;font-size:.9em}.status,.timer{font-size:1em}}@media (max-width: 400px){.board{grid-template-columns:repeat(5,40px);grid-template-rows:repeat(5,40px);gap:3px}.cell{width:40px;height:40px;font-size:1.5em}.direction-grid{grid-template-columns:repeat(3,38px);grid-template-rows:repeat(3,38px)}.direction-button{width:38px;height:38px;font-size:1.1em}.action-buttons{flex-direction:column;gap:5px}.action-button{width:100%;margin:5px 0}}
