body,html{margin:0;padding:0;overflow-x:hidden}header{position:sticky;top:0;z-index:100;background-color:var(--header-bg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem 0;box-shadow:0 2px 10px #0000001a;transition:background-color var(--transition-speed) ease}header .container{display:flex;justify-content:space-between;align-items:center}main{flex:1}section{padding:5rem 0}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-50px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(50px)}to{opacity:1;transform:translate(0)}}.skill-bar{height:10px;background-color:var(--skill-bar-bg);border-radius:5px;margin-bottom:1.5rem;overflow:hidden}.skill-progress{height:100%;background-color:var(--accent-color);border-radius:5px;transition:width 1s ease-in-out}.project-card{background-color:var(--card-bg);border:1px solid var(--card-border);border-radius:var(--border-radius);overflow:hidden;box-shadow:0 4px 10px var(--card-shadow);transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease}.project-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px var(--card-shadow)}.project-image{width:100%;height:200px;object-fit:cover}.project-content{padding:1.5rem}.project-skills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.project-skill-tag{background-color:var(--bg-secondary);color:var(--text-secondary);padding:.25rem .5rem;border-radius:4px;font-size:.8rem}.dark-mode-toggle{background:none;border:none;color:var(--text-primary);cursor:pointer;font-size:1.5rem;display:flex;align-items:center;justify-content:center;padding:.5rem;border-radius:50%;transition:background-color var(--transition-speed) ease}.dark-mode-toggle:hover{background-color:var(--bg-secondary)}:root{--bg-primary: #ffffff;--bg-secondary: #f8f9fa;--text-primary: #333333;--text-secondary: #666666;--accent-color: #4a6cf7;--card-bg: #ffffff;--card-border: #e0e0e0;--card-shadow: rgba(0, 0, 0, .1);--skill-bar-bg: #e0e0e0;--header-bg: rgba(255, 255, 255, .9);--border-radius: 12px;--transition-speed: .3s;--container-width: 1200px;font-family:Poppins,system-ui,sans-serif;line-height:1.6;font-weight:400;color-scheme:light dark;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-behavior:smooth}[data-theme=dark]{--bg-primary: #121212;--bg-secondary: #1e1e1e;--text-primary: #f0f0f0;--text-secondary: #b0b0b0;--accent-color: #6d8dff;--card-bg: #1e1e1e;--card-border: #333333;--card-shadow: rgba(0, 0, 0, .3);--skill-bar-bg: #333333;--header-bg: rgba(18, 18, 18, .9)}*{margin:0;padding:0;box-sizing:border-box}a{font-weight:500;color:var(--accent-color);text-decoration:none;transition:color var(--transition-speed) ease}a:hover{color:var(--accent-color);opacity:.8}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color var(--transition-speed) ease,color var(--transition-speed) ease}h1,h2,h3,h4,h5,h6{line-height:1.2;margin-bottom:1rem;font-weight:600}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}p{margin-bottom:1rem}button{border-radius:var(--border-radius);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--accent-color);color:#fff;cursor:pointer;transition:background-color var(--transition-speed) ease,transform var(--transition-speed) ease}button:hover{background-color:var(--accent-color);opacity:.9;transform:translateY(-2px)}button:focus,button:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}img{max-width:100%;height:auto}section{padding:5rem 1rem}.container{max-width:var(--container-width);margin:0 auto;padding:0 1rem}@media (max-width: 768px){h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.25rem}section{padding:3rem 1rem}}.app{max-width:1400px;margin:0 auto;padding:20px;font-family:Arial,sans-serif}h1{text-align:center;color:#2c3e50;margin-bottom:30px}.main-menu{display:flex;flex-direction:column;gap:30px;max-width:800px;margin:0 auto}.player-section{background:#f8f9fa;padding:20px;border-radius:8px;border:2px solid #dee2e6}.player-section input{width:100%;padding:10px;margin-top:10px;border:1px solid #ccc;border-radius:4px;font-size:16px}.difficulty-section{background:#f8f9fa;padding:20px;border-radius:8px;border:2px solid #dee2e6}.difficulty-option{margin:10px 0;padding:10px;border:1px solid #ddd;border-radius:4px;background:#fff}.difficulty-option label{display:flex;align-items:center;cursor:pointer}.difficulty-option input[type=radio]{margin-right:10px}.custom-ships-section{background:#f8f9fa;padding:20px;border-radius:8px;border:2px solid #dee2e6}.custom-ships{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}.ship-selector{display:flex;align-items:center;gap:10px;padding:5px}.ship-selector input{width:60px;padding:5px;border:1px solid #ccc;border-radius:4px}.menu-buttons{display:flex;flex-direction:column;gap:15px;align-items:center}.menu-buttons button{width:300px;padding:15px;font-size:16px;background:#007bff;color:#fff;border:none;border-radius:8px;cursor:pointer;transition:background .3s}.menu-buttons button:hover{background:#0056b3}.menu-buttons button:nth-child(2){background:#dc3545}.menu-buttons button:nth-child(2):hover{background:#c82333}.competitive-setup{max-width:1200px;margin:0 auto}.setup-header{text-align:center;margin-bottom:30px;background:#f8f9fa;padding:20px;border-radius:8px;border:2px solid #dee2e6}.setup-header h2{color:#dc3545;margin:0}.setup-container{display:grid;grid-template-columns:350px 1fr;gap:30px;margin-bottom:30px}.setup-controls{background:#f8f9fa;padding:20px;border-radius:8px;border:2px solid #dee2e6;height:fit-content}.ship-harbor{margin-bottom:25px}.ship-harbor h4{color:#2c3e50;margin-bottom:15px}.harbor-ship{margin:10px 0}.harbor-ship button{width:100%;padding:12px;border:2px solid #dee2e6;border-radius:6px;background:#fff;cursor:pointer;transition:all .2s;font-size:14px;font-weight:500}.harbor-ship button:hover{background:#e9ecef;border-color:#007bff}.harbor-ship button.selected{background:#007bff;color:#fff;border-color:#007bff}.all-ships-placed{color:#28a745;font-weight:700;text-align:center;padding:15px;background:#d4edda;border-radius:6px;margin:10px 0}.ship-controls{margin:25px 0;padding:20px;background:#e9ecef;border-radius:6px;border:1px solid #ced4da}.ship-controls h4{margin:0 0 15px;color:#495057}.ship-controls button{width:100%;padding:10px;background:#6c757d;color:#fff;border:none;border-radius:4px;cursor:pointer;margin-bottom:15px;font-size:14px}.ship-controls button:hover{background:#5a6268}.ship-preview{display:flex;justify-content:center;margin-top:15px}.ship-preview-grid{display:grid;gap:2px;background:#333;padding:5px;border-radius:4px}.preview-cell{width:20px;height:20px;border:1px solid #666}.preview-cell.ship{background:#007bff}.preview-cell.empty{background:#e9ecef}.setup-actions{display:flex;flex-direction:column;gap:12px}.setup-actions button{padding:12px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s}.auto-place{background:#28a745;color:#fff}.auto-place:hover{background:#218838}.clear-board{background:#ffc107;color:#212529}.clear-board:hover{background:#e0a800}.setup-board-container{display:flex;flex-direction:column;align-items:center;gap:20px}.setup-board-container h4{color:#2c3e50;font-size:18px;margin:0}.setup-board{display:grid;gap:2px;background:#333;padding:10px;border-radius:8px;max-width:600px}.setup-board .cell{width:30px;height:30px;background:#4fc3f7;border:1px solid #29b6f6;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s}.setup-board .cell.ship{background:#424242;color:#fff;border-color:#616161}.setup-board .cell.water:hover{background:#81d4fa;transform:scale(1.05)}.setup-board .cell.ship:hover{background:#616161;transform:scale(1.05)}.setup-board .cell.hover-preview{background:#a5d6a7!important;border-color:#4caf50!important}.setup-navigation{display:flex;justify-content:space-between;align-items:center;padding:20px 0}.back-button{padding:12px 24px;background:#6c757d;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:16px}.back-button:hover{background:#5a6268}.start-game-button{padding:15px 30px;background:#28a745;color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:18px;font-weight:700;animation:pulse 2s infinite}.start-game-button:hover{background:#218838}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.game-container{display:flex;flex-direction:column;align-items:center;gap:20px}.single-board-container{display:flex;flex-direction:column;align-items:center;gap:15px}.game-info{background:#f8f9fa;padding:20px;border-radius:8px;border:2px solid #dee2e6;text-align:center;min-width:300px}.victory{color:#28a745;font-weight:700;font-size:18px}.competitive-container{display:flex;flex-direction:column;align-items:center;gap:20px}.competitive-boards{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1200px}.board-section{display:flex;flex-direction:column;align-items:center;gap:15px}.board-section h4{margin:0;color:#2c3e50;font-size:18px}.turn-indicator{font-size:18px;font-weight:700;padding:10px;border-radius:8px;margin:10px 0}.turn-indicator.player{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.turn-indicator.computer{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.game-board{display:grid;gap:2px;background:#333;padding:10px;border-radius:8px;max-width:500px;margin:0 auto}.game-board.disabled{opacity:.6;pointer-events:none}.cell{width:30px;height:30px;background:#e3f2fd;border:1px solid #90caf9;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .2s}.cell:hover{background:#bbdefb;transform:scale(1.05)}.cell.unrevealed{background:#e3f2fd}.cell.miss{background:#cfd8dc;cursor:default}.cell.hit{background:#f44336;color:#fff;cursor:default}.editor-container{display:grid;grid-template-columns:300px 1fr;gap:30px;align-items:start}.editor-controls{background:#f8f9fa;padding:20px;border-radius:8px;border:2px solid #dee2e6}.editor-actions{display:flex;flex-direction:column;gap:10px}.editor-actions button,.editor-actions label{padding:10px;background:#28a745;color:#fff;border:none;border-radius:4px;cursor:pointer;text-align:center}.editor-actions button:hover{background:#218838}.editor-actions input[type=file]{margin-top:5px}.editor-board-container{display:flex;flex-direction:column;align-items:center;gap:15px}.editor-board{display:grid;gap:2px;background:#333;padding:10px;border-radius:8px;max-width:600px}.editor-board .cell{background:#81c784}.editor-board .cell.ship{background:#424242;color:#fff}.editor-board .cell.water{background:#4fc3f7}.editor-board .cell:hover{background:#a5d6a7}.editor-board .cell.ship:hover{background:#616161}.stats-container{max-width:800px;margin:0 auto;background:#f8f9fa;padding:30px;border-radius:8px;border:2px solid #dee2e6}.stats-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin:20px 0}.game-stat{background:#fff;padding:15px;border-radius:8px;border:1px solid #dee2e6;box-shadow:0 2px 4px #0000001a}.game-stat p{margin:5px 0}.game-stat strong{color:#007bff}.game-stat .result{font-weight:700;padding:5px 10px;border-radius:4px;margin:5px 0}.game-stat .result.win{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.game-stat .result.loss{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}