:root{--ocean-bg: #f0f8ff;--ocean-dark: #006994;--ocean-medium: #4ca3dd;--ocean-light: #e0f0f5;--cell-size: clamp(1.5rem, 4vh, 2.5rem)}body{margin:0;min-height:100vh;display:flex;justify-content:center;align-items:center;background-color:var(--ocean-bg);font-family:sans-serif;color:var(--ocean-dark);overflow:auto}.app-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;justify-content:center;padding:1rem;box-sizing:border-box}.game-area{display:flex;gap:2rem;align-items:flex-start;margin-top:1rem;flex-wrap:wrap;width:100%}.player-section,.enemy-section{display:flex;flex-direction:column;align-items:center}.board-layout{display:inline-grid;grid-template-columns:var(--cell-size) auto;grid-template-rows:var(--cell-size) auto;gap:.3rem;padding:1rem;background-color:var(--ocean-dark);border-radius:1rem;box-shadow:0 1rem 2rem #0069944d}.headers-row{display:grid;grid-template-columns:repeat(10,var(--cell-size));gap:.25rem;grid-column:2}.headers-column{display:grid;grid-template-rows:repeat(10,var(--cell-size));gap:.25rem;grid-row:2}.game-grid{display:grid;grid-template-columns:repeat(10,var(--cell-size));grid-template-rows:repeat(10,var(--cell-size));gap:.25rem;margin-right:1rem;margin-bottom:1rem;touch-action:manipulation}.label-cell{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.8rem}.cell{background-color:var(--ocean-light);width:100%;height:100%;cursor:pointer;border-radius:.5rem;transition:all .2s ease}@media(hover:hover){.cell:hover{background-color:var(--ocean-medium);transform:scale(1.05)}}.cell-clicked{background-color:var(--ocean-dark);border:2px solid white;pointer-events:none;transform:scale(.95)}.shipyard{display:flex;flex-direction:column;background-color:#ffffff80;padding:1.5rem;border-radius:1rem;border:2px dashed var(--ocean-dark);min-width:12rem;align-items:flex-start;gap:1.5rem}.shipyard h2{margin:0;font-size:1.2rem;color:var(--ocean-dark);text-transform:uppercase;letter-spacing:1px}.fleet-ship{display:flex;gap:.25rem;padding:.25rem;border-radius:.5rem;cursor:grab;transition:all .2s ease;background-color:transparent}@media(hover:hover){.fleet-ship:hover{opacity:.9}}.fleet-ship:active{cursor:grabbing}.fleet-ship.vertical{flex-direction:column}.ship-present,.ship-part{width:var(--cell-size);height:var(--cell-size);background-color:#34495e;border:1px solid white;border-radius:calc(var(--cell-size) / 2);box-shadow:2px 2px 5px #0000004d}.ship-hitted{background-color:#e74c3c;border:2px solid white}.ship-selected{background-color:#1d2bac;transform:scale(1.05);box-shadow:0 4px 8px #0003}.reset-btn,.random-btn,.start-btn,.new-game-btn{padding:.8rem 2rem;color:#fff;border:none;border-radius:2rem;cursor:pointer;font-weight:700;font-size:1rem;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 6px #0000001a;transition:transform .1s ease,background-color .2s ease;margin-top:1rem}.reset-btn:active,.random-btn:active,.start-btn:active,.new-game-btn:active{transform:scale(.95)}.reset-btn{background-color:#e74c3c}@media(hover:hover){.reset-btn:hover{background-color:#a7372b}}.start-btn{background-color:#2ecc71;width:100%;border-radius:.5rem;padding:1rem;font-size:1.2rem}@media(hover:hover){.start-btn:hover{background-color:#067735}}.random-btn{background-color:#b339e4}@media(hover:hover){.random-btn:hover{background-color:#7c1aa3}}.new-game-btn{margin:1.5rem auto 0;background-color:#42db34}.game-over-overlay{position:fixed;inset:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.game-over-modal{background-color:#fff;padding:2rem;border-radius:1rem;text-align:center;max-width:75%;box-shadow:0 10px 25px #00000080;border:4px solid var(--ocean-dark)}.game-over-modal h2{font-size:2.5rem;margin-top:0;color:var(--ocean-dark)}@media(max-width:768px){.app-container{justify-content:flex-start;padding-top:2rem;height:auto;min-height:100%}.game-area{flex-direction:column;align-items:center;gap:1.5rem;padding-bottom:4rem}.shipyard{width:80%;flex-direction:row;flex-wrap:wrap;justify-content:center;padding:1rem;gap:1rem}.fleet-ship{transform:scale(.8)}}