:root {
  --filter-editor: invert(11%) sepia(94%) saturate(7199%) hue-rotate(5deg)
    brightness(105%) contrast(113%);
}
[hidden] {
  display: none !important;
}

.page-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 18cqw;
}
img {
  height: auto;
  padding: 0;
  margin: 0;
}
.btn {
  background: transparent;
  filter: drop-shadow(0 0 3.4734px rgba(38, 55, 109, 0.4));
}

/* #region - BACKGROUND - */
.bg-scroll {
  background: #ffff;
  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    inset: 0;
    background: linear-gradient(180deg, #c0efff 0%, transparent 60%);
    pointer-events: none;
  }
}
.bg-fill {
  background: transparent;
}
.bg-bottom {
  background-image: url(/resources/bg-bottom.webp);
  aspect-ratio: 1171/1190;
  position: relative;
  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100cqw;
    aspect-ratio: 1171 / 136;
    background: url("/resources/footer.webp") no-repeat center / 100% auto;
    pointer-events: none;
  }
}
/* #endregion */

/* #region - HEADER - */
.page-head {
  width: 100%;
  display: grid;
  padding: 0;
  margin: 0;
  gap: 3cqw;
}
.btn-home {
  background: transparent;
}

.head__lookup {
  width: 100%;
}
.btn-back {
  width: 6cqw;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  margin-left: 4cqw;
  color: #757575;
  background: transparent;
  border: 0.275cqw solid currentColor;
  border-radius: 1.4cqw;
  &:active {
    color: #4462f2;
    filter: none;
  }
}
.btn-back__arrow {
  width: 2.5cqw;
  height: 0.275cqw;
  position: relative;
  display: block;
  background: currentColor;
  border-radius: 999px;
  &::before {
    content: "";
    width: 1.75cqw;
    height: 1.75cqw;
    position: absolute;
    left: 0.1cqw;
    top: 50%;
    border-left: 0.275cqw solid currentColor;
    border-bottom: 0.275cqw solid currentColor;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: center;
  }
}
/* #endregion */

/* #region - SPLASH - */
.splash {
  background: #ffffff;
  background: linear-gradient(
    180deg,
    rgba(192, 239, 255, 1) 0%,
    rgba(255, 255, 255, 0) 50%,
    rgba(147, 140, 244, 1) 100%
  );
}
.sp__bar-fill {
  background: #938cf4;
}
.sp__pct {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 4cqw;
  color: #a0a0a0;
}
/* #endregion */

/* #region - WELCOME HEADER -*/
.welcome-header {
  padding-top: 11.2cqw;
}
.welcome-header__ribbon {
  width: 86.84cqw;
}
.welcome-header__logo {
  margin-top: -1cqw;
  width: 73.59cqw;
}
/* #endregion */

/* #region - COMPACT HEADER -*/
.compact-header__title {
  padding-top: 10cqw;
  gap: 4.5cqw;
  width: 80cqw;
  margin-inline: auto;
}
/* #endregion */

/* #region - P00_HOME_CONTENT - */
.home .page-content {
  padding-top: 8cqw;
}
.home__start-btn {
  .btn__image {
    width: 78.89cqw;
  }
}
/* #endregion */

/* #region - P01_POINT CARD_CONTENT -*/
.point-card .page-content {
  padding-top: 8cqw;
}
.point-card__stamp-panel {
  /* 暫用 CSS 繪製卡片外觀，待正式底圖到位後改回背景圖套版 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  padding: 4cqw 4cqw 6cqw;
  width: 85cqw;
  border-radius: 6cqw;
  border: 0.5cqw solid #fff;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 6px rgba(38, 55, 109, 0.3);
  pointer-events: none;
}

.point-card__stamp-text {
  margin-top: 1cqw;
  width: 80cqw;
  height: auto;
}

.point-card__stamp-row {
  display: flex;
  justify-content: center;
  width: 100%;
  gap: 3cqw;
}
.point-card__stamp-wrap {
  display: grid;
  place-items: center;
  width: 20cqw;
}
.point-card__action-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3cqw;
  width: 100%;
  margin-top: 4cqw;
}
.point-card__scanner-btn .btn__image {
  width: 80cqw;
}
.point-card__redeem-btn .btn__image {
  width: 50cqw;
}
/* 集章數達到兌換門檻，兩顆按鈕並排顯示時縮小寬度 */
.point-card__action-row:has(.point-card__redeem-btn:not([hidden])) {
  .point-card__scanner-btn .btn__image,
  .point-card__redeem-btn .btn__image {
    width: 40cqw;
  }
}
/* #endregion */
/*#region - P01_POINT CARD_STAMP - */
.stamp {
  width: 100%;
  opacity: 0.5;
  filter: grayscale(1);
}
/* is-collected：已收集 */
.stamp.is-collected {
  filter: grayscale(0);
  opacity: 1;
}
/* is-collected：剛收集，播放集章動態 */
.stamp.is-collecting {
  animation: jello-horizontal 1s both;
  transition: filter 0.2s ease-out;
  filter: grayscale(0);
  opacity: 1;
}
.stamp__label {
  font-size: 3.6cqw;
  color: #333;
}
/*#endregion */

/* #region - P02_REDEMPTION_CONTENT -*/
.redemption__panel {
  /* 暫用 CSS 繪製卡片外觀，待正式底圖到位後改回背景圖套版 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12cqw;
  padding: 7cqw 4cqw 8cqw;
  width: 85cqw;
  border-radius: 6cqw;
  border: 0.5cqw solid #fff;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 6px rgba(38, 55, 109, 0.3);
  pointer-events: none;
}

.redemption__redeemed-view .redemption__panel {
  gap: 8cqw;
}

.redemption__unredeemed-view .page-content {
  padding-top: 10cqw;
  gap: 4.1cqw;
}
.redemption__redeem-message {
  width: 55cqw;
}
.redemption__redeem-btn .btn__image {
  padding-top: 2cqw;
  width: 80cqw;
}

.redemption__redeemed-view .page-content {
  padding-top: 10cqw;
  gap: 4.1cqw;
}
.redemption__complete-message {
  width: 45cqw;
}
/* #endregion */
/* #region - P02_REDEMPTION_GIFT -*/
.gift {
  width: 55cqw;
  opacity: 1;
}
.gift.is-exchanged::after {
  opacity: 1;
}
.gift.is-exchanging {
  animation: jello-horizontal 1s both;
  transition: opacity 0.2s ease-out;
  opacity: 1;
}

.redemption__goguide-btn .btn__image {
  padding-top: 5cqw;
  width: 80cqw;
}
/* #endregion */

/* #region - P03_SCANNER_CONTENT -*/
.scanner .page-content {
  padding-top: 10cqw;
  gap: 3.5cqw;
  /* filter: var(--filter-editor); */
}
.scanner__camera {
  position: relative;
  width: 70cqw;
  padding: 0.26cqw;
  aspect-ratio: 1;
  background: transparent;
  z-index: 100;
}
#scanner-video {
  position: absolute;
  top: -0.5cqw;
  left: -0.5cqw;
  width: calc(100% + 1cqw);
  height: calc(100% + 1cqw);
  display: block;
  object-fit: cover;
  border-radius: 2cqw;
}
.scanner__corner {
  position: absolute;
  width: 8.63cqw;
  aspect-ratio: 1;
  background: url(/resources/scanner_corner.webp) no-repeat center/cover;
  pointer-events: none;
}
.scanner__corner--top-left {
  top: 5cqw;
  left: 5cqw;
}
.scanner__corner--top-right {
  top: 5cqw;
  right: 5cqw;
  transform: scaleX(-1);
}
.scanner__corner--bottom-left {
  bottom: 5cqw;
  left: 5cqw;
  transform: scaleY(-1);
}
.scanner__corner--bottom-right {
  bottom: 5cqw;
  right: 5cqw;
  transform: scaleY(-1) scaleX(-1);
}

.scanner__back-btn .btn__image {
  padding-top: 5cqw;
  width: 80cqw;
}
/* #endregion */