/* ============================================
 * SKELETON
 * Extracted from index.html
 * ============================================ */

/* ====== SIMPLE SKELETON LOADING (LOUNGE & MISSION) ====== */
@keyframes ojolSkeletonShimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: 200px 0;
  }
}

/* Lounge skeleton: nickname, coin, stats, leaderboard, mission ringkasan */
#ojol-lounge-root.ojol-loading #loungeNickname,
#ojol-lounge-root.ojol-loading #loungeCoin,
#ojol-lounge-root.ojol-loading .lounge-stat-value {
  color: transparent;
  border-radius: 999px;
  background: linear-gradient(90deg, #e5e7eb 0px, #f3f4f6 40px, #e5e7eb 80px);
  background-size: 200px 100%;
  animation: ojolSkeletonShimmer 1.1s infinite linear;
}

#ojol-lounge-root.ojol-loading #leaderboardUserData,
#ojol-lounge-root.ojol-loading #leaderboardListUsers,
#ojol-lounge-root.ojol-loading #missionList {
  border-radius: 16px;
  min-height: 80px;
  background: linear-gradient(90deg, #e5e7eb 0px, #f3f4f6 40px, #e5e7eb 80px);
  background-size: 200px 100%;
  animation: ojolSkeletonShimmer 1.1s infinite linear;
}

/* Mission skeleton: header stats + mission list */
#ojol-mission-root.ojol-loading #missionTopName,
#ojol-mission-root.ojol-loading #missionCoin,
#ojol-mission-root.ojol-loading #missionBestScore,
#ojol-mission-root.ojol-loading #missionTotalPlayTime {
  color: transparent;
  border-radius: 12px;
  background: linear-gradient(90deg, #e5e7eb 0px, #f3f4f6 40px, #e5e7eb 80px);
  background-size: 200px 100%;
  animation: ojolSkeletonShimmer 1.1s infinite linear;
}

#ojol-mission-root.ojol-loading #missionStreakCard,
#ojol-mission-root.ojol-loading #missionListDom {
  border-radius: 16px;
  min-height: 80px;
  background: linear-gradient(90deg, #e5e7eb 0px, #f3f4f6 40px, #e5e7eb 80px);
  background-size: 200px 100%;
  animation: ojolSkeletonShimmer 1.1s infinite linear;
}


#game-container {
  width: 100vw;
  height: calc(100vh - 0px); /* Reserve 50px for banner (web browser) */
  margin: 0;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
}

/* Banner Ad Container - Fixed at bottom (web browser only) */
#banner-ad-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Native App (Flutter) - Hide WebView banner, Flutter handles it */
body.native-app #game-container {
  height: 100vh; /* Full height - Flutter's bottomNavigationBar handles banner */
}
body.native-app #banner-ad-container {
  display: none !important;
}