*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    -webkit-tap-highlight-color:transparent;
}

body{
    font-family:Tahoma,Arial,sans-serif;
    min-height:100vh;
    color:#fff;
    background:
        radial-gradient(circle at 20% 10%,#164c72 0%,transparent 35%),
        radial-gradient(circle at 80% 20%,#32166c 0%,transparent 35%),
        linear-gradient(135deg,#020812,#071b31,#020812);
    padding:15px;
}

button{
    font-family:inherit;
}

.hidden{
    display:none!important;
}

.app{
    width:min(1150px,100%);
    margin:auto;
}

/* HEADER */
.header{
    text-align:center;
    margin:8px 0 20px;
}

.logo{
    font-size:clamp(32px,7vw,58px);
    font-weight:1000;
    letter-spacing:1px;
    color:#5cecff;
    text-shadow:
        0 0 12px rgba(92,236,255,.7),
        0 0 35px rgba(92,236,255,.3);
}

.brand{
    margin-top:6px;
    color:#9db9ce;
    font-size:14px;
}

/* CARD */
.card{
    background:rgba(5,20,36,.90);
    border:1px solid rgba(92,236,255,.18);
    border-radius:25px;
    padding:22px;
    box-shadow:
        0 25px 70px rgba(0,0,0,.42),
        inset 0 1px rgba(255,255,255,.03);
    backdrop-filter:blur(14px);
}

/* MODE */
.mode-card{
    max-width:760px;
    margin:35px auto;
    text-align:center;
}

.mode-card h2{
    font-size:29px;
    margin-bottom:8px;
}

.mode-card p{
    color:#a9c5d8;
    line-height:1.8;
    margin-bottom:22px;
}

.mode-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.mode-btn{
    border:0;
    color:white;
    padding:28px 15px;
    border-radius:20px;
    cursor:pointer;
    font-size:20px;
    font-weight:900;
    background:linear-gradient(135deg,#087fa8,#19c4df);
    box-shadow:0 12px 30px rgba(0,0,0,.28);
    transition:.2s;
}

.mode-btn:hover{
    transform:translateY(-4px);
}

.mode-btn:active{
    transform:scale(.97);
}

.mode-btn.human{
    background:linear-gradient(135deg,#6735c8,#9d5cff);
}

.mode-icon{
    display:block;
    font-size:42px;
    margin-bottom:10px;
}

/* SETUP */
.setup{
    max-width:700px;
    margin:25px auto;
    text-align:center;
}

.setup h2{
    font-size:28px;
    margin-bottom:8px;
}

.setup-info{
    color:#aac4d6;
    line-height:1.8;
    margin-bottom:18px;
}

.setup-board{
    width:min(90vw,500px);
    margin:15px auto 20px;
}

/* BOARD */
.board{
    width:100%;
    aspect-ratio:1;
    display:grid;
    grid-template-columns:repeat(10,1fr);
    gap:3px;
    padding:5px;
    background:#020d19;
    border:1px solid rgba(92,236,255,.15);
    border-radius:16px;
}

.cell{
    min-width:0;
    aspect-ratio:1;
    position:relative;
    background:#0c3857;
    border-radius:5px;
    transition:.12s;
}

/* SHIP ONLY DURING SETUP */
.cell.ship{
    background:linear-gradient(145deg,#718096,#39495b);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}

/* CLICKABLE ENEMY */
.cell.clickable{
    cursor:pointer;
}

.cell.clickable:hover{
    background:#16648d;
    transform:scale(.95);
}

.cell.clickable:active{
    transform:scale(.88);
}

/* HIT */
.cell.hit{
    background:#42151e;
}

.cell.hit::after{
    content:"X";
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#ff304f;
    font-weight:1000;
    font-size:clamp(16px,4vw,29px);
    text-shadow:0 0 13px rgba(255,48,79,.8);
}

/* MISS */
.cell.miss{
    background:#123b54;
}

.cell.miss::after{
    content:"X";
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#e5f8ff;
    font-weight:1000;
    font-size:clamp(16px,4vw,29px);
}

/* CONTROLS */
.controls{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
}

.btn{
    border:0;
    border-radius:14px;
    padding:13px 22px;
    color:white;
    font-size:16px;
    font-weight:900;
    cursor:pointer;
}

.random-btn{ background:#277bd1; }
.confirm-btn{ background:#16ae77; }
.restart-btn{ background:#e24b64; }

.btn:active{ transform:scale(.96); }

/* GAME */
.game{ margin-top:20px; }

.game-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.game-title{
    font-size:26px;
    font-weight:1000;
}

.turn{
    background:#0d2d48;
    color:#67eaff;
    border:1px solid rgba(103,234,255,.18);
    border-radius:14px;
    padding:11px 17px;
    font-weight:900;
}

/* BOARDS */
.boards{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:22px;
}

.board-panel{
    background:rgba(2,13,25,.68);
    border-radius:21px;
    padding:15px;
    border:1px solid rgba(255,255,255,.07);
}

.board-title{
    text-align:center;
    font-size:20px;
    font-weight:1000;
    margin-bottom:13px;
}

.enemy-label{ color:#ff8092; }
.own-label{ color:#70eaff; }

.battle-board .cell.ship{
    background:#0c3857;
    box-shadow:none;
}

/* STATS */
.stats{
    display:flex;
    justify-content:center;
    gap:8px;
    flex-wrap:wrap;
    margin-top:13px;
}

.stat{
    background:#0b2439;
    color:#cce4f1;
    padding:8px 12px;
    border-radius:10px;
    font-size:14px;
}

/* INFO */
.info{
    margin-top:20px;
    padding:16px;
    border-radius:17px;
    background:#071b2d;
    color:#b7cedd;
    line-height:1.9;
}

.info strong{ color:#61e9ff; }

/* OVERLAY */
.overlay{
    position:fixed;
    inset:0;
    z-index:100;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:18px;
    background:rgba(0,5,12,.93);
    backdrop-filter:blur(10px);
}

.overlay-box{
    width:min(500px,100%);
    background:linear-gradient(145deg,#0c2842,#071728);
    border:1px solid rgba(92,236,255,.2);
    border-radius:25px;
    padding:30px 22px;
    text-align:center;
    box-shadow:0 25px 80px rgba(0,0,0,.65);
}

.overlay-box .big{
    font-size:55px;
    margin-bottom:10px;
}

.overlay-box h2{
    color:#62eaff;
    font-size:27px;
    margin-bottom:12px;
}

.overlay-box p{
    color:#c0d5e1;
    line-height:1.9;
    margin-bottom:20px;
}

.start-btn{
    border:0;
    border-radius:15px;
    padding:14px 30px;
    background:linear-gradient(135deg,#00a9d4,#6568ff);
    color:white;
    font-size:18px;
    font-weight:1000;
    cursor:pointer;
}

/* FOOTER */
.footer{
    text-align:center;
    color:#718da1;
    font-size:13px;
    margin:25px 0 8px;
    line-height:1.8;
}

/* MOBILE */
@media(max-width:750px){
    body{ padding:9px; }
    .card{ padding:13px; border-radius:19px; }
    .mode-grid{ grid-template-columns:1fr; }
    .mode-btn{ padding:22px 12px; }
    .boards{ grid-template-columns:1fr; }
    .board-panel{ padding:9px; }
    .game-head{ justify-content:center; text-align:center; }
    .game-title{ width:100%; }
    .turn{ width:100%; text-align:center; }
    .restart-btn{ width:100%; }
}