:root {
  /* COLOR */
  --col-white: #ffffff;
  --col-primary-dark: #1f333d;
  --col-button-shadow: #78848b;
  --col-panel: #dcdddd;
  --col-stamp-empty: #595757;
  --col-stamp-s01: #2bb0dd;
  --col-stamp-s02: #ece94f;
  --col-stamp-s03: #b3c33e;
  --col-stamp-s04: #142b8b;
  --col-stamp-redeemed: #c9caca;
  --col-scanner-frame: #9fa0a0;
  /* FONT */
  --font-tc: "Noto Sans TC", sans-serif;
  --font-weight-bold: 700;
  /* RADIUS */
  --radius-panel: 11.5cqw;
  --radius-pill: 100cqw;
  /* BUTTON */
  --button-float-depth: 1.55cqw;
}

img {
  width: auto;
  height: auto;
  display: block;
  padding: 0;
}
.page-content {
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8cqw;
}

/* #region - BACKGROUND - */
.bg-layer {
  background: var(--col-white);
  &::before, &::after {
    content: "";
    position: absolute;
    width: 100%;
    aspect-ratio: 390/150;
    background: transparent no-repeat center/cover;
  }
  &::before {
    top: 0;
    background-image: url(/resources/bg-top.webp);
  }
  &::after {
    bottom: 0;
    background-image: url(/resources/bg-bottom.webp);
  }
}
/* #endregion */

/* #region - PANEL - */
.panel {
  border-radius: var(--radius-panel);
  width: 64cqw;
  aspect-ratio: 1;
}
/* #endregion */

/* #region - BUTTON_FLOAT - */
.btn {
  background: transparent;
}
.btn-float {
  height: 11.8cqw;
  min-width: 53cqw;
  padding: 0 5cqw;
  border-radius: var(--radius-pill);
  position: relative;
  background: var(--col-primary-dark);
  box-shadow: 0 var(--button-float-depth) var(--col-button-shadow);
  color: var(--col-white);
  font-family: var(--font-tc);
  font-weight: var(--font-weight-bold);
  font-size: 6cqw;
  letter-spacing: 0.1em;
}
.btn-float:active {
  box-shadow: 0 0 var(--col-button-shadow);
  transform: translateY(var(--button-float-depth));
}
/* #endregion */

/* #region - SPLASH - */
.splash {
  background: var(--col-white);
}
.splash::before,
.splash::after {
  content: "";
  position: absolute;
  width: 100%;
  aspect-ratio: 390 / 150;
  background: transparent no-repeat center / cover;
  pointer-events: none;
}
.splash::before {
  top: 0;
  background-image: url(/resources/bg-top.webp);
}
.splash::after {
  bottom: 0;
  background-image: url(/resources/bg-bottom.webp);
}
.sp__bar-wrap {
  position: relative;
  z-index: 1;
}
.sp__bar-bg {
  height: 2cqw;
  background: var(--col-panel);
  border-radius: var(--radius-pill);
  box-shadow: 0 0.7cqw var(--col-button-shadow);
}
.sp__bar-fill {
  height: 100%;
  background: var(--col-primary-dark);
  border-radius: var(--radius-pill);
}
.sp__pct {
  color: var(--col-primary-dark);
  font-family: var(--font-tc);
  font-weight: var(--font-weight-bold);
}
/* #endregion */

/* #region - P00_HOME - */
.home .page-content {
  gap: 20.5cqw;
}
.home-logo {
  width: 76.67cqw;
}
/* #endregion */

/* #region - P01_POINT_CARD - */
.point-card__stamps {
  position: relative;
  background: var(--col-panel);
  grid-template-columns: repeat(auto-fill, 21.8cqw);
  justify-content: center;
  align-content: center;
}
.stamp-wrap {
  display: grid;
  justify-items: center;
  gap: 0.5cqw;
}
.stamp-text {
  color: var(--col-stamp-empty);
  font-family: var(--font-tc);
  font-weight: var(--font-weight-bold);
  font-size: 3.33cqw;
  margin: 0;
  padding: 0;
}
.stamp {
  width: 21.8cqw;
  background-color: var(--col-stamp-empty);
  border: none;
  .stamp__image {
    width: 15.47cqw;
  }
}
.s01 {
  --col-stamp: var(--col-stamp-s01);
}
.s02 {
  --col-stamp: var(--col-stamp-s02);
}
.s03 {
  --col-stamp: var(--col-stamp-s03);
}
.s04 {
  --col-stamp: var(--col-stamp-s04);
}
.stamp.is-collected, .stamp.is-collecting {
  border: none;
  background: var(--col-stamp);
}
/* #endregion */

/* #region - P01_POINT_CARD__REDEEMED - */
.prize-redeemed-indicator {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 73.16cqw;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.point-card .page-content.is-redeemed {
  .s01, .s02, .s03, .s04 {
    --col-stamp: var(--col-stamp-redeemed);
  }
  .stamp-text {
    display: none;
  }
  .prize-redeemed-indicator {
    display: block;
  }
  .prize-redeemed-indicator[hidden] {
    display: none;
  }
}
.prize-redeemed-indicator.is-entering {
  animation: prize-redeemed-stamp-in 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes prize-redeemed-stamp-in {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.3) rotate(-3deg);
  }
  55% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(0.92) rotate(0deg);
  }
  78% {
    transform: translate(-50%, -50%) scale(1.04);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .prize-redeemed-indicator.is-entering {
    animation: none;
  }
}
/* #endregion */

/* #region - P02_SCANNER - */
.scanner .page-content {
  gap: 5cqw;
}

.scanner__camera {
  position: relative;
  background: transparent;
  border: var(--col-scanner-frame) 0.36cqw solid;
  padding: 8cqw;
}

.scanner__camera::before,
.scanner__camera::after {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.scanner__camera::before {
  inset: 6cqw;
  background:
    linear-gradient(var(--col-scanner-frame) 0 0) left top / 4.4cqw 0.9cqw no-repeat,
    linear-gradient(var(--col-scanner-frame) 0 0) left top / 0.9cqw 4.4cqw no-repeat,
    linear-gradient(var(--col-scanner-frame) 0 0) right top / 4.4cqw 0.9cqw no-repeat,
    linear-gradient(var(--col-scanner-frame) 0 0) right top / 0.9cqw 4.4cqw no-repeat,
    linear-gradient(var(--col-scanner-frame) 0 0) left bottom / 4.4cqw 0.9cqw no-repeat,
    linear-gradient(var(--col-scanner-frame) 0 0) left bottom / 0.9cqw 4.4cqw no-repeat,
    linear-gradient(var(--col-scanner-frame) 0 0) right bottom / 4.4cqw 0.9cqw no-repeat,
    linear-gradient(var(--col-scanner-frame) 0 0) right bottom / 0.9cqw 4.4cqw no-repeat;
}

.scanner__camera::after {
  top: 50%;
  left: 50%;
  width: 15.8cqw;
  z-index: -1;
  aspect-ratio: 158 / 124;
  background: url("/resources/icon-camera.webp") center / contain no-repeat;
  transform: translate(-50%, -50%);
}

.scanner__status {
  font-family: var(--font-tc);
  color: var(--col-primary-dark);
  font-weight: var(--font-weight-bold);
  font-size: 5cqw;
}
/* #endregion */