/* =========================================================
   🌊 MOVING SEA
========================================================= */

   .sea {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 25%;
       height: 25%;
       z-index: 2;
       overflow: hidden;

       background:
           linear-gradient(180deg,
               rgba(21, 73, 94, .25),
               rgba(8, 47, 67, .65));

       pointer-events: none;
   }


   /* =========================================================
   🌊 WAVES
========================================================= */

   .wave {
       position: absolute;
       left: -10%;
       width: 120%;
       height: 22px;

       border-radius: 50%;

       border-top: 2px solid rgba(255, 255, 255, .22);
       opacity: .7;

       animation:
           waveMove 8s ease-in-out infinite;
   }

   .wave-1 {
       top: 18%;
       animation-duration: 7s;
   }

   .wave-2 {
       top: 35%;
       animation-duration: 9s;
       animation-delay: -2s;
       opacity: .45;
   }

   .wave-3 {
       top: 52%;
       animation-duration: 11s;
       animation-delay: -4s;
       opacity: .35;
   }

   .wave-4 {
       top: 68%;
       animation-duration: 8s;
       animation-delay: -1s;
       opacity: .3;
   }

   .wave-5 {
       top: 84%;
       animation-duration: 12s;
       animation-delay: -5s;
       opacity: .25;
   }


   @keyframes waveMove {

       0%,
       100% {
           transform: translateX(-35px) scaleY(1);
       }

       50% {
           transform: translateX(35px) scaleY(.7);
       }
   }


   /* =========================================================
   🌙 MOON REFLECTION
========================================================= */

   .moon-reflection {
       position: absolute;

       right: 13.5%;
       bottom: 25%;

       width: 65px;
       height: 150px;

       z-index: 3;

       opacity: .3;

       background:
           repeating-linear-gradient(180deg,
               rgba(246, 236, 201, .55) 0px,
               rgba(246, 236, 201, .55) 5px,
               transparent 5px,
               transparent 13px);

       filter: blur(3px);

       transform: perspective(100px) rotateX(25deg);

       animation: moonReflection 5s ease-in-out infinite;
   }


   @keyframes moonReflection {

       0%,
       100% {
           opacity: .18;
           transform:
               perspective(100px) rotateX(25deg) scaleX(.75);
       }

       50% {
           opacity: .38;
           transform:
               perspective(100px) rotateX(25deg) scaleX(1.15);
       }
   }


   /* =========================================================
   🚤 BOATS
========================================================= */

   .boat {
       position: absolute;

       z-index: 4;

       width: 115px;
       height: 70px;

       bottom: 29%;

       pointer-events: none;

       animation:
           boatFloat 5s ease-in-out infinite,
           boatMove 45s linear infinite;
   }


   /* boat body */

   .boat-body {
       position: absolute;

       left: 8px;
       bottom: 0;

       width: 95px;
       height: 27px;

       background:
           linear-gradient(180deg,
               #5a3924,
               #24160f);

       clip-path: polygon(0 0,
               100% 0,
               82% 100%,
               18% 100%);

       border-radius: 0 0 25px 25px;

       box-shadow:
           0 5px 12px rgba(0, 0, 0, .35);
   }


   /* person sitting inside boat */

   .boat-person {
       position: absolute;

       left: 50px;
       bottom: 23px;

       width: 13px;
       height: 13px;

       border-radius: 50%;

       background: #171a19;

       z-index: 3;
   }


   .boat-person::after {
       content: "";

       position: absolute;

       left: -5px;
       top: 11px;

       width: 23px;
       height: 25px;

       border-radius: 10px 10px 4px 4px;

       background: #20211e;
   }


   /* person's fishing rod */

   .boat-rope {
       position: absolute;

       left: 62px;
       bottom: 37px;

       width: 2px;
       height: 42px;

       background: #191715;

       transform: rotate(25deg);

       transform-origin: bottom;
   }


   /* boat lantern */

   .boat-light {
       position: absolute;

       right: 18px;
       bottom: 18px;

       width: 7px;
       height: 7px;

       border-radius: 50%;

       background: #f5d58a;

       box-shadow:
           0 0 8px 3px rgba(245, 213, 138, .45);

       animation: boatLight 2s ease-in-out infinite;
   }


   @keyframes boatLight {

       0%,
       100% {
           opacity: .5;
       }

       50% {
           opacity: 1;
       }
   }


   /* =========================================================
   ⛵ BOAT SAIL
========================================================= */

   .boat-sail {
       position: absolute;

       left: 49px;
       bottom: 28px;

       width: 42px;
       height: 48px;

       background:
           linear-gradient(135deg,
               rgba(232, 210, 166, .9),
               rgba(169, 137, 94, .8));

       clip-path: polygon(0 100%,
               100% 100%,
               0 0);

       transform-origin: bottom;

       animation: sailMove 4s ease-in-out infinite;
   }


   @keyframes sailMove {

       0%,
       100% {
           transform: rotate(-2deg);
       }

       50% {
           transform: rotate(3deg);
       }
   }


   /* =========================================================
   🚤 BOAT POSITIONS
========================================================= */

   .boat-1 {
       left: -150px;
       animation-delay: -8s;
   }

   .boat-2 {
       left: -250px;

       bottom: 31%;

       transform: scale(.8);

       animation-duration: 58s;
       animation-delay: -30s;
   }

   .boat-3 {
       left: -180px;

       bottom: 27%;

       transform: scale(.58);

       animation-duration: 68s;
       animation-delay: -45s;
   }


   @keyframes boatMove {

       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(125vw);
       }
   }


   @keyframes boatFloat {

       0%,
       100% {
           margin-top: 0;
       }

       50% {
           margin-top: -6px;
       }
   }


   /* =========================================================
   🐦 DISTANT BIRDS
========================================================= */

   .birds {
       position: absolute;

       z-index: 2;

       color: rgba(20, 28, 31, .55);

       font-size: 19px;

       letter-spacing: 4px;

       transform: rotate(-5deg);

       animation: birdsMove 24s linear infinite;
   }


   .birds-1 {
       top: 19%;
       left: -80px;
   }


   .birds-2 {
       top: 30%;
       left: -150px;

       font-size: 13px;

       animation-duration: 32s;
       animation-delay: -12s;
   }


   @keyframes birdsMove {

       0% {
           transform:
               translateX(0) translateY(0) rotate(-5deg);
       }

       50% {
           transform:
               translateX(55vw) translateY(-12px) rotate(2deg);
       }

       100% {
           transform:
               translateX(120vw) translateY(0) rotate(-5deg);
       }
   }


   /* =========================================================
   🌊 SMALL FOAM
========================================================= */

   .sea::after {
       content: "";

       position: absolute;

       left: -5%;
       right: -5%;

       top: 12%;

       height: 5px;

       background:
           repeating-linear-gradient(90deg,
               transparent 0 30px,
               rgba(255, 255, 255, .18) 30px 75px,
               transparent 75px 120px);

       filter: blur(.5px);

       animation: foamMove 10s linear infinite;
   }


   @keyframes foamMove {

       from {
           transform: translateX(-50px);
       }

       to {
           transform: translateX(80px);
       }
   }


   /* =========================================================
   📱 MOBILE
========================================================= */

   @media (max-width: 640px) {

       .sea {
           bottom: 27%;
           height: 25%;
       }

       .moon-reflection {
           right: 12%;
           bottom: 27%;

           width: 45px;
           height: 100px;
       }

       .boat {
           bottom: 31%;

           transform: scale(.65);
       }

       .boat-1 {
           animation-duration: 38s;
       }

       .boat-2 {
           bottom: 33%;
           transform: scale(.5);
           animation-duration: 45s;
       }

       .boat-3 {
           display: none;
       }

       .birds {
           font-size: 14px;
       }
   }

   .login-logo {
       width: 110px;
       height: 110px;
       object-fit: cover;
       display: block;
       border: 3px solid #6b7280;
       border-radius: 16px;
       padding: 5px;
       background-color: #ffffff;
       box-sizing: border-box;
       position: relative;
       z-index: 5;
   }

   /* =========================================================
           NIGHT BEACH BACKGROUND
        ========================================================= */

   .game-bg {
       position: relative;
       min-height: 100vh;
       overflow: hidden;

       background: linear-gradient(180deg,
               #04070f 0%,
               #0a1730 16%,
               #123056 34%,
               #1f4d6b 48%,
               #315f70 61%,
               #5d776f 70%,
               #a97b52 82%,
               #e3ac6d 94%,
               #f2c584 100%);

       background-size: 100% 180%;
       animation: skyBreath 26s ease-in-out infinite alternate;
   }

   @keyframes skyBreath {
       0% {
           background-position: 0% 0%;
       }

       100% {
           background-position: 0% 18%;
       }
   }

   /* =========================================================
           STARS
        ========================================================= */

   .stars-layer {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 62%;
       z-index: 1;
       pointer-events: none;

       background-repeat: no-repeat;

       background-image:
           radial-gradient(1.4px 1.4px at 6% 10%, rgba(255, 255, 255, .9) 0, transparent 60%),
           radial-gradient(1px 1px at 14% 22%, rgba(255, 255, 255, .7) 0, transparent 60%),
           radial-gradient(1.6px 1.6px at 24% 6%, rgba(255, 255, 255, .85) 0, transparent 60%),
           radial-gradient(1px 1px at 33% 28%, rgba(255, 255, 255, .55) 0, transparent 60%),
           radial-gradient(2px 2px at 42% 14%, rgba(255, 255, 255, .9) 0, transparent 60%),
           radial-gradient(1px 1px at 52% 24%, rgba(255, 255, 255, .6) 0, transparent 60%),
           radial-gradient(1.5px 1.5px at 60% 8%, rgba(255, 255, 255, .85) 0, transparent 60%),
           radial-gradient(1px 1px at 69% 26%, rgba(255, 255, 255, .6) 0, transparent 60%),
           radial-gradient(2px 2px at 78% 12%, rgba(255, 255, 255, .9) 0, transparent 60%),
           radial-gradient(1px 1px at 86% 22%, rgba(255, 255, 255, .65) 0, transparent 60%),
           radial-gradient(1.5px 1.5px at 92% 5%, rgba(255, 255, 255, .8) 0, transparent 60%),
           radial-gradient(1px 1px at 4% 34%, rgba(255, 255, 255, .5) 0, transparent 60%),
           radial-gradient(1px 1px at 18% 40%, rgba(255, 255, 255, .5) 0, transparent 60%),
           radial-gradient(1.5px 1.5px at 29% 45%, rgba(255, 255, 255, .65) 0, transparent 60%),
           radial-gradient(1px 1px at 48% 38%, rgba(255, 255, 255, .5) 0, transparent 60%),
           radial-gradient(1px 1px at 64% 42%, rgba(255, 255, 255, .55) 0, transparent 60%),
           radial-gradient(1.5px 1.5px at 74% 44%, rgba(255, 255, 255, .65) 0, transparent 60%),
           radial-gradient(1px 1px at 96% 38%, rgba(255, 255, 255, .5) 0, transparent 60%);

       animation: twinkle 4.5s ease-in-out infinite;
   }

   @keyframes twinkle {

       0%,
       100% {
           opacity: .45;
       }

       50% {
           opacity: 1;
       }
   }

   /* =========================================================
           MOON
        ========================================================= */

   .moon {
       position: absolute;
       top: 8%;
       right: 12%;
       width: 46px;
       height: 46px;
       border-radius: 50%;
       background: #f6ecc9;
       box-shadow:
           -13px 3px 0 0 #0a1730,
           0 0 25px 4px rgba(246, 236, 201, .35);
       z-index: 1;
   }

   /* =========================================================
           CLOUDS
        ========================================================= */

   .cloud {
       position: absolute;
       background: rgba(255, 255, 255, .16);
       border-radius: 50px;
       z-index: 1;
       pointer-events: none;
   }

   .cloud::before,
   .cloud::after {
       content: "";
       position: absolute;
       background: inherit;
       border-radius: 50%;
   }

   .cloud-1 {
       top: 14%;
       left: -25%;
       width: 150px;
       height: 34px;
       animation: driftRight 70s linear infinite;
   }

   .cloud-1::before {
       width: 60px;
       height: 60px;
       top: -26px;
       left: 18px;
   }

   .cloud-1::after {
       width: 80px;
       height: 80px;
       top: -34px;
       left: 66px;
   }

   .cloud-2 {
       top: 26%;
       left: -30%;
       width: 110px;
       height: 26px;
       opacity: .7;
       animation: driftRight 95s linear infinite;
       animation-delay: -30s;
   }

   .cloud-2::before {
       width: 46px;
       height: 46px;
       top: -18px;
       left: 12px;
   }

   .cloud-2::after {
       width: 60px;
       height: 60px;
       top: -24px;
       left: 50px;
   }

   .cloud-3 {
       top: 8%;
       left: -20%;
       width: 90px;
       height: 20px;
       opacity: .5;
       animation: driftRight 55s linear infinite;
       animation-delay: -10s;
   }

   .cloud-3::before {
       width: 36px;
       height: 36px;
       top: -14px;
       left: 8px;
   }

   .cloud-3::after {
       width: 48px;
       height: 48px;
       top: -18px;
       left: 36px;
   }

   @keyframes driftRight {
       0% {
           transform: translateX(0);
       }

       100% {
           transform: translateX(160vw);
       }
   }

   /* =========================================================
           SEA / HORIZON
        ========================================================= */

   .horizon-glow {
       position: absolute;
       bottom: 25%;
       left: 0;
       right: 0;
       height: 14%;

       background:
           linear-gradient(180deg,
               rgba(255, 205, 140, .25),
               transparent);

       z-index: 1;
       pointer-events: none;
   }

   .sea-line {
       position: absolute;
       bottom: 25%;
       left: -5%;
       width: 110%;
       height: 18px;
       z-index: 2;
       opacity: .35;

       background:
           radial-gradient(60px 7px at 10% 50%,
               rgba(255, 255, 255, .35),
               transparent 70%),
           radial-gradient(80px 7px at 30% 50%,
               rgba(255, 255, 255, .25),
               transparent 70%),
           radial-gradient(70px 7px at 55% 50%,
               rgba(255, 255, 255, .3),
               transparent 70%),
           radial-gradient(90px 7px at 80% 50%,
               rgba(255, 255, 255, .25),
               transparent 70%);

       animation: seaMove 12s linear infinite;
   }

   @keyframes seaMove {
       0% {
           transform: translateX(0);
       }

       50% {
           transform: translateX(25px);
       }

       100% {
           transform: translateX(0);
       }
   }

   /* =========================================================
           BEACH GROUND
        ========================================================= */

   .ground {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       height: 25%;
       z-index: 2;

       background:
           radial-gradient(ellipse at 15% 15%,
               rgba(255, 224, 164, .25),
               transparent 35%),
           radial-gradient(ellipse at 75% 25%,
               rgba(255, 224, 164, .16),
               transparent 35%),
           linear-gradient(180deg,
               #dba766 0%,
               #b9834a 55%,
               #8a5c31 100%);
   }

   .ground::before {
       content: "";
       position: absolute;
       top: -18px;
       left: 0;
       right: 0;
       height: 30px;

       background:
           radial-gradient(50% 100% at 15% 100%,
               #dba766 40%,
               transparent 60%),
           radial-gradient(50% 100% at 48% 100%,
               #cf9a5c 40%,
               transparent 60%),
           radial-gradient(50% 100% at 80% 100%,
               #dba766 40%,
               transparent 60%);
   }

   /* =========================================================
           SAND DETAILS
        ========================================================= */

   .sand-dots {
       position: absolute;
       inset: 0;
       z-index: 2;
       pointer-events: none;
       opacity: .28;

       background-image:
           radial-gradient(2px 2px at 12% 30%, #65431f 0, transparent 70%),
           radial-gradient(1px 1px at 18% 65%, #65431f 0, transparent 70%),
           radial-gradient(2px 2px at 32% 42%, #65431f 0, transparent 70%),
           radial-gradient(1px 1px at 45% 78%, #65431f 0, transparent 70%),
           radial-gradient(2px 2px at 58% 35%, #65431f 0, transparent 70%),
           radial-gradient(1px 1px at 72% 70%, #65431f 0, transparent 70%),
           radial-gradient(2px 2px at 88% 45%, #65431f 0, transparent 70%);
   }

   /* =========================================================
           SADU STRIP
        ========================================================= */

   .sadu-strip {
       position: absolute;
       bottom: 25%;
       left: 0;
       right: 0;
       height: 8px;
       z-index: 4;
       opacity: .55;

       background:
           linear-gradient(45deg,
               transparent 34%,
               #b3242c 34%,
               #b3242c 40%,
               transparent 40%),
           linear-gradient(-45deg,
               transparent 34%,
               #0b7a3d 34%,
               #0b7a3d 40%,
               transparent 40%),
           linear-gradient(90deg,
               #f2c584 0%,
               #f2c584 100%);

       background-size:
           20px 8px,
           20px 8px,
           100% 8px;
   }

   /* =========================================================
           ISLANDS
        ========================================================= */

   .island {
       position: absolute;
       bottom: 29%;
       z-index: 2;
       opacity: .82;
   }

   .island-mound {
       width: 84px;
       height: 20px;
       border-radius: 50%;

       background:
           linear-gradient(180deg,
               #3a2c1c 0%,
               #241a10 100%);
   }

   .island-left {
       left: 6%;
   }

   .island-right {
       right: 7%;
       transform: scale(.8);
   }

   .island-palm {
       position: absolute;
       bottom: 16px;
       width: 40px;
       color: #16211a;
   }

   .island-left .island-palm {
       left: 18px;
   }

   .island-right .island-palm {
       right: 16px;
   }

   /* =========================================================
           ACTIVITY SCENE
           No external icons / no game icons.
        ========================================================= */

   .activities-scene {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       height: 29%;
       z-index: 4;
       pointer-events: none;
   }

   /* =========================================================
           PEOPLE
        ========================================================= */

   .activity-person {
       position: absolute;
       width: 15px;
       height: 15px;
       border-radius: 50%;
       background: #292822;
   }

   .activity-person::after {
       content: "";
       position: absolute;
       top: 13px;
       left: -5px;
       width: 25px;
       height: 34px;
       border-radius: 12px 12px 6px 6px;
       background: #34332b;
   }

   /* =========================================================
           MAFIA ACTIVITY
        ========================================================= */

   .activity-mafia {
       position: absolute;
       left: 12%;
       bottom: 8px;
       width: 175px;
       height: 120px;
       animation: activityFloat 5s ease-in-out infinite;
   }

   .mafia-table {
       position: absolute;
       left: 47px;
       bottom: 25px;
       width: 82px;
       height: 31px;
       border-radius: 50%;

       background: #49311f;
       box-shadow: 0 9px 0 rgba(0, 0, 0, .13);
   }

   .mafia-table::after {
       content: "";
       position: absolute;
       left: 38px;
       top: 25px;
       width: 7px;
       height: 28px;
       background: #352417;
   }

   .mafia-person-1 {
       left: 12px;
       bottom: 27px;
   }

   .mafia-person-2 {
       right: 12px;
       bottom: 27px;
   }

   .mafia-person-3 {
       left: 72px;
       bottom: 76px;
   }

   .mafia-person-4 {
       right: 62px;
       bottom: 76px;
   }

   /* =========================================================
           MOVIE ACTIVITY
        ========================================================= */

   .activity-movie {
       position: absolute;
       right: 14%;
       bottom: 7px;
       width: 190px;
       height: 125px;

       animation:
           activityFloat 7s ease-in-out infinite,
           movieGlow 4s ease-in-out infinite;
   }

   .movie-screen {
       position: absolute;
       top: 0;
       left: 35px;
       width: 120px;
       height: 65px;

       border-radius: 5px;
       background: #18202b;
       border: 3px solid rgba(255, 255, 255, .28);

       box-shadow:
           0 0 22px rgba(255, 255, 255, .08);
   }

   .movie-screen::before {
       content: "";
       position: absolute;
       left: 50%;
       bottom: -15px;
       transform: translateX(-50%);

       width: 6px;
       height: 15px;
       background: #33271e;
   }

   .movie-light {
       position: absolute;
       inset: 10px;

       border-radius: 3px;

       background:
           linear-gradient(135deg,
               rgba(255, 255, 255, .24),
               rgba(255, 255, 255, .02));

       animation: movieFlicker 3s ease-in-out infinite;
   }

   .movie-seat {
       position: absolute;
       bottom: 8px;
       width: 35px;
       height: 28px;

       border-radius: 7px 7px 4px 4px;
       background: #3a2921;
   }

   .movie-seat::before {
       content: "";
       position: absolute;
       width: 13px;
       height: 13px;
       border-radius: 50%;
       background: #27251f;
       top: -12px;
       left: 11px;
   }

   .movie-seat-1 {
       left: 47px;
   }

   .movie-seat-2 {
       right: 47px;
   }

   @keyframes movieFlicker {

       0%,
       100% {
           opacity: .4;
       }

       50% {
           opacity: .9;
       }
   }

   @keyframes movieGlow {

       0%,
       100% {
           filter: brightness(.95);
       }

       50% {
           filter: brightness(1.05);
       }
   }

   /* =========================================================
           QUIZ / QUESTIONS ACTIVITY
        ========================================================= */

   .activity-quiz {
       position: absolute;
       left: 43%;
       bottom: 7px;
       width: 120px;
       height: 115px;

       animation: activityFloat 6s ease-in-out infinite;
   }

   .quiz-board {
       position: absolute;
       top: 0;
       left: 22px;
       width: 76px;
       height: 57px;

       border-radius: 7px;

       background: rgba(32, 35, 38, .9);
       border: 2px solid rgba(255, 255, 255, .18);

       box-shadow:
           0 6px 14px rgba(0, 0, 0, .18);
   }

   .quiz-board::before,
   .quiz-board::after {
       content: "";
       position: absolute;
       left: 12px;
       right: 12px;
       height: 3px;
       border-radius: 4px;
       background: rgba(255, 255, 255, .14);
   }

   .quiz-board::before {
       top: 14px;
   }

   .quiz-board::after {
       top: 27px;
   }

   .quiz-question {
       position: absolute;
       right: 10px;
       bottom: 5px;

       font-size: 26px;
       font-weight: 700;
       color: rgba(255, 255, 255, .78);

       animation: questionPulse 2.5s ease-in-out infinite;
   }

   @keyframes questionPulse {

       0%,
       100% {
           opacity: .55;
       }

       50% {
           opacity: 1;
       }
   }

   .quiz-person {
       left: 52px;
       bottom: 7px;
   }

   /* =========================================================
           GAME ACTIVITY
        ========================================================= */

   .activity-game {
       position: absolute;
       right: 39%;
       bottom: 3px;
       width: 145px;
       height: 100px;

       animation: activityFloat 5.5s ease-in-out infinite;
   }

   .game-floor {
       position: absolute;
       left: 30px;
       bottom: 8px;
       width: 84px;
       height: 45px;

       border-radius: 50%;
       background: #4c3525;

       box-shadow:
           inset 0 4px 5px rgba(255, 255, 255, .05);
   }

   .game-piece {
       position: absolute;
       left: 23px;
       top: 13px;
       width: 9px;
       height: 9px;
       border-radius: 50%;
       background: #d9b16f;
   }

   .piece-2 {
       left: 51px;
       top: 25px;
   }

   .piece-3 {
       left: 38px;
       top: 8px;
   }

   .game-player-1 {
       left: 7px;
       bottom: 20px;
   }

   .game-player-2 {
       right: 7px;
       bottom: 20px;
   }

   /* =========================================================
           SMALL SOCIAL ACTIVITY
        ========================================================= */

   .activity-social {
       position: absolute;
       left: 29%;
       bottom: 4px;
       width: 115px;
       height: 80px;

       animation: activityFloat 6.5s ease-in-out infinite;
   }

   .social-person-1 {
       left: 8px;
       bottom: 13px;
   }

   .social-person-2 {
       left: 48px;
       bottom: 20px;
   }

   .social-person-3 {
       right: 5px;
       bottom: 13px;
   }

   .social-ground {
       position: absolute;
       left: 20px;
       bottom: 5px;
       width: 70px;
       height: 18px;
       border-radius: 50%;
       background: rgba(75, 52, 35, .6);
   }

   /* =========================================================
           BEACH LANTERN / CAMPFIRE
        ========================================================= */

   .beach-light {
       position: absolute;
       left: 62%;
       bottom: 15px;
       width: 35px;
       height: 55px;
   }

   .beach-light::before {
       content: "";
       position: absolute;
       left: 10px;
       bottom: 0;
       width: 15px;
       height: 28px;
       border-radius: 5px;
       background: #3b2a1d;
   }

   .beach-light::after {
       content: "";
       position: absolute;
       left: 4px;
       top: 5px;
       width: 27px;
       height: 27px;
       border-radius: 50%;

       background: rgba(244, 197, 132, .65);

       box-shadow:
           0 0 25px 8px rgba(244, 197, 132, .18);

       animation: lanternGlow 3s ease-in-out infinite;
   }

   @keyframes lanternGlow {

       0%,
       100% {
           opacity: .55;
       }

       50% {
           opacity: 1;
       }
   }

   /* =========================================================
           GENERAL ACTIVITY FLOAT
        ========================================================= */

   @keyframes activityFloat {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-3px);
       }
   }

   /* =========================================================
           PALM TREES
        ========================================================= */

   .palm-wrap {
       position: absolute;
       bottom: 25%;
       z-index: 5;
       opacity: 0.55;
       color: #1c2b20;

       animation: palmSway ease-in-out infinite;
       transform-origin: bottom center;
   }

   .palm-1 {
       left: 2%;
       height: 260px;
       animation-duration: 6s;
   }

   .palm-2 {
       right: 4%;
       height: 190px;
       animation-duration: 5s;
       animation-delay: 0.6s;
   }

   .palm-3 {
       left: 12%;
       height: 150px;
       animation-duration: 7s;
       animation-delay: 1.2s;
       opacity: 0.4;
   }

   .palm-4 {
       left: 50%;
       margin-left: -260px;
       height: 460px;
       animation-duration: 6.8s;
       opacity: 0.5;
       color: #14201a;
   }

   .palm-5 {
       left: 50%;
       margin-left: 170px;
       height: 410px;
       animation-duration: 5.8s;
       animation-delay: 0.7s;
       opacity: 0.5;
       color: #14201a;
   }

   @keyframes palmSway {

       0%,
       100% {
           transform: rotate(-2deg);
       }

       50% {
           transform: rotate(2deg);
       }
   }

   /* =========================================================
           LOGIN CARD
        ========================================================= */

   .game-card-wrap {
       position: relative;
       z-index: 10;
   }

   .game-card-wrap::before {
       content: "";
       position: absolute;
       inset: -20px;

       background:
           radial-gradient(circle,
               rgba(244, 197, 132, 0.28) 0%,
               transparent 70%);

       filter: blur(10px);
       z-index: -1;
       border-radius: 24px;
   }

   /* =========================================================
           MOBILE
        ========================================================= */

   @media (max-width: 640px) {

       .game-bg {
           min-height: 100svh;
       }

       .ground {
           height: 27%;
       }

       .sadu-strip {
           bottom: 27%;
       }

       .horizon-glow {
           bottom: 27%;
       }

       .sea-line {
           bottom: 27%;
       }

       .palm-1 {
           height: 180px;
       }

       .palm-2 {
           height: 130px;
       }

       .palm-3 {
           display: none;
       }

       .palm-4 {
           height: 300px;
           margin-left: -190px;
       }

       .palm-5 {
           height: 270px;
           margin-left: 110px;
       }

       .island {
           transform: scale(.7);
       }

       .activity-mafia {
           left: 1%;
           transform: scale(.72);
           transform-origin: bottom left;
       }

       .activity-movie {
           right: 1%;
           transform: scale(.68);
           transform-origin: bottom right;
       }

       .activity-quiz {
           left: 36%;
           transform: scale(.62);
           transform-origin: bottom center;
       }

       .activity-game {
           right: 30%;
           transform: scale(.58);
           transform-origin: bottom center;
       }

       .activity-social {
           display: none;
       }

       .beach-light {
           display: none;
       }

       .activities-scene {
           height: 30%;
       }
   }