/*  <<< CSS RESET FILE >>>  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
HTML5 display-role reset for older browsers 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquotebefore, blockquoteafter,
qbefore, qafter {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

/*  <<< \CSS RESET FILE >>>  */

/*  <-- PARALLAX SETTINGS -->  */
.parallax {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-areas: "stack";
    animation: page-load linear 1.5s;
}
.parallax > *{
    grid-area: stack;
}
.parallax>img{
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    user-select: none;
    pointer-events: none;
}
.para{
    scale: 1.05;
    pointer-events: none;
}
.vector{
    scale: 1.05;
    pointer-events: none;
}
#para-10{
    translate: -100;
    
    /* Ship transition variables > used for smooth ship transition */
    --ship-pos-x: 0px;
    --ship-pos-y: 0px;
}
.ship-travails{
    animation: 42s ship-travails linear infinite;
}



@keyframes ship-travails {
    from{
        transform: translate(-70%);
    }
    to{
        transform: translate(180%);
    }
}

/*  <-- \PARALLAX SETTINGS -->  */
@keyframes page-load {
    from{
        opacity: 0;
        scale: 1.15;
    } 
    to{
        opacity: 1;
        scale: 1;
    }
}
:root{ 
    background-color: #160038;
    overflow: hidden;
    font-family: Helvetica, sans-serif, Arial;

    --color: #c1f3f3;
    --focus-color: #10a7a7;
    --input-blue-color: #006595;
}

/* SOUND ON OFF MODAL */
#user-sound-input-background{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
}
#user-sound-input-container{
    display: flex;
    flex-direction: column;
    padding: 2rem;
    gap: 1rem;
    background-color: var(--background-color);
    background-color: rgba(0, 13, 31, 0.7);
    position: relative;
    text-align: center;
}
#sound-question{
    color: var(--color);
    font-size: 28px;
    font-weight: bold;
}
#sound-note{
    color: var(--color);
    font-size: 18px;
    font-weight: bold;
}
#sound-buttons-container{
    display: flex;
    width: fit-content;
    gap: 1rem;
    align-self: center;
}
#audio-controls-modal-container{
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}
#audio-icon-modal-container{
    display: flex;
    width: fit-content;
    height: fit-content;
    position: relative;
    width: 60px;
    height: 60px;
}
/* \ SOUND ON OFF MODAL */
.pointer-event-none{
    pointer-events: none !important;
}

#volume-container {
    z-index: 69;
    display: flex;
    align-items: center;
    position: absolute;
    gap: 1rem;
    top: 50px;
    right: 50px;
}
.move-volume-container{
    left: 14px !important;
    top: 14px !important;
    pointer-events: none;
    scale: 1.3;
}
.audio-control{
    height: 35px;
    width: 35px;
    cursor: pointer;
}
.audio-control:hover{
    transform: scale(1.1);
}
.audio-control:active{
    transform: scale(1);
}
#volume-slider {
    visibility: none;
    height: 5px;
	min-width: 150px;
	background: #555;
	border-radius: 15px;
    opacity: 0;
}
.display-none{
    display: none;
}
.slider-show{
    animation: show-slider 0.3s ease forwards;
}
@keyframes show-slider {
    to {
        display: block;
        visibility: visible;
        opacity: 1;
    }
}
#volume-slider.ui-slider-range-min {
    height: 5px;
    min-width: 150px;
    border: none;
    border-radius: 10px;
}
#volume-slider.ui-slider-handle {
    width: 20px;
    height: 20px;
    border-radius: 20px;
    margin-top: -2px;
    cursor: pointer;
}

h1{
    color: var(--color);
    font-size: 46px;
    font-weight: bold;
}
h2{
    color: var(--color);
    font-size: 22px;
    font-weight: bold;
}
.form-container{
    top: 32%;
    left: 38%;
    right: 38%;

    top: 32vh;
    left: 38vw;
    right: 38vw;

    height: 330px;
    width: 400px;
    display: flex;
    align-self: center;
    justify-self: center;
    position: absolute;

    background-color: var(--background-color);
    background-color: rgba(0, 13, 31, 0.7);
}
.form-opacity-0{
    opacity: 0;
}
.fade-in-form-container{
    animation: fade-in-form 1s linear forwards;
}
@keyframes fade-in-form {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
.hero-container{
    text-align: center;
    align-self: flex-start;
    justify-self: center;
}
.header-container{
    align-items: center;
    text-align: center;
    margin-top: 5%;
}
form{
    display: flex;
    flex-direction: column;
    padding: 15% 15%;
}
.gap{
    margin-top: 15px;
}
#input-player{
    background-color: rgba(0, 13, 31, 1);
    color: #ffffff;
    border: none;
    outline: none;
    border-top: 1px solid black;
    border-bottom: 1px solid var(--input-blue-color);
    font-size: 20px;
    padding: 1% 5%;
}
#input-player::placeholder{
    color: var(--input-blue-color);
}
#input-player:focus::placeholder{
    background-color: rgba(0, 13, 31, 1);
    color: var(--focus-color);
}
#input-player:focus{
    outline: none;
    border: 1px solid var(--focus-color);
    box-shadow: 0 0 10px var(--focus-color);
}
#input-player:-webkit-autofill{
    -webkit-text-fill-color: white;   
    -webkit-background-clip: text;
}
#btn-play,
#btn-sound-yes,
#btn-sound-no {
    border-radius: 15px;
    padding: 0.6rem 1.7rem;
    background-image: linear-gradient(to right, #1A428F 0%, #10a7a7  51%, #1A428F  100%);
    transition: 0.5s;
    background-size: 200% auto;
    color: var(--color);
    border: none;  
    display: block;
    cursor: pointer;
    transition-duration: 0.4s;
    min-width: 100px;
}
#btn-play:hover,
#btn-sound-yes:hover,
#btn-sound-no:hover {
    background-position: right center;
    text-decoration: none;
    cursor: pointer;
}

/* <-- BTN ANIMATIONS --> */
#btn-play:active,
#btn-sound-yes:active,
#btn-sound-no:active{
    animation: btn-submit 0.15s ease-in-out;
}
.btn-submit-active{
    animation: btn-submit 0.3s ease-in-out;
}
@keyframes btn-submit {
    from{
        transform: scale(1);
    }
    to{
        transform: scale(0.95);
    }
}
#btn-container,
#btn-yes-container,
#btn-no-container{
    display: inline-block;
    position: relative;
    margin-left: auto;
    margin-top: 10%;
}
#btn-yes-container,
#btn-no-container {
    /* display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: fit-content !important;
    height: fit-content !important; */
}
#btn-flex-container{
    margin-top: auto;
    display: flex;
}
button#btn-play:after,
button#btn-sound-yes:after,
button#btn-sound-no:after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.5s;
    box-shadow: 0 0 10px 20px #10a7a7;
    border-radius: 15px;
}
button#btn-play:active:after,
button#btn-sound-yes:active:after,
button#btn-sound-no:active:after {
    box-shadow: 0 0 0 0 #10a7a7;
    border-radius: 15px;
    position: absolute;
    left: 0;
    top:0;
    opacity: 1;
    transition: 0s;
}
button#btn-play:focus,
button#btn-sound-yes:focus,
button#btn-sound-no:focus{
    outline: 2px solid var(--focus-color);
}
/* <-- \BTN ANIMATIONS --> */







html, body {
    background-color: #0A001A;
    overflow: hidden;
    display: flex;
    width: 100dvw;
    height: 100dvh;
    width: 100vw;
    height: 100vh; 
    box-sizing: content-box;
    box-sizing: border-box;
}
#content{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: red;
}
#player-input-container{
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-items: center;
    justify-content: center;
}
#input-container{
    display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    background-color: yellowgreen;
    border: 2px solid red;
    padding: 5vh;
}
#player-container{
    display: flex;
    flex-direction: column;
}


/* PARALLAX TRANSITION */
.transition-para-1{
    animation: 2.7s background-transition linear forwards;
}
.transition-para-2{
    animation: 2.7s moon-transition linear forwards;
}
.transition-para-3{
    animation: 2.7s left-transition linear forwards;
}
.transition-para-4{
    animation: 2.7s right-transition linear forwards;
}
.transition-para-5{
    animation: 2.7s right-transition linear forwards;
}
.transition-para-6{
    animation: 2.7s left-transition linear forwards;
}
.transition-para-7{
    animation: 2.7s right-transition linear forwards;
}
.transition-para-8{
    animation: 2.7s left-transition linear forwards;
}
.transition-para-9{
    animation: 2.7s down-transition linear forwards;
}
.transition-para-10{
    animation: 2.7s ship-transition linear forwards;
}
.transition-form-container {
    animation: 2.7s form-container-transition linear forwards;
}
.sunrise-background-color{
    animation: root-background linear 2.7s forwards; 
}
@keyframes form-container-transition {
    to {
        transform: translateY(15vh);
        transform: translateY(-20vh);
        scale: 2.5;
        opacity: 0;
        display: none;
    }
}
@keyframes background-transition {
    to {
        transform: translateY(15vh);
        scale: 2.5;
        opacity: 0;
        display: none;
    }
}
@keyframes ship-transition {
    from{
        transform: translate(var(--ship-pos-x), var(--ship-pos-y));
    }
    to {
        opacity: 0;
        transform: translate(150%);
        display: none;
    }
}
@keyframes moon-transition {
    to {
        transform: translateY(15vh);
        transform: translateY(-20vh);
        scale: 2.5;
        opacity: 0;
        display: none;
    }
}
@keyframes right-transition {
    to {
        transform: translateX(-110vw);
        display: none;
    }
}
@keyframes left-transition {
    to {
        transform: translateX(110vw);
        display: none;
    }
}
@keyframes down-transition {
    to {
        transform: translateY(8vh);
        display: none;
    }
}
@keyframes root-background{
    from {
        background-color: #160038;
    }
    to {
        background-color: #5C0C43;
    }
}
@keyframes daylight-transition{
    from {
        background-color: #160038;
    }
    to {
        background-color: #5C0C43;
    }
}
/* \PARALLAX TRANSITION */


/* SHIP CABIN */
.cabin-fade-in-transition{
    animation: 2s cabin-fade-in ease-in forwards;
}
@keyframes cabin-fade-in {
    from{
        opacity: 0;
        scale: 1.35;
    } 
    to{
        opacity: 1;
        scale: 1.05;
    }
}
.bottle-rolling{
    animation: 2s bottle-roll ease-in infinite alternate;
}
.pirate-idle{
    animation: 6s pirate-idle ease-in infinite alternate;
}
@keyframes bottle-roll {
    from {
        transform: translate(0%, 0%);
    }
    to {
        transform: translate(2%, -1%);
    }
}
@keyframes pirate-idle {
    from {
        transform: translateX(0px);
    }
    50% {
        transform: translateX(-4px);
    }
    to {
        transform: translateX(0px);
    }
}
#dialogue-container.ship-cabin-dialogue-container{
    scale: 1;
    display: flex;
    width: 100%;
    position: absolute;
    top: 8vh;
    left: calc(50vw - 250px);
    flex-direction: column;
    align-self: center;
    justify-self: center;
    max-width: 500px;
    height: min-content;
}
.dialogue-blob{
    display: flex;
    flex-direction: column;
    min-width: 100%;
    background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
    padding: 16px;
    margin: 16px 0px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 6px solid #560F15;
    animation: show-dialogue-box 700ms;
} 

@keyframes show-dialogue-box {
    from {
        transform: rotate(-30deg) translateX(100%) scaleX(-0.1); 
        opacity: 0;
    }
    to {
        transform: rotate(0deg) translateX(0%) scaleX(1); 
        opacity: 1;
    }
}
.remove-dialogue-box{
    animation: remove-dialogue-box 700ms forwards;
}
@keyframes remove-dialogue-box {
    from {
        transform: rotate(0deg) translateX(0%) scaleX(1); 
        opacity: 1;
    }
    to {
        transform: rotate(-30deg) translateX(100%) scaleX(-0.1); 
        opacity: 0;
        display: none;
    }
}
.char-name-label{
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 8px;
}
.dialogue-box-text{
    margin-left: 16px;
    line-height: 1.5;
}
.dialogue-btns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cabin-btn{
    color: white;
    font-weight: bold;
    padding: 8px;
    border-radius: 15px;
    border: 2px solid #560F15;
    background-image: linear-gradient(to right, #560F15 0%, #7B3825  51%, #300509  100%);
    transition: transform 0.15s ease;
    cursor: pointer;
}
.cabin-btn:hover{
    transform: scale(1.05);
}
.cabin-btn:active{
    transform: scale(1);
}
.fade-out{
    animation: fade-out 1s;
}
img#vector-11{
    
}
.fade-out-remove{
    animation: fade-out-remove 1s forwards !important;
}
@keyframes fade-out-remove {
    to{
        opacity: 0;
    }
}
@keyframes fade-out {
    from {
        opacity: 1;
    }
    to{
        opacity: 0;
        display: none;
    }
}
/* \SHIP CABIN */


/* PLAYER / AI BOARD AND SHIP PLACEMENT */
#player-board,
#ai-board{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    background-image: url('../img/map-background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.default-field{
    width: 50px;
    height: 50px;
    border: 2px solid #560F15;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#ai-board > .default-field{
    cursor:crosshair;
}
#ai-board > .default-field:not([class*=" "]):hover{
    background-image: url('../img/crosshair.png');
}
.cabin-map-display{
    animation: show-dialogue-box 700ms;
}
.cabin-map-remove{
    animation: remove-dialogue-box 700ms forwards;
}
#place-ship-container{
    display: flex;
    padding-right: 180px;
    width: 100%;
    min-height: 100px;
    max-height: fit-content;
    flex-wrap: wrap;
    background-image: linear-gradient(to right, #560F15 0%, #7B3825  51%, #300509  100%);
    border: 2px solid #560F15;
    box-sizing: border-box;
    gap: 1rem;
    position: relative;
}
#btn-toggle-axis{
    position: absolute;
    left: 380px;
    top: 20px;
    padding: 1rem;
    border: 2px solid #560F15;
    background-image: linear-gradient(to right, #7B3825 0%, #560F15  51%, #300509  100%);
}
.place-ship{
    display: flex;
    width: min-content;
    height: min-content;
}
.place-ship-y{
    flex-direction: column;
    margin-bottom: auto;
}
.place-ship-data-field{
    width: 50px;
    height: 50px;
    border: 4px solid #290407;
    background-color: #8F4931;
    background-image: url('../img/field-ships/ship-03.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    cursor: grab;
}
.place-ship-data-field:active{
    cursor: grabbing;
}
.field-hit{
    z-index: 3;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/x-mark-w.png');
    animation: field-hit-animation 0.3s linear forwards;
    background-color: #3E1C30;
}
@keyframes field-hit-animation {
    from {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}
.field-miss{
    background-color: #3E1C30;
}
.field-with-mine{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/bomb-icon.png');
}
#player-board > .field-with-mine:hover {
    transform: scale(1.1);
}
.field-with-land{
    background: #0BDA51;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
#player-board > .field-with-land:hover {
    transform: scale(1.1);
}
.tree-1{
    background-image: url('../img/island-tree-1.png');
}
.tree-2{
    background-image: url('../img/island-tree-2.png');
}
.tree-3{
    background-image: url('../img/island-tree-3.png');
}
.tree-4{
    background-image: url('../img/island-tree-4.png');
}
.field-with-ship{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.carrier{
    background-image: url('../img/field-ships/ship-05.png');
}
.battleship{
    background-image: url('../img/field-ships/ship-06.png');
}
.cruiser{
    background-image: url('../img/field-ships/ship-04.png');
}
.submarine{
    background-image: url('../img/field-ships/ship-03.png');
}
.destroyer{
    background-image: url('../img/field-ships/ship-02.png');
}
#help-box-container{
    position: absolute;
    z-index: 5;
    font-weight: bold;
    width: 250px;
    font-size: 16px;
    padding: 16px;
    border: 2px solid #560F15;
    --posX: 0px;
    --posY: 0px;
    transform: translate(calc(var(--posX) + 15px), calc(var(--posY) - 130px));
    background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
    border-radius: 10px;
}
.display-help-box-animation{
    animation: display-help-box-animation 0.25s linear forwards;
}
@keyframes display-help-box-animation {
    from {
        transform: translate(calc(var(--posX) + 15px), calc(var(--posY) - 130px)) scale(0.2);
    }
    80%{
        transform: translate(calc(var(--posX) + 15px), calc(var(--posY) - 130px)) scale(1.1);
    }
    to {
        transform: translate(calc(var(--posX) + 15px), calc(var(--posY) - 130px)) scale(1);
    }
}
#plan-fleet-help-container{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    /* height: 100%; */
    box-sizing: border-box;
    align-self: center;
    align-content: center;
    padding: 0px 1rem;
    /* z-index: -1; */
}
.plan-fleet-help-container{
    pointer-events: none;
}
.plan-fleet-blob{
    pointer-events: none;
    margin-bottom: 0px;
    animation: move-help-blob 1s ease-in forwards;
}
@keyframes move-help-blob {
    from {
        margin-left: 0px;
    }
    to{
        margin-left: 520px;
    }
}
/* \PLAYER BOARD AND SHIP PLACEMENT */


/* TO SHIP TRANSITION */
#to-ship-transition-screen{
    display: flex;
    background-color: black;
    opacity: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    z-index: 1;
    position: absolute;
}
.fade-to-black{
    animation: fade-in 2.5s ease forwards;
}
.fade-out-2s{
    animation: fade-out 2s linear forwards;
}
#following-day-text{
    color: white;
    font-size: 56px;
    font-weight: bold;
    text-align: center;
}
.zoom-fade-in-out{
    animation: zoom-and-fade-out 3.5s linear forwards;
}
@keyframes fade-in {
    from {
        opacity: 0;
        display: none;
    }
    to {
        opacity: 1;
        display: flex;
    }
}
@keyframes zoom-and-fade-out {
    from{
        transform: scale(100%);
        opacity: 0;
        letter-spacing: normal;
    }
    50%{
        transform: scale(110%);
        opacity: 1;
    }
    to {
        transform: scale(120%);
        opacity: 0;
        letter-spacing: 1.5rem;
    }
    
}
.paused {
    animation-play-state: paused !important;
}
.move-deck{
    animation: move-deck 8s alternate ease-in-out infinite;
}
@keyframes move-deck {
    from{
        transform: translateY(0vh);
    }
    to{
        transform: translateY(5vh);
    }
}
.move-cloud-1{
    animation: move-cloud 200s linear infinite;
}
.move-cloud-2{
    animation: move-cloud 130s linear infinite;
}
.move-cloud-cluster{
    animation: move-cloud 70s linear infinite;
}
@keyframes move-cloud {
    from {
        transform: translate(0vw, 0vw);
    }
    40% {
        transform: translate(100vw, 0vw);
    }
    41% {
        transform: translate(100vw, -100vw);
    }
    42% {
        transform: translate(-200vw, -100vw);
    }
    43% {
        transform: translate(-100vw, 0vw);
    }
    to {
        transform: translate(0vw, 0vw);
    }
}
#vector-2{
    animation: ship-travel-right-to-left 45s linear infinite;
}
#vector-3{
    animation: ship-travel-right-to-left 95s linear infinite;
}
#vector-4{
    animation: ship-travel-left-to-right 125s linear infinite;
}

@keyframes ship-travel-right-to-left {
    from {
        transform: translate(100vw, 0vw);
    }
    97% {
        transform: translate(-100vw, 0vw);
    }
    98% {
        transform: translate(-100vw, -100vw);
    }
    99% {
        transform: translate(100vw, -100vw);
    }
    to {
        transform: translate(100vw, 0vw);
    }
}

@keyframes ship-travel-left-to-right {
    from {
        transform: translate(-100vw, 0vw);
    }
    97% {
        transform: translate(100vw, 0vw);
    }
    98% {
        transform: translate(100vw, -100vw);
    }
    99% {
        transform: translate(-100vw, -100vw);
    }
    to {
        transform: translate(-100vw, 0vw);
    }
}

#game-content{
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    width: 100%;
    height: 100%;
}
.gameboard-label{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    width: 100%;
    padding: 16px;
    font-size: 22px;
    font-weight: bold;
    background-image: linear-gradient(to right, #560F15 0%, #7B3825  51%, #300509  100%);
    border: 2px solid #560F15;
    box-sizing: border-box;
}
.board-disabled{
    pointer-events: none;
}
#ship-lost-container{
    position: absolute;
    z-index: 4;
    font-weight: bold;
    font-size: 16px;
    padding: 16px;
    border: 2px solid #560F15;
    --posX: 0px;
    --posY: 0px;
    transform: translate(var(--posX), var(--posY));
    background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
    border-radius: 10px;
}
.ship-destroyed-float{
    animation: ship-destroyed-float 3s linear forwards;
}
@keyframes ship-destroyed-float {
    from {
        transform: translate(calc(var(--posX)), calc(var(--posY) + 10px)) scale(0.2);
    }
    20%{
        transform: translate(var(--posX), var(--posY)) scale(1);
    }
    80%{
        transform: translate(calc(var(--posX)), calc(var(--posY) - 20px));
        opacity: 1;
    }
    to {
        transform: translate(calc(var(--posX)), calc(var(--posY) - 25px));
        opacity: 0;
    }
}
.game-content-fade{
    animation: game-fade-out 1s linear forwards;
}

@keyframes game-fade-out {
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }
}
#after-game-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 500px;
    box-sizing: border-box;
    background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
    border-radius: 10px;
    border: 4px solid #560F15;
    padding: 2rem;
}
#hero-announcement-message{
    color: #560F15;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}
#after-game-btns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: auto;
    margin-top: 2rem;
    gap: 2rem;
}
#btn-play-again,
#btn-settings{
    padding: 16px;
}
#settings-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    width: 100%;
    background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
    border-radius: 10px;
    border: 2px solid #560F15;
    padding: 2rem;
    margin-top: 3rem;
}
#btn-islands,
#btn-seaMine{
    min-width: 100px;
}
.sub-settings-container{
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.5rem;
}
.settings-text{
    font-size: 16px;
    font-weight: bold;
    margin-bottom: auto;
}
#sea-mine-num-input{
    padding: 8px;
    max-width: 100px;
    border: 2px solid #560F15;
    border-radius: 10px;
    text-align: center;
    background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
    box-sizing: border-box;
}



@media screen and (max-width: 600px) and (orientation: portrait) {
    body,html{
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        max-height: 100vh;
        max-width: 100vw;
        overflow: hidden;
    }
    #dialogue-container.ship-cabin-dialogue-container{
        display: flex;
        flex-direction: column;
        --width: 100%;
        width: 100%;
        height: min-content;
        top: 8vh;
        left: calc(50vw - calc(var(--width) / 2));
    }
    #volume-container{
        top: 10px;
        right: 10px;
    }
    .dialogue-blob{
        display: flex;
        align-self: center;
        justify-self: center;
        font-size: 16px;
        flex-direction: column;
        min-width: 100%;
        background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
        padding: 8px;
        margin: 8px 0px;
        box-sizing: border-box;
        border-radius: 20px;
        border: 6px solid #560F15;
        animation: show-dialogue-box 700ms;
    } 
    .dialogue-box-text{
        font-size: 14px;
    }
    .char-name-label{
        font-size: 14px;
    }
    #player-board{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        max-width: 100vw;
    }
    .default-field{
        display: flex;
        min-width: 100%;
        min-height: 100%;
        --parent-width: 300px;
        --width-height: calc(100vw / 10);
        height: var(--width-height);
        width: var(--width-height);
    }
    .place-ship-data-field{
        --parent-width: 300px;
        --width-height: calc(var(--parent-width) / 10);
        height: var(--width-height);
        width: var(--width-height);
    }
    #place-ship-container {
        padding-right: 30vw;
    }
    #btn-toggle-axis{
        top: 10px;
        left: 70vw;
    }
    .plan-fleet-blob{
        pointer-events: none;
        margin-bottom: 0px;
        animation: move-help-blob 1s ease-in forwards;
    }
    @keyframes move-help-blob {
        from {
            margin-left: 0px;
        }
        to{
            margin-left: 200vw;
        }
    }
    #game-content{
        display: grid;
        grid-template-columns: 1fr;
        position: absolute;
        align-items: center;
        justify-content: center;
        gap: 0rem;
        width: 100%;
        height: 100%;
        overflow-y: auto;
    }
    #player-container{
        display: none;
    }
    #settings-container{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        justify-content: center;
        width: 100%;
        background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
        padding: 0px;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-radius: 10px;
        border: 2px solid #560F15;
        margin-top: 1.5rem;
    }
    #vector-2 {
        display: none;
    }
    #following-day-text{
        color: white;
        font-size: 36px;
        font-weight: bold;
        text-align: center;
    }
}

@media screen and (max-width: 1300px) and (orientation: landscape) {
    body,html{
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        max-height: 100vh;
        max-width: 100vw;
        overflow: hidden;
    }
    #dialogue-container.ship-cabin-dialogue-container{
        display: flex;
        flex-direction: column;
        max-width: 400px;
        height: min-content;
        top: 8vh;
        left: calc(50vw - calc(var(--width) / 2));
    }
    #volume-container{
        top: 10px;
        right: 10px;
    }
    .dialogue-blob{
        display: flex;
        align-self: center;
        justify-self: center;
        font-size: 16px;
        flex-direction: column;
        min-width: 100%;
        background-image: linear-gradient(to right, #FFFFFF 0%, #FAF0E6  51%, #F5F5F5  100%);
        padding: 8px;
        margin: 8px 0px;
        box-sizing: border-box;
        border-radius: 20px;
        border: 6px solid #560F15;
        animation: show-dialogue-box 700ms;
    } 
    .dialogue-box-text{
        font-size: 14px;
    }
    .dialogue-blob{
        margin-top: 8px;
        margin-bottom: 8px;
        box-sizing: border-box;
    }
    .char-name-label{
        font-size: 14px;
    }
    #player-board{
        display: grid;
        grid-template-columns: repeat(10, 1fr);
        max-width: 400px;
    }
    .default-field{
        display: flex;
        height: 40px;
        width: 40px;
    }
    .place-ship-data-field{

    }
    #place-ship-container {
        padding-right: 80px;
        position: relative;
    }
    #btn-toggle-axis{
        position: absolute;
        width: 90px;
        top: 10px;
        left: 300px;
    }
    .place-ship-data-field{
        width: 40px;
        height: 40px;
    }
    #plan-fleet-help-container{
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 0;
        left: 400px;
        width: 100%;
        height: 500px;
        box-sizing: border-box;
        align-self: center;
        align-content: center;
        padding: 0px 1rem;
    }
}