@keyframes shake{0%,100%,50%{transform:rotate(0deg)}25%{transform:rotate(10deg)}75%{transform:rotate(-10deg)}}@keyframes fireAnimation{0%,100%{filter:brightness(1);transform:scale(0.8)}50%{filter:brightness(1.3);transform:scale(1)}}@-webkit-keyframes flip-scale-down-diag-2{0%{-webkit-transform:scale(1) rotate3d(-1, 1, 0, 0deg);transform:scale(1) rotate3d(-1, 1, 0, 0deg)}50%{-webkit-transform:scale(0.4) rotate3d(-1, 1, 0, -90deg);transform:scale(0.4) rotate3d(-1, 1, 0, -90deg)}100%{-webkit-transform:scale(1) rotate3d(-1, 1, 0, -180deg);transform:scale(1) rotate3d(-1, 1, 0, -180deg)}}@keyframes flip-scale-down-diag-2{0%{-webkit-transform:scale(1) rotate3d(-1, 1, 0, 0deg);transform:scale(1) rotate3d(-1, 1, 0, 0deg)}50%{-webkit-transform:scale(0.4) rotate3d(-1, 1, 0, -90deg);transform:scale(0.4) rotate3d(-1, 1, 0, -90deg)}100%{-webkit-transform:scale(1) rotate3d(-1, 1, 0, -180deg);transform:scale(1) rotate3d(-1, 1, 0, -180deg)}}.ship-layer{width:100%;height:100%;display:grid;grid-template-columns:repeat(var(--grid-size, 10), 1fr);grid-template-rows:repeat(var(--grid-size, 10), 1fr)}.ship-layer.setup{position:absolute;z-index:10;top:50%;left:50%;transform:translate(-50%, -50%)}.ship-layer.game{position:static;pointer-events:none}.ship-layer.game .ship{opacity:.8 !important}.ship.ship-area-1{background-size:cover;background-repeat:no-repeat;background-position:center center}.ship.ship-area-1[data-direction=vertical]{background-image:url("./assets/ships/vertical/ship-1.png")}.ship.ship-area-1[data-direction=horizontal]{background-image:url("./assets/ships/horizontal/ship-1.png")}.ship.ship-area-2{background-size:cover;background-repeat:no-repeat;background-position:center center}.ship.ship-area-2[data-direction=vertical]{background-image:url("./assets/ships/vertical/ship-2.png")}.ship.ship-area-2[data-direction=horizontal]{background-image:url("./assets/ships/horizontal/ship-2.png")}.ship.ship-area-3{background-size:cover;background-repeat:no-repeat;background-position:center center}.ship.ship-area-3[data-direction=vertical]{background-image:url("./assets/ships/vertical/ship-3.png")}.ship.ship-area-3[data-direction=horizontal]{background-image:url("./assets/ships/horizontal/ship-3.png")}.ship.ship-area-4{background-size:cover;background-repeat:no-repeat;background-position:center center}.ship.ship-area-4[data-direction=vertical]{background-image:url("./assets/ships/vertical/ship-4.png")}.ship.ship-area-4[data-direction=horizontal]{background-image:url("./assets/ships/horizontal/ship-4.png")}.ship.ship-area-5{background-size:cover;background-repeat:no-repeat;background-position:center center}.ship.ship-area-5[data-direction=vertical]{background-image:url("./assets/ships/vertical/ship-5.png")}.ship.ship-area-5[data-direction=horizontal]{background-image:url("./assets/ships/horizontal/ship-5.png")}.ship[data-overlapping=true]{border:3px solid rgba(255,60,60,.98);opacity:.3}.boards-container{display:flex;justify-content:center;align-items:center;gap:2em}.game-board{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1em;width:100%;height:100%}.board-container{width:min(90vw,50vh);height:min(90vw,50vh);aspect-ratio:1/1;display:flex;justify-content:center;align-items:center;flex-direction:column;background:rgba(0,196,255,.1);padding:1em;border-radius:10%}.board-grid{width:100%;height:100%;position:relative;border:5px solid #1e90ff;border-radius:15px;box-shadow:0 0 10px rgba(30,144,255,.7);background:linear-gradient(135deg, rgba(20, 225, 225, 0.99), rgba(0, 191, 255, 0.98))}.flip-board{-webkit-animation:flip-scale-down-diag-2 .5s linear both;animation:flip-scale-down-diag-2 .5s linear both}.cells-layer{width:100%;height:100%;display:grid;grid-template-columns:repeat(10, 1fr);grid-template-rows:repeat(10, 1fr);box-sizing:border-box}.cells-layer.setup{position:static}.cells-layer.game{position:absolute;z-index:10;top:0;left:0}.board-cell{position:relative;box-sizing:border-box;display:flex;justify-content:center;align-items:center;font-size:1.5em;border-radius:5px;border:1px solid hsla(0,0%,100%,.27);background:rgba(0,0,0,.05);box-shadow:inset 0 0 5px rgba(0,0,0,.1);transition:background .3s ease}.board-cell .icon{position:absolute;top:15%;left:15%;max-width:100%;max-height:100%;width:80%;height:80%}.board-cell.hit .icon{position:absolute;background-image:url("./assets/explosion.gif");background-size:cover}.board-cell.miss{background:hsla(0,0%,100%,.28)}.board-cell.miss .icon{position:absolute;background-image:url("./assets/splash.gif");background-repeat:no-repeat;background-size:130% 100%;left:-10%;top:10%}.board-cell[data-value=not-revealed]{cursor:pointer}.board-cell[data-value=empty]{background-image:url("./assets/letter-x.png");background-size:cover;cursor:not-allowed;box-shadow:inset 0 0 10px rgba(0,14,253,.5)}.board-cell[data-value=hit-ship]{box-shadow:inset 0 0 10px rgba(255,99,71,.8),inset 0 0 8px rgba(255,69,0,.5)}.board-cell[data-value=hit-ship] .icon{background:url("./assets/fire-flame.gif");background-size:cover;animation:fireAnimation 1.5s infinite alternate}.board-cell[data-value=sunk-ship]{box-shadow:inset 0 0 10px rgba(18,17,17,.59)}.board-cell[data-value=sunk-ship] .icon{background:url("./assets/death.png") no-repeat center center;animation:infinite shake 1s alternate;background-size:cover}.board-row{display:contents}@media screen and (max-width: 600px){.result-screen .boards-container{flex-direction:column}.result-screen .boards-container .board-container{width:min(60vw,40vh);height:min(60vw,40vh)}}.btn-container{display:flex;justify-content:center;align-items:center;flex-direction:row;gap:1em}.btn{display:flex;justify-content:center;align-items:center;text-align:center;cursor:pointer;border:#ff4500 10px solid;background:#f66125;color:#fff;border-radius:20%;padding:10px;font-size:clamp(1em,1vw,2em);height:fit-content;width:5em;white-space:nowrap}.btn.exit{background:#f66125}.btn:hover{transform:scale(1.1)}.btn.menu{padding:5px 20px;background-image:url("./assets/menu2.jpg");background-size:100% 100%;background-repeat:no-repeat;background-position:center 20%;height:5em;width:5em;font-size:2.5em;align-items:end}#exit-btn{position:absolute;font-size:3em;width:fit-content;height:fit-content;top:1%;left:1%;padding:0;color:#ff4500;background:rgba(0,0,0,0);border:rgba(0,0,0,0)}.game-board{display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%}.game-board.waiting{filter:blur(5px)}.game-message{display:flex;position:absolute;height:100%;width:100%;justify-content:center;align-items:center;text-align:center;font-size:clamp(2rem,4vw,4rem) !important}.game-message.hide{display:none}body{margin:0;padding:0;height:100vh;width:100vw}#app{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;gap:.5em}.background{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url("./assets/background3.jpg");background-size:100% 100%;background-position:center;background-repeat:no-repeat;opacity:.7;z-index:-1}h1,.message{font-family:"Impact",sans-serif;white-space:nowrap;color:#ff4500;text-shadow:2px 2px 4px rgba(0,0,0,.8);-webkit-text-stroke:2px rgba(30,30,30,.78);margin:.2em 0}h1{font-size:clamp(2rem,5vw,4rem)}.message{font-size:clamp(1.5rem,3vw,3rem)}input{width:80%;max-width:400px;padding:10px 15px;font-size:1.2em;border:2px solid #1e90ff;border-radius:10px;outline:none;box-shadow:0 4px 8px rgba(0,0,0,.2);transition:all .3s ease}/*# sourceMappingURL=styles.css.map */