/* Modern-Normalize CSS reset: */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    :root {
    line-height: 1.5;
    }
    h1, h2, h3, h4, h5, figure, p, ol, ul {
    margin: 0;
    }
    h1, h2, h3, h4, h5 {
        font-size: inherit;
        font-weight: inherit;
    }
    img {
        display: block;
        max-inline-size: 100%;
    }
    ol[role="list"], ul[role="list"] {
    list-style: none;
    padding-inline: 0;
    }
/* Modern-Normalize CSS reset ends here */

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: radial-gradient(circle at center, #002244, #000000);
}
.container{
    width: 100%;
    height: 100%;
    position: relative;
}
/* Hero section styling starts from here */
    .hero{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at center, #002244, #000000);
        position: relative;
        padding-bottom: 25px;
        overflow: hidden;
    }

    /* Menu section styling starts from here */
        .menu{
            position: absolute;
            top: 28%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 85%;
            height: 45%;
            background: linear-gradient(180deg, #0b1c2c, #000000);
            border-radius: 25px;
            border: 2px solid #ffc400;
            border-radius: 12px;
            box-shadow: 0 0 100px rgba(198,151,73,0.5);
            animation: menu-glow 3s ease-in-out infinite;
            transition: opacity 1s ease, visibility 1s ease;
        }
        @keyframes menu-glow {
            0%   { box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); }
            50%  { box-shadow: 0 0 60px rgba(255, 255, 255, 0.5); }
            100% { box-shadow: 0 0 20px rgba(255, 255, 255, 0.1); }
        }
        .game-title{
            font-size: clamp(3.5rem,4vw,5rem);
            font-family: 'Pirata One', cursive;
            letter-spacing: 5px;
            color: whitesmoke;
            height: 25%;
            transition: opacity 1s ease, visibility 1s ease;
        }
        .menu-buttons{
            width: 50%;
            height: 40%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            transition: opacity 1s ease, visibility 1s ease;
            margin-top: 10px;
        }
        .menu-buttons div{
            height: 28%;
            border: 2px solid rgb(255, 187, 0);
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .menu-buttons div:hover,.toggle:hover{
            transition: transform 0.25s ease, text-shadow 0.25s ease;
            transform: scale(1.1) rotate(-1deg);
            text-shadow:
              3px 3px 0 #000,
              6px 6px 12px rgba(0, 0, 0, 0.6),
              0 0 25px rgba(255, 191, 0, 0.8);
            cursor: pointer;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
        }
        .menu-btn-txt {
            font-family: 'Pirata One', 'Cinzel Decorative', serif;
            font-size: clamp(1.5rem, 2vw, 2.2rem);
            font-weight: 700;
            color: #f5f5f5;
            letter-spacing: 2px;
            transition: transform 0.25s ease, text-shadow 0.25s ease;
            display: block;
        }
        .instruction-main{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 100%;
            height: 100%;
            visibility: hidden;
            opacity: 0;
            border-radius: 15px;
            padding: 10px;
            color: whitesmoke;
            padding-left: 20px;
            overflow: hidden;
            overflow-y: auto;
        }
        .instruction-text-heading{
            font-family: 'Orbitron', cursive;
            font-size: clamp(2rem, 1.5vw, 2rem);
            padding-top: 15px ;
            color: rgb(255, 187, 0);
        }
        .instruction-text{
            font-family: 'nunito', cursive;
            font-size: 18px;
            padding-top: 10px;
        }
        .instruction-back-btn{
            position: absolute;
            top: 100%;
            left: 50%;
            width: 100px;
            transform: translate(-50%,-50%);
            border: 2px solid rgb(255, 187, 0);
            border-radius: 15px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: 'Pirata One', 'Cinzel Decorative', serif;
            font-size: clamp(1rem, 1.5vw, 2rem);
            margin-top: 5vh;
            z-index: 1;
            margin-bottom: 10px;
            color: white;
            visibility: hidden;
            opacity: 0;
        }
        .instruction-back-btn:hover {
            transform: translate(-50%, -50%) scale(1.1) rotate(-2deg);
            transition: transform 0.25s ease, text-shadow 0.25s ease;
            cursor: pointer;
            box-shadow: 0 0 20px rgba(198,151,73,0.7);
        }
        .active {
            justify-content: flex-end;
        }
        .back-btn{
            position: absolute;
            top: 40px;
            left: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            visibility: hidden;
            opacity: 0;
            font-size: clamp(1rem, 2vw, 2rem);
            font-family: 'Pirata One', cursive;
            color: whitesmoke;
        }
        .back-img{
            width: 50px;
            height: 50px;
        }
        .back-img:hover{
            transform: scale(1.1);
        }
        .sound-main{
            position: absolute;
            top: 50%;
            left: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            transform: translate(-50%,-50%);
            width: 50%;
            height: 70px;
            font-size: clamp(1.5rem, 2vw, 2.2rem);
            font-family: 'Pirata One', cursive;
            color: whitesmoke;
            gap: 10px;
            visibility: hidden;
            opacity: 0;
            border: 1px solid rgb(255, 187, 0);
            border-radius: 15px;
            padding: 10px;
        }
        .toggle{
            width: 100%;
            height: 80%;
            border-radius: 15px;
            padding: 2px;
            border: 2px solid rgb(255, 187, 0);
            display: flex;
            margin-left: 10px;
        }
        .toggle-circle{
            width: 40%;
            height: 90%;
            border-radius: 50%;
            background-color: #f5f5f5;
        }

    /* Menu section styling ends here */

    /* Ship container styling starts from here */
        .ships-container{
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            align-items: center!important;
            gap: 20px;
            width: 100%;
            height: 350px;
            transition: opacity 1s ease, visibility 1s ease;
        }
        .ships-container img{
            height: 48%;
        }
        .animate-ship-left{
            animation: animate-from-left-right 3s;
        }
        .animate-ship-right{
            animation: animate-from-right-left 3s;
        }
        @keyframes animate-from-left-right {
            0%{
                transform: translateX(-600px);
            }
            50%{
                transform: translateX(50px);
            }
            100%{
                transform: translateX(0px);
            }
        }
        @keyframes animate-from-right-left {
            0%{
                transform: translateX(600px);
            }
            50%{
                transform: translateX(-50px);
            }
            100%{
                transform: translateX(0px);
            }
        }

        @media (min-width: 450px) {
            .ships-container{
                flex-direction: row;
                justify-content: center;
            }
            .ships-container img{
                height: 58%;
            }
        }
        @media (min-width: 470px) {
            .menu{
                width: 300px;
                height: 400px;
            }
            .game-title{
                margin-top: 20px;

            }
            .ships-container img{
                height: clamp(100px,40vw,300px);
            }
        }  
        @media (min-width: 768px) {
            .ships-container{
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                height: 50%;
                padding-left: 0px !important;
                padding-right: 0px !important;
            }
            .ships-container img{
                height: clamp(100px,50vw,350px);
            }
        } 
        @media (min-width: 1024px) {
            .menu{
                top: 28%;
                width: 360px;
                height: 410px;
            }
            .ship-one {
                padding-left: 50px;
            }
            .ship-two {
                padding-right: 70px;
            }
            .ships-container img{
                height: clamp(100px,50vw,430px);
            }
        }
        @media (min-width: 1200px) {
            .ships-container{
                height: 60%;
            }
            .ships-container img{
                height: clamp(100px,50vw,500px);
            }
        }
        @media (min-width: 1500px) {
            .ships-container{
                height: 67%;
            }
            .ships-container img{
                height: clamp(100px,50vw,600px);
            }
        }  
        @media (min-width: 1650px) {
            .ships-container{
                height: 77%;
            }
            .ships-container img{
                height: clamp(100px,50vw,655px);
            }
        }                      
    
    /* Ship container styling ends here */

    /* JS selector classes starts from here */
        .hide{
            opacity: 0;
            visibility: hidden;
            transition: opacity 1s ease, visibility 1s ease;
        }
        .hide-quick{
            opacity: 0;
            visibility: hidden;
        }
        .show{
            opacity: 1!important;
            visibility: visible!important;
            transition: opacity 1s ease, visibility 1s ease !important;
        }
        .removeDom{
            display: none!important;
        }
        .addDom{
            display: grid!important;
        }
    /* JS selector classes ends here */
/* Hero section styling ends here */


/* Main content styling starts from here */
    .mainContent{
        display: flex;
        justify-content: center;
        align-items: center;
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        transition: opacity 1s ease, visibility 1s ease;
        overflow-x: hidden;
    }
    .main-back-btn{
        position: absolute;
        top: 40px;
        left: 40px;
    }
    .main-back-img{
        width: 25px;
        height: 25px;
    }
    .main-back-img:hover{
        transform: scale(1.1);
    }
    /* Main container styling starts from here */
        .main-container{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            width: 60%;
            height: 80%;
        }
        @media (max-width: 1350px) {
            .main-container{
                width: 65%;
                height: 70%;
            }
        }
        .axis-container{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60%;
            height: 15%;
            gap: 30px;
        }
        .strategy-board-container{
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 65%;
            position: relative;
        }
        .playerBoard{
            width: 60%;
            height: 100%;
            display: grid;
            grid-template-columns: repeat(10,1fr);
            grid-template-rows: repeat(10,1fr);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
            position: relative;
            margin-right: 25px;
        }
        .enemyBoard{
            width: 60%;
            display: grid;
            grid-template-columns: repeat(10,1fr);
            grid-template-rows: repeat(10,1fr);
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
            display: none;
            margin-left: 25px;
            height: 100%;
        }
        .enemyBoard .cell{
            border: 1px solid rgb(0, 102, 255);
        }
        .cell{
            border: 1px solid rgb(255, 187, 0);
        }
        .cellBg{
            background-color: white;
        }
        .ships-selection{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 10px;
            border: 2px solid rgb(255, 187, 0);
            width: 30%;
            height: 100%;
            border-radius: 10px;
            padding: 20px;
        }
        .ship-container{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 19%;
            width: 90%;
            border: 0.5px solid rgb(255, 255, 255);
            border-radius: 10px;
            padding: 10px;
            user-select: none;
        }
        .ship-container:hover{
            border: 2px solid rgb(255, 187, 0);
        }
        .ships-selection img{
            width: 90%;
            height: 70%;
            filter: brightness(0) invert(1);
            border: none;
        }
        .ship-name{
            width: 100%;
            height: 30%;
            text-align: center;
            font-family: 'Pirata One', 'Cinzel Decorative', serif;
            font-size: clamp(1rem, 1vw, 1.5rem);
            font-weight: 700;
            color: #f5f5f5;
            letter-spacing: 2px;
        }
        img.boat {
            filter: brightness(0) invert(1);
        }
        .highlight{
            background-color: whitesmoke;
        }
        .reset-start-container{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 60%;
            height: 15%;
            gap: 30px;
        }
        .Xaxis-container,.Yaxis-container,.start-container,.reset-container{
            display: grid;
            place-items: center;
            height: 50%;
            width: 30%;
            border: 2px solid rgb(255, 187, 0);
            border-radius: 10px;
            font-family: 'Pirata One', 'Cinzel Decorative', serif;
            font-size: clamp(1rem, 2vw, 2rem);
            font-weight: 700;
            color: #f5f5f5;
            letter-spacing: 2px;
        }
        .reset-start-container div:hover,.axis-container div:hover{
            transition: transform 0.25s ease, text-shadow 0.25s ease;
            transform: scale(1.1) rotate(-1deg);
            text-shadow:
            3px 3px 0 #000,
            6px 6px 12px rgba(0, 0, 0, 0.6),
            0 0 25px rgba(255, 191, 0, 0.8);
            cursor: pointer;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
        }
        .selected{
            transform: scale(1.1) rotate(-1deg);
            text-shadow:
            3px 3px 0 #000,
            6px 6px 12px rgba(0, 0, 0, 0.6),
            0 0 25px rgba(255, 191, 0, 0.8);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
        }

    /* Main container styling ends here */

    .msg-main,.status-main{
        position: absolute;
        top: 9%;
        left: 50%;
        width: 90vw;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f5f5f5;
        border: 1px solid rgba(255, 191, 0, 0.8);
        border-radius: 10px;
        transform: translate(-50%);
        font-family: 'nunito', cursive;
        padding: 5px;
        visibility: hidden;
        opacity: 0;
        background-color:#0b1c2c
    }
    .status-main {
        top: 80%;
        left: -100%; 
    }
    .player-image{
        height: 50px;
        width: 50px;
    }
/* Main content styling ends here */

/* Game end styling starts from here */
    .game-end{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        border: 3px solid rgba(255, 191, 0, 0.8);
        padding: 10px;
        border-radius: 10px;
        width: 420px;
        height: 400px;
        gap: 15px;
        animation: menu-glow 3s ease-in-out infinite;
        visibility: hidden;
        opacity: 0;
    }
    .gameOverMsgMain{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        color: white;
        font-family: 'nunito', cursive;
        font-size: 3rem;
        font-weight: 900;
    }
    .gameOverMsgMain img{
        height: 150px;
        width: 150px;
    }
    .home-btn-div{
        border: 2px solid rgb(255, 187, 0);
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        color: white;
        font-family: 'nunito', cursive;
        font-size: 2rem;
        margin-top: 20px;
    }
    .home-btn-div:hover{
        transition: transform 0.25s ease, text-shadow 0.25s ease;
        transform: scale(1.1) rotate(-1deg);
        text-shadow:
        3px 3px 0 #000,
        6px 6px 12px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(255, 191, 0, 0.8);
        cursor: pointer;
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
    }

    @keyframes slideMessage {
        0% {
            left: -100%;
            transform: translateX(0);
        }
        20% {
            left: 50%;
            transform: translateX(-50%); /* center the element */
        }
        80% {
            left: 50%;
            transform: translateX(-50%);
        }
        100% {
            left: 110%;   /* move offscreen right */
            transform: translateX(0);
        }
    }

/* Game end styling ends here */

/* Main container Media queries starts from here */
    @media (min-width: 868px) {
        .msg-main,.status-main{
            width: 40vw;
            font-size: clamp(1rem,2vw,1.5rem);
            gap: 20px;
        }
        .main-back-img{
            width: 50px;
            height: 50px;
        }
    }
    @media (max-width: 768px) {
        body {
            overflow-y: auto;
        }
        .main-container{
            width: 70%;
            height: auto;
            align-items: center;
            margin-top: 70px;
        }
        .msg-main{
            top: 1%;
        }
        .status-main {
            background-color:#0b1c2c
        }
        .playerBoard,.enemyBoard{
            width: 100%;
            min-height: 400px;
            margin: 0;
        }    
        .strategy-board-container{
            flex-direction: column;
            align-items: center;
            gap: 20px;
            height: 100%;
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .ships-selection{
            display: grid;
            grid-template-columns: repeat(3,1fr);
            width: 100%;
            padding: 10px;
        }
        .ship-container{
            height: 80%;
            width: 100%;
            border: 0.50px solid rgb(255, 255, 255);
            border-radius: 10px;
        }
        .reset-start-container,.axis-container{
            min-height: 50px;
        }
        .Xaxis-container,.Yaxis-container,.start-container,.reset-container{
            height: 80%;
        }
    }
    @media (max-width: 450px) {
        .mainContent{
            padding: 20px;
        }
        .main-container{
            width: 100%;
            align-items: center;
            margin-top: 100px;
        }
        .msg-main{
            top: 2%;
        }
        .game-end{
            width: 320px;
        }
        .gameOverMsgMain img{
            height: 50px;
            width: 50px;
        }
    }
    @media (max-width: 375px) {
        body {
            overflow-y: auto;
        }
        .main-container{
            margin-top: 10px;
        }
        .mainContent{
            height: auto;
        }
        .ships-selection{
            grid-template-columns: repeat(2,1fr);
        }
    }
/* Main container Media queries ends here */


/*# sourceMappingURL=styles.1fc9b70bd393fd423ba8.css.map*/