@charset "UTF-8";
/* === 빌드 산출물 안내 ===
   ach.css 는 scss/ach.scss 에서 생성됩니다.
   CSS를 직접 수정하지 말고 SCSS를 수정한 뒤 local-server/css-build.sh 를 실행하세요. */
#splashedNotifications_overlay {
  background: rgba(0, 0, 0, 0.75);
  height: 100%;
  left: 0;
  opacity: 0; /* 초기값 0 */
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* --- Splash Modal Styles --- */
.splash_block {
  color: var(--white);
  font-size: 30px;
  height: 250px;
  margin-top: -125px;
  position: absolute;
  text-align: center;
  top: 50%;
  width: 100%;
}

.splash_background {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), #000, rgba(0, 0, 0, 0.2));
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%; /* 최종 상태 */
  opacity: 0;
  animation: expandWidth 0.5s ease-out 1s forwards;
  animation-fill-mode: forwards;
}

@keyframes expandWidth {
  from {
    width: 0;
    opacity: 0;
  }
  to {
    width: 100%;
    opacity: 1;
  }
}
.splash_block .trophyimg_wrap {
  left: -270px;
  position: absolute;
  top: -97px;
}
.splash_block .trophyimg_image {
  animation: crescendo 1.5s ease-in infinite alternate;
  height: 260px;
  position: relative;
  width: 250px;
}

@keyframes crescendo {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.splash_block .trophyimg_xlarge {
  left: 36px;
  position: absolute;
  top: 36px;
}
.mm .splash_block .trophyimg_xlarge {
  left: 0;
}

.splash_central {
  font-weight: 700;
  left: 50%;
  margin-left: -200px;
  margin-top: 16px;
  position: absolute;
  width: 500px;
  opacity: 0;
  line-height: 1.3;
  animation: fadeIn 0.8s ease 2s forwards;
}

.splash_block .splash_intro {
  color: #fde517;
}
.splash_block .gamename {
  color: #4871b6;
  font-size: 40px;
  margin-top: 20px;
}
.splash_block .splash_trophyname {
  color: #4871b6;
  font-size: 40px;
  margin-top: 10px;
}
.splash_block .splash_descr {
  font-size: 18px;
  margin-top: 10px;
}

/* --- Button Styles --- */
.bgabutton_always_big, .bgabutton_big {
  font-size: 18px;
  padding: 18px 36px;
  opacity: 0;
  animation: fadeIn 0.8s ease 2.5s forwards;
}

.mm .bgabutton_big {
  font-size: 14px;
  padding: 6px 12px;
}

a.bgabutton {
  color: var(--white);
}

.bgabutton_large {
  margin: auto;
  text-align: center;
  width: 95%;
}

.bgabutton_small {
  font-size: 12px;
  font-weight: 500;
  padding: 3px 6px;
}

.bgabutton_small_margin {
  margin-bottom: 5px;
  margin-top: 5px;
}

.bgabutton_red {
  background: linear-gradient(to bottom, #c20b0b, #c92727);
  border: 1px solid #b20a0a;
}
.bgabutton_red:active {
  background: #b20a0a;
  border-top-color: #b20a0a;
}

.bgabutton_blue {
  background: linear-gradient(to bottom, #4065a3, #4871b6);
  border: 1px solid #37578c;
  border-radius: 6px;
  box-shadow: 0 1px 0 #000;
  color: var(--white);
  cursor: pointer;
  font-size: 18px;
  text-overflow: ellipsis;
  text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
  vertical-align: middle;
  white-space: nowrap;
}
.bgabutton_blue:active {
  background: #37578c;
  border-top-color: #37578c;
}

.bgabutton_green {
  background: linear-gradient(to bottom, #799332, #89a538);
  border: 1px solid #697f2b;
}
.bgabutton_green:active {
  background: #697f2b;
  border-top-color: #697f2b;
}

.bgabutton_darkgray {
  background: linear-gradient(to bottom, #888, #787878);
  border: 1px solid #505050;
}
.bgabutton_darkgray:active {
  background: #696969;
  border-top-color: #696969;
}

.bgabutton_gray {
  border: 1px solid #060606;
  box-shadow: 0 0 0 #000;
  color: #060606;
  text-shadow: none;
}
.bgabutton_gray:active {
  background: #d8d8d8;
}

a.bgabutton_gray {
  color: #060606;
}

/* --- Splash Modal Button/Link Positions --- */
.splash_block .bgabutton_always_big {
  bottom: -35px;
  left: 50%;
  margin-left: -52px;
  position: absolute;
}
.mm .splash_block .bgabutton_always_big {
  margin-left: -52px;
}
.splash_block a.skip_wrap {
  bottom: -24px;
  color: var(--white);
  font-size: 18px;
  position: absolute;
  right: 10px;
}
.mm .splash_block a.skip_wrap {
  bottom: -74px;
  font-size: 14px;
  right: 0;
  width: 100%;
}

/* --- Mobile Specific Styles --- */
.mm .splash_block {
  font-size: 20px;
  height: 350px;
  margin-top: -147px;
}

.mm .splash_central {
  left: auto;
  margin-left: 1%;
  margin-top: 120px;
  width: 98%;
}

.mm .splash_block .trophyimg_image {
  position: relative;
  width: 184px;
}
.mm .splash_block .trophyimg_wrap {
  left: 50%;
  margin-left: -92px;
  position: absolute;
  top: -240px;
}

.trophy_prestige {
  opacity: 0;
  animation: fadeIn 0.8s ease 2.2s forwards;
}

.mm .splash_block .trophy_prestige {
  position: absolute;
  top: 400px;
  width: 100%;
}

.mm #soundVolumeMobilePlaceholder #toggleSound {
  top: 8px;
}

/* --- Trophy Image Related Styles --- */
.trophyimg.trophyimg_xlarge {
  height: 184px;
  width: 184px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.trophyimg {
  float: left;
  position: relative;
}
.trophyimg img {
  border-radius: 25px;
  height: 57%;
  left: 22%;
  position: absolute;
  top: 28%;
  width: 57%;
}

.trophyimg_wrap .trophyimg img {
  background: linear-gradient(#f8bb00, #e78500);
  z-index: -1;
}

/* --- 추가된 Achievement 관련 Styles --- */
.xp_container {
  margin-left: 38px;
}

#welcomebigprestige .achievements_total_nbr {
  font-size: 140%;
  font-weight: 700;
  margin-left: 120px;
  margin-top: 9px;
}

.achievements_game.pageheader {
  height: 190px;
  margin-bottom: 85px;
  margin-top: 40px;
  overflow: visible;
  padding: 0;
  position: relative;
  transition: all 0.5s;
}
.mm .achievements_game.pageheader {
  height: 160px;
  margin-bottom: 40px;
  margin-top: 15px;
}

.achievement_game_box {
  left: 0;
  position: absolute;
  top: -33px;
}
.achievement_game_box img {
  height: 260px;
  width: 260px;
}
.mm .achievement_game_box {
  left: 2px;
  top: 10px;
}
.mm .achievement_game_box img {
  height: 100px;
  width: 100px;
}

.achievements_game .header_infos {
  float: left;
  height: 132px;
  margin-left: 298px;
  position: relative;
  top: 10px;
  width: 250px;
}
.mm .achievements_game .header_infos {
  height: 218px;
  margin-left: 124px;
}

.mm .expanded.achievements_game .header_infos {
  height: 169px;
}

.achievements_game .header_infos .gamename {
  font-size: 250%;
  margin-top: 33px;
  width: 240px;
}
.mm .achievements_game .header_infos .gamename {
  font-size: 150%;
  width: 160px;
}

.xp_container {
  background-color: #000;
  border-bottom: 2px solid #787878;
  border-top: 2px solid #787878;
  color: #fec700;
  display: inline-block;
  font-weight: 700;
  line-height: 17px;
  margin-left: 16px;
  margin-right: 16px;
  margin-top: 4px;
  padding: 4px 0;
  position: relative;
}
.xp_container .arrowback {
  border-color: transparent transparent transparent #787878;
  border-style: solid;
  border-width: 14px 0 14px 16px;
  height: 0;
  position: absolute;
  right: -16px;
  top: -2px;
  width: 0;
}
.xp_container .arrow {
  border-color: transparent transparent transparent #000;
  border-style: solid;
  border-width: 12px 0 12px 14px;
  height: 0;
  position: absolute;
  right: -14px;
  top: 0;
  width: 0;
}
.xp_container .arrowbackl {
  border-color: transparent #787878 transparent transparent;
  border-style: solid;
  border-width: 14px 16px 14px 0;
  height: 0;
  left: -16px;
  position: absolute;
  top: -2px;
  width: 0;
}
.xp_container .arrowl {
  border-color: transparent #000 transparent transparent;
  border-style: solid;
  border-width: 12px 14px 12px 0;
  height: 0;
  left: -14px;
  position: absolute;
  top: 0;
  width: 0;
}

.achievements_game .header_infos .xp_container {
  left: -15px;
  margin-top: 14px;
  position: relative;
}

.heroxx {
  margin: 20px auto;
}
.heroxx img {
  width: 100%;
}

img.m, .mm img.d {
  display: none;
}

.mm img.m {
  display: block;
}