/* =====================================
   SABA GAME
===================================== */

/* ------------------------
   SABA GAME
------------------------- */

.game-wrapper{
  position:relative;
  margin-top:10px;
}

.game-play{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.game-tank{
  position:relative;
  height:430px;
  flex:1;
  border:6px solid #111;
  border-radius:0;
  overflow:hidden;
  background:#fff;
  box-shadow:6px 6px 0 #111;
}

#fish-area{
  position:absolute;
  inset:0;
}

.game-side{
  height:auto;
  align-self:flex-start;
  flex:none;
  border:4px solid #111;
  background:#fff;
  box-shadow:5px 5px 0 #111;
  padding:8px 5px;
}

.game-side img{
  width:100%;
  height:auto;
  display:block;
  image-rendering:pixelated;
}

.game-instructor{
  position:absolute;
  right:-8px;
  bottom:180px;
  width:140px;
  z-index:30;
  image-rendering:pixelated;
}

.game-status{
  position:relative;
  margin-top:12px;
  background:white;
  border:4px solid #111;
  padding:18px;
  z-index:50;
}

.game-status::after{
  content:"";
  position:absolute;
  inset:10px;
  border:2px solid #111;
  pointer-events:none;
}

.game-text{
  font-family:"Press Start 2P","DotGothic16","IBM Plex Mono",monospace;
  font-size:18px;
  line-height:1.65;
  letter-spacing:.04em;
}

#message{
  margin-top:10px;
  font-size:15px;
}

#start-game{
  margin-top:12px;
  border:3px solid #111;
  background:#fff;
  padding:8px 16px;
  font-family:"Press Start 2P","DotGothic16","IBM Plex Mono",monospace;
  font-size:15px;
}

.fish{
  position:absolute;
  image-rendering:pixelated;
  user-select:none;
}
.game-side-column{
  width:82px;
  flex:none;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.game-result-mini{
  width:92px;
  height:74px;

  background:url("../assets/game/result_balloon.webp")
    center/contain no-repeat;

  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 8px 14px;

  color:var(--orange);
  font-family:"DotGothic16",sans-serif;
  font-size:13px;
  font-weight:bold;
  line-height:1.15;
  text-align:center;

  image-rendering:pixelated;
}

.game-page{
  padding-top:78px;
}
.point-popup{
  position:absolute;

  font-family:"Press Start 2P","DotGothic16",monospace;
  font-size:16px;
  color:#ff7433;

  pointer-events:none;

  animation:pointUp .6s ease forwards;

  z-index:100;
}

@keyframes pointUp{

  0%{
    opacity:1;
    transform:translateY(0);
  }

  100%{
    opacity:0;
    transform:translateY(-30px);
  }

}
.timeup-overlay{
  position:absolute;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  color:var(--orange);
  font-family:"Press Start 2P","DotGothic16",monospace;
  font-size:28px;
  letter-spacing:.08em;

  z-index:100;
}

.timeup-overlay span{
  display:block;
  animation:timeBlink .5s steps(2, end) infinite;
}

@keyframes timeBlink{
  0%{ opacity:1; }
  50%{ opacity:.15; }
  100%{ opacity:1; }
}
.cursor{

  display:inline-block;

  animation:cursorBlink .7s steps(2) infinite;

}

@keyframes cursorBlink{

  50%{
    opacity:0;
  }

}