body{
  width: 100vw;
  height: 100vh;
  background-color: lightcyan;
  position: relative;
  animation-name: background-change;
  animation-duration: 20s;
  animation-direction: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 5s;
  margin: 0;
  overflow: hidden;

  cursor: none;
  user-select: none;
  -webkit-user-drag: none;
}

.introduction{
  font-family: 'Brush Script MT';
  font-size: 80px;
  position: absolute;
  left: 20%;
  animation-name: text-night-mode;
  animation-duration: 25s;
  animation-fill-mode: forwards;
}

#background{
  width: 100vw;
  height: 70vh;
  position: absolute;
  bottom: 0;
}

#sun{
  position: absolute;
  z-index: -100;
  right: 50px;
  width: 150px;
  animation-name: sunset;
  animation-duration: 20s;
  animation-direction: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 5s;
}

#moon{
  position: absolute;
  z-index: -100;
  top: 30%;
  left: 1%;
  width: 150px;
  animation-name: moon-rise;
  animation-duration: 8s;
  animation-delay: 23s;
  animation-iteration-count: 1;
  animation-direction: linear;
  animation-fill-mode: forwards;
}

.cloud1{
  position: absolute;
  left: 10%;
  top: 10px;
  width: 140px
}
.cloud2{
  position: absolute;
  left: 50%;
  top: 20px;
  width: 100px
}
.cloud3{
  position: absolute;
  left: 70%;
  top: 40px;
  width: 100px
}

.turtle{
  position: absolute;
  bottom: 600px;
  animation-name: left-to-right;
  animation-duration: 60s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.fish1{
  position: absolute;
  bottom: 280px;
  animation-name: right-to-left;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.bird {
  position: absolute;
  top: 10%;
  animation-name: left-to-right;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.starfish{
  position: absolute;
  bottom: 10%;
  left: 40%;
}

/* boat clickable */
.boat {
  position: absolute;
  animation: rock-boat 3s ease-in-out infinite, left-to-right 50s linear infinite;
  bottom: 68%;

  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
}

/* sinking boat */
.boat.sinking {
  animation: boat-sink 2.6s ease-in forwards !important;
  transform-origin: 50% 70%;
  will-change: transform, opacity;
}

@keyframes boat-sink {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  30%  { transform: translateY(30px) rotate(6deg) scale(0.98); opacity: 0.95; }
  60%  { transform: translateY(120px) rotate(-12deg) scale(0.90); opacity: 0.8; }
  100% { transform: translateY(420px) rotate(25deg) scale(0.65); opacity: 0; }
}

.mermaid{
  position: absolute;
  bottom: 60%;
  animation: left-to-right 60s linear infinite;
}

.mighty-shark{
  position: absolute;
  width: 250px;
  bottom: 2%;
  left: 20%;
}

.firework1{
  position: absolute;
  z-index: -100;
  left: 40%;
  opacity:0;
  animation-name: appear;
  animation-fill-mode: forwards;
  animation-delay: 5s;
}

/* canvas bubbles: FIXED to viewport so it never "falls through" */
.bubble-cursor-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  pointer-events: none;
  z-index: 999999;
}

/* fish cursor */
.fish-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 90px;
  height: auto;
  pointer-events: none;
  z-index: 1000000;
  transform: translate(-50%, -50%);
  will-change: transform;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.25));
}

@keyframes right-to-left {
  0%   {right: 0%}
  100% {right: 100%}
}

@keyframes left-to-right {
  0%   {left: 0%}
  100% {left: 100%}
}

@keyframes rock-boat {
  50%  { transform: rotate(-5deg) translateY(-10px);  }
}

@keyframes background-change{
  0% { background: lightcyan; }
  70% { background: orange; }
  100% { background: #1A202C; }
}

.disapear-at-night{
  animation: disappear 20s;
  animation-fill-mode: forwards;
  color: lightcyan;
}

@keyframes disappear {
  0% {opacity: 1}
  100% {opacity: 0}
}

.appear-at-night{
  animation-name: appear;
  animation-duration: 10s;
  animation-fill-mode: forwards;
  animation-delay: 20s;
}

@keyframes appear {
  to { opacity: 1; }
}

@keyframes sunset {
  0% {top: 0}
  100% {top: 30%}
}

@keyframes moon-rise {
  0% {top: 30%}
  100% {top: 0}
}

@keyframes text-night-mode {
  50% {color: grey}
  100% {color: white}
}

.ja{
  position: absolute;
  width: 250px;
  bottom: 3%;
  left: 60%;
}

.chest {
  position: absolute;
  left: 12%;
  bottom: 8%;
  width: 160px;
  height: auto;
  cursor: pointer;
  z-index: 50;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: manipulation;
  transition: transform 180ms ease;
}

.chest:active {
  transform: scale(0.98);
}

/* 🪟 Popup */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 2000000; /* выше рыбки/канваса */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.popup-overlay.open {
  display: flex;
}

.popup {
  width: min(520px, 92vw);
  background: rgba(255,255,255,0.95);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  padding: 18px 18px 16px;
  color: #111;
}

.popup h3 {
  margin: 0 0 8px 0;
  font-size: 22px;
}

.popup p {
  margin: 0 0 12px 0;
  font-size: 16px;
  line-height: 1.4;
}

.popup-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.popup-btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 15px;
  cursor: pointer;
}

.popup-btn.primary {
  background: #111;
  color: #fff;
}

.popup-btn.ghost {
  background: rgba(0,0,0,0.08);
  color: #111;
}

.table {
  position: absolute;
  right: 12%;
  bottom: 8%;
  width: 200px;
  height: auto;
  z-index: 50;
}