/*#region - FONT - */
@font-face {
  font-family: "Trade Gothic LT Pro";
  src: url("/font/TradeGothicLTPro-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ROG Fonts";
  src: url("/font/ROGFonts-Regular_0.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans TC";
  src: url("/font/SourceHanSansTC-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans TC";
  src: url("/font/SourceHanSansTC-Normal.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Han Sans TC";
  src: url("/font/SourceHanSansTC-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/*#endregion*/

/*#region - ENVIRONMENT - */
.scene {
  --base-ratio: 9/16;
}
.bg-scroll {
  background: url("/resources/bg.webp") no-repeat;
  background-size: 100% 100%;
}
.bg-top {
  background-image: url("/resources/bg-top.webp");
  aspect-ratio: 1080/639;
}
.bg-bottom {
  background-image: url("/resources/bg-bottom.webp");
  aspect-ratio: 1080/564;
}
/*#endregion*/

/*#region - ROOT - */
:root {
  --editor-filter: invert(10%) sepia(100%) saturate(7383%) hue-rotate(244deg) brightness(98%) contrast(144%);

  --font-family-trade-gothic: "Trade Gothic LT Pro", Arial, sans-serif;
  --font-family-rog: "ROG Fonts", Arial, sans-serif;
  --font-family-source-han-sans: "Source Han Sans TC", "Noto Sans TC", sans-serif;

  --font-trade-gothic-bold: 700 4cqw/1.35 var(--font-family-trade-gothic);
  --font-rog-regular: 400 4cqw/1.35 var(--font-family-rog);
  --font-source-han-regular: 400 4cqw/1.35 var(--font-family-source-han-sans);
  --font-source-han-medium: 500 4cqw/1.35 var(--font-family-source-han-sans);
  --font-source-han-bold: 700 4cqw/1.35 var(--font-family-source-han-sans);
  --text-size-ttl: 5.1cqw;
  --text-size-content: 4.26cqw;


  --color-rog-red: #ff1929;
  --color-rog-red-dark: #991019;
  --color-rog-red-light: #ff8c94;

  --btn-small-width: 43.9cqw;
}

.logo {
  width: 45.65cqw;
  margin-top: 17.2cqw;
}
.logo-lg {
  width: 38.70cqw;
  margin-top: 26.3cqw;
}
.logo-pixel {
  width: 11.39cqw;
  margin-top: 10.9cqw;
}

.corner-frame {
  position: relative;
  box-sizing: border-box;
  border-style: solid;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  &::after {
    content: "";
    position: absolute;
    inset: calc(var(--frame-border-width) * -1);
    border-radius: var(--frame-radius);
    pointer-events: none;

    background:
      linear-gradient(var(--frame-corner-color) 0 0) left top / var(--frame-corner-size) var(--frame-border-width) no-repeat,
      linear-gradient(var(--frame-corner-color) 0 0) left top / var(--frame-border-width) var(--frame-corner-size) no-repeat,

      linear-gradient(var(--frame-corner-color) 0 0) right top / var(--frame-corner-size) var(--frame-border-width) no-repeat,
      linear-gradient(var(--frame-corner-color) 0 0) right top / var(--frame-border-width) var(--frame-corner-size) no-repeat,

      linear-gradient(var(--frame-corner-color) 0 0) left bottom / var(--frame-corner-size) var(--frame-border-width) no-repeat,
      linear-gradient(var(--frame-corner-color) 0 0) left bottom / var(--frame-border-width) var(--frame-corner-size) no-repeat,

      linear-gradient(var(--frame-corner-color) 0 0) right bottom / var(--frame-corner-size) var(--frame-border-width) no-repeat,
      linear-gradient(var(--frame-corner-color) 0 0) right bottom / var(--frame-border-width) var(--frame-corner-size) no-repeat;
  }
}
/*#endregion*/

/*#region - BUTTON - */
.btn--base {
  --frame-border-width: 0.11cqw;
  --frame-radius: 0.39cqw;
  --frame-corner-size: 0.89cqw;
  --frame-corner-color: var(--color-rog-red);

  width: 72.5cqw;
  height: 10.37cqw;
  background: var(--color-rog-red);
  border: var(--frame-border-width) solid var(--color-rog-red-dark);
  border-radius: var(--frame-radius);

  color: #fff;
  font: var(--font-source-han-medium);
  text-align: center;
  letter-spacing: 0.4cqw;
}
/*#endregion*/

/*#region - P01_HOME - */
.home-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  color: #fff;
  gap: 17cqw;
}
.home-text {
  text-align: center;
  padding-top: 2cqw;
  .home-text-en {
    font: var(--font-trade-gothic-bold);
    font-size: 6.11cqw;
  }
  .home-text-rog {
    font: var(--font-rog-regular);
    font-size: 3.7cqw;
    margin-top: 2cqw;
  }
  .home-text-zh {
    font: var(--font-source-han-regular);
    font-size: 3.7cqw;
    margin-top: 0.8cqw;
  }
}
/*#endregion*/

/*#region - P03_COLLECTION - */
.collection-text {
  color: #fff;
  text-align: center;
  font: var(--font-source-han-bold);
  font-size: var(--text-size-ttl);
  letter-spacing: 0.5cqw;
  margin-top: 10.5cqw;

}
.collection-action {
  margin-top: 11.3cqw;
}

/*#region - map - */
.map-container {
  display: flex;
  flex-direction: column;
  margin-top: 4.6cqw;
  align-items: center;
  gap: 1cqw;
}
.map {
  width: 73.98cqw;
  height: 47.78cqw;
  object-fit: contain;
  display: block;
}
.map-btn-container {
  display: flex;
  flex-direction: row;
  gap: 1.5cqw;
}
.map-btn {
  position: relative;
  width: 14.35cqw;
  aspect-ratio: 155/43;
  background: none;
  color: var(--color-rog-red-light);
  font: var(--font-rog-regular);
  line-height: 1;
  letter-spacing: 0.5cqw;
  font-size: 2.6cqw;
  display: flex;
  flex-direction: column;
  justify-content: end;
  transition: background-color ease 0.25s;
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.93cqw;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: background-color ease 0.25s;
    background: var(--color-rog-red-light);
  }
}
.map-btn.active {
  pointer-events: none;
  color: var(--color-rog-red);
  &::after {
    background-color: var(--color-rog-red);
  }
}
/*#endregion*/

/*#region - stamp - */
.stamp-grid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1cqw;
  margin-top: 7cqw;
}
.stamp-container {
  width: 18cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5cqw;
}
.stamp-label {
  color: #fff;
  font: var(--font-trade-gothic-bold);
  font-size: 2cqw;
  text-align: center;
}
/*#endregion*/
/*#endregion*/

/*#region - DIALOG - */
.notice-dialog {
  position: fixed;
  inset: 0;
  width: 72cqw;
  height: 69.53cqw;
  margin: auto;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  background: transparent;
}
.notice-dialog::backdrop {
  background: #000000cc;
}
.dialog__panel {
  --frame-border-width: 0.09cqw;
  --frame-radius: 0.32cqw;
  --frame-corner-size: 0.74cqw;
  --frame-corner-color: #cccccc;

  width: 100%;
  height: 100%;
  background: #ffffffcc;
  border: var(--frame-border-width) solid #666666;
  border-radius: var(--frame-radius);

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3.5cqw;
  text-align: center;
}
.dialog__icon {
  width: 13.70cqw;
}
.dialog__message {
  color: var(--color-rog-red);
  font: var(--font-source-han-bold);
  font-size: 3.7cqw;
  line-height: 1.5;
  letter-spacing: 0.3cqw;
}
.dialog__text {
  color: #000000;
  font: var(--font-source-han-regular);
  font-size: 3.15cqw;
  letter-spacing: 0.2cqw;
}

.close-btn {
  width: var(--btn-small-width);
}
/*#endregion*/

/*#region - P04_EXCHANGE - */
.exchange-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  color: #fff;
  text-align: center;
  font-size: var(--text-size-content);
  letter-spacing: 0.5cqw;
}
.exchange-content[hidden] {
  display: none;
}
.exchange-step-01, .exchange-step-02 {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  gap: 0.5cqw;
}
.exchange-step-01 {
  margin-top: 14.6cqw;
}
.exchange-step-02 {
  margin-top: 3cqw;
}
.exchange-text-reg {
  font: var(--font-source-han-regular);
}
.exchange-text-bold {
  font: var(--font-source-han-bold);
  font-size: var(--text-size-ttl);
  line-height: 1.5;
}
.exchange-text-en {
  font: var(--font-trade-gothic-bold);
}
.text-highlight {
  --text-highlight-height: 3.05cqw;
  --text-highlight-offset: 2.5cqw;

  position: relative;
  display: inline-block;
  z-index: 0;
  justify-content: center;
  align-items: center;
}
.collection-text .text-highlight {
  --text-highlight-height: 3.66cqw;
  --text-highlight-offset: 3cqw;
}
.text-highlight__en {
  font: inherit;
  font-family: var(--font-family-trade-gothic);
  font-weight: 700;
  letter-spacing: inherit;
  margin-left: 0.5cqw;
}
.text-highlight::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: var(--text-highlight-height);
  transform: translateY(var(--text-highlight-offset));
  background: var(--color-rog-red);
}

.exchange-input {
  --frame-border-width: 0.18cqw;
  --frame-radius: 0.32cqw;
  --frame-corner-size: 1.5cqw;
  --frame-corner-color: var(--color-rog-red);

  width: 71.9cqw;
  height: 10cqw;
  background: #ffffffcc;
  border: 0.09cqw solid var(--color-rog-red);
  border-radius: var(--frame-radius);
  margin-top: 8cqw;
  color: #000000;
  font: var(--font-source-han-regular);
  font-size: 3.15cqw;
  letter-spacing: 0.2cqw;
  text-align: center;
}
.exchange-input::placeholder {
  color: #8c9091;
  opacity: 1;
}

.exchange-btn {
  margin-top: 10.5cqw;
  width: var(--btn-small-width);
}
/*#endregion*/

/*#region - P05_SCANNER - */
.scanner-ttl {
  width: 47.59cqw;
  margin-top: 11.6cqw;
}
.scanner-text {
  margin-top: 8.7cqw;
  color: #fff;
  font-size: var(--text-size-content);
  text-align: center;
  letter-spacing: 0.6cqw;
}
.scanner-text-zh {
  font: var(--font-source-han-regular);
}
.scanner-text-rog {
  margin-top: 1.2cqw;
  font: var(--font-rog-regular);
}

#scanner-container {
  margin-top: 5.3cqw;
  width: 64.8cqw;
  background: #ffffffcc;
}
.back-btn {
  margin-top: 10.5cqw;
  width: var(--btn-small-width);
}
/*#endregion*/


/*#region - SPLASH - */
.sp__bar-fill {
  background: var(--color-rog-red);
}
/*#endregion*/