@charset "UTF-8";
/* 重置所有標籤的樣式 */
@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Noto+Sans+TC:wght@100..900&display=swap");
/* #region 重置*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* 不累加邊框border和內距padding的寬高 */
}

/* 重置字體 */
body {
  font-size: 100%;
  line-height: 1.5;
}

/* 重置標題 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

/* 重置列表 */
ul,
ol {
  list-style: none;
}

/* 重置圖片 */
img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* 重置連接 */
a {
  display: block;
  /* 將預設inline改為block */
  text-decoration: none;
  color: var(--deep);
}
/* #endregion*/

.element-wrapper {
  margin: 0 auto;
  max-width: 1180px;
}

@media (max-width: 1025px) {
  .element-wrapper {
    max-width: 640px;
  }
}

#banner {
  position: relative;
  overflow: hidden;
  background-image: url(/assets/images/phantom-blade-zero/banner_bg.webp);
  background-size: cover;
  background-position: top center;

  width: 100%;
  height: 90vh;
  padding: 2rem;
  display: flex;
  align-items: center;
}

@media (max-width: 1025px) {
  #banner {
    background-position: top left 35%;
  }
}

@media (max-width: 431px) {
  #banner {
    background-position: top left 20%;
  }
}

/* 角色圖靠右下定位，高度撐滿 banner */
.banner-char {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
  z-index: 1;
}

.banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* logo 置於左側、垂直置中偏上 */
.banner-logo {
  width: 38%;
  max-width: 450px;
  transform: translateY(-15%);
}

@media (max-width: 1025px) {
  .banner-char {
    right: -10%;
  }

  .banner-logo {
    width: 45%;
    max-width: 320px;
  }
}

@media (max-width: 431px) {
  .banner-char {
    right: -25%;
  }

  .banner-logo {
    width: 55%;
    max-width: 220px;
  }
}

#platform {
  background-color: black;
  width: 100%;
  height: 10vh;
}

.platform-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin: auto;
  height: 100%;
}

#platform .item {
  max-width: 170px;
}

@media (max-width: 1025px) {
  #platform .item {
    max-width: 140px;
  }
}

@media (max-width: 431px) {
  .platform-list {
    gap: 0.6rem;
  }

  #platform .item {
    max-width: 100px;
  }
}

#feature {
  background-image: url(/assets/images/phantom-blade-zero/bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  padding: 4rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 3rem;
  color: white;
}

.horizontal-line {
  width: 100%;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 auto;
}

.copyright {
  margin-top: 0.5rem;
}

#feature .content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.55);
}

footer {
  background-color: black;
  color: white;
  font-size: 0.8rem;
  padding: 2rem 4rem;
}

footer .element-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

@media (max-width: 1025px) {
  footer .element-wrapper {
    flex-direction: column;
    gap: 1.25rem;
  }
}

.esrb {
  display: flex;
  align-items: center;
  width: 70%;
  gap: 1rem;
}

.esrb-img {
  max-width: 100px;
}

@media (max-width: 1025px) {
  .esrb {
    width: 100%;
    flex-direction: column;
    align-items: start;
  }

  .esrb-img {
    max-width: 60px;
  }
}

.contact a {
  display: inline-block;
  color: darkorange;
  text-decoration: underline;
}

.contact a:hover {
  color: chocolate;
}

.logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
}

.logos .item {
  display: flex;
  align-items: center;
}

.logos .s-game {
  max-width: 100px;
}

.logos .jd {
  max-width: 140px;
}

.logos .xiaoheihe {
  max-width: 85px;
}

@media (max-width: 431px) {
  .logos {
    flex-wrap: nowrap;
    justify-content: space-between;
    margin-top: 1.5rem;
  }

  .logos .s-game {
    max-width: 55px;
  }

  .logos .jd {
    max-width: 105px;
  }

  .logos .xiaoheihe {
    max-width: 75px;
  }
}