@font-face {
  font-family: "JiufangHand";
  src: url("assets/fonts/jiufang-hand.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "YiqiHand";
  src: url("assets/fonts/yiqi-hand.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "MotaiHand";
  src: url("assets/fonts/motai-hand.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FeilianHand";
  src: url("assets/fonts/feilian-hand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LumenHand";
  src: url("assets/fonts/lumen-hand.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PlayerHand";
  src: url("assets/fonts/player-hand.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* =========================================================
   基礎
========================================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  background: #05080e;
  color: #e7e3da;

  font-family:
    "Noto Serif TC",
    "Songti TC",
    serif;

  overflow-x: hidden;
}

button {
  font: inherit;
}

img {
  display: block;
}



/* =========================================================
   ENTRY
========================================================= */

.entry {
  position: relative;

  width: 100%;
  height: 100vh;

  min-height: 780px;

  overflow: hidden;

  background: #05080e;
}



/* =========================================================
   所有景物圖層
========================================================= */

.entry-layer {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  pointer-events: none;
}



/* =========================================================
   靜態底景
   完全不動
========================================================= */

.layer-base {
  z-index: 1;
}



/* =========================================================
   後層雲
========================================================= */

.layer-cloud-back {
  z-index: 3;

  opacity: 0.52;

  transform:
    scale(1.07);

  animation:
    cloudBackMove 22s
    ease-in-out
    infinite;
}


@keyframes cloudBackMove {

  0% {
    transform:
      translateX(-1.5%)
      scale(1.07);

    opacity: 0.45;
  }

  50% {
    transform:
      translateX(1.5%)
      scale(1.07);

    opacity: 0.60;
  }

  100% {
    transform:
      translateX(-1.5%)
      scale(1.07);

    opacity: 0.45;
  }

}



/* =========================================================
   水面
========================================================= */

.layer-water {
  z-index: 4;

  opacity: 0.52;

  transform-origin:
    center bottom;

  animation:
    waterFlow 7s
    ease-in-out
    infinite;
}


@keyframes waterFlow {

  0% {
    transform:
      translateX(-3px)
      scaleX(1);

    opacity: 0.42;

    filter:
      brightness(0.90);
  }

  50% {
    transform:
      translateX(4px)
      scaleX(1.008);

    opacity: 0.65;

    filter:
      brightness(1.16);
  }

  100% {
    transform:
      translateX(-3px)
      scaleX(1);

    opacity: 0.42;

    filter:
      brightness(0.90);
  }

}



/* =========================================================
   前層雲
========================================================= */

.layer-cloud-front {
  z-index: 6;

  opacity: 0.35;

  transform:
    scale(1.08);

  animation:
    cloudFrontMove 15s
    ease-in-out
    infinite;
}


@keyframes cloudFrontMove {

  0% {
    transform:
      translateX(2%)
      translateY(0)
      scale(1.08);

    opacity: 0.28;
  }

  50% {
    transform:
      translateX(-2%)
      translateY(-4px)
      scale(1.08);

    opacity: 0.46;
  }

  100% {
    transform:
      translateX(2%)
      translateY(0)
      scale(1.08);

    opacity: 0.28;
  }

}



/* =========================================================
   伊耆
   不飄，只做祭光／星象呼吸
========================================================= */

.layer-yiqi {
  z-index: 7;

  opacity: 0.37;

  animation:
    yiqiGlow 5.5s
    ease-in-out
    infinite;
}


@keyframes yiqiGlow {

  0% {
    opacity: 0.28;

    filter:
      brightness(0.85)
      drop-shadow(
        0 0 2px
        rgba(234, 194, 119, 0.15)
      );
  }

  50% {
    opacity: 0.52;

    filter:
      brightness(1.25)
      drop-shadow(
        0 0 10px
        rgba(234, 194, 119, 0.28)
      );
  }

  100% {
    opacity: 0.28;

    filter:
      brightness(0.85)
      drop-shadow(
        0 0 2px
        rgba(234, 194, 119, 0.15)
      );
  }

}



/* =========================================================
   飛廉
   紅帶／蛛絲受風
========================================================= */

.layer-feilian {
  z-index: 8;

  opacity: 0.58;

  transform-origin:
    center center;

  animation:
    feilianWind 6.5s
    ease-in-out
    infinite;
}


@keyframes feilianWind {

  0% {
    transform:
      translateX(-2px)
      skewX(-0.15deg);

    filter:
      brightness(0.92);
  }

  50% {
    transform:
      translateX(5px)
      skewX(0.35deg);

    filter:
      brightness(1.08);
  }

  100% {
    transform:
      translateX(-2px)
      skewX(-0.15deg);

    filter:
      brightness(0.92);
  }

}



/* =========================================================
   鹿門
   花樹非常輕地搖
========================================================= */

.layer-lumen {
  z-index: 9;

  opacity: 0.78;

  transform-origin:
    80% 85%;

  animation:
    lumenTree 7s
    ease-in-out
    infinite;
}


@keyframes lumenTree {

  0% {
    transform:
      rotate(-0.12deg)
      translateX(-1px);
  }

  50% {
    transform:
      rotate(0.18deg)
      translateX(2px);
  }

  100% {
    transform:
      rotate(-0.12deg)
      translateX(-1px);
  }

}



/* =========================================================
   額外花瓣
========================================================= */

.petals {
  position: absolute;

  inset: 0;

  z-index: 11;

  pointer-events: none;

  overflow: hidden;
}


.petal {
  position: absolute;

  width: 9px;
  height: 14px;

  border-radius:
    70% 30% 70% 30%;

  background:
    linear-gradient(
      145deg,
      #f6d2db,
      #c9798c
    );

  opacity: 0;
}


.petal-1 {
  left: 88%;
  top: 49%;

  animation:
    petalFallA 9s linear infinite;
}

.petal-2 {
  left: 82%;
  top: 55%;

  animation:
    petalFallB 12s linear 1s infinite;
}

.petal-3 {
  left: 94%;
  top: 62%;

  animation:
    petalFallA 11s linear 3s infinite;
}

.petal-4 {
  left: 77%;
  top: 69%;

  animation:
    petalFallB 14s linear 2s infinite;
}

.petal-5 {
  left: 90%;
  top: 73%;

  animation:
    petalFallA 13s linear 5s infinite;
}

.petal-6 {
  left: 71%;
  top: 76%;

  animation:
    petalFallB 10s linear 4s infinite;
}

.petal-7 {
  left: 84%;
  top: 43%;

  animation:
    petalFallA 15s linear 6s infinite;
}

.petal-8 {
  left: 97%;
  top: 55%;

  animation:
    petalFallB 12s linear 7s infinite;
}


@keyframes petalFallA {

  0% {
    opacity: 0;

    transform:
      translate(0, 0)
      rotate(0deg);
  }

  10% {
    opacity: 0.75;
  }

  100% {
    opacity: 0;

    transform:
      translate(-420px, 210px)
      rotate(480deg);
  }

}


@keyframes petalFallB {

  0% {
    opacity: 0;

    transform:
      translate(0, 0)
      rotate(20deg);
  }

  12% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;

    transform:
      translate(-520px, 140px)
      rotate(-520deg);
  }

}



/* =========================================================
   外框
========================================================= */

.entry-frame {
  position: absolute;

  pointer-events: none;

  z-index: 30;
}


.frame-a {
  inset: 18px;

  border:
    1px solid
    rgba(216, 192, 150, 0.14);
}


.frame-b {
  inset: 31px;

  border:
    1px solid
    rgba(216, 192, 150, 0.05);
}



/* =========================================================
   中央內容
========================================================= */

.entry-content {
  position: absolute;

  top: 50%;
  left: 50%;

  z-index: 20;

  width:
    min(720px, 88vw);

  transform:
    translate(-50%, -50%);

  text-align: center;
}



/* =========================================================
   英文
========================================================= */

.entry-en {
  margin:
    0 0 18px;

  color:
    rgba(220, 218, 211, 0.62);

  font-size:
    11px;

  letter-spacing:
    11px;

  text-indent:
    11px;

  opacity: 0;

  animation:
    entryFadeUp
    1.2s
    ease
    0.2s
    forwards;
}



/* =========================================================
   Logo
========================================================= */

.logo-wrap {
  width:
    min(570px, 70vw);

  margin:
    0 auto;

  opacity: 0;

  animation:
    entryFadeUp
    1.4s
    ease
    0.35s
    forwards;
}


.entry-logo {
  width: 100%;
  height: auto;

  animation:
    logoGlow
    5s
    ease-in-out
    1.7s
    infinite;
}


@keyframes logoGlow {

  0% {
    filter:
      brightness(0.98)
      drop-shadow(
        0 0 5px
        rgba(219, 171, 93, 0.10)
      );
  }

  50% {
    filter:
      brightness(1.10)
      drop-shadow(
        0 0 14px
        rgba(219, 171, 93, 0.25)
      )
      drop-shadow(
        0 0 30px
        rgba(137, 46, 42, 0.10)
      );
  }

  100% {
    filter:
      brightness(0.98)
      drop-shadow(
        0 0 5px
        rgba(219, 171, 93, 0.10)
      );
  }

}



/* =========================================================
   副標
========================================================= */

.entry-subtitle {
  position: relative;

  margin:
    20px 0 0;

  color:
    rgba(216, 210, 198, 0.76);

  font-size:
    13px;

  letter-spacing:
    6px;

  text-indent:
    6px;

  opacity: 0;

  animation:
    entryFadeUp
    1.2s
    ease
    0.6s
    forwards;
}


.entry-subtitle::before,
.entry-subtitle::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 80px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(196, 160, 102, 0.55),
      transparent
    );
}


.entry-subtitle::before {
  right:
    calc(50% + 115px);
}


.entry-subtitle::after {
  left:
    calc(50% + 115px);
}



/* =========================================================
   入京
========================================================= */

.enter-button {
  position: relative;

  margin-top: 38px;

  padding:
    13px 32px;

  min-width: 116px;

  background:
    rgba(4, 8, 14, 0.55);

  border:
    1px solid
    rgba(192, 157, 103, 0.72);

  color:
    #ddd5c7;

  font-size:
    13px;

  letter-spacing:
    8px;

  text-indent:
    8px;

  cursor: pointer;

  opacity: 0;

  animation:
    entryFadeUp
    1.2s
    ease
    0.85s
    forwards;

  transition:
    0.35s ease;
}


.enter-button:hover {
  color:
    #fff0d7;

  border-color:
    #d3ad6a;

  background:
    rgba(112, 74, 37, 0.15);

  box-shadow:
    0 0 28px
    rgba(206, 157, 80, 0.16);
}



/* =========================================================
   ENTRY 進場
========================================================= */

@keyframes entryFadeUp {

  from {
    opacity: 0;

    transform:
      translateY(12px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}



/* =========================================================
   WORLD
========================================================= */

.world {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding:
    100px 8vw;

  background:
    linear-gradient(
      180deg,
      #05080e,
      #0b1019
    );
}


.world-content {
  width:
    min(900px, 100%);

  text-align: center;
}


.section-en {
  color:
    #817b70;

  font-size:
    10px;

  letter-spacing:
    7px;
}


.world h2 {
  font-size:
    clamp(38px, 6vw, 68px);

  font-weight:
    400;

  letter-spacing:
    12px;
}


.world-text {
  margin:
    36px auto 0;

  max-width:
    620px;

  color:
    #aaa69e;

  line-height:
    2.2;

  letter-spacing:
    3px;
}



/* =========================================================
   手機
========================================================= */

@media (max-width: 700px) {

  .entry {
    min-height: 740px;
  }

  .frame-a {
    inset: 12px;
  }

  .frame-b {
    inset: 21px;
  }

  .logo-wrap {
    width: 84vw;
  }

  .entry-en {
    font-size: 9px;
    letter-spacing: 6px;
  }

  .entry-subtitle {
    font-size: 11px;
    letter-spacing: 4px;
  }

  .entry-subtitle::before,
  .entry-subtitle::after {
    display: none;
  }

}
/* =========================================================
   ENTRY｜入京按鈕・夜巫京正式版
========================================================= */

.enter-button {
  position: relative;

  width: 158px;
  height: 54px;

  margin-top: 38px;
  padding: 0;

  overflow: hidden;

  border: 1px solid rgba(207, 170, 105, 0.78);

  background:
    linear-gradient(
      180deg,
      rgba(54, 26, 27, 0.46) 0%,
      rgba(11, 13, 19, 0.82) 48%,
      rgba(28, 16, 18, 0.70) 100%
    );

  color: #eee3d1;

  font-size: 14px;
  letter-spacing: 10px;
  text-indent: 10px;

  cursor: pointer;

  opacity: 0;

  box-shadow:
    inset 0 0 18px rgba(170, 112, 55, 0.06),
    0 0 0 1px rgba(101, 67, 39, 0.20),
    0 0 22px rgba(199, 145, 72, 0.07);

  animation:
    entryFadeUp 1.2s ease 0.85s forwards,
    enterBreath 4s ease-in-out 2s infinite;

  transition:
    width 0.45s ease,
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.45s ease,
    transform 0.35s ease;
}


/* 掃過的金光 */

.enter-button::before {
  content: "";

  position: absolute;

  top: -20%;
  left: -80%;

  width: 45%;
  height: 140%;

  transform: skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 226, 166, 0.22),
      transparent
    );

  transition:
    left 0.7s cubic-bezier(.2,.7,.2,1);

  pointer-events: none;
}


/* 內層細框 */

.enter-button::after {
  content: "";

  position: absolute;

  inset: 5px;

  border:
    1px solid rgba(211, 178, 117, 0.16);

  pointer-events: none;

  transition:
    border-color 0.35s ease;
}


/* Hover */

.enter-button:hover {
  width: 174px;

  transform:
    translateY(-3px);

  color:
    #fff5df;

  border-color:
    rgba(238, 199, 127, 0.96);

  background:
    linear-gradient(
      180deg,
      rgba(91, 34, 35, 0.58) 0%,
      rgba(20, 17, 20, 0.88) 50%,
      rgba(50, 24, 24, 0.76) 100%
    );

  box-shadow:
    inset 0 0 24px rgba(202, 142, 68, 0.10),
    0 0 8px rgba(242, 203, 131, 0.18),
    0 0 28px rgba(216, 158, 77, 0.19),
    0 0 55px rgba(136, 46, 39, 0.12);
}


.enter-button:hover::before {
  left: 140%;
}


.enter-button:hover::after {
  border-color:
    rgba(234, 197, 130, 0.38);
}


/* 按下 */

.enter-button:active {
  transform:
    translateY(0)
    scale(0.98);
}


/* 平常呼吸亮度 */

@keyframes enterBreath {

  0%,
  100% {
    box-shadow:
      inset 0 0 18px rgba(170, 112, 55, 0.06),
      0 0 0 1px rgba(101, 67, 39, 0.20),
      0 0 18px rgba(199, 145, 72, 0.05);
  }

  50% {
    box-shadow:
      inset 0 0 22px rgba(186, 122, 58, 0.10),
      0 0 0 1px rgba(143, 94, 48, 0.28),
      0 0 30px rgba(219, 163, 85, 0.13);
  }

}
/* =========================================================
   夜巫京｜LOGO 特效正式版
========================================================= */

.logo-wrap {
  position: relative;

  width: min(570px, 70vw);

  margin: 0 auto;

  opacity: 0;

  animation:
    entryFadeUp 1.4s ease 0.35s forwards;
}


/* Logo 後方月光 */

.logo-wrap::before {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 72%;
  height: 72%;

  transform:
    translate(-50%, -50%)
    scale(0.92);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(174, 46, 43, 0.16) 0%,
      rgba(151, 91, 48, 0.08) 34%,
      rgba(51, 66, 99, 0.04) 58%,
      transparent 74%
    );

  filter: blur(22px);

  opacity: 0.55;

  pointer-events: none;

  animation:
    logoAura 5.5s ease-in-out infinite;
}


/* 外圍很淡的金光 */

.logo-wrap::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  width: 76%;
  height: 76%;

  transform:
    translate(-50%, -50%)
    scale(0.92);

  border-radius: 50%;

  border:
    1px solid
    rgba(207, 166, 99, 0.08);

  box-shadow:
    0 0 30px
    rgba(204, 153, 76, 0.05);

  opacity: 0;

  pointer-events: none;

  animation:
    logoRing 5.5s ease-in-out infinite;
}


.entry-logo {
  position: relative;

  z-index: 2;

  width: 100%;
  height: auto;

  transform-origin: center;

  animation:
    logoLiving 5.5s ease-in-out infinite;
}


/* Logo 本體呼吸 */

@keyframes logoLiving {

  0%,
  100% {
    transform:
      scale(1);

    filter:
      brightness(1)
      saturate(1)
      drop-shadow(
        0 0 5px
        rgba(227, 184, 109, 0.10)
      )
      drop-shadow(
        0 0 12px
        rgba(126, 38, 39, 0.06)
      );
  }

  50% {
    transform:
      scale(1.018);

    filter:
      brightness(1.13)
      saturate(1.10)
      drop-shadow(
        0 0 10px
        rgba(245, 209, 143, 0.24)
      )
      drop-shadow(
        0 0 28px
        rgba(178, 54, 47, 0.16)
      );
  }

}


@keyframes logoAura {

  0%,
  100% {
    opacity: 0.35;

    transform:
      translate(-50%, -50%)
      scale(0.92);
  }

  50% {
    opacity: 0.85;

    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

}


@keyframes logoRing {

  0%,
  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.86);
  }

  45% {
    opacity: 0.24;
  }

  70% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(1.12);
  }

}



/* =========================================================
   夜巫京｜入京入口
   不使用死板方框
========================================================= */

.enter-button {
  position: relative;

  width: auto;
  height: auto;
  min-width: 0;

  margin-top: 38px;

  padding:
    11px 46px;

  overflow: visible;

  border: 0;

  background: transparent;

  color:
    rgba(230, 220, 203, 0.82);

  font-size: 14px;

  letter-spacing: 11px;
  text-indent: 11px;

  cursor: pointer;

  opacity: 0;

  box-shadow: none;

  animation:
    entryFadeUp 1.2s ease 0.85s forwards,
    enterTextBreath 4.5s ease-in-out 2s infinite;

  transition:
    color 0.4s ease,
    text-shadow 0.4s ease,
    transform 0.4s ease;
}


/* 左右延伸金線 */

.enter-button::before,
.enter-button::after {
  content: "";

  position: absolute;

  top: 50%;

  width: 48px;
  height: 1px;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(207, 171, 106, 0.72)
    );

  transition:
    width 0.55s cubic-bezier(.2,.7,.2,1),
    opacity 0.4s ease,
    filter 0.4s ease;
}


.enter-button::before {
  right:
    calc(100% - 28px);
}


.enter-button::after {
  left:
    calc(100% - 28px);

  transform:
    scaleX(-1);
}



/* 小金點 */

.enter-button {
  text-shadow:
    0 0 10px
    rgba(207, 163, 92, 0.06);
}


/* 滑鼠移上去 */

.enter-button:hover {
  transform:
    translateY(-3px);

  color:
    #fff0d3;

  background:
    transparent;

  border: 0;

  box-shadow: none;

  text-shadow:
    0 0 7px
    rgba(255, 226, 165, 0.42),

    0 0 22px
    rgba(204, 143, 69, 0.28),

    0 0 42px
    rgba(131, 40, 39, 0.14);
}


.enter-button:hover::before,
.enter-button:hover::after {
  width: 86px;

  filter:
    drop-shadow(
      0 0 4px
      rgba(239, 193, 113, 0.36)
    );
}


/* 點下 */

.enter-button:active {
  transform:
    translateY(0)
    scale(0.96);
}



/* 平常微微呼吸 */

@keyframes enterTextBreath {

  0%,
  100% {
    color:
      rgba(224, 214, 197, 0.72);

    text-shadow:
      0 0 8px
      rgba(193, 145, 77, 0.04);
  }

  50% {
    color:
      rgba(243, 228, 201, 0.95);

    text-shadow:
      0 0 11px
      rgba(219, 166, 90, 0.20);
  }

}



/* =========================================================
   入京下方流光點
========================================================= */

.entry-content::after {
  content: "◆";

  display: block;

  margin-top: 18px;

  color:
    rgba(199, 158, 94, 0.42);

  font-size: 6px;

  line-height: 1;

  text-shadow:
    0 0 9px
    rgba(218, 164, 81, 0.18);

  animation:
    entryDiamond 3.5s ease-in-out infinite;
}


@keyframes entryDiamond {

  0%,
  100% {
    opacity: 0.25;

    transform:
      translateY(0)
      scale(0.8);
  }

  50% {
    opacity: 0.9;

    transform:
      translateY(3px)
      scale(1);
  }

}
/* =========================================================
   入京｜月印式入口
   醒目，但不是死板方框
========================================================= */

.enter-button {
  position: relative;
  isolation: isolate;

  width: 190px;
  height: 68px;

  margin-top: 34px;
  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  color: #f0dfbf;

  font-size: 17px;
  font-weight: 500;

  letter-spacing: 13px;
  text-indent: 13px;

  cursor: pointer;

  opacity: 0;

  text-shadow:
    0 0 8px rgba(255, 218, 146, 0.26),
    0 0 22px rgba(177, 91, 52, 0.16);

  animation:
    entryFadeUp 1.2s ease 0.85s forwards,
    enterSealBreath 3.6s ease-in-out 2s infinite;

  transition:
    transform 0.4s ease,
    color 0.4s ease,
    letter-spacing 0.4s ease,
    text-shadow 0.4s ease;
}


/* 暗紅金色月印光域 */

.enter-button::before {
  content: "";

  position: absolute;

  z-index: -2;

  top: 50%;
  left: 50%;

  width: 170px;
  height: 58px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(116, 35, 37, 0.46) 0%,
      rgba(82, 38, 34, 0.30) 35%,
      rgba(23, 18, 21, 0.18) 60%,
      transparent 76%
    );

  box-shadow:
    0 0 18px rgba(163, 59, 47, 0.16),
    0 0 38px rgba(195, 134, 69, 0.09);

  transition:
    width 0.5s ease,
    height 0.5s ease,
    opacity 0.4s ease,
    box-shadow 0.5s ease;

  pointer-events: none;
}


/* 下方金色細光紋 */

.enter-button::after {
  content: "";

  position: absolute;

  z-index: -1;

  left: 50%;
  bottom: 7px;

  width: 84px;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(215, 173, 101, 0.35) 18%,
      rgba(248, 210, 139, 0.95) 50%,
      rgba(215, 173, 101, 0.35) 82%,
      transparent 100%
    );

  box-shadow:
    0 0 8px rgba(231, 184, 105, 0.20);

  transition:
    width 0.5s ease,
    box-shadow 0.4s ease;

  pointer-events: none;
}


/* 滑鼠移上去 */

.enter-button:hover {
  transform:
    translateY(-4px)
    scale(1.045);

  color:
    #fff4dc;

  letter-spacing:
    15px;

  text-shadow:
    0 0 7px rgba(255, 238, 196, 0.72),
    0 0 18px rgba(232, 183, 103, 0.48),
    0 0 42px rgba(169, 54, 46, 0.30);
}


.enter-button:hover::before {
  width: 220px;
  height: 72px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(151, 42, 42, 0.58) 0%,
      rgba(103, 47, 35, 0.36) 36%,
      rgba(30, 21, 22, 0.18) 62%,
      transparent 79%
    );

  box-shadow:
    0 0 20px rgba(196, 65, 50, 0.26),
    0 0 48px rgba(213, 153, 76, 0.20),
    0 0 80px rgba(132, 47, 46, 0.10);
}


.enter-button:hover::after {
  width: 138px;

  box-shadow:
    0 0 8px rgba(247, 207, 133, 0.48),
    0 0 20px rgba(223, 170, 87, 0.24);
}


/* 點擊 */

.enter-button:active {
  transform:
    translateY(-1px)
    scale(0.97);
}


/* 平常就會有明顯但慢的呼吸感 */

@keyframes enterSealBreath {

  0%,
  100% {
    text-shadow:
      0 0 7px rgba(255, 218, 146, 0.18),
      0 0 20px rgba(177, 91, 52, 0.10);
  }

  50% {
    text-shadow:
      0 0 9px rgba(255, 230, 174, 0.52),
      0 0 26px rgba(214, 150, 76, 0.30),
      0 0 44px rgba(142, 46, 43, 0.18);
  }

}
/* =========================================================
   夜巫京｜LOGO 斜向閃光
   從左上掃到右下
========================================================= */

/* 讓 logo 容器可以疊特效 */
.logo-wrap {
  position: relative;
  overflow: visible;
}


/* 閃光層 */
.logo-shine {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 108%;
  height: 120%;

  transform: translate(-50%, -50%);

  pointer-events: none;
  z-index: 4;

  overflow: hidden;
}


/* 真正掃過去的亮帶 */
.logo-shine::before {
  content: "";

  position: absolute;

  top: -30%;
  left: -38%;

  width: 16%;
  height: 180%;

  transform: rotate(32deg);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 246, 214, 0.18) 12%,
      rgba(255, 247, 220, 0.72) 50%,
      rgba(255, 223, 155, 0.30) 78%,
      rgba(255, 255, 255, 0) 100%
    );

  filter:
    blur(2px)
    drop-shadow(0 0 8px rgba(255, 232, 180, 0.35))
    drop-shadow(0 0 20px rgba(221, 162, 74, 0.22));

  opacity: 0;

  mix-blend-mode: screen;

  animation:
    logoSweep 5.8s ease-in-out infinite;
}


/* 如果你想要 logo 本體本來也更亮一點 */
.entry-logo {
  position: relative;
  z-index: 2;

  animation:
    logoLiving 5.5s ease-in-out infinite;
}


/* 閃光動畫：大部分時間不動，某一瞬間掃過 */
@keyframes logoSweep {

  0% {
    left: -38%;
    opacity: 0;
  }

  52% {
    left: -38%;
    opacity: 0;
  }

  58% {
    left: -24%;
    opacity: 0.18;
  }

  66% {
    left: 18%;
    opacity: 0.95;
  }

  74% {
    left: 54%;
    opacity: 0.72;
  }

  82% {
    left: 88%;
    opacity: 0;
  }

  100% {
    left: 88%;
    opacity: 0;
  }
}
/* =========================================================
   LOGO｜電影式筆畫掃光
========================================================= */

.logo-wrap {
  position: relative;

  width: min(570px, 70vw);

  margin: 0 auto;

  overflow: visible;
}


/* 原本 Logo */

.entry-logo {
  position: relative;

  z-index: 1;

  width: 100%;
  height: auto;

  animation:
    logoBreathNew 5.5s ease-in-out infinite !important;
}


/* 第二張完全相同的 Logo
   只讓其中一條斜帶短暫出現 */

.logo-shine-image {
  position: absolute;

  inset: 0;

  z-index: 2;

  width: 100%;
  height: 100%;

  object-fit: contain;

  pointer-events: none;

  opacity: 0;

  mix-blend-mode: screen;

  filter:
    brightness(2.8)
    contrast(1.35)
    saturate(1.12)
    drop-shadow(
      0 0 5px
      rgba(255, 237, 194, 0.65)
    );

  clip-path:
    polygon(
      -30% -10%,
      -16% -10%,
      10% 110%,
      -4% 110%
    );

  animation:
    logoMovieShine
    5.8s
    cubic-bezier(.35,.1,.25,1)
    infinite;
}


/* Logo 平時只有很輕的金紅呼吸 */

@keyframes logoBreathNew {

  0%,
  100% {
    transform: scale(1);

    filter:
      brightness(1)
      drop-shadow(
        0 0 5px
        rgba(214, 165, 87, 0.08)
      );
  }

  50% {
    transform: scale(1.008);

    filter:
      brightness(1.06)
      drop-shadow(
        0 0 11px
        rgba(224, 175, 91, 0.18)
      )
      drop-shadow(
        0 0 22px
        rgba(135, 38, 40, 0.09)
      );
  }

}


/* 真正的左上 → 右下掃光 */

@keyframes logoMovieShine {

  0%,
  56% {
    opacity: 0;

    clip-path:
      polygon(
        -30% -10%,
        -16% -10%,
        10% 110%,
        -4% 110%
      );
  }

  59% {
    opacity: 0.25;
  }

  66% {
    opacity: 0.95;

    clip-path:
      polygon(
        36% -10%,
        50% -10%,
        76% 110%,
        62% 110%
      );
  }

  74% {
    opacity: 0.72;

    clip-path:
      polygon(
        78% -10%,
        92% -10%,
        118% 110%,
        104% 110%
      );
  }

  79%,
  100% {
    opacity: 0;

    clip-path:
      polygon(
        104% -10%,
        118% -10%,
        144% 110%,
        130% 110%
      );
  }

}



/* =========================================================
   入京｜中央月印式入口
========================================================= */

.enter-button {
  position: relative;

  isolation: isolate;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 190px;
  height: 70px;

  margin-top: 31px;
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  opacity: 0;

  animation:
    entryFadeUp 1.2s ease 0.85s forwards;

  transition:
    transform 0.4s ease;

  box-shadow: none;
}


/* 文字真正置中
   抵銷中文字距最後多出來的空間 */

.enter-text {
  position: relative;

  z-index: 3;

  display: inline-block;

  margin-right: -12px;

  color: #efdfc2;

  font-size: 17px;

  letter-spacing: 12px;

  text-shadow:
    0 0 8px
    rgba(234, 192, 117, 0.20);

  animation:
    enterTextGlow
    3.8s
    ease-in-out
    infinite;

  transition:
    color 0.4s ease,
    text-shadow 0.4s ease,
    transform 0.4s ease;
}


/* 紅色光域
   現在永遠以整顆按鈕真正中心定位 */

.enter-button::before {
  content: "";

  position: absolute;

  z-index: 1;

  top: 50%;
  left: 50%;

  width: 164px;
  height: 56px;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(131, 35, 39, 0.42) 0%,
      rgba(101, 38, 37, 0.26) 30%,
      rgba(67, 30, 31, 0.12) 50%,
      transparent 74%
    );

  filter: blur(3px);

  pointer-events: none;

  animation:
    enterAura
    3.8s
    ease-in-out
    infinite;

  transition:
    width 0.45s ease,
    height 0.45s ease,
    background 0.45s ease;
}


/* 下方不是框，是一條像印記的金線 */

.enter-button::after {
  content: "";

  position: absolute;

  z-index: 2;

  left: 50%;
  bottom: 8px;

  width: 82px;
  height: 1px;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(188, 140, 72, 0.35),
      rgba(244, 205, 130, 0.95),
      rgba(188, 140, 72, 0.35),
      transparent
    );

  box-shadow:
    0 0 7px
    rgba(225, 173, 87, 0.24);

  transition:
    width 0.45s ease,
    box-shadow 0.45s ease;
}



/* Hover */

.enter-button:hover {
  transform:
    translateY(-3px)
    scale(1.04);

  background: transparent;

  border: 0;

  box-shadow: none;
}


.enter-button:hover .enter-text {
  color: #fff3d9;

  transform: scale(1.04);

  text-shadow:
    0 0 6px
    rgba(255, 243, 211, 0.72),

    0 0 17px
    rgba(237, 190, 106, 0.48),

    0 0 36px
    rgba(159, 47, 43, 0.28);
}


.enter-button:hover::before {
  width: 215px;
  height: 68px;

  background:
    radial-gradient(
      ellipse at center,
      rgba(165, 43, 42, 0.52) 0%,
      rgba(113, 45, 38, 0.30) 34%,
      rgba(57, 26, 28, 0.11) 55%,
      transparent 76%
    );
}


.enter-button:hover::after {
  width: 128px;

  box-shadow:
    0 0 9px
    rgba(247, 208, 133, 0.48),

    0 0 20px
    rgba(214, 151, 72, 0.22);
}


.enter-button:active {
  transform:
    translateY(0)
    scale(0.97);
}



/* 入京呼吸 */

@keyframes enterAura {

  0%,
  100% {
    opacity: 0.58;

    transform:
      translate(-50%, -50%)
      scale(0.94);
  }

  50% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1.05);
  }

}


@keyframes enterTextGlow {

  0%,
  100% {
    filter:
      brightness(0.94);
  }

  50% {
    filter:
      brightness(1.12);
  }

}
/* =========================================================
   LOGO｜電影式快速掃光
========================================================= */

.logo-shine-image {
  animation:
    logoMovieShineFast
    4.2s
    linear
    infinite !important;
}


@keyframes logoMovieShineFast {

  0%,
  63% {
    opacity: 0;

    clip-path:
      polygon(
        -28% -10%,
        -13% -10%,
        13% 110%,
        -2% 110%
      );
  }

  65% {
    opacity: 0.35;
  }

  69% {
    opacity: 1;

    clip-path:
      polygon(
        38% -10%,
        53% -10%,
        79% 110%,
        64% 110%
      );
  }

  74% {
    opacity: 0.82;

    clip-path:
      polygon(
        82% -10%,
        97% -10%,
        123% 110%,
        108% 110%
      );
  }

  77%,
  100% {
    opacity: 0;

    clip-path:
      polygon(
        108% -10%,
        123% -10%,
        149% 110%,
        134% 110%
      );
  }

}



/* =========================================================
   入京｜夜巫京門紋版
========================================================= */

/* 先徹底關掉前面所有 pseudo 光塊 */

.enter-button::before,
.enter-button::after {
  content: none !important;
}


.enter-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 18px;

  width: auto !important;
  height: 64px !important;

  min-width: 250px;

  margin-top: 30px;

  padding: 0 20px !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  cursor: pointer;

  opacity: 0;

  animation:
    entryFadeUp 1.2s ease 0.85s forwards;

  transition:
    transform 0.35s ease;
}



/* =========================================================
   入京文字
========================================================= */

.enter-text {
  position: relative;

  display: inline-block;

  margin: 0 !important;

  color: #f2dfba;

  font-size: 17px;

  letter-spacing: 10px;

  /* 抵銷最後一格字距 */
  padding-left: 10px;

  text-shadow:
    0 0 6px rgba(255, 229, 174, 0.34),
    0 0 18px rgba(211, 151, 76, 0.18);

  transition:
    color 0.35s ease,
    text-shadow 0.35s ease,
    transform 0.35s ease;

  animation:
    enterWordBreath
    3.6s
    ease-in-out
    infinite;
}


/* 字後面只保留很窄的紅金光
   不再形成橢圓塊 */

.enter-text::before {
  content: "";

  position: absolute;

  z-index: -1;

  top: 50%;
  left: 50%;

  width: 115px;
  height: 24px;

  transform:
    translate(-50%, -50%);

  background:
    radial-gradient(
      ellipse at center,
      rgba(164, 50, 44, 0.24) 0%,
      rgba(175, 112, 55, 0.12) 38%,
      transparent 74%
    );

  filter: blur(9px);

  pointer-events: none;

  transition:
    width 0.4s ease,
    opacity 0.4s ease;
}



/* =========================================================
   左右門紋
========================================================= */

.enter-line {
  position: relative;

  display: block;

  width: 66px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(180, 135, 72, 0.38),
      rgba(239, 199, 124, 0.90)
    );

  box-shadow:
    0 0 6px
    rgba(222, 169, 88, 0.18);

  transition:
    width 0.45s cubic-bezier(.2,.75,.2,1),
    filter 0.35s ease;
}


.enter-line-right {
  transform:
    scaleX(-1);
}


/* 線尾小菱形 */

.enter-line::after {
  content: "";

  position: absolute;

  top: 50%;
  right: -3px;

  width: 5px;
  height: 5px;

  transform:
    translateY(-50%)
    rotate(45deg);

  border:
    1px solid
    rgba(226, 181, 105, 0.70);

  background:
    rgba(113, 43, 37, 0.30);

  box-shadow:
    0 0 7px
    rgba(229, 174, 91, 0.18);
}



/* =========================================================
   Hover
========================================================= */

.enter-button:hover {
  transform:
    translateY(-3px)
    scale(1.025);

  background:
    transparent !important;

  box-shadow:
    none !important;
}


.enter-button:hover .enter-text {
  color: #fff4d9;

  transform:
    scale(1.055);

  text-shadow:
    0 0 6px rgba(255, 246, 218, 0.82),
    0 0 16px rgba(245, 202, 126, 0.55),
    0 0 34px rgba(172, 63, 46, 0.28);
}


.enter-button:hover .enter-text::before {
  width: 155px;

  opacity: 1;
}


.enter-button:hover .enter-line {
  width: 92px;

  filter:
    brightness(1.35)
    drop-shadow(
      0 0 5px
      rgba(241, 194, 111, 0.42)
    );
}



/* =========================================================
   點擊
========================================================= */

.enter-button:active {
  transform:
    translateY(0)
    scale(0.97);
}



/* =========================================================
   平常的文字呼吸
========================================================= */

@keyframes enterWordBreath {

  0%,
  100% {
    filter:
      brightness(0.94);
  }

  50% {
    filter:
      brightness(1.18);
  }

}
/* =========================================================
   入京｜頁面轉場
========================================================= */

body {
  transition:
    opacity 0.8s ease,
    background 0.8s ease;
}


body.leaving-entry {
  opacity: 0;
  background: #000;
}



/* =========================================================
   MAIN PAGE｜第二頁
========================================================= */

.main-page {
  margin: 0;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(63, 76, 105, 0.16),
      transparent 42%
    ),
    #060a11;

  color: #e7e3da;
}


.main-entry {
  position: relative;

  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 100px 8vw;

  overflow: hidden;
}


.main-entry::before {
  content: "";

  position: absolute;

  inset: 28px;

  border:
    1px solid
    rgba(208, 183, 137, 0.10);

  pointer-events: none;
}


.main-entry-content {
  position: relative;

  z-index: 2;

  width: min(760px, 90vw);

  text-align: center;

  opacity: 0;

  transform:
    translateY(18px);

  animation:
    mainPageEnter
    1.4s
    ease
    forwards;
}


.main-title {
  margin: 18px 0 0;

  font-size:
    clamp(42px, 6vw, 74px);

  font-weight: 400;

  letter-spacing: 14px;

  text-indent: 14px;
}


.main-intro {
  max-width: 620px;

  margin:
    38px auto 0;

  color:
    rgba(222, 215, 203, 0.72);

  font-size: 14px;

  line-height: 2.4;

  letter-spacing: 3px;
}


@keyframes mainPageEnter {

  from {
    opacity: 0;

    transform:
      translateY(18px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}
/* =========================================================
   入京｜第一頁退場
========================================================= */

body.leaving-entry {
  overflow: hidden;
}


/* Logo 在入京瞬間亮起 */

body.leaving-entry .logo-wrap {
  animation:
    entryLogoFlash
    0.75s
    cubic-bezier(.2,.7,.2,1)
    forwards !important;
}


@keyframes entryLogoFlash {

  0% {
    transform:
      scale(1);

    filter:
      brightness(1);
  }

  35% {
    transform:
      scale(1.035);

    filter:
      brightness(1.55)
      drop-shadow(
        0 0 18px
        rgba(255, 225, 165, 0.65)
      )
      drop-shadow(
        0 0 45px
        rgba(167, 53, 47, 0.42)
      );
  }

  100% {
    transform:
      scale(1.08);

    filter:
      brightness(0.45);

    opacity: 0;
  }

}



/* =========================================================
   入京瞬間白金閃光
========================================================= */

.entry-flash {
  position: fixed;

  inset: 0;

  z-index: 9000;

  pointer-events: none;

  opacity: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 236, 193, 0.72) 0%,
      rgba(180, 78, 59, 0.28) 18%,
      transparent 48%
    );
}


body.leaving-entry .entry-flash {
  animation:
    entryFlash
    0.75s
    ease
    forwards;
}


@keyframes entryFlash {

  0% {
    opacity: 0;
  }

  32% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
  }

}



/* =========================================================
   花瓣爆散
========================================================= */

.burst-petals {
  position: fixed;

  top: 50%;
  left: 50%;

  width: 1px;
  height: 1px;

  z-index: 9100;

  pointer-events: none;
}


.burst-petal {
  position: absolute;

  top: 0;
  left: 0;

  width: 11px;
  height: 17px;

  opacity: 0;

  border-radius:
    70% 30% 70% 30%;

  background:
    linear-gradient(
      145deg,
      #ffe2e7,
      #d78798 55%,
      #9c4b60
    );

  box-shadow:
    0 0 8px
    rgba(255, 190, 204, 0.22);

  animation:
    burstPetal
    0.95s
    cubic-bezier(.2,.7,.2,1)
    forwards;
}


@keyframes burstPetal {

  0% {
    opacity: 0;

    transform:
      translate(0, 0)
      scale(0.4)
      rotate(0deg);
  }

  12% {
    opacity: 1;
  }

  100% {
    opacity: 0;

    transform:
      translate(
        var(--burst-x),
        var(--burst-y)
      )
      scale(1)
      rotate(
        var(--burst-r)
      );
  }

}



/* =========================================================
   第一頁最後暗下
========================================================= */

body.leaving-entry .entry {
  animation:
    entryDisappear
    0.8s
    ease
    forwards;
}


@keyframes entryDisappear {

  0% {
    filter:
      brightness(1);
  }

  55% {
    filter:
      brightness(0.86);
  }

  100% {
    filter:
      brightness(0.08);

    opacity: 0;
  }

}



/* =========================================================
   第二頁｜宮門
========================================================= */

.gate-transition {
  position: fixed;

  inset: 0;

  z-index: 99999;

  display: none;

  overflow: hidden;

  pointer-events: none;

  background:
    #030407;
}


.gate-transition.is-active {
  display: block;
}



/* 左右兩扇門 */

.gate-panel {
  position: absolute;

  top: 0;

  width: 50.5%;
  height: 100%;

  background:

    linear-gradient(
      90deg,
      rgba(28, 9, 12, 0.98),
      rgba(53, 17, 20, 0.98),
      rgba(15, 8, 11, 0.99)
    ),

    #12090c;

  transition:
    transform
    1.35s
    cubic-bezier(.68,.01,.24,1);

  box-shadow:
    inset 0 0 80px
    rgba(0, 0, 0, 0.82);
}


.gate-left {
  left: 0;

  transform:
    translateX(0);

  border-right:
    1px solid
    rgba(226, 182, 104, 0.78);
}


.gate-right {
  right: 0;

  transform:
    translateX(0);

  border-left:
    1px solid
    rgba(226, 182, 104, 0.78);
}



/* 門上淡金紋 */

.gate-pattern {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 260px;
  height: 260px;

  transform:
    translate(-50%, -50%)
    rotate(45deg);

  border:
    1px solid
    rgba(209, 166, 93, 0.10);

  box-shadow:

    0 0 0 28px
    rgba(209, 166, 93, 0.025),

    0 0 0 56px
    rgba(209, 166, 93, 0.018);
}



/* 中央門縫金光 */

.gate-light {
  position: absolute;

  z-index: 5;

  top: 0;
  left: 50%;

  width: 3px;
  height: 100%;

  transform:
    translateX(-50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(255, 223, 158, 0.85),
      rgba(255, 245, 216, 1),
      rgba(255, 213, 134, 0.82),
      transparent
    );

  box-shadow:

    0 0 12px
    rgba(255, 221, 157, 0.75),

    0 0 40px
    rgba(205, 136, 57, 0.34);

  animation:
    gateLightPulse
    0.65s
    ease-in-out
    infinite alternate;

  transition:
    opacity 0.65s ease;
}


@keyframes gateLightPulse {

  from {
    opacity: 0.6;
  }

  to {
    opacity: 1;
  }

}



/* =========================================================
   門正式打開
========================================================= */

.gate-transition.is-open
.gate-left {
  transform:
    translateX(-102%);
}


.gate-transition.is-open
.gate-right {
  transform:
    translateX(102%);
}


.gate-transition.is-open
.gate-light {
  opacity: 0;
}



/* =========================================================
   第二頁文字在門後慢慢出現
========================================================= */

.main-page.from-entry
.main-entry-content {
  opacity: 0;

  animation:
    mainAfterGate
    1.25s
    ease
    0.58s
    forwards !important;
}


@keyframes mainAfterGate {

  from {
    opacity: 0;

    transform:
      translateY(20px)
      scale(0.98);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }

}
/* =========================================================
   MAIN PAGE｜第二頁基礎
========================================================= */

.main-page {
  margin: 0;

  background: #05080e;

  overflow-x: hidden;
}



/* =========================================================
   01｜曜辰京錄
========================================================= */

.capital-section {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 800px;

  overflow: hidden;

  background: #05080e;

  color: #ede7dc;
}



/* =========================================================
   背景景色
========================================================= */

.capital-bg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  z-index: 1;

  filter:
    brightness(0.92)
    saturate(1)
    contrast(1.03);

  transform:
    scale(1.015);

  animation:
    capitalReveal
    2s
    cubic-bezier(.2,.7,.2,1)
    forwards;
}


@keyframes capitalReveal {

  from {
    opacity: 0;

    filter:
      brightness(0.35)
      saturate(0.75);

    transform:
      scale(1.06);
  }

  to {
    opacity: 1;

    filter:
      brightness(0.92)
      saturate(1)
      contrast(1.03);

    transform:
      scale(1.015);
  }

}



/* =========================================================
   雲霧
========================================================= */

.capital-cloud {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  pointer-events: none;
}


.capital-cloud-back {
  z-index: 2;

  opacity: 0.28;

  transform:
    scale(1.08);

  animation:
    capitalCloudBack
    24s
    ease-in-out
    infinite;
}


.capital-cloud-front {
  z-index: 4;

  opacity: 0.16;

  transform:
    scale(1.1);

  animation:
    capitalCloudFront
    17s
    ease-in-out
    infinite;
}


@keyframes capitalCloudBack {

  0%,
  100% {
    transform:
      translateX(-1.5%)
      scale(1.08);
  }

  50% {
    transform:
      translateX(1.5%)
      scale(1.08);
  }

}


@keyframes capitalCloudFront {

  0%,
  100% {
    transform:
      translateX(2%)
      scale(1.1);
  }

  50% {
    transform:
      translateX(-2%)
      scale(1.1);
  }

}



/* =========================================================
   閱讀暗層
========================================================= */

.capital-shade {
  position: absolute;

  inset: 0;

  z-index: 5;

  pointer-events: none;

  background:

    /* 左側保護文字，中央開始快速退掉 */
    linear-gradient(
      90deg,
      rgba(3, 6, 11, 0.76) 0%,
      rgba(3, 6, 11, 0.54) 22%,
      rgba(3, 6, 11, 0.20) 38%,
      rgba(3, 6, 11, 0.06) 56%,
      rgba(3, 6, 11, 0.03) 72%,
      rgba(3, 6, 11, 0.16) 100%
    ),

    /* 上下稍微收暗，保留電影感 */
    linear-gradient(
      180deg,
      rgba(3, 6, 11, 0.10) 0%,
      transparent 46%,
      rgba(3, 6, 11, 0.30) 100%
    );
}



/* =========================================================
   左上章節標
========================================================= */

.capital-chapter {
  position: absolute;

  z-index: 10;

  top: 7.5%;
  left: 6%;

  display: flex;
  align-items: center;

  gap: 15px;

  opacity: 0;

  animation:
    capitalTextIn
    1.2s
    ease
    0.55s
    forwards;
}


.capital-number {
  color:
    rgba(193, 145, 78, 0.90);

  font-size: 11px;

  letter-spacing: 2px;
}


.capital-chapter-line {
  width: 40px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(196, 153, 87, 0.78),
      transparent
    );
}


.capital-chapter-name {
  color:
    rgba(220, 213, 201, 0.48);

  font-size: 9px;

  letter-spacing: 5px;
}



/* =========================================================
   主文案
========================================================= */

.capital-copy {
  position: absolute;

  z-index: 10;

  top: 50%;
  left: 5.5%;

  width:
    min(520px, 38vw);

  transform:
    translateY(-48%);

  opacity: 0;

  animation:
    capitalCopyIn
    1.35s
    cubic-bezier(.2,.7,.2,1)
    0.72s
    forwards;
}


.capital-kicker {
  margin: 0 0 14px;

  color:
    rgba(199, 153, 86, 0.85);

  font-size: 12px;

  letter-spacing: 8px;
}


.capital-title {
  margin: 0;

  font-size:
    clamp(46px, 5.2vw, 82px);

  font-weight: 400;

  line-height: 1;

  letter-spacing: 14px;

  text-indent: 14px;

  color: #f0ebe2;

  text-shadow:
    0 0 24px
    rgba(185, 134, 68, 0.08);
}


.capital-title-line {
  width: 190px;
  height: 1px;

  margin:
    28px 0 30px;

  background:
    linear-gradient(
      90deg,
      rgba(212, 169, 98, 0.76),
      rgba(212, 169, 98, 0.12),
      transparent
    );
}


.capital-lead {
  margin:
    0 0 24px;

  color:
    rgba(235, 225, 209, 0.92);

  font-size: 16px;

  line-height: 2;

  letter-spacing: 3px;
}


.capital-text {
  margin:
    0 0 15px;

  color:
    rgba(205, 202, 195, 0.65);

  font-size: 13px;

  line-height: 2.15;

  letter-spacing: 2px;
}


@keyframes capitalCopyIn {

  from {
    opacity: 0;

    transform:
      translateY(-44%)
      translateX(-20px);
  }

  to {
    opacity: 1;

    transform:
      translateY(-48%)
      translateX(0);
  }

}


@keyframes capitalTextIn {

  from {
    opacity: 0;

    transform:
      translateY(8px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}



/* =========================================================
   右下世界資料
========================================================= */

.capital-facts {
  position: absolute;

  z-index: 10;

  right: 9%;
  bottom: 9%;

  display: grid;

  grid-template-columns:
    repeat(2, 145px);

  gap:
    18px 28px;

  opacity: 0;

  animation:
    capitalTextIn
    1.2s
    ease
    1s
    forwards;
}


.capital-fact {
  position: relative;

  padding-top: 12px;

  border-top:
    1px solid
    rgba(195, 157, 94, 0.22);
}


.fact-en {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(196, 157, 95, 0.55);

  font-size: 8px;

  letter-spacing: 3px;
}


.capital-fact strong {
  color:
    rgba(230, 224, 213, 0.82);

  font-size: 13px;

  font-weight: 400;

  letter-spacing: 4px;
}



/* =========================================================
   SCROLL
========================================================= */

.capital-scroll {
  position: absolute;

  z-index: 10;

  left: 50%;
  bottom: 4%;

  transform:
    translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 9px;

  color:
    rgba(213, 205, 192, 0.34);

  font-size: 7px;

  letter-spacing: 4px;
}


.capital-scroll i {
  display: block;

  width: 1px;
  height: 34px;

  background:
    linear-gradient(
      180deg,
      rgba(207, 165, 98, 0.65),
      transparent
    );

  animation:
    scrollLine
    2.3s
    ease-in-out
    infinite;
}


@keyframes scrollLine {

  0%,
  100% {
    opacity: 0.25;

    transform:
      scaleY(0.65);

    transform-origin: top;
  }

  50% {
    opacity: 1;

    transform:
      scaleY(1);
  }

}



/* =========================================================
   右側章節索引
========================================================= */

.chapter-rail {
  position: fixed;

  z-index: 100;

  top: 50%;
  right: 24px;

  transform:
    translateY(-50%);

  display: flex;
  flex-direction: column;

  gap: 17px;
}


.chapter-dot {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 10px;

  min-width: 72px;

  color:
    rgba(210, 204, 194, 0.28);

  text-decoration: none;
}


.chapter-dot span {
  width: 22px;

  color:
    rgba(199, 157, 90, 0.42);

  font-size: 8px;

  text-align: right;
}


.chapter-dot em {
  width: 0;

  overflow: hidden;

  white-space: nowrap;

  opacity: 0;

  color:
    rgba(226, 216, 199, 0.74);

  font-size: 10px;

  font-style: normal;

  letter-spacing: 3px;

  transition:
    width 0.35s ease,
    opacity 0.35s ease;
}


.chapter-dot::after {
  content: "";

  width: 7px;
  height: 7px;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(185, 143, 79, 0.34);

  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}


.chapter-dot.active::after {
  background:
    rgba(150, 45, 42, 0.72);

  border-color:
    rgba(230, 186, 110, 0.86);

  box-shadow:
    0 0 9px
    rgba(215, 157, 80, 0.28);
}


.chapter-dot.active {
  color:
    rgba(232, 220, 198, 0.86);
}


.chapter-dot:hover em,
.chapter-dot.active em {
  width: 42px;

  opacity: 1;
}


.chapter-dot.disabled {
  cursor: default;
}



/* =========================================================
   手機
========================================================= */

@media (max-width: 800px) {

  .capital-section {
    min-height: 780px;
  }


  .capital-shade {
    background:

      linear-gradient(
        180deg,
        rgba(3, 6, 11, 0.40),
        rgba(3, 6, 11, 0.72) 50%,
        rgba(3, 6, 11, 0.88)
      );
  }


  .capital-chapter {
    top: 7%;
    left: 7%;
  }


  .capital-copy {
    top: auto;
    right: 8%;
    bottom: 18%;
    left: 8%;

    width: auto;

    transform: none;
  }


  .capital-title {
    font-size: 46px;
  }


  .capital-text {
    font-size: 12px;
  }


  .capital-facts {
    display: none;
  }


  .chapter-rail {
    display: none;
  }


  @keyframes capitalCopyIn {

    from {
      opacity: 0;

      transform:
        translateY(18px);
    }

    to {
      opacity: 1;

      transform:
        translateY(0);
    }

  }

}
/* =========================================================
   02｜五姓夜錄
========================================================= */

.houses-section {
  position: relative;

  width: 100%;
  min-height: 100vh;

  padding:
    74px 5vw 54px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(91, 67, 51, 0.13),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      #070a10 0%,
      #0b0d13 48%,
      #05070c 100%
    );

  color: #ece6db;
}


/* 頂部章節資料 */

.houses-heading {
  position: relative;

  z-index: 10;

  width:
    min(820px, 90vw);

  margin:
    0 auto 46px;

  text-align: center;
}


.houses-chapter {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-bottom: 19px;
}


.houses-chapter span {
  color:
    rgba(199, 151, 84, 0.82);

  font-size: 10px;
}


.houses-chapter i {
  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(204, 158, 91, 0.76),
      transparent
    );
}


.houses-chapter em {
  color:
    rgba(210, 204, 194, 0.42);

  font-size: 9px;

  font-style: normal;

  letter-spacing: 5px;
}


.houses-kicker {
  margin:
    0 0 10px;

  color:
    rgba(194, 148, 79, 0.76);

  font-size: 11px;

  letter-spacing: 7px;
}


.houses-title {
  margin: 0;

  font-size:
    clamp(42px, 5vw, 72px);

  font-weight: 400;

  letter-spacing: 14px;

  text-indent: 14px;
}


.houses-intro {
  max-width: 620px;

  margin:
    22px auto 0;

  color:
    rgba(209, 204, 195, 0.58);

  font-size: 12px;

  line-height: 2;

  letter-spacing: 2px;
}



/* =========================================================
   五家長卷
========================================================= */

.houses-track {
  position: relative;

  z-index: 5;

  display: flex;

  width: 100%;
  height:
    min(610px, 65vh);

  min-height: 510px;

  overflow: hidden;

  border-top:
    1px solid
    rgba(193, 155, 96, 0.13);

  border-bottom:
    1px solid
    rgba(193, 155, 96, 0.13);
}



/* =========================================================
   單一家
========================================================= */

.house-panel {
  position: relative;

  flex: 1 1 0;

  min-width: 0;

  overflow: hidden;

  cursor: pointer;

  border-right:
    1px solid
    rgba(205, 172, 115, 0.10);

  transition:
    flex 0.8s
    cubic-bezier(.22,.78,.22,1);
}


.house-panel:last-child {
  border-right: 0;
}


/* 被選中的家族拉開 */

.house-panel.active {
  flex: 2.15 1 0;
}



/* =========================================================
   景物
========================================================= */

.house-art {
  position: absolute;

  inset: -4%;

  width: 108%;
  height: 108%;

  object-fit: cover;

  filter:
    brightness(0.48)
    saturate(0.68);

  transform:
    scale(1.04);

  transition:
    filter 0.9s ease,
    transform 1.2s ease,
    opacity 0.8s ease;
}


/* 九方取左側山景 */

.house-jiufang .house-art {
  object-position: 15% center;
}


/* 伊耆 */

.house-yiqi {
  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(154, 112, 54, 0.13),
      transparent 45%
    ),
    #080b11;
}


.house-yiqi .house-art {
  object-fit: cover;

  opacity: 0.76;
}


/* 墨胎 */

.house-motai {
  background:
    linear-gradient(
      180deg,
      #080c15,
      #10111a
    );
}


.house-motai .house-art {
  object-position:
    center bottom;

  opacity: 0.74;
}


/* 飛廉 */

.house-feilian {
  background: #09080d;
}


.house-feilian .house-art {
  opacity: 0.82;
}


/* 鹿門 */

.house-lumen {
  background:
    linear-gradient(
      180deg,
      #100c11,
      #09090e
    );
}


.house-lumen .house-art {
  opacity: 0.88;
}



/* 展開後景物亮起 */

.house-panel.active .house-art {
  filter:
    brightness(0.91)
    saturate(1.05)
    contrast(1.02);

  transform:
    scale(1);
}



/* =========================================================
   景物暗幕
========================================================= */

.house-veil {
  position: absolute;

  inset: 0;

  z-index: 2;

  background:
    linear-gradient(
      180deg,
      rgba(4, 6, 10, 0.18),
      rgba(4, 6, 10, 0.17) 38%,
      rgba(4, 6, 10, 0.82) 100%
    );

  transition:
    background 0.8s ease;
}


.house-panel.active
.house-veil {
  background:
    linear-gradient(
      180deg,
      rgba(4, 6, 10, 0.05),
      rgba(4, 6, 10, 0.12) 42%,
      rgba(4, 6, 10, 0.78) 100%
    );
}



/* =========================================================
   五家序號
========================================================= */

.house-index {
  position: absolute;

  z-index: 5;

  top: 24px;
  left: 25px;

  color:
    rgba(221, 180, 108, 0.58);

  font-size: 9px;

  letter-spacing: 2px;

  transition:
    color 0.5s ease;
}


.house-panel.active
.house-index {
  color:
    rgba(241, 199, 123, 0.92);
}



/* =========================================================
   家族文字
========================================================= */

.house-content {
  position: absolute;

  z-index: 5;

  right: 28px;
  bottom: 31px;
  left: 28px;

  transform:
    translateY(14px);

  transition:
    transform 0.7s ease;
}


.house-panel.active
.house-content {
  transform:
    translateY(0);
}


.house-en {
  margin:
    0 0 8px;

  color:
    rgba(204, 161, 94, 0.62);

  font-size: 9px;

  letter-spacing: 5px;
}


.house-content h3 {
  margin: 0;

  color:
    rgba(239, 232, 219, 0.86);

  font-size:
    clamp(27px, 2.4vw, 42px);

  font-weight: 400;

  letter-spacing: 8px;

  white-space: nowrap;

  transition:
    color 0.5s ease;
}


.house-panel.active
.house-content h3 {
  color: #fff5e5;
}


.house-role {
  margin:
    9px 0 0;

  color:
    rgba(219, 195, 154, 0.55);

  font-size: 11px;

  letter-spacing: 3px;
}



/* 預設藏起細節 */

.house-desc,
.house-enter {
  opacity: 0;

  transform:
    translateY(12px);

  pointer-events: none;

  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}


/* 展開才出現 */

.house-panel.active
.house-desc,
.house-panel.active
.house-enter {
  opacity: 1;

  transform:
    translateY(0);

  pointer-events: auto;
}


.house-desc {
  max-width: 330px;

  margin:
    18px 0 20px;

  color:
    rgba(226, 219, 207, 0.68);

  font-size: 12px;

  line-height: 2;

  letter-spacing: 2px;
}



/* =========================================================
   閱卷
========================================================= */

.house-enter {
  position: relative;

  padding:
    5px 32px 5px 0;

  border: 0;

  background: transparent;

  color:
    rgba(236, 203, 146, 0.86);

  font-size: 11px;

  letter-spacing: 5px;

  cursor: pointer;
}


.house-enter::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 0;

  width: 22px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(229, 182, 104, 0.88),
      transparent
    );

  transition:
    width 0.35s ease;
}


.house-enter:hover {
  color: #fff0d1;
}


.house-enter:hover::after {
  width: 38px;
}



/* =========================================================
   家族專屬微光
========================================================= */

.house-jiufang.active {
  box-shadow:
    inset 0 -80px 100px
    rgba(51, 62, 72, 0.10);
}


.house-yiqi.active {
  box-shadow:
    inset 0 0 80px
    rgba(173, 128, 56, 0.10);
}


.house-motai.active {
  box-shadow:
    inset 0 0 90px
    rgba(76, 96, 129, 0.12);
}


.house-feilian.active {
  box-shadow:
    inset 0 0 90px
    rgba(115, 34, 37, 0.12);
}


.house-lumen.active {
  box-shadow:
    inset 0 0 90px
    rgba(169, 91, 111, 0.11);
}



/* =========================================================
   底部提示
========================================================= */

.houses-hint {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-top: 28px;

  color:
    rgba(204, 196, 184, 0.28);

  font-size: 7px;

  letter-spacing: 4px;
}


.houses-hint i {
  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(197, 154, 89, 0.40),
      transparent
    );
}



/* =========================================================
   手機
========================================================= */

@media (max-width: 850px) {

  .houses-section {
    padding:
      64px 0 45px;
  }


  .houses-heading {
    padding:
      0 7vw;

    margin-bottom:
      34px;
  }


  .houses-track {
    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type:
      x mandatory;

    height: 590px;

    padding:
      0 7vw;

    border: 0;

    gap: 12px;
  }


  .house-panel,
  .house-panel.active {
    flex:
      0 0 82vw;

    min-width:
      82vw;

    scroll-snap-align:
      center;

    border:
      1px solid
      rgba(201, 166, 107, 0.12);
  }


  .house-art,
  .house-panel.active .house-art {
    filter:
      brightness(0.86)
      saturate(0.95);
  }


  .house-desc,
  .house-enter {
    opacity: 1;

    transform: none;

    pointer-events: auto;
  }


  .houses-title {
    font-size: 42px;
  }

}
/* =========================================================
   02｜五姓夜錄
   五家正式底景＋專屬動態透明層
   2026 FINAL OVERRIDE
========================================================= */


/* =========================================================
   五家長卷尺寸
========================================================= */

.houses-track {
  position: relative;

  z-index: 5;

  display: flex;

  width: 100%;
  height: min(660px, 68vh);
  min-height: 540px;

  overflow: hidden;

  border-top:
    1px solid rgba(198, 159, 94, 0.14);

  border-bottom:
    1px solid rgba(198, 159, 94, 0.14);

  background: #05070c;
}


/* =========================================================
   每一家
========================================================= */

.house-panel {
  position: relative;

  flex: 1 1 0;

  min-width: 0;

  overflow: hidden;

  cursor: pointer;

  isolation: isolate;

  border-right:
    1px solid rgba(202, 166, 105, 0.11);

  transition:
    flex 0.82s cubic-bezier(.22,.78,.22,1);
}


.house-panel:last-child {
  border-right: 0;
}


/* 展開 */

.house-panel.active {
  flex: 2.18 1 0;
}



/* =========================================================
   底景＋透明層
   兩張必須完全同位
========================================================= */

.house-base,
.house-overlay {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  max-width: none;

  object-fit: cover;
  object-position: center;

  pointer-events: none;
}


/* =========================================================
   正式底景
========================================================= */

.house-base {
  z-index: 1;

  filter:
    brightness(0.50)
    saturate(0.72)
    contrast(1.03);

  transform: scale(1.035);

  transition:
    filter 0.85s ease,
    transform 1.1s cubic-bezier(.2,.7,.2,1);
}


/* 展開後亮起 */

.house-panel.active .house-base {
  filter:
    brightness(0.90)
    saturate(1)
    contrast(1.025);

  transform: scale(1);
}



/* =========================================================
   五張直式底圖的取景位置
========================================================= */

/* 九方：
   保留血月＋山門＋瀑布 */

.house-base-jiufang {
  object-position: 50% 44%;
}


/* 伊耆：
   保留中軸長階＋主祭殿 */

.house-base-yiqi {
  object-position: 50% 46%;
}


/* 墨胎：
   月、水面、樓閣都要留下 */

.house-base-motai {
  object-position: 50% 50%;
}


/* 飛廉：
   保留蛛絲、懸橋、赤帶 */

.house-base-feilian {
  object-position: 50% 47%;
}


/* 鹿門：
   花枝、水岸、宴景 */

.house-base-lumen {
  object-position: 50% 49%;
}



/* =========================================================
   共通透明層
========================================================= */

.house-overlay {
  z-index: 2;

  opacity: 0.44;

  object-position: center;

  mix-blend-mode: normal;

  will-change:
    transform,
    opacity,
    filter;
}


/* 展開時透明層更清楚 */

.house-panel.active .house-overlay {
  opacity: 0.72;
}



/* =========================================================
   九方｜雲霧、山嵐、水氣
========================================================= */

.house-overlay-jiufang {
  opacity: 0.36;

  transform:
    translateX(-1%)
    scale(1.03);

  filter:
    brightness(0.95)
    saturate(0.78);

  animation:
    jiufangMist
    15s
    ease-in-out
    infinite;
}


.house-jiufang.active
.house-overlay-jiufang {
  opacity: 0.62;
}


@keyframes jiufangMist {

  0%,
  100% {
    transform:
      translateX(-1.6%)
      translateY(0)
      scale(1.03);

    filter:
      brightness(0.90)
      saturate(0.76);
  }

  50% {
    transform:
      translateX(1.4%)
      translateY(-0.5%)
      scale(1.03);

    filter:
      brightness(1.04)
      saturate(0.84);
  }

}



/* =========================================================
   伊耆｜星象、祭光、天垣
   不要整張漂移
========================================================= */

.house-overlay-yiqi {
  opacity: 0.40;

  transform: scale(1);

  transform-origin: center;

  filter:
    brightness(0.92)
    saturate(0.82);

  animation:
    yiqiRitualGlow
    5.6s
    ease-in-out
    infinite;
}


.house-yiqi.active
.house-overlay-yiqi {
  opacity: 0.72;
}


@keyframes yiqiRitualGlow {

  0%,
  100% {
    opacity: 0.34;

    filter:
      brightness(0.85)
      saturate(0.78)
      drop-shadow(
        0 0 2px
        rgba(224, 183, 107, 0.08)
      );
  }

  50% {
    opacity: 0.62;

    filter:
      brightness(1.20)
      saturate(0.95)
      drop-shadow(
        0 0 10px
        rgba(232, 190, 110, 0.25)
      );
  }

}



/* =========================================================
   墨胎｜水霧、蜃氣、波光
========================================================= */

.house-overlay-motai {
  opacity: 0.38;

  transform:
    translateY(0)
    scale(1.025);

  transform-origin:
    center bottom;

  filter:
    brightness(0.92)
    saturate(0.76);

  animation:
    motaiTide
    8s
    ease-in-out
    infinite;
}


.house-motai.active
.house-overlay-motai {
  opacity: 0.68;
}


@keyframes motaiTide {

  0%,
  100% {
    transform:
      translateX(-0.8%)
      translateY(0.4%)
      scaleX(1.01)
      scaleY(1);

    filter:
      brightness(0.88)
      saturate(0.72);
  }

  50% {
    transform:
      translateX(0.9%)
      translateY(-0.3%)
      scaleX(1.025)
      scaleY(1.008);

    filter:
      brightness(1.12)
      saturate(0.90);
  }

}



/* =========================================================
   飛廉｜蛛絲、赤帶、風痕
========================================================= */

.house-overlay-feilian {
  opacity: 0.43;

  transform:
    translateX(-0.6%)
    skewX(-0.12deg)
    scale(1.02);

  transform-origin:
    center;

  filter:
    brightness(0.86)
    saturate(0.90);

  animation:
    feilianWind
    6.4s
    ease-in-out
    infinite;
}


.house-feilian.active
.house-overlay-feilian {
  opacity: 0.73;
}


@keyframes feilianWind {

  0%,
  100% {
    transform:
      translateX(-0.8%)
      translateY(0)
      skewX(-0.18deg)
      scale(1.02);

    filter:
      brightness(0.84)
      saturate(0.88);
  }

  50% {
    transform:
      translateX(1%)
      translateY(-0.25%)
      skewX(0.22deg)
      scale(1.02);

    filter:
      brightness(1.04)
      saturate(1.05);
  }

}



/* =========================================================
   鹿門｜花枝、花瓣、流風
========================================================= */

.house-overlay-lumen {
  opacity: 0.48;

  transform:
    rotate(-0.10deg)
    translateX(-0.3%)
    scale(1.018);

  transform-origin:
    78% 92%;

  filter:
    brightness(0.92)
    saturate(0.92);

  animation:
    lumenSpring
    7.2s
    ease-in-out
    infinite;
}


.house-lumen.active
.house-overlay-lumen {
  opacity: 0.76;
}


@keyframes lumenSpring {

  0%,
  100% {
    transform:
      rotate(-0.16deg)
      translateX(-0.35%)
      translateY(0)
      scale(1.018);

    filter:
      brightness(0.91)
      saturate(0.90);
  }

  50% {
    transform:
      rotate(0.20deg)
      translateX(0.45%)
      translateY(-0.2%)
      scale(1.018);

    filter:
      brightness(1.06)
      saturate(1.05);
  }

}



/* =========================================================
   五家暗幕
========================================================= */

.house-veil {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(3, 5, 9, 0.12) 0%,
      rgba(3, 5, 9, 0.15) 34%,
      rgba(3, 5, 9, 0.46) 66%,
      rgba(3, 5, 9, 0.90) 100%
    );

  transition:
    background 0.75s ease;
}


/* 展開時不要壓太黑 */

.house-panel.active
.house-veil {
  background:
    linear-gradient(
      180deg,
      rgba(3, 5, 9, 0.03) 0%,
      rgba(3, 5, 9, 0.07) 38%,
      rgba(3, 5, 9, 0.30) 67%,
      rgba(3, 5, 9, 0.80) 100%
    );
}



/* =========================================================
   未展開的其他家族退暗
========================================================= */

.houses-track:hover
.house-panel:not(.active)
.house-base {
  filter:
    brightness(0.40)
    saturate(0.58)
    contrast(1.03);
}



/* =========================================================
   家族序號
========================================================= */

.house-index {
  position: absolute;

  z-index: 6;

  top: 25px;
  left: 27px;

  color:
    rgba(219, 174, 101, 0.54);

  font-size: 9px;

  letter-spacing: 2px;

  transition:
    color 0.4s ease,
    text-shadow 0.4s ease;
}


.house-panel.active
.house-index {
  color:
    rgba(245, 203, 127, 0.94);

  text-shadow:
    0 0 10px
    rgba(219, 158, 74, 0.18);
}



/* =========================================================
   文字區
========================================================= */

.house-content {
  position: absolute;

  z-index: 6;

  right: 28px;
  bottom: 32px;
  left: 28px;

  transform:
    translateY(13px);

  transition:
    transform 0.65s ease;
}


.house-panel.active
.house-content {
  transform:
    translateY(0);
}


.house-en {
  margin:
    0 0 8px;

  color:
    rgba(210, 164, 94, 0.66);

  font-size: 9px;

  letter-spacing: 5px;
}


.house-content h3 {
  margin: 0;

  color:
    rgba(237, 230, 217, 0.84);

  font-size:
    clamp(28px, 2.35vw, 43px);

  font-weight: 400;

  letter-spacing: 8px;

  white-space: nowrap;

  text-shadow:
    0 0 18px
    rgba(0, 0, 0, 0.38);

  transition:
    color 0.45s ease,
    text-shadow 0.45s ease;
}


.house-panel.active
.house-content h3 {
  color: #fff4e2;

  text-shadow:
    0 0 18px
    rgba(210, 157, 81, 0.10);
}


.house-role {
  margin:
    9px 0 0;

  color:
    rgba(222, 198, 156, 0.60);

  font-size: 11px;

  letter-spacing: 3px;
}



/* =========================================================
   詳細文字
========================================================= */

.house-desc,
.house-enter {
  opacity: 0;

  transform:
    translateY(12px);

  pointer-events: none;

  transition:
    opacity 0.5s ease,
    transform 0.55s ease;
}


.house-panel.active
.house-desc,
.house-panel.active
.house-enter {
  opacity: 1;

  transform:
    translateY(0);

  pointer-events: auto;
}


.house-desc {
  max-width: 340px;

  margin:
    18px 0 19px;

  color:
    rgba(229, 221, 208, 0.72);

  font-size: 12px;

  line-height: 2;

  letter-spacing: 2px;

  text-shadow:
    0 1px 10px
    rgba(0, 0, 0, 0.50);
}



/* =========================================================
   閱卷
========================================================= */

.house-enter {
  position: relative;

  padding:
    5px 34px 5px 0;

  border: 0;

  background: transparent;

  color:
    rgba(238, 202, 139, 0.86);

  font-size: 11px;

  letter-spacing: 5px;

  cursor: pointer;

  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}


.house-enter::after {
  content: "";

  position: absolute;

  top: 50%;
  right: 0;

  width: 23px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(233, 188, 111, 0.88),
      transparent
    );

  transition:
    width 0.35s ease;
}


.house-enter:hover {
  color: #fff0d0;

  text-shadow:
    0 0 8px
    rgba(237, 190, 110, 0.30);
}


.house-enter:hover::after {
  width: 40px;
}



/* =========================================================
   五家各自很淡的氣氛色
========================================================= */

.house-jiufang.active {
  box-shadow:
    inset 0 0 100px
    rgba(62, 74, 91, 0.08);
}


.house-yiqi.active {
  box-shadow:
    inset 0 0 100px
    rgba(181, 138, 64, 0.09);
}


.house-motai.active {
  box-shadow:
    inset 0 0 100px
    rgba(75, 93, 137, 0.11);
}


.house-feilian.active {
  box-shadow:
    inset 0 0 100px
    rgba(129, 37, 42, 0.11);
}


.house-lumen.active {
  box-shadow:
    inset 0 0 100px
    rgba(170, 87, 109, 0.10);
}



/* =========================================================
   手機
========================================================= */

@media (max-width: 850px) {

  .houses-track {
    display: flex;

    height: 620px;

    padding:
      0 7vw;

    gap: 12px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type:
      x mandatory;

    border: 0;
  }


  .house-panel,
  .house-panel.active {
    flex:
      0 0 82vw;

    min-width:
      82vw;

    scroll-snap-align:
      center;

    border:
      1px solid
      rgba(200, 164, 104, 0.12);
  }


  .house-base,
  .house-panel.active
  .house-base {
    filter:
      brightness(0.83)
      saturate(0.94)
      contrast(1.02);

    transform:
      scale(1);
  }


  .house-overlay {
    opacity: 0.62;
  }


  .house-desc,
  .house-enter {
    opacity: 1;

    transform: none;

    pointer-events: auto;
  }

}
/* =========================================================
   五家透明層｜加快動畫速度
========================================================= */

/* 九方｜雲霧 */
.house-overlay-jiufang {
  animation-duration: 8s !important;
}


/* 伊耆｜祭光 */
.house-overlay-yiqi {
  animation-duration: 3.8s !important;
}


/* 墨胎｜水霧波光 */
.house-overlay-motai {
  animation-duration: 4.8s !important;
}


/* 飛廉｜蛛絲赤帶 */
.house-overlay-feilian {
  animation-duration: 3.8s !important;
}


/* 鹿門｜花枝流風 */
.house-overlay-lumen {
  animation-duration: 4.5s !important;
}
/* =========================================================

/* =========================================================
   02｜五姓夜錄
   透明外圍邊飾｜正式穩定版
   houses-border-overlay.png
========================================================= */

/* 02 整區：乾淨夜色底，讓五張家族景窗成為主視覺 */
.houses-section {
  position: relative !important;
  width: 100%;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden !important;

  padding:
    72px 0 56px !important;

  background:
    radial-gradient(
      ellipse at 50% 18%,
      rgba(18, 29, 47, 0.24) 0%,
      rgba(8, 12, 20, 0.90) 42%,
      #04070c 100%
    ) !important;
}

/* 關閉舊版偽元素背景，避免與透明邊飾打架 */
.houses-section::before,
.houses-section::after,
.houses-heading::before,
.houses-heading::after {
  content: none !important;
  display: none !important;
}

/* 舊五圖背景牆不再使用 */
.houses-bg-wall {
  display: none !important;
}

/* 02 的透明邊飾 PNG：完整貼合 section，不裁切 */
.houses-section-bg {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;
  visibility: visible !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;

  object-fit: fill !important;
  object-position: center !important;

  z-index: 1 !important;
  pointer-events: none !important;

  transform: none !important;
}

/* 五家外圍邊飾：退到第三視覺層，不搶五張家族圖 */
.houses-section-border {
  opacity: 0.25 !important;

  filter:
    brightness(0.64)
    saturate(0.70)
    contrast(1.01) !important;

  mix-blend-mode: normal !important;
}

/* 中央閱讀區只做極輕微壓暗，保留乾淨留白 */
.houses-section-bg-shade {
  position: absolute !important;
  inset: 0 !important;

  display: block !important;

  z-index: 2 !important;
  pointer-events: none !important;

  background:
    radial-gradient(
      ellipse at 50% 48%,
      rgba(4, 7, 13, 0.15) 0%,
      rgba(4, 7, 13, 0.08) 36%,
      transparent 66%
    ),
    linear-gradient(
      180deg,
      rgba(4, 7, 12, 0.06) 0%,
      rgba(4, 7, 12, 0.03) 38%,
      rgba(4, 7, 12, 0.14) 100%
    ) !important;
}

/* 標題、五家長卷與底部提示固定在邊飾之上 */
.houses-heading,
.houses-track,
.houses-hint {
  position: relative !important;
  z-index: 5 !important;
}

.houses-heading {
  width: min(980px, 90vw) !important;

  margin:
    0 auto 32px !important;

  padding:
    8px 24px 0 !important;

  text-align: center;
}

.houses-chapter {
  justify-content: center;
  margin-bottom: 18px;
}

.houses-kicker {
  margin: 0 0 18px;
}

.houses-title {
  margin: 0 0 24px;
}

.houses-intro {
  max-width: 760px;
  margin: 0 auto;

  color:
    rgba(231, 223, 209, 0.78);

  line-height: 2.05;

  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.65);
}

/* 五張家族景窗：主視覺 */
.houses-track {
  width: min(1560px, 88vw) !important;
  margin: 0 auto !important;

  background:
    rgba(4, 7, 12, 0.18) !important;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(196, 160, 102, 0.06) !important;

  backdrop-filter: blur(2px);
}

.houses-hint {
  margin-top: 24px !important;
}

/* 手機 */
@media (max-width: 850px) {

  .houses-section {
    padding:
      64px 0 44px !important;
  }

  .houses-section-border {
    opacity: 0.18 !important;

    filter:
      brightness(0.58)
      saturate(0.66)
      contrast(1.01) !important;
  }

  .houses-track {
    width: 100% !important;
  }

  .houses-heading {
    margin:
      0 auto 28px !important;
  }
}
/* =========================================================
   02｜人物閱卷層
   九方塵模板
========================================================= */

.character-dossier {
  position: fixed;

  inset: 0;

  z-index: 500;

  width: 100%;
  height: 100vh;

  overflow: hidden;

  background: #04070c;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}


/* 開啟 */

.character-dossier.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}


/* =========================================================
   背景
========================================================= */

.dossier-bg,
.dossier-atmosphere {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  pointer-events: none;
}


.dossier-bg {
  z-index: 1;

  filter:
    brightness(0.42)
    saturate(0.72)
    contrast(1.06);

  transform:
    scale(1.05);

  transition:
    transform 1.6s cubic-bezier(.2,.7,.2,1),
    filter 1s ease;
}


.character-dossier.is-open
.dossier-bg {
  transform:
    scale(1);

  filter:
    brightness(0.52)
    saturate(0.82)
    contrast(1.05);
}


/* 九方雲層 */

.dossier-atmosphere {
  z-index: 2;

  opacity: 0.42;

  transform:
    scale(1.04);

  animation:
    dossierJiufangMist
    8s
    ease-in-out
    infinite;
}


@keyframes dossierJiufangMist {

  0%,
  100% {
    transform:
      translateX(-1%)
      translateY(0)
      scale(1.04);

    opacity: 0.34;
  }

  50% {
    transform:
      translateX(1%)
      translateY(-0.4%)
      scale(1.04);

    opacity: 0.52;
  }

}


/* =========================================================
   暗層
========================================================= */

.dossier-shade {
  position: absolute;

  inset: 0;

  z-index: 3;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      rgba(2, 5, 10, 0.92) 0%,
      rgba(2, 5, 10, 0.82) 28%,
      rgba(2, 5, 10, 0.30) 52%,
      rgba(2, 5, 10, 0.16) 69%,
      rgba(2, 5, 10, 0.56) 100%
    ),

    linear-gradient(
      180deg,
      rgba(2, 5, 10, 0.16) 0%,
      transparent 54%,
      rgba(2, 5, 10, 0.82) 100%
    );
}


/* =========================================================
   關閉
========================================================= */

.dossier-close {
  position: absolute;

  top: 42px;
  right: 52px;

  z-index: 20;

  width: 46px;
  height: 46px;

  padding: 0;

  border:
    1px solid
    rgba(202, 164, 99, 0.18);

  background:
    rgba(5, 8, 14, 0.28);

  cursor: pointer;

  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    transform 0.35s ease;
}


.dossier-close span {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 18px;
  height: 1px;

  background:
    rgba(231, 205, 157, 0.75);
}


.dossier-close span:first-child {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.dossier-close span:last-child {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


.dossier-close:hover {
  transform:
    rotate(90deg);

  border-color:
    rgba(229, 184, 108, 0.55);

  background:
    rgba(92, 42, 37, 0.22);
}


/* =========================================================
   左側人物資料
========================================================= */

.dossier-copy {
  position: absolute;

  z-index: 10;

  top: 50%;
  left: 7.5vw;

  width:
    min(470px, 31vw);

  transform:
    translateY(-46%);

  opacity: 0;

  transition:
    opacity 0.75s ease 0.18s,
    transform 0.9s cubic-bezier(.2,.75,.2,1) 0.18s;
}


.character-dossier.is-open
.dossier-copy {
  opacity: 1;

  transform:
    translateY(-50%);
}


/* 小章節 */

.dossier-chapter {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 27px;

  color:
    rgba(197, 157, 92, 0.68);

  font-size: 9px;

  letter-spacing: 4px;
}


.dossier-chapter i {
  display: block;

  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(208, 168, 98, 0.65),
      transparent
    );
}


.dossier-chapter em {
  color:
    rgba(205, 205, 198, 0.48);

  font-style: normal;

  letter-spacing: 7px;
}


/* 家族 */

.dossier-house {
  margin:
    0 0 7px;

  color:
    rgba(207, 162, 92, 0.72);

  font-size: 11px;

  letter-spacing: 7px;
}


/* 名字 */

.dossier-name {
  margin: 0;

  color:
    #f0ebe1;

  font-size:
    clamp(54px, 5.8vw, 94px);

  font-weight: 400;

  line-height: 1.05;

  letter-spacing: 13px;

  text-shadow:
    0 2px 28px
    rgba(0, 0, 0, 0.56);
}


/* 稱號 */

.dossier-title {
  margin:
    14px 0 34px;

  color:
    rgba(219, 180, 110, 0.84);

  font-size: 14px;

  letter-spacing: 12px;
}


/* =========================================================
   AGE / HEIGHT / STATUS
========================================================= */

.dossier-meta {
  display: flex;

  gap: 34px;
}


.dossier-meta div {
  position: relative;

  min-width: 72px;
}


.dossier-meta div:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 3px;
  right: -17px;

  width: 1px;
  height: 33px;

  background:
    rgba(191, 155, 96, 0.14);
}


.dossier-meta span {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(183, 151, 98, 0.48);

  font-size: 7px;

  letter-spacing: 3px;
}


.dossier-meta strong {
  display: block;

  color:
    rgba(229, 221, 208, 0.86);

  font-size: 12px;

  font-weight: 400;

  letter-spacing: 3px;

  white-space: nowrap;
}


/* =========================================================
   描述
========================================================= */

.dossier-divider {
  width: 100%;
  height: 1px;

  margin:
    31px 0 25px;

  background:
    linear-gradient(
      90deg,
      rgba(201, 159, 92, 0.34),
      rgba(201, 159, 92, 0.05),
      transparent
    );
}


.dossier-lead {
  margin:
    0 0 14px;

  color:
    rgba(236, 224, 204, 0.92);

  font-size: 15px;

  letter-spacing: 4px;
}


.dossier-text {
  max-width: 430px;

  margin: 0;

  color:
    rgba(213, 207, 196, 0.63);

  font-size: 12px;

  line-height: 2.15;

  letter-spacing: 2px;
}


/* =========================================================
   人物
========================================================= */

.dossier-character-wrap {
  position: absolute;

  z-index: 8;

  right: 14vw;
  bottom: 0;

  width:
    min(630px, 43vw);

  height:
    96vh;

  display: flex;

  align-items: flex-end;
  justify-content: center;

  pointer-events: none;

  opacity: 0;

  transform:
    translateX(55px);

  transition:
    opacity 0.85s ease 0.12s,
    transform 1.1s cubic-bezier(.15,.8,.2,1) 0.12s;
}


.character-dossier.is-open
.dossier-character-wrap {
  opacity: 1;

  transform:
    translateX(0);
}


.dossier-character {
  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position:
    center bottom;

  filter:
    drop-shadow(
      -30px 25px 55px
      rgba(0, 0, 0, 0.62)
    );
}


/* =========================================================
   家紋 / 主紋
========================================================= */

.dossier-symbols {
  position: absolute;

  z-index: 11;

  top: 50%;
  right: 4.2vw;

  display: flex;

  flex-direction: column;

  gap: 32px;

  transform:
    translateY(-42%);

  opacity: 0;

  transition:
    opacity 0.7s ease 0.4s,
    transform 0.85s ease 0.4s;
}


.character-dossier.is-open
.dossier-symbols {
  opacity: 1;

  transform:
    translateY(-50%);
}


.dossier-symbol {
  width: 110px;

  text-align: center;
}


.dossier-symbol-label {
  display: block;

  margin-bottom: 10px;

  color:
    rgba(184, 148, 90, 0.46);

  font-size: 6px;

  letter-spacing: 2px;
}


.dossier-symbol-image {
  width: 84px;
  height: 84px;

  margin:
    0 auto 10px;

  padding: 10px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(201, 161, 97, 0.15);

  background:
    rgba(5, 8, 13, 0.28);

  backdrop-filter:
    blur(7px);
}


.dossier-symbol-image img {
  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  opacity: 0.78;

  filter:
    drop-shadow(
      0 0 10px
      rgba(201, 157, 88, 0.10)
    );
}


.dossier-symbol strong {
  color:
    rgba(220, 209, 190, 0.62);

  font-size: 9px;

  font-weight: 400;

  letter-spacing: 3px;
}


/* =========================================================
   底部
========================================================= */

.dossier-footer {
  position: absolute;

  z-index: 10;

  right: 5vw;
  bottom: 28px;
  left: 5vw;

  display: flex;

  align-items: center;

  gap: 16px;

  color:
    rgba(185, 151, 96, 0.34);

  font-size: 7px;

  letter-spacing: 6px;
}


.dossier-footer i {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(191, 150, 86, 0.22),
      transparent
    );
}


/* =========================================================
   手機
========================================================= */

@media (max-width: 850px) {

  .dossier-copy {
    top: auto;
    right: 7vw;
    bottom: 9vh;
    left: 7vw;

    width: auto;

    transform:
      translateY(20px);
  }


  .character-dossier.is-open
  .dossier-copy {
    transform:
      translateY(0);
  }


  .dossier-character-wrap {
    right: -15vw;

    width: 96vw;
    height: 78vh;

    opacity: 0.42;
  }


  .dossier-name {
    font-size: 50px;
  }


  .dossier-symbols {
    display: none;
  }


  .dossier-close {
    top: 24px;
    right: 24px;
  }


  .dossier-footer {
    display: none;
  }

}
/* =========================================================
   九方人物卷｜家紋 / 主紋可點擊放大
========================================================= */

.dossier-symbol {
  cursor: zoom-in;
}

.dossier-symbol-image {
  position: relative;

  overflow: hidden;

  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}

.dossier-symbol-image img {
  transition:
    transform 0.45s cubic-bezier(.2,.7,.2,1),
    opacity 0.35s ease,
    filter 0.35s ease;
}


/* hover */

.dossier-symbol:hover
.dossier-symbol-image {
  transform:
    translateY(-3px);

  border-color:
    rgba(225, 183, 108, 0.46);

  background:
    rgba(23, 18, 18, 0.46);

  box-shadow:
    0 0 22px
    rgba(202, 151, 77, 0.10);
}


.dossier-symbol:hover
.dossier-symbol-image img {
  transform:
    scale(1.08);

  opacity: 1;

  filter:
    brightness(1.16)
    drop-shadow(
      0 0 12px
      rgba(218, 168, 91, 0.18)
    );
}


/* =========================================================
   放大閱讀層
========================================================= */

.symbol-lightbox {
  position: fixed;

  inset: 0;

  z-index: 1200;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    7vh 8vw;

  background:
    rgba(2, 4, 8, 0.88);

  backdrop-filter:
    blur(14px);

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}


.symbol-lightbox.is-open {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;
}


/* 中央內容 */

.symbol-lightbox-inner {
  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  width:
    min(760px, 86vw);

  max-height:
    88vh;

  padding:
    46px 54px 38px;

  border:
    1px solid
    rgba(205, 165, 100, 0.18);

  background:
    radial-gradient(
      circle at center,
      rgba(31, 27, 25, 0.66),
      rgba(5, 8, 13, 0.94) 68%
    );

  box-shadow:
    0 35px 100px
    rgba(0, 0, 0, 0.72);

  transform:
    translateY(18px)
    scale(0.97);

  transition:
    transform 0.45s
    cubic-bezier(.2,.75,.2,1);
}


.symbol-lightbox.is-open
.symbol-lightbox-inner {
  transform:
    translateY(0)
    scale(1);
}


/* 英文小標 */

.symbol-lightbox-type {
  margin:
    0 0 12px;

  color:
    rgba(189, 149, 88, 0.54);

  font-size:
    8px;

  letter-spacing:
    6px;
}


/* 中文名稱 */

.symbol-lightbox-title {
  margin:
    0 0 17px;

  color:
    rgba(238, 229, 212, 0.92);

  font-size:
    20px;

  font-weight:
    400;

  letter-spacing:
    8px;
}


/* 放大圖 */

.symbol-lightbox-image {
  display: block;

  width: auto;
  height: auto;

  max-width:
    min(560px, 70vw);

  max-height:
    62vh;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 18px 40px
      rgba(0, 0, 0, 0.52)
    );
}


/* 關閉提示 */

.symbol-lightbox-hint {
  margin-top:
    25px;

  color:
    rgba(183, 174, 157, 0.34);

  font-size:
    7px;

  letter-spacing:
    5px;
}


/* 右上 X */

.symbol-lightbox-close {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 38px;
  height: 38px;

  border:
    1px solid
    rgba(207, 168, 101, 0.20);

  background:
    transparent;

  color:
    rgba(231, 202, 151, 0.74);

  font-size:
    21px;

  font-weight:
    200;

  line-height: 1;

  cursor: pointer;

  transition:
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}


.symbol-lightbox-close:hover {
  color:
    #fff0d2;

  border-color:
    rgba(226, 184, 107, 0.52);

  transform:
    rotate(90deg);
}


/* 手機 */

@media (max-width: 850px) {

  .symbol-lightbox-inner {
    width: 90vw;

    padding:
      42px 25px 30px;
  }

  .symbol-lightbox-image {
    max-width: 78vw;
    max-height: 58vh;
  }

}
/* =========================================================
   九方人物卷｜版面收攏
   左文右人往中央靠
========================================================= */


/* 左側人物資料往右 */

.dossier-copy {
  left: 10.5vw !important;

  width:
    min(490px, 32vw) !important;
}


/* 人物稍微往左 */

.dossier-character-wrap {
  right: 11vw !important;

  width:
    min(650px, 44vw) !important;
}


/* 右側家紋維持原位置 */

.dossier-symbols {
  right: 4.2vw !important;
}
/* =========================================================
   九方人物卷｜最終版面位置強制修正
========================================================= */


/* 左側整組文字，直接往右推 */
.character-dossier .dossier-copy {
  left: 7.5vw !important;

  transform:
    translate(110px, -46%) !important;
}


/* 開啟後也維持右移 */
.character-dossier.is-open .dossier-copy {
  transform:
    translate(110px, -50%) !important;
}


/* 九方塵整體再往左靠一點 */
.character-dossier .dossier-character-wrap {
  right: 14vw !important;

  transform:
    translateX(-70px) !important;
}


/* 開啟後不要又被原動畫拉回去 */
.character-dossier.is-open .dossier-character-wrap {
  transform:
    translateX(-70px) !important;
}


/* 右側家紋保持原位 */
.character-dossier .dossier-symbols {
  right: 4.2vw !important;
}
/* =========================================================
   九方人物卷｜版面第二次收攏
========================================================= */


/* 左側資料明顯往右 */
.character-dossier .dossier-copy {
  left: 7.5vw !important;

  width: min(500px, 33vw) !important;

  transform:
    translate(190px, -46%) !important;
}


.character-dossier.is-open .dossier-copy {
  transform:
    translate(190px, -50%) !important;
}


/* 人物再明顯往左 */
.character-dossier .dossier-character-wrap {
  right: 12vw !important;

  width: min(680px, 45vw) !important;

  transform:
    translateX(-130px) !important;
}


.character-dossier.is-open .dossier-character-wrap {
  transform:
    translateX(-130px) !important;
}


/* 名字稍微縮一點，避免左側太重 */
.character-dossier .dossier-name {
  font-size:
    clamp(52px, 5vw, 84px) !important;
}


/* 右側家紋不動 */
.character-dossier .dossier-symbols {
  right: 4.2vw !important;
}
/* =========================================================
   九方人物卷｜CHARACTER / YOUR ROLE 頁籤
========================================================= */

.dossier-view-tabs {
  position: absolute;

  top: 38px;
  left: 50%;

  z-index: 30;

  display: flex;
  align-items: center;
  gap: 18px;

  transform: translateX(-50%);
}


.dossier-view-tabs > i {
  display: block;

  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(194, 160, 99, .55),
      transparent
    );
}


.dossier-view-tab {
  position: relative;

  display: flex;
  align-items: baseline;
  gap: 9px;

  padding: 8px 4px;

  border: 0;
  outline: 0;

  background: transparent;

  color: rgba(211, 189, 145, .38);

  cursor: pointer;

  transition:
    color .35s ease,
    opacity .35s ease;
}


.dossier-view-tab::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(211, 176, 108, .82),
      transparent
    );

  opacity: 0;

  transform: scaleX(.45);

  transition:
    opacity .35s ease,
    transform .35s ease;
}


.dossier-view-tab span {
  font-size: 10px;
  letter-spacing: .22em;
}


.dossier-view-tab em {
  font-style: normal;

  font-size: 12px;
  letter-spacing: .10em;
}


.dossier-view-tab:hover {
  color: rgba(229, 210, 173, .78);
}


.dossier-view-tab.active {
  color: rgba(237, 218, 178, .96);
}


.dossier-view-tab.active::after {
  opacity: 1;
  transform: scaleX(1);
}



/* =========================================================
   原九方塵頁面｜切換效果
========================================================= */

#jiufangDossier .dossier-copy,
#jiufangDossier .dossier-character-wrap,
#jiufangDossier .dossier-symbols {
  transition:
    opacity .42s ease,
    visibility .42s ease;
}


#jiufangDossier.show-role .dossier-copy,
#jiufangDossier.show-role .dossier-character-wrap,
#jiufangDossier.show-role .dossier-symbols {
  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}



/* =========================================================
   YOUR ROLE｜整頁
========================================================= */

.dossier-role-view {
  position: absolute;

  top: 105px;
  right: 7vw;
  bottom: 65px;
  left: 8vw;

  z-index: 20;

  display: grid;

  grid-template-columns:
    minmax(250px, .82fr)
    minmax(420px, 1.48fr)
    minmax(260px, .82fr);

  align-items: center;

  gap: 3vw;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .45s ease,
    visibility .45s ease;
}


#jiufangDossier.show-role .dossier-role-view {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}



/* =========================================================
   左側｜用戶身份
========================================================= */

.role-copy {
  position: relative;

  max-width: 360px;
}


.role-kicker {
  margin: 0 0 9px;

  font-size: 10px;
  letter-spacing: .27em;

  color: rgba(195, 160, 98, .60);
}


.role-title {
  margin: 0;

  font-size:
    clamp(36px, 3.5vw, 62px);

  font-weight: 400;

  letter-spacing: .08em;

  color: rgba(239, 226, 199, .96);
}


.role-lead {
  margin: 13px 0 26px;

  font-size: 15px;
  letter-spacing: .13em;

  color: rgba(211, 190, 151, .75);
}


.role-data {
  display: grid;

  gap: 16px;

  margin-bottom: 28px;
}


.role-data-item {
  position: relative;

  padding-left: 16px;

  border-left:
    1px solid rgba(192, 157, 94, .34);
}


.role-data-item span {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;
  letter-spacing: .21em;

  color: rgba(188, 158, 105, .50);
}


.role-data-item strong {
  display: inline-block;

  margin-right: 9px;

  font-size: 16px;
  font-weight: 400;

  letter-spacing: .13em;

  color: rgba(239, 225, 197, .91);
}


.role-data-item small {
  font-size: 10px;
  letter-spacing: .10em;

  color: rgba(189, 171, 139, .42);
}


.role-description {
  margin: 0;

  font-size: 12px;
  line-height: 2;

  letter-spacing: .08em;

  color: rgba(211, 201, 180, .58);
}



/* =========================================================
   中央｜雙人立繪
========================================================= */

.role-figure-area {
  position: relative;

  align-self: stretch;

  display: flex;
  flex-direction: column;

  min-width: 0;
}


.role-figure-heading {
  display: flex;

  justify-content: center;
  align-items: baseline;

  gap: 13px;

  height: 28px;
}


.role-figure-heading span {
  font-size: 9px;
  letter-spacing: .24em;

  color: rgba(193, 161, 104, .48);
}


.role-figure-heading em {
  font-style: normal;

  font-size: 10px;
  letter-spacing: .10em;

  color: rgba(208, 195, 170, .34);
}


.role-figure {
  position: relative;

  flex: 1;

  width: 100%;
  min-height: 0;

  overflow: visible;
}


/* 三張完全同位置 */

.role-figure img {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center bottom;

  pointer-events: none;

  user-select: none;
}



/* 基礎：男女都暗 */

.role-figure-base {
  z-index: 1;

  opacity: .94;

  filter:
    brightness(.38)
    saturate(.68)
    contrast(1.06);
}



/* 提亮層 */

.role-figure-light {
  z-index: 2;

  opacity: 0;

  filter:
    brightness(1.08)
    saturate(1.03)
    contrast(1.01)
    drop-shadow(
      0 0 22px
      rgba(205, 174, 112, .12)
    );

  transition:
    opacity .42s ease,
    filter .42s ease;
}


/* 左半：男性 */

.role-figure-light-male {
  clip-path:
    polygon(
      0 0,
      52% 0,
      52% 100%,
      0 100%
    );
}


/* 右半：女性 */

.role-figure-light-female {
  clip-path:
    polygon(
      48% 0,
      100% 0,
      100% 100%,
      48% 100%
    );
}



/* =========================================================
   Hover 感應區
========================================================= */

.role-hover-zone {
  position: absolute;

  top: 0;
  bottom: 0;

  z-index: 8;

  width: 50%;

  padding: 0;

  border: 0;

  outline: 0;

  background: transparent;

  cursor: pointer;
}


.role-hover-male {
  left: 0;
}


.role-hover-female {
  right: 0;
}


.role-hover-zone span,
.role-hover-zone em {
  position: absolute;

  bottom: 6px;

  transition:
    opacity .3s ease,
    transform .3s ease;
}


.role-hover-zone span {
  font-size: 9px;
  letter-spacing: .24em;

  color: rgba(214, 183, 124, .55);
}


.role-hover-zone em {
  bottom: -9px;

  font-style: normal;

  font-size: 9px;
  letter-spacing: .08em;

  color: rgba(206, 194, 170, .26);
}


.role-hover-male span {
  left: 30%;
}


.role-hover-male em {
  left: 28%;
}


.role-hover-female span {
  right: 27%;
}


.role-hover-female em {
  right: 24%;
}



/* 滑男 */

.role-figure:has(.role-hover-male:hover)
.role-figure-light-male,
.role-figure:has(.role-hover-male:focus-visible)
.role-figure-light-male {
  opacity: 1;
}


.role-figure:has(.role-hover-male:hover)
.role-hover-male span {
  opacity: 1;

  transform: translateY(-3px);
}



/* 滑女 */

.role-figure:has(.role-hover-female:hover)
.role-figure-light-female,
.role-figure:has(.role-hover-female:focus-visible)
.role-figure-light-female {
  opacity: 1;
}


.role-figure:has(.role-hover-female:hover)
.role-hover-female span {
  opacity: 1;

  transform: translateY(-3px);
}



/* =========================================================
   右側｜服制說明
========================================================= */

.role-attire {
  position: relative;

  max-width: 350px;

  padding:
    28px 0 26px 27px;

  border-left:
    1px solid rgba(191, 157, 97, .20);
}


.role-attire-head > span {
  display: block;

  margin-bottom: 7px;

  font-size: 9px;
  letter-spacing: .26em;

  color: rgba(192, 158, 97, .52);
}


.role-attire-head h3 {
  margin: 0 0 5px;

  font-size: 28px;
  font-weight: 400;

  letter-spacing: .10em;

  color: rgba(239, 224, 195, .94);
}


.role-attire-head p {
  margin: 0;

  font-size: 10px;
  letter-spacing: .13em;

  color: rgba(208, 191, 158, .40);
}


.role-attire-line {
  width: 100%;
  height: 1px;

  margin: 21px 0;

  background:
    linear-gradient(
      90deg,
      rgba(191, 156, 96, .32),
      transparent
    );
}


.role-attire-meta {
  display: grid;

  gap: 14px;

  margin-bottom: 25px;
}


.role-attire-meta span {
  display: block;

  margin-bottom: 4px;

  font-size: 8px;
  letter-spacing: .20em;

  color: rgba(188, 158, 106, .45);
}


.role-attire-meta strong {
  font-size: 13px;
  font-weight: 400;

  letter-spacing: .11em;

  color: rgba(231, 217, 190, .82);
}


.role-attire-text {
  margin: 0;

  font-size: 11px;
  line-height: 2.05;

  letter-spacing: .065em;

  color: rgba(212, 202, 182, .59);
}


.role-attire-note {
  margin: 19px 0 0;

  padding-left: 11px;

  border-left:
    1px solid rgba(197, 158, 87, .36);

  font-size: 10px;
  line-height: 1.8;

  letter-spacing: .10em;

  color: rgba(207, 177, 119, .67);
}



/* =========================================================
   小螢幕
========================================================= */

@media (max-width: 850px) {

  .dossier-role-view {
    left: 5vw;
    right: 5vw;

    grid-template-columns:
      .85fr
      1.25fr
      .85fr;

    gap: 2vw;
  }

  .role-title {
    font-size: 38px;
  }

  .role-attire {
    padding-left: 18px;
  }

}
/* =========================================================
   YOUR ROLE｜人物背景光暈
   男左 / 女右
========================================================= */

.role-figure {
  isolation: isolate;
}


/* 男性後方光暈 */

.role-figure::before {
  content: "";

  position: absolute;

  left: 3%;
  top: 8%;

  width: 58%;
  height: 82%;

  z-index: 0;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 52% 42%,
      rgba(213, 174, 103, .26) 0%,
      rgba(169, 124, 70, .15) 24%,
      rgba(93, 66, 40, .09) 47%,
      transparent 72%
    );

  filter: blur(26px);

  opacity: .65;

  transform: scale(.96);

  transition:
    opacity .45s ease,
    transform .45s ease,
    filter .45s ease;

  pointer-events: none;
}


/* 女性後方光暈 */

.role-figure::after {
  content: "";

  position: absolute;

  right: 0;
  top: 10%;

  width: 55%;
  height: 80%;

  z-index: 0;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at 48% 40%,
      rgba(232, 200, 144, .24) 0%,
      rgba(184, 143, 88, .14) 25%,
      rgba(105, 75, 45, .08) 48%,
      transparent 73%
    );

  filter: blur(28px);

  opacity: .58;

  transform: scale(.95);

  transition:
    opacity .45s ease,
    transform .45s ease,
    filter .45s ease;

  pointer-events: none;
}


/* 圖片在光暈上 */

.role-figure img {
  z-index: 2;
}


/* hover 感應區最上層 */

.role-hover-zone {
  z-index: 8;
}


/* 滑男時男方光暈更明顯 */

.role-figure:has(.role-hover-male:hover)::before {
  opacity: 1;

  transform: scale(1.05);

  filter: blur(21px);
}


/* 滑女時女方光暈更明顯 */

.role-figure:has(.role-hover-female:hover)::after {
  opacity: 1;

  transform: scale(1.05);

  filter: blur(21px);
}
/* =========================================================
   YOUR ROLE｜男女標示改為明顯側標
========================================================= */

.role-hover-zone span,
.role-hover-zone em {
  bottom: auto !important;
}


/* 英文大標 */

.role-hover-zone span {
  top: 16%;

  font-size: 13px !important;
  font-weight: 500;

  letter-spacing: .30em;

  color: rgba(230, 204, 151, .72);

  text-shadow:
    0 0 18px rgba(209, 168, 95, .18);

  opacity: .68;

  transition:
    opacity .35s ease,
    transform .35s ease,
    color .35s ease;
}


/* 中文 */

.role-hover-zone em {
  top: calc(16% + 27px);

  font-size: 12px !important;

  font-style: normal;

  letter-spacing: .18em;

  color: rgba(224, 214, 194, .46);

  opacity: .72;

  transition:
    opacity .35s ease,
    transform .35s ease;
}


/* 男｜靠左 */

.role-hover-male span {
  left: 7% !important;
}

.role-hover-male em {
  left: 7% !important;
}


/* 女｜靠右 */

.role-hover-female span {
  right: 6% !important;
}

.role-hover-female em {
  right: 6% !important;
}


/* hover 時 */

.role-hover-zone:hover span {
  opacity: 1;

  color: rgba(244, 222, 177, .98);

  transform: translateY(-3px);
}


.role-hover-zone:hover em {
  opacity: .92;

  transform: translateY(-3px);
}
/* =========================================================
   全站可讀性｜小字整體放大
   大標題尺寸不動
========================================================= */


/* 世界觀正文 */

.capital-lead {
  font-size: 17px !important;
  line-height: 1.9 !important;
}

.capital-text {
  font-size: 15px !important;
  line-height: 2 !important;
}


/* 世界資料 */

.fact-en {
  font-size: 11px !important;
}

.capital-fact strong {
  font-size: 16px !important;
}


/* 五姓總介紹 */

.houses-kicker {
  font-size: 13px !important;
}

.houses-intro {
  font-size: 15px !important;
  line-height: 1.9 !important;
}


/* 五家卡片 */

.house-en {
  font-size: 12px !important;
}

.house-role {
  font-size: 15px !important;
}

.house-desc {
  font-size: 14px !important;
  line-height: 1.85 !important;
}

.house-enter {
  font-size: 13px !important;
}


/* 九方人物卷 */

.dossier-house {
  font-size: 13px !important;
}

.dossier-title {
  font-size: 15px !important;
}

.dossier-meta span {
  font-size: 10px !important;
}

.dossier-meta strong {
  font-size: 14px !important;
}

.dossier-lead {
  font-size: 16px !important;
}

.dossier-text {
  font-size: 13px !important;
  line-height: 2 !important;
}


/* 家紋 */

.dossier-symbol-label {
  font-size: 9px !important;
}

.dossier-symbol strong {
  font-size: 12px !important;
}


/* 頁籤 */

.dossier-view-tab span {
  font-size: 11px !important;
}

.dossier-view-tab em {
  font-size: 13px !important;
}


/* YOUR ROLE */

.role-kicker {
  font-size: 11px !important;
}

.role-lead {
  font-size: 16px !important;
}

.role-data-item span {
  font-size: 10px !important;
}

.role-data-item strong {
  font-size: 17px !important;
}

.role-data-item small {
  font-size: 11px !important;
}

.role-description {
  font-size: 13px !important;
  line-height: 2 !important;
}


/* 服制說明 */

.role-attire-head > span {
  font-size: 10px !important;
}

.role-attire-head p {
  font-size: 11px !important;
}

.role-attire-meta span {
  font-size: 9px !important;
}

.role-attire-meta strong {
  font-size: 14px !important;
}

.role-attire-text {
  font-size: 13px !important;
  line-height: 2 !important;
}

.role-attire-note {
  font-size: 11px !important;
}


/* 底部英文 */

.dossier-footer span,
.houses-hint span,
.capital-scroll span {
  font-size: 10px !important;
}
/* =========================================================
   人物卷頁籤｜從頂部移到左側人物資料下方
========================================================= */

#jiufangDossier .dossier-view-tabs {
  top: auto !important;

  left: 10.5vw !important;
  bottom: 8.5vh !important;

  transform: none !important;

  justify-content: flex-start !important;

  gap: 17px !important;
}


/* 中間分隔線 */

#jiufangDossier .dossier-view-tabs > i {
  width: 34px !important;
}


/* 頁籤本身稍微放大 */

#jiufangDossier .dossier-view-tab span {
  font-size: 12px !important;
  letter-spacing: .22em !important;
}


#jiufangDossier .dossier-view-tab em {
  font-size: 14px !important;
  letter-spacing: .10em !important;
}
/* =========================================================
   YOUR ROLE｜三層人物正式版
   雙人暗底 + 男亮 + 女亮
========================================================= */

.role-figure {
  position: relative !important;

  flex: 1;

  width: 100%;
  min-height: 0;

  isolation: isolate;

  overflow: visible;
}


/* =========================================================
   三張圖片
   完全同座標疊在一起
========================================================= */

.role-figure .role-figure-layer {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center bottom !important;

  pointer-events: none !important;

  user-select: none;
}


/* =========================================================
   雙人暗底
========================================================= */

.role-figure-dark {
  z-index: 2;

  opacity: 1;
}


/* =========================================================
   男 / 女亮版
   預設隱藏
========================================================= */

.role-figure-male-lit,
.role-figure-female-lit {
  z-index: 4;

  opacity: 0;

  transition:
    opacity .45s ease,
    filter .45s ease;

  filter:
    brightness(1.05)
    saturate(1.03)
    contrast(1.02)
    drop-shadow(
      0 0 22px
      rgba(218, 179, 105, .16)
    );
}


/* =========================================================
   滑到男性
   只顯示完整男性亮版 PNG
========================================================= */

.role-figure:has(.role-hover-male:hover)
.role-figure-male-lit,
.role-figure:has(.role-hover-male:focus-visible)
.role-figure-male-lit {
  opacity: 1;
}


/* =========================================================
   滑到女性
========================================================= */

.role-figure:has(.role-hover-female:hover)
.role-figure-female-lit,
.role-figure:has(.role-hover-female:focus-visible)
.role-figure-female-lit {
  opacity: 1;
}
/* =========================================================
   YOUR ROLE｜人物後方電影光暈
========================================================= */


/* 男性後方 */

.role-hover-male::before {
  content: "";

  position: absolute;

  z-index: -1;

  left: 8%;
  top: 13%;

  width: 88%;
  height: 70%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(217, 174, 99, .26) 0%,
      rgba(165, 118, 64, .15) 29%,
      rgba(82, 58, 37, .07) 52%,
      transparent 74%
    );

  filter: blur(30px);

  opacity: .35;

  transform: scale(.92);

  transition:
    opacity .45s ease,
    transform .45s ease,
    filter .45s ease;

  pointer-events: none;
}


.role-hover-male:hover::before {
  opacity: .95;

  transform: scale(1.05);

  filter: blur(23px);
}


/* 女性後方 */

.role-hover-female::before {
  content: "";

  position: absolute;

  z-index: -1;

  right: 6%;
  top: 13%;

  width: 88%;
  height: 70%;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(234, 201, 143, .25) 0%,
      rgba(184, 137, 80, .14) 29%,
      rgba(91, 63, 39, .07) 52%,
      transparent 74%
    );

  filter: blur(30px);

  opacity: .32;

  transform: scale(.92);

  transition:
    opacity .45s ease,
    transform .45s ease,
    filter .45s ease;

  pointer-events: none;
}


.role-hover-female:hover::before {
  opacity: .95;

  transform: scale(1.05);

  filter: blur(23px);
}
/* =========================================================
   YOUR ROLE｜男女版本明顯標籤
========================================================= */

.role-hover-zone {
  position: absolute;

  top: 0;
  bottom: 0;

  z-index: 10;

  width: 50%;

  padding: 0;

  border: 0;
  outline: 0;

  background: transparent;

  cursor: pointer;
}


.role-hover-male {
  left: 0;
}


.role-hover-female {
  right: 0;
}


/* 英文 */

.role-hover-zone span {
  position: absolute;

  top: 13% !important;
  bottom: auto !important;

  font-size: 14px !important;
  font-weight: 500;

  letter-spacing: .30em;

  color: rgba(231, 205, 155, .74);

  opacity: .70;

  text-shadow:
    0 0 17px
    rgba(210, 168, 94, .22);

  transition:
    opacity .35s ease,
    transform .35s ease,
    color .35s ease;
}


/* 中文 */

.role-hover-zone em {
  position: absolute;

  top: calc(13% + 30px) !important;
  bottom: auto !important;

  font-size: 13px !important;

  font-style: normal;

  letter-spacing: .15em;

  color: rgba(224, 212, 187, .50);

  opacity: .78;

  transition:
    opacity .35s ease,
    transform .35s ease;
}


/* 男 */

.role-hover-male span,
.role-hover-male em {
  left: 5% !important;
}


/* 女 */

.role-hover-female span,
.role-hover-female em {
  right: 5% !important;
}


/* Hover */

.role-hover-zone:hover span {
  opacity: 1;

  color: rgba(247, 225, 179, .98);

  transform: translateY(-3px);
}


.role-hover-zone:hover em {
  opacity: 1;

  color: rgba(237, 223, 195, .82);

  transform: translateY(-3px);
}
/* =========================================================
   人物卷｜正文敘述可讀性加強
   圖二 YOUR ROLE + 圖三 CHARACTER
========================================================= */


/* -----------------------------------------
   YOUR ROLE｜左側身份敘述
   「你並非九方氏族人……」
----------------------------------------- */

#jiufangDossier .role-description {
  font-size: 16px !important;

  line-height: 2.05 !important;

  letter-spacing: .07em !important;

  color:
    rgba(226, 216, 196, .72) !important;

  max-width: 430px !important;
}


/* -----------------------------------------
   CHARACTER｜九方塵主敘述
   「九方氏現任家主……」
----------------------------------------- */

#jiufangDossier .dossier-text {
  font-size: 16px !important;

  line-height: 2.05 !important;

  letter-spacing: .07em !important;

  color:
    rgba(226, 216, 196, .72) !important;

  max-width: 520px !important;
}


/* -----------------------------------------
   CHARACTER｜上方主句
   「山嶽不語，威勢自成。」
----------------------------------------- */

#jiufangDossier .dossier-lead {
  font-size: 18px !important;

  line-height: 1.75 !important;

  letter-spacing: .11em !important;

  color:
    rgba(241, 229, 204, .93) !important;
}


/* -----------------------------------------
   YOUR ROLE｜副句
   「生於伊耆，與九方締約。」
----------------------------------------- */

#jiufangDossier .role-lead {
  font-size: 17px !important;

  line-height: 1.8 !important;

  letter-spacing: .10em !important;

  color:
    rgba(226, 204, 164, .80) !important;
}
/* =========================================================
   YOUR ROLE｜中央男女標示 + 右側服制文字
   統一提升可讀性
========================================================= */


/* -----------------------------------------
   MALE / FEMALE
----------------------------------------- */

#jiufangDossier .role-hover-zone span {
  font-size: 16px !important;

  font-weight: 500 !important;

  letter-spacing: .24em !important;

  color:
    rgba(235, 211, 165, .86) !important;
}


/* 男性版本 / 女性版本 */

#jiufangDossier .role-hover-zone em {
  font-size: 16px !important;

  line-height: 1.6 !important;

  letter-spacing: .10em !important;

  color:
    rgba(225, 214, 194, .68) !important;
}


/* 英文和中文稍微拉開 */

#jiufangDossier .role-hover-zone em {
  top:
    calc(13% + 34px) !important;
}



/* =========================================================
   右側｜服制資訊
========================================================= */


/* ATTIRE ORIGIN */

#jiufangDossier .role-attire-head > span {
  font-size: 11px !important;
}


/* 伊耆氏服制 */

#jiufangDossier .role-attire-head h3 {
  font-size: 30px !important;
}


/* 服制歸屬 */

#jiufangDossier .role-attire-head p {
  font-size: 13px !important;
}


/* HOUSE / CURRENT SETTING */

#jiufangDossier .role-attire-meta span {
  font-size: 10px !important;
}


/* 伊耆氏 / 九方篇・正式聯姻 */

#jiufangDossier .role-attire-meta strong {
  font-size: 16px !important;

  line-height: 1.7 !important;
}


/* -----------------------------------------
   右側主要敘述
   「此身服飾仍以伊耆氏服制為本……」
----------------------------------------- */

#jiufangDossier .role-attire-text {
  font-size: 16px !important;

  line-height: 2.05 !important;

  letter-spacing: .07em !important;

  color:
    rgba(226, 216, 196, .72) !important;

  max-width: 390px !important;
}


/* -----------------------------------------
   最下面提醒
   「場合調式不代表家族歸屬改變。」
----------------------------------------- */

#jiufangDossier .role-attire-note {
  font-size: 14px !important;

  line-height: 1.9 !important;

  letter-spacing: .08em !important;

  color:
    rgba(214, 185, 127, .78) !important;
}
/* =========================================================
   全站正文可讀性統一
   01 曜辰京錄 + 02 五姓夜錄
========================================================= */


/* =========================================================
   01｜曜辰京錄
========================================================= */


/* 「王族與五大古族共同延續至今的東亞王朝。」 */

.capital-lead {
  font-size: 17px !important;

  line-height: 1.9 !important;

  letter-spacing: .08em !important;

  color:
    rgba(238, 226, 203, .88) !important;
}


/* 下面兩段世界觀正文 */

.capital-text {
  font-size: 16px !important;

  line-height: 2.05 !important;

  letter-spacing: .07em !important;

  color:
    rgba(226, 216, 196, .72) !important;

  max-width: 610px !important;
}



/* =========================================================
   02｜五姓夜錄
========================================================= */


/* 最上方：
   「五家自建國初期與王族並立……」
*/

.houses-intro {
  font-size: 16px !important;

  line-height: 1.95 !important;

  letter-spacing: .07em !important;

  color:
    rgba(230, 218, 196, .78) !important;

  max-width: 760px !important;
}


/* 五家副身份：
   古老權門 / 國巫與祭儀 / 古老異血……
*/

.house-role {
  font-size: 16px !important;

  line-height: 1.7 !important;

  letter-spacing: .08em !important;

  color:
    rgba(221, 197, 153, .74) !important;
}


/* 五家各自的介紹文字 */

.house-desc {
  font-size: 16px !important;

  line-height: 2 !important;

  letter-spacing: .065em !important;

  color:
    rgba(226, 216, 196, .74) !important;
}


/* 閱卷 */

.house-enter {
  font-size: 14px !important;

  letter-spacing: .18em !important;
}



/* =========================================================
   五姓頁上方小副標
========================================================= */

.houses-kicker {
  font-size: 14px !important;

  letter-spacing: .16em !important;
}



/* =========================================================
   01 右下資料也稍微放大
========================================================= */

.capital-fact .fact-en {
  font-size: 11px !important;

  letter-spacing: .22em !important;
}


.capital-fact strong {
  font-size: 17px !important;

  line-height: 1.6 !important;
}



/* =========================================================
   右側章節跳頁導航｜整體放大
========================================================= */

.chapter-rail {
  gap: 14px !important;
}


/* 每一個 01 京錄 / 02 五姓 */

.chapter-rail .chapter-dot {
  min-width: 92px !important;

  min-height: 34px !important;

  padding:
    7px 14px 7px 8px !important;

  column-gap: 10px !important;
}


/* 01 / 02 / 03 ... */

.chapter-rail .chapter-dot > span {
  font-size: 11px !important;

  letter-spacing: .12em !important;

  opacity: .72 !important;
}


/* 京錄 / 五姓 / 異聞 ... */

.chapter-rail .chapter-dot > em {
  font-size: 14px !important;

  letter-spacing: .10em !important;

  font-style: normal !important;
}


/* 可點擊的頁籤 hover */

.chapter-rail a.chapter-dot:hover > em,
.chapter-rail a.chapter-dot.active > em {
  color:
    rgba(239, 221, 184, .96) !important;
}


/* 右側菱形如果是 pseudo-element 做的，
   一起稍微放大 */

.chapter-rail .chapter-dot::before,
.chapter-rail .chapter-dot::after {
  transform:
    scale(1.22) !important;
}



/* =========================================================
   SCROLL / SELECT A HOUSE
   也不要小得看不見
========================================================= */

.capital-scroll span,
.houses-hint span {
  font-size: 11px !important;

  letter-spacing: .32em !important;

  opacity: .62 !important;
}
/* =========================================================
   右側章節導航｜恢復菱形 + 保留放大
========================================================= */

.chapter-rail .chapter-dot::before,
.chapter-rail .chapter-dot::after {
  transform:
    rotate(45deg)
    scale(1.22) !important;
}
/* =========================================================
   右側章節導航｜菱形加強版
========================================================= */

.chapter-rail .chapter-dot::before,
.chapter-rail .chapter-dot::after {
  width: 9px !important;
  height: 9px !important;

  transform:
    rotate(45deg)
    scale(1.15) !important;

  border:
    1px solid rgba(184, 137, 74, .72) !important;
}


/* 目前所在章節 */

.chapter-rail .chapter-dot.active::before,
.chapter-rail .chapter-dot.active::after {
  border-color:
    rgba(221, 168, 91, .95) !important;

  background:
    rgba(142, 48, 28, .92) !important;

  box-shadow:
    0 0 9px rgba(181, 82, 41, .32);
}
/* =========================================================
   右側章節導航｜點擊金光
========================================================= */

.chapter-rail .chapter-dot {
  position: relative;
}


/* 點擊瞬間：文字一起微亮 */

.chapter-rail .chapter-dot.is-gold-click > span,
.chapter-rail .chapter-dot.is-gold-click > em {
  animation:
    chapterTextGoldFlash .72s ease-out;
}


/* 原本菱形：點擊時金色爆亮 */

.chapter-rail .chapter-dot.is-gold-click::before,
.chapter-rail .chapter-dot.is-gold-click::after {
  animation:
    chapterDiamondGoldFlash .72s ease-out !important;
}


/* =========================================================
   菱形金光動畫
========================================================= */

@keyframes chapterDiamondGoldFlash {

  0% {
    transform:
      rotate(45deg)
      scale(1.15);

    border-color:
      rgba(226, 179, 94, .85);

    background:
      rgba(130, 51, 28, .72);

    box-shadow:
      0 0 0 rgba(241, 200, 116, 0);
  }


  18% {
    transform:
      rotate(45deg)
      scale(1.7);

    border-color:
      rgba(255, 231, 172, 1);

    background:
      rgba(245, 198, 108, .95);

    box-shadow:
      0 0 8px rgba(255, 231, 170, .95),
      0 0 18px rgba(236, 184, 91, .82),
      0 0 34px rgba(221, 145, 61, .48);
  }


  45% {
    transform:
      rotate(45deg)
      scale(1.38);

    border-color:
      rgba(246, 208, 137, .95);

    background:
      rgba(187, 113, 46, .72);

    box-shadow:
      0 0 7px rgba(255, 226, 161, .75),
      0 0 21px rgba(230, 171, 82, .48);
  }


  100% {
    transform:
      rotate(45deg)
      scale(1.15);

    box-shadow:
      0 0 0 rgba(0, 0, 0, 0);
  }

}


/* =========================================================
   文字金光
========================================================= */

@keyframes chapterTextGoldFlash {

  0% {
    color:
      rgba(224, 207, 174, .72);

    text-shadow:
      0 0 0 rgba(235, 190, 102, 0);
  }


  22% {
    color:
      rgba(255, 235, 190, 1);

    text-shadow:
      0 0 8px rgba(244, 204, 126, .72),
      0 0 17px rgba(221, 157, 67, .38);
  }


  100% {
    text-shadow:
      0 0 0 rgba(0, 0, 0, 0);
  }

}
/* =========================================================
   五家人物卷｜共用 CHARACTER / YOUR ROLE
========================================================= */


/* 頁籤統一移至左下 */

.character-dossier .dossier-view-tabs {
  top: auto !important;

  left: 10.5vw !important;
  bottom: 8.5vh !important;

  transform: none !important;

  justify-content: flex-start !important;

  gap: 17px !important;
}


.character-dossier .dossier-view-tab span {
  font-size: 12px !important;
}


.character-dossier .dossier-view-tab em {
  font-size: 14px !important;
}



/* CHARACTER → YOUR ROLE 時隱藏男主 */

.character-dossier.show-role .dossier-copy,
.character-dossier.show-role .dossier-character-wrap,
.character-dossier.show-role .dossier-symbols {
  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* 顯示用戶頁 */

.character-dossier.show-role .dossier-role-view {
  opacity: 1 !important;

  visibility: visible !important;

  pointer-events: auto !important;
}



/* =========================================================
   五家正文全部統一可讀尺寸
========================================================= */

.character-dossier .dossier-lead {
  font-size: 18px !important;

  line-height: 1.75 !important;
}


.character-dossier .dossier-text {
  font-size: 16px !important;

  line-height: 2.05 !important;

  letter-spacing: .07em !important;

  color:
    rgba(226, 216, 196, .72) !important;
}


.character-dossier .role-lead {
  font-size: 17px !important;
}


.character-dossier .role-description {
  font-size: 16px !important;

  line-height: 2.05 !important;

  letter-spacing: .07em !important;

  color:
    rgba(226, 216, 196, .72) !important;
}


.character-dossier .role-attire-text {
  font-size: 16px !important;

  line-height: 2.05 !important;

  letter-spacing: .07em !important;

  color:
    rgba(226, 216, 196, .72) !important;
}


.character-dossier .role-attire-note {
  font-size: 14px !important;

  line-height: 1.9 !important;
}



/* =========================================================
   MALE / FEMALE
========================================================= */

.character-dossier .role-hover-zone span {
  font-size: 16px !important;
}


.character-dossier .role-hover-zone em {
  font-size: 16px !important;
}



/* =========================================================
   三層人物
========================================================= */

.character-dossier .role-figure-layer {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: contain !important;
  object-position: center bottom !important;

  pointer-events: none !important;
}


.character-dossier .role-figure-dark {
  z-index: 2;

  opacity: 1;
}


.character-dossier .role-figure-male-lit,
.character-dossier .role-figure-female-lit {
  z-index: 4;

  opacity: 0;

  transition:
    opacity .45s ease,
    filter .45s ease;

  filter:
    brightness(1.05)
    saturate(1.03)
    contrast(1.02)
    drop-shadow(
      0 0 22px
      rgba(218, 179, 105, .16)
    );
}


.character-dossier
.role-figure:has(.role-hover-male:hover)
.role-figure-male-lit {
  opacity: 1;
}


.character-dossier
.role-figure:has(.role-hover-female:hover)
.role-figure-female-lit {
  opacity: 1;
}
/* =========================================================
   人物卷｜關閉狀態強制釋放畫面
========================================================= */

.character-dossier {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}


/* 只有真正開啟時才能接收操作 */

.character-dossier.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}


/* 關閉後 YOUR ROLE 也不能殘留操作層 */

.character-dossier:not(.is-open) .dossier-role-view,
.character-dossier:not(.is-open) .dossier-copy,
.character-dossier:not(.is-open) .dossier-character-wrap,
.character-dossier:not(.is-open) .dossier-symbols,
.character-dossier:not(.is-open) .dossier-view-tabs {
  pointer-events: none !important;
}
/* =========================================================
   人物卷｜關閉狀態強制釋放畫面
========================================================= */

.character-dossier {
  opacity: 0;
  visibility: hidden;
  pointer-events: none !important;
}


/* 只有真正開啟時才能接收操作 */

.character-dossier.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto !important;
}


/* 關閉後 YOUR ROLE 也不能殘留操作層 */

.character-dossier:not(.is-open) .dossier-role-view,
.character-dossier:not(.is-open) .dossier-copy,
.character-dossier:not(.is-open) .dossier-character-wrap,
.character-dossier:not(.is-open) .dossier-symbols,
.character-dossier:not(.is-open) .dossier-view-tabs {
  pointer-events: none !important;
}

/* =========================================================
   03｜京中異聞｜正式背景最終版
   背景退暗・內容優先
========================================================= */

.chronicles-section {
  position: relative;

  min-height: 100vh;

  padding:
    9vh 8vw
    8vh;

  overflow: hidden;

  isolation: isolate;

  background: #04070b;

  color:
    rgba(237, 224, 198, .94);

  scroll-margin-top: 0;
}


/* =========================================================
   背景圖本體
   保留藏廊氣氛，但退到第三視覺層
========================================================= */

.chronicles-section::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    url("assets/images/chronicles-bg.png")
    center center / cover
    no-repeat;

  opacity: .34;

  filter:
    brightness(.52)
    saturate(.68)
    contrast(1.01);

  transform:
    scale(1.015);
}


/* =========================================================
   閱讀暗幕
   左側文字最暗，中間保留長廊，右側分類區收暗
========================================================= */

.chronicles-section::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      rgba(2, 4, 8, .90) 0%,
      rgba(2, 4, 8, .81) 27%,
      rgba(2, 4, 8, .58) 51%,
      rgba(2, 4, 8, .61) 72%,
      rgba(2, 4, 8, .78) 100%
    ),

    linear-gradient(
      180deg,
      rgba(2, 4, 8, .40) 0%,
      rgba(2, 4, 8, .14) 36%,
      rgba(2, 4, 8, .24) 62%,
      rgba(2, 4, 8, .66) 100%
    );
}


/* =========================================================
   原 HTML 的 atmosphere / rings 不再使用
========================================================= */

.chronicles-atmosphere,
.chronicles-rings {
  display: none !important;
}


/* =========================================================
   03 真正內容固定在背景與暗幕之上
========================================================= */

.chronicles-header,
.chronicles-layout {
  position: relative;
  z-index: 2;
}

.chronicles-footer {
  z-index: 2;
}


.chronicles-header {
  position: relative;

  z-index: 2;

  max-width: 780px;

  margin-bottom: 5vh;
}


.chronicles-kicker {
  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 17px;
}


.chronicles-kicker span,
.chronicles-kicker em {
  font-size: 11px;

  letter-spacing: .30em;

  color:
    rgba(193, 157, 96, .65);
}


.chronicles-kicker em {
  font-style: normal;
}


.chronicles-kicker i {
  width: 43px;
  height: 1px;

  background:
    rgba(191, 155, 94, .43);
}


.chronicles-header h2 {
  margin: 0 0 22px;

  font-size:
    clamp(48px, 4vw, 72px);

  font-weight: 400;

  letter-spacing: .13em;

  color:
    rgba(242, 230, 207, .97);
}


.chronicles-header > p {
  margin: 0;

  max-width: 690px;

  font-size: 16px;

  line-height: 2;

  letter-spacing: .07em;

  color:
    rgba(226, 216, 196, .72);
}



/* =========================================================
   MAIN LAYOUT
========================================================= */

.chronicles-layout {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(520px, 1.5fr)
    minmax(310px, .72fr);

  gap: 6vw;

  min-height: 52vh;

  align-items: stretch;
}



/* =========================================================
   左側 DISPLAY
========================================================= */

.chronicle-display {
  position: relative;

  min-height: 500px;

  border-top:
    1px solid rgba(194, 159, 98, .20);

  border-bottom:
    1px solid rgba(194, 159, 98, .12);
}


/* 每個內容頁 */

.chronicle-panel {
  position: absolute;

  inset: 0;

  padding:
    55px 45px
    42px 70px;

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(14px);

  transition:
    opacity .45s ease,
    visibility .45s ease,
    transform .45s ease;
}


.chronicle-panel.active {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);
}



/* 大型背景字 */

.chronicle-seal {
  position: absolute;

  right: 3%;
  top: 50%;

  transform:
    translateY(-50%);

  font-size:
    clamp(180px, 18vw, 320px);

  line-height: 1;

  font-family:
    "Noto Serif TC",
    "Songti TC",
    serif;

  color:
    rgba(207, 174, 111, .035);

  pointer-events: none;

  user-select: none;
}



/* 編號 */

.chronicle-panel-index {
  margin-bottom: 13px;

  font-size: 11px;

  letter-spacing: .28em;

  color:
    rgba(187, 149, 89, .60);
}


.chronicle-en {
  margin: 0 0 7px;

  font-size: 11px;

  letter-spacing: .31em;

  color:
    rgba(194, 158, 99, .55);
}


.chronicle-panel h3 {
  margin: 0;

  font-size:
    clamp(46px, 4.2vw, 70px);

  font-weight: 400;

  letter-spacing: .12em;

  color:
    rgba(239, 226, 201, .96);
}


.chronicle-lead {
  margin:
    13px 0 0;

  font-size: 18px;

  line-height: 1.8;

  letter-spacing: .12em;

  color:
    rgba(225, 201, 157, .80);
}


.chronicle-rule {
  width: 160px;
  height: 1px;

  margin:
    27px 0 25px;

  background:
    linear-gradient(
      90deg,
      rgba(197, 160, 95, .50),
      transparent
    );
}


.chronicle-text {
  max-width: 590px;

  margin: 0;

  font-size: 16px;

  line-height: 2.1;

  letter-spacing: .07em;

  color:
    rgba(225, 216, 198, .72);
}


.chronicle-meta {
  position: absolute;

  left: 70px;
  bottom: 38px;
}


.chronicle-meta span {
  display: block;

  margin-bottom: 6px;

  font-size: 9px;

  letter-spacing: .25em;

  color:
    rgba(186, 151, 93, .45);
}


.chronicle-meta strong {
  font-size: 14px;

  font-weight: 400;

  letter-spacing: .13em;

  color:
    rgba(226, 209, 177, .72);
}



/* =========================================================
   右側分類
========================================================= */

.chronicle-index {
  display: flex;

  flex-direction: column;

  justify-content: center;

  border-left:
    1px solid rgba(188, 153, 91, .15);
}


.chronicle-index-item {
  position: relative;

  display: grid;

  grid-template-columns:
    42px 1fr 58px;

  align-items: center;

  min-height: 72px;

  width: 100%;

  padding:
    9px 0 9px
    27px;

  border: 0;

  border-bottom:
    1px solid rgba(180, 150, 96, .08);

  background: transparent;

  text-align: left;

  color:
    rgba(218, 204, 179, .38);

  cursor: pointer;

  transition:
    color .35s ease,
    background .35s ease,
    padding-left .35s ease;
}


.chronicle-index-item > span {
  font-size: 10px;

  letter-spacing: .18em;

  color:
    rgba(183, 145, 86, .42);
}


.chronicle-index-item div {
  display: flex;

  flex-direction: column;

  gap: 4px;
}


.chronicle-index-item strong {
  font-size: 18px;

  font-weight: 400;

  letter-spacing: .14em;
}


.chronicle-index-item em {
  font-size: 9px;

  font-style: normal;

  letter-spacing: .19em;

  opacity: .45;
}


.chronicle-index-item > i {
  width: 0;
  height: 1px;

  justify-self: end;

  background:
    linear-gradient(
      90deg,
      rgba(207, 166, 94, .8),
      transparent
    );

  transition:
    width .35s ease;
}


.chronicle-index-item:hover,
.chronicle-index-item.active {
  padding-left: 36px;

  color:
    rgba(240, 220, 181, .95);

  background:
    linear-gradient(
      90deg,
      rgba(175, 124, 62, .07),
      transparent 72%
    );
}


.chronicle-index-item.active > span {
  color:
    rgba(213, 168, 91, .90);
}


.chronicle-index-item.active > i {
  width: 52px;
}



/* =========================================================
   底部
========================================================= */

.chronicles-footer {
  position: absolute;

  left: 8vw;
  right: 8vw;
  bottom: 3.3vh;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 18px;
}


.chronicles-footer span {
  font-size: 9px;

  letter-spacing: .32em;

  color:
    rgba(184, 151, 95, .32);
}


.chronicles-footer i {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(188, 151, 90, .20),
      rgba(188, 151, 90, .05)
    );
}



/* =========================================================
   Responsive
========================================================= */

@media (max-width: 850px) {

  .chronicles-section {
    padding:
      9vh 6vw
      9vh;
  }


  .chronicles-layout {
    grid-template-columns:
      1fr;

    gap: 30px;
  }


  .chronicle-index {
    display: grid;

    grid-template-columns:
      repeat(3, 1fr);

    border-left: 0;
  }


  .chronicle-index-item {
    border:
      1px solid rgba(188, 153, 91, .10);
  }


  .chronicle-display {
    min-height: 470px;
  }

}
/* =========================================================
   03｜京中異聞｜背景亮度修正版
   直接貼在 style.css 最底
========================================================= */


/* 背景圖重新拉回可見度 */
.chronicles-section::before {
  opacity: 0.72 !important;

  filter:
    brightness(0.76)
    saturate(0.78)
    contrast(1.02) !important;

  transform:
    scale(1.015) !important;
}


/* 暗幕減輕：
   左側保護文字
   中央保留藏廊
   右側保護選單
*/
.chronicles-section::after {
  background:

    linear-gradient(
      90deg,
      rgba(2, 4, 8, 0.66) 0%,
      rgba(2, 4, 8, 0.52) 25%,
      rgba(2, 4, 8, 0.24) 47%,
      rgba(2, 4, 8, 0.28) 67%,
      rgba(2, 4, 8, 0.48) 100%
    ),

    linear-gradient(
      180deg,
      rgba(2, 4, 8, 0.18) 0%,
      rgba(2, 4, 8, 0.03) 38%,
      rgba(2, 4, 8, 0.08) 64%,
      rgba(2, 4, 8, 0.38) 100%
    ) !important;
}
/* =========================================================
   03｜京中異聞｜背景退後 + 大型異聞字加強
========================================================= */


/* 背景再退一點
   仍然看得到藏廊，但不搶內容 */
.chronicles-section::before {
  opacity: .60 !important;

  filter:
    brightness(.68)
    saturate(.72)
    contrast(1.02) !important;
}


/* =========================================================
   妖 / 精 / 魂 / 血 / 蠱 / 祭
   大型背景字加強
========================================================= */

.chronicle-seal {
  color:
    rgba(211, 174, 108, .115) !important;

  opacity: 1 !important;

  text-shadow:
    0 0 18px rgba(211, 169, 97, .045),
    0 0 42px rgba(155, 105, 54, .025);

  filter:
    brightness(1.08);

  transition:
    color .45s ease,
    opacity .45s ease,
    filter .45s ease;
}


/* 當前正在看的那一卷，
   大字再稍微醒一點 */

.chronicle-panel.active .chronicle-seal {
  color:
    rgba(218, 181, 113, .14) !important;

  filter:
    brightness(1.12);
}
/* =========================================================
   04｜五姓集日
========================================================= */

.calendar-section {
  position: relative;

  min-height: 100vh;

  padding:
    8vh 9vw
    8vh;

  overflow: hidden;

  isolation: isolate;

  color:
    rgba(239, 228, 207, .94);

  background:

    radial-gradient(
      ellipse at 72% 48%,
      rgba(77, 59, 42, .13),
      transparent 38%
    ),

    linear-gradient(
      135deg,
      #05080d 0%,
      #080b11 48%,
      #040609 100%
    );
}



/* =========================================================
   淡淡的曆盤
========================================================= */

.calendar-orbit {
  position: absolute;

  z-index: 0;

  top: 50%;
  right: -11vw;

  width: 700px;
  height: 700px;

  transform:
    translateY(-50%);

  border:
    1px solid
    rgba(192, 157, 94, .05);

  border-radius: 50%;

  pointer-events: none;
}


.calendar-orbit::before,
.calendar-orbit::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  border:
    1px solid
    rgba(192, 157, 94, .045);
}


.calendar-orbit::before {
  inset: 90px;
}


.calendar-orbit::after {
  inset: 205px;
}



/* =========================================================
   HEADER
========================================================= */

.calendar-header {
  position: relative;

  z-index: 2;

  max-width: 760px;

  margin-bottom: 4.5vh;
}


.calendar-kicker {
  display: flex;

  align-items: center;

  gap: 16px;

  margin-bottom: 17px;
}


.calendar-kicker span,
.calendar-kicker em {
  font-size: 11px;

  letter-spacing: .30em;

  color:
    rgba(195, 157, 94, .64);
}


.calendar-kicker em {
  font-style: normal;
}


.calendar-kicker i {
  width: 43px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(203, 161, 94, .60),
      transparent
    );
}


.calendar-header h2 {
  margin:
    0 0 21px;

  font-size:
    clamp(48px, 4vw, 72px);

  font-weight: 400;

  letter-spacing: .13em;

  color:
    rgba(242, 231, 209, .97);
}


.calendar-header > p {
  max-width: 660px;

  margin: 0;

  font-size: 16px;

  line-height: 2;

  letter-spacing: .07em;

  color:
    rgba(226, 216, 196, .72);
}



/* =========================================================
   年份
========================================================= */

.calendar-year {
  position: absolute;

  z-index: 2;

  top: 9vh;
  right: 9vw;

  text-align: right;
}


.calendar-year span,
.calendar-year em {
  display: block;

  font-size: 9px;

  font-style: normal;

  letter-spacing: .30em;

  color:
    rgba(191, 154, 92, .42);
}


.calendar-year strong {
  display: block;

  margin:
    9px 0;

  font-size: 28px;

  font-weight: 400;

  letter-spacing: .16em;

  color:
    rgba(230, 214, 185, .78);
}



/* =========================================================
   時間軸
========================================================= */

.calendar-timeline {
  position: relative;

  z-index: 2;

  width:
    min(1120px, 84vw);

  margin:
    0 auto;

  padding:
    10px 0;
}


/* 中央主線 */

.calendar-timeline::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 186px;

  width: 1px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(197, 158, 94, .42) 8%,
      rgba(197, 158, 94, .25) 88%,
      transparent
    );
}



/* =========================================================
   單一事件
========================================================= */

.calendar-event {
  position: relative;

  display: grid;

  grid-template-columns:
    145px 82px 1fr;

  align-items: center;

  min-height: 94px;

  opacity: .43;

  transition:
    opacity .4s ease,
    transform .4s ease;
}


.calendar-event:hover,
.calendar-event.active {
  opacity: 1;

  transform:
    translateX(5px);
}



/* =========================================================
   日期
========================================================= */

.calendar-date {
  display: grid;

  grid-template-columns:
    30px 52px;

  grid-template-rows:
    auto auto;

  align-items: center;

  padding: 0;

  border: 0;

  background: transparent;

  color:
    rgba(222, 209, 185, .72);

  cursor: pointer;

  text-align: right;
}


.calendar-date > span {
  grid-row:
    1 / span 2;

  align-self: center;

  font-size: 10px;

  letter-spacing: .16em;

  color:
    rgba(192, 153, 91, .52);
}


.calendar-date strong {
  font-size: 30px;

  font-weight: 400;

  line-height: 1;

  letter-spacing: .06em;
}


.calendar-date em {
  margin-top: 4px;

  font-size: 8px;

  font-style: normal;

  letter-spacing: .20em;

  color:
    rgba(186, 157, 108, .38);
}



/* =========================================================
   節點
========================================================= */

.calendar-node {
  position: relative;

  width: 11px;
  height: 11px;

  justify-self: center;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(190, 148, 83, .48);

  background:
    #080b10;

  transition:
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}


.calendar-event.active
.calendar-node,
.calendar-event:hover
.calendar-node {
  transform:
    rotate(45deg)
    scale(1.18);

  border-color:
    rgba(240, 195, 114, .94);

  background:
    rgba(135, 45, 34, .86);

  box-shadow:
    0 0 9px
    rgba(235, 180, 89, .35),
    0 0 24px
    rgba(157, 61, 39, .22);
}



/* =========================================================
   事件內容
========================================================= */

.calendar-event-content {
  position: relative;

  padding:
    17px 26px;

  border-bottom:
    1px solid
    rgba(188, 153, 94, .08);

  transition:
    background .35s ease;
}


.calendar-event.active
.calendar-event-content,
.calendar-event:hover
.calendar-event-content {
  background:
    linear-gradient(
      90deg,
      rgba(147, 99, 49, .08),
      transparent 72%
    );
}


.calendar-event-house {
  margin:
    0 0 5px;

  font-size: 9px;

  letter-spacing: .24em;

  color:
    rgba(193, 155, 91, .50);
}


.calendar-event-content h3 {
  margin:
    0 0 7px;

  font-size: 22px;

  font-weight: 400;

  letter-spacing: .16em;

  color:
    rgba(239, 225, 199, .91);
}


.calendar-event-content > p:last-child {
  max-width: 650px;

  margin: 0;

  font-size: 15px;

  line-height: 1.9;

  letter-spacing: .06em;

  color:
    rgba(218, 208, 189, .58);
}



/* =========================================================
   底部
========================================================= */

.calendar-footer {
  position: relative;

  z-index: 2;

  display: flex;

  align-items: center;

  gap: 18px;

  margin-top: 4vh;

  color:
    rgba(186, 151, 93, .30);
}


.calendar-footer span {
  font-size: 9px;

  letter-spacing: .30em;
}


.calendar-footer i {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(188, 151, 90, .20),
      rgba(188, 151, 90, .04)
    );
}



/* =========================================================
   手機
========================================================= */

@media (max-width: 800px) {

  .calendar-section {
    padding:
      8vh 6vw;
  }


  .calendar-year {
    position: relative;

    top: auto;
    right: auto;

    margin:
      0 0 35px;

    text-align: left;
  }


  .calendar-timeline {
    width: 100%;
  }


  .calendar-timeline::before {
    left: 102px;
  }


  .calendar-event {
    grid-template-columns:
      82px 40px 1fr;
  }


  .calendar-event-content {
    padding:
      18px 12px;
  }


  .calendar-event-content > p:last-child {
    font-size: 14px;
  }

}
/* =========================================================
   04｜五姓集日
   篇章起點 / 婚慶期間 特殊標記
========================================================= */


/* =========================================================
   篇章起點標籤
========================================================= */

.calendar-story-tag {
  display: flex;
  align-items: center;

  gap: 12px;

  margin:
    0 0 8px;
}


.calendar-story-tag span {
  padding:
    4px 8px;

  border:
    1px solid
    rgba(188, 74, 56, .42);

  background:
    rgba(100, 30, 28, .18);

  color:
    rgba(230, 170, 119, .88);

  font-size: 8px;

  letter-spacing: .22em;
}


.calendar-story-tag em {
  color:
    rgba(210, 183, 139, .62);

  font-size: 11px;

  font-style: normal;

  letter-spacing: .10em;
}



/* =========================================================
   同一天同時是公開事件＋篇章起點
========================================================= */

.calendar-event-has-story
.calendar-node {
  border-color:
    rgba(211, 157, 82, .70);
}


.calendar-event-has-story
.calendar-event-content {
  box-shadow:
    inset 2px 0 0
    rgba(137, 55, 39, .18);
}



/* =========================================================
   只有篇章開始
   不是共享公開事件
========================================================= */

.calendar-event-story-only {
  min-height: 70px;

  opacity: .34;
}


.calendar-event-story-only
.calendar-node {
  width: 8px;
  height: 8px;

  border-color:
    rgba(159, 83, 65, .55);

  background:
    rgba(82, 27, 27, .38);
}


.calendar-event-story-only
.calendar-event-content {
  padding-top: 11px;
  padding-bottom: 11px;

  background:
    linear-gradient(
      90deg,
      rgba(92, 35, 34, .08),
      transparent 60%
    );
}


.calendar-event-story-only
.calendar-event-content h3 {
  margin-bottom: 0;

  font-size: 19px;

  color:
    rgba(218, 200, 168, .70);
}


.calendar-event-story-only:hover,
.calendar-event-story-only.active {
  opacity: .90;
}



/* =========================================================
   婚慶持續期間
========================================================= */

.calendar-period {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;

  gap:
    7px 14px;

  margin-top: 15px;

  padding:
    11px 14px;

  border-left:
    1px solid
    rgba(199, 151, 84, .32);

  background:
    linear-gradient(
      90deg,
      rgba(158, 104, 52, .07),
      transparent
    );
}


.calendar-period span {
  font-size: 8px;

  letter-spacing: .20em;

  color:
    rgba(189, 150, 91, .50);
}


.calendar-period strong {
  font-size: 12px;

  font-weight: 400;

  letter-spacing: .11em;

  color:
    rgba(225, 196, 146, .80);
}


.calendar-period em {
  font-size: 13px;

  font-style: normal;

  letter-spacing: .07em;

  color:
    rgba(217, 207, 187, .62);
}
/* =========================================================
   03｜京中異聞｜橫式正式版
========================================================= */

.chronicles-section {
  min-height: 100vh !important;
  height: 100vh;

  padding:
    7vh 8vw
    5vh !important;

  display: flex;
  flex-direction: column;

  box-sizing: border-box;
}


/* =========================================================
   上方標題區縮短
========================================================= */

.chronicles-header {
  flex: 0 0 auto;

  max-width: 760px;

  margin-bottom: 3vh !important;
}


.chronicles-header h2 {
  margin-bottom: 16px !important;
}


.chronicles-header > p {
  max-width: 720px;

  font-size: 16px !important;
  line-height: 1.9 !important;
}



/* =========================================================
   主要區域
   改成上下結構
========================================================= */

.chronicles-layout {
  position: relative;

  flex: 1;

  display: flex !important;
  flex-direction: column;

  gap: 22px !important;

  min-height: 0 !important;
}



/* =========================================================
   異聞內容
========================================================= */

.chronicle-display {
  position: relative;

  flex: 1;

  min-height: 0 !important;

  border-top:
    1px solid rgba(194, 159, 98, .18);

  border-bottom:
    1px solid rgba(194, 159, 98, .14);
}


.chronicle-panel {
  padding:
    4vh 4vw
    3.5vh 4vw !important;
}


/* 大字稍微收一點 */

.chronicle-panel h3 {
  font-size:
    clamp(42px, 3.6vw, 62px) !important;
}


.chronicle-lead {
  font-size: 18px !important;
}


.chronicle-text {
  max-width: 670px !important;

  font-size: 16px !important;
  line-height: 2 !important;
}


/* 分類資料不要壓太下面 */

.chronicle-meta {
  left: 4vw !important;
  bottom: 3vh !important;
}



/* =========================================================
   六個分類｜改成橫排
========================================================= */

.chronicle-index {
  flex: 0 0 auto;

  display: grid !important;

  grid-template-columns:
    repeat(6, 1fr);

  width: 100%;

  border-left: 0 !important;
  border-top:
    1px solid rgba(190, 154, 92, .16);
}


/* 每一格 */

.chronicle-index-item {
  position: relative;

  display: grid !important;

  grid-template-columns:
    34px 1fr !important;

  align-items: center;

  min-height: 74px !important;

  padding:
    12px 16px !important;

  border: 0 !important;

  border-right:
    1px solid rgba(188, 153, 91, .10) !important;

  background:
    rgba(4, 6, 9, .18);

  transition:
    background .35s ease,
    color .35s ease,
    transform .35s ease;
}


/* 最後一格不要右線 */

.chronicle-index-item:last-child {
  border-right: 0 !important;
}


/* 01 02 03 */

.chronicle-index-item > span {
  font-size: 10px !important;

  letter-spacing: .15em;
}


/* 中文 */

.chronicle-index-item strong {
  font-size: 17px !important;

  letter-spacing: .12em;
}


/* 英文 */

.chronicle-index-item em {
  margin-top: 3px;

  font-size: 8px !important;

  letter-spacing: .14em;
}


/* 原本右側線不要 */

.chronicle-index-item > i {
  position: absolute;

  left: 16px;
  right: 16px;
  bottom: 0;

  width: auto !important;
  height: 1px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(220, 174, 95, .85),
      transparent
    );

  transition:
    opacity .35s ease;
}


/* Hover */

.chronicle-index-item:hover {
  padding-left: 16px !important;

  transform:
    translateY(-3px);

  background:
    rgba(147, 100, 49, .08);
}


/* Active */

.chronicle-index-item.active {
  padding-left: 16px !important;

  color:
    rgba(242, 221, 183, .96);

  background:
    linear-gradient(
      180deg,
      rgba(166, 113, 53, .12),
      rgba(166, 113, 53, .03)
    );
}


.chronicle-index-item.active > i {
  opacity: 1;
}



/* =========================================================
   底部頁尾縮小
========================================================= */

.chronicles-footer {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  flex: 0 0 auto;

  margin-top: 16px;
}
/* =========================================================
   03｜京中異聞
   六分類強制橫排最終修正版
========================================================= */


/* 主內容改上下排列 */

#chronicles .chronicles-layout {
  display: flex !important;
  flex-direction: column !important;

  grid-template-columns: none !important;

  gap: 18px !important;

  width: 100% !important;
  min-height: 0 !important;
}


/* 上方內容區 */

#chronicles .chronicle-display {
  position: relative !important;

  width: 100% !important;

  flex: 1 1 auto !important;

  min-height: 390px !important;
}


/* =========================================================
   六個分類
   強制變成底部一整排
========================================================= */

#chronicles .chronicle-index {
  position: relative !important;

  display: grid !important;

  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;

  flex-direction: unset !important;

  justify-content: unset !important;

  align-items: stretch !important;

  width: 100% !important;

  min-width: 0 !important;

  border-left: 0 !important;

  border-top:
    1px solid rgba(190, 154, 92, .20) !important;

  background:
    rgba(3, 5, 8, .26);

  backdrop-filter:
    blur(5px);
}


/* 每個分類格 */

#chronicles .chronicle-index-item {
  position: relative !important;

  display: grid !important;

  grid-template-columns:
    34px minmax(0, 1fr) !important;

  grid-template-rows:
    auto !important;

  align-items: center !important;

  width: auto !important;

  min-width: 0 !important;
  min-height: 78px !important;

  padding:
    12px 16px !important;

  margin: 0 !important;

  border: 0 !important;

  border-right:
    1px solid rgba(188, 153, 91, .12) !important;

  border-bottom: 0 !important;

  background:
    transparent !important;

  transform: none !important;
}


/* 最後一格不需要右線 */

#chronicles
.chronicle-index-item:last-child {
  border-right: 0 !important;
}


/* 01 / 02 / 03 */

#chronicles
.chronicle-index-item > span {
  display: block !important;

  font-size: 11px !important;

  letter-spacing: .14em !important;
}


/* 中文 + 英文容器 */

#chronicles
.chronicle-index-item > div {
  display: flex !important;

  flex-direction: column !important;

  gap: 4px !important;

  min-width: 0 !important;
}


/* 妖異 / 精怪 */

#chronicles
.chronicle-index-item strong {
  font-size: 17px !important;

  font-weight: 400 !important;

  letter-spacing: .12em !important;

  white-space: nowrap;
}


/* ABERRATION */

#chronicles
.chronicle-index-item em {
  font-size: 8px !important;

  letter-spacing: .12em !important;

  white-space: nowrap;

  opacity: .5;
}


/* 原本右邊延伸線
   改成每格底部金線 */

#chronicles
.chronicle-index-item > i {
  position: absolute !important;

  left: 16px !important;
  right: 16px !important;

  bottom: 0 !important;

  width: auto !important;
  height: 1px !important;

  opacity: 0 !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(216, 169, 91, .92),
      transparent
    ) !important;

  transition:
    opacity .35s ease !important;
}


/* hover 不要再往右縮排 */

#chronicles
.chronicle-index-item:hover {
  padding:
    12px 16px !important;

  transform:
    translateY(-3px) !important;

  background:
    rgba(150, 101, 48, .09) !important;
}


/* active */

#chronicles
.chronicle-index-item.active {
  padding:
    12px 16px !important;

  background:
    linear-gradient(
      180deg,
      rgba(177, 124, 61, .13),
      rgba(177, 124, 61, .025)
    ) !important;
}


#chronicles
.chronicle-index-item.active > i {
  opacity: 1 !important;
}
/* =========================================================
   03｜桌機橫排防覆蓋
========================================================= */

@media (min-width: 851px) {

  #chronicles .chronicle-index {
    display: grid !important;

    grid-template-columns:
      repeat(6, minmax(0, 1fr)) !important;

    flex-direction: unset !important;
  }

}
/* =========================================================
   03｜六分類橫式最終版
========================================================= */

#chronicles .chronicle-display {
  width: 100% !important;
  min-height: 390px !important;
}


#chronicles .chronicle-index {
  border-left: 0 !important;

  border-top:
    1px solid rgba(190, 154, 92, .22) !important;

  background:
    rgba(3, 5, 8, .32) !important;

  backdrop-filter:
    blur(5px);
}


#chronicles .chronicle-index-item {
  position: relative !important;

  width: 100% !important;
  min-width: 0 !important;
  min-height: 82px !important;

  margin: 0 !important;

  padding:
    14px 18px !important;

  display: grid !important;

  grid-template-columns:
    32px minmax(0, 1fr) !important;

  align-items: center !important;

  border: 0 !important;

  border-right:
    1px solid rgba(188, 153, 91, .12) !important;

  border-bottom: 0 !important;

  transform: none !important;
}


#chronicles .chronicle-index-item:last-child {
  border-right: 0 !important;
}


#chronicles .chronicle-index-item > span {
  font-size: 11px !important;
}


#chronicles .chronicle-index-item strong {
  font-size: 18px !important;

  white-space: nowrap;
}


#chronicles .chronicle-index-item em {
  font-size: 9px !important;

  white-space: nowrap;
}


#chronicles .chronicle-index-item:hover,
#chronicles .chronicle-index-item.active {
  padding:
    14px 18px !important;

  background:
    linear-gradient(
      180deg,
      rgba(170, 116, 55, .14),
      rgba(170, 116, 55, .025)
    ) !important;
}
/* =========================================================
   04｜五姓集日
   桌機橫向時間軸正式版
========================================================= */

@media (min-width: 851px) {

  /* ---------------------------------------------------------
     整個 04 控制在一個螢幕左右
  --------------------------------------------------------- */

  #calendar.calendar-section {
    min-height: 100vh !important;

    padding:
      7vh 7vw
      6vh !important;

    overflow: hidden !important;

    box-sizing: border-box;
  }


  /* 標題稍微壓縮高度 */

  #calendar .calendar-header {
    margin-bottom: 3vh !important;
  }


  /* ---------------------------------------------------------
     時間軸本體
     改成橫向捲動
  --------------------------------------------------------- */

  #calendar .calendar-timeline {
    position: relative !important;

    display: flex !important;
    flex-direction: row !important;

    align-items: stretch !important;

    gap: 0 !important;

    width: 100% !important;
    max-width: none !important;

    margin:
      2vh 0
      0 !important;

    padding:
      10px 0
      26px !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    scroll-behavior: smooth;

    scrollbar-width: thin;

    scrollbar-color:
      rgba(191, 151, 87, .35)
      rgba(255,255,255,.025);
  }


  /* Chrome / Edge 捲軸 */

  #calendar .calendar-timeline::-webkit-scrollbar {
    height: 5px;
  }

  #calendar .calendar-timeline::-webkit-scrollbar-track {
    background:
      rgba(255, 255, 255, .02);
  }

  #calendar .calendar-timeline::-webkit-scrollbar-thumb {
    background:
      rgba(191, 151, 87, .32);

    border-radius: 999px;
  }


  /* ---------------------------------------------------------
     原本直線
     改成橫向主線
  --------------------------------------------------------- */

  #calendar .calendar-timeline::before {
    content: "";

    position: absolute !important;

    left: 0 !important;
    right: 0 !important;

    top: 93px !important;
    bottom: auto !important;

    width: auto !important;
    height: 1px !important;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(197, 158, 94, .27) 3%,
        rgba(197, 158, 94, .42) 12%,
        rgba(197, 158, 94, .25) 88%,
        transparent
      ) !important;

    pointer-events: none;
  }


  /* ---------------------------------------------------------
     單一事件
     一個事件變成一張直式小卡，
     所有事件左右排列
  --------------------------------------------------------- */

  #calendar .calendar-event {
    position: relative !important;

    flex:
      0 0 330px !important;

    width: 330px !important;
    min-width: 330px !important;

    min-height: 390px !important;

    display: grid !important;

    grid-template-columns:
      1fr !important;

    grid-template-rows:
      72px
      42px
      minmax(245px, 1fr) !important;

    align-items: start !important;

    padding:
      0 18px !important;

    opacity: .43;

    transform: none !important;

    box-sizing: border-box;

    transition:
      opacity .4s ease,
      transform .4s ease,
      background .4s ease;
  }


  /* 每張之間淡淡分隔 */

  #calendar .calendar-event::after {
    content: "";

    position: absolute;

    top: 116px;
    right: 0;
    bottom: 5px;

    width: 1px;

    background:
      linear-gradient(
        180deg,
        rgba(188, 151, 94, .12),
        transparent
      );
  }


  /* Hover 不再往右推，改成微微浮起 */

  #calendar .calendar-event:hover,
  #calendar .calendar-event.active {
    opacity: 1 !important;

    transform:
      translateY(-5px) !important;
  }


  /* ---------------------------------------------------------
     日期
     改到每張卡上方
  --------------------------------------------------------- */

  #calendar .calendar-date {
    grid-column: 1 !important;
    grid-row: 1 !important;

    width: 100% !important;

    display: flex !important;

    align-items: baseline !important;

    justify-content: center !important;

    gap: 10px !important;

    padding:
      8px 0 0 !important;

    text-align: center !important;
  }


  #calendar .calendar-date > span {
    grid-row: auto !important;

    font-size: 11px !important;

    letter-spacing: .16em !important;
  }


  #calendar .calendar-date strong {
    font-size: 34px !important;

    line-height: 1 !important;
  }


  #calendar .calendar-date em {
    margin: 0 !important;

    font-size: 9px !important;
  }


  /* ---------------------------------------------------------
     菱形節點
     放到橫向主線上
  --------------------------------------------------------- */

  #calendar .calendar-node {
    grid-column: 1 !important;
    grid-row: 2 !important;

    align-self: center !important;
    justify-self: center !important;

    margin: 0 !important;

    z-index: 3;
  }


  /* ---------------------------------------------------------
     事件正文
  --------------------------------------------------------- */

  #calendar .calendar-event-content {
    grid-column: 1 !important;
    grid-row: 3 !important;

    width: 100% !important;

    padding:
      22px 14px
      18px !important;

    border-bottom: 0 !important;

    text-align: left;

    box-sizing: border-box;
  }


  #calendar .calendar-event.active
  .calendar-event-content,
  #calendar .calendar-event:hover
  .calendar-event-content {
    background:
      linear-gradient(
        180deg,
        rgba(147, 99, 49, .09),
        rgba(147, 99, 49, .025) 66%,
        transparent
      ) !important;
  }


  /* 家族 / 活動英文 */

  #calendar .calendar-event-house {
    font-size: 10px !important;

    line-height: 1.6 !important;

    letter-spacing: .20em !important;
  }


  /* 活動名稱 */

  #calendar .calendar-event-content h3 {
    margin:
      5px 0 12px !important;

    font-size: 20px !important;

    line-height: 1.55 !important;

    letter-spacing: .10em !important;
  }


  /* 活動說明 */

  #calendar
  .calendar-event-content > p:last-child {
    max-width: none !important;

    font-size: 14px !important;

    line-height: 1.9 !important;

    letter-spacing: .05em !important;
  }


  /* ---------------------------------------------------------
     STORY START
  --------------------------------------------------------- */

  #calendar .calendar-story-tag {
    justify-content: flex-start !important;

    gap: 8px !important;

    margin-bottom: 9px !important;
  }


  #calendar .calendar-story-tag span {
    font-size: 8px !important;
  }


  #calendar .calendar-story-tag em {
    font-size: 11px !important;
  }


  /* ---------------------------------------------------------
     婚慶期間
  --------------------------------------------------------- */

  #calendar .calendar-period {
    display: block !important;

    margin-top: 15px !important;

    padding:
      10px 12px !important;
  }


  #calendar .calendar-period span,
  #calendar .calendar-period strong,
  #calendar .calendar-period em {
    display: block;
  }


  #calendar .calendar-period strong {
    margin:
      5px 0 !important;
  }


  /* ---------------------------------------------------------
     僅篇章起點的事件
     不要因舊 CSS 變矮
  --------------------------------------------------------- */

  #calendar .calendar-event-story-only {
    min-height: 390px !important;
  }


  #calendar
  .calendar-event-story-only
  .calendar-event-content {
    padding:
      22px 14px
      18px !important;
  }


  /* ---------------------------------------------------------
     Footer
  --------------------------------------------------------- */

  #calendar .calendar-footer {
    margin-top:
      2vh !important;
  }

}
/* =========================================================
   02｜人物卷｜紋記階級說明
========================================================= */

.dossier-symbol-note {
  margin:
    8px auto 0;

  max-width: 150px;

  font-size: 11px;

  line-height: 1.75;

  letter-spacing: .08em;

  text-align: center;

  color:
    rgba(205, 188, 158, .52);
}


.dossier-symbol:hover
.dossier-symbol-note {
  color:
    rgba(226, 204, 166, .72);
}
/* =========================================================
   03｜京中異聞｜07 紋印制度
========================================================= */


/* 七格索引 */

#chronicles .chronicle-index {
  grid-template-columns:
    repeat(7, minmax(0, 1fr)) !important;
}


/* ---------------------------------------------------------
   07 紋印頁
--------------------------------------------------------- */

#chronicles
.chronicle-panel-marks {
  padding-top:
    2.5vh !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-rule {
  margin:
    18px 0 17px !important;
}


#chronicles
.mark-system-intro {
  max-width:
    880px !important;

  line-height:
    1.85 !important;
}


/* ---------------------------------------------------------
   族紋 → 承紋 → 主紋
--------------------------------------------------------- */

.mark-system-flow {
  position: relative;

  z-index: 2;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    34px
    minmax(0, 1fr)
    34px
    minmax(0, 1fr);

  align-items: stretch;

  gap: 12px;

  max-width: 940px;

  margin-top: 22px;
}


.mark-system-card {
  position: relative;

  min-height: 142px;

  padding:
    17px 18px;

  border:
    1px solid
    rgba(190, 151, 90, .14);

  background:
    linear-gradient(
      145deg,
      rgba(17, 18, 19, .64),
      rgba(5, 8, 11, .32)
    );
}


.mark-system-card > span {
  display: block;

  margin-bottom: 5px;

  font-size: 9px;

  letter-spacing: .22em;

  color:
    rgba(186, 145, 80, .48);
}


.mark-system-card > em {
  display: block;

  margin-bottom: 4px;

  font-size: 8px;

  font-style: normal;

  letter-spacing: .20em;

  color:
    rgba(199, 163, 103, .50);
}


.mark-system-card > strong {
  display: block;

  margin-bottom: 3px;

  font-size: 22px;

  font-weight: 400;

  letter-spacing: .13em;

  color:
    rgba(239, 223, 194, .93);
}


.mark-system-card > small {
  display: block;

  margin-bottom: 10px;

  font-size: 11px;

  letter-spacing: .08em;

  color:
    rgba(217, 191, 145, .67);
}


.mark-system-card > p {
  margin: 0;

  font-size: 13px;

  line-height: 1.8;

  letter-spacing: .045em;

  color:
    rgba(218, 207, 187, .60);
}


/* ＋ */

.mark-system-arrow {
  display: flex;

  align-items: center;
  justify-content: center;

  font-size: 17px;

  font-style: normal;

  color:
    rgba(198, 154, 87, .44);
}


/* ---------------------------------------------------------
   婚姻規則
--------------------------------------------------------- */

.mark-system-rule-note {
  position: relative;

  max-width: 940px;

  margin-top: 16px;

  padding:
    12px 18px;

  border-left:
    1px solid
    rgba(181, 72, 51, .46);

  background:
    linear-gradient(
      90deg,
      rgba(101, 35, 31, .14),
      transparent 78%
    );
}


.mark-system-rule-note > span {
  display: block;

  margin-bottom: 3px;

  font-size: 8px;

  letter-spacing: .22em;

  color:
    rgba(190, 143, 88, .54);
}


.mark-system-rule-note > strong {
  display: block;

  margin-bottom: 4px;

  font-size: 14px;

  font-weight: 400;

  letter-spacing: .09em;

  color:
    rgba(226, 192, 145, .82);
}


.mark-system-rule-note > p {
  margin: 0;

  font-size: 13px;

  line-height: 1.7;

  letter-spacing: .045em;

  color:
    rgba(220, 210, 191, .60);
}


/* ---------------------------------------------------------
   目前五位階級
--------------------------------------------------------- */

.mark-system-current {
  display: flex;

  align-items: center;

  gap: 18px;

  max-width: 940px;

  margin-top: 11px;
}


.mark-system-current > span {
  flex: 0 0 auto;

  font-size: 8px;

  letter-spacing: .20em;

  color:
    rgba(188, 149, 88, .45);
}


.mark-system-current > p {
  display: flex;

  align-items: center;

  gap: 15px;

  margin: 0;

  font-size: 12px;

  letter-spacing: .07em;

  color:
    rgba(215, 200, 174, .60);
}


.mark-system-current b {
  width: 1px;
  height: 13px;

  background:
    rgba(188, 151, 91, .20);
}
/* =========================================================
   03｜七個分類固定同排
========================================================= */

#chronicles .chronicle-index {
  display: grid !important;
  grid-template-columns:
    repeat(7, minmax(0, 1fr)) !important;
}

#chronicles .chronicle-index-item {
  min-width: 0 !important;
}
/* =========================================================
   04｜五姓集日
   15事件・單畫面 5 × 3 正式版
========================================================= */

@media (min-width: 851px) {

  #calendar.calendar-section {
    height: 100vh !important;
    min-height: 100vh !important;

    padding:
      5vh 7vw
      3.5vh !important;

    box-sizing: border-box;

    overflow: hidden !important;
  }


  /* ---------------------------------------------------------
     頁首縮短
  --------------------------------------------------------- */

  #calendar .calendar-header {
    margin-bottom:
      2.4vh !important;
  }


  #calendar .calendar-header h2 {
    margin-bottom:
      16px !important;
  }


  #calendar .calendar-header > p {
    max-width:
      760px !important;

    line-height:
      1.8 !important;
  }


  /* ---------------------------------------------------------
     15 個事件 → 5 × 3
  --------------------------------------------------------- */

  #calendar .calendar-timeline {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr)) !important;

    grid-template-rows:
      repeat(3, minmax(0, 1fr)) !important;

    gap:
      10px 12px !important;

    width: 100% !important;
    max-width: none !important;

    height:
      min(54vh, 500px) !important;

    margin:
      1.5vh 0 0 !important;

    padding:
      0 !important;

    overflow:
      hidden !important;
  }


  /* 舊的長時間軸線關掉 */

  #calendar .calendar-timeline::before {
    display:
      none !important;
  }


  /* ---------------------------------------------------------
     每個日程縮成一張卡
  --------------------------------------------------------- */

  #calendar .calendar-event {
    position: relative !important;

    display: grid !important;

    grid-template-columns:
      48px 1fr !important;

    grid-template-rows:
      38px 1fr !important;

    width:
      auto !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    height:
      auto !important;

    padding:
      0 !important;

    border:
      1px solid
      rgba(188, 151, 91, .08);

    background:
      rgba(4, 6, 9, .18);

    opacity:
      .56 !important;

    transform:
      none !important;

    overflow:
      hidden;

    box-sizing:
      border-box;

    transition:
      opacity .3s ease,
      border-color .3s ease,
      background .3s ease,
      transform .3s ease;
  }


  #calendar .calendar-event:hover,
  #calendar .calendar-event.active {
    opacity:
      1 !important;

    transform:
      translateY(-2px) !important;

    border-color:
      rgba(202, 159, 89, .24);

    background:
      linear-gradient(
        145deg,
        rgba(116, 72, 37, .13),
        rgba(4, 6, 9, .25)
      );
  }


  /* 舊事件分隔線不要 */

  #calendar .calendar-event::after {
    display:
      none !important;
  }


  /* ---------------------------------------------------------
     日期
  --------------------------------------------------------- */

  #calendar .calendar-date {
    grid-column:
      1 / 3 !important;

    grid-row:
      1 !important;

    display:
      flex !important;

    align-items:
      baseline !important;

    justify-content:
      flex-start !important;

    gap:
      7px !important;

    width:
      auto !important;

    padding:
      8px 12px 5px !important;

    text-align:
      left !important;

    border-bottom:
      1px solid
      rgba(188, 151, 91, .09);
  }


  #calendar .calendar-date > span {
    font-size:
      9px !important;

    letter-spacing:
      .12em !important;
  }


  #calendar .calendar-date strong {
    font-size:
      22px !important;

    line-height:
      1 !important;
  }


  #calendar .calendar-date em {
    margin:
      0 !important;

    font-size:
      7px !important;
  }


  /* ---------------------------------------------------------
     菱形節點
  --------------------------------------------------------- */

  #calendar .calendar-node {
    grid-column:
      1 !important;

    grid-row:
      2 !important;

    align-self:
      start !important;

    justify-self:
      center !important;

    margin-top:
      16px !important;

    transform:
      scale(.78) !important;
  }


  /* ---------------------------------------------------------
     內容
  --------------------------------------------------------- */

  #calendar .calendar-event-content {
    grid-column:
      2 !important;

    grid-row:
      2 !important;

    min-width:
      0 !important;

    padding:
      10px 10px 8px 4px !important;

    border:
      0 !important;

    background:
      transparent !important;

    overflow:
      hidden;
  }


  #calendar .calendar-event-house {
    margin:
      0 0 3px !important;

    font-size:
      8px !important;

    line-height:
      1.4 !important;

    letter-spacing:
      .13em !important;

    white-space:
      nowrap;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


  #calendar .calendar-event-content h3 {
    margin:
      0 0 5px !important;

    font-size:
      14px !important;

    line-height:
      1.45 !important;

    letter-spacing:
      .055em !important;
  }


  /* 說明最多 3 行 */

  #calendar
  .calendar-event-content > p:last-child {
    margin:
      0 !important;

    font-size:
      11px !important;

    line-height:
      1.6 !important;

    letter-spacing:
      .025em !important;

    display:
      -webkit-box !important;

    -webkit-box-orient:
      vertical;

    line-clamp:
  3;

-webkit-line-clamp:
  3;

    overflow:
      hidden !important;
  }


  /* STORY START */

  #calendar .calendar-story-tag {
    margin:
      0 0 5px !important;

    gap:
      5px !important;
  }


  #calendar .calendar-story-tag span {
    font-size:
      7px !important;
  }


  #calendar .calendar-story-tag em {
    font-size:
      8px !important;

    white-space:
      nowrap;

    overflow:
      hidden;

    text-overflow:
      ellipsis;
  }


  /* 婚慶期間 */

  #calendar .calendar-period {
    margin-top:
      6px !important;

    padding:
      5px 7px !important;

    font-size:
      9px !important;

    line-height:
      1.45 !important;
  }


  #calendar .calendar-period span,
  #calendar .calendar-period strong,
  #calendar .calendar-period em {
    display:
      inline !important;
  }


  /* story-only 不再特殊放大 */

  #calendar .calendar-event-story-only {
    min-height:
      0 !important;
  }


  #calendar
  .calendar-event-story-only
  .calendar-event-content {
    padding:
      10px 10px 8px 4px !important;
  }


  /* ---------------------------------------------------------
     關掉橫向捲軸
  --------------------------------------------------------- */

  #calendar .calendar-timeline {
    scrollbar-width:
      none !important;
  }


  #calendar .calendar-timeline::-webkit-scrollbar {
    display:
      none !important;
  }


  /* Footer */

  #calendar .calendar-footer {
    margin-top:
      1.4vh !important;
  }

}
/* =========================================================
   02｜紋記放大視窗｜說明放在大型圖片下面
========================================================= */

/* 舊的小圖說明強制消失 */
.dossier-symbols .dossier-symbol-note {
  display: none !important;
}


/* 大圖稍微留空間給下方說明 */
.symbol-lightbox-image {
  max-height:
    54vh !important;
}


/* 大圖下面的制度說明 */
.symbol-lightbox-note {
  width:
    min(560px, 72vw);

  margin:
    18px auto 0;

  padding-top:
    15px;

  border-top:
    1px solid
    rgba(192, 153, 91, .13);

  text-align:
    center;
}


.symbol-lightbox-note strong {
  display:
    block;

  margin-bottom:
    6px;

  color:
    rgba(226, 199, 151, .84);

  font-size:
    14px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}


.symbol-lightbox-note span {
  display:
    block;

  color:
    rgba(208, 198, 180, .58);

  font-size:
    12px;

  line-height:
    1.8;

  letter-spacing:
    .08em;
}
/* =========================================================
   夜巫京｜02＋03＋04 最終修正版
   直接貼在 style.css 最底
========================================================= */


/* =========================================================
   02｜人物卷｜紋印放大說明
========================================================= */

.symbol-lightbox {
  z-index: 1600 !important;
}

.symbol-lightbox-inner {
  width: min(760px, 88vw) !important;
  max-height: 90vh !important;

  padding:
    40px 48px
    28px !important;

  overflow-y: auto !important;

  box-sizing:
    border-box !important;
}

.symbol-lightbox-image {
  max-width:
    min(520px, 68vw) !important;

  max-height:
    49vh !important;

  margin:
    0 auto !important;
}

.symbol-lightbox-note {
  width:
    min(560px, 72vw);

  margin:
    18px auto 0;

  padding:
    16px 18px 0;

  border-top:
    1px solid
    rgba(191, 151, 88, .18);

  text-align:
    center;

  box-sizing:
    border-box;
}

.symbol-lightbox-note[hidden] {
  display:
    none !important;
}

.symbol-lightbox-rank {
  display:
    block;

  margin-bottom:
    7px;

  color:
    rgba(232, 204, 157, .92);

  font-size:
    14px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}

.symbol-lightbox-structure {
  display:
    block;

  margin-bottom:
    9px;

  color:
    rgba(195, 158, 99, .62);

  font-size:
    11px;

  line-height:
    1.7;

  letter-spacing:
    .10em;
}

.symbol-lightbox-description {
  margin:
    0;

  color:
    rgba(221, 211, 193, .70);

  font-size:
    13px;

  line-height:
    1.85;

  letter-spacing:
    .045em;
}

.symbol-lightbox-hint {
  margin-top:
    18px !important;
}


/* =========================================================
   03｜京中異聞｜紋印頁不被底部分類擋住
========================================================= */

#chronicles .chronicles-layout {
  gap:
    12px !important;
}


/* 主內容區固定高度，
   讓下面七個分類不再壓進內容 */

#chronicles .chronicle-display {
  height:
    398px !important;

  min-height:
    398px !important;

  overflow:
    hidden !important;
}


/* 07 紋印專用壓縮 */

#chronicles .chronicle-panel-marks {
  box-sizing:
    border-box !important;

  height:
    100% !important;

  min-height:
    0 !important;

  padding:
    16px 4vw
    8px !important;

  overflow:
    hidden !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-panel-index {
  margin-bottom:
    3px !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-en {
  margin-bottom:
    5px !important;
}


#chronicles
.chronicle-panel-marks h3 {
  margin:
    0 0 4px !important;

  font-size:
    clamp(
      34px,
      3vw,
      50px
    ) !important;

  line-height:
    1.08 !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-lead {
  margin:
    0 !important;

  font-size:
    15px !important;

  line-height:
    1.55 !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-rule {
  width:
    145px !important;

  margin:
    9px 0
    10px !important;
}


#chronicles
.chronicle-panel-marks
.mark-system-intro {
  max-width:
    920px !important;

  margin:
    0 !important;

  font-size:
    12.5px !important;

  line-height:
    1.65 !important;
}


/* ---------------------------------------------------------
   族紋 → 承紋 → 主紋
--------------------------------------------------------- */

#chronicles .mark-system-flow {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    24px
    minmax(0, 1fr)
    24px
    minmax(0, 1fr) !important;

  align-items:
    stretch !important;

  gap:
    8px !important;

  width:
    min(910px, 74vw) !important;

  max-width:
    910px !important;

  margin:
    10px 0 0 !important;
}


#chronicles .mark-system-card {
  min-height:
    96px !important;

  padding:
    9px 12px !important;

  box-sizing:
    border-box !important;
}


#chronicles
.mark-system-card > span {
  margin-bottom:
    1px !important;

  font-size:
    7px !important;
}


#chronicles
.mark-system-card > em {
  margin-bottom:
    1px !important;

  font-size:
    6.5px !important;
}


#chronicles
.mark-system-card > strong {
  margin-bottom:
    1px !important;

  font-size:
    17px !important;

  line-height:
    1.25 !important;
}


#chronicles
.mark-system-card > small {
  margin-bottom:
    4px !important;

  font-size:
    8px !important;

  line-height:
    1.35 !important;
}


#chronicles
.mark-system-card > p {
  margin:
    0 !important;

  font-size:
    9.5px !important;

  line-height:
    1.5 !important;

  letter-spacing:
    .025em !important;
}


#chronicles .mark-system-arrow {
  font-size:
    14px !important;
}


/* ---------------------------------------------------------
   婚姻規則
--------------------------------------------------------- */

#chronicles
.mark-system-rule-note {
  width:
    min(910px, 74vw) !important;

  max-width:
    910px !important;

  margin:
    8px 0 0 !important;

  padding:
    7px 12px !important;

  box-sizing:
    border-box !important;
}


#chronicles
.mark-system-rule-note > span {
  margin-bottom:
    1px !important;

  font-size:
    6.5px !important;
}


#chronicles
.mark-system-rule-note > strong {
  display:
    inline !important;

  margin:
    0 10px 0 0 !important;

  font-size:
    11px !important;
}


#chronicles
.mark-system-rule-note > p {
  display:
    inline !important;

  margin:
    0 !important;

  font-size:
    9.5px !important;

  line-height:
    1.45 !important;
}


/* ---------------------------------------------------------
   目前持有人
--------------------------------------------------------- */

#chronicles
.mark-system-current {
  width:
    min(910px, 74vw) !important;

  max-width:
    910px !important;

  margin:
    6px 0 0 !important;

  gap:
    10px !important;
}


#chronicles
.mark-system-current > span {
  font-size:
    6.5px !important;
}


#chronicles
.mark-system-current > p {
  gap:
    10px !important;

  font-size:
    9px !important;

  line-height:
    1.45 !important;
}


/* 七格分類永遠壓在內容下面，
   但不覆蓋內容 */

#chronicles .chronicle-index {
  position:
    relative !important;

  z-index:
    8 !important;

  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    ) !important;
}


#chronicles .chronicles-footer {
  z-index:
    9 !important;
}


/* =========================================================
   04｜五姓集日｜背景補足
========================================================= */

#calendar.calendar-section {
  isolation:
    isolate !important;

  background:
    #05070b !important;
}


/* 直接利用目前已有的 calendar-orbit
   改成完整的世界觀背景層 */

#calendar .calendar-orbit {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  z-index:
    0 !important;

  pointer-events:
    none !important;

  opacity:
    1 !important;

  transform:
    none !important;

  animation:
    none !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:

    linear-gradient(
      90deg,
      rgba(4, 6, 10, .88) 0%,
      rgba(4, 6, 10, .70) 24%,
      rgba(4, 6, 10, .54) 52%,
      rgba(4, 6, 10, .76) 100%
    ),

    linear-gradient(
      180deg,
      rgba(3, 5, 9, .62) 0%,
      rgba(3, 5, 9, .32) 48%,
      rgba(3, 5, 9, .82) 100%
    ),

    url(
      "assets/images/calendar-detail-bg.png"
    )
    center 47% /
    cover
    no-repeat !important;
}


/* 外圍淡淡放五家共通邊飾 */

#calendar
.calendar-orbit::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    url(
      "assets/images/houses-border-overlay.png"
    )
    center /
    100% 100%
    no-repeat;

  opacity:
    .12;

  filter:
    brightness(.72)
    saturate(.72);
}


#calendar
.calendar-orbit::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:

    radial-gradient(
      circle at 18% 28%,
      rgba(145, 94, 48, .08),
      transparent 27%
    ),

    radial-gradient(
      circle at 82% 66%,
      rgba(113, 74, 40, .08),
      transparent 24%
    );
}


#calendar
> *:not(.calendar-orbit) {
  position:
    relative;

  z-index:
    2;
}


/* =========================================================
   04｜卡片可點擊
========================================================= */

#calendar .calendar-event {
  cursor:
    zoom-in !important;
}


#calendar
.calendar-event:focus-visible {
  outline:
    1px solid
    rgba(220, 175, 97, .58) !important;

  outline-offset:
    2px;
}


/* =========================================================
   04｜篇章開始卡片加強
========================================================= */

#calendar
.calendar-event-has-story,

#calendar
.calendar-event-story-only {
  border-color:
    rgba(151, 69, 52, .38) !important;

  box-shadow:

    inset
    0 0 0 1px
    rgba(164, 83, 61, .09),

    0 0 22px
    rgba(82, 29, 24, .05)
    !important;
}


#calendar
.calendar-event-has-story:hover,

#calendar
.calendar-event-story-only:hover,

#calendar
.calendar-event-has-story.active,

#calendar
.calendar-event-story-only.active {
  border-color:
    rgba(188, 102, 72, .68) !important;

  box-shadow:

    inset
    0 0 0 1px
    rgba(212, 139, 92, .14),

    0 0 26px
    rgba(117, 46, 34, .12)
    !important;
}


/* STORY START 小標本身也加強 */

#calendar .calendar-story-tag {
  width:
    max-content !important;

  max-width:
    100% !important;

  padding:
    4px 7px !important;

  border:
    1px solid
    rgba(176, 89, 69, .58)
    !important;

  background:

    linear-gradient(
      180deg,
      rgba(72, 28, 25, .32),
      rgba(37, 15, 18, .16)
    )
    !important;

  box-shadow:

    inset
    0 0 0 1px
    rgba(219, 144, 94, .06),

    0 0 14px
    rgba(111, 40, 31, .08)
    !important;
}


#calendar
.calendar-story-tag span {
  color:
    rgba(217, 137, 108, .92)
    !important;
}


#calendar
.calendar-story-tag em {
  color:
    rgba(214, 187, 153, .66)
    !important;
}


/* =========================================================
   04｜點擊後完整說明 Lightbox
========================================================= */

.calendar-lightbox {
  position:
    fixed;

  inset:
    0;

  z-index:
    1700;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    6vh 6vw;

  box-sizing:
    border-box;

  background:
    rgba(2, 4, 8, .88);

  backdrop-filter:
    blur(12px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .32s ease,
    visibility .32s ease;
}


.calendar-lightbox.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


.calendar-lightbox-inner {
  position:
    relative;

  width:
    min(720px, 88vw);

  max-height:
    84vh;

  padding:
    42px 48px
    34px;

  overflow-y:
    auto;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(188, 151, 91, .22);

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(125, 83, 44, .10),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      rgba(10, 13, 19, .98),
      rgba(4, 6, 10, .98)
    );

  box-shadow:

    0 30px 90px
    rgba(0, 0, 0, .58),

    inset
    0 0 70px
    rgba(175, 116, 57, .035);

  transform:
    translateY(12px)
    scale(.985);

  transition:
    transform .32s ease;
}


.calendar-lightbox.is-open
.calendar-lightbox-inner {
  transform:
    translateY(0)
    scale(1);
}


/* 篇章開始的 popup 微紅金 */

.calendar-lightbox.story-entry
.calendar-lightbox-inner {
  border-color:
    rgba(167, 85, 65, .38);

  box-shadow:

    0 30px 90px
    rgba(0, 0, 0, .62),

    0 0 42px
    rgba(104, 39, 31, .08),

    inset
    0 0 70px
    rgba(139, 63, 44, .04);
}


/* X */

.calendar-lightbox-close {
  position:
    absolute;

  top:
    17px;

  right:
    18px;

  width:
    38px;

  height:
    38px;

  border:
    1px solid
    rgba(207, 168, 101, .22);

  background:
    transparent;

  color:
    rgba(231, 202, 151, .78);

  font-size:
    21px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}


.calendar-lightbox-close:hover {
  color:
    #fff0d2;

  border-color:
    rgba(226, 184, 107, .55);

  transform:
    rotate(90deg);
}


/* 日期 */

.calendar-lightbox-date {
  display:
    flex;

  align-items:
    baseline;

  gap:
    10px;

  margin-bottom:
    22px;

  padding-bottom:
    17px;

  border-bottom:
    1px solid
    rgba(188, 151, 91, .16);
}


.calendar-lightbox-date span {
  color:
    rgba(192, 151, 89, .68);

  font-size:
    12px;

  letter-spacing:
    .14em;
}


.calendar-lightbox-date strong {
  color:
    rgba(239, 226, 201, .95);

  font-size:
    42px;

  font-weight:
    400;

  line-height:
    1;
}


.calendar-lightbox-date em {
  color:
    rgba(191, 174, 146, .45);

  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .18em;
}


/* 內容 */

.calendar-lightbox-content {
  color:
    rgba(224, 214, 195, .76);
}


.calendar-lightbox-content
.calendar-event-house {
  margin:
    0 0 8px !important;

  color:
    rgba(188, 148, 87, .64)
    !important;

  font-size:
    10px !important;

  letter-spacing:
    .18em !important;
}


.calendar-lightbox-content h3 {
  margin:
    0 0 16px !important;

  color:
    rgba(241, 227, 202, .96)
    !important;

  font-size:
    clamp(
      24px,
      2vw,
      34px
    ) !important;

  font-weight:
    400 !important;

  line-height:
    1.45 !important;

  letter-spacing:
    .07em !important;
}


.calendar-lightbox-content
> p {
  margin:
    0 !important;

  color:
    rgba(224, 214, 195, .74)
    !important;

  font-size:
    15px !important;

  line-height:
    2 !important;

  letter-spacing:
    .045em !important;
}


.calendar-lightbox-content
.calendar-story-tag {
  margin:
    0 0 14px !important;
}


/* 婚慶期間 */

.calendar-lightbox-content
.calendar-period {
  display:
    block !important;

  margin-top:
    20px !important;

  padding:
    12px 14px !important;

  border-left:
    1px solid
    rgba(197, 154, 87, .38)
    !important;

  background:

    linear-gradient(
      90deg,
      rgba(111, 73, 37, .11),
      transparent
    )
    !important;
}


.calendar-lightbox-content
.calendar-period span,

.calendar-lightbox-content
.calendar-period strong,

.calendar-lightbox-content
.calendar-period em {
  display:
    block !important;
}


.calendar-lightbox-content
.calendar-period span {
  color:
    rgba(187, 146, 84, .58)
    !important;

  font-size:
    8px !important;

  letter-spacing:
    .18em !important;
}


.calendar-lightbox-content
.calendar-period strong {
  margin:
    5px 0 !important;

  color:
    rgba(236, 216, 179, .88)
    !important;

  font-size:
    14px !important;

  font-weight:
    400 !important;
}


.calendar-lightbox-content
.calendar-period em {
  color:
    rgba(210, 197, 175, .62)
    !important;

  font-size:
    12px !important;

  font-style:
    normal !important;
}


.calendar-lightbox-hint {
  margin-top:
    28px;

  color:
    rgba(183, 174, 157, .30);

  font-size:
    7px;

  letter-spacing:
    5px;

  text-align:
    center;
}


/* =========================================================
   小尺寸保險
========================================================= */

@media (max-width: 850px) {

  #chronicles
  .mark-system-flow {
    width:
      84vw !important;
  }

  #chronicles
  .mark-system-rule-note,

  #chronicles
  .mark-system-current {
    width:
      84vw !important;
  }

}


@media (max-width: 850px) {

  .symbol-lightbox-inner,
  .calendar-lightbox-inner {
    width:
      92vw !important;

    padding:
      40px 24px
      28px !important;
  }


  .symbol-lightbox-image {
    max-width:
      78vw !important;

    max-height:
      46vh !important;
  }


  .calendar-lightbox-content h3 {
    font-size:
      24px !important;
  }

}
/* =========================================================
   夜巫京｜02＋03＋04 最終修正版
   直接貼在 style.css 最底
========================================================= */


/* =========================================================
   02｜人物卷｜紋印放大說明
========================================================= */

.symbol-lightbox {
  z-index: 1600 !important;
}

.symbol-lightbox-inner {
  width: min(760px, 88vw) !important;
  max-height: 90vh !important;

  padding:
    40px 48px
    28px !important;

  overflow-y: auto !important;

  box-sizing:
    border-box !important;
}

.symbol-lightbox-image {
  max-width:
    min(520px, 68vw) !important;

  max-height:
    49vh !important;

  margin:
    0 auto !important;
}

.symbol-lightbox-note {
  width:
    min(560px, 72vw);

  margin:
    18px auto 0;

  padding:
    16px 18px 0;

  border-top:
    1px solid
    rgba(191, 151, 88, .18);

  text-align:
    center;

  box-sizing:
    border-box;
}

.symbol-lightbox-note[hidden] {
  display:
    none !important;
}

.symbol-lightbox-rank {
  display:
    block;

  margin-bottom:
    7px;

  color:
    rgba(232, 204, 157, .92);

  font-size:
    14px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}

.symbol-lightbox-structure {
  display:
    block;

  margin-bottom:
    9px;

  color:
    rgba(195, 158, 99, .62);

  font-size:
    11px;

  line-height:
    1.7;

  letter-spacing:
    .10em;
}

.symbol-lightbox-description {
  margin:
    0;

  color:
    rgba(221, 211, 193, .70);

  font-size:
    13px;

  line-height:
    1.85;

  letter-spacing:
    .045em;
}

.symbol-lightbox-hint {
  margin-top:
    18px !important;
}


/* =========================================================
   03｜京中異聞｜紋印頁不被底部分類擋住
========================================================= */

#chronicles .chronicles-layout {
  gap:
    12px !important;
}


/* 主內容區固定高度，
   讓下面七個分類不再壓進內容 */

#chronicles .chronicle-display {
  height:
    398px !important;

  min-height:
    398px !important;

  overflow:
    hidden !important;
}


/* 07 紋印專用壓縮 */

#chronicles .chronicle-panel-marks {
  box-sizing:
    border-box !important;

  height:
    100% !important;

  min-height:
    0 !important;

  padding:
    16px 4vw
    8px !important;

  overflow:
    hidden !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-panel-index {
  margin-bottom:
    3px !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-en {
  margin-bottom:
    5px !important;
}


#chronicles
.chronicle-panel-marks h3 {
  margin:
    0 0 4px !important;

  font-size:
    clamp(
      34px,
      3vw,
      50px
    ) !important;

  line-height:
    1.08 !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-lead {
  margin:
    0 !important;

  font-size:
    15px !important;

  line-height:
    1.55 !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-rule {
  width:
    145px !important;

  margin:
    9px 0
    10px !important;
}


#chronicles
.chronicle-panel-marks
.mark-system-intro {
  max-width:
    920px !important;

  margin:
    0 !important;

  font-size:
    12.5px !important;

  line-height:
    1.65 !important;
}


/* ---------------------------------------------------------
   族紋 → 承紋 → 主紋
--------------------------------------------------------- */

#chronicles .mark-system-flow {
  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    24px
    minmax(0, 1fr)
    24px
    minmax(0, 1fr) !important;

  align-items:
    stretch !important;

  gap:
    8px !important;

  width:
    min(910px, 74vw) !important;

  max-width:
    910px !important;

  margin:
    10px 0 0 !important;
}


#chronicles .mark-system-card {
  min-height:
    96px !important;

  padding:
    9px 12px !important;

  box-sizing:
    border-box !important;
}


#chronicles
.mark-system-card > span {
  margin-bottom:
    1px !important;

  font-size:
    7px !important;
}


#chronicles
.mark-system-card > em {
  margin-bottom:
    1px !important;

  font-size:
    6.5px !important;
}


#chronicles
.mark-system-card > strong {
  margin-bottom:
    1px !important;

  font-size:
    17px !important;

  line-height:
    1.25 !important;
}


#chronicles
.mark-system-card > small {
  margin-bottom:
    4px !important;

  font-size:
    8px !important;

  line-height:
    1.35 !important;
}


#chronicles
.mark-system-card > p {
  margin:
    0 !important;

  font-size:
    9.5px !important;

  line-height:
    1.5 !important;

  letter-spacing:
    .025em !important;
}


#chronicles .mark-system-arrow {
  font-size:
    14px !important;
}


/* ---------------------------------------------------------
   婚姻規則
--------------------------------------------------------- */

#chronicles
.mark-system-rule-note {
  width:
    min(910px, 74vw) !important;

  max-width:
    910px !important;

  margin:
    8px 0 0 !important;

  padding:
    7px 12px !important;

  box-sizing:
    border-box !important;
}


#chronicles
.mark-system-rule-note > span {
  margin-bottom:
    1px !important;

  font-size:
    6.5px !important;
}


#chronicles
.mark-system-rule-note > strong {
  display:
    inline !important;

  margin:
    0 10px 0 0 !important;

  font-size:
    11px !important;
}


#chronicles
.mark-system-rule-note > p {
  display:
    inline !important;

  margin:
    0 !important;

  font-size:
    9.5px !important;

  line-height:
    1.45 !important;
}


/* ---------------------------------------------------------
   目前持有人
--------------------------------------------------------- */

#chronicles
.mark-system-current {
  width:
    min(910px, 74vw) !important;

  max-width:
    910px !important;

  margin:
    6px 0 0 !important;

  gap:
    10px !important;
}


#chronicles
.mark-system-current > span {
  font-size:
    6.5px !important;
}


#chronicles
.mark-system-current > p {
  gap:
    10px !important;

  font-size:
    9px !important;

  line-height:
    1.45 !important;
}


/* 七格分類永遠壓在內容下面，
   但不覆蓋內容 */

#chronicles .chronicle-index {
  position:
    relative !important;

  z-index:
    8 !important;

  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    ) !important;
}


#chronicles .chronicles-footer {
  z-index:
    9 !important;
}


/* =========================================================
   04｜五姓集日｜背景補足
========================================================= */

#calendar.calendar-section {
  isolation:
    isolate !important;

  background:
    #05070b !important;
}


/* 直接利用目前已有的 calendar-orbit
   改成完整的世界觀背景層 */

#calendar .calendar-orbit {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  z-index:
    0 !important;

  pointer-events:
    none !important;

  opacity:
    1 !important;

  transform:
    none !important;

  animation:
    none !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:

    linear-gradient(
      90deg,
      rgba(4, 6, 10, .88) 0%,
      rgba(4, 6, 10, .70) 24%,
      rgba(4, 6, 10, .54) 52%,
      rgba(4, 6, 10, .76) 100%
    ),

    linear-gradient(
      180deg,
      rgba(3, 5, 9, .62) 0%,
      rgba(3, 5, 9, .32) 48%,
      rgba(3, 5, 9, .82) 100%
    ),

    url(
      "assets/images/calendar-detail-bg.png"
    )
    center 47% /
    cover
    no-repeat !important;
}


/* 外圍淡淡放五家共通邊飾 */

#calendar
.calendar-orbit::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    url(
      "assets/images/houses-border-overlay.png"
    )
    center /
    100% 100%
    no-repeat;

  opacity:
    .12;

  filter:
    brightness(.72)
    saturate(.72);
}


#calendar
.calendar-orbit::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:

    radial-gradient(
      circle at 18% 28%,
      rgba(145, 94, 48, .08),
      transparent 27%
    ),

    radial-gradient(
      circle at 82% 66%,
      rgba(113, 74, 40, .08),
      transparent 24%
    );
}


#calendar
> *:not(.calendar-orbit) {
  position:
    relative;

  z-index:
    2;
}


/* =========================================================
   04｜卡片可點擊
========================================================= */

#calendar .calendar-event {
  cursor:
    zoom-in !important;
}


#calendar
.calendar-event:focus-visible {
  outline:
    1px solid
    rgba(220, 175, 97, .58) !important;

  outline-offset:
    2px;
}


/* =========================================================
   04｜篇章開始卡片加強
========================================================= */

#calendar
.calendar-event-has-story,

#calendar
.calendar-event-story-only {
  border-color:
    rgba(151, 69, 52, .38) !important;

  box-shadow:

    inset
    0 0 0 1px
    rgba(164, 83, 61, .09),

    0 0 22px
    rgba(82, 29, 24, .05)
    !important;
}


#calendar
.calendar-event-has-story:hover,

#calendar
.calendar-event-story-only:hover,

#calendar
.calendar-event-has-story.active,

#calendar
.calendar-event-story-only.active {
  border-color:
    rgba(188, 102, 72, .68) !important;

  box-shadow:

    inset
    0 0 0 1px
    rgba(212, 139, 92, .14),

    0 0 26px
    rgba(117, 46, 34, .12)
    !important;
}


/* STORY START 小標本身也加強 */

#calendar .calendar-story-tag {
  width:
    max-content !important;

  max-width:
    100% !important;

  padding:
    4px 7px !important;

  border:
    1px solid
    rgba(176, 89, 69, .58)
    !important;

  background:

    linear-gradient(
      180deg,
      rgba(72, 28, 25, .32),
      rgba(37, 15, 18, .16)
    )
    !important;

  box-shadow:

    inset
    0 0 0 1px
    rgba(219, 144, 94, .06),

    0 0 14px
    rgba(111, 40, 31, .08)
    !important;
}


#calendar
.calendar-story-tag span {
  color:
    rgba(217, 137, 108, .92)
    !important;
}


#calendar
.calendar-story-tag em {
  color:
    rgba(214, 187, 153, .66)
    !important;
}


/* =========================================================
   04｜點擊後完整說明 Lightbox
========================================================= */

.calendar-lightbox {
  position:
    fixed;

  inset:
    0;

  z-index:
    1700;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    6vh 6vw;

  box-sizing:
    border-box;

  background:
    rgba(2, 4, 8, .88);

  backdrop-filter:
    blur(12px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .32s ease,
    visibility .32s ease;
}


.calendar-lightbox.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


.calendar-lightbox-inner {
  position:
    relative;

  width:
    min(720px, 88vw);

  max-height:
    84vh;

  padding:
    42px 48px
    34px;

  overflow-y:
    auto;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(188, 151, 91, .22);

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(125, 83, 44, .10),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      rgba(10, 13, 19, .98),
      rgba(4, 6, 10, .98)
    );

  box-shadow:

    0 30px 90px
    rgba(0, 0, 0, .58),

    inset
    0 0 70px
    rgba(175, 116, 57, .035);

  transform:
    translateY(12px)
    scale(.985);

  transition:
    transform .32s ease;
}


.calendar-lightbox.is-open
.calendar-lightbox-inner {
  transform:
    translateY(0)
    scale(1);
}


/* 篇章開始的 popup 微紅金 */

.calendar-lightbox.story-entry
.calendar-lightbox-inner {
  border-color:
    rgba(167, 85, 65, .38);

  box-shadow:

    0 30px 90px
    rgba(0, 0, 0, .62),

    0 0 42px
    rgba(104, 39, 31, .08),

    inset
    0 0 70px
    rgba(139, 63, 44, .04);
}


/* X */

.calendar-lightbox-close {
  position:
    absolute;

  top:
    17px;

  right:
    18px;

  width:
    38px;

  height:
    38px;

  border:
    1px solid
    rgba(207, 168, 101, .22);

  background:
    transparent;

  color:
    rgba(231, 202, 151, .78);

  font-size:
    21px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}


.calendar-lightbox-close:hover {
  color:
    #fff0d2;

  border-color:
    rgba(226, 184, 107, .55);

  transform:
    rotate(90deg);
}


/* 日期 */

.calendar-lightbox-date {
  display:
    flex;

  align-items:
    baseline;

  gap:
    10px;

  margin-bottom:
    22px;

  padding-bottom:
    17px;

  border-bottom:
    1px solid
    rgba(188, 151, 91, .16);
}


.calendar-lightbox-date span {
  color:
    rgba(192, 151, 89, .68);

  font-size:
    12px;

  letter-spacing:
    .14em;
}


.calendar-lightbox-date strong {
  color:
    rgba(239, 226, 201, .95);

  font-size:
    42px;

  font-weight:
    400;

  line-height:
    1;
}


.calendar-lightbox-date em {
  color:
    rgba(191, 174, 146, .45);

  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .18em;
}


/* 內容 */

.calendar-lightbox-content {
  color:
    rgba(224, 214, 195, .76);
}


.calendar-lightbox-content
.calendar-event-house {
  margin:
    0 0 8px !important;

  color:
    rgba(188, 148, 87, .64)
    !important;

  font-size:
    10px !important;

  letter-spacing:
    .18em !important;
}


.calendar-lightbox-content h3 {
  margin:
    0 0 16px !important;

  color:
    rgba(241, 227, 202, .96)
    !important;

  font-size:
    clamp(
      24px,
      2vw,
      34px
    ) !important;

  font-weight:
    400 !important;

  line-height:
    1.45 !important;

  letter-spacing:
    .07em !important;
}


.calendar-lightbox-content
> p {
  margin:
    0 !important;

  color:
    rgba(224, 214, 195, .74)
    !important;

  font-size:
    15px !important;

  line-height:
    2 !important;

  letter-spacing:
    .045em !important;
}


.calendar-lightbox-content
.calendar-story-tag {
  margin:
    0 0 14px !important;
}


/* 婚慶期間 */

.calendar-lightbox-content
.calendar-period {
  display:
    block !important;

  margin-top:
    20px !important;

  padding:
    12px 14px !important;

  border-left:
    1px solid
    rgba(197, 154, 87, .38)
    !important;

  background:

    linear-gradient(
      90deg,
      rgba(111, 73, 37, .11),
      transparent
    )
    !important;
}


.calendar-lightbox-content
.calendar-period span,

.calendar-lightbox-content
.calendar-period strong,

.calendar-lightbox-content
.calendar-period em {
  display:
    block !important;
}


.calendar-lightbox-content
.calendar-period span {
  color:
    rgba(187, 146, 84, .58)
    !important;

  font-size:
    8px !important;

  letter-spacing:
    .18em !important;
}


.calendar-lightbox-content
.calendar-period strong {
  margin:
    5px 0 !important;

  color:
    rgba(236, 216, 179, .88)
    !important;

  font-size:
    14px !important;

  font-weight:
    400 !important;
}


.calendar-lightbox-content
.calendar-period em {
  color:
    rgba(210, 197, 175, .62)
    !important;

  font-size:
    12px !important;

  font-style:
    normal !important;
}


.calendar-lightbox-hint {
  margin-top:
    28px;

  color:
    rgba(183, 174, 157, .30);

  font-size:
    7px;

  letter-spacing:
    5px;

  text-align:
    center;
}


/* =========================================================
   小尺寸保險
========================================================= */

@media (max-width: 850px) {

  #chronicles
  .mark-system-flow {
    width:
      84vw !important;
  }

  #chronicles
  .mark-system-rule-note,

  #chronicles
  .mark-system-current {
    width:
      84vw !important;
  }

}


@media (max-width: 850px) {

  .symbol-lightbox-inner,
  .calendar-lightbox-inner {
    width:
      92vw !important;

    padding:
      40px 24px
      28px !important;
  }


  .symbol-lightbox-image {
    max-width:
      78vw !important;

    max-height:
      46vh !important;
  }


  .calendar-lightbox-content h3 {
    font-size:
      24px !important;
  }

}
/* =========================================================
   03 + 04｜第二次修正
   直接貼在 style.css 最底
========================================================= */


/* =========================================================
   03｜紋印制度
   改成三張正常大小入口卡
========================================================= */

/* 取消上一版為了硬塞而縮小的 398px 高度 */
#chronicles .chronicle-display {
  height: auto !important;
  min-height: 430px !important;
  overflow: hidden !important;
}


/* 紋印頁恢復舒服的字級 */
#chronicles .chronicle-panel-marks {
  height: 100% !important;
  padding:
    22px 4vw
    20px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}


#chronicles
.chronicle-panel-marks h3 {
  margin:
    0 0 8px !important;

  font-size:
    clamp(44px, 3.8vw, 62px) !important;

  line-height:
    1.08 !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-lead {
  margin: 0 !important;

  font-size:
    16px !important;

  line-height:
    1.7 !important;
}


#chronicles
.chronicle-panel-marks
.chronicle-rule {
  margin:
    12px 0
    13px !important;
}


#chronicles
.chronicle-panel-marks
.mark-system-intro {
  max-width:
    900px !important;

  margin: 0 !important;

  font-size:
    14px !important;

  line-height:
    1.8 !important;

  letter-spacing:
    .045em !important;
}


/* =========================================================
   三張卡
========================================================= */

#chronicles .mark-system-flow {
  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  gap:
    18px !important;

  width:
    min(900px, 74vw) !important;

  margin:
    20px 0 0 !important;
}


/* ＋ 號直接藏起來 */
#chronicles .mark-system-arrow {
  display:
    none !important;
}


#chronicles .mark-system-card {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: flex-start !important;
  justify-content: center !important;

  min-height:
    122px !important;

  padding:
    20px 24px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(189, 151, 91, .22) !important;

  background:
    linear-gradient(
      145deg,
      rgba(19, 20, 22, .52),
      rgba(6, 8, 12, .28)
    ) !important;

  cursor:
    pointer !important;

  overflow:
    hidden !important;

  transition:
    transform .32s ease,
    border-color .32s ease,
    background .32s ease,
    box-shadow .32s ease !important;
}


#chronicles .mark-system-card:hover {
  transform:
    translateY(-3px) !important;

  border-color:
    rgba(215, 170, 95, .52) !important;

  background:
    linear-gradient(
      145deg,
      rgba(37, 28, 21, .60),
      rgba(9, 10, 14, .38)
    ) !important;

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, .22),

    inset
    0 0 32px
    rgba(167, 109, 51, .045)
    !important;
}


/* 卡片序號 */
#chronicles
.mark-system-card > span {
  display:
    block !important;

  margin-bottom:
    6px !important;

  color:
    rgba(190, 147, 84, .52) !important;

  font-size:
    9px !important;

  letter-spacing:
    .18em !important;
}


/* 英文 */
#chronicles
.mark-system-card > em {
  display:
    block !important;

  margin-bottom:
    5px !important;

  color:
    rgba(190, 147, 84, .58) !important;

  font-size:
    8px !important;

  font-style:
    normal !important;

  letter-spacing:
    .18em !important;
}


/* 族紋／承紋／主紋 */
#chronicles
.mark-system-card > strong {
  display:
    block !important;

  margin: 0 !important;

  color:
    rgba(241, 227, 202, .96) !important;

  font-size:
    28px !important;

  font-weight:
    400 !important;

  line-height:
    1.3 !important;

  letter-spacing:
    .10em !important;
}


/* 卡片裡的詳細內容全部藏起來 */
#chronicles
.mark-system-card > small,

#chronicles
.mark-system-card > p {
  display:
    none !important;
}


/* 右下角 CLICK 提示 */
#chronicles
.mark-system-card::after {
  content:
    "VIEW DETAIL";

  position:
    absolute;

  right:
    16px;

  bottom:
    12px;

  color:
    rgba(181, 145, 89, .34);

  font-size:
    6px;

  letter-spacing:
    .20em;
}


/* 下方制度補充先不要搶畫面 */
#chronicles
.mark-system-rule-note,

#chronicles
.mark-system-current {
  display:
    none !important;
}


/* =========================================================
   03｜紋印制度 popup
========================================================= */

.mark-detail-lightbox {
  position: fixed;

  inset: 0;

  z-index: 1800;

  display: flex;

  align-items: center;
  justify-content: center;

  padding:
    6vh 6vw;

  box-sizing:
    border-box;

  background:
    rgba(2, 4, 8, .89);

  backdrop-filter:
    blur(14px);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity .3s ease,
    visibility .3s ease;
}


.mark-detail-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}


.mark-detail-inner {
  position: relative;

  width:
    min(680px, 88vw);

  padding:
    48px 52px
    40px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(194, 153, 90, .24);

  background:

    radial-gradient(
      circle at 50% 0%,
      rgba(144, 93, 46, .12),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      rgba(11, 13, 18, .99),
      rgba(4, 6, 10, .99)
    );

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .62),

    inset
    0 0 70px
    rgba(160, 105, 49, .035);
}


.mark-detail-index {
  margin:
    0 0 8px;

  color:
    rgba(190, 148, 84, .55);

  font-size:
    9px;

  letter-spacing:
    .22em;
}


.mark-detail-en {
  margin:
    0 0 8px;

  color:
    rgba(190, 148, 84, .62);

  font-size:
    8px;

  letter-spacing:
    .22em;
}


.mark-detail-title {
  margin:
    0 0 12px;

  color:
    rgba(242, 229, 205, .98);

  font-size:
    38px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}


.mark-detail-status {
  margin:
    0 0 20px;

  padding-bottom:
    17px;

  border-bottom:
    1px solid
    rgba(190, 151, 90, .16);

  color:
    rgba(217, 179, 119, .80);

  font-size:
    13px;

  letter-spacing:
    .08em;
}


.mark-detail-text {
  margin:
    0;

  color:
    rgba(225, 214, 194, .76);

  font-size:
    15px;

  line-height:
    2;

  letter-spacing:
    .045em;
}


.mark-detail-extra {
  margin-top:
    20px;

  padding:
    13px 15px;

  border-left:
    1px solid
    rgba(174, 93, 67, .50);

  background:
    linear-gradient(
      90deg,
      rgba(83, 32, 27, .14),
      transparent
    );

  color:
    rgba(211, 190, 160, .67);

  font-size:
    12px;

  line-height:
    1.8;
}


.mark-detail-close {
  position:
    absolute;

  top:
    17px;

  right:
    18px;

  width:
    38px;

  height:
    38px;

  border:
    1px solid
    rgba(207, 168, 101, .22);

  background:
    transparent;

  color:
    rgba(231, 202, 151, .78);

  font-size:
    21px;

  cursor:
    pointer;
}


.mark-detail-hint {
  margin-top:
    28px;

  color:
    rgba(183, 174, 157, .28);

  font-size:
    7px;

  letter-spacing:
    4px;

  text-align:
    center;
}


/* =========================================================
   04｜日程往上收
========================================================= */

/* 標題與格子之間縮短 */
#calendar .calendar-header {
  margin-bottom:
    1.8vh !important;
}


/* 整個 15 格再往上 */
#calendar .calendar-timeline {
  position:
    relative !important;

  margin-top:
    -18px !important;
}


/* =========================================================
   04｜所有格子高度一致
========================================================= */

#calendar .calendar-event,
#calendar .calendar-event-story-only,
#calendar .calendar-event-has-story {
  min-height:
    0 !important;

  height:
    156px !important;

  opacity:
    .48 !important;

  box-sizing:
    border-box !important;
}


#calendar .calendar-event.active,
#calendar .calendar-event:hover {
  opacity:
    1 !important;
}


/* 只有篇章開始也不再縮成矮格 */
#calendar .calendar-event-story-only {
  min-height:
    0 !important;

  height:
    156px !important;
}


/* 內容統一 */
#calendar
.calendar-event-content {
  height:
    100% !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;
}


/* STORY START 卡的內容不要被擠到一團 */
#calendar
.calendar-event-story-only
.calendar-event-content,

#calendar
.calendar-event-has-story
.calendar-event-content {
  padding:
    14px 16px !important;
}


/* 日期區也固定 */
#calendar .calendar-date {
  align-self:
    start !important;
}


/* =========================================================
   04｜飛廉／鹿門篇章起點 popup 補文後樣式
========================================================= */

.calendar-lightbox-added-note {
  margin-top:
    16px !important;

  padding-top:
    16px;

  border-top:
    1px solid
    rgba(188, 151, 91, .14);

  color:
    rgba(224, 214, 195, .74) !important;

  font-size:
    15px !important;

  line-height:
    2 !important;

  letter-spacing:
    .045em !important;
}
/* =========================================================
   04｜五姓集日｜極簡卡片最終修正
   日期＋標題 בלבד
========================================================= */


/* =========================================================
   整個日程再往上收
========================================================= */

#calendar .calendar-header {
  margin-bottom:
    0 !important;
}


#calendar .calendar-timeline {
  margin-top:
    -32px !important;
}


/* 右上曜辰往上移
   不要再壓到第一排第五格 */

#calendar .calendar-year {
  top:
    4.2vh !important;

  right:
    8vw !important;

  z-index:
    4 !important;
}


/* =========================================================
   三排卡片統一高度
========================================================= */

#calendar .calendar-event,
#calendar .calendar-event-has-story,
#calendar .calendar-event-story-only {
  height:
    138px !important;

  min-height:
    138px !important;

  max-height:
    138px !important;

  opacity:
    .48 !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;
}


/* Hover / 點擊開啟時 */

#calendar .calendar-event:hover,
#calendar .calendar-event.active {
  opacity:
    1 !important;
}


/* =========================================================
   卡片裡只留下 h3 標題

   以下全部隱藏：
   - 英文分類
   - STORY START
   - 內文
   - 婚慶期間
========================================================= */

#calendar
.calendar-event
.calendar-event-content
> *:not(h3) {
  display:
    none !important;
}


/* =========================================================
   卡片內容區
========================================================= */

#calendar .calendar-event-content,
#calendar
.calendar-event-story-only
.calendar-event-content,
#calendar
.calendar-event-has-story
.calendar-event-content {
  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  height:
    100% !important;

  min-height:
    0 !important;

  padding:
    12px 16px
    14px 5px !important;

  box-sizing:
    border-box !important;

  background:
    transparent !important;

  overflow:
    hidden !important;
}


/* =========================================================
   唯一顯示的標題
========================================================= */

#calendar
.calendar-event-content h3,

#calendar
.calendar-event-story-only
.calendar-event-content h3,

#calendar
.calendar-event-has-story
.calendar-event-content h3 {
  display:
    -webkit-box !important;

  margin:
    0 !important;

  max-width:
    100% !important;

  overflow:
    hidden !important;

  -webkit-box-orient:
    vertical;

  line-clamp:
  2;

-webkit-line-clamp:
  2;

  color:
    rgba(230, 216, 191, .78)
    !important;

  font-size:
    15px !important;

  font-weight:
    400 !important;

  line-height:
    1.55 !important;

  letter-spacing:
    .055em !important;
}


#calendar
.calendar-event:hover
.calendar-event-content h3,

#calendar
.calendar-event.active
.calendar-event-content h3 {
  color:
    rgba(247, 230, 198, .96)
    !important;
}


/* =========================================================
   篇章起點
   不再顯示 STORY START 字樣
   改用暗紅金框辨識
========================================================= */

#calendar .calendar-story-tag {
  display:
    none !important;
}


#calendar .calendar-event-has-story,
#calendar .calendar-event-story-only {
  border:
    1px solid
    rgba(153, 72, 57, .32)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(47, 19, 20, .14),
      rgba(4, 6, 10, .20)
    )
    !important;

  box-shadow:
    inset
    2px 0 0
    rgba(173, 85, 60, .42)
    !important;
}


#calendar .calendar-event-has-story:hover,
#calendar .calendar-event-story-only:hover,
#calendar .calendar-event-has-story.active,
#calendar .calendar-event-story-only.active {
  border-color:
    rgba(204, 112, 76, .68)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(73, 29, 25, .23),
      rgba(5, 7, 11, .26)
    )
    !important;

  box-shadow:
    inset
    3px 0 0
    rgba(218, 123, 79, .68),

    0 0 25px
    rgba(110, 42, 31, .10)
    !important;
}


/* =========================================================
   日期區
========================================================= */

#calendar .calendar-date {
  height:
    34px !important;

  padding:
    7px 10px
    5px !important;

  box-sizing:
    border-box !important;
}


#calendar .calendar-date strong {
  font-size:
    21px !important;
}


/* =========================================================
   小節點稍微淡化
========================================================= */

#calendar .calendar-node {
  margin-top:
    15px !important;

  opacity:
    .68;
}


/* =========================================================
   舊版飛廉／鹿門額外 popup 文字
   關掉，改由下面 JS 正式補進原內容
========================================================= */

.calendar-lightbox-added-note {
  display:
    none !important;
}


/* =========================================================
   Popup 裡要恢復所有完整資訊
   因為 popup 不在 #calendar 裡，
   上面隱藏規則不會影響它
========================================================= */

.calendar-lightbox-content
.calendar-story-tag {
  display:
    flex !important;
}


.calendar-lightbox-content
.calendar-event-house {
  display:
    block !important;
}


.calendar-lightbox-content
> p {
  display:
    block !important;
}


.calendar-lightbox-content
.calendar-period {
  display:
    block !important;
}


/* 飛廉／鹿門補進 popup 的正文 */

.calendar-lightbox-content
.calendar-story-detail {
  display:
    block !important;

  margin:
    16px 0 0 !important;

  padding-top:
    16px;

  border-top:
    1px solid
    rgba(190, 151, 90, .14);

  color:
    rgba(224, 214, 195, .74)
    !important;

  font-size:
    15px !important;

  line-height:
    2 !important;

  letter-spacing:
    .045em !important;
}
/* =========================================================
   03 + 04｜細節修正版
   直接貼 style.css 最底
========================================================= */


/* =========================================================
   03｜紋印制度 popup
   整體放大，尤其正文
========================================================= */

.mark-detail-inner {
  width:
    min(800px, 90vw) !important;

  padding:
    54px 62px
    46px !important;
}


/* 01 / 02 / 03 */

.mark-detail-index {
  margin-bottom:
    10px !important;

  font-size:
    11px !important;

  letter-spacing:
    .24em !important;
}


/* PRIMARY MARK */

.mark-detail-en {
  margin-bottom:
    11px !important;

  font-size:
    10px !important;

  letter-spacing:
    .24em !important;
}


/* 主紋 / 承紋 / 族紋 */

.mark-detail-title {
  margin-bottom:
    15px !important;

  font-size:
    48px !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .12em !important;
}


/* 現任家主 / 正式族人 */

.mark-detail-status {
  margin-bottom:
    24px !important;

  padding-bottom:
    21px !important;

  font-size:
    16px !important;

  line-height:
    1.6 !important;

  letter-spacing:
    .09em !important;
}


/* =========================================================
   最重要：主要說明文字放大
========================================================= */

.mark-detail-text {
  max-width:
    670px !important;

  font-size:
    18px !important;

  line-height:
    2 !important;

  letter-spacing:
    .045em !important;

  color:
    rgba(235, 224, 205, .82)
    !important;
}


/* 下方補充框 */

.mark-detail-extra {
  margin-top:
    26px !important;

  padding:
    17px 20px !important;

  font-size:
    15px !important;

  line-height:
    1.9 !important;

  letter-spacing:
    .04em !important;

  color:
    rgba(221, 203, 176, .76)
    !important;
}


/* 關閉提示也稍微放大 */

.mark-detail-hint {
  margin-top:
    32px !important;

  font-size:
    8px !important;

  letter-spacing:
    4px !important;
}


/* X */

.mark-detail-close {
  width:
    42px !important;

  height:
    42px !important;

  font-size:
    24px !important;
}


/* =========================================================
   04｜修正點完後持續亮著
========================================================= */

/*
  active 仍然可以存在，
  但 popup 關閉後 JS 會清掉。

  這裡把 active 和 hover 的樣式維持一致，
  不再位移。
*/

#calendar .calendar-event:hover,
#calendar .calendar-event.active {
  transform:
    none !important;
}


/* =========================================================
   04｜第一排上框消失
========================================================= */

/*
  關掉 translateY 後理論上就不會裁掉。
  再補一層真正的內框，確保四邊永遠完整。
*/

#calendar .calendar-event {
  position:
    relative !important;

  transform:
    none !important;
}


/* 重新畫一圈，不會被內部 button 蓋掉 */

#calendar .calendar-event::before {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    20 !important;

  pointer-events:
    none !important;

  border:
    1px solid
    rgba(150, 132, 103, .10);

  box-sizing:
    border-box !important;
}


/* 一般 hover */

#calendar
.calendar-event:hover::before {
  border-color:
    rgba(196, 158, 96, .34)
    !important;
}


/* =========================================================
   篇章開始：完整四邊暗紅金
========================================================= */

#calendar
.calendar-event-has-story::before,

#calendar
.calendar-event-story-only::before {
  border:
    1px solid
    rgba(159, 77, 59, .36)
    !important;

  box-shadow:
    inset
    2px 0 0
    rgba(190, 91, 62, .32);
}


#calendar
.calendar-event-has-story:hover::before,

#calendar
.calendar-event-story-only:hover::before,

#calendar
.calendar-event-has-story.active::before,

#calendar
.calendar-event-story-only.active::before {
  border-color:
    rgba(218, 119, 78, .78)
    !important;

  box-shadow:

    inset
    2px 0 0
    rgba(225, 121, 75, .68),

    inset
    0 0 22px
    rgba(113, 40, 29, .07)
    !important;
}


/* =========================================================
   第一排留 3px 安全空間
   防止任何瀏覽器裁掉上框
========================================================= */

#calendar .calendar-timeline {
  padding-top:
    4px !important;

  box-sizing:
    border-box !important;
}
/* =========================================================
   05｜月下藏卷 / ARCHIVES
   直接貼在 style.css 最底
========================================================= */


/* =========================================================
   SECTION
========================================================= */

.archives-section {
  position: relative;

  min-height: 100vh;

  padding:
    8vh 8vw
    7vh;

  overflow: hidden;

  isolation: isolate;

  color:
    rgba(240, 231, 214, .94);

  background:
    #05070b;
}


/* =========================================================
   背景
========================================================= */

.archives-bg {
  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  filter:
    brightness(.54)
    saturate(.72);

  transform:
    scale(1.015);
}


.archives-shade {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      rgba(3, 5, 9, .88) 0%,
      rgba(3, 5, 9, .70) 28%,
      rgba(3, 5, 9, .45) 58%,
      rgba(3, 5, 9, .72) 100%
    ),

    linear-gradient(
      180deg,
      rgba(2, 4, 8, .62) 0%,
      rgba(2, 4, 8, .20) 44%,
      rgba(2, 4, 8, .82) 100%
    );
}


.archives-moonlight {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    radial-gradient(
      ellipse at 74% 18%,
      rgba(166, 183, 205, .10),
      transparent 28%
    ),

    radial-gradient(
      ellipse at 50% 48%,
      rgba(173, 130, 72, .04),
      transparent 42%
    );
}


.archives-section
> *:not(.archives-bg):not(.archives-shade):not(.archives-moonlight) {
  position: relative;

  z-index: 2;
}


/* =========================================================
   HEADER
========================================================= */

.archives-header {
  width:
    min(700px, 72vw);

  margin-bottom:
    5vh;
}


.archives-kicker {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-bottom:
    18px;

  color:
    rgba(194, 154, 91, .68);
}


.archives-kicker span {
  font-size:
    11px;

  letter-spacing:
    .18em;
}


.archives-kicker i {
  width:
    42px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(202, 162, 98, .60),
      transparent
    );
}


.archives-kicker em {
  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .28em;
}


.archives-small-title {
  margin:
    0 0 10px;

  color:
    rgba(213, 200, 178, .54);

  font-size:
    13px;

  letter-spacing:
    .16em;
}


.archives-header h2 {
  margin:
    0;

  color:
    rgba(245, 233, 211, .98);

  font-size:
    clamp(
      50px,
      5vw,
      78px
    );

  font-weight:
    400;

  line-height:
    1.1;

  letter-spacing:
    .12em;
}


.archives-title-line {
  width:
    180px;

  height:
    1px;

  margin:
    22px 0
    20px;

  background:
    linear-gradient(
      90deg,
      rgba(204, 162, 96, .58),
      transparent
    );
}


.archives-intro {
  max-width:
    620px;

  margin:
    0;

  color:
    rgba(226, 215, 195, .70);

  font-size:
    16px;

  line-height:
    2;

  letter-spacing:
    .065em;
}


/* =========================================================
   三卷入口
========================================================= */

.archives-entries {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    18px;

  width:
    min(1180px, 84vw);

  margin-top:
    2vh;
}


/* =========================================================
   單一入口
========================================================= */

.archive-entry {
  position: relative;

  min-height:
    280px;

  padding:
    28px 26px
    26px;

  overflow: hidden;

  border:
    1px solid
    rgba(185, 148, 90, .18);

  background:

    linear-gradient(
      145deg,
      rgba(18, 19, 22, .52),
      rgba(4, 6, 10, .26)
    );

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  backdrop-filter:
    blur(2px);

  box-shadow:

    inset
    0 0 0 1px
    rgba(255, 255, 255, .015),

    inset
    0 0 50px
    rgba(156, 103, 50, .025);

  transition:
    transform .35s ease,
    border-color .35s ease,
    background .35s ease,
    box-shadow .35s ease;
}


.archive-entry:hover {
  transform:
    translateY(-5px);

  border-color:
    rgba(216, 169, 93, .48);

  background:

    linear-gradient(
      145deg,
      rgba(33, 27, 21, .62),
      rgba(5, 7, 11, .32)
    );

  box-shadow:

    0 18px 44px
    rgba(0, 0, 0, .28),

    inset
    0 0 45px
    rgba(163, 105, 49, .045);
}


/* =========================================================
   序號
========================================================= */

.archive-entry-number {
  display: block;

  margin-bottom:
    20px;

  color:
    rgba(190, 148, 85, .46);

  font-size:
    11px;

  letter-spacing:
    .20em;
}


.archive-entry-line {
  width:
    38px;

  height:
    1px;

  margin-bottom:
    28px;

  background:
    linear-gradient(
      90deg,
      rgba(198, 155, 91, .52),
      transparent
    );

  transition:
    width .35s ease;
}


.archive-entry:hover
.archive-entry-line {
  width:
    76px;
}


/* =========================================================
   標題文字
========================================================= */

.archive-entry-copy em {
  display: block;

  margin-bottom:
    8px;

  color:
    rgba(186, 146, 83, .56);

  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .22em;
}


.archive-entry-copy h3 {
  margin:
    0 0 15px;

  color:
    rgba(242, 229, 205, .94);

  font-size:
    34px;

  font-weight:
    400;

  line-height:
    1.25;

  letter-spacing:
    .12em;
}


.archive-entry-copy p {
  max-width:
    280px;

  margin:
    0;

  color:
    rgba(217, 207, 188, .56);

  font-size:
    13px;

  line-height:
    1.9;

  letter-spacing:
    .045em;
}


/* =========================================================
   OPEN ARCHIVE
========================================================= */

.archive-entry-open {
  position: absolute;

  left:
    26px;

  bottom:
    24px;

  color:
    rgba(188, 148, 86, .35);

  font-size:
    7px;

  letter-spacing:
    .24em;

  transition:
    color .3s ease,
    transform .3s ease;
}


.archive-entry:hover
.archive-entry-open {
  color:
    rgba(223, 181, 107, .76);

  transform:
    translateX(5px);
}


/* =========================================================
   Hover 月光
========================================================= */

.archive-entry-glow {
  position: absolute;

  top:
    -90px;

  right:
    -70px;

  width:
    220px;

  height:
    220px;

  border-radius:
    50%;

  pointer-events:
    none;

  opacity:
    0;

  background:
    radial-gradient(
      circle,
      rgba(213, 181, 128, .10),
      rgba(161, 117, 65, .025) 45%,
      transparent 72%
    );

  transition:
    opacity .45s ease;
}


.archive-entry:hover
.archive-entry-glow {
  opacity:
    1;
}


/* =========================================================
   秘藏｜封印
========================================================= */

.archive-entry-sealed {
  cursor:
    default;

  border-color:
    rgba(137, 86, 74, .18);

  background:

    linear-gradient(
      145deg,
      rgba(30, 16, 18, .44),
      rgba(4, 6, 10, .30)
    );
}


.archive-entry-sealed:hover {
  transform:
    none;

  border-color:
    rgba(151, 91, 75, .24);

  box-shadow:
    inset
    0 0 50px
    rgba(91, 34, 34, .035);
}


.archive-entry-sealed
.archive-entry-copy h3 {
  color:
    rgba(214, 195, 174, .62);
}


.archive-entry-sealed
.archive-entry-copy p {
  color:
    rgba(196, 184, 165, .40);
}


.archive-entry-sealed
.archive-entry-open {
  color:
    rgba(147, 86, 72, .58);
}


.archive-lock {
  position: absolute;

  right:
    24px;

  bottom:
    20px;

  color:
    rgba(156, 91, 72, .46);

  font-size:
    20px;

  transform:
    rotate(45deg);
}


/* =========================================================
   裝飾角線
========================================================= */

.archive-entry::before,
.archive-entry::after {
  content:
    "";

  position:
    absolute;

  pointer-events:
    none;

  opacity:
    .38;
}


.archive-entry::before {
  top:
    12px;

  left:
    12px;

  width:
    28px;

  height:
    28px;

  border-top:
    1px solid
    rgba(191, 151, 91, .30);

  border-left:
    1px solid
    rgba(191, 151, 91, .30);
}


.archive-entry::after {
  right:
    12px;

  bottom:
    12px;

  width:
    28px;

  height:
    28px;

  border-right:
    1px solid
    rgba(191, 151, 91, .24);

  border-bottom:
    1px solid
    rgba(191, 151, 91, .24);
}


/* =========================================================
   底部
========================================================= */

.archives-footer {
  display: flex;

  align-items: center;

  gap:
    18px;

  width:
    min(1180px, 84vw);

  margin-top:
    4.5vh;

  color:
    rgba(187, 150, 92, .28);
}


.archives-footer span {
  font-size:
    8px;

  letter-spacing:
    .28em;
}


.archives-footer i {
  flex:
    1;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(190, 151, 90, .20),
      rgba(190, 151, 90, .035)
    );
}


/* =========================================================
   右側 05 導航正常顯示
========================================================= */

.chapter-rail
a[href="#archives"] {
  pointer-events:
    auto;
}


/* =========================================================
   平板
========================================================= */

@media (max-width: 850px) {

  .archives-section {
    padding:
      8vh 7vw
      7vh;
  }


  .archives-entries {
    width:
      88vw;
  }


  .archive-entry {
    min-height:
      250px;

    padding:
      24px 22px;
  }


  .archive-entry-copy h3 {
    font-size:
      29px;
  }


  .archive-entry-copy p {
    font-size:
      12px;
  }

}


/* =========================================================
   手機
========================================================= */

@media (max-width: 760px) {

  .archives-section {
    min-height:
      auto;

    padding:
      10vh 6vw
      8vh;
  }


  .archives-header {
    width:
      100%;
  }


  .archives-header h2 {
    font-size:
      48px;
  }


  .archives-intro {
    font-size:
      14px;
  }


  .archives-entries {
    grid-template-columns:
      1fr;

    width:
      100%;

    gap:
      14px;
  }


  .archive-entry {
    min-height:
      210px;
  }


  .archives-footer {
    width:
      100%;

    margin-top:
      35px;
  }

}
/* =========================================================
   05｜月下藏卷
   真正古書雙頁版 FINAL
========================================================= */

#archives.archives-section {
  position: relative !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-height: 100vh !important;

  padding:
    6vh 7vw !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;

  isolation:
    isolate !important;

  background:
    #03060a !important;
}


/* =========================================================
   場景背景
========================================================= */

#archives .archives-bg {
  position: absolute !important;

  inset: 0 !important;

  z-index: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit:
    cover !important;

  object-position:
    center !important;

  filter:
    brightness(.36)
    saturate(.68)
    contrast(1.04)
    !important;

  transform:
    scale(1.025) !important;
}


#archives .archives-shade {
  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

  pointer-events:
    none !important;

  background:

    radial-gradient(
      ellipse at 50% 50%,
      rgba(0, 0, 0, .04),
      rgba(2, 5, 9, .58) 75%
    ),

    linear-gradient(
      180deg,
      rgba(2, 4, 8, .48),
      rgba(2, 4, 8, .14) 44%,
      rgba(2, 4, 8, .72)
    )
    !important;
}


#archives .archives-moonlight {
  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

  pointer-events:
    none !important;

  background:
    radial-gradient(
      ellipse at 77% 18%,
      rgba(167, 184, 205, .10),
      transparent 25%
    )
    !important;
}


/* =========================================================
   整冊古書
========================================================= */

#archives .archives-book {
  position: relative !important;

  z-index: 5 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    24px
    minmax(0, 1fr)
    !important;

  width:
    min(1380px, 84vw) !important;

  height:
    min(700px, 78vh) !important;

  min-height:
    590px !important;

  filter:
    drop-shadow(
      0 34px 55px
      rgba(0, 0, 0, .60)
    );
}


/* =========================================================
   書本深色皮革底殼
========================================================= */

#archives .archives-book-cover {
  position: absolute !important;

  inset:
    -16px -22px -20px !important;

  z-index:
    -3 !important;

  border:
    1px solid
    rgba(113, 69, 42, .55)
    !important;

  border-radius:
    4px 10px 12px 5px !important;

  background:

    linear-gradient(
      90deg,
      #120d0b 0%,
      #201510 46%,
      #0e0a09 50%,
      #1b120f 54%,
      #110c0b 100%
    )
    !important;

  box-shadow:

    inset
    0 0 0 3px
    rgba(77, 45, 28, .38),

    inset
    0 0 45px
    rgba(0, 0, 0, .75),

    0 30px 80px
    rgba(0, 0, 0, .55)
    !important;
}


/* =========================================================
   左右紙頁
========================================================= */

#archives .archives-book-page {
  position: relative !important;

  min-width:
    0 !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(163, 126, 78, .26)
    !important;

  background:

    radial-gradient(
      circle at 20% 8%,
      rgba(202, 171, 119, .075),
      transparent 30%
    ),

    radial-gradient(
      circle at 82% 90%,
      rgba(137, 92, 52, .055),
      transparent 28%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(226, 206, 168, .012) 0px,
      rgba(226, 206, 168, .012) 1px,
      transparent 1px,
      transparent 5px
    ),

    linear-gradient(
      100deg,
      rgba(35, 30, 24, .97),
      rgba(24, 22, 19, .98)
    )
    !important;

  box-shadow:

    inset
    0 0 70px
    rgba(0, 0, 0, .38),

    inset
    0 0 0 8px
    rgba(190, 150, 92, .018)
    !important;
}


/* 左頁紙張 */

#archives .archives-book-left {
  padding:
    54px 64px
    48px 60px !important;

  border-radius:
    3px 0 0 5px !important;

  background:

    radial-gradient(
      ellipse at 20% 10%,
      rgba(201, 166, 108, .075),
      transparent 38%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(255, 240, 205, .012) 0px,
      rgba(255, 240, 205, .012) 1px,
      transparent 1px,
      transparent 6px
    ),

    linear-gradient(
      96deg,
      #211d18 0%,
      #252019 70%,
      #171411 100%
    )
    !important;

  box-shadow:

    inset
    -35px 0 45px
    rgba(0, 0, 0, .34),

    inset
    18px 0 30px
    rgba(207, 166, 104, .025)
    !important;
}


/* 右頁紙張 */

#archives .archives-book-right {
  padding:
    54px 58px
    48px 64px !important;

  border-radius:
    0 5px 5px 0 !important;

  background:

    radial-gradient(
      ellipse at 76% 12%,
      rgba(201, 166, 108, .055),
      transparent 34%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(255, 240, 205, .012) 0px,
      rgba(255, 240, 205, .012) 1px,
      transparent 1px,
      transparent 6px
    ),

    linear-gradient(
      84deg,
      #171411 0%,
      #252019 28%,
      #211d18 100%
    )
    !important;

  box-shadow:

    inset
    35px 0 45px
    rgba(0, 0, 0, .34),

    inset
    -18px 0 30px
    rgba(207, 166, 104, .022)
    !important;
}


/* =========================================================
   中央書脊
========================================================= */

#archives .archives-book-spine {
  position: relative !important;

  z-index: 4 !important;

  width:
    24px !important;

  background:

    linear-gradient(
      90deg,
      rgba(0, 0, 0, .45),
      rgba(190, 148, 89, .06) 38%,
      rgba(0, 0, 0, .78) 50%,
      rgba(190, 148, 89, .05) 62%,
      rgba(0, 0, 0, .44)
    )
    !important;

  box-shadow:

    -10px 0 22px
    rgba(0, 0, 0, .38),

    10px 0 22px
    rgba(0, 0, 0, .38)
    !important;
}


#archives .archives-book-spine::before {
  content:
    "" !important;

  position:
    absolute !important;

  left:
    50% !important;

  top:
    4% !important;

  bottom:
    4% !important;

  width:
    1px !important;

  transform:
    translateX(-50%) !important;

  background:
    rgba(199, 157, 96, .14)
    !important;
}


/* =========================================================
   紙頁護角
========================================================= */

#archives .archives-page-corner {
  position:
    absolute !important;

  width:
    38px !important;

  height:
    38px !important;

  opacity:
    .55 !important;

  pointer-events:
    none !important;
}


#archives .archives-page-corner-tl {
  top: 17px !important;
  left: 17px !important;

  border-top:
    1px solid rgba(191, 150, 91, .48) !important;

  border-left:
    1px solid rgba(191, 150, 91, .48) !important;
}


#archives .archives-page-corner-bl {
  bottom: 17px !important;
  left: 17px !important;

  border-bottom:
    1px solid rgba(191, 150, 91, .38) !important;

  border-left:
    1px solid rgba(191, 150, 91, .38) !important;
}


#archives .archives-page-corner-tr {
  top: 17px !important;
  right: 17px !important;

  border-top:
    1px solid rgba(191, 150, 91, .48) !important;

  border-right:
    1px solid rgba(191, 150, 91, .48) !important;
}


#archives .archives-page-corner-br {
  bottom: 17px !important;
  right: 17px !important;

  border-bottom:
    1px solid rgba(191, 150, 91, .38) !important;

  border-right:
    1px solid rgba(191, 150, 91, .38) !important;
}


/* =========================================================
   左頁標題
========================================================= */

#archives .archives-kicker {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    14px !important;

  margin:
    0 0 28px !important;

  color:
    rgba(206, 165, 102, .72)
    !important;
}


#archives .archives-kicker span {
  font-size:
    10px !important;

  letter-spacing:
    .20em !important;
}


#archives .archives-kicker i {
  width:
    42px !important;

  height:
    1px !important;

  background:
    rgba(190, 148, 90, .40)
    !important;
}


#archives .archives-kicker em {
  font-size:
    9px !important;

  font-style:
    normal !important;

  letter-spacing:
    .30em !important;
}


#archives .archives-small-title {
  margin:
    0 0 17px !important;

  color:
    rgba(196, 162, 112, .68)
    !important;

  font-size:
    13px !important;

  letter-spacing:
    .16em !important;
}


#archives .archives-book-left h2 {
  margin:
    0 !important;

  color:
    #e8d9bd !important;

  font-family:
    "Noto Serif TC",
    "Songti TC",
    "PMingLiU",
    serif !important;

  font-size:
    clamp(
      62px,
      5vw,
      88px
    ) !important;

  font-weight:
    400 !important;

  line-height:
    1.12 !important;

  letter-spacing:
    .12em !important;

  text-shadow:
    0 2px 10px
    rgba(0, 0, 0, .34)
    !important;
}


#archives .archives-title-line {
  width:
    170px !important;

  height:
    1px !important;

  margin:
    28px 0
    24px !important;

  background:
    linear-gradient(
      90deg,
      rgba(194, 150, 89, .58),
      transparent
    )
    !important;
}


#archives .archives-intro {
  max-width:
    420px !important;

  margin:
    0 !important;

  color:
    rgba(217, 201, 173, .72)
    !important;

  font-size:
    15px !important;

  line-height:
    2.05 !important;

  letter-spacing:
    .055em !important;
}


/* =========================================================
   左頁印記
========================================================= */

#archives .archives-book-seal {
  position:
    absolute !important;

  right:
    54px !important;

  bottom:
    64px !important;

  display:
    grid !important;

  place-items:
    center !important;

  width:
    82px !important;

  height:
    82px !important;

  border:
    1px solid
    rgba(133, 57, 45, .52)
    !important;

  transform:
    rotate(-4deg) !important;

  color:
    rgba(157, 71, 55, .70)
    !important;
}


#archives .archives-book-seal::before {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    7px !important;

  border:
    1px solid
    rgba(133, 57, 45, .36)
    !important;
}


#archives .archives-book-seal span {
  font-size:
    29px !important;

  line-height:
    1 !important;
}


#archives .archives-book-seal em {
  position:
    absolute !important;

  bottom:
    8px !important;

  font-size:
    5px !important;

  font-style:
    normal !important;

  letter-spacing:
    .16em !important;
}


/* =========================================================
   右頁目錄
========================================================= */

#archives .archives-index-head {
  padding-bottom:
    20px !important;

  border-bottom:
    1px solid
    rgba(186, 145, 87, .20)
    !important;
}


#archives .archives-index-head span {
  color:
    rgba(190, 149, 91, .58)
    !important;

  font-size:
    8px !important;

  letter-spacing:
    .26em !important;
}


#archives .archives-index-head h3 {
  margin:
    7px 0 4px !important;

  color:
    rgba(233, 217, 190, .94)
    !important;

  font-size:
    30px !important;

  font-weight:
    400 !important;

  letter-spacing:
    .12em !important;
}


#archives .archives-index-head p {
  margin:
    0 !important;

  color:
    rgba(192, 178, 154, .50)
    !important;

  font-size:
    11px !important;

  letter-spacing:
    .08em !important;
}


/* =========================================================
   三條卷目
========================================================= */

#archives .archives-index-list {
  margin-top:
    12px !important;
}


#archives .archive-volume {
  position:
    relative !important;

  display:
    grid !important;

  grid-template-columns:
    46px
    1fr
    52px !important;

  align-items:
    center !important;

  width:
    100% !important;

  min-height:
    118px !important;

  padding:
    16px 10px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(178, 137, 82, .18)
    !important;

  background:
    transparent !important;

  color:
    inherit !important;

  text-align:
    left !important;

  cursor:
    pointer !important;

  transition:
    background .30s ease,
    padding-left .30s ease
    !important;
}


#archives .archive-volume:hover {
  padding-left:
    18px !important;

  background:
    linear-gradient(
      90deg,
      rgba(150, 99, 51, .075),
      transparent 72%
    )
    !important;
}


#archives .archive-volume-number {
  align-self:
    start !important;

  padding-top:
    8px !important;

  color:
    rgba(193, 151, 91, .46)
    !important;

  font-size:
    9px !important;

  letter-spacing:
    .18em !important;
}


#archives .archive-volume-copy em {
  display:
    block !important;

  margin-bottom:
    4px !important;

  color:
    rgba(187, 146, 86, .52)
    !important;

  font-size:
    7px !important;

  font-style:
    normal !important;

  letter-spacing:
    .24em !important;
}


#archives .archive-volume-copy strong {
  display:
    block !important;

  margin-bottom:
    5px !important;

  color:
    rgba(235, 219, 190, .92)
    !important;

  font-size:
    25px !important;

  font-weight:
    400 !important;

  letter-spacing:
    .11em !important;
}


#archives .archive-volume-copy p {
  margin:
    0 !important;

  color:
    rgba(198, 183, 157, .52)
    !important;

  font-size:
    11px !important;

  line-height:
    1.65 !important;
}


#archives .archive-volume-open {
  display:
    grid !important;

  place-items:
    center !important;

  width:
    36px !important;

  height:
    36px !important;

  justify-self:
    end !important;

  border:
    1px solid
    rgba(192, 149, 89, .24)
    !important;

  color:
    rgba(197, 154, 93, .48)
    !important;

  font-size:
    10px !important;

  transition:
    border-color .30s ease,
    color .30s ease,
    background .30s ease
    !important;
}


#archives
.archive-volume:hover
.archive-volume-open {
  border-color:
    rgba(211, 165, 96, .58)
    !important;

  color:
    rgba(225, 184, 113, .88)
    !important;

  background:
    rgba(148, 96, 47, .06)
    !important;
}


/* 秘藏 */

#archives .archive-volume-sealed {
  cursor:
    default !important;

  opacity:
    .58 !important;
}


#archives .archive-volume-sealed:hover {
  padding-left:
    10px !important;

  background:
    linear-gradient(
      90deg,
      rgba(104, 37, 32, .05),
      transparent
    )
    !important;
}


#archives
.archive-volume-sealed
.archive-volume-open {
  border-color:
    rgba(137, 57, 48, .42)
    !important;

  color:
    rgba(160, 72, 58, .68)
    !important;
}


/* =========================================================
   頁碼
========================================================= */

#archives .archives-page-number {
  position:
    absolute !important;

  bottom:
    22px !important;

  margin:
    0 !important;

  color:
    rgba(183, 144, 86, .28)
    !important;

  font-size:
    7px !important;

  letter-spacing:
    .26em !important;
}


#archives
.archives-book-left
.archives-page-number {
  left:
    50% !important;

  transform:
    translateX(-50%) !important;
}


#archives
.archives-book-right
.archives-page-number {
  right:
    50% !important;

  transform:
    translateX(50%) !important;
}


/* =========================================================
   右頁底部索引
========================================================= */

#archives .archives-index-footer {
  display:
    flex !important;

  align-items:
    center !important;

  gap:
    10px !important;

  margin-top:
    18px !important;

  color:
    rgba(181, 141, 83, .30)
    !important;
}


#archives .archives-index-footer span {
  font-size:
    6px !important;

  letter-spacing:
    .20em !important;
}


#archives .archives-index-footer i {
  width:
    20px !important;

  height:
    1px !important;

  background:
    rgba(182, 141, 83, .20)
    !important;
}


/* =========================================================
   響應式
========================================================= */

@media (max-width: 850px) {

  #archives .archives-book {
    width:
      90vw !important;

    height:
      min(680px, 78vh) !important;
  }


  #archives .archives-book-left {
    padding:
      48px 40px !important;
  }


  #archives .archives-book-right {
    padding:
      48px 40px !important;
  }

}


@media (max-width: 760px) {

  #archives.archives-section {
    min-height:
      auto !important;

    padding:
      70px 5vw !important;
  }


  #archives .archives-book {
    display:
      block !important;

    width:
      94vw !important;

    height:
      auto !important;
  }


  #archives .archives-book-spine {
    display:
      none !important;
  }


  #archives .archives-book-page {
    min-height:
      580px !important;
  }


  #archives .archives-book-left {
    border-radius:
      4px 4px 0 0 !important;
  }


  #archives .archives-book-right {
    border-radius:
      0 0 4px 4px !important;
  }

}
/* =========================================================
   05｜月下藏卷
   老舊泛黃古書質感覆蓋版
   直接貼 style.css 最底
========================================================= */


/* =========================================================
   整本書稍微更厚重、更舊
========================================================= */

#archives .archives-book {
  filter:
    drop-shadow(
      0 38px 60px
      rgba(0, 0, 0, .72)
    )
    sepia(.12)
    !important;
}


/* =========================================================
   書皮改成舊皮革
========================================================= */

#archives .archives-book-cover {
  background:

    radial-gradient(
      circle at 18% 22%,
      rgba(98, 56, 30, .24),
      transparent 26%
    ),

    radial-gradient(
      circle at 82% 76%,
      rgba(52, 22, 13, .30),
      transparent 28%
    ),

    repeating-linear-gradient(
      92deg,
      rgba(255, 255, 255, .012) 0px,
      rgba(255, 255, 255, .012) 1px,
      transparent 1px,
      transparent 7px
    ),

    linear-gradient(
      90deg,
      #160d08 0%,
      #2a170d 46%,
      #0d0806 50%,
      #27140c 54%,
      #130b07 100%
    )
    !important;

  border:
    1px solid
    rgba(104, 59, 32, .74)
    !important;

  box-shadow:

    inset
    0 0 0 3px
    rgba(88, 45, 24, .46),

    inset
    0 0 70px
    rgba(0, 0, 0, .80),

    0 36px 90px
    rgba(0, 0, 0, .68)
    !important;
}


/* =========================================================
   左右兩頁共通
   真正泛黃紙張
========================================================= */

#archives .archives-book-page {
  border:
    1px solid
    rgba(112, 76, 39, .42)
    !important;

  color:
    #3c2a18 !important;

  background:

    /* 水漬 */
    radial-gradient(
      ellipse at 18% 14%,
      rgba(112, 69, 31, .12),
      transparent 19%
    ),

    radial-gradient(
      ellipse at 83% 78%,
      rgba(88, 49, 20, .10),
      transparent 23%
    ),

    radial-gradient(
      ellipse at 58% 42%,
      rgba(141, 98, 49, .065),
      transparent 18%
    ),

    /* 舊紙斑點 */
    radial-gradient(
      circle at 13% 71%,
      rgba(70, 38, 18, .14) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 71% 18%,
      rgba(70, 38, 18, .12) 0 1px,
      transparent 2px
    ),

    radial-gradient(
      circle at 41% 82%,
      rgba(70, 38, 18, .09) 0 1px,
      transparent 2px
    ),

    /* 纖維 */
    repeating-linear-gradient(
      0deg,
      rgba(85, 55, 27, .025) 0px,
      rgba(85, 55, 27, .025) 1px,
      transparent 1px,
      transparent 4px
    ),

    repeating-linear-gradient(
      90deg,
      rgba(103, 70, 36, .018) 0px,
      rgba(103, 70, 36, .018) 1px,
      transparent 1px,
      transparent 9px
    ),

    /* 紙張本色 */
    linear-gradient(
      105deg,
      #b79b67 0%,
      #d1b982 19%,
      #c8aa70 46%,
      #d2b77d 72%,
      #aa8956 100%
    )
    !important;

  box-shadow:

    inset
    0 0 85px
    rgba(55, 30, 12, .28),

    inset
    0 0 0 7px
    rgba(86, 50, 24, .035)
    !important;

  filter:
    sepia(.16)
    saturate(.84)
    contrast(1.04)
    !important;
}


/* =========================================================
   左頁
========================================================= */

#archives .archives-book-left {
  background:

    radial-gradient(
      ellipse at 15% 16%,
      rgba(105, 61, 26, .14),
      transparent 24%
    ),

    radial-gradient(
      ellipse at 80% 76%,
      rgba(76, 40, 17, .08),
      transparent 26%
    ),

    radial-gradient(
      circle at 28% 62%,
      rgba(73, 41, 18, .13) 0 1px,
      transparent 2px
    ),

    repeating-linear-gradient(
      0deg,
      rgba(73, 48, 22, .024) 0px,
      rgba(73, 48, 22, .024) 1px,
      transparent 1px,
      transparent 4px
    ),

    linear-gradient(
      96deg,
      #a98451 0%,
      #c9aa72 8%,
      #d5bd88 35%,
      #c7a76d 72%,
      #9b7747 100%
    )
    !important;

  box-shadow:

    inset
    -44px 0 58px
    rgba(55, 30, 13, .32),

    inset
    18px 0 26px
    rgba(255, 226, 163, .08)
    !important;

  clip-path:
    polygon(
      1.2% 0.8%,
      8% 0.2%,
      16% 1.1%,
      25% 0.4%,
      37% 1.0%,
      48% 0.3%,
      59% 0.9%,
      70% 0.4%,
      82% 1.0%,
      93% 0.2%,
      99.1% 1.4%,

      99.6% 10%,
      99.2% 22%,
      99.8% 35%,
      99.3% 48%,
      99.8% 61%,
      99.2% 75%,
      99.7% 89%,
      98.9% 98.7%,

      90% 99.3%,
      80% 98.8%,
      68% 99.6%,
      56% 98.9%,
      44% 99.5%,
      31% 98.8%,
      20% 99.4%,
      10% 98.9%,
      1.0% 99.5%,

      0.4% 88%,
      0.9% 76%,
      0.3% 63%,
      0.8% 49%,
      0.2% 36%,
      0.9% 23%,
      0.3% 10%
    )
    !important;
}


/* =========================================================
   右頁
========================================================= */

#archives .archives-book-right {
  background:

    radial-gradient(
      ellipse at 78% 18%,
      rgba(107, 62, 28, .12),
      transparent 25%
    ),

    radial-gradient(
      ellipse at 27% 83%,
      rgba(78, 43, 18, .10),
      transparent 22%
    ),

    radial-gradient(
      circle at 64% 57%,
      rgba(71, 39, 16, .12) 0 1px,
      transparent 2px
    ),

    repeating-linear-gradient(
      0deg,
      rgba(73, 48, 22, .024) 0px,
      rgba(73, 48, 22, .024) 1px,
      transparent 1px,
      transparent 4px
    ),

    linear-gradient(
      84deg,
      #987445 0%,
      #c5a46c 10%,
      #d3ba84 42%,
      #c8a970 72%,
      #a47f4c 100%
    )
    !important;

  box-shadow:

    inset
    44px 0 58px
    rgba(55, 30, 13, .32),

    inset
    -18px 0 26px
    rgba(255, 226, 163, .07)
    !important;

  clip-path:
    polygon(
      .9% 1.3%,
      9% .4%,
      18% 1%,
      29% .2%,
      41% 1.1%,
      53% .3%,
      65% .9%,
      77% .4%,
      89% 1.1%,
      98.7% .3%,

      99.5% 10%,
      99% 23%,
      99.7% 37%,
      99.1% 52%,
      99.8% 66%,
      99.2% 80%,
      99.7% 91%,
      98.9% 99%,

      90% 98.5%,
      80% 99.3%,
      68% 98.7%,
      57% 99.6%,
      45% 98.8%,
      33% 99.4%,
      21% 98.9%,
      10% 99.5%,
      .9% 98.7%,

      .4% 88%,
      .8% 75%,
      .2% 62%,
      .9% 48%,
      .3% 35%,
      .8% 21%,
      .2% 9%
    )
    !important;
}


/* =========================================================
   紙頁焦黑／破損邊
========================================================= */

#archives .archives-book-left::after,
#archives .archives-book-right::after {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    0 !important;

  pointer-events:
    none !important;

  background:

    linear-gradient(
      90deg,
      rgba(53, 28, 12, .20),
      transparent 6%,
      transparent 94%,
      rgba(53, 28, 12, .18)
    ),

    linear-gradient(
      180deg,
      rgba(65, 35, 15, .18),
      transparent 6%,
      transparent 94%,
      rgba(65, 35, 15, .22)
    ),

    radial-gradient(
      ellipse at 2% 12%,
      rgba(49, 23, 10, .34),
      transparent 8%
    ),

    radial-gradient(
      ellipse at 98% 88%,
      rgba(49, 23, 10, .28),
      transparent 9%
    )
    !important;

  mix-blend-mode:
    multiply !important;
}


/* 內容永遠壓在紙張污漬上面 */

#archives .archives-book-page > * {
  position:
    relative !important;

  z-index:
    2 !important;
}


/* =========================================================
   中央書脊更舊
========================================================= */

#archives .archives-book-spine {
  background:

    repeating-linear-gradient(
      0deg,
      rgba(83, 47, 26, .12) 0px,
      rgba(83, 47, 26, .12) 1px,
      transparent 1px,
      transparent 6px
    ),

    linear-gradient(
      90deg,
      rgba(39, 20, 10, .65),
      rgba(110, 72, 36, .30) 30%,
      rgba(29, 15, 8, .92) 50%,
      rgba(108, 68, 34, .28) 70%,
      rgba(38, 19, 10, .64)
    )
    !important;

  box-shadow:

    -12px 0 25px
    rgba(46, 25, 12, .34),

    12px 0 25px
    rgba(46, 25, 12, .34)
    !important;
}


/* =========================================================
   左頁文字改成舊墨色
========================================================= */

#archives .archives-kicker,
#archives .archives-kicker span,
#archives .archives-kicker em {
  color:
    rgba(94, 56, 28, .78)
    !important;
}


#archives .archives-kicker i {
  background:
    rgba(105, 65, 34, .46)
    !important;
}


#archives .archives-small-title {
  color:
    rgba(87, 52, 26, .76)
    !important;
}


#archives .archives-book-left h2 {
  color:
    #4c2f19 !important;

  text-shadow:
    0 1px 0
    rgba(255, 239, 198, .14)
    !important;
}


#archives .archives-title-line {
  background:
    linear-gradient(
      90deg,
      rgba(87, 50, 25, .58),
      transparent
    )
    !important;
}


#archives .archives-intro {
  color:
    rgba(66, 42, 23, .82)
    !important;
}


/* =========================================================
   右頁標題／目錄改成舊墨
========================================================= */

#archives .archives-index-head {
  border-bottom-color:
    rgba(88, 52, 27, .28)
    !important;
}


#archives .archives-index-head span {
  color:
    rgba(92, 55, 29, .66)
    !important;
}


#archives .archives-index-head h3 {
  color:
    #4b2e18 !important;
}


#archives .archives-index-head p {
  color:
    rgba(79, 49, 26, .62)
    !important;
}


/* =========================================================
   卷目
========================================================= */

#archives .archive-volume {
  border-bottom-color:
    rgba(91, 55, 29, .24)
    !important;

  color:
    #4a2d18 !important;
}


#archives .archive-volume:hover {
  background:
    linear-gradient(
      90deg,
      rgba(95, 55, 27, .10),
      transparent 76%
    )
    !important;
}


#archives .archive-volume-number {
  color:
    rgba(93, 54, 27, .58)
    !important;
}


#archives .archive-volume-copy em {
  color:
    rgba(95, 57, 29, .58)
    !important;
}


#archives .archive-volume-copy strong {
  color:
    #4b2d17 !important;
}


#archives .archive-volume-copy p {
  color:
    rgba(72, 44, 23, .66)
    !important;
}


#archives .archive-volume-open {
  border-color:
    rgba(90, 50, 24, .34)
    !important;

  color:
    rgba(83, 46, 22, .68)
    !important;
}


#archives
.archive-volume:hover
.archive-volume-open {
  border-color:
    rgba(85, 44, 18, .58)
    !important;

  color:
    rgba(64, 33, 16, .88)
    !important;

  background:
    rgba(92, 52, 26, .08)
    !important;
}


/* =========================================================
   秘藏做成陳舊封條感
========================================================= */

#archives .archive-volume-sealed {
  opacity:
    .72 !important;

  background:
    linear-gradient(
      90deg,
      rgba(116, 54, 37, .07),
      transparent 65%
    )
    !important;
}


#archives
.archive-volume-sealed
.archive-volume-open {
  border-color:
    rgba(121, 45, 32, .50)
    !important;

  color:
    rgba(112, 43, 31, .78)
    !important;

  transform:
    rotate(-5deg)
    !important;
}


/* =========================================================
   紅印更像老印泥
========================================================= */

#archives .archives-book-seal {
  border-color:
    rgba(117, 39, 30, .68)
    !important;

  color:
    rgba(119, 40, 30, .78)
    !important;

  filter:
    blur(.15px)
    contrast(.92)
    !important;
}


#archives .archives-book-seal::before {
  border-color:
    rgba(119, 40, 30, .46)
    !important;
}


/* =========================================================
   頁碼
========================================================= */

#archives .archives-page-number {
  color:
    rgba(78, 46, 24, .42)
    !important;
}


#archives .archives-index-footer {
  color:
    rgba(80, 47, 24, .42)
    !important;
}


#archives .archives-index-footer i {
  background:
    rgba(82, 48, 24, .26)
    !important;
}
/* =========================================================
   05｜月下藏卷
   東亞舊籍・冷灰舊紙版
   直接貼 style.css 最底
========================================================= */


/* =========================================================
   整本書：取消羊皮紙感
========================================================= */

#archives .archives-book {
  filter:
    drop-shadow(
      0 34px 60px
      rgba(0, 0, 0, .70)
    )
    !important;
}


/* =========================================================
   舊書皮：黑褐，不要橘棕
========================================================= */

#archives .archives-book-cover {
  border:
    1px solid
    rgba(87, 68, 47, .62)
    !important;

  background:

    radial-gradient(
      ellipse at 20% 18%,
      rgba(104, 82, 53, .08),
      transparent 32%
    ),

    radial-gradient(
      ellipse at 82% 78%,
      rgba(55, 38, 25, .20),
      transparent 30%
    ),

    linear-gradient(
      90deg,
      #0f0d0b 0%,
      #18130f 46%,
      #090807 50%,
      #17120e 54%,
      #0d0b09 100%
    )
    !important;

  box-shadow:

    inset
    0 0 0 2px
    rgba(91, 69, 43, .22),

    inset
    0 0 70px
    rgba(0, 0, 0, .82),

    0 34px 85px
    rgba(0, 0, 0, .66)
    !important;
}


/* =========================================================
   紙張本體
   重點：冷灰米褐，不是黃
========================================================= */

#archives .archives-book-page {
  border:
    1px solid
    rgba(106, 92, 69, .28)
    !important;

  color:
    #2f2a22 !important;

  clip-path:
    none !important;

  filter:
    none !important;

  background:

    /* 輕微受潮 */
    radial-gradient(
      ellipse at 16% 15%,
      rgba(74, 61, 44, .075),
      transparent 24%
    ),

    radial-gradient(
      ellipse at 82% 78%,
      rgba(64, 52, 39, .06),
      transparent 25%
    ),

    /* 少量氧化斑 */
    radial-gradient(
      circle at 21% 73%,
      rgba(55, 45, 33, .10) 0 1px,
      transparent 1.8px
    ),

    radial-gradient(
      circle at 69% 22%,
      rgba(55, 45, 33, .08) 0 1px,
      transparent 1.8px
    ),

    radial-gradient(
      circle at 86% 57%,
      rgba(55, 45, 33, .07) 0 1px,
      transparent 1.8px
    ),

    /* 紙纖維 */
    repeating-linear-gradient(
      0deg,
      rgba(55, 48, 37, .020) 0px,
      rgba(55, 48, 37, .020) 1px,
      transparent 1px,
      transparent 5px
    ),

    /* 冷灰舊紙 */
    linear-gradient(
      102deg,
      #706858 0%,
      #8b826f 13%,
      #99917d 38%,
      #928975 68%,
      #746b59 100%
    )
    !important;

  box-shadow:

    inset
    0 0 75px
    rgba(31, 25, 18, .24),

    inset
    0 0 0 7px
    rgba(255, 244, 219, .012)
    !important;
}


/* =========================================================
   左頁
========================================================= */

#archives .archives-book-left {
  background:

    radial-gradient(
      ellipse at 12% 18%,
      rgba(55, 45, 32, .095),
      transparent 28%
    ),

    radial-gradient(
      ellipse at 78% 82%,
      rgba(41, 35, 27, .055),
      transparent 25%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(49, 43, 34, .018) 0px,
      rgba(49, 43, 34, .018) 1px,
      transparent 1px,
      transparent 5px
    ),

    linear-gradient(
      96deg,
      #655e50 0%,
      #837b69 8%,
      #958d79 40%,
      #8b826f 74%,
      #625a4b 100%
    )
    !important;

  box-shadow:

    inset
    -42px 0 56px
    rgba(29, 24, 18, .34),

    inset
    15px 0 24px
    rgba(184, 176, 154, .025)
    !important;
}


/* =========================================================
   右頁
========================================================= */

#archives .archives-book-right {
  background:

    radial-gradient(
      ellipse at 82% 16%,
      rgba(55, 45, 32, .080),
      transparent 28%
    ),

    radial-gradient(
      ellipse at 22% 84%,
      rgba(41, 35, 27, .055),
      transparent 24%
    ),

    repeating-linear-gradient(
      0deg,
      rgba(49, 43, 34, .018) 0px,
      rgba(49, 43, 34, .018) 1px,
      transparent 1px,
      transparent 5px
    ),

    linear-gradient(
      84deg,
      #625a4b 0%,
      #88806d 9%,
      #958d79 42%,
      #887f6c 73%,
      #625a4b 100%
    )
    !important;

  box-shadow:

    inset
    42px 0 56px
    rgba(29, 24, 18, .34),

    inset
    -15px 0 24px
    rgba(184, 176, 154, .025)
    !important;
}


/* =========================================================
   舊紙邊緣
   不做鋸齒，改成自然暗化＋磨損
========================================================= */

#archives .archives-book-left::after,
#archives .archives-book-right::after {
  content:
    "" !important;

  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    0 !important;

  pointer-events:
    none !important;

  background:

    linear-gradient(
      90deg,
      rgba(23, 19, 14, .24),
      transparent 5%,
      transparent 95%,
      rgba(23, 19, 14, .22)
    ),

    linear-gradient(
      180deg,
      rgba(25, 20, 14, .20),
      transparent 5%,
      transparent 94%,
      rgba(25, 20, 14, .24)
    ),

    radial-gradient(
      ellipse at 0% 12%,
      rgba(31, 23, 14, .25),
      transparent 7%
    ),

    radial-gradient(
      ellipse at 100% 89%,
      rgba(31, 23, 14, .22),
      transparent 8%
    )
    !important;

  mix-blend-mode:
    multiply !important;
}


/* =========================================================
   紙頁四角做「磨損」而不是破布
========================================================= */

#archives .archives-page-corner {
  opacity:
    .28 !important;

  border-color:
    rgba(70, 56, 38, .34)
    !important;
}


/* =========================================================
   中央書脊：黑木／舊皮革
========================================================= */

#archives .archives-book-spine {
  background:

    repeating-linear-gradient(
      0deg,
      rgba(97, 75, 47, .05) 0px,
      rgba(97, 75, 47, .05) 1px,
      transparent 1px,
      transparent 7px
    ),

    linear-gradient(
      90deg,
      rgba(15, 12, 9, .72),
      rgba(61, 47, 31, .34) 30%,
      rgba(8, 7, 6, .94) 50%,
      rgba(61, 47, 31, .32) 70%,
      rgba(15, 12, 9, .72)
    )
    !important;

  box-shadow:

    -12px 0 24px
    rgba(10, 8, 6, .36),

    12px 0 24px
    rgba(10, 8, 6, .36)
    !important;
}


/* =========================================================
   左頁字：舊墨灰褐，不是純黑
========================================================= */

#archives .archives-kicker,
#archives .archives-kicker span,
#archives .archives-kicker em {
  color:
    rgba(55, 48, 38, .72)
    !important;
}


#archives .archives-kicker i {
  background:
    rgba(59, 50, 38, .36)
    !important;
}


#archives .archives-small-title {
  color:
    rgba(52, 46, 37, .72)
    !important;
}


#archives .archives-book-left h2 {
  color:
    #332d24 !important;

  text-shadow:
    none !important;
}


#archives .archives-title-line {
  background:
    linear-gradient(
      90deg,
      rgba(50, 43, 34, .42),
      transparent
    )
    !important;
}


#archives .archives-intro {
  color:
    rgba(47, 41, 33, .78)
    !important;
}


/* =========================================================
   右頁目錄
========================================================= */

#archives .archives-index-head {
  border-bottom-color:
    rgba(58, 49, 38, .23)
    !important;
}


#archives .archives-index-head span {
  color:
    rgba(54, 47, 38, .58)
    !important;
}


#archives .archives-index-head h3 {
  color:
    #332d24 !important;
}


#archives .archives-index-head p {
  color:
    rgba(49, 43, 35, .58)
    !important;
}


/* =========================================================
   右頁三卷
========================================================= */

#archives .archive-volume {
  border-bottom-color:
    rgba(59, 50, 39, .20)
    !important;

  color:
    #302b23 !important;
}


#archives .archive-volume:hover {
  background:
    linear-gradient(
      90deg,
      rgba(44, 38, 30, .055),
      transparent 76%
    )
    !important;
}


#archives .archive-volume-number {
  color:
    rgba(52, 45, 36, .52)
    !important;
}


#archives .archive-volume-copy em {
  color:
    rgba(52, 45, 36, .50)
    !important;
}


#archives .archive-volume-copy strong {
  color:
    #332d24 !important;
}


#archives .archive-volume-copy p {
  color:
    rgba(48, 41, 33, .60)
    !important;
}


#archives .archive-volume-open {
  border-color:
    rgba(56, 47, 36, .30)
    !important;

  color:
    rgba(52, 44, 35, .62)
    !important;
}


#archives
.archive-volume:hover
.archive-volume-open {
  border-color:
    rgba(48, 40, 31, .48)
    !important;

  color:
    rgba(39, 33, 26, .82)
    !important;

  background:
    rgba(37, 31, 24, .05)
    !important;
}


/* =========================================================
   秘藏：舊暗紅，不搶畫面
========================================================= */

#archives .archive-volume-sealed {
  opacity:
    .68 !important;

  background:
    linear-gradient(
      90deg,
      rgba(83, 42, 36, .04),
      transparent 68%
    )
    !important;
}


#archives
.archive-volume-sealed
.archive-volume-open {
  border-color:
    rgba(98, 50, 42, .42)
    !important;

  color:
    rgba(92, 46, 39, .68)
    !important;
}


/* =========================================================
   印章：褪色暗紅
========================================================= */

#archives .archives-book-seal {
  border-color:
    rgba(92, 43, 38, .45)
    !important;

  color:
    rgba(92, 43, 38, .56)
    !important;

  filter:
    none !important;
}


#archives .archives-book-seal::before {
  border-color:
    rgba(92, 43, 38, .28)
    !important;
}


/* =========================================================
   頁碼 / 底部
========================================================= */

#archives .archives-page-number,
#archives .archives-index-footer {
  color:
    rgba(52, 45, 36, .34)
    !important;
}


#archives .archives-index-footer i {
  background:
    rgba(54, 46, 36, .20)
    !important;
}
/* =========================================================
   05｜月下藏卷
   三座封存琉璃藏器版
========================================================= */


/* =========================================================
   SECTION
========================================================= */

#archives.archives-vessel-section {
  position: relative !important;

  min-height: 100vh !important;

  padding:
    7vh 7vw
    5vh !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;

  isolation:
    isolate !important;

  background:
    #03060b !important;

  color:
    rgba(239, 228, 208, .94)
    !important;
}


/* =========================================================
   背景
========================================================= */

#archives .archives-vessel-bg {
  position: absolute;

  inset: 0;

  z-index: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center;

  filter:
    brightness(.48)
    saturate(.72)
    contrast(1.05);

  transform:
    scale(1.02);
}


#archives .archives-vessel-shade {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      rgba(2, 4, 8, .86) 0%,
      rgba(2, 4, 8, .64) 27%,
      rgba(2, 4, 8, .30) 54%,
      rgba(2, 4, 8, .68) 100%
    ),

    linear-gradient(
      180deg,
      rgba(2, 4, 8, .58),
      rgba(2, 4, 8, .08) 48%,
      rgba(2, 4, 8, .74)
    );
}


#archives .archives-vessel-light {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    radial-gradient(
      ellipse at 50% 55%,
      rgba(132, 155, 178, .055),
      transparent 42%
    ),

    radial-gradient(
      ellipse at 79% 16%,
      rgba(178, 190, 204, .075),
      transparent 24%
    );
}


/* =========================================================
   HEADER
========================================================= */

#archives .archives-vessel-header {
  position: relative;

  z-index: 5;

  width:
    min(680px, 55vw);

  margin-bottom:
    2vh;
}


#archives .archives-vessel-kicker {
  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom:
    13px;

  color:
    rgba(194, 151, 87, .68);
}


#archives .archives-vessel-kicker span {
  font-size:
    10px;

  letter-spacing:
    .20em;
}


#archives .archives-vessel-kicker i {
  width:
    42px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(201, 159, 94, .58),
      transparent
    );
}


#archives .archives-vessel-kicker em {
  font-size:
    8px;

  font-style:
    normal;

  letter-spacing:
    .28em;
}


#archives .archives-vessel-small {
  margin:
    0 0 8px;

  color:
    rgba(207, 190, 162, .52);

  font-size:
    12px;

  letter-spacing:
    .13em;
}


#archives .archives-vessel-header h2 {
  margin:
    0;

  color:
    rgba(245, 233, 213, .97);

  font-size:
    clamp(
      48px,
      4.4vw,
      72px
    );

  font-weight:
    400;

  line-height:
    1.1;

  letter-spacing:
    .11em;
}


#archives .archives-vessel-rule {
  width:
    165px;

  height:
    1px;

  margin:
    18px 0
    15px;

  background:
    linear-gradient(
      90deg,
      rgba(203, 160, 94, .54),
      transparent
    );
}


#archives .archives-vessel-intro {
  max-width:
    600px;

  margin:
    0;

  color:
    rgba(220, 209, 190, .65);

  font-size:
    14px;

  line-height:
    1.9;

  letter-spacing:
    .05em;
}


/* =========================================================
   三藏器區
========================================================= */

#archives .archive-vessels {
  position: relative;

  z-index: 5;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  align-items: end;

  gap:
    clamp(
      25px,
      3vw,
      54px
    );

  width:
    min(1160px, 76vw);

  margin:
    0 auto;
}


/* =========================================================
   單一藏器
========================================================= */

#archives .archive-vessel {
  position: relative;

  min-width: 0;

  padding:
    0 12px
    18px;

  border:
    0;

  background:
    transparent;

  color:
    inherit;

  cursor:
    pointer;

  text-align:
    center;

  outline:
    none;

  transition:
    transform .38s ease,
    opacity .38s ease;
}


#archives .archive-vessel:hover {
  transform:
    translateY(-8px);
}


/* =========================================================
   序號
========================================================= */

#archives .archive-vessel-index {
  position: absolute;

  top:
    12px;

  left:
    8px;

  z-index:
    7;

  color:
    rgba(192, 150, 88, .43);

  font-size:
    9px;

  letter-spacing:
    .18em;
}


/* =========================================================
   藏器舞台
========================================================= */

#archives .archive-vessel-stage {
  position: relative;

  width:
    100%;

  height:
    clamp(
      330px,
      48vh,
      500px
    );

  display: flex;

  align-items: center;
  justify-content: center;
}


/* =========================================================
   PNG
========================================================= */

#archives .archive-vessel-image {
  position: relative;

  z-index: 4;

  display: block;

  max-width:
    100%;

  width:
    auto;

  height:
    100%;

  object-fit:
    contain;

  filter:
    brightness(.86)
    saturate(.88)
    drop-shadow(
      0 22px 26px
      rgba(0, 0, 0, .44)
    );

  transition:
    filter .38s ease,
    transform .38s ease;
}


#archives .archive-vessel:hover
.archive-vessel-image {
  filter:
    brightness(1.02)
    saturate(1)
    drop-shadow(
      0 24px 32px
      rgba(0, 0, 0, .54)
    );

  transform:
    scale(1.025);
}


/* =========================================================
   Aura
========================================================= */

#archives .archive-vessel-aura {
  position: absolute;

  z-index: 1;

  left:
    50%;

  top:
    52%;

  width:
    72%;

  aspect-ratio:
    1 / 1.35;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  opacity:
    .18;

  filter:
    blur(25px);

  transition:
    opacity .4s ease,
    transform .4s ease;
}


/* 畫卷 */

#archives
.archive-vessel-visual
.archive-vessel-aura {
  background:
    radial-gradient(
      ellipse,
      rgba(130, 175, 211, .24),
      rgba(112, 140, 165, .07) 50%,
      transparent 72%
    );
}


/* 聲藏 */

#archives
.archive-vessel-audio
.archive-vessel-aura {
  background:
    radial-gradient(
      ellipse,
      rgba(114, 104, 175, .26),
      rgba(68, 88, 137, .07) 52%,
      transparent 72%
    );
}


/* 秘藏 */

#archives
.archive-vessel-sealed
.archive-vessel-aura {
  background:
    radial-gradient(
      ellipse,
      rgba(121, 48, 45, .18),
      rgba(70, 24, 27, .05) 52%,
      transparent 72%
    );
}


#archives
.archive-vessel:hover
.archive-vessel-aura {
  opacity:
    .46;

  transform:
    translate(-50%, -50%)
    scale(1.10);
}


/* =========================================================
   蝶粒子
========================================================= */

#archives .archive-butterflies {
  position: absolute;

  z-index: 6;

  inset:
    15% 24% 14%;

  pointer-events:
    none;
}


#archives .archive-butterflies i {
  position: absolute;

  left:
    var(--x);

  top:
    var(--y);

  width:
    10px;

  height:
    7px;

  opacity:
    0;

  transform:
    translate(-50%, -50%)
    rotate(-18deg);

  filter:
    drop-shadow(
      0 0 5px
      currentColor
    );

  transition:
    opacity .28s ease;
}


/* 左翼 */

#archives
.archive-butterflies i::before,

#archives
.archive-butterflies i::after {
  content:
    "";

  position: absolute;

  top: 0;

  width:
    6px;

  height:
    7px;

  border-radius:
    70% 30% 65% 35%;

  background:
    currentColor;

  opacity:
    .78;
}


#archives
.archive-butterflies i::before {
  left:
    0;

  transform:
    rotate(-28deg);
}


#archives
.archive-butterflies i::after {
  right:
    0;

  transform:
    scaleX(-1)
    rotate(-28deg);
}


/* 三色 */

#archives
.archive-butterflies-visual {
  color:
    rgba(159, 202, 229, .88);
}


#archives
.archive-butterflies-audio {
  color:
    rgba(151, 133, 208, .82);
}


#archives
.archive-butterflies-sealed {
  color:
    rgba(144, 64, 59, .70);
}


/* hover 先浮出少量蝶 */

#archives
.archive-vessel:hover
.archive-butterflies i {
  opacity:
    .45;

  animation:
    archiveButterflyIdle
    2.5s ease-in-out
    infinite;

  animation-delay:
    var(--d);
}


@keyframes archiveButterflyIdle {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translate(0, 0)
      rotate(-14deg)
      scale(.82);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translate(5px, -10px)
      rotate(12deg)
      scale(1);
  }

}


/* =========================================================
   名稱
========================================================= */

#archives .archive-vessel-label {
  position: relative;

  z-index: 8;

  margin-top:
    -6px;

  padding-top:
    14px;

  border-top:
    1px solid
    rgba(187, 146, 86, .14);
}


#archives .archive-vessel-label em {
  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(190, 149, 88, .48);

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .24em;
}


#archives .archive-vessel-label strong {
  display:
    block;

  margin-bottom:
    7px;

  color:
    rgba(238, 222, 194, .86);

  font-size:
    26px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}


#archives .archive-vessel-label span {
  color:
    rgba(200, 188, 168, .44);

  font-size:
    10px;

  letter-spacing:
    .06em;
}


/* =========================================================
   秘藏封印
========================================================= */

#archives .archive-vessel-seal {
  position: absolute;

  z-index: 10;

  right:
    25%;

  bottom:
    88px;

  display: grid;

  place-items:
    center;

  width:
    37px;

  height:
    37px;

  border:
    1px solid
    rgba(135, 55, 49, .48);

  color:
    rgba(151, 66, 57, .68);

  transform:
    rotate(-7deg);

  pointer-events:
    none;
}


#archives .archive-vessel-seal span {
  font-size:
    13px;
}


/* =========================================================
   Footer
========================================================= */

#archives .archives-vessel-footer {
  position: relative;

  z-index: 5;

  display: flex;

  align-items: center;

  gap:
    14px;

  width:
    min(1160px, 76vw);

  margin:
    1.2vh auto 0;

  color:
    rgba(185, 145, 85, .27);
}


#archives .archives-vessel-footer span,
#archives .archives-vessel-footer em {
  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .22em;
}


#archives .archives-vessel-footer i {
  flex: 1;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(188, 146, 87, .17),
      rgba(188, 146, 87, .025)
    );
}


/* =========================================================
   CLICK｜甦醒動畫
========================================================= */

#archives
.archive-vessel.is-awakening {
  pointer-events:
    none;

  z-index:
    30;
}


#archives
.archive-vessel.is-awakening
.archive-vessel-image {
  animation:
    archiveJarAwaken
    .95s cubic-bezier(.3,.7,.2,1)
    forwards;
}


@keyframes archiveJarAwaken {

  0% {
    transform:
      scale(1);

    filter:
      brightness(1)
      saturate(1);
  }

  35% {
    transform:
      scale(1.035);

    filter:
      brightness(1.25)
      saturate(1.12);
  }

  65% {
    transform:
      scale(.99);

    filter:
      brightness(1.65)
      saturate(1.18);
  }

  100% {
    transform:
      scale(1.06);

    filter:
      brightness(2.15)
      saturate(1.08);
  }

}


/* 點擊後蝶群真正飛 */

#archives
.archive-vessel.is-awakening
.archive-butterflies i {
  opacity:
    .92;

  animation:
    archiveButterflyBurst
    .80s cubic-bezier(.2,.7,.15,1)
    forwards;

  animation-delay:
    var(--d);
}


@keyframes archiveButterflyBurst {

  0% {
    transform:
      translate(-50%, -50%)
      scale(.55)
      rotate(0deg);
  }

  35% {
    transform:
      translate(-50%, -50%)
      translate(
        calc((50% - var(--x)) * .18),
        -18px
      )
      scale(1)
      rotate(80deg);
  }

  100% {
    transform:
      translate(-50%, -50%)
      translate(
        calc((50% - var(--x)) * .55),
        -82px
      )
      scale(1.35)
      rotate(230deg);

    opacity:
      0;
  }

}


/* =========================================================
   藏器內爆光
========================================================= */

#archives .archive-vessel-flash {
  position: absolute;

  z-index: 20;

  left:
    50%;

  top:
    48%;

  width:
    30%;

  aspect-ratio:
    1;

  border-radius:
    50%;

  transform:
    translate(-50%, -50%)
    scale(.15);

  opacity:
    0;

  background:
    #eef6ff;

  box-shadow:
    0 0 30px #eef6ff,
    0 0 90px
    rgba(210, 230, 255, .75),
    0 0 170px
    rgba(200, 220, 255, .45);

  pointer-events:
    none;
}


#archives
.archive-vessel.is-awakening
.archive-vessel-flash {
  animation:
    archiveInternalFlash
    .82s ease-out
    forwards;
}


@keyframes archiveInternalFlash {

  0% {
    opacity:
      0;

    transform:
      translate(-50%, -50%)
      scale(.12);
  }

  50% {
    opacity:
      .92;

    transform:
      translate(-50%, -50%)
      scale(1.2);
  }

  100% {
    opacity:
      0;

    transform:
      translate(-50%, -50%)
      scale(3.4);
  }

}


/* =========================================================
   全頁白光
========================================================= */

#archives .archives-burst {
  position: fixed;

  inset: 0;

  z-index: 1500;

  pointer-events:
    none;

  opacity:
    0;

  visibility:
    hidden;

  background:

    radial-gradient(
      circle at center,
      rgba(255,255,255,1) 0%,
      rgba(232,241,250,.98) 24%,
      rgba(196,215,232,.76) 47%,
      rgba(6,9,14,0) 75%
    );
}


#archives .archives-burst.is-active {
  visibility:
    visible;

  animation:
    archiveScreenBurst
    .68s ease-out
    forwards;
}


@keyframes archiveScreenBurst {

  0% {
    opacity:
      0;
  }

  28% {
    opacity:
      .34;
  }

  52% {
    opacity:
      1;
  }

  100% {
    opacity:
      0;
  }

}


/* =========================================================
   CONTENT LAYER
========================================================= */

#archives .archive-content-layer {
  position: fixed;

  inset: 0;

  z-index: 1400;

  display: flex;

  align-items: center;

  justify-content: center;

  padding:
    8vh 9vw;

  box-sizing:
    border-box;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  background:

    linear-gradient(
      90deg,
      rgba(2,5,9,.95),
      rgba(4,7,12,.90)
    );

  backdrop-filter:
    blur(12px);

  transition:
    opacity .46s ease,
    visibility .46s ease;
}


#archives
.archive-content-layer.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


#archives .archive-content-inner {
  width:
    min(1000px, 80vw);

  min-height:
    530px;

  padding:
    55px 64px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(187, 147, 87, .20);

  background:

    radial-gradient(
      ellipse at 16% 12%,
      rgba(143, 98, 52, .075),
      transparent 28%
    ),

    linear-gradient(
      145deg,
      rgba(10,13,19,.96),
      rgba(4,7,11,.97)
    );

  box-shadow:
    0 34px 100px
    rgba(0,0,0,.58),

    inset
    0 0 70px
    rgba(167,109,51,.025);
}


#archives .archive-content-kicker {
  display: flex;

  align-items: center;

  gap:
    14px;

  color:
    rgba(192, 150, 88, .60);
}


#archives .archive-content-kicker span {
  font-size:
    10px;
}


#archives .archive-content-kicker i {
  width:
    42px;

  height:
    1px;

  background:
    rgba(191, 148, 88, .38);
}


#archives .archive-content-kicker em {
  font-size:
    8px;

  font-style:
    normal;

  letter-spacing:
    .24em;
}


#archives .archive-content-small {
  margin:
    28px 0 7px;

  color:
    rgba(207, 193, 169, .48);

  font-size:
    12px;

  letter-spacing:
    .12em;
}


#archives .archive-content-inner h2 {
  margin:
    0;

  color:
    rgba(242, 228, 203, .96);

  font-size:
    62px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}


#archives .archive-content-lead {
  margin:
    15px 0 0;

  color:
    rgba(217, 206, 187, .68);

  font-size:
    15px;

  line-height:
    1.9;
}


#archives .archive-content-rule {
  width:
    160px;

  height:
    1px;

  margin:
    27px 0;

  background:
    linear-gradient(
      90deg,
      rgba(198, 154, 91, .48),
      transparent
    );
}


#archives .archive-content-placeholder {
  padding:
    35px 38px;

  border:
    1px solid
    rgba(182, 141, 84, .13);

  background:
    rgba(5, 8, 13, .32);
}


#archives
.archive-content-placeholder span {
  display:
    block;

  margin-bottom:
    9px;

  color:
    rgba(188, 146, 86, .48);

  font-size:
    8px;

  letter-spacing:
    .24em;
}


#archives
.archive-content-placeholder strong {
  display:
    block;

  margin-bottom:
    12px;

  color:
    rgba(232, 216, 189, .85);

  font-size:
    25px;

  font-weight:
    400;
}


#archives
.archive-content-placeholder p {
  max-width:
    620px;

  margin:
    0;

  color:
    rgba(204, 191, 169, .57);

  font-size:
    13px;

  line-height:
    1.9;
}


/* =========================================================
   CLOSE
========================================================= */

#archives .archive-content-close {
  position: fixed;

  top:
    4.5vh;

  right:
    5vw;

  z-index:
    1450;

  width:
    46px;

  height:
    46px;

  border:
    1px solid
    rgba(198, 157, 96, .24);

  background:
    rgba(4, 7, 11, .55);

  cursor:
    pointer;
}


#archives
.archive-content-close span {
  position: absolute;

  left:
    12px;

  top:
    22px;

  width:
    20px;

  height:
    1px;

  background:
    rgba(226, 193, 139, .74);
}


#archives
.archive-content-close span:first-child {
  transform:
    rotate(45deg);
}


#archives
.archive-content-close span:last-child {
  transform:
    rotate(-45deg);
}


/* =========================================================
   SEALED CONTENT
========================================================= */

#archives .archive-content-sealed {
  background:
    rgba(3, 4, 7, .94);
}


#archives .archive-sealed-inner {
  text-align:
    center;
}


#archives .archive-sealed-mark {
  display:
    grid;

  place-items:
    center;

  width:
    95px;

  height:
    95px;

  margin:
    36px auto
    24px;

  border:
    1px solid
    rgba(139, 55, 48, .48);

  color:
    rgba(160, 67, 58, .74);

  font-size:
    32px;

  transform:
    rotate(-5deg);
}


#archives .archive-sealed-note {
  margin:
    8px 0 0;

  color:
    rgba(172, 151, 133, .46);

  font-size:
    11px;

  letter-spacing:
    .10em;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {

  #archives .archive-vessels {
    width:
      86vw;

    gap:
      18px;
  }


  #archives .archives-vessel-header {
    width:
      65vw;
  }

}


@media (max-width: 760px) {

  #archives.archives-vessel-section {
    min-height:
      auto !important;

    padding:
      75px 6vw
      60px !important;

    overflow:
      visible !important;
  }


  #archives .archives-vessel-header {
    width:
      100%;
  }


  #archives .archive-vessels {
    grid-template-columns:
      1fr;

    width:
      100%;
  }


  #archives .archive-vessel-stage {
    height:
      430px;
  }


  #archives .archives-vessel-footer {
    width:
      100%;
  }


  #archives .archive-content-inner {
    width:
      90vw;

    min-height:
      auto;

    padding:
      42px 28px;
  }

}
/* =========================================================
   05｜月下藏卷
   排版修正 FINAL
   標題上方＋三藏器大型展示
   直接貼 style.css 最底
========================================================= */


/* =========================================================
   重要：
   清掉前面古書版殘留的 flex 橫排
========================================================= */

#archives.archives-vessel-section {
  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    flex-start !important;

  min-height:
    100vh !important;

  padding:
    4.5vh 6vw
    3vh !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;
}


/* =========================================================
   標題整區移到最上方
========================================================= */

#archives .archives-vessel-header {
  position:
    relative !important;

  z-index:
    10 !important;

  width:
    min(1460px, 86vw) !important;

  margin:
    0 auto
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  text-align:
    left !important;
}


/* 05 / ARCHIVES */

#archives .archives-vessel-kicker {
  margin-bottom:
    8px !important;
}


/* 小標 */

#archives .archives-vessel-small {
  margin:
    0 0 5px !important;

  font-size:
    11px !important;
}


/* 月下藏卷 */

#archives .archives-vessel-header h2 {
  margin:
    0 !important;

  font-size:
    clamp(
      48px,
      4.2vw,
      68px
    ) !important;

  line-height:
    1.06 !important;
}


/* 金線 */

#archives .archives-vessel-rule {
  margin:
    13px 0
    10px !important;
}


/* 介紹 */

#archives .archives-vessel-intro {
  max-width:
    720px !important;

  margin:
    0 !important;

  font-size:
    13px !important;

  line-height:
    1.75 !important;
}


/* =========================================================
   三座藏器
   放到標題正下方
========================================================= */

#archives .archive-vessels {
  position:
    relative !important;

  z-index:
    8 !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  align-items:
    end !important;

  gap:
    clamp(
      24px,
      3vw,
      54px
    ) !important;

  width:
    min(1460px, 88vw) !important;

  margin:
    1vh auto 0 !important;

  padding:
    0 3vw !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   每一座藏器
========================================================= */

#archives .archive-vessel {
  position:
    relative !important;

  width:
    100% !important;

  min-width:
    0 !important;

  padding:
    0 8px
    10px !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   藏器展示區放大
========================================================= */

#archives .archive-vessel-stage {
  position:
    relative !important;

  width:
    100% !important;

  height:
    clamp(
      390px,
      49vh,
      525px
    ) !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  overflow:
    visible !important;

  margin:
    0 !important;
}


/* =========================================================
   三張 PNG 真正放大

   因為生圖的 PNG 本身可能帶透明留白，
   所以不能只靠 stage 放大，
   圖片本體也直接放大。
========================================================= */

#archives .archive-vessel-image {
  position:
    relative !important;

  z-index:
    4 !important;

  width:
    auto !important;

  height:
    125% !important;

  max-width:
    128% !important;

  object-fit:
    contain !important;

  transform:
    scale(1.10) !important;

  transform-origin:
    center bottom !important;

  filter:
    brightness(.94)
    saturate(.94)
    drop-shadow(
      0 28px 35px
      rgba(0, 0, 0, .60)
    )
    !important;

  transition:
    transform .42s ease,
    filter .42s ease
    !important;
}


/* hover 再稍微靠近 */

#archives
.archive-vessel:hover
.archive-vessel-image {
  transform:
    scale(1.16)
    translateY(-3px)
    !important;

  filter:
    brightness(1.08)
    saturate(1.05)
    drop-shadow(
      0 30px 42px
      rgba(0, 0, 0, .68)
    )
    !important;
}


/* =========================================================
   三個序號
   跟著藏器，不要飄在上面很遠
========================================================= */

#archives .archive-vessel-index {
  top:
    28px !important;

  left:
    10% !important;

  z-index:
    10 !important;

  font-size:
    9px !important;

  color:
    rgba(203, 159, 93, .52)
    !important;
}


/* =========================================================
   Aura 一起放大
========================================================= */

#archives .archive-vessel-aura {
  left:
    50% !important;

  top:
    52% !important;

  width:
    82% !important;

  height:
    78% !important;

  aspect-ratio:
    auto !important;

  transform:
    translate(-50%, -50%)
    scale(1) !important;

  filter:
    blur(34px) !important;
}


#archives
.archive-vessel:hover
.archive-vessel-aura {
  opacity:
    .52 !important;

  transform:
    translate(-50%, -50%)
    scale(1.12)
    !important;
}


/* =========================================================
   蝶群位置跟著放大後的瓶子
========================================================= */

#archives .archive-butterflies {
  inset:
    10% 20% 9%
    !important;

  z-index:
    7 !important;
}


#archives .archive-butterflies i {
  width:
    12px !important;

  height:
    9px !important;
}


#archives
.archive-butterflies i::before,

#archives
.archive-butterflies i::after {
  width:
    7px !important;

  height:
    9px !important;
}


/* =========================================================
   名稱往上貼近瓶底
========================================================= */

#archives .archive-vessel-label {
  position:
    relative !important;

  z-index:
    10 !important;

  margin-top:
    -28px !important;

  padding-top:
    12px !important;

  min-height:
    78px !important;

  border-top:
    1px solid
    rgba(192, 150, 89, .18)
    !important;
}


/* 英文 */

#archives .archive-vessel-label em {
  margin-bottom:
    4px !important;

  font-size:
    7px !important;
}


/* 畫卷 / 聲藏 / 秘藏 */

#archives .archive-vessel-label strong {
  margin-bottom:
    5px !important;

  font-size:
    28px !important;
}


/* 中文說明 */

#archives .archive-vessel-label span {
  font-size:
    10px !important;

  line-height:
    1.5 !important;
}


/* =========================================================
   秘藏「封」
========================================================= */

#archives .archive-vessel-seal {
  right:
    18% !important;

  bottom:
    78px !important;
}


/* =========================================================
   底部提示
   不要跑到三罐右邊
========================================================= */

#archives .archives-vessel-footer {
  position:
    relative !important;

  z-index:
    7 !important;

  width:
    min(1400px, 86vw) !important;

  margin:
    .4vh auto 0 !important;
}


/* =========================================================
   在大螢幕再把瓶子做得更有存在感
========================================================= */

@media (min-width: 851px) {

  #archives .archive-vessel-stage {
    height:
      clamp(
        420px,
        50vh,
        540px
      ) !important;
  }


  #archives .archive-vessel-image {
    height:
      132% !important;

    max-width:
      134% !important;

    transform:
      scale(1.12) !important;
  }


  #archives
  .archive-vessel:hover
  .archive-vessel-image {
    transform:
      scale(1.18)
      translateY(-4px)
      !important;
  }

}


/* =========================================================
   螢幕比較矮時
   避免瓶子超出一個畫面
========================================================= */

@media (max-width: 850px) and (max-height: 780px) {

  #archives.archives-vessel-section {
    padding-top:
      3vh !important;
  }


  #archives .archives-vessel-header h2 {
    font-size:
      52px !important;
  }


  #archives .archive-vessel-stage {
    height:
      390px !important;
  }


  #archives .archive-vessel-image {
    height:
      118% !important;
  }

}


/* =========================================================
   平板
========================================================= */

@media (max-width: 850px) {

  #archives .archives-vessel-header,
  #archives .archive-vessels,
  #archives .archives-vessel-footer {
    width:
      88vw !important;
  }


  #archives .archive-vessel-stage {
    height:
      410px !important;
  }


  #archives .archive-vessel-image {
    height:
      118% !important;
  }

}
/* =========================================================
   05｜月下藏卷
   三藏器尺寸修正版
   直接貼 style.css 最底
========================================================= */


/* 整頁 */
#archives.archives-vessel-section {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;

  min-height: 100vh !important;

  padding:
    4vh 6vw
    3vh !important;

  overflow: hidden !important;
}


/* =========================================================
   標題區
   真正放在上方，不讓藏器侵入
========================================================= */

#archives .archives-vessel-header {
  position: relative !important;
  z-index: 20 !important;

  width:
    min(1320px, 82vw) !important;

  margin:
    0 auto 12px !important;

  padding:
    0 !important;

  text-align: left !important;
}


#archives .archives-vessel-header h2 {
  font-size:
    clamp(
      46px,
      3.8vw,
      64px
    ) !important;

  line-height:
    1.05 !important;
}


#archives .archives-vessel-rule {
  margin:
    12px 0
    9px !important;
}


#archives .archives-vessel-intro {
  max-width:
    660px !important;

  font-size:
    13px !important;

  line-height:
    1.7 !important;
}


/* =========================================================
   三藏器總區域
========================================================= */

#archives .archive-vessels {
  position: relative !important;
  z-index: 8 !important;

  display: grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  align-items: end !important;

  gap:
    clamp(
      36px,
      4vw,
      70px
    ) !important;

  width:
    min(1120px, 72vw) !important;

  margin:
    1.5vh auto 0 !important;

  padding:
    0 !important;
}


/* =========================================================
   每個藏器
========================================================= */

#archives .archive-vessel {
  width:
    100% !important;

  padding:
    0 5px
    8px !important;

  margin:
    0 !important;
}


/* =========================================================
   藏器舞台
   關鍵：從原本超大的 500px 左右縮下來
========================================================= */

#archives .archive-vessel-stage {
  width:
    100% !important;

  height:
    clamp(
      290px,
      39vh,
      365px
    ) !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  margin:
    0 !important;

  overflow:
    visible !important;
}


/* =========================================================
   PNG 本體
   不再 125% / 132%
========================================================= */

#archives .archive-vessel-image {
  width:
    auto !important;

  height:
    94% !important;

  max-width:
    92% !important;

  object-fit:
    contain !important;

  transform:
    none !important;

  transform-origin:
    center center !important;

  filter:
    brightness(.94)
    saturate(.94)
    drop-shadow(
      0 20px 26px
      rgba(0, 0, 0, .56)
    )
    !important;

  transition:
    transform .38s ease,
    filter .38s ease
    !important;
}


/* Hover 只放大一點點 */
#archives
.archive-vessel:hover
.archive-vessel-image {
  transform:
    scale(1.045)
    translateY(-3px)
    !important;

  filter:
    brightness(1.06)
    saturate(1.02)
    drop-shadow(
      0 24px 32px
      rgba(0, 0, 0, .64)
    )
    !important;
}


/* =========================================================
   序號位置
========================================================= */

#archives .archive-vessel-index {
  top:
    18px !important;

  left:
    8% !important;

  font-size:
    8px !important;
}


/* =========================================================
   光暈跟著縮小
========================================================= */

#archives .archive-vessel-aura {
  top:
    52% !important;

  width:
    68% !important;

  height:
    70% !important;

  filter:
    blur(28px) !important;
}


/* =========================================================
   蝴蝶粒子範圍
========================================================= */

#archives .archive-butterflies {
  inset:
    15% 23% 14%
    !important;
}


#archives .archive-butterflies i {
  width:
    9px !important;

  height:
    7px !important;
}


#archives
.archive-butterflies i::before,

#archives
.archive-butterflies i::after {
  width:
    6px !important;

  height:
    7px !important;
}


/* =========================================================
   底下名稱
========================================================= */

#archives .archive-vessel-label {
  margin-top:
    -4px !important;

  padding-top:
    11px !important;

  min-height:
    70px !important;
}


#archives .archive-vessel-label strong {
  margin-bottom:
    4px !important;

  font-size:
    25px !important;
}


#archives .archive-vessel-label span {
  font-size:
    9px !important;
}


/* =========================================================
   秘藏「封」
========================================================= */

#archives .archive-vessel-seal {
  right:
    17% !important;

  bottom:
    68px !important;

  width:
    34px !important;

  height:
    34px !important;
}


/* =========================================================
   底部提示
========================================================= */

#archives .archives-vessel-footer {
  width:
    min(1120px, 72vw) !important;

  margin:
    .6vh auto 0 !important;
}


/* =========================================================
   大螢幕
   不准又自行暴增成巨型
========================================================= */

@media (min-width: 851px) {

  #archives .archive-vessel-stage {
    height:
      min(
        39vh,
        370px
      ) !important;
  }


  #archives .archive-vessel-image {
    height:
      95% !important;

    max-width:
      92% !important;

    transform:
      none !important;
  }


  #archives
  .archive-vessel:hover
  .archive-vessel-image {
    transform:
      scale(1.045)
      translateY(-3px)
      !important;
  }

}


/* =========================================================
   你現在這種約 800px 高的桌機螢幕
========================================================= */

@media (max-width: 850px) and (max-height: 850px) {

  #archives.archives-vessel-section {
    padding-top:
      3vh !important;
  }


  #archives .archives-vessel-header h2 {
    font-size:
      52px !important;
  }


  #archives .archive-vessel-stage {
    height:
      325px !important;
  }


  #archives .archive-vessel-image {
    height:
      93% !important;
  }


  #archives .archive-vessels {
    margin-top:
      8px !important;
  }

}
/* =========================================================
   05｜月下藏卷
   藏器尺寸微放大版
   只放大約 15～20%，其他排版不動
========================================================= */


/* 三座藏器區稍微放寬 */
#archives .archive-vessels {
  width:
    min(1220px, 78vw) !important;

  gap:
    clamp(
      34px,
      3.6vw,
      64px
    ) !important;
}


/* 藏器舞台稍微加高 */
#archives .archive-vessel-stage {
  height:
    clamp(
      330px,
      43vh,
      415px
    ) !important;
}


/* PNG 本體比現在放大約 18% */
#archives .archive-vessel-image {
  height:
    108% !important;

  max-width:
    105% !important;

  transform:
    scale(1.02) !important;

  transform-origin:
    center bottom !important;
}


/* Hover 只再多一點，不要突然暴增 */
#archives
.archive-vessel:hover
.archive-vessel-image {
  transform:
    scale(1.07)
    translateY(-3px)
    !important;
}


/* 光暈跟著藏器稍微放大 */
#archives .archive-vessel-aura {
  width:
    74% !important;

  height:
    76% !important;
}


/* 蝶群區域同步 */
#archives .archive-butterflies {
  inset:
    12% 21% 11%
    !important;
}


/* 名稱維持現在的位置，只略微往上貼近瓶底 */
#archives .archive-vessel-label {
  margin-top:
    -10px !important;
}


/* 底部線跟著三座藏器寬度 */
#archives .archives-vessel-footer {
  width:
    min(1220px, 78vw) !important;
}


/* =========================================================
   你目前這種桌機高度
========================================================= */

@media (max-width: 850px) and (max-height: 850px) {

  #archives .archive-vessel-stage {
    height:
      365px !important;
  }


  #archives .archive-vessel-image {
    height:
      106% !important;

    max-width:
      103% !important;
  }

}


/* 大螢幕不要再被舊規則突然放超大 */
@media (min-width: 851px) {

  #archives .archive-vessel-stage {
    height:
      min(
        43vh,
        420px
      ) !important;
  }


  #archives .archive-vessel-image {
    height:
      108% !important;

    max-width:
      105% !important;

    transform:
      scale(1.02) !important;
  }


  #archives
  .archive-vessel:hover
  .archive-vessel-image {
    transform:
      scale(1.07)
      translateY(-3px)
      !important;
  }

}
/* =========================================================
   05｜月下藏卷
   解決：上面太擠、下面太空
   直接貼到 style.css 最底
========================================================= */

#archives {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

#archives .section-inner,
#archives .archives-inner,
#archives .chapter-inner {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(72px, 9vh, 120px);
  padding-bottom: clamp(78px, 10vh, 130px);
  box-sizing: border-box;
}

/* 左上標題區 */
#archives .archives-heading,
#archives .section-heading,
#archives .chapter-heading {
  margin-bottom: clamp(28px, 4vh, 48px);
}

/* 標題不要再黏上面 */
#archives .archives-heading .title-wrap,
#archives .section-heading .title-wrap,
#archives .chapter-heading .title-wrap {
  margin-top: 0;
}

/* 三個藏器主區塊 */
#archives .archive-vessels,
#archives .archives-vessels,
#archives .vessel-row {
  width: min(1260px, 84vw);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(42px, 5vw, 92px);
  margin-top: clamp(10px, 1.5vh, 20px);
}

/* 每個藏器整體 */
#archives .archive-vessel,
#archives .archive-vessel-card,
#archives .vessel-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* 藏器舞台高度：讓內容往下吃空間 */
#archives .archive-vessel-stage,
#archives .vessel-stage {
  height: clamp(390px, 47vh, 490px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 藏器本體尺寸 */
#archives .archive-vessel-image,
#archives .vessel-image {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* 底部名稱區 */
#archives .archive-vessel-label,
#archives .vessel-label {
  margin-top: 14px;
  text-align: center;
}

/* 底部橫線與說明往下放一些 */
#archives .archives-vessel-footer,
#archives .vessel-footer,
#archives .archives-bottom-line {
  width: min(1260px, 84vw);
  margin: 26px auto 0;
}

/* 如果你有左上說明文字，讓它寬一點但不要壓到中間 */
#archives .archives-intro,
#archives .section-intro,
#archives .chapter-intro {
  max-width: 560px;
  margin-bottom: clamp(18px, 2.6vh, 28px);
}

/* 右側側欄保持中間，不要跟著被頂太高 */
#archives .side-nav,
#archives .chapter-side-nav,
#archives .floating-nav {
  top: 50%;
  transform: translateY(-50%);
}

/* =========================================================
   螢幕比較矮時再收一點
========================================================= */
@media (max-width: 850px) and (max-height: 860px) {
  #archives .section-inner,
  #archives .archives-inner,
  #archives .chapter-inner {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  #archives .archive-vessel-stage,
  #archives .vessel-stage {
    height: 360px;
  }

  #archives .archive-vessels,
  #archives .archives-vessels,
  #archives .vessel-row {
    gap: clamp(28px, 3.6vw, 64px);
  }
}
/* =========================================================
   05｜月下藏卷
   最終垂直排版＋特效修復
   直接貼 style.css 最底
========================================================= */


/* =========================================================
   整頁重新分成：
   1. 標題
   2. 三藏器主區
   3. 底部提示
========================================================= */

#archives.archives-vessel-section {
  position: relative !important;

  display: grid !important;

  grid-template-columns:
    1fr !important;

  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto !important;

  align-items:
    stretch !important;

  justify-items:
    center !important;

  width:
    100% !important;

  height:
    100vh !important;

  min-height:
    720px !important;

  padding:
    clamp(28px, 4vh, 46px)
    6vw
    clamp(24px, 3vh, 34px)
    !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;
}


/* =========================================================
   標題
========================================================= */

#archives .archives-vessel-header {
  position: relative !important;

  z-index:
    20 !important;

  justify-self:
    center !important;

  width:
    min(1240px, 76vw) !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


#archives .archives-vessel-kicker {
  margin-bottom:
    7px !important;
}


#archives .archives-vessel-small {
  margin:
    0 0 5px !important;
}


#archives .archives-vessel-header h2 {
  margin:
    0 !important;

  font-size:
    clamp(
      48px,
      3.7vw,
      62px
    ) !important;

  line-height:
    1.05 !important;
}


#archives .archives-vessel-rule {
  margin:
    11px 0
    8px !important;
}


#archives .archives-vessel-intro {
  margin:
    0 !important;

  max-width:
    670px !important;

  font-size:
    13px !important;

  line-height:
    1.7 !important;
}


/* =========================================================
   三座藏器主區
   關鍵：
   直接吃掉標題與 footer 中間所有剩餘高度
========================================================= */

#archives .archive-vessels {
  position: relative !important;

  z-index:
    8 !important;

  align-self:
    stretch !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  align-items:
    stretch !important;

  gap:
    clamp(
      38px,
      4vw,
      70px
    ) !important;

  width:
    min(1240px, 78vw) !important;

  height:
    100% !important;

  min-height:
    0 !important;

  margin:
    0 auto !important;

  padding:
    0 !important;
}


/* =========================================================
   每個藏器
========================================================= */

#archives .archive-vessel {
  position:
    relative !important;

  display:
    grid !important;

  grid-template-rows:
    minmax(0, 1fr)
    auto !important;

  align-items:
    stretch !important;

  width:
    100% !important;

  height:
    100% !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 6px !important;

  box-sizing:
    border-box !important;

  transition:
    filter .35s ease !important;
}


/* =========================================================
   瓶子舞台
   在剩餘空間內垂直置中
========================================================= */

#archives .archive-vessel-stage {
  position:
    relative !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    100% !important;

  height:
    auto !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    8px 0 0 !important;

  overflow:
    visible !important;

  transition:
    transform .38s ease !important;
}


/* =========================================================
   瓶子尺寸
   比現在略大，但不再巨大
========================================================= */

#archives .archive-vessel-image {
  position:
    relative !important;

  z-index:
    4 !important;

  width:
    auto !important;

  height:
    auto !important;

  max-height:
    min(
      46vh,
      405px
    ) !important;

  max-width:
    100% !important;

  object-fit:
    contain !important;

  transform:
    none !important;

  filter:
    brightness(.95)
    saturate(.95)
    drop-shadow(
      0 22px 30px
      rgba(0, 0, 0, .60)
    )
    !important;

  transition:
    filter .38s ease !important;
}


/* =========================================================
   HOVER
   不再直接 transform 圖片
   改動整個 stage，避免壓掉 click 動畫
========================================================= */

#archives
.archive-vessel:hover
.archive-vessel-stage {
  transform:
    translateY(-5px)
    scale(1.018);
}


#archives
.archive-vessel:hover
.archive-vessel-image {
  filter:
    brightness(1.08)
    saturate(1.04)
    drop-shadow(
      0 27px 38px
      rgba(0, 0, 0, .68)
    )
    !important;
}


/* =========================================================
   Aura 恢復
========================================================= */

#archives .archive-vessel-aura {
  position:
    absolute !important;

  left:
    50% !important;

  top:
    50% !important;

  width:
    72% !important;

  height:
    76% !important;

  transform:
    translate(-50%, -50%)
    scale(1) !important;

  opacity:
    .18 !important;

  filter:
    blur(30px) !important;

  transition:
    opacity .38s ease,
    transform .38s ease
    !important;
}


#archives
.archive-vessel:hover
.archive-vessel-aura {
  opacity:
    .52 !important;

  transform:
    translate(-50%, -50%)
    scale(1.12) !important;
}


/* =========================================================
   蝶群範圍
========================================================= */

#archives .archive-butterflies {
  inset:
    13% 21% 12%
    !important;
}


/* =========================================================
   Hover 蝶群重新出現
========================================================= */

#archives
.archive-vessel:hover
.archive-butterflies i {
  opacity:
    .52 !important;

  animation:
    archiveButterflyIdle
    2.5s
    ease-in-out
    infinite !important;

  animation-delay:
    var(--d) !important;
}


/* =========================================================
   名稱區
========================================================= */

#archives .archive-vessel-label {
  position:
    relative !important;

  z-index:
    10 !important;

  margin:
    0 !important;

  padding:
    10px 0
    6px !important;

  min-height:
    76px !important;

  border-top:
    1px solid
    rgba(188, 146, 86, .16)
    !important;
}


#archives .archive-vessel-label strong {
  font-size:
    26px !important;

  margin-bottom:
    4px !important;
}


#archives .archive-vessel-label span {
  font-size:
    9px !important;
}


/* =========================================================
   序號
========================================================= */

#archives .archive-vessel-index {
  top:
    8% !important;

  left:
    6% !important;

  z-index:
    10 !important;
}


/* =========================================================
   封印
========================================================= */

#archives .archive-vessel-seal {
  right:
    14% !important;

  bottom:
    75px !important;
}


/* =========================================================
   底部提示
   固定在章節底部，不再卡在瓶子下面很高的位置
========================================================= */

#archives .archives-vessel-footer {
  position:
    relative !important;

  z-index:
    8 !important;

  align-self:
    end !important;

  width:
    min(1240px, 78vw) !important;

  margin:
    5px auto 0 !important;

  padding:
    0 !important;
}


/* =========================================================
   點擊後甦醒動畫修復
   改動 stage，避開前面 image transform !important 衝突
========================================================= */

#archives
.archive-vessel.is-awakening
.archive-vessel-stage {
  animation:
    archiveVesselStageAwaken
    .92s
    cubic-bezier(.22,.75,.18,1)
    forwards !important;
}


@keyframes archiveVesselStageAwaken {

  0% {
    transform:
      scale(1)
      translateY(0);
  }

  28% {
    transform:
      scale(1.025)
      translateY(-4px);
  }

  52% {
    transform:
      scale(.99)
      translateY(2px);
  }

  76% {
    transform:
      scale(1.065)
      translateY(-7px);
  }

  100% {
    transform:
      scale(1.085)
      translateY(-8px);
  }

}


/* =========================================================
   點擊後 Aura 增強
========================================================= */

#archives
.archive-vessel.is-awakening
.archive-vessel-aura {
  animation:
    archiveVesselAuraAwaken
    .85s
    ease-out
    forwards !important;
}


@keyframes archiveVesselAuraAwaken {

  0% {
    opacity:
      .25;

    transform:
      translate(-50%, -50%)
      scale(.9);
  }

  50% {
    opacity:
      .78;

    transform:
      translate(-50%, -50%)
      scale(1.22);
  }

  100% {
    opacity:
      .92;

    transform:
      translate(-50%, -50%)
      scale(1.38);
  }

}


/* =========================================================
   點擊蝶群爆飛
========================================================= */

#archives
.archive-vessel.is-awakening
.archive-butterflies i {
  opacity:
    .96 !important;

  animation:
    archiveButterflyBurst
    .80s
    cubic-bezier(.2,.7,.15,1)
    forwards !important;

  animation-delay:
    var(--d) !important;
}


/* =========================================================
   05｜舊瓶內爆光停用
   避免被 #archives 區域裁成半屏
========================================================= */

#archives
.archive-vessel.is-awakening
.archive-vessel-flash,
#archives .archive-vessel-flash {
  display:
    none !important;

  animation:
    none !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;
}


/* =========================================================
   全頁爆光
========================================================= */

#archives .archives-burst.is-active {
  visibility:
    visible !important;

  animation:
    archiveScreenBurst
    .68s
    ease-out
    forwards !important;
}


/* =========================================================
   你目前這種桌機比例
========================================================= */

@media (max-width: 850px) and (max-height: 850px) {

  #archives.archives-vessel-section {
    padding-top:
      24px !important;

    padding-bottom:
      20px !important;
  }


  #archives .archives-vessel-header h2 {
    font-size:
      52px !important;
  }


  #archives .archive-vessel-image {
    max-height:
      min(
        45vh,
        375px
      ) !important;
  }


  #archives .archive-vessel-label {
    min-height:
      68px !important;
  }

}
/* =========================================================
   夜巫京｜全站點擊層保險 FIX
   02 / 03 / 04 / 05
   直接貼 style.css 最底
========================================================= */


/* =========================================================
   所有「沒有開啟」的全螢幕 popup
   強制完全退出滑鼠事件
========================================================= */

.character-dossier:not(.is-open),

.symbol-lightbox:not(.is-open),

.mark-detail-lightbox:not(.is-open),

.calendar-lightbox:not(.is-open),

#archives
.archive-content-layer:not(.is-open) {

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* =========================================================
   真正打開時才允許操作
========================================================= */

.character-dossier.is-open,

.symbol-lightbox.is-open,

.mark-detail-lightbox.is-open,

.calendar-lightbox.is-open,

#archives
.archive-content-layer.is-open {

  visibility: visible !important;

  pointer-events: auto !important;
}


/* =========================================================
   宮門轉場
   沒啟動時絕對不能攔滑鼠
========================================================= */

.gate-transition:not(.is-active) {

  display: none !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* 啟動宮門仍不需要接收滑鼠 */

.gate-transition.is-active {

  pointer-events: none !important;
}


/* =========================================================
   所有純視覺背景 / 裝飾
   一律不能吃點擊
========================================================= */

.capital-bg,
.capital-shade,
.capital-cloud-back,
.capital-cloud-front,

.houses-section-border,
.house-base,
.house-overlay,
.house-veil,

.chronicles-section::before,
.chronicles-section::after,
.chronicles-atmosphere,
.chronicles-rings,

.calendar-orbit,
.calendar-section::before,
.calendar-section::after,

#archives .archives-vessel-bg,
#archives .archives-vessel-shade,
#archives .archives-vessel-light,
#archives .archives-burst,
#archives .archive-vessel-aura,
#archives .archive-butterflies,
#archives .archive-vessel-flash {

  pointer-events: none !important;
}


/* =========================================================
   真正需要點擊的東西
========================================================= */

.house-panel,
[data-house-link],

.chronicle-tab,
[data-chronicle],

.mark-system-card,
[data-mark-detail],

.calendar-event,

.chapter-dot,

#archives .archive-vessel {

  pointer-events: auto !important;

  cursor: pointer;
}


/* =========================================================
   防止舊 05 關閉按鈕在隱藏資料頁中殘留
========================================================= */

#archives
.archive-content-layer:not(.is-open)
.archive-content-close {

  pointer-events: none !important;
}


/* =========================================================
   開啟後 X 才能按
========================================================= */

#archives
.archive-content-layer.is-open
.archive-content-close {

  pointer-events: auto !important;
}
/* =========================================================
   03｜京中異聞
   修正底部 footer 蓋住分類按鈕
========================================================= */

#chronicles .chronicles-footer {
  pointer-events: none !important;
}


/* 七個分類永遠放在 footer 上面 */

#chronicles .chronicle-index {
  position: relative !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}


#chronicles .chronicle-index-item {
  position: relative !important;
  z-index: 21 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* =========================================================
   05｜月下藏卷
   01 畫卷｜正式人物收藏頁
========================================================= */


/* =========================================================
   畫卷整層
========================================================= */

#archives
[data-archive-content="visual"] {
  padding:
    5vh 5vw !important;
}


/* 大收藏框 */

#archives
[data-archive-content="visual"]
.archive-gallery-shell {
  width:
    min(1420px, 90vw) !important;

  height:
    min(790px, 86vh) !important;

  min-height:
    620px !important;

  padding:
    30px 38px
    28px !important;

  display:
    grid !important;

  grid-template-rows:
    auto
    minmax(0, 1fr) !important;

  gap:
    22px !important;

  overflow:
    hidden !important;

  background:
    radial-gradient(
      ellipse at 52% 44%,
      rgba(79, 103, 129, .08),
      transparent 32%
    ),

    radial-gradient(
      ellipse at 85% 12%,
      rgba(125, 85, 48, .08),
      transparent 31%
    ),

    linear-gradient(
      145deg,
      rgba(9, 13, 20, .985),
      rgba(3, 6, 10, .99)
    )
    !important;
}


/* =========================================================
   HEADER
========================================================= */

#archives
.archive-gallery-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    30px;

  padding-bottom:
    20px;

  border-bottom:
    1px solid
    rgba(190, 149, 91, .14);
}


#archives
.archive-gallery-head
.archive-content-small {
  margin:
    13px 0
    4px !important;
}


#archives
.archive-gallery-head h2 {
  margin:
    0 !important;

  font-size:
    clamp(
      40px,
      3vw,
      54px
    ) !important;

  line-height:
    1 !important;
}


#archives
.archive-gallery-head
.archive-content-lead {
  margin:
    10px 0 0 !important;

  font-size:
    13px !important;
}


#archives
.archive-gallery-count {
  display:
    flex;

  align-items:
    baseline;

  gap:
    8px;

  padding-bottom:
    4px;

  color:
    rgba(188, 151, 94, .42);

  font-family:
    Georgia,
    serif;
}


#archives
.archive-gallery-count span {
  color:
    rgba(225, 197, 148, .88);

  font-size:
    34px;

  font-weight:
    400;
}


#archives
.archive-gallery-count i {
  font-size:
    11px;

  font-style:
    normal;
}


#archives
.archive-gallery-count em {
  font-size:
    12px;

  font-style:
    normal;
}


/* =========================================================
   BODY
========================================================= */

#archives
.archive-gallery-body {
  min-height:
    0;

  display:
    grid;

  grid-template-columns:
    185px
    minmax(420px, 1fr)
    285px;

  gap:
    clamp(
      22px,
      2.5vw,
      38px
    );
}


/* =========================================================
   左側分類
========================================================= */

#archives
.archive-gallery-categories {
  min-width:
    0;

  padding-top:
    16px;

  border-right:
    1px solid
    rgba(190, 149, 91, .11);
}


#archives
.archive-gallery-categories > p {
  margin:
    0 0 22px;

  color:
    rgba(189, 151, 94, .38);

  font-size:
    8px;

  letter-spacing:
    .30em;
}


#archives
.archive-gallery-category {
  position:
    relative;

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    26px 1fr;

  column-gap:
    10px;

  padding:
    13px 15px
    13px 0;

  border:
    0;

  border-bottom:
    1px solid
    rgba(177, 143, 91, .075);

  background:
    transparent;

  text-align:
    left;

  color:
    rgba(207, 194, 174, .44);
}


#archives
.archive-gallery-category span {
  grid-row:
    1 / 3;

  color:
    rgba(191, 149, 88, .34);

  font-size:
    9px;
}


#archives
.archive-gallery-category strong {
  color:
    inherit;

  font-size:
    14px;

  font-weight:
    400;

  letter-spacing:
    .10em;
}


#archives
.archive-gallery-category em {
  margin-top:
    4px;

  color:
    rgba(155, 151, 143, .30);

  font-size:
    6px;

  font-style:
    normal;

  letter-spacing:
    .16em;
}


#archives
.archive-gallery-category.active {
  color:
    rgba(235, 220, 195, .94);
}


#archives
.archive-gallery-category.active::before {
  content:
    "";

  position:
    absolute;

  left:
    -13px;

  top:
    50%;

  width:
    4px;

  height:
    4px;

  transform:
    translateY(-50%)
    rotate(45deg);

  background:
    rgba(190, 145, 78, .86);

  box-shadow:
    0 0 10px
    rgba(190, 145, 78, .42);
}


#archives
.archive-gallery-category:disabled {
  cursor:
    default;

  opacity:
    .42;
}


/* =========================================================
   中央
========================================================= */

#archives
.archive-gallery-stage {
  min-width:
    0;

  min-height:
    0;

  display:
    grid;

  grid-template-rows:
    minmax(0, 1fr)
    auto
    auto;

  gap:
    10px;
}


/* 主畫框 */

#archives
.archive-gallery-frame {
  position:
    relative;

  min-height:
    0;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    center;

  border:
    1px solid
    rgba(191, 151, 93, .13);

  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(108, 137, 164, .12),
      transparent 38%
    ),

    linear-gradient(
      180deg,
      rgba(10, 16, 24, .70),
      rgba(4, 7, 11, .48)
    );
}


/* 內雙框 */

#archives
.archive-gallery-frame-line {
  position:
    absolute;

  pointer-events:
    none;
}


#archives
.archive-gallery-frame-line-a {
  inset:
    10px;

  border:
    1px solid
    rgba(201, 164, 107, .07);
}


#archives
.archive-gallery-frame-line-b {
  inset:
    18px;

  border:
    1px solid
    rgba(201, 164, 107, .025);
}


/* 背後月光 */

#archives
.archive-gallery-moon {
  position:
    absolute;

  left:
    50%;

  top:
    40%;

  width:
    min(340px, 35vw);

  aspect-ratio:
    1;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  pointer-events:
    none;

  opacity:
    .50;

  background:
    radial-gradient(
      circle,
      rgba(198, 217, 230, .14),
      rgba(126, 156, 181, .055) 44%,
      transparent 70%
    );

  filter:
    blur(4px);
}


/* 地面光 */

#archives
.archive-gallery-floor {
  position:
    absolute;

  left:
    50%;

  bottom:
    3%;

  width:
    70%;

  height:
    13%;

  transform:
    translateX(-50%);

  pointer-events:
    none;

  background:
    radial-gradient(
      ellipse,
      rgba(188, 151, 95, .11),
      transparent 70%
    );

  filter:
    blur(15px);
}


/* PORTRAIT 01 */

#archives
.archive-gallery-number {
  position:
    absolute;

  left:
    24px;

  top:
    21px;

  z-index:
    5;

  color:
    rgba(174, 151, 114, .22);

  font-size:
    7px;

  letter-spacing:
    .28em;
}


#archives
.archive-gallery-number span {
  display:
    block;

  margin-top:
    5px;

  color:
    rgba(205, 166, 103, .48);

  font-family:
    Georgia,
    serif;

  font-size:
    21px;

  letter-spacing:
    .06em;
}


/* 人物 */

#archives
.archive-gallery-image {
  position:
    relative;

  z-index:
    4;

  width:
    auto;

  height:
    auto;

  max-width:
    88%;

  max-height:
    min(
      53vh,
      500px
    );

  object-fit:
    contain;

  object-position:
    center bottom;

  filter:
    brightness(.92)
    saturate(.91)
    drop-shadow(
      0 24px 32px
      rgba(0, 0, 0, .62)
    );

  transform:
    translateY(1%);

  transition:
    opacity .28s ease,
    transform .42s
    cubic-bezier(.2,.7,.2,1),
    filter .35s ease;
}


#archives
.archive-gallery-frame:hover
.archive-gallery-image {
  filter:
    brightness(1.03)
    saturate(.96)
    drop-shadow(
      0 27px 38px
      rgba(0,0,0,.68)
    );

  transform:
    translateY(0)
    scale(1.012);
}


/* 換圖時 */

#archives
.archive-gallery-stage.is-changing
.archive-gallery-image {
  opacity:
    0;

  transform:
    translateY(10px)
    scale(.985);
}


/* =========================================================
   五人索引
========================================================= */

#archives
.archive-gallery-selector {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    rgba(191, 150, 90, .12);

  border-bottom:
    1px solid
    rgba(191, 150, 90, .12);
}


#archives
.archive-gallery-person {
  position:
    relative;

  min-width:
    0;

  padding:
    10px 7px
    9px;

  border:
    0;

  border-right:
    1px solid
    rgba(191, 150, 90, .075);

  background:
    transparent;

  color:
    rgba(183, 178, 167, .46);

  cursor:
    pointer;

  transition:
    background .25s ease,
    color .25s ease;
}


#archives
.archive-gallery-person:last-child {
  border-right:
    0;
}


#archives
.archive-gallery-person span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    rgba(191, 150, 90, .30);

  font-size:
    7px;
}


#archives
.archive-gallery-person strong {
  font-size:
    11px;

  font-weight:
    400;

  letter-spacing:
    .10em;

  white-space:
    nowrap;
}


#archives
.archive-gallery-person:hover {
  color:
    rgba(232, 219, 197, .82);

  background:
    rgba(173, 129, 72, .035);
}


#archives
.archive-gallery-person.active {
  color:
    rgba(243, 225, 195, .96);

  background:
    linear-gradient(
      180deg,
      rgba(166, 117, 58, .08),
      transparent
    );
}


#archives
.archive-gallery-person.active::after {
  content:
    "";

  position:
    absolute;

  left:
    28%;

  right:
    28%;

  bottom:
    -1px;

  height:
    1px;

  background:
    rgba(208, 164, 96, .74);

  box-shadow:
    0 0 8px
    rgba(208, 164, 96, .26);
}


/* =========================================================
   PREV / NEXT
========================================================= */

#archives
.archive-gallery-controls {
  display:
    flex;

  align-items:
    center;

  gap:
    15px;
}


#archives
.archive-gallery-controls i {
  flex:
    1;

  height:
    1px;

  background:
    rgba(187, 147, 88, .10);
}


#archives
.archive-gallery-controls button {
  padding:
    5px 0;

  border:
    0;

  background:
    transparent;

  color:
    rgba(186, 160, 120, .42);

  font-size:
    7px;

  letter-spacing:
    .22em;

  cursor:
    pointer;

  transition:
    color .25s ease;
}


#archives
.archive-gallery-controls button:hover {
  color:
    rgba(226, 192, 136, .86);
}


/* =========================================================
   右側資訊
========================================================= */

#archives
.archive-gallery-info {
  position:
    relative;

  min-width:
    0;

  padding:
    36px 0
    30px 28px;

  border-left:
    1px solid
    rgba(190, 149, 91, .11);
}


#archives
.archive-gallery-info-index {
  margin-bottom:
    29px;

  color:
    rgba(189, 151, 94, .32);

  font-size:
    7px;

  letter-spacing:
    .30em;
}


#archives
.archive-gallery-house {
  margin:
    0 0 9px;

  color:
    rgba(188, 148, 87, .54);

  font-size:
    9px;

  letter-spacing:
    .20em;
}


#archives
.archive-gallery-info h3 {
  margin:
    0;

  color:
    rgba(240, 225, 201, .96);

  font-size:
    clamp(
      31px,
      2.3vw,
      42px
    );

  font-weight:
    400;

  letter-spacing:
    .10em;
}


#archives
.archive-gallery-title {
  margin:
    8px 0 0;

  color:
    rgba(212, 198, 176, .60);

  font-size:
    13px;

  letter-spacing:
    .08em;
}


#archives
.archive-gallery-info-rule {
  width:
    90px;

  height:
    1px;

  margin:
    24px 0;

  background:
    linear-gradient(
      90deg,
      rgba(196, 151, 87, .48),
      transparent
    );
}


#archives
.archive-gallery-meta {
  display:
    grid;

  gap:
    14px;

  margin:
    0 0 27px;
}


#archives
.archive-gallery-meta div {
  display:
    grid;

  grid-template-columns:
    72px 1fr;

  gap:
    12px;
}


#archives
.archive-gallery-meta dt {
  color:
    rgba(181, 145, 90, .35);

  font-size:
    7px;

  letter-spacing:
    .18em;
}


#archives
.archive-gallery-meta dd {
  margin:
    0;

  color:
    rgba(200, 192, 178, .54);

  font-size:
    8px;

  letter-spacing:
    .10em;
}


#archives
.archive-gallery-description {
  max-width:
    260px;

  margin:
    0;

  color:
    rgba(207, 197, 181, .65);

  font-size:
    13px;

  line-height:
    1.95;

  letter-spacing:
    .035em;
}


/* 藏章 */

#archives
.archive-gallery-seal {
  position:
    absolute;

  right:
    5px;

  bottom:
    8px;

  width:
    58px;

  height:
    58px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(136, 59, 51, .25);

  color:
    rgba(146, 62, 54, .42);

  transform:
    rotate(-6deg);
}


#archives
.archive-gallery-seal span {
  position:
    absolute;

  top:
    5px;

  font-size:
    5px;

  letter-spacing:
    .15em;
}


#archives
.archive-gallery-seal strong {
  font-size:
    23px;

  font-weight:
    400;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 850px) {

  #archives
  .archive-gallery-body {
    grid-template-columns:
      150px
      minmax(360px, 1fr)
      230px;

    gap:
      18px;
  }


  #archives
  .archive-gallery-info {
    padding-left:
      18px;
  }

}


@media (max-width: 850px) {

  #archives
  [data-archive-content="visual"] {
    padding:
      45px 5vw !important;
  }


  #archives
  [data-archive-content="visual"]
  .archive-gallery-shell {
    width:
      92vw !important;

    height:
      88vh !important;

    min-height:
      0 !important;

    padding:
      25px 24px !important;

    overflow-y:
      auto !important;
  }


  #archives
  .archive-gallery-body {
    display:
      block;
  }


  #archives
  .archive-gallery-categories {
    display:
      grid;

    grid-template-columns:
      repeat(4, 1fr);

    margin-bottom:
      18px;

    padding:
      0;

    border-right:
      0;
  }


  #archives
  .archive-gallery-categories > p {
    display:
      none;
  }


  #archives
  .archive-gallery-category {
    display:
      block;

    padding:
      10px 6px;

    text-align:
      center;
  }


  #archives
  .archive-gallery-category span {
    display:
      none;
  }


  #archives
  .archive-gallery-category em {
    display:
      none;
  }


  #archives
  .archive-gallery-stage {
    min-height:
      520px;
  }


  #archives
  .archive-gallery-info {
    margin-top:
      28px;

    padding:
      25px 0 0;

    border-left:
      0;

    border-top:
      1px solid
      rgba(190,149,91,.11);
  }

}
/* =========================================================
   05｜畫卷
   影藏 / 景藏
   大圖滿版收藏模式
========================================================= */


/* =========================================================
   整個畫卷內容層
========================================================= */

#archives
[data-archive-content="visual"] {
  padding:
    2.5vh 2.5vw !important;

  background:
    rgba(2, 5, 9, .97) !important;
}


/* =========================================================
   收藏主框
========================================================= */

#archives
.archive-visual-shell {
  position:
    relative;

  width:
    min(1680px, 95vw);

  height:
    92vh;

  margin:
    auto;

  overflow:
    hidden;

  border:
    1px solid
    rgba(190, 149, 90, .16);

  background:
    #03060a;

  box-shadow:
    0 35px 110px
    rgba(0, 0, 0, .72);
}


/* =========================================================
   主畫面
========================================================= */

#archives
.archive-visual-stage {
  position:
    relative;

  width:
    100%;

  height:
    100%;

  overflow:
    hidden;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(64, 86, 108, .12),
      transparent 42%
    ),
    #03060a;
}


/* =========================================================
   大圖
========================================================= */

#archives
.archive-visual-image {
  position:
    absolute;

  inset:
    0;

  z-index:
    1;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center;

  background:
    #03060a;

  opacity:
    1;

  transform:
    scale(1);

  transition:
    opacity .32s ease,
    transform .55s
    cubic-bezier(.2,.7,.2,1),
    filter .35s ease;
}


#archives
.archive-visual-stage.is-changing
.archive-visual-image {
  opacity:
    0;

  transform:
    scale(.985);
}


/* =========================================================
   暗角
========================================================= */

#archives
.archive-visual-vignette {
  position:
    absolute;

  inset:
    0;

  z-index:
    3;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(2,5,9,.66) 0%,
      rgba(2,5,9,.06) 22%,
      rgba(2,5,9,.02) 58%,
      rgba(2,5,9,.72) 100%
    ),

    linear-gradient(
      90deg,
      rgba(2,5,9,.47),
      transparent 19%,
      transparent 81%,
      rgba(2,5,9,.28)
    );
}


/* =========================================================
   細框
========================================================= */

#archives
.archive-visual-frame {
  position:
    absolute;

  inset:
    13px;

  z-index:
    8;

  pointer-events:
    none;

  border:
    1px solid
    rgba(207, 169, 109, .08);
}


/* =========================================================
   左上分類
========================================================= */

#archives
.archive-visual-tabs {
  position:
    absolute;

  z-index:
    20;

  left:
    38px;

  top:
    31px;

  display:
    flex;

  gap:
    4px;
}


#archives
.archive-visual-tab {
  position:
    relative;

  min-width:
    155px;

  padding:
    10px 17px
    11px;

  border:
    0;

  border-bottom:
    1px solid
    rgba(191, 150, 89, .18);

  background:
    rgba(3, 6, 10, .26);

  color:
    rgba(208, 198, 180, .42);

  text-align:
    left;

  cursor:
    pointer;

  backdrop-filter:
    blur(8px);

  transition:
    color .28s ease,
    background .28s ease;
}


#archives
.archive-visual-tab span {
  display:
    block;

  margin-bottom:
    4px;

  color:
    rgba(192, 149, 87, .40);

  font-size:
    7px;

  letter-spacing:
    .20em;
}


#archives
.archive-visual-tab strong {
  display:
    block;

  font-size:
    17px;

  font-weight:
    400;

  letter-spacing:
    .16em;
}


#archives
.archive-visual-tab em {
  display:
    block;

  margin-top:
    4px;

  font-size:
    6px;

  font-style:
    normal;

  letter-spacing:
    .18em;

  opacity:
    .58;
}


#archives
.archive-visual-tab:hover {
  color:
    rgba(238, 224, 199, .82);
}


#archives
.archive-visual-tab.active {
  color:
    rgba(246, 229, 198, .96);

  background:
    rgba(13, 13, 15, .48);
}


#archives
.archive-visual-tab.active::after {
  content:
    "";

  position:
    absolute;

  left:
    17px;

  right:
    45%;

  bottom:
    -1px;

  height:
    1px;

  background:
    rgba(211, 168, 99, .78);

  box-shadow:
    0 0 9px
    rgba(211, 168, 99, .30);
}


/* =========================================================
   右上計數
========================================================= */

#archives
.archive-visual-counter {
  position:
    absolute;

  z-index:
    20;

  right:
    92px;

  top:
    40px;

  display:
    flex;

  align-items:
    baseline;

  gap:
    7px;

  color:
    rgba(222, 210, 190, .32);

  font-family:
    Georgia,
    serif;
}


#archives
.archive-visual-counter span {
  color:
    rgba(234, 211, 171, .80);

  font-size:
    28px;
}


#archives
.archive-visual-counter i,
#archives
.archive-visual-counter em {
  font-size:
    10px;

  font-style:
    normal;
}


/* =========================================================
   左下資訊
========================================================= */

#archives
.archive-visual-caption {
  position:
    absolute;

  z-index:
    20;

  left:
    42px;

  bottom:
    41px;

  max-width:
    560px;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, .78);
}


#archives
.archive-visual-kind {
  display:
    block;

  margin-bottom:
    7px;

  color:
    rgba(205, 163, 98, .62);

  font-size:
    8px;

  letter-spacing:
    .25em;
}


#archives
.archive-visual-caption h2 {
  margin:
    0 !important;

  color:
    rgba(245, 232, 211, .96);

  font-size:
    clamp(
      27px,
      2.4vw,
      42px
    ) !important;

  font-weight:
    400;

  line-height:
    1.15;

  letter-spacing:
    .10em;
}


#archives
.archive-visual-caption p {
  margin:
    10px 0 0;

  color:
    rgba(220, 209, 191, .60);

  font-size:
    13px;

  line-height:
    1.7;

  letter-spacing:
    .04em;
}


/* =========================================================
   下方左右切換
========================================================= */

#archives
.archive-visual-controls {
  position:
    absolute;

  z-index:
    22;

  left:
    50%;

  bottom:
    35px;

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  transform:
    translateX(-50%);
}


#archives
.archive-visual-controls > button {
  display:
    grid;

  place-items:
    center;

  width:
    40px;

  height:
    40px;

  padding:
    0;

  border:
    1px solid
    rgba(201, 164, 106, .18);

  border-radius:
    50%;

  background:
    rgba(3, 6, 10, .42);

  color:
    rgba(228, 207, 171, .62);

  font-size:
    14px;

  cursor:
    pointer;

  backdrop-filter:
    blur(8px);

  transition:
    border-color .25s ease,
    color .25s ease,
    transform .25s ease;
}


#archives
.archive-visual-controls > button:hover {
  color:
    rgba(250, 229, 194, .96);

  border-color:
    rgba(213, 168, 97, .50);

  transform:
    scale(1.07);
}


/* =========================================================
   圓點
========================================================= */

#archives
.archive-visual-dots {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


#archives
.archive-visual-dot {
  width:
    5px;

  height:
    5px;

  padding:
    0;

  border:
    0;

  border-radius:
    50%;

  background:
    rgba(211, 193, 161, .25);

  cursor:
    pointer;

  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}


#archives
.archive-visual-dot.active {
  background:
    rgba(221, 175, 102, .92);

  transform:
    scale(1.35);

  box-shadow:
    0 0 9px
    rgba(221, 175, 102, .38);
}


/* =========================================================
   沒有收藏時
========================================================= */

#archives
.archive-visual-empty {
  position:
    relative;

  z-index:
    2;

  text-align:
    center;

  color:
    rgba(221, 210, 192, .40);
}


#archives
.archive-visual-empty span {
  display:
    block;

  margin-bottom:
    10px;

  color:
    rgba(190, 150, 89, .30);

  font-size:
    7px;

  letter-spacing:
    .34em;
}


#archives
.archive-visual-empty strong {
  display:
    block;

  color:
    rgba(228, 215, 194, .58);

  font-size:
    30px;

  font-weight:
    400;

  letter-spacing:
    .18em;
}


#archives
.archive-visual-empty p {
  margin:
    12px 0 0;

  font-size:
    11px;

  letter-spacing:
    .12em;
}


/* =========================================================
   沒圖時把控制器淡掉
========================================================= */

#archives
.archive-visual-shell.is-empty
.archive-visual-controls {
  opacity:
    .25;

  pointer-events:
    none;
}


#archives
.archive-visual-shell.is-empty
.archive-visual-counter {
  opacity:
    .42;
}


/* =========================================================
   手機
========================================================= */

@media (max-width: 760px) {

  #archives
  [data-archive-content="visual"] {
    padding:
      14px !important;
  }


  #archives
  .archive-visual-shell {
    width:
      calc(100vw - 28px);

    height:
      calc(100vh - 28px);
  }


  #archives
  .archive-visual-tabs {
    left:
      20px;

    top:
      20px;
  }


  #archives
  .archive-visual-tab {
    min-width:
      112px;

    padding:
      8px 10px;
  }


  #archives
  .archive-visual-tab strong {
    font-size:
      14px;
  }


  #archives
  .archive-visual-counter {
    display:
      none;
  }


  #archives
  .archive-visual-caption {
    left:
      22px;

    right:
      22px;

    bottom:
      88px;
  }


  #archives
  .archive-visual-controls {
    bottom:
      28px;
  }

}
/* =========================================================
   全站音樂控制
   位於右側 01～06 下方
========================================================= */


/* =========================================================
   整組播放器
========================================================= */

.chapter-rail
.music-rail {
  position:
    absolute;

  top:
    calc(100% + 62px);

  right:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-end;

  gap:
    10px;

  padding-top:
    18px;
}


/* 上方分隔線 */

.chapter-rail
.music-rail::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    28px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(193, 151, 88, .30)
    );
}


/* =========================================================
   每一顆
========================================================= */

.chapter-rail
.music-rail-button {
  position:
    relative;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    10px;

  min-width:
    92px;

  min-height:
    28px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    rgba(210, 204, 194, .32);

  font-family:
    inherit;

  cursor:
    pointer;
}


/* 小符號 */

.chapter-rail
.music-rail-button > span {
  width:
    22px;

  color:
    rgba(199, 157, 90, .45);

  font-size:
    11px;

  line-height:
    1;

  text-align:
    right;

  transition:
    color .3s ease;
}


/* 文字平常收起 */

.chapter-rail
.music-rail-button > em {
  order:
    -1;

  width:
    0;

  overflow:
    hidden;

  white-space:
    nowrap;

  opacity:
    0;

  color:
    rgba(226, 216, 199, .70);

  font-size:
    12px;

  font-style:
    normal;

  letter-spacing:
    .12em;

  text-align:
    right;

  transition:
    width .35s ease,
    opacity .35s ease,
    color .3s ease;
}


/* 菱形 */

.chapter-rail
.music-rail-button::after {
  content:
    "";

  flex:
    0 0 auto;

  width:
    7px;

  height:
    7px;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(185, 143, 79, .34);

  background:
    transparent;

  transition:
    background .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}


/* hover */

.chapter-rail
.music-rail-button:hover > em {
  width:
    52px;

  opacity:
    1;

  color:
    rgba(239, 221, 184, .94);
}


.chapter-rail
.music-rail-button:hover > span {
  color:
    rgba(221, 181, 112, .85);
}


.chapter-rail
.music-rail-button:hover::after {
  border-color:
    rgba(225, 179, 104, .72);

  box-shadow:
    0 0 9px
    rgba(213, 157, 80, .22);
}


/* =========================================================
   正在播放
========================================================= */

.chapter-rail
.music-rail-button.is-playing::after {
  background:
    rgba(150, 45, 42, .64);

  border-color:
    rgba(230, 186, 110, .82);

  box-shadow:
    0 0 9px
    rgba(215, 157, 80, .24);
}


/* =========================================================
   靜音中
========================================================= */

.chapter-rail
.music-rail-button.is-muted {
  opacity:
    .55;
}


/* =========================================================
   手機
   原本 chapter rail 手機就會隱藏，
   音樂 rail 跟著一起隱藏
========================================================= */

@media (max-width: 800px) {

  .music-rail {
    display:
      none !important;
  }

}
/* =========================================================
   05｜02 聲藏
========================================================= */

#archives
[data-archive-content="audio"] {
  padding:
    5vh 6vw !important;

  background:
    linear-gradient(
      115deg,
      rgba(2,5,9,.98),
      rgba(5,8,13,.96)
    ) !important;
}


/* =========================================================
   主框
========================================================= */

#archives
.audio-archive-shell {
  width:
    min(1380px, 87vw);

  height:
    min(760px, 84vh);

  display:
    grid;

  grid-template-columns:
    minmax(380px, .92fr)
    minmax(500px, 1.25fr);

  overflow:
    hidden;

  border:
    1px solid
    rgba(190, 149, 90, .18);

  background:
    radial-gradient(
      ellipse at 20% 35%,
      rgba(87, 109, 132, .09),
      transparent 36%
    ),

    linear-gradient(
      145deg,
      rgba(9,13,19,.98),
      rgba(3,6,10,.99)
    );

  box-shadow:
    0 35px 110px
    rgba(0,0,0,.64);
}


/* =========================================================
   左側 NOW PLAYING
========================================================= */

#archives
.audio-archive-now {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  padding:
    60px 64px;

  border-right:
    1px solid
    rgba(190,149,90,.12);

  overflow:
    hidden;
}


#archives
.audio-archive-now::before {
  content:
    "";

  position:
    absolute;

  width:
    440px;

  height:
    440px;

  left:
    -150px;

  bottom:
    -170px;

  border:
    1px solid
    rgba(187,148,89,.045);

  border-radius:
    50%;
}


#archives
.audio-archive-kicker {
  position:
    absolute;

  top:
    46px;

  left:
    64px;

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  color:
    rgba(195,154,94,.55);
}


#archives
.audio-archive-kicker span {
  font-size:
    9px;
}


#archives
.audio-archive-kicker i {
  width:
    42px;

  height:
    1px;

  background:
    rgba(195,154,94,.34);
}


#archives
.audio-archive-kicker em {
  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .26em;
}


#archives
.audio-archive-small {
  margin:
    0 0 42px;

  color:
    rgba(205,193,173,.42);

  font-size:
    11px;

  letter-spacing:
    .13em;
}


#archives
.audio-archive-status {
  margin-bottom:
    14px;

  color:
    rgba(190,149,88,.43);

  font-size:
    7px;

  letter-spacing:
    .32em;
}


#archives
.audio-archive-number {
  margin-bottom:
    4px;

  color:
    rgba(193,150,87,.42);

  font-family:
    Georgia,
    serif;

  font-size:
    14px;
}


#archives
.audio-archive-now h2 {
  margin:
    0 !important;

  color:
    rgba(245,230,204,.96);

  font-size:
    clamp(
      42px,
      4vw,
      66px
    ) !important;

  font-weight:
    400;

  line-height:
    1.12;

  letter-spacing:
    .10em;
}


#archives
.audio-archive-subtitle {
  margin:
    14px 0 0;

  color:
    rgba(202,188,164,.46);

  font-size:
    9px;

  letter-spacing:
    .25em;
}


/* =========================================================
   進度
========================================================= */

#archives
.audio-archive-progress {
  width:
    min(430px, 100%);

  margin-top:
    54px;
}


#archives
.audio-archive-progress-track {
  position:
    relative;

  width:
    100%;

  height:
    18px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  cursor:
    pointer;
}


#archives
.audio-archive-progress-track::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    8px;

  height:
    1px;

  background:
    rgba(208,190,161,.15);
}


#archives
.audio-archive-progress-fill {
  position:
    absolute;

  left:
    0;

  top:
    8px;

  width:
    0%;

  height:
    1px;

  background:
    rgba(205,158,90,.84);

  box-shadow:
    0 0 8px
    rgba(205,158,90,.22);
}


#archives
.audio-archive-progress-dot {
  position:
    absolute;

  left:
    0%;

  top:
    5px;

  width:
    7px;

  height:
    7px;

  margin-left:
    -3px;

  border:
    1px solid
    rgba(228,190,126,.72);

  background:
    #111015;

  transform:
    rotate(45deg);
}


#archives
.audio-archive-time {
  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    7px;

  color:
    rgba(196,184,163,.38);

  font-family:
    Georgia,
    serif;

  font-size:
    9px;
}


#archives
.audio-archive-time em {
  font-style:
    normal;
}


/* =========================================================
   音波小動畫
========================================================= */

#archives
.audio-archive-playing-mark {
  position:
    absolute;

  left:
    64px;

  bottom:
    48px;

  display:
    flex;

  align-items:
    flex-end;

  gap:
    4px;

  height:
    19px;
}


#archives
.audio-archive-playing-mark span {
  width:
    1px;

  height:
    5px;

  background:
    rgba(196,150,84,.48);
}


#archives
.audio-archive-shell.is-playing
.audio-archive-playing-mark span {
  animation:
    ywjAudioBar
    .9s ease-in-out
    infinite alternate;
}


#archives
.audio-archive-shell.is-playing
.audio-archive-playing-mark span:nth-child(2) {
  animation-delay:
    -.25s;
}


#archives
.audio-archive-shell.is-playing
.audio-archive-playing-mark span:nth-child(3) {
  animation-delay:
    -.48s;
}


#archives
.audio-archive-shell.is-playing
.audio-archive-playing-mark span:nth-child(4) {
  animation-delay:
    -.13s;
}


@keyframes ywjAudioBar {

  from {
    height:
      4px;
  }

  to {
    height:
      18px;
  }

}


/* =========================================================
   右側曲庫
========================================================= */

#archives
.audio-archive-library {
  min-width:
    0;

  padding:
    54px 58px;

  overflow-y:
    auto;
}


#archives
.audio-archive-library-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  margin-bottom:
    31px;

  padding-bottom:
    17px;

  border-bottom:
    1px solid
    rgba(190,149,90,.12);
}


#archives
.audio-archive-library-head div {
  display:
    grid;

  gap:
    6px;
}


#archives
.audio-archive-library-head span {
  color:
    rgba(190,149,90,.35);

  font-size:
    7px;

  letter-spacing:
    .28em;
}


#archives
.audio-archive-library-head strong {
  color:
    rgba(235,220,196,.84);

  font-size:
    24px;

  font-weight:
    400;

  letter-spacing:
    .13em;
}


#archives
.audio-archive-library-head > em {
  color:
    rgba(194,180,158,.31);

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .20em;
}


/* =========================================================
   曲目
========================================================= */

#archives
.audio-archive-list {
  display:
    grid;
}


#archives
.audio-archive-track {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    14px;

  width:
    100%;

  padding:
    21px 8px;

  border:
    0;

  border-bottom:
    1px solid
    rgba(188,148,89,.08);

  background:
    transparent;

  color:
    rgba(211,201,184,.46);

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background .25s ease,
    color .25s ease;
}


#archives
.audio-archive-track-number {
  color:
    rgba(190,148,86,.34);

  font-family:
    Georgia,
    serif;

  font-size:
    10px;
}


#archives
.audio-archive-track-copy {
  display:
    grid;

  gap:
    5px;
}


#archives
.audio-archive-track-copy strong {
  color:
    inherit;

  font-size:
    16px;

  font-weight:
    400;

  letter-spacing:
    .09em;
}


#archives
.audio-archive-track-copy em {
  color:
    rgba(180,174,164,.28);

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .20em;
}


#archives
.audio-archive-track-state {
  color:
    rgba(193,151,89,.30);

  font-size:
    7px;

  letter-spacing:
    .18em;
}


#archives
.audio-archive-track:hover {
  color:
    rgba(237,220,193,.82);

  background:
    rgba(177,128,63,.025);
}


#archives
.audio-archive-track.active {
  color:
    rgba(246,227,196,.96);

  background:
    linear-gradient(
      90deg,
      rgba(158,108,51,.07),
      transparent
    );
}


#archives
.audio-archive-track.active::before {
  content:
    "";

  position:
    absolute;

  left:
    -1px;

  top:
    29%;

  bottom:
    29%;

  width:
    1px;

  background:
    rgba(218,169,96,.72);

  box-shadow:
    0 0 7px
    rgba(218,169,96,.22);
}


#archives
.audio-archive-track.active
.audio-archive-track-state {
  color:
    rgba(205,161,95,.74);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

  #archives
  .audio-archive-shell {
    width:
      92vw;

    height:
      88vh;

    grid-template-columns:
      1fr;

    overflow-y:
      auto;
  }


  #archives
  .audio-archive-now {
    min-height:
      520px;

    padding:
      60px 32px;
  }


  #archives
  .audio-archive-library {
    padding:
      40px 30px;
  }

}
/* =========================================================
   右側音樂控制｜音量
========================================================= */

.chapter-rail
.music-volume {
  width:
    92px;

  margin-top:
    10px;

  padding-top:
    17px;

  border-top:
    1px solid
    rgba(193, 151, 88, .20);
}


.chapter-rail
.music-volume > span {
  display:
    block;

  margin-bottom:
    9px;

  color:
    rgba(199, 157, 90, .42);

  font-size:
    7px;

  letter-spacing:
    .24em;

  text-align:
    right;
}


.chapter-rail
.music-volume input {
  display:
    block;

  width:
    92px;

  height:
    14px;

  margin:
    0;

  appearance:
    none;

  -webkit-appearance:
    none;

  background:
    transparent;

  cursor:
    pointer;
}


/* 軌道 */

.chapter-rail
.music-volume input::-webkit-slider-runnable-track {
  height:
    1px;

  background:
    rgba(193, 151, 88, .28);
}


.chapter-rail
.music-volume input::-moz-range-track {
  height:
    1px;

  background:
    rgba(193, 151, 88, .28);
}


/* 拉鈕 */

.chapter-rail
.music-volume input::-webkit-slider-thumb {
  width:
    7px;

  height:
    7px;

  margin-top:
    -3px;

  appearance:
    none;

  -webkit-appearance:
    none;

  border:
    1px solid
    rgba(229, 187, 118, .82);

  border-radius:
    0;

  background:
    rgba(132, 43, 39, .90);

  transform:
    rotate(45deg);

  box-shadow:
    0 0 7px
    rgba(214, 159, 82, .25);
}


.chapter-rail
.music-volume input::-moz-range-thumb {
  width:
    7px;

  height:
    7px;

  border:
    1px solid
    rgba(229, 187, 118, .82);

  border-radius:
    0;

  background:
    rgba(132, 43, 39, .90);

  transform:
    rotate(45deg);
}
/* =========================================================
   05｜聲藏
   黑膠唱片版本 FINAL
========================================================= */


/* =========================================================
   左側重新排版
========================================================= */

#archives
.audio-archive-now {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    54px 54px
    42px !important;

  box-sizing:
    border-box;

  overflow:
    hidden;
}


/* 原本左下巨大圓弧不要了 */

#archives
.audio-archive-now::before {
  display:
    none !important;
}


/* =========================================================
   左上章節字放大
========================================================= */

#archives
.audio-archive-kicker {
  top:
    38px !important;

  left:
    46px !important;

  gap:
    14px !important;
}


#archives
.audio-archive-kicker span {
  font-size:
    10px !important;
}


#archives
.audio-archive-kicker em {
  font-size:
    9px !important;

  letter-spacing:
    .24em !important;
}


#archives
.audio-archive-small {
  position:
    absolute;

  top:
    92px;

  left:
    46px;

  margin:
    0 !important;

  color:
    rgba(216, 203, 181, .52) !important;

  font-size:
    14px !important;

  letter-spacing:
    .12em !important;
}


/* =========================================================
   黑膠唱片區
========================================================= */

#archives
.audio-vinyl-player {
  position:
    relative;

  width:
    min(
      420px,
      34vw
    );

  aspect-ratio:
    1;

  margin-top:
    54px;
}


/* =========================================================
   黑膠本體
========================================================= */

#archives
.audio-vinyl-disc {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    82%;

  aspect-ratio:
    1;

  transform:
    translate(
      -50%,
      -50%
    );

  border-radius:
    50%;

  background:

    radial-gradient(
      circle at 50% 50%,
      transparent 0 8%,
      rgba(121, 90, 52, .20) 8.2% 8.8%,
      transparent 9%
    ),

    radial-gradient(
      circle at 35% 28%,
      rgba(255,255,255,.045),
      transparent 27%
    ),

    repeating-radial-gradient(
      circle at center,
      #0d0e11 0px,
      #0d0e11 2px,
      #08090c 3px,
      #101115 4px
    );

  box-shadow:
    0 34px 60px
    rgba(0,0,0,.55),

    inset
    0 0 35px
    rgba(255,255,255,.025),

    0 0 0 1px
    rgba(186,143,78,.16);

  animation:
    ywjVinylSpin
    13s linear
    infinite;

  animation-play-state:
    paused;
}


/* 播放才旋轉 */

#archives
.audio-archive-shell.is-playing
.audio-vinyl-disc {
  animation-play-state:
    running;
}


@keyframes ywjVinylSpin {

  from {
    transform:
      translate(
        -50%,
        -50%
      )
      rotate(0deg);
  }

  to {
    transform:
      translate(
        -50%,
        -50%
      )
      rotate(360deg);
  }

}


/* =========================================================
   黑膠細紋
========================================================= */

#archives
.audio-vinyl-grooves {
  position:
    absolute;

  inset:
    5%;

  border:
    1px solid
    rgba(188, 153, 98, .07);

  border-radius:
    50%;

  pointer-events:
    none;
}


#archives
.audio-vinyl-grooves::before,
#archives
.audio-vinyl-grooves::after {
  content:
    "";

  position:
    absolute;

  border-radius:
    50%;

  border:
    1px solid
    rgba(209, 173, 113, .055);
}


#archives
.audio-vinyl-grooves::before {
  inset:
    15%;
}


#archives
.audio-vinyl-grooves::after {
  inset:
    30%;
}


/* =========================================================
   黑膠中央唱片標
========================================================= */

#archives
.audio-vinyl-label {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    37%;

  aspect-ratio:
    1;

  transform:
    translate(
      -50%,
      -50%
    );

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  box-sizing:
    border-box;

  padding:
    18px;

  border:
    1px solid
    rgba(216, 175, 109, .30);

  border-radius:
    50%;

  text-align:
    center;

  background:

    radial-gradient(
      circle at 35% 25%,
      rgba(225,190,132,.18),
      transparent 38%
    ),

    linear-gradient(
      145deg,
      #342417,
      #17100d
    );

  box-shadow:
    inset 0 0 20px
    rgba(0,0,0,.55);
}


#archives
.audio-vinyl-number {
  margin-bottom:
    7px;

  color:
    rgba(219, 176, 105, .72);

  font-family:
    Georgia,
    serif;

  font-size:
    10px;
}


#archives
.audio-vinyl-label strong {
  max-width:
    100%;

  color:
    rgba(246, 225, 190, .96);

  font-size:
    clamp(
      16px,
      1.35vw,
      22px
    );

  font-weight:
    400;

  line-height:
    1.25;

  letter-spacing:
    .10em;
}


#archives
.audio-vinyl-label em {
  max-width:
    95%;

  margin-top:
    7px;

  color:
    rgba(224, 204, 174, .55);

  font-size:
    7px;

  font-style:
    normal;

  line-height:
    1.5;

  letter-spacing:
    .12em;
}


/* 中心孔 */

#archives
.audio-vinyl-hole {
  position:
    absolute;

  left:
    50%;

  bottom:
    13%;

  width:
    4px;

  height:
    4px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    rgba(4,5,7,.90);

  box-shadow:
    0 0 0 1px
    rgba(216,175,109,.20);
}


/* =========================================================
   唱針
========================================================= */

#archives
.audio-tonearm {
  position:
    absolute;

  z-index:
    7;

  right:
    1%;

  top:
    2%;

  width:
    35%;

  height:
    64%;

  transform-origin:
    79% 15%;

  transform:
    rotate(-7deg);

  transition:
    transform
    .8s
    cubic-bezier(.2,.7,.2,1);
}


/* 播放時唱針落下 */

#archives
.audio-archive-shell.is-playing
.audio-tonearm {
  transform:
    rotate(10deg);
}


/* 唱針底座 */

#archives
.audio-tonearm-base {
  position:
    absolute;

  right:
    4%;

  top:
    2%;

  width:
    38px;

  height:
    38px;

  border:
    1px solid
    rgba(200,160,97,.32);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      #29231d,
      #090a0c 68%
    );

  box-shadow:
    0 6px 18px
    rgba(0,0,0,.45);
}


/* 唱針桿 */

#archives
.audio-tonearm-arm {
  position:
    absolute;

  right:
    21px;

  top:
    28px;

  width:
    2px;

  height:
    72%;

  transform:
    rotate(18deg);

  transform-origin:
    top;

  background:
    linear-gradient(
      180deg,
      rgba(221,195,148,.70),
      rgba(107,86,57,.68)
    );

  box-shadow:
    1px 0 3px
    rgba(255,255,255,.05);
}


/* 唱頭 */

#archives
.audio-tonearm-head {
  position:
    absolute;

  left:
    38%;

  bottom:
    7%;

  width:
    22px;

  height:
    11px;

  transform:
    rotate(18deg);

  border:
    1px solid
    rgba(200,160,97,.28);

  background:
    #111012;
}


/* =========================================================
   NOW PLAYING 小列
========================================================= */

#archives
.audio-vinyl-now {
  width:
    min(
      420px,
      90%
    );

  display:
    flex;

  align-items:
    center;

  gap:
    13px;

  margin-top:
    -5px;

  color:
    rgba(202, 166, 107, .66);
}


#archives
.audio-vinyl-now span,
#archives
.audio-vinyl-now em {
  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .20em;
}


#archives
.audio-vinyl-now i {
  flex:
    1;

  height:
    1px;

  background:
    rgba(192,151,89,.18);
}


/* =========================================================
   進度條位置調整
========================================================= */

#archives
.audio-archive-progress {
  width:
    min(
      420px,
      90%
    ) !important;

  margin-top:
    22px !important;
}


#archives
.audio-archive-time {
  margin-top:
    9px !important;

  font-size:
    11px !important;

  color:
    rgba(209,196,175,.52) !important;
}


/* 音波 */

#archives
.audio-archive-playing-mark {
  left:
    46px !important;

  bottom:
    35px !important;
}


/* =========================================================
   右側整體字級放大
========================================================= */

#archives
.audio-archive-library {
  padding:
    48px 54px !important;
}


#archives
.audio-archive-library-head span {
  font-size:
    9px !important;

  letter-spacing:
    .27em !important;
}


#archives
.audio-archive-library-head strong {
  font-size:
    30px !important;
}


#archives
.audio-archive-library-head > em {
  font-size:
    9px !important;

  letter-spacing:
    .18em !important;
}


/* =========================================================
   每一首歌放大
========================================================= */

#archives
.audio-archive-track {
  grid-template-columns:
    48px
    minmax(0, 1fr)
    auto !important;

  gap:
    16px !important;

  padding:
    22px 10px !important;
}


#archives
.audio-archive-track-number {
  font-size:
    11px !important;
}


#archives
.audio-archive-track-copy {
  gap:
    7px !important;
}


#archives
.audio-archive-track-copy strong {
  font-size:
    19px !important;

  letter-spacing:
    .08em !important;
}


#archives
.audio-archive-track-copy em {
  font-size:
    9px !important;

  line-height:
    1.5;

  letter-spacing:
    .15em !important;

  color:
    rgba(191,183,170,.43) !important;
}


#archives
.audio-archive-track-state {
  font-size:
    9px !important;

  letter-spacing:
    .16em !important;
}


/* 當前曲目再亮一點 */

#archives
.audio-archive-track.active
.audio-archive-track-copy strong {
  color:
    rgba(248,228,195,.98);
}


#archives
.audio-archive-track.active
.audio-archive-track-copy em {
  color:
    rgba(210,187,149,.62) !important;
}


/* =========================================================
   關閉鍵也稍微放大
========================================================= */

#archives
[data-archive-content="audio"]
.archive-content-close {
  width:
    50px;

  height:
    50px;
}


/* =========================================================
   小螢幕
========================================================= */

@media (max-width: 850px) {

  #archives
  .audio-vinyl-player {
    width:
      min(
        360px,
        34vw
      );
  }


  #archives
  .audio-archive-track-copy strong {
    font-size:
      17px !important;
  }

}


@media (max-width: 850px) {

  #archives
  .audio-vinyl-player {
    width:
      330px;

    max-width:
      80vw;
  }


  #archives
  .audio-archive-now {
    min-height:
      620px !important;
  }

}
#archives
.audio-vinyl-credit {
  width:
    min(
      420px,
      90%
    );

  margin:
    10px 0 0;

  color:
    rgba(215, 198, 170, .58);

  font-size:
    12px;

  line-height:
    1.6;

  letter-spacing:
    .10em;

  text-align:
    left;
}
/* =========================================================
   05｜聲藏
   黑膠頁播放器控制
========================================================= */

#archives
.audio-vinyl-controls {
  width:
    min(420px, 90%);

  display:
    grid;

  grid-template-columns:
    repeat(3, auto)
    minmax(120px, 1fr);

  align-items:
    center;

  gap:
    14px;

  margin-top:
    17px;

  padding:
    14px 0;

  border-top:
    1px solid
    rgba(193, 151, 88, .13);

  border-bottom:
    1px solid
    rgba(193, 151, 88, .10);
}


/* =========================================================
   三顆控制鍵
========================================================= */

#archives
.audio-vinyl-control {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    5px 0;

  border:
    0;

  background:
    transparent;

  color:
    rgba(212, 199, 178, .58);

  font-family:
    inherit;

  cursor:
    pointer;

  transition:
    color .25s ease;
}


#archives
.audio-vinyl-control > span {
  min-width:
    18px;

  color:
    rgba(210, 168, 99, .72);

  font-size:
    12px;

  line-height:
    1;
}


#archives
.audio-vinyl-control > em {
  color:
    inherit;

  font-size:
    10px;

  font-style:
    normal;

  letter-spacing:
    .12em;

  white-space:
    nowrap;
}


#archives
.audio-vinyl-control:hover {
  color:
    rgba(246, 226, 194, .96);
}


/* 播放中 */

#archives
.audio-vinyl-control.is-playing > span {
  color:
    rgba(232, 184, 106, .96);

  text-shadow:
    0 0 9px
    rgba(215, 157, 80, .28);
}


/* 靜音 */

#archives
.audio-vinyl-control.is-muted {
  opacity:
    .48;
}


/* =========================================================
   音量
========================================================= */

#archives
.audio-vinyl-volume {
  display:
    grid;

  grid-template-columns:
    auto 1fr;

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;
}


#archives
.audio-vinyl-volume > span {
  color:
    rgba(206, 166, 101, .52);

  font-size:
    8px;

  letter-spacing:
    .22em;
}


#archives
.audio-vinyl-volume input {
  width:
    100%;

  min-width:
    90px;

  height:
    14px;

  margin:
    0;

  appearance:
    none;

  -webkit-appearance:
    none;

  background:
    transparent;

  cursor:
    pointer;
}


/* 軌道 */

#archives
.audio-vinyl-volume input::-webkit-slider-runnable-track {
  height:
    1px;

  background:
    rgba(193, 151, 88, .30);
}


#archives
.audio-vinyl-volume input::-moz-range-track {
  height:
    1px;

  background:
    rgba(193, 151, 88, .30);
}


/* 拉鈕 */

#archives
.audio-vinyl-volume input::-webkit-slider-thumb {
  width:
    8px;

  height:
    8px;

  margin-top:
    -3.5px;

  appearance:
    none;

  -webkit-appearance:
    none;

  border:
    1px solid
    rgba(229, 187, 118, .84);

  border-radius:
    0;

  background:
    rgba(128, 43, 39, .92);

  transform:
    rotate(45deg);

  box-shadow:
    0 0 8px
    rgba(213, 159, 82, .22);
}


#archives
.audio-vinyl-volume input::-moz-range-thumb {
  width:
    8px;

  height:
    8px;

  border:
    1px solid
    rgba(229, 187, 118, .84);

  border-radius:
    0;

  background:
    rgba(128, 43, 39, .92);

  transform:
    rotate(45deg);
}


/* =========================================================
   手機
========================================================= */

@media (max-width: 700px) {

  #archives
  .audio-vinyl-controls {
    grid-template-columns:
      repeat(3, 1fr);

    row-gap:
      13px;
  }


  #archives
  .audio-vinyl-volume {
    grid-column:
      1 / -1;
  }

}
/* =========================================================
   05｜聲藏
   正式背景圖
========================================================= */

#archives
[data-archive-content="audio"] {
  background:
    rgba(2, 5, 9, .88)
    !important;
}


/* 聲藏主框背景 */

#archives
.audio-archive-shell {
  position:
    relative;

  background:
    linear-gradient(
      90deg,
      rgba(3, 7, 12, .80) 0%,
      rgba(3, 7, 12, .72) 42%,
      rgba(3, 7, 12, .82) 100%
    ),

    url("assets/images/audio-archive-bg.png")
    center center /
    cover
    no-repeat
    !important;
}


/* 左右兩區保持透明，讓背景透出來 */

#archives
.audio-archive-now,
#archives
.audio-archive-library {
  background:
    transparent !important;
}


/* 右側歌單稍微壓暗，確保字清楚 */

#archives
.audio-archive-library {
  background:
    linear-gradient(
      90deg,
      rgba(3, 6, 10, .22),
      rgba(3, 6, 10, .52)
    )
    !important;
}


/* 黑膠這側留一些月光感 */

#archives
.audio-archive-now {
  background:
    radial-gradient(
      ellipse at 38% 40%,
      rgba(89, 117, 143, .08),
      transparent 50%
    )
    !important;
}
/* =========================================================
   05｜聲藏
   全螢幕背景 FINAL
   一定放 style.css 最底
========================================================= */


/* 整個聲藏開啟層＝背景圖 */
#archives
.archive-content-layer[data-archive-content="audio"] {
  background:
    linear-gradient(
      90deg,
      rgba(2, 5, 9, .60) 0%,
      rgba(2, 5, 9, .48) 48%,
      rgba(2, 5, 9, .64) 100%
    ),
    url("assets/images/audio-archive-bg.png")
    center center /
    cover
    no-repeat
    !important;
}


/* 中間播放器框不要再自己吃背景圖 */
#archives
[data-archive-content="audio"]
.audio-archive-shell {
  background:
    rgba(3, 6, 10, .56)
    !important;

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);

  box-shadow:
    0 35px 110px
    rgba(0, 0, 0, .34)
    !important;
}


/* 左半黑膠區半透明 */
#archives
[data-archive-content="audio"]
.audio-archive-now {
  background:
    linear-gradient(
      90deg,
      rgba(2, 5, 9, .42),
      rgba(2, 5, 9, .18)
    )
    !important;
}


/* 右半歌單區稍微深一點 */
#archives
[data-archive-content="audio"]
.audio-archive-library {
  background:
    linear-gradient(
      90deg,
      rgba(2, 5, 9, .22),
      rgba(2, 5, 9, .50)
    )
    !important;
}
/* =========================================================
   05｜03 秘藏
   7 / 14 / 30 日解封系統 FINAL
========================================================= */


/* =========================================================
   全螢幕
========================================================= */

#archives
.archive-content-layer[data-archive-content="sealed"] {
  padding:
    4vh 5vw !important;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(91, 22, 25, .15),
      transparent 34%
    ),

    linear-gradient(
      145deg,
      rgba(2, 3, 6, .98),
      rgba(5, 5, 8, .98)
    )
    !important;
}


/* =========================================================
   主框
========================================================= */

#archives
.sealed-vault {
  position:
    relative;

  width:
    min(1500px, 90vw);

  height:
    min(810px, 88vh);

  overflow:
    hidden;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(157, 100, 67, .17);

  background:
    radial-gradient(
      circle at 38% 43%,
      rgba(101, 31, 31, .08),
      transparent 31%
    ),

    linear-gradient(
      135deg,
      rgba(8, 9, 12, .96),
      rgba(2, 3, 5, .985)
    );

  box-shadow:
    0 35px 120px
    rgba(0, 0, 0, .68);
}


/* =========================================================
   左上標題
========================================================= */

#archives
.sealed-vault-header {
  position:
    absolute;

  z-index:
    15;

  left:
    48px;

  top:
    41px;
}


#archives
.sealed-vault-kicker {
  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  color:
    rgba(184, 130, 88, .56);
}


#archives
.sealed-vault-kicker span {
  font-size:
    10px;
}


#archives
.sealed-vault-kicker i {
  width:
    43px;

  height:
    1px;

  background:
    rgba(184, 130, 88, .34);
}


#archives
.sealed-vault-kicker em {
  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .27em;
}


#archives
.sealed-vault-header > p {
  margin:
    22px 0 5px;

  color:
    rgba(209, 190, 164, .48);

  font-size:
    13px;

  letter-spacing:
    .12em;
}


#archives
.sealed-vault-header h2 {
  margin:
    0 !important;

  color:
    rgba(235, 219, 194, .90);

  font-size:
    46px !important;

  font-weight:
    400;

  letter-spacing:
    .15em;
}


/* =========================================================
   中央封印
========================================================= */

#archives
.sealed-vault-core {
  position:
    absolute;

  left:
    35%;

  top:
    46%;

  width:
    min(455px, 33vw);

  aspect-ratio:
    1;

  transform:
    translate(-50%, -50%);
}


/* 三環 */

#archives
.sealed-orbit {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  border-radius:
    50%;

  pointer-events:
    none;
}


#archives
.sealed-orbit-a {
  width:
    100%;

  height:
    100%;

  transform:
    translate(-50%, -50%);

  border:
    1px solid
    rgba(138, 61, 54, .22);
}


#archives
.sealed-orbit-b {
  width:
    78%;

  height:
    78%;

  transform:
    translate(-50%, -50%);

  border:
    1px dashed
    rgba(190, 137, 87, .20);

  animation:
    secretOrbitA
    38s linear
    infinite;
}


#archives
.sealed-orbit-c {
  width:
    58%;

  height:
    58%;

  transform:
    translate(-50%, -50%);

  border:
    1px solid
    rgba(133, 51, 48, .32);

  animation:
    secretOrbitB
    27s linear
    infinite reverse;
}


@keyframes secretOrbitA {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes secretOrbitB {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


/* =========================================================
   三個漂浮封字
========================================================= */

#archives
.sealed-rune {
  position:
    absolute;

  color:
    rgba(157, 94, 66, .25);

  font-size:
    12px;

  text-shadow:
    0 0 10px
    rgba(117, 37, 36, .12);
}


#archives
.sealed-rune-a {
  left:
    8%;

  top:
    29%;
}


#archives
.sealed-rune-b {
  right:
    7%;

  top:
    38%;
}


#archives
.sealed-rune-c {
  left:
    49%;

  bottom:
    3%;
}


/* =========================================================
   中央印
========================================================= */

#archives
.sealed-vault-mark {
  position:
    absolute;

  z-index:
    4;

  left:
    50%;

  top:
    50%;

  width:
    155px;

  height:
    155px;

  transform:
    translate(-50%, -50%)
    rotate(-5deg);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(153, 55, 50, .54);

  background:
    radial-gradient(
      circle,
      rgba(107, 29, 30, .25),
      rgba(17, 7, 9, .94)
    );

  box-shadow:
  0 0 34px
  rgba(121, 35, 35, .14),

  inset
  0 0 30px
  rgba(104, 30, 31, .11);
}


#archives
.sealed-vault-mark::before,
#archives
.sealed-vault-mark::after {
  content: "";
  position: absolute;

  border:
    1px solid
    rgba(151, 55, 50, .18);

  pointer-events: none;
}


#archives
.sealed-vault-mark::before {
  inset: 9px;
}


#archives
.sealed-vault-mark::after {
  inset: 17px;
}


#archives
.sealed-vault-mark span,
#archives
.sealed-vault-mark em {
  color:
    rgba(160, 78, 66, .62);

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .28em;
}


#archives
.sealed-vault-mark strong {
  margin:
    5px 0;

  color:
    rgba(174, 66, 60, .92);

  font-size:
    65px;

  font-weight:
    400;

  line-height:
    1;
}


/* =========================================================
   中央脈動
========================================================= */

#archives
.sealed-vault-glow {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    45%;

  aspect-ratio:
    1;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  background:
    rgba(127, 28, 31, .15);

  filter:
    blur(42px);

  animation:
    secretGlow
    3.8s ease-in-out
    infinite alternate;
}


@keyframes secretGlow {

  from {
    opacity:
      .28;

    transform:
      translate(-50%, -50%)
      scale(.90);
  }

  to {
    opacity:
      .78;

    transform:
      translate(-50%, -50%)
      scale(1.08);
  }

}


/* =========================================================
   入京進度
========================================================= */

#archives
.sealed-progress-panel {
  position:
    absolute;

  left:
    48px;

  right:
    48px;

  bottom:
    42px;

  z-index:
    12;

  display:
    grid;

  grid-template-columns:
    125px
    minmax(260px, 1fr)
    220px;

  align-items:
    end;

  gap:
    28px;

  padding-top:
    20px;

  border-top:
    1px solid
    rgba(174, 118, 78, .12);
}


#archives
.sealed-progress-copy > span {
  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(180, 133, 91, .38);

  font-size:
    7px;

  letter-spacing:
    .23em;
}


#archives
.sealed-progress-copy > strong {
  display:
    flex;

  align-items:
    baseline;

  gap:
    6px;

  font-weight:
    400;
}


#archives
.sealed-progress-copy b {
  color:
    rgba(220, 181, 121, .85);

  font-family:
    Georgia,
    serif;

  font-size:
    30px;

  font-weight:
    400;
}


#archives
.sealed-progress-copy i {
  color:
    rgba(204, 189, 164, .48);

  font-size:
    11px;

  font-style:
    normal;
}


/* 進度條 */

#archives
.sealed-progress-track {
  position:
    relative;

  height:
    18px;
}


#archives
.sealed-progress-track::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  right:
    0;

  top:
    8px;

  height:
    1px;

  background:
    rgba(188, 143, 86, .15);
}


#archives
.sealed-progress-fill {
  position:
    absolute;

  left:
    0;

  top:
    8px;

  width:
    0%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(137, 54, 49, .82),
      rgba(212, 164, 95, .78)
    );

  box-shadow:
    0 0 8px
    rgba(178, 94, 59, .20);

  transition:
    width .8s ease;
}


/* 7 / 14 / 30 節點 */

#archives
.sealed-progress-node {
  position:
    absolute;

  top:
    5px;

  width:
    7px;

  height:
    7px;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(180, 132, 78, .40);

  background:
    #09090c;
}


#archives
.sealed-progress-node.node-7 {
  left:
    23.33%;
}


#archives
.sealed-progress-node.node-14 {
  left:
    46.66%;
}


#archives
.sealed-progress-node.node-30 {
  right:
    0;
}


#archives
.sealed-progress-node.unlocked {
  border-color:
    rgba(226, 179, 103, .90);

  background:
    rgba(142, 47, 43, .90);

  box-shadow:
    0 0 10px
    rgba(192, 84, 55, .42);
}


#archives
.sealed-progress-labels {
  display:
    flex;

  justify-content:
    space-between;

  margin-top:
    3px;

  color:
    rgba(186, 166, 137, .31);

  font-size:
    8px;
}


#archives
.sealed-progress-status {
  margin:
    0 0 2px;

  color:
    rgba(205, 191, 169, .54);

  font-size:
    12px;

  line-height:
    1.7;

  text-align:
    right;
}


/* =========================================================
   三道秘藏
========================================================= */

#archives
.sealed-tier-list {
  position:
    absolute;

  z-index:
    12;

  right:
    55px;

  top:
    50%;

  width:
    min(420px, 31vw);

  transform:
    translateY(-52%);

  border-top:
    1px solid
    rgba(180, 126, 83, .12);
}


#archives
.sealed-tier {
  position:
    relative;

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    42px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  gap:
    14px;

  padding:
    24px 8px;

  border:
    0;

  border-bottom:
    1px solid
    rgba(180, 126, 83, .10);

  background:
    transparent;

  color:
    rgba(203, 190, 170, .35);

  text-align:
    left;

  cursor:
    default;
}


#archives
.sealed-tier-index {
  color:
    rgba(183, 124, 81, .35);

  font-family:
    Georgia,
    serif;

  font-size:
    10px;
}


#archives
.sealed-tier-copy {
  display:
    grid;

  gap:
    5px;
}


#archives
.sealed-tier-copy em {
  color:
    rgba(163, 107, 75, .37);

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .22em;
}


#archives
.sealed-tier-copy strong {
  color:
    inherit;

  font-size:
    22px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}


#archives
.sealed-tier-copy small {
  color:
    rgba(182, 167, 146, .33);

  font-size:
    10px;

  letter-spacing:
    .07em;
}


#archives
.sealed-tier-state {
  color:
    rgba(139, 55, 51, .54);

  font-size:
    8px;

  letter-spacing:
    .19em;
}


/* 解封 */

#archives
.sealed-tier.is-unlocked {
  color:
    rgba(238, 219, 190, .90);

  cursor:
    pointer;

  background:
    linear-gradient(
      90deg,
      rgba(116, 43, 39, .075),
      transparent
    );
}


#archives
.sealed-tier.is-unlocked::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    29%;

  bottom:
    29%;

  width:
    1px;

  background:
    rgba(207, 155, 87, .72);

  box-shadow:
    0 0 8px
    rgba(207, 155, 87, .21);
}


#archives
.sealed-tier.is-unlocked
.sealed-tier-state {
  color:
    rgba(215, 166, 96, .82);
}


#archives
.sealed-tier.is-unlocked:hover {
  background:
    linear-gradient(
      90deg,
      rgba(123, 49, 42, .13),
      transparent
    );
}


/* =========================================================
   解封瞬間
========================================================= */

#archives
.sealed-vault-core.is-unsealing
.sealed-orbit-b {
  animation-duration:
    1.2s;
}


#archives
.sealed-vault-core.is-unsealing
.sealed-orbit-c {
  animation-duration:
    .85s;
}


#archives
.sealed-vault-core.is-unsealing
.sealed-vault-mark {
  animation:
    secretSealBreak
    .85s ease
    both;
}


@keyframes secretSealBreak {

  0% {
    opacity:
      1;

    filter:
      brightness(1);
  }

  45% {
    opacity:
      1;

    filter:
      brightness(2.1);

    box-shadow:
      0 0 65px
      rgba(154, 52, 47, .43);
  }

  100% {
    opacity:
      .55;

    filter:
      brightness(.8);
  }

}


/* =========================================================
   解封內容
========================================================= */

#archives
.sealed-reveal {
  position:
    absolute;

  z-index:
    50;

  inset:
    0;

  display:
    grid;

  place-items:
    center;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  background:
    rgba(2, 3, 5, .91);

  backdrop-filter:
    blur(9px);

  transition:
    opacity .42s ease,
    visibility .42s ease;
}


#archives
.sealed-reveal.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


#archives
.sealed-reveal-close {
  position:
    absolute;

  right:
    32px;

  top:
    27px;

  width:
    42px;

  height:
    42px;

  border:
    1px solid
    rgba(190, 145, 87, .24);

  background:
    rgba(5, 6, 9, .45);

  color:
    rgba(221, 192, 146, .72);

  font-size:
    22px;

  cursor:
    pointer;
}


#archives
.sealed-reveal-inner {
  width:
    min(720px, 72vw);

  text-align:
    center;
}


#archives
.sealed-reveal-kicker {
  color:
    rgba(194, 143, 89, .53);

  font-size:
    8px;

  letter-spacing:
    .30em;
}


#archives
.sealed-reveal-inner h3 {
  margin:
    15px 0 0;

  color:
    rgba(241, 222, 193, .94);

  font-size:
    55px;

  font-weight:
    400;

  letter-spacing:
    .17em;
}


#archives
.sealed-reveal-inner > i {
  display:
    block;

  width:
    75px;

  height:
    1px;

  margin:
    22px auto;

  background:
    rgba(151, 56, 50, .46);
}


#archives
.sealed-reveal-inner > p {
  color:
    rgba(209, 195, 174, .62);

  font-size:
    14px;

  letter-spacing:
    .08em;
}


#archives
.sealed-reveal-placeholder {
  margin-top:
    35px;

  padding:
    30px;

  border:
    1px solid
    rgba(183, 131, 83, .11);

  background:
    rgba(7, 8, 11, .35);
}


#archives
.sealed-reveal-placeholder span {
  display:
    block;

  margin-bottom:
    8px;

  color:
    rgba(170, 111, 77, .40);

  font-size:
    7px;

  letter-spacing:
    .27em;
}


#archives
.sealed-reveal-placeholder strong {
  color:
    rgba(222, 204, 178, .72);

  font-size:
    20px;

  font-weight:
    400;

  letter-spacing:
    .10em;
}
/* =========================================================
   06｜造境者
   CREATOR FINAL
========================================================= */

#creator {
  position:
    relative;

  width:
    100%;

  min-height:
    100vh;

  overflow:
    hidden;

  box-sizing:
    border-box;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    9vh 9vw
    10vh;

  background:
    radial-gradient(
      circle at 68% 36%,
      rgba(118, 79, 49, .08),
      transparent 27%
    ),

    radial-gradient(
      circle at 26% 75%,
      rgba(83, 27, 29, .07),
      transparent 25%
    ),

    linear-gradient(
      135deg,
      #07090d 0%,
      #030508 52%,
      #050507 100%
    );

  color:
    rgba(228, 216, 196, .88);
}


/* =========================================================
   背景氣氛
========================================================= */

#creator
.creator-atmosphere {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:

    linear-gradient(
      90deg,
      transparent 0%,
      rgba(191, 145, 83, .025) 48%,
      transparent 100%
    ),

    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 119px,
      rgba(213, 174, 112, .018) 120px
    );
}


#creator
.creator-atmosphere::before {
  content:
    "";

  position:
    absolute;

  left:
    7vw;

  right:
    7vw;

  top:
    12vh;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(183, 137, 85, .13),
      transparent
    );
}


#creator
.creator-atmosphere::after {
  content:
    "";

  position:
    absolute;

  left:
    7vw;

  right:
    7vw;

  bottom:
    13vh;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(183, 137, 85, .11),
      transparent
    );
}


/* =========================================================
   左上章節標識
========================================================= */

#creator
.creator-kicker {
  position:
    absolute;

  z-index:
    5;

  top:
    52px;

  left:
    7vw;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  color:
    rgba(190, 147, 95, .55);
}


#creator
.creator-kicker span {
  font-family:
    Georgia,
    serif;

  font-size:
    10px;
}


#creator
.creator-kicker i {
  width:
    46px;

  height:
    1px;

  background:
    rgba(190, 147, 95, .31);
}


#creator
.creator-kicker em {
  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .30em;
}


/* =========================================================
   主內容
========================================================= */

#creator
.creator-content {
  position:
    relative;

  z-index:
    3;

  width:
    min(720px, 68vw);

  margin-left:
    -9vw;

  text-align:
    center;
}


#creator
.creator-overline {
  margin:
    0 0 19px;

  color:
    rgba(184, 142, 91, .47);

  font-family:
    Georgia,
    serif;

  font-size:
    9px;

  letter-spacing:
    .32em;
}


#creator
.creator-content h2 {
  margin:
    0;

  color:
    rgba(239, 223, 196, .94);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      54px,
      6vw,
      92px
    );

  font-weight:
    400;

  line-height:
    .95;

  letter-spacing:
    .08em;
}


#creator
.creator-content h3 {
  margin:
    18px 0 0;

  color:
    rgba(224, 207, 181, .77);

  font-size:
    clamp(
      19px,
      1.7vw,
      27px
    );

  font-weight:
    400;

  letter-spacing:
    .42em;

  transform:
    translateX(.21em);
}


/* =========================================================
   中央裝飾線
========================================================= */

#creator
.creator-divider {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  width:
    min(350px, 72%);

  margin:
    31px auto
    25px;
}


#creator
.creator-divider span {
  flex:
    1;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(186, 139, 84, .28)
    );
}


#creator
.creator-divider span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(186, 139, 84, .28),
      transparent
    );
}


#creator
.creator-divider i {
  width:
    7px;

  height:
    7px;

  border:
    1px solid
    rgba(167, 68, 57, .64);

  transform:
    rotate(45deg);

  box-shadow:
    0 0 9px
    rgba(142, 49, 46, .18);
}


/* =========================================================
   身份
========================================================= */

#creator
.creator-role {
  margin:
    0;

  color:
    rgba(206, 191, 168, .59);

  font-size:
    13px;

  letter-spacing:
    .13em;
}


/* =========================================================
   創作者短文
========================================================= */

#creator
.creator-content blockquote {
  width:
    min(610px, 100%);

  margin:
    48px auto 0;

  padding:
    0;

  border:
    0;

  color:
    rgba(207, 196, 179, .58);
}


#creator
.creator-content blockquote strong {
  display:
    block;

  margin-bottom:
    23px;

  color:
    rgba(231, 214, 187, .82);

  font-size:
    18px;

  font-weight:
    400;

  letter-spacing:
    .20em;
}


#creator
.creator-content blockquote p {
  margin:
    7px 0;

  font-size:
    15px;

  line-height:
    2;

  letter-spacing:
    .07em;
}


/* =========================================================
   右側「夜巫京」印記
========================================================= */

#creator
.creator-mark {
  position:
    absolute;

  z-index:
    2;

  right:
    13vw;

  top:
    50%;

  transform:
    translateY(-50%);

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    20px;

  color:
    rgba(161, 78, 64, .20);

  pointer-events:
    none;
}


#creator
.creator-mark span,
#creator
.creator-mark strong {
  font-size:
    clamp(
      34px,
      4vw,
      58px
    );

  font-weight:
    400;

  line-height:
    1;
}


#creator
.creator-mark strong {
  color:
    rgba(177, 126, 78, .20);
}


#creator
.creator-mark i {
  width:
    1px;

  height:
    45px;

  background:
    linear-gradient(
      transparent,
      rgba(161, 84, 62, .20),
      transparent
    );
}


/* =========================================================
   底部
========================================================= */

#creator
.creator-footer {
  position:
    absolute;

  z-index:
    5;

  left:
    7vw;

  right:
    7vw;

  bottom:
    42px;

  display:
    grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:
    end;

  gap:
    35px;
}


#creator
.creator-footer-left,
#creator
.creator-footer-right {
  display:
    grid;

  gap:
    5px;
}


#creator
.creator-footer-right {
  text-align:
    right;
}


#creator
.creator-footer span {
  color:
    rgba(205, 186, 160, .45);

  font-size:
    9px;

  letter-spacing:
    .11em;
}


#creator
.creator-footer em {
  color:
    rgba(177, 142, 103, .28);

  font-family:
    Georgia,
    serif;

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .18em;
}


#creator
.creator-footer-center {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  color:
    rgba(155, 77, 62, .32);

  font-size:
    7px;

  letter-spacing:
    .28em;
}


#creator
.creator-footer-center i {
  width:
    28px;

  height:
    1px;

  background:
    rgba(164, 106, 72, .18);
}


/* =========================================================
   小螢幕
========================================================= */

@media (max-width: 850px) {

  #creator {
    padding:
      120px 28px
      120px;
  }


  #creator
  .creator-content {
    width:
      min(620px, 90vw);

    margin-left:
      0;
  }


  #creator
  .creator-mark {
    right:
      5vw;

    opacity:
      .48;
  }


  #creator
  .creator-footer {
    left:
      28px;

    right:
      28px;

    grid-template-columns:
      1fr 1fr;
  }


  #creator
  .creator-footer-center {
    display:
      none;
  }

}
/* =========================================================
   06｜造境者
   正式內容補充
========================================================= */

#creator
.creator-content {
  width:
    min(920px, 68vw);

  margin-left:
    -5vw;

  text-align:
    left;
}


/* =========================================================
   身份區
========================================================= */

#creator
.creator-identity {
  text-align:
    left;
}


#creator
.creator-identity
.creator-divider {
  justify-content:
    flex-start;

  width:
    300px;

  margin:
    28px 0 23px;
}


#creator
.creator-identity
.creator-role {
  text-align:
    left;
}


/* =========================================================
   創作範圍
========================================================= */

#creator
.creator-fields {
  display:
    grid;

  grid-template-columns:
    repeat(3, 1fr);

  margin-top:
    42px;

  border-top:
    1px solid
    rgba(187, 139, 84, .12);

  border-left:
    1px solid
    rgba(187, 139, 84, .08);
}


#creator
.creator-field {
  display:
    grid;

  grid-template-columns:
    28px 1fr;

  gap:
    12px;

  min-height:
    73px;

  padding:
    17px 18px;

  box-sizing:
    border-box;

  border-right:
    1px solid
    rgba(187, 139, 84, .08);

  border-bottom:
    1px solid
    rgba(187, 139, 84, .08);
}


#creator
.creator-field > span {
  padding-top:
    2px;

  color:
    rgba(157, 71, 60, .56);

  font-family:
    Georgia,
    serif;

  font-size:
    8px;
}


#creator
.creator-field div {
  display:
    grid;

  gap:
    5px;
}


#creator
.creator-field strong {
  color:
    rgba(219, 205, 183, .69);

  font-size:
    12px;

  font-weight:
    400;

  letter-spacing:
    .08em;
}


#creator
.creator-field em {
  color:
    rgba(175, 135, 92, .30);

  font-family:
    Georgia,
    serif;

  font-size:
    6px;

  font-style:
    normal;

  letter-spacing:
    .16em;
}


/* =========================================================
   造境者手記
========================================================= */

#creator
.creator-note {
  position:
    relative;

  width:
    min(690px, 100%);

  margin-top:
    39px;

  padding-left:
    27px;

  border-left:
    1px solid
    rgba(143, 54, 50, .42);
}


#creator
.creator-note-label {
  display:
    block;

  margin-bottom:
    13px;

  color:
    rgba(179, 129, 83, .38);

  font-family:
    Georgia,
    serif;

  font-size:
    7px;

  letter-spacing:
    .28em;
}


#creator
.creator-note strong {
  display:
    block;

  margin-bottom:
    16px;

  color:
    rgba(234, 217, 189, .82);

  font-size:
    17px;

  font-weight:
    400;

  letter-spacing:
    .15em;
}


#creator
.creator-note p {
  margin:
    5px 0;

  color:
    rgba(204, 193, 175, .53);

  font-size:
    14px;

  line-height:
    1.9;

  letter-spacing:
    .045em;
}


/* =========================================================
   署名
========================================================= */

#creator
.creator-signature {
  display:
    flex;

  align-items:
    baseline;

  gap:
    13px;

  margin-top:
    28px;
}


#creator
.creator-signature span {
  color:
    rgba(171, 126, 84, .30);

  font-family:
    Georgia,
    serif;

  font-size:
    6px;

  letter-spacing:
    .22em;
}


#creator
.creator-signature strong {
  color:
    rgba(213, 190, 155, .60);

  font-size:
    11px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}


#creator
.creator-signature em {
  color:
    rgba(144, 65, 56, .38);

  font-family:
    Georgia,
    serif;

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .16em;
}


/* =========================================================
   小螢幕
========================================================= */

@media (max-width: 850px) {

  #creator
  .creator-content {
    width:
      min(760px, 86vw);

    margin-left:
      0;
  }


  #creator
  .creator-fields {
    grid-template-columns:
      repeat(2, 1fr);
  }

}
/* =========================================================
   06｜CREATOR
   右側改 LOGO ＋ 全體字級放大
========================================================= */

#creator {
  position: relative;
  overflow: hidden;
}

#creator .creator-content {
  width: min(980px, 62vw);
  margin-left: 20vw;
  margin-top: 6vh;
}

#creator .creator-overline {
  font-size: 13px;
  letter-spacing: 0.28em;
  color: rgba(186, 143, 78, 0.88);
  margin-bottom: 18px;
}

#creator .creator-content h2 {
  font-size: clamp(74px, 7vw, 124px);
  line-height: 0.92;
  letter-spacing: 0.02em;
  color: #f2e8d7;
  margin: 0 0 18px 0;
  font-weight: 600;
}

#creator .creator-content h3 {
  font-size: clamp(34px, 2.4vw, 46px);
  line-height: 1.1;
  color: rgba(214, 181, 128, 0.95);
  margin: 0 0 28px 0;
  font-weight: 500;
}

#creator .creator-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 24px 0 28px;
}

#creator .creator-divider span {
  display: block;
  width: 110px;
  height: 1px;
  background: rgba(186, 143, 78, 0.35);
}

#creator .creator-divider i {
  display: block;
  width: 7px;
  height: 7px;
  border: 1px solid rgba(186, 143, 78, 0.7);
  transform: rotate(45deg);
}

#creator .creator-role {
  font-size: 22px;
  letter-spacing: 0.08em;
  color: #e8d7bc;
  margin: 0 0 38px 0;
}

#creator blockquote {
  margin: 0;
  padding: 28px 28px 30px;
  border-left: 1px solid rgba(140, 67, 57, 0.65);
  background:
    linear-gradient(
      180deg,
      rgba(75, 22, 18, 0.08) 0%,
      rgba(12, 14, 22, 0.02) 100%
    );
  max-width: 760px;
}

#creator blockquote strong {
  display: block;
  font-size: 30px;
  line-height: 1.35;
  color: #f1dfc2;
  margin-bottom: 18px;
  font-weight: 600;
}

#creator blockquote p {
  font-size: 21px;
  line-height: 1.95;
  color: rgba(230, 221, 208, 0.86);
  margin: 0 0 10px 0;
}

#creator blockquote p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   中間六格能力項目放大
========================================================= */

#creator .creator-grid {
  margin-top: 42px;
  margin-bottom: 42px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(186, 143, 78, 0.16);
  border-left: 1px solid rgba(186, 143, 78, 0.16);
}

#creator .creator-grid-item {
  min-height: 108px;
  padding: 18px 20px 16px;
  border-right: 1px solid rgba(186, 143, 78, 0.16);
  border-bottom: 1px solid rgba(186, 143, 78, 0.16);
  background: rgba(255, 255, 255, 0.01);
}

#creator .creator-grid-item .num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: rgba(186, 143, 78, 0.72);
  margin-bottom: 10px;
}

#creator .creator-grid-item .title {
  display: block;
  font-size: 22px;
  line-height: 1.45;
  color: #eadfcf;
  margin-bottom: 6px;
}

#creator .creator-grid-item .en {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(185, 172, 151, 0.46);
  text-transform: uppercase;
}


/* =========================================================
   右側 LOGO 裝飾
========================================================= */

#creator .creator-mark {
  position: absolute;
  top: 50%;
  right: 12.5vw;
  transform: translateY(-50%);
  width: min(360px, 20vw);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 0.16;
}

#creator .creator-side-logo {
  width: 100%;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 0 22px rgba(120, 72, 56, 0.08))
    brightness(0.92)
    saturate(0.88);
}


/* =========================================================
   底部資訊字級一起放大
========================================================= */

#creator .creator-footer {
  margin-top: 40px;
}

#creator .creator-footer-left span,
#creator .creator-footer-right span {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(226, 212, 193, 0.78);
}

#creator .creator-footer-left em,
#creator .creator-footer-right em {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(186, 143, 78, 0.56);
}

#creator .creator-footer-center span {
  font-size: 12px;
  letter-spacing: 0.26em;
  color: rgba(186, 143, 78, 0.72);
}


/* =========================================================
   RWD
========================================================= */

@media (max-width: 850px) {
  #creator .creator-content {
    width: min(960px, 68vw);
    margin-left: 14vw;
  }

  #creator .creator-mark {
    right: 8vw;
    width: min(210px, 15vw);
  }
}

@media (max-width: 850px) {
  #creator .creator-content {
    width: calc(100% - 120px);
    margin-left: 60px;
    margin-right: 60px;
  }

  #creator .creator-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #creator .creator-mark {
    position: absolute;
    right: 40px;
    top: 90px;
    transform: none;
    width: 120px;
    opacity: 0.1;
  }

  #creator blockquote p {
    font-size: 18px;
  }
}

@media (max-width: 640px) {
  #creator .creator-content {
    width: calc(100% - 48px);
    margin-left: 24px;
    margin-right: 24px;
    margin-top: 36px;
  }

  #creator .creator-grid {
    grid-template-columns: 1fr;
  }

  #creator .creator-role {
    font-size: 18px;
  }

  #creator blockquote strong {
    font-size: 24px;
  }

  #creator blockquote p {
    font-size: 16px;
    line-height: 1.8;
  }

  #creator .creator-mark {
    width: 92px;
    right: 18px;
    top: 72px;
  }
}
/* =========================================================
   06｜造境者
   六格創作範圍字體放大
========================================================= */

#creator
.creator-field {
  min-height:
    92px;

  padding:
    22px 24px;
}


/* 左側編號 01 / 02 / 03 */

#creator
.creator-field > span {
  font-size:
    10px !important;
}


/* 中文主標題 */

#creator
.creator-field strong {
  font-size:
    16px !important;

  line-height:
    1.5;

  letter-spacing:
    .08em;
}


/* 英文副標 */

#creator
.creator-field em {
  margin-top:
    3px;

  font-size:
    8px !important;

  line-height:
    1.5;

  letter-spacing:
    .18em;
}
/* =========================================================
   06｜造境者
   作者名字縮小
========================================================= */

#creator
.creator-content h2 {
  font-size:
    clamp(
      54px,
      5vw,
      88px
    ) !important;
}


#creator
.creator-content h3 {
  font-size:
    clamp(
      24px,
      1.8vw,
      34px
    ) !important;

  margin-top:
    14px !important;
}
/* =========================================================
   06｜造境者
   左側創作者照片
========================================================= */

#creator
.creator-photo-wrap {
  position:
    absolute;

  z-index:
    3;

  left:
    5.5vw;

  top:
    53%;

  width:
    min(350px, 30vw);

  height:
    min(650px, 90vh);

  transform:
    translateY(-50%);

  pointer-events:
    none;
}


/* 照片 */

#creator
.creator-photo {
  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    contain;

  object-position:
    center bottom;

  opacity:
    .92;

  filter:
    brightness(.88)
    contrast(1.04)
    saturate(.88);
}
/* =========================================================
   06｜Creator 左側照片加高版
========================================================= */

#creator .creator-photo-wrap {
  position: absolute !important;

  left: 3.2vw !important;
  top: 55% !important;

  width: clamp(
    360px,
    21vw,
    430px
  ) !important;

  height: clamp(
    620px,
    72vh,
    820px
  ) !important;

  transform: translateY(-50%) !important;

  overflow: hidden !important;

  border: 1px solid rgba(186, 143, 78, 0.18) !important;

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.32) !important;
}


#creator .creator-photo {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center top !important;

  transform: none !important;
  display: block !important;
}
/* =========================================================
   06｜Creator 微調版
   - 照片往右回來一點
   - 背景補層次
========================================================= */

#creator {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


/* 整頁背景補層次 */

#creator::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 14% 62%,
      rgba(150, 108, 58, 0.10) 0%,
      rgba(150, 108, 58, 0.05) 18%,
      transparent 40%
    ),
    radial-gradient(
      circle at 76% 20%,
      rgba(128, 94, 52, 0.08) 0%,
      rgba(128, 94, 52, 0.035) 20%,
      transparent 42%
    ),
    radial-gradient(
      circle at 82% 72%,
      rgba(96, 72, 42, 0.06) 0%,
      transparent 34%
    ),
    linear-gradient(
      90deg,
      rgba(4, 7, 14, 0.94) 0%,
      rgba(5, 8, 16, 0.86) 28%,
      rgba(6, 10, 18, 0.62) 52%,
      rgba(5, 8, 15, 0.82) 76%,
      rgba(4, 7, 14, 0.94) 100%
    );
}


/* =========================================================
   06｜造境者
   全頁世界觀背景裝飾
========================================================= */

#creator::after {
  content: "";

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;

  z-index: 0;

  background-image:
    url("assets/images/houses-frame.png");

  background-repeat:
    no-repeat;

  background-position:
    center center;

  background-size:
    100% 100%;

  opacity:
    .32;

  filter:
    brightness(.78)
    saturate(.86);
}


/* 確保內容壓在背景上面 */

#creator > * {
  position: relative;
  z-index: 1;
}


/* 左側照片：往右一點，位置更平衡 */

#creator .creator-photo-wrap {
  position: absolute !important;
  left: 5.6vw !important;
  top: 56% !important;

  width: clamp(
    360px,
    22vw,
    450px
  ) !important;

  height: clamp(
    640px,
    74vh,
    860px
  ) !important;

  transform: translateY(-50%) !important;

  overflow: hidden !important;

  border: 1px solid rgba(186, 143, 78, 0.20) !important;

  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(255, 255, 255, 0.02) inset !important;
}


#creator .creator-photo {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;

  object-fit: cover !important;
  object-position: center top !important;
}


/* 左下照片資訊不要離照片太遠 */

#creator .creator-photo-caption {
  margin-top: 18px !important;
}


/* 內容區也稍微拉開，避免跟照片太擠 */

#creator .creator-content {
  margin-left: min(23vw, 420px) !important;
}


/* 功能格文字微放大 */

#creator .creator-grid {
  font-size: 1.06em !important;
}

#creator .creator-grid strong,
#creator .creator-grid b,
#creator .creator-grid h4 {
  font-size: 1.08em !important;
}


/* 段落稍微亮一點，避免背景加深後太難看 */

#creator .creator-note,
#creator .creator-note p,
#creator .creator-role,
#creator .creator-footer,
#creator .creator-footer span,
#creator .creator-footer em {
  color: rgba(226, 213, 192, 0.82) !important;
}
/* =========================================================
   06｜右側 Logo
   移到「角色與關係設計」後方
========================================================= */

#creator .creator-mark {
  position: absolute !important;

  left: 60.5% !important;
  right: auto !important;

  top: 45.5% !important;

  width:
    min(360px, 20vw) !important;

  transform:
    translate(-50%, -50%) !important;

  opacity:
    .13 !important;

  z-index:
    1 !important;

  pointer-events:
    none !important;
}


#creator .creator-side-logo {
  width:
    100% !important;

  height:
    auto !important;
}
/* =========================================================
   06｜造境者
   世界觀背景動態層
========================================================= */


/* =========================================================
   中層流霧
========================================================= */

#creator
.creator-flow-mist {
  position:
    absolute;

  z-index:
    1;

  inset:
    0;

  overflow:
    hidden;

  pointer-events:
    none;

  opacity:
    .34;
}


#creator
.creator-flow-mist::before {
  content:
    "";

  position:
    absolute;

  left:
    -18%;

  top:
    20%;

  width:
    136%;

  height:
    58%;

  background:
    radial-gradient(
      ellipse at 28% 58%,
      rgba(111, 126, 142, .12),
      transparent 43%
    ),

    radial-gradient(
      ellipse at 67% 42%,
      rgba(107, 118, 132, .09),
      transparent 39%
    ),

    radial-gradient(
      ellipse at 88% 60%,
      rgba(95, 109, 126, .08),
      transparent 34%
    );

  filter:
    blur(24px);

  animation:
    creatorMistDrift
    18s
    ease-in-out
    infinite;
}


@keyframes creatorMistDrift {

  0%,
  100% {
    transform:
      translateX(-2%)
      translateY(0)
      scale(1.02);

    opacity:
      .50;
  }

  50% {
    transform:
      translateX(3%)
      translateY(-8px)
      scale(1.06);

    opacity:
      .80;
  }

}


/* =========================================================
   鹿門花枝動態層
   使用同一張 houses-frame.png
   只讓右下花區顯示
========================================================= */

#creator
.creator-flow-flowers {
  position:
    absolute;

  z-index:
    2;

  inset:
    0;

  pointer-events:
    none;

  overflow:
    hidden;
}


@keyframes creatorLumenFlowers {

  0%,
  100% {
    transform:
      translateX(-2px)
      translateY(1px)
      rotate(-.10deg)
      scale(1.006);

    filter:
      brightness(.88);
  }

  50% {
    transform:
      translateX(5px)
      translateY(-4px)
      rotate(.16deg)
      scale(1.012);

    filter:
      brightness(1.05);
  }

}


/* =========================================================
   花瓣光點
========================================================= */

#creator
.creator-flow-flowers::after {
  content:
    "";

  position:
    absolute;

  right:
    12%;

  bottom:
    15%;

  width:
    7px;

  height:
    11px;

  border-radius:
    70% 30% 70% 30%;

  background:
    rgba(205, 142, 148, .56);

  box-shadow:

    54px -37px
    rgba(213, 156, 161, .38),

    112px 18px
    rgba(193, 122, 132, .30),

    -71px 42px
    rgba(225, 174, 177, .32),

    -133px -13px
    rgba(185, 106, 119, .28),

    166px -82px
    rgba(214, 152, 158, .27),

    -190px 74px
    rgba(223, 168, 173, .25);

  opacity:
    .48;

  animation:
    creatorPetalsDrift
    10s
    ease-in-out
    infinite;
}


@keyframes creatorPetalsDrift {

  0%,
  100% {
    transform:
      translate(0, 0)
      rotate(0deg);

    opacity:
      .25;
  }

  50% {
    transform:
      translate(-38px, -26px)
      rotate(150deg);

    opacity:
      .64;
  }

}
/* =========================================================
   05｜秘藏
   解封後男主獎勵介面
========================================================= */

#archives
.sealed-reward {
  width:
    min(960px, 82vw);

  margin:
    35px auto 0;
}


/* =========================================================
   五男主選擇
========================================================= */

#archives
.sealed-reward-nav {
  display:
    grid;

  grid-template-columns:
    repeat(5, 1fr);

  border-top:
    1px solid rgba(191, 142, 83, .14);

  border-bottom:
    1px solid rgba(191, 142, 83, .14);
}


#archives
.sealed-reward-character {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    auto 1fr;

  align-items:
    center;

  gap:
    10px;

  padding:
    15px 16px;

  border:
    0;

  border-right:
    1px solid rgba(191, 142, 83, .09);

  background:
    transparent;

  color:
    rgba(201, 190, 173, .44);

  cursor:
    pointer;

  transition:
    .3s ease;
}


#archives
.sealed-reward-character:last-child {
  border-right:
    0;
}


#archives
.sealed-reward-character span {
  color:
    rgba(158, 62, 56, .50);

  font-family:
    Georgia,
    serif;

  font-size:
    8px;
}


#archives
.sealed-reward-character strong {
  font-size:
    13px;

  font-weight:
    400;

  letter-spacing:
    .08em;
}


#archives
.sealed-reward-character:hover,
#archives
.sealed-reward-character.is-active {
  color:
    rgba(238, 218, 189, .92);

  background:
    rgba(117, 44, 41, .07);
}


#archives
.sealed-reward-character.is-active::after {
  content:
    "";

  position:
    absolute;

  left:
    20%;

  right:
    20%;

  bottom:
    -1px;

  height:
    1px;

  background:
    rgba(215, 161, 91, .85);

  box-shadow:
    0 0 8px rgba(183, 85, 56, .24);
}


/* =========================================================
   主影像區
========================================================= */

#archives
.sealed-reward-stage {
  position:
    relative;

  width:
    min(540px, 54vw);

  aspect-ratio:
    4 / 5;

  margin:
    25px auto 0;

  overflow:
    hidden;

  border:
    1px solid rgba(186, 132, 80, .14);

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(105, 39, 38, .12),
      transparent 38%
    ),

    linear-gradient(
      145deg,
      rgba(10, 11, 15, .92),
      rgba(3, 4, 7, .97)
    );
}


/* 真正圖片 */

#archives
.sealed-reward-image {
  position:
    absolute;

  inset:
    0;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center;
}


/* =========================================================
   沒有圖時 placeholder
========================================================= */

#archives
.sealed-reward-empty {
  position:
    absolute;

  inset:
    0;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;

  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 36px,
      rgba(183, 127, 78, .018) 37px
    );
}


#archives
.sealed-reward-empty > span {
  color:
    rgba(181, 128, 83, .38);

  font-size:
    8px;

  letter-spacing:
    .30em;
}


#archives
.sealed-reward-empty > i {
  width:
    70px;

  height:
    1px;

  margin:
    20px 0;

  background:
    rgba(139, 53, 50, .40);
}


#archives
.sealed-reward-empty > strong {
  color:
    rgba(231, 213, 188, .76);

  font-size:
    31px;

  font-weight:
    400;

  letter-spacing:
    .16em;
}


#archives
.sealed-reward-empty > p {
  margin:
    13px 0 0;

  color:
    rgba(195, 181, 160, .45);

  font-size:
    12px;

  letter-spacing:
    .08em;
}


#archives
.sealed-reward-empty > em {
  margin-top:
    33px;

  color:
    rgba(139, 53, 50, .48);

  font-family:
    Georgia,
    serif;

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .28em;
}


/* =========================================================
   底部
========================================================= */

#archives
.sealed-reward-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  margin-top:
    17px;
}


#archives
.sealed-reward-footer span,
#archives
.sealed-reward-footer em {
  color:
    rgba(178, 138, 92, .35);

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .20em;
}


#archives
.sealed-reward-footer i {
  width:
    36px;

  height:
    1px;

  background:
    rgba(154, 92, 63, .23);
}
/* =========================================================
   05｜秘藏
   尚未放入獎勵圖時的正式封存畫面
========================================================= */

#archives
.sealed-reward-stage {
  width:
    min(620px, 48vw) !important;

  height:
    min(520px, 53vh) !important;

  aspect-ratio:
    auto !important;

  margin:
    28px auto 0 !important;

  border:
    1px solid rgba(176, 126, 75, .12) !important;

  background:
    radial-gradient(
      circle at 50% 47%,
      rgba(104, 33, 34, .11),
      transparent 32%
    ),

    linear-gradient(
      145deg,
      rgba(8, 10, 15, .84),
      rgba(2, 4, 8, .96)
    ) !important;

  box-shadow:
    inset 0 0 80px rgba(0, 0, 0, .38);
}


/* 沒圖時不要像一張空白相框 */

#archives
.sealed-reward-empty {
  background:
    radial-gradient(
      circle at center,
      rgba(128, 53, 45, .07),
      transparent 38%
    ) !important;
}


/* 上方 PRIVATE ARCHIVE */

#archives
.sealed-reward-empty > span {
  font-size:
    9px !important;

  letter-spacing:
    .34em !important;

  color:
    rgba(183, 132, 81, .44) !important;
}


/* 中間短線 */

#archives
.sealed-reward-empty > i {
  width:
    82px !important;

  margin:
    22px 0 !important;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(152, 56, 50, .68),
      transparent
    ) !important;
}


/* 男主名字 */

#archives
.sealed-reward-empty > strong {
  font-size:
    36px !important;

  letter-spacing:
    .18em !important;

  color:
    rgba(232, 214, 187, .82) !important;
}


/* 初封 / 深封 / 終封限定文字 */

#archives
.sealed-reward-empty > p {
  margin-top:
    15px !important;

  font-size:
    13px !important;

  color:
    rgba(202, 186, 163, .48) !important;
}


/* IMAGE SEALED */

#archives
.sealed-reward-empty > em {
  margin-top:
    38px !important;

  font-size:
    8px !important;

  letter-spacing:
    .34em !important;

  color:
    rgba(127, 47, 45, .54) !important;
}
/* =========================================================
   05｜秘藏
   解封後介面｜正式比照畫藏版型
========================================================= */


/* =========================================================
   整個解封層
========================================================= */

#archives
.sealed-reveal {
  overflow:
    hidden !important;

  padding:
    0 !important;
}


/* =========================================================
   主框：直接比照畫藏 95vw × 92vh
========================================================= */

#archives
.sealed-reveal-inner {
  position:
    relative !important;

  width:
    min(1680px, 95vw) !important;

  height:
    92vh !important;

  max-width:
    none !important;

  margin:
    auto !important;

  overflow:
    hidden !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(190, 149, 90, .16);

  background:
    #03060a;

  box-shadow:
    0 35px 110px
    rgba(0, 0, 0, .72);

  text-align:
    center !important;
}


/* =========================================================
   上方封印資訊
   改成浮在主畫面上，不再佔掉一大塊高度
========================================================= */

#archives
.sealed-reveal-kicker {
  position:
    absolute !important;

  z-index:
    30 !important;

  top:
    19px !important;

  left:
    50% !important;

  margin:
    0 !important;

  transform:
    translateX(-50%) !important;

  font-size:
    7px !important;

  letter-spacing:
    .30em !important;
}


#archives
.sealed-reveal-inner > h3 {
  position:
    absolute !important;

  z-index:
    30 !important;

  top:
    39px !important;

  left:
    50% !important;

  margin:
    0 !important;

  transform:
    translateX(-50%) !important;

  font-size:
    39px !important;

  line-height:
    1 !important;

  white-space:
    nowrap;
}


#archives
.sealed-reveal-inner > i {
  position:
    absolute !important;

  z-index:
    30 !important;

  top:
    91px !important;

  left:
    50% !important;

  width:
    56px !important;

  height:
    1px !important;

  margin:
    0 !important;

  transform:
    translateX(-50%) !important;
}


#archives
.sealed-reveal-inner > p {
  position:
    absolute !important;

  z-index:
    30 !important;

  top:
    108px !important;

  left:
    50% !important;

  width:
    auto !important;

  margin:
    0 !important;

  transform:
    translateX(-50%) !important;

  white-space:
    nowrap;

  font-size:
    11px !important;

  letter-spacing:
    .08em !important;
}


/* =========================================================
   獎勵主區
   直接吃滿整個畫藏式主框
========================================================= */

#archives
.sealed-reward {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   CG 展示層
========================================================= */

#archives
.sealed-reward-stage {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  aspect-ratio:
    auto !important;

  overflow:
    hidden !important;

  border:
    0 !important;

  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(80, 45, 51, .12),
      transparent 44%
    ),
    #03060a !important;
}


/* =========================================================
   正式 CG
========================================================= */

#archives
.sealed-reward-image {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;

  background:
    #03060a;
}


/* =========================================================
   五男主
   比照畫藏左上 TAB
========================================================= */

#archives
.sealed-reward-nav {
  position:
    absolute !important;

  z-index:
    40 !important;

  left:
    38px !important;

  top:
    31px !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  gap:
    4px !important;

  width:
    auto !important;

  border:
    0 !important;

  background:
    transparent !important;
}


#archives
.sealed-reward-character {
  position:
    relative !important;

  display:
    block !important;

  min-width:
    135px !important;

  width:
    auto !important;

  min-height:
    0 !important;

  padding:
    10px 17px 11px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(191, 150, 89, .18) !important;

  background:
    rgba(3, 6, 10, .42) !important;

  color:
    rgba(208, 198, 180, .42) !important;

  text-align:
    left !important;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


#archives
.sealed-reward-character span {
  display:
    block !important;

  margin-bottom:
    4px !important;

  color:
    rgba(192, 149, 87, .40) !important;

  font-size:
    7px !important;

  letter-spacing:
    .20em !important;
}


#archives
.sealed-reward-character strong {
  display:
    block !important;

  color:
    rgba(208, 198, 180, .52) !important;

  font-size:
    15px !important;

  font-weight:
    400 !important;

  letter-spacing:
    .13em !important;
}


#archives
.sealed-reward-character:hover strong {
  color:
    rgba(238, 224, 199, .82) !important;
}


#archives
.sealed-reward-character.is-active {
  background:
    rgba(13, 13, 15, .62) !important;
}


#archives
.sealed-reward-character.is-active strong {
  color:
    rgba(246, 229, 198, .96) !important;
}


#archives
.sealed-reward-character.is-active::after {
  content:
    "";

  position:
    absolute !important;

  left:
    17px !important;

  right:
    45% !important;

  top:
    auto !important;

  bottom:
    -1px !important;

  width:
    auto !important;

  height:
    1px !important;

  background:
    rgba(211, 168, 99, .78) !important;

  box-shadow:
    0 0 9px
    rgba(211, 168, 99, .30);
}


/* =========================================================
   沒有 CG 時
   比照畫藏左下資訊
========================================================= */

#archives
.sealed-reward-empty {
  position:
    absolute !important;

  z-index:
    10 !important;

  inset:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  justify-content:
    flex-end !important;

  padding:
    0 0 42px 42px !important;

  box-sizing:
    border-box !important;

  text-align:
    left !important;

  background:
    linear-gradient(
      180deg,
      rgba(2,5,9,.25) 0%,
      transparent 38%,
      rgba(2,5,9,.65) 100%
    ) !important;
}


#archives
.sealed-reward-empty > span {
  display:
    block;

  margin:
    0 0 7px !important;

  color:
    rgba(205, 163, 98, .62) !important;

  font-size:
    8px !important;

  letter-spacing:
    .25em !important;
}


#archives
.sealed-reward-empty > i {
  display:
    none !important;
}


#archives
.sealed-reward-empty > strong {
  margin:
    0 !important;

  color:
    rgba(245, 232, 211, .96) !important;

  font-size:
    clamp(
      27px,
      2.4vw,
      42px
    ) !important;

  font-weight:
    400 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    .10em !important;
}


#archives
.sealed-reward-empty > p {
  margin:
    10px 0 0 !important;

  color:
    rgba(220, 209, 191, .60) !important;

  font-size:
    13px !important;

  line-height:
    1.7 !important;

  letter-spacing:
    .04em !important;
}


#archives
.sealed-reward-empty > em {
  margin:
    8px 0 0 !important;

  color:
    rgba(134, 56, 52, .55) !important;

  font-size:
    7px !important;

  font-style:
    normal;

  letter-spacing:
    .22em !important;
}


/* =========================================================
   右上層級
   比照畫藏右上計數
========================================================= */

#archives
.sealed-reward-footer {
  position:
    absolute !important;

  z-index:
    40 !important;

  right:
    92px !important;

  top:
    40px !important;

  display:
    flex !important;

  align-items:
    baseline !important;

  gap:
    7px !important;

  width:
    auto !important;

  margin:
    0 !important;
}


#archives
.sealed-reward-footer span {
  color:
    rgba(234, 211, 171, .80) !important;

  font-size:
    10px !important;

  letter-spacing:
    .13em !important;
}


#archives
.sealed-reward-footer i {
  width:
    30px !important;

  height:
    1px;

  background:
    rgba(196, 151, 91, .25);
}


#archives
.sealed-reward-footer em {
  color:
    rgba(222, 210, 190, .32) !important;

  font-size:
    7px !important;

  font-style:
    normal;

  letter-spacing:
    .14em !important;
}


/* =========================================================
   內層返回 X
========================================================= */

#archives
.sealed-reveal-close {
  z-index:
    60 !important;

  right:
    28px !important;

  top:
    25px !important;
}


/* =========================================================
   手機
========================================================= */

@media (max-width: 760px) {

  #archives
  .sealed-reveal-inner {
    width:
      calc(100vw - 28px) !important;

    height:
      calc(100vh - 28px) !important;
  }


  #archives
  .sealed-reward-nav {
    left:
      20px !important;

    right:
      20px !important;

    top:
      20px !important;

    overflow-x:
      auto;
  }


  #archives
  .sealed-reward-character {
    min-width:
      108px !important;
  }


  #archives
  .sealed-reward-footer {
    display:
      none !important;
  }


  #archives
  .sealed-reward-empty {
    padding:
      0 22px 80px !important;
  }

}
/* =========================================================
   05｜秘藏
   右上封印資訊防裁切
========================================================= */

#archives
.sealed-reward-footer {
  right:
    125px !important;

  max-width:
    360px !important;

  justify-content:
    flex-end !important;

  white-space:
    nowrap !important;
}


#archives
.sealed-reward-footer em {
  max-width:
    none !important;

  white-space:
    nowrap !important;
}
/* =========================================================
   05｜秘藏
   解封獎勵獨立彈出層
   注意：此層已被 JS 搬到 body，不能再寫 #archives 前綴
========================================================= */


/* =========================================================
   最外層 Lightbox
========================================================= */

.sealed-reveal {
  position:
    fixed !important;

  inset:
    0 !important;

  z-index:
    9999 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  padding:
    2.5vh 2.5vw !important;

  box-sizing:
    border-box !important;

  background:
    rgba(2, 5, 9, .97) !important;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;

  transition:
    opacity .4s ease,
    visibility .4s ease !important;
}


/* 開啟 */

.sealed-reveal.is-open {
  opacity:
    1 !important;

  visibility:
    visible !important;

  pointer-events:
    auto !important;
}


/* =========================================================
   主框
   直接比照畫藏
========================================================= */

.sealed-reveal-inner {
  position:
    relative !important;

  width:
    min(1680px, 95vw) !important;

  height:
    92vh !important;

  max-width:
    none !important;

  min-height:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(190, 149, 90, .16) !important;

  background:
    #03060a !important;

  box-shadow:
    0 35px 110px
    rgba(0, 0, 0, .72) !important;
}


/* =========================================================
   原本初封 / 深封 / 終封的大標題先藏掉
   之後改成畫藏式資訊
========================================================= */

.sealed-reveal-kicker,

.sealed-reveal-inner > h3,

.sealed-reveal-inner > i,

.sealed-reveal-inner > p {
  display:
    none !important;
}


/* =========================================================
   獎勵內容吃滿整框
========================================================= */

.sealed-reveal
.sealed-reward {
  position:
    absolute !important;

  inset:
    0 !important;

  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow:
    hidden !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   CG 展示區
========================================================= */

.sealed-reveal
.sealed-reward-stage {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  aspect-ratio:
    auto !important;

  border:
    0 !important;

  overflow:
    hidden !important;

  background:
    radial-gradient(
      ellipse at 50% 42%,
      rgba(64, 86, 108, .11),
      transparent 42%
    ),
    #03060a !important;
}


/* 真正 CG */

.sealed-reveal
.sealed-reward-image {
  position:
    absolute !important;

  inset:
    0 !important;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    contain !important;

  object-position:
    center center !important;
}


/* =========================================================
   五男主｜左上
========================================================= */

.sealed-reveal
.sealed-reward-nav {
  position:
    absolute !important;

  z-index:
    30 !important;

  top:
    31px !important;

  left:
    38px !important;

  display:
    flex !important;

  flex-direction:
    row !important;

  width:
    auto !important;

  gap:
    4px !important;

  border:
    0 !important;

  background:
    transparent !important;
}


.sealed-reveal
.sealed-reward-character {
  position:
    relative !important;

  display:
    block !important;

  width:
    auto !important;

  min-width:
    142px !important;

  min-height:
    0 !important;

  padding:
    10px 17px 11px !important;

  border:
    0 !important;

  border-bottom:
    1px solid
    rgba(191, 150, 89, .18) !important;

  background:
    rgba(3, 6, 10, .40) !important;

  text-align:
    left !important;

  cursor:
    pointer;
}


.sealed-reveal
.sealed-reward-character span {
  display:
    block !important;

  margin-bottom:
    4px !important;

  font-size:
    7px !important;

  color:
    rgba(192, 149, 87, .40) !important;
}


.sealed-reveal
.sealed-reward-character strong {
  display:
    block !important;

  font-size:
    15px !important;

  font-weight:
    400 !important;

  letter-spacing:
    .13em !important;

  color:
    rgba(208, 198, 180, .48) !important;
}


.sealed-reveal
.sealed-reward-character.is-active strong {
  color:
    rgba(246, 229, 198, .96) !important;
}


.sealed-reveal
.sealed-reward-character.is-active::after {
  content:
    "";

  position:
    absolute !important;

  left:
    17px !important;

  right:
    45% !important;

  top:
    auto !important;

  bottom:
    -1px !important;

  width:
    auto !important;

  height:
    1px !important;

  background:
    rgba(211, 168, 99, .82) !important;
}


/* =========================================================
   無圖時｜左下資料
========================================================= */

.sealed-reveal
.sealed-reward-empty {
  position:
    absolute !important;

  inset:
    0 !important;

  z-index:
    10 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    flex-start !important;

  justify-content:
    flex-end !important;

  padding:
    0 0 42px 42px !important;

  box-sizing:
    border-box !important;

  text-align:
    left !important;

  background:
    linear-gradient(
      180deg,
      transparent 42%,
      rgba(2, 5, 9, .72) 100%
    ) !important;
}


.sealed-reveal
.sealed-reward-empty > span {
  margin:
    0 0 7px !important;

  font-size:
    8px !important;

  letter-spacing:
    .25em !important;

  color:
    rgba(205, 163, 98, .60) !important;
}


.sealed-reveal
.sealed-reward-empty > i {
  display:
    none !important;
}


.sealed-reveal
.sealed-reward-empty > strong {
  margin:
    0 !important;

  color:
    rgba(245, 232, 211, .96) !important;

  font-size:
    40px !important;

  font-weight:
    400 !important;

  line-height:
    1.15 !important;

  letter-spacing:
    .10em !important;
}


.sealed-reveal
.sealed-reward-empty > p {
  margin:
    10px 0 0 !important;

  color:
    rgba(220, 209, 191, .60) !important;

  font-size:
    13px !important;
}


.sealed-reveal
.sealed-reward-empty > em {
  margin:
    8px 0 0 !important;

  color:
    rgba(133, 46, 44, .58) !important;

  font-size:
    7px !important;

  font-style:
    normal;

  letter-spacing:
    .22em !important;
}


/* =========================================================
   右上層級
========================================================= */

.sealed-reveal
.sealed-reward-footer {
  position:
    absolute !important;

  z-index:
    30 !important;

  top:
    40px !important;

  right:
    105px !important;

  width:
    auto !important;

  margin:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  gap:
    9px !important;
}


/* =========================================================
   X
========================================================= */

.sealed-reveal-close {
  position:
    absolute !important;

  z-index:
    50 !important;

  top:
    25px !important;

  right:
    28px !important;

  pointer-events:
    auto !important;
}
/* =========================================================
   05｜秘藏
   中央封印常駐浮游光珠
========================================================= */

#archives [data-sealed-core] {
  position: relative !important;
}


/* 粒子活動範圍 */
#archives .sealed-spirit-particles {
  position: absolute;
  z-index: 8;

  inset: 4% 3% 1%;

  overflow: hidden;
  pointer-events: none;

  /* 永久顯示，不需要 hover */
  opacity: 1;
}


/* 每顆光珠 */
#archives .sealed-spirit-particles i {
  position: absolute;

  left: var(--x);
  bottom: -8%;

  width: var(--s);
  height: var(--s);

  border-radius: 50%;

  opacity: 0;

  background:
    radial-gradient(
      circle,
      rgba(255, 211, 151, .95) 0%,
      rgba(190, 91, 67, .82) 28%,
      rgba(116, 34, 38, .48) 58%,
      transparent 76%
    );

  box-shadow:
    0 0 5px rgba(218, 128, 89, .65),
    0 0 12px rgba(151, 48, 46, .38),
    0 0 24px rgba(103, 26, 31, .16);

  animation:
    sealedSpiritRise
    var(--d)
    linear
    infinite;

  animation-delay:
    var(--delay);
}


/* 每隔幾顆改成偏舊金，不要整片都紅 */
#archives .sealed-spirit-particles i:nth-child(3n) {
  background:
    radial-gradient(
      circle,
      rgba(245, 221, 170, .96) 0%,
      rgba(193, 147, 82, .72) 35%,
      rgba(112, 73, 38, .30) 62%,
      transparent 78%
    );

  box-shadow:
    0 0 5px rgba(211, 170, 105, .55),
    0 0 14px rgba(168, 111, 61, .22);
}


/* 緩慢往上浮 */
@keyframes sealedSpiritRise {

  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        35px,
        0
      )
      scale(.55);
  }


  12% {
    opacity: .42;
  }


  45% {
    opacity: .68;

    transform:
      translate3d(
        var(--drift),
        -155px,
        0
      )
      scale(1);
  }


  78% {
    opacity: .34;
  }


  100% {
    opacity: 0;

    transform:
      translate3d(
        calc(var(--drift) * -.55),
        -350px,
        0
      )
      scale(.62);
  }

}


/* 解封時讓周圍光珠一起被能量帶亮 */
#archives
[data-sealed-core].is-unsealing
.sealed-spirit-particles i {
  filter:
    brightness(1.65)
    saturate(1.25);

  box-shadow:
    0 0 8px rgba(239, 175, 119, .9),
    0 0 22px rgba(174, 62, 55, .62),
    0 0 40px rgba(126, 31, 38, .28);
}
/* =========================================================
   05｜秘藏
   全畫面背景圖
========================================================= */

#archives
[data-archive-content="sealed"] {
  background:
    linear-gradient(
      rgba(2, 4, 8, .55),
      rgba(2, 4, 8, .70)
    ),
    url("assets/images/sealed-archive-bg.png")
    center center / cover no-repeat
    !important;

  background-size:
    cover !important;

  background-position:
    center center !important;
}


/* =========================================================
   原本秘藏大框改半透明
   讓後面的背景真正透出來
========================================================= */

#archives
.sealed-vault {
  background:
    linear-gradient(
      90deg,
      rgba(3, 5, 9, .46),
      rgba(3, 5, 9, .58)
    )
    !important;

  backdrop-filter:
    blur(1px);

  -webkit-backdrop-filter:
    blur(1px);
}
/* =========================================================
   05｜秘藏
   全螢幕背景圖 FINAL
========================================================= */

/* 整個秘藏畫面放背景 */
#archives
.archive-content-layer[data-archive-content="sealed"] {
  background:
    linear-gradient(
      90deg,
      rgba(2, 4, 8, .38) 0%,
      rgba(2, 4, 8, .50) 50%,
      rgba(2, 4, 8, .45) 100%
    ),
    url("assets/images/sealed-archive-bg.png")
    center center / cover no-repeat
    !important;
}


/* 原本那個超黑的大框要透明，不然會把背景遮掉 */
#archives
.archive-content-layer[data-archive-content="sealed"]
.sealed-vault {
  background:
    linear-gradient(
      135deg,
      rgba(4, 6, 10, .34),
      rgba(2, 3, 6, .46)
    )
    !important;

  backdrop-filter:
    blur(1.5px);

  -webkit-backdrop-filter:
    blur(1.5px);

  box-shadow:
    0 35px 120px
    rgba(0, 0, 0, .38)
    !important;
}
/* =========================================================
   05｜秘藏
   背景壓暗＋封印介面提亮 FINAL
========================================================= */


/* 1｜整頁背景再壓暗一點 */
#archives
.archive-content-layer[data-archive-content="sealed"] {
  background:
    linear-gradient(
      90deg,
      rgba(1, 3, 7, .58) 0%,
      rgba(1, 3, 7, .66) 50%,
      rgba(1, 3, 7, .60) 100%
    ),
    url("assets/images/sealed-archive-bg.png")
    center center / cover no-repeat
    !important;
}


/* 2｜主框再補一層暗幕
   背景還看得到，但不會搶 UI */
#archives
.archive-content-layer[data-archive-content="sealed"]
.sealed-vault {
  background:
    radial-gradient(
      circle at 38% 44%,
      rgba(105, 34, 36, .16),
      transparent 31%
    ),
    linear-gradient(
      90deg,
      rgba(2, 4, 8, .54),
      rgba(2, 4, 8, .46),
      rgba(2, 4, 8, .58)
    )
    !important;

  backdrop-filter:
    blur(1.5px)
    brightness(.82);

  -webkit-backdrop-filter:
    blur(1.5px)
    brightness(.82);
}


/* =========================================================
   3｜中央封印整體提亮
========================================================= */

#archives
.sealed-vault-core {
  filter:
    brightness(1.22)
    saturate(1.12);

  z-index:
    20 !important;
}


/* 最外圈 */
#archives
.sealed-orbit-a {
  border-color:
    rgba(185, 76, 68, .46) !important;

  box-shadow:
    0 0 28px
    rgba(116, 34, 38, .12);
}


/* 中圈 */
#archives
.sealed-orbit-b {
  border-color:
    rgba(218, 164, 101, .40) !important;

  filter:
    drop-shadow(
      0 0 5px
      rgba(190, 125, 75, .18)
    );
}


/* 內圈 */
#archives
.sealed-orbit-c {
  border-color:
    rgba(181, 66, 60, .56) !important;

  box-shadow:
    0 0 30px
    rgba(136, 40, 43, .16);
}


/* 中央「解」字方印 */
#archives
.sealed-vault-mark {
  color:
    rgba(226, 83, 72, .96)
    !important;

  border-color:
    rgba(189, 67, 59, .68)
    !important;

  background:
    radial-gradient(
      circle at center,
      rgba(109, 24, 28, .42),
      rgba(32, 8, 12, .80)
    )
    !important;

  box-shadow:
    0 0 24px
    rgba(177, 50, 49, .28),

    0 0 70px
    rgba(116, 29, 35, .20),

    inset 0 0 22px
    rgba(174, 58, 54, .10)
    !important;

  text-shadow:
    0 0 8px
    rgba(255, 111, 94, .45),

    0 0 22px
    rgba(183, 46, 49, .25);
}


/* 封 / 禁 / 藏小字也提亮 */
#archives
.sealed-rune {
  color:
    rgba(181, 118, 74, .56)
    !important;

  text-shadow:
    0 0 8px
    rgba(154, 63, 50, .16);
}


/* =========================================================
   4｜右側三封卡片提亮
========================================================= */

#archives
.sealed-tier {
  background:
    linear-gradient(
      90deg,
      rgba(13, 7, 10, .66),
      rgba(4, 6, 9, .48)
    )
    !important;

  border-color:
    rgba(193, 139, 79, .18)
    !important;
}


#archives
.sealed-tier.is-unlocked {
  background:
    linear-gradient(
      90deg,
      rgba(74, 24, 24, .22),
      rgba(4, 6, 9, .50)
    )
    !important;
}


/* 初封 / 深封 / 終封 */
#archives
.sealed-tier strong {
  color:
    rgba(237, 216, 186, .88)
    !important;

  text-shadow:
    0 0 12px
    rgba(193, 125, 73, .08);
}


/* FIRST / SECOND / FINAL SEAL */
#archives
.sealed-tier em {
  color:
    rgba(185, 127, 81, .58)
    !important;
}


/* 累計入京七日 */
#archives
.sealed-tier p {
  color:
    rgba(207, 194, 173, .45)
    !important;
}


/* UNSEALED */
#archives
.sealed-tier-state {
  color:
    rgba(224, 174, 103, .86)
    !important;

  text-shadow:
    0 0 8px
    rgba(203, 119, 69, .14);
}


/* =========================================================
   5｜左上標題提亮
========================================================= */

#archives
.sealed-vault-header h2 {
  color:
    rgba(244, 228, 202, .96)
    !important;

  text-shadow:
    0 0 14px
    rgba(196, 139, 82, .08);
}


#archives
.sealed-vault-header > p {
  color:
    rgba(219, 200, 175, .62)
    !important;
}


#archives
.sealed-vault-kicker {
  color:
    rgba(205, 151, 92, .72)
    !important;
}


/* =========================================================
   6｜底部進度也提一點
========================================================= */

#archives
.sealed-vault-progress {
  filter:
    brightness(1.22);
}
/* =========================================================
   01｜曜辰京錄
   入京錄 / ENTRY REGISTRY
========================================================= */

.capital-registry {
  position:
    absolute;

  z-index:
    12;

  left:
    51%;

  top:
    60%;

  width:
    360px;

  transform:
    translate(-50%, -50%);

  opacity:
    0;

  animation:
    capitalRegistryIn
    1.25s
    ease
    1.15s
    forwards;
}


/* =========================================================
   小標
========================================================= */

.capital-registry-head {
  display:
    flex;

  align-items:
    center;

  gap:
    11px;

  margin-bottom:
    18px;

  color:
    rgba(196, 157, 95, .50);
}


.capital-registry-head span {
  font-size:
    7px;

  letter-spacing:
    .28em;
}


.capital-registry-head i {
  flex:
    1;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(195, 151, 88, .34),
      transparent
    );
}


.capital-registry-head em {
  flex:
    none;

  font-size:
    10px;

  font-style:
    normal;

  letter-spacing:
    .15em;

  color:
    rgba(220, 204, 178, .58);
}


/* =========================================================
   兩組資料
========================================================= */

.capital-registry-data {
  display:
    grid;

  grid-template-columns:
    1fr
    1px
    1fr;

  align-items:
    center;

  gap:
    23px;

  padding:
    19px 0;

  border-top:
    1px solid
    rgba(195, 157, 94, .16);

  border-bottom:
    1px solid
    rgba(195, 157, 94, .12);
}


.capital-registry-item {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;
}


.capital-registry-item > span {
  margin-bottom:
    9px;

  color:
    rgba(192, 151, 91, .45);

  font-size:
    7px;

  letter-spacing:
    .20em;
}


.capital-registry-item > strong {
  color:
    rgba(237, 226, 207, .90);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    22px;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    .08em;

  text-shadow:
    0 0 15px
    rgba(189, 135, 73, .07);
}


.capital-registry-item > em {
  margin-top:
    10px;

  color:
    rgba(207, 196, 178, .46);

  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .12em;
}


.capital-registry-divider {
  width:
    1px;

  height:
    47px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(190, 147, 88, .22),
      transparent
    );
}


/* =========================================================
   出現動畫
========================================================= */

@keyframes capitalRegistryIn {

  from {
    opacity:
      0;

    transform:
      translate(-50%, -42%);
  }

  to {
    opacity:
      1;

    transform:
      translate(-50%, -50%);
  }

}


/* =========================================================
   手機先隱藏
========================================================= */

@media (max-width: 800px) {

  .capital-registry {
    display:
      none;
  }

}
/* =========================================================
   01｜入京錄
   位置＋亮度調整 FINAL
========================================================= */

.capital-registry {
  position:
    absolute !important;

  z-index:
    15 !important;

  left:
    52% !important;

  top:
    auto !important;

  bottom:
    23% !important;

  width:
    440px !important;

  padding:
    17px 22px 18px !important;

  box-sizing:
    border-box !important;

  transform:
    translateX(-50%) !important;

  background:
    linear-gradient(
      90deg,
      rgba(3, 7, 12, .58),
      rgba(3, 7, 12, .32),
      rgba(3, 7, 12, .52)
    );

  border-top:
    1px solid
    rgba(201, 157, 93, .30);

  border-bottom:
    1px solid
    rgba(201, 157, 93, .18);

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  box-shadow:
    0 18px 45px
    rgba(0, 0, 0, .18);

  opacity:
    1 !important;

  animation:
    none !important;
}


/* ENTRY REGISTRY ───── 入京錄 */

.capital-registry-head {
  margin-bottom:
    16px !important;

  color:
    rgba(218, 174, 108, .80)
    !important;
}


.capital-registry-head span {
  font-size:
    8px !important;

  letter-spacing:
    .27em !important;
}


.capital-registry-head em {
  font-size:
    11px !important;

  color:
    rgba(232, 215, 188, .78)
    !important;
}


/* 中間資料 */

.capital-registry-data {
  padding:
    16px 0 4px !important;

  border-top:
    1px solid
    rgba(197, 153, 91, .15)
    !important;

  border-bottom:
    0 !important;
}


.capital-registry-item > span {
  font-size:
    8px !important;

  color:
    rgba(204, 159, 94, .65)
    !important;
}


.capital-registry-item > strong {
  font-size:
    27px !important;

  color:
    rgba(249, 237, 216, .96)
    !important;

  text-shadow:
    0 0 16px
    rgba(215, 157, 84, .13);

  font-variant-numeric:
    tabular-nums;
}


.capital-registry-item > em {
  font-size:
    10px !important;

  color:
    rgba(220, 208, 188, .62)
    !important;
}


.capital-registry-divider {
  height:
    54px !important;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(205, 159, 93, .35),
      transparent
    )
    !important;
}
/* =========================================================
   01｜曜辰京錄
   中央氣氛動態
========================================================= */

#capital {
  position: relative;
  overflow: hidden;
}


/* =========================================================
   氣氛層
========================================================= */

#capital .capital-atmosphere {
  position: absolute;

  z-index: 6;

  left: 34%;
  right: 27%;
  top: 22%;
  bottom: 15%;

  overflow: hidden;

  pointer-events: none;
}


/* =========================================================
   流霧
========================================================= */

#capital .capital-mist {
  position: absolute;

  display: block;

  border-radius: 999px;

  filter: blur(32px);

  background:
    radial-gradient(
      ellipse at center,
      rgba(122, 139, 168, .28) 0%,
      rgba(83, 101, 132, .16) 42%,
      transparent 75%
    );

  opacity: .18;

  mix-blend-mode: screen;
}


#capital .mist-1 {
  width: 82%;
  height: 20%;

  left: 3%;
  top: 20%;

  animation:
    capitalMistA
    18s
    ease-in-out
    infinite
    alternate;
}


#capital .mist-2 {
  width: 68%;
  height: 18%;

  left: 23%;
  top: 48%;

  opacity: .14;

  animation:
    capitalMistB
    22s
    ease-in-out
    infinite
    alternate;
}


#capital .mist-3 {
  width: 58%;
  height: 15%;

  left: 8%;
  top: 68%;

  opacity: .11;

  animation:
    capitalMistC
    20s
    ease-in-out
    infinite
    alternate;
}


/* =========================================================
   微光
========================================================= */

#capital .capital-glow {
  position: absolute;

  display: block;

  border-radius: 50%;

  filter: blur(25px);

  mix-blend-mode: screen;
}


#capital .glow-1 {
  width: 34%;
  aspect-ratio: 1;

  left: 31%;
  top: 24%;

  opacity: .10;

  background:
    radial-gradient(
      circle,
      rgba(203, 169, 108, .28),
      rgba(123, 88, 53, .12) 40%,
      transparent 72%
    );

  animation:
    capitalGlow
    8s
    ease-in-out
    infinite;
}


#capital .glow-2 {
  width: 25%;
  aspect-ratio: 1;

  left: 49%;
  top: 53%;

  opacity: .07;

  background:
    radial-gradient(
      circle,
      rgba(143, 161, 194, .20),
      rgba(73, 91, 121, .10) 42%,
      transparent 72%
    );

  animation:
    capitalGlow
    10s
    ease-in-out
    infinite;
}


/* =========================================================
   光塵
========================================================= */

#capital .capital-dust {
  position: absolute;

  display: block;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(245, 224, 184, .95),
      rgba(194, 153, 91, .55) 45%,
      transparent 75%
    );

  box-shadow:
    0 0 7px rgba(215, 176, 112, .32);

  opacity: 0;
}


#capital .dust-1 {
  left: 25%;
  top: 76%;

  animation:
    capitalDustA
    11s
    linear
    infinite;
}


#capital .dust-2 {
  left: 39%;
  top: 82%;

  animation:
    capitalDustB
    13s
    linear
    infinite;
}


#capital .dust-3 {
  left: 55%;
  top: 75%;

  width: 5px;
  height: 5px;

  animation:
    capitalDustA
    12s
    linear
    infinite;
}


#capital .dust-4 {
  left: 67%;
  top: 70%;

  animation:
    capitalDustB
    14s
    linear
    infinite;
}


#capital .dust-5 {
  left: 48%;
  top: 65%;

  width: 3px;
  height: 3px;

  animation:
    capitalDustA
    15s
    linear
    infinite;
}


#capital .dust-6 {
  left: 33%;
  top: 61%;

  width: 3px;
  height: 3px;

  animation:
    capitalDustB
    16s
    linear
    infinite;
}


/* =========================================================
   動畫
========================================================= */

@keyframes capitalMistA {

  from {
    transform:
      translateX(-4%)
      translateY(0)
      scale(1);
  }

  to {
    transform:
      translateX(8%)
      translateY(-8%)
      scale(1.06);
  }

}


@keyframes capitalMistB {

  from {
    transform:
      translateX(5%)
      translateY(0);
  }

  to {
    transform:
      translateX(-9%)
      translateY(7%);
  }

}


@keyframes capitalMistC {

  from {
    transform:
      translateX(-3%)
      translateY(3%);
  }

  to {
    transform:
      translateX(10%)
      translateY(-6%);
  }

}


@keyframes capitalGlow {

  0%,
  100% {
    transform:
      scale(.96);

    opacity:
      .07;
  }

  50% {
    transform:
      scale(1.08);

    opacity:
      .14;
  }

}


@keyframes capitalDustA {

  0% {
    opacity:
      0;

    transform:
      translate(0, 20px);
  }

  18% {
    opacity:
      .42;
  }

  60% {
    opacity:
      .34;

    transform:
      translate(14px, -42px);
  }

  100% {
    opacity:
      0;

    transform:
      translate(-8px, -90px);
  }

}


@keyframes capitalDustB {

  0% {
    opacity:
      0;

    transform:
      translate(0, 16px);
  }

  20% {
    opacity:
      .34;
  }

  62% {
    opacity:
      .40;

    transform:
      translate(-12px, -50px);
  }

  100% {
    opacity:
      0;

    transform:
      translate(8px, -96px);
  }

}
/* =========================================================
   01｜整體稍微提亮
========================================================= */

#capital .capital-shade {
  background:
    linear-gradient(
      90deg,
      rgba(3, 6, 11, .54) 0%,
      rgba(3, 6, 11, .18) 42%,
      rgba(3, 6, 11, .12) 63%,
      rgba(3, 6, 11, .34) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2, 5, 10, .04),
      rgba(2, 5, 10, .12) 62%,
      rgba(2, 5, 10, .31)
    )
    !important;
}


/* =========================================================
   01｜中央天象秘印
========================================================= */

#capital .capital-celestial {
  position:
    absolute;

  z-index:
    5;

  left:
    52%;

  top:
    48%;

  width:
    min(420px, 27vw);

  aspect-ratio:
    1;

  transform:
    translate(-50%, -50%);

  pointer-events:
    none;

  opacity:
    .52;

  animation:
    capitalCelestialFloat
    12s
    ease-in-out
    infinite;
}


/* =========================================================
   三層圓環
========================================================= */

#capital .capital-celestial-ring {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  border-radius:
    50%;

  transform:
    translate(-50%, -50%);

  box-sizing:
    border-box;
}


#capital .ring-a {
  width:
    100%;

  height:
    100%;

  border:
    1px solid
    rgba(195, 153, 88, .16);

  box-shadow:
    0 0 38px
    rgba(174, 117, 64, .035);

  animation:
    capitalCelestialSpin
    50s
    linear
    infinite;
}


#capital .ring-b {
  width:
    72%;

  height:
    72%;

  border:
    1px dashed
    rgba(197, 154, 91, .18);

  animation:
    capitalCelestialSpinReverse
    38s
    linear
    infinite;
}


#capital .ring-c {
  width:
    42%;

  height:
    42%;

  border:
    1px solid
    rgba(141, 63, 57, .24);

  box-shadow:
    inset 0 0 28px
    rgba(119, 38, 42, .055);

  animation:
    capitalCelestialSpin
    29s
    linear
    infinite;
}


/* =========================================================
   中央十字軸
========================================================= */

#capital .capital-celestial-axis {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(197, 154, 91, .20),
      transparent
    );
}


#capital .axis-h {
  width:
    112%;

  height:
    1px;

  transform:
    translate(-50%, -50%);
}


#capital .axis-v {
  width:
    1px;

  height:
    112%;

  transform:
    translate(-50%, -50%);

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(197, 154, 91, .18),
      transparent
    );
}


/* =========================================================
   中心紅金菱點
========================================================= */

#capital .capital-celestial-core {
  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    9px;

  height:
    9px;

  transform:
    translate(-50%, -50%)
    rotate(45deg);

  border:
    1px solid
    rgba(225, 177, 101, .72);

  background:
    rgba(130, 42, 39, .68);

  box-shadow:
    0 0 11px
    rgba(204, 122, 70, .25),

    0 0 26px
    rgba(136, 43, 42, .12);
}


/* =========================================================
   四個星位
========================================================= */

#capital .capital-celestial-mark {
  position:
    absolute;

  width:
    5px;

  height:
    5px;

  border:
    1px solid
    rgba(211, 164, 96, .42);

  transform:
    rotate(45deg);
}


#capital .mark-1 {
  left:
    49%;

  top:
    8%;
}


#capital .mark-2 {
  right:
    8%;

  top:
    49%;
}


#capital .mark-3 {
  left:
    49%;

  bottom:
    8%;
}


#capital .mark-4 {
  left:
    8%;

  top:
    49%;
}


/* =========================================================
   動畫
========================================================= */

@keyframes capitalCelestialSpin {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes capitalCelestialSpinReverse {

  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

}


@keyframes capitalCelestialFloat {

  0%,
  100% {
    opacity:
      .42;

    filter:
      brightness(.92);

    transform:
      translate(-50%, -49%)
      scale(.98);
  }

  50% {
    opacity:
      .58;

    filter:
      brightness(1.08);

    transform:
      translate(-50%, -52%)
      scale(1.02);
  }

}
/* =========================================================
   01｜曜辰京錄
   中央天象儀 V2
   去除游標感、提高存在感
========================================================= */

#capital .capital-celestial {
  left:
    53% !important;

  top:
    46% !important;

  width:
    min(540px, 34vw) !important;

  opacity:
    .82 !important;

  filter:
    brightness(1.22)
    saturate(1.08);

  animation:
    capitalCelestialFloatV2
    10s
    ease-in-out
    infinite !important;
}


/* =========================================================
   把原本像準星的十字拿掉
========================================================= */

#capital .capital-celestial-axis {
  display:
    none !important;
}


/* 中央菱形也不要了 */
#capital .capital-celestial-core {
  left:
    50% !important;

  top:
    50% !important;

  width:
    78px !important;

  height:
    78px !important;

  transform:
    translate(-50%, -50%) !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,
      rgba(159, 46, 43, .22) 0%,
      rgba(104, 32, 37, .12) 34%,
      transparent 72%
    ) !important;

  box-shadow:
    0 0 32px
    rgba(166, 63, 50, .15),

    0 0 80px
    rgba(118, 37, 43, .10)
    !important;
}


/* =========================================================
   外環
   改成不完整弧線，不再像準星
========================================================= */

#capital .ring-a {
  width:
    100% !important;

  height:
    100% !important;

  border:
    0 !important;

  background:
    conic-gradient(
      from 18deg,

      transparent 0 8%,

      rgba(212, 168, 98, .48)
      8% 15%,

      transparent
      15% 32%,

      rgba(153, 55, 51, .46)
      32% 43%,

      transparent
      43% 66%,

      rgba(213, 168, 98, .38)
      66% 75%,

      transparent
      75% 100%
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent
      calc(100% - 2px),

      #000
      calc(100% - 1px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent
      calc(100% - 2px),

      #000
      calc(100% - 1px)
    );

  filter:
    drop-shadow(
      0 0 5px
      rgba(191, 133, 72, .22)
    );

  animation:
    capitalOrbitA
    48s
    linear
    infinite !important;
}


/* =========================================================
   第二環
========================================================= */

#capital .ring-b {
  width:
    76% !important;

  height:
    76% !important;

  border:
    0 !important;

  background:
    conic-gradient(
      from 110deg,

      transparent 0 20%,

      rgba(199, 153, 88, .34)
      20% 28%,

      transparent
      28% 54%,

      rgba(199, 153, 88, .48)
      54% 63%,

      transparent
      63% 82%,

      rgba(133, 51, 48, .38)
      82% 90%,

      transparent
      90% 100%
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,
      transparent
      calc(100% - 2px),

      #000
      calc(100% - 1px)
    );

  mask:
    radial-gradient(
      farthest-side,
      transparent
      calc(100% - 2px),

      #000
      calc(100% - 1px)
    );

  animation:
    capitalOrbitB
    36s
    linear
    infinite !important;
}


/* =========================================================
   內環：暗紅
========================================================= */

#capital .ring-c {
  width:
    44% !important;

  height:
    44% !important;

  border:
    1px solid
    rgba(152, 57, 52, .40)
    !important;

  background:
    radial-gradient(
      circle,
      rgba(116, 33, 38, .06),
      transparent 70%
    )
    !important;

  box-shadow:
    0 0 28px
    rgba(130, 43, 43, .11),

    inset
    0 0 28px
    rgba(119, 38, 41, .07)
    !important;

  animation:
    capitalOrbitC
    28s
    linear
    infinite !important;
}


/* =========================================================
   四個原本的菱點
   改成星位光點
========================================================= */

#capital .capital-celestial-mark {
  width:
    4px !important;

  height:
    4px !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  transform:
    none !important;

  background:
    rgba(232, 189, 112, .82)
    !important;

  box-shadow:
    0 0 5px
    rgba(229, 183, 104, .65),

    0 0 14px
    rgba(190, 118, 68, .26)
    !important;

  animation:
    capitalStarPulse
    3.8s
    ease-in-out
    infinite;
}


#capital .mark-1 {
  left:
    48% !important;

  top:
    4% !important;
}


#capital .mark-2 {
  right:
    11% !important;

  top:
    35% !important;

  animation-delay:
    -1.4s;
}


#capital .mark-3 {
  left:
    57% !important;

  bottom:
    7% !important;

  animation-delay:
    -2.1s;
}


#capital .mark-4 {
  left:
    8% !important;

  top:
    58% !important;

  animation-delay:
    -.7s;
}


/* =========================================================
   整個天象儀再補一層柔光
========================================================= */

#capital .capital-celestial::before {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    78%;

  height:
    78%;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(190, 139, 76, .07) 0%,
      rgba(116, 56, 48, .05) 35%,
      transparent 72%
    );

  filter:
    blur(13px);

  pointer-events:
    none;
}


/* =========================================================
   額外細弧
========================================================= */

#capital .capital-celestial::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  top:
    50%;

  width:
    116%;

  height:
    54%;

  transform:
    translate(-50%, -50%)
    rotate(-13deg);

  border-top:
    1px solid
    rgba(209, 163, 95, .23);

  border-radius:
    50%;

  filter:
    drop-shadow(
      0 0 4px
      rgba(198, 133, 74, .12)
    );

  pointer-events:
    none;
}


/* =========================================================
   新動畫
========================================================= */

@keyframes capitalOrbitA {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes capitalOrbitB {

  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

}


@keyframes capitalOrbitC {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(-360deg);
  }

}


@keyframes capitalStarPulse {

  0%,
  100% {
    opacity:
      .35;

    transform:
      scale(.75);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.35);
  }

}


@keyframes capitalCelestialFloatV2 {

  0%,
  100% {
    transform:
      translate(-50%, -49%)
      scale(.985);
  }

  50% {
    transform:
      translate(-50%, -52%)
      scale(1.015);
  }

}
/* =========================================================
   01｜曜辰京錄
   中央天象儀 V3｜華麗版
========================================================= */

#capital .capital-celestial {
  left: 54% !important;
  top: 46% !important;
  width: min(640px, 40vw) !important;

  opacity: .96 !important;

  filter:
    brightness(1.36)
    saturate(1.14)
    drop-shadow(
      0 0 18px
      rgba(176, 61, 55, .16)
    );

  animation:
    capitalCelestialFloatV3
    10s
    ease-in-out
    infinite
    !important;

  pointer-events: none;
}


/* 外層紅金霧光 */

#capital .capital-celestial::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 130%;
  height: 130%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(170, 53, 47, .12) 0%,
      rgba(165, 53, 47, .06) 20%,
      rgba(212, 169, 95, .04) 38%,
      transparent 72%
    );

  filter:
    blur(28px);

  pointer-events: none;

  animation:
    capitalAuraPulse
    6.5s
    ease-in-out
    infinite;
}


/* 外圍華麗星軌 */

#capital .capital-celestial::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 118%;
  height: 118%;

  transform:
    translate(-50%, -50%)
    rotate(-12deg);

  border-radius: 50%;

  background:
    conic-gradient(
      from 0deg,

      transparent
      0deg 20deg,

      rgba(214, 171, 100, .65)
      20deg 28deg,

      transparent
      28deg 54deg,

      rgba(148, 52, 48, .72)
      54deg 70deg,

      transparent
      70deg 114deg,

      rgba(214, 171, 100, .42)
      114deg 126deg,

      transparent
      126deg 198deg,

      rgba(146, 50, 47, .52)
      198deg 214deg,

      transparent
      214deg 272deg,

      rgba(214, 171, 100, .52)
      272deg 286deg,

      transparent
      286deg 360deg
    );

  -webkit-mask:
    radial-gradient(
      circle,
      transparent 63%,
      #000 64%,
      #000 66%,
      transparent 67%
    );

  mask:
    radial-gradient(
      circle,
      transparent 63%,
      #000 64%,
      #000 66%,
      transparent 67%
    );

  filter:
    drop-shadow(
      0 0 8px
      rgba(209, 163, 94, .24)
    );

  pointer-events: none;

  animation:
    capitalOrbitLuxury
    28s
    linear
    infinite;
}


/* 去掉原本準星感 */

#capital .capital-celestial-axis {
  display: none !important;
}


/* =========================================================
   中央紅月核心
========================================================= */

#capital .capital-celestial-core {
  left: 50% !important;
  top: 50% !important;

  width: 108px !important;
  height: 108px !important;

  transform:
    translate(-50%, -50%)
    !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  background:
    radial-gradient(
      circle,

      rgba(146, 42, 41, .42) 0%,

      rgba(120, 34, 36, .30) 26%,

      rgba(69, 18, 24, .14) 48%,

      transparent 72%
    )
    !important;

  box-shadow:
    0 0 22px
    rgba(170, 65, 52, .22),

    0 0 60px
    rgba(126, 37, 43, .18),

    inset
    0 0 26px
    rgba(255, 219, 171, .05)
    !important;
}


/* =========================================================
   最外圈
========================================================= */

#capital .ring-a {
  width: 100% !important;
  height: 100% !important;

  border:
    0 !important;

  background:
    conic-gradient(
      from 18deg,

      transparent 0 10%,

      rgba(213, 168, 98, .55)
      10% 16%,

      transparent
      16% 32%,

      rgba(150, 55, 51, .58)
      32% 44%,

      transparent
      44% 62%,

      rgba(213, 168, 98, .48)
      62% 70%,

      transparent
      70% 100%
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,

      transparent
      calc(100% - 2px),

      #000
      calc(100% - 1px)
    );

  mask:
    radial-gradient(
      farthest-side,

      transparent
      calc(100% - 2px),

      #000
      calc(100% - 1px)
    );

  filter:
    drop-shadow(
      0 0 6px
      rgba(205, 152, 84, .26)
    );

  animation:
    capitalOrbitA2
    42s
    linear
    infinite
    !important;
}


/* =========================================================
   第二圈
========================================================= */

#capital .ring-b {
  width: 78% !important;
  height: 78% !important;

  border:
    0 !important;

  background:
    conic-gradient(
      from 118deg,

      transparent
      0 14%,

      rgba(198, 152, 89, .32)
      14% 24%,

      transparent
      24% 50%,

      rgba(200, 155, 92, .54)
      50% 61%,

      transparent
      61% 82%,

      rgba(136, 51, 48, .40)
      82% 92%,

      transparent
      92% 100%
    );

  -webkit-mask:
    radial-gradient(
      farthest-side,

      transparent
      calc(100% - 2px),

      #000
      calc(100% - 1px)
    );

  mask:
    radial-gradient(
      farthest-side,

      transparent
      calc(100% - 2px),

      #000
      calc(100% - 1px)
    );

  animation:
    capitalOrbitB2
    30s
    linear
    infinite
    !important;
}


/* =========================================================
   內圈
========================================================= */

#capital .ring-c {
  width: 46% !important;
  height: 46% !important;

  border:
    1px solid
    rgba(151, 55, 50, .46)
    !important;

  background:
    radial-gradient(
      circle,
      rgba(118, 35, 39, .10),
      transparent 68%
    )
    !important;

  box-shadow:
    0 0 24px
    rgba(144, 46, 42, .12),

    inset
    0 0 24px
    rgba(129, 39, 42, .10)
    !important;

  animation:
    capitalOrbitC2
    24s
    linear
    infinite
    !important;
}


/* =========================================================
   星點
========================================================= */

#capital .capital-celestial-mark {
  width: 5px !important;
  height: 5px !important;

  border:
    0 !important;

  border-radius:
    50% !important;

  transform:
    none !important;

  background:
    rgba(238, 198, 122, .96)
    !important;

  box-shadow:
    0 0 8px
    rgba(232, 188, 106, .72),

    0 0 18px
    rgba(193, 114, 67, .36)
    !important;

  animation:
    capitalStarPulse2
    3.2s
    ease-in-out
    infinite;
}


#capital .mark-1 {
  left: 52% !important;
  top: 6% !important;
}


#capital .mark-2 {
  right: 10% !important;
  top: 34% !important;

  animation-delay:
    -.8s;
}


#capital .mark-3 {
  left: 58% !important;
  bottom: 9% !important;

  animation-delay:
    -1.5s;
}


#capital .mark-4 {
  left: 12% !important;
  top: 58% !important;

  animation-delay:
    -2.1s;
}


/* =========================================================
   動畫
========================================================= */

@keyframes capitalCelestialFloatV3 {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      scale(.985);
  }

  50% {
    transform:
      translate(-50%, -52%)
      scale(1.02);
  }

}


@keyframes capitalAuraPulse {

  0%,
  100% {
    opacity:
      .62;

    transform:
      translate(-50%, -50%)
      scale(.96);
  }

  50% {
    opacity:
      1;

    transform:
      translate(-50%, -50%)
      scale(1.03);
  }

}


@keyframes capitalOrbitLuxury {

  from {
    transform:
      translate(-50%, -50%)
      rotate(-12deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(348deg);
  }

}


@keyframes capitalOrbitA2 {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

}


@keyframes capitalOrbitB2 {

  from {
    transform:
      translate(-50%, -50%)
      rotate(360deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

}


@keyframes capitalOrbitC2 {

  from {
    transform:
      translate(-50%, -50%)
      rotate(0deg);
  }

  to {
    transform:
      translate(-50%, -50%)
      rotate(-360deg);
  }

}


@keyframes capitalStarPulse2 {

  0%,
  100% {
    opacity:
      .45;

    transform:
      scale(.82);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.45);
  }

}
/* =========================================================
   01｜曜辰京錄
   移除假天象儀＋改回自然電影感
========================================================= */


/* 直接關掉中央幾何圖案 */

#capital .capital-celestial {
  display:
    none !important;
}


/* =========================================================
   中央氣氛區放大
========================================================= */

#capital .capital-atmosphere {
  left:
    27% !important;

  right:
    15% !important;

  top:
    14% !important;

  bottom:
    10% !important;

  opacity:
    1 !important;

  overflow:
    visible !important;

  pointer-events:
    none !important;
}


/* =========================================================
   真實後層雲
========================================================= */

#capital .capital-cloud-back {
  opacity:
    .72 !important;

  filter:
    brightness(1.18)
    contrast(1.02)
    saturate(.92)
    !important;

  transform:
    scale(1.04);

  animation:
    capitalRealCloudBack
    24s
    ease-in-out
    infinite
    alternate
    !important;
}


/* =========================================================
   真實前層雲
========================================================= */

#capital .capital-cloud-front {
  opacity:
    .64 !important;

  filter:
    brightness(1.20)
    contrast(1.03)
    saturate(.90)
    !important;

  transform:
    scale(1.06);

  animation:
    capitalRealCloudFront
    18s
    ease-in-out
    infinite
    alternate
    !important;
}


/* =========================================================
   中央霧
   不再像特效圈
========================================================= */

#capital .capital-mist {
  border-radius:
    50% !important;

  filter:
    blur(46px)
    !important;

  mix-blend-mode:
    screen;

  background:
    radial-gradient(
      ellipse at center,

      rgba(123, 143, 171, .30) 0%,

      rgba(94, 113, 143, .20) 28%,

      rgba(67, 82, 108, .10) 53%,

      transparent 76%
    )
    !important;
}


#capital .mist-1 {
  width:
    92% !important;

  height:
    28% !important;

  left:
    -5% !important;

  top:
    23% !important;

  opacity:
    .24 !important;

  animation:
    capitalMistNaturalA
    19s
    ease-in-out
    infinite
    alternate
    !important;
}


#capital .mist-2 {
  width:
    78% !important;

  height:
    25% !important;

  left:
    18% !important;

  top:
    48% !important;

  opacity:
    .20 !important;

  animation:
    capitalMistNaturalB
    23s
    ease-in-out
    infinite
    alternate
    !important;
}


#capital .mist-3 {
  width:
    70% !important;

  height:
    22% !important;

  left:
    2% !important;

  top:
    67% !important;

  opacity:
    .15 !important;

  animation:
    capitalMistNaturalC
    21s
    ease-in-out
    infinite
    alternate
    !important;
}


/* =========================================================
   柔光
   不是紅色圓球，是空氣裡的暖光
========================================================= */

#capital .glow-1 {
  width:
    42% !important;

  left:
    34% !important;

  top:
    35% !important;

  opacity:
    .16 !important;

  filter:
    blur(38px)
    !important;

  background:
    radial-gradient(
      circle,

      rgba(222, 180, 109, .20),

      rgba(155, 102, 62, .09) 36%,

      transparent 70%
    )
    !important;
}


#capital .glow-2 {
  width:
    34% !important;

  left:
    47% !important;

  top:
    56% !important;

  opacity:
    .13 !important;

  filter:
    blur(42px)
    !important;

  background:
    radial-gradient(
      circle,

      rgba(119, 144, 177, .21),

      rgba(73, 91, 119, .09) 40%,

      transparent 74%
    )
    !important;
}


/* =========================================================
   光塵稍微明顯
========================================================= */

#capital .capital-dust {
  filter:
    blur(.15px)
    brightness(1.35)
    !important;

  box-shadow:
    0 0 8px
    rgba(229, 188, 115, .48),

    0 0 18px
    rgba(201, 139, 79, .18)
    !important;
}


/* =========================================================
   動畫
========================================================= */

@keyframes capitalRealCloudBack {

  from {
    transform:
      scale(1.04)
      translate3d(-1.5%, 0, 0);
  }

  to {
    transform:
      scale(1.07)
      translate3d(2%, -1%, 0);
  }

}


@keyframes capitalRealCloudFront {

  from {
    transform:
      scale(1.06)
      translate3d(1.5%, 0, 0);
  }

  to {
    transform:
      scale(1.09)
      translate3d(-2%, 1%, 0);
  }

}


@keyframes capitalMistNaturalA {

  from {
    transform:
      translate3d(-4%, 2%, 0)
      scale(.98);
  }

  to {
    transform:
      translate3d(8%, -5%, 0)
      scale(1.08);
  }

}


@keyframes capitalMistNaturalB {

  from {
    transform:
      translate3d(6%, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(-8%, 5%, 0)
      scale(1.07);
  }

}


@keyframes capitalMistNaturalC {

  from {
    transform:
      translate3d(-2%, 3%, 0);
  }

  to {
    transform:
      translate3d(9%, -5%, 0);
  }

}
/* =========================================================
   01｜曜辰京錄
   氣氛層再淡一階
========================================================= */

#capital .capital-cloud-back {
  opacity: .48 !important;
}

#capital .capital-cloud-front {
  opacity: .40 !important;
}


/* 中央流霧 */

#capital .mist-1 {
  opacity: .15 !important;
}

#capital .mist-2 {
  opacity: .12 !important;
}

#capital .mist-3 {
  opacity: .09 !important;
}


/* 暖光／冷光 */

#capital .glow-1 {
  opacity: .10 !important;
}

#capital .glow-2 {
  opacity: .08 !important;
}


/* 光點也不要太亮 */

#capital .capital-dust {
  opacity: .58 !important;

  filter:
    blur(.15px)
    brightness(1.12)
    !important;

  box-shadow:
    0 0 6px rgba(229, 188, 115, .28),
    0 0 13px rgba(201, 139, 79, .10)
    !important;
}
/* =========================================================
   02｜五姓世錄
   簡介強制單行
========================================================= */

#houses .houses-intro {
  width:
    max-content !important;

  max-width:
    none !important;

  white-space:
    nowrap !important;

  margin-left:
    auto !important;

  margin-right:
    auto !important;
}
/* =========================================================
   04｜五姓歲錄
   B版｜高級王朝歲錄展板 FINAL
========================================================= */


/* =========================================================
   整頁基礎
========================================================= */

#calendar.calendar-section {
  position: relative;

  background-color:
    rgba(2, 5, 10, .08);

  color:
    rgba(235, 225, 207, .92);
}


/* =========================================================
   原本巨大軌道裝飾弱化
   不要再壓整頁
========================================================= */

#calendar .calendar-orbit {
  opacity:
    1 !important;

  filter:
    none !important;

  pointer-events:
    none;
}


#calendar .calendar-orbit::before,
#calendar .calendar-orbit::after {
  border-color:
    rgba(201, 158, 92, .10)
    !important;
}


/* =========================================================
   HEADER
   改成正式歲錄展板感
========================================================= */

#calendar .calendar-header {
  position:
    relative !important;

  z-index:
    4 !important;

  width:
    min(980px, 72vw) !important;

  max-width:
    none !important;

  margin:
    0 auto 2.7vh
    !important;

  text-align:
    center;
}


/* 上方 04 ─ CALENDAR */

#calendar .calendar-kicker {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    15px;

  margin-bottom:
    14px !important;
}


#calendar .calendar-kicker span,
#calendar .calendar-kicker em {
  color:
    rgba(211, 169, 101, .82)
    !important;

  font-size:
    10px !important;

  letter-spacing:
    .30em !important;
}


#calendar .calendar-kicker i {
  width:
    54px !important;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(215, 169, 99, .62),
      transparent
    )
    !important;
}


/* =========================================================
   主標題
========================================================= */

#calendar .calendar-header h2 {
  margin:
    0 0 15px
    !important;

  color:
    rgba(248, 239, 222, .98)
    !important;

  font-size:
    clamp(
      54px,
      4.1vw,
      76px
    )
    !important;

  font-weight:
    400 !important;

  line-height:
    1 !important;

  letter-spacing:
    .09em !important;

  text-shadow:
    0 0 22px
    rgba(219, 176, 112, .08),

    0 8px 28px
    rgba(0, 0, 0, .32);
}


/* 標題下說明 */

#calendar .calendar-header > p {
  width:
    min(900px, 68vw)
    !important;

  max-width:
    none !important;

  margin:
    0 auto !important;

  color:
    rgba(229, 218, 199, .84)
    !important;

  font-size:
    15px !important;

  line-height:
    1.85 !important;

  letter-spacing:
    .065em !important;

  text-align:
    center;
}


/* =========================================================
   右上年度資料
========================================================= */

#calendar .calendar-year {
  z-index:
    5 !important;

  top:
    9vh !important;

  right:
    9vw !important;

  padding:
    13px 0 13px 20px;

  border-left:
    1px solid
    rgba(199, 155, 90, .18);

  text-align:
    right;
}


#calendar .calendar-year span,
#calendar .calendar-year em {
  color:
    rgba(201, 160, 96, .68)
    !important;

  font-size:
    8px !important;

  letter-spacing:
    .28em !important;
}


#calendar .calendar-year strong {
  margin:
    7px 0 !important;

  color:
    rgba(241, 222, 190, .94)
    !important;

  font-size:
    27px !important;

  text-shadow:
    0 0 15px
    rgba(192, 124, 69, .10);
}


/* =========================================================
   5 × 3 日程區
========================================================= */

@media (min-width: 851px) {

  #calendar .calendar-timeline {
    gap:
      12px 14px
      !important;
  }


  /* =======================================================
     每一張歲錄卡
  ======================================================= */

  #calendar .calendar-event {
    opacity:
      .78 !important;

    border:
      1px solid
      rgba(197, 157, 95, .18)
      !important;

    background:
      linear-gradient(
        145deg,

        rgba(16, 21, 30, .50) 0%,

        rgba(7, 11, 18, .40) 55%,

        rgba(10, 8, 11, .47) 100%
      )
      !important;

    box-shadow:
      inset
      0 1px 0
      rgba(255, 239, 210, .025),

      0 12px 26px
      rgba(0, 0, 0, .12);

    backdrop-filter:
      blur(4px);

    -webkit-backdrop-filter:
      blur(4px);

    transition:
      opacity .30s ease,
      transform .30s ease,
      border-color .30s ease,
      background .30s ease,
      box-shadow .30s ease
      !important;
  }


  /* =======================================================
     Hover / 選中
  ======================================================= */

  #calendar .calendar-event:hover,
  #calendar .calendar-event.active {
    opacity:
      1 !important;

    transform:
      translateY(-3px)
      !important;

    border-color:
      rgba(222, 174, 102, .48)
      !important;

    background:
      linear-gradient(
        145deg,

        rgba(70, 43, 30, .34),

        rgba(12, 17, 27, .60)
      )
      !important;

    box-shadow:
      inset
      0 1px 0
      rgba(255, 231, 191, .055),

      0 0 0 1px
      rgba(122, 54, 44, .08),

      0 16px 34px
      rgba(0, 0, 0, .20),

      0 0 22px
      rgba(170, 103, 60, .055)
      !important;
  }


  /* =======================================================
     日期列
  ======================================================= */

  #calendar .calendar-date {
    color:
      rgba(232, 217, 192, .88)
      !important;
  }


  #calendar .calendar-date > span {
    color:
      rgba(207, 164, 98, .82)
      !important;
  }


  #calendar .calendar-date strong {
    color:
      rgba(242, 228, 204, .92)
      !important;

    text-shadow:
      0 0 12px
      rgba(209, 154, 86, .08);
  }


  #calendar .calendar-date em {
    color:
      rgba(194, 164, 118, .62)
      !important;
  }


  /* =======================================================
     卡片正文
  ======================================================= */

  #calendar .calendar-event-content {
    color:
      rgba(225, 215, 198, .84)
      !important;
  }


  #calendar .calendar-event-content h3 {
    color:
      rgba(238, 226, 205, .90)
      !important;

    text-shadow:
      0 0 12px
      rgba(0, 0, 0, .24);
  }


  #calendar .calendar-event.active
  .calendar-event-content h3,
  #calendar .calendar-event:hover
  .calendar-event-content h3 {
    color:
      rgba(250, 234, 205, .98)
      !important;
  }


  #calendar .calendar-event-house {
    color:
      rgba(205, 158, 91, .66)
      !important;
  }


  #calendar .calendar-event-content > p {
    color:
      rgba(220, 210, 193, .72)
      !important;
  }


  /* =======================================================
     篇章標記
  ======================================================= */

  #calendar .calendar-story-tag {
    color:
      rgba(221, 174, 102, .86)
      !important;
  }


  /* =======================================================
     節點
  ======================================================= */

  #calendar .calendar-node {
    border-color:
      rgba(207, 165, 98, .58)
      !important;

    background:
      rgba(8, 11, 17, .90)
      !important;
  }


  #calendar .calendar-event:hover
  .calendar-node,
  #calendar .calendar-event.active
  .calendar-node {
    border-color:
      rgba(245, 199, 119, .96)
      !important;

    background:
      rgba(142, 48, 37, .92)
      !important;

    box-shadow:
      0 0 8px
      rgba(239, 187, 99, .42),

      0 0 22px
      rgba(147, 48, 37, .30)
      !important;
  }

}
/* =========================================================
   04｜曜辰歲錄｜最終修正
   1. 隱藏右上重複年份區
   2. 恢復所有歲錄卡片點擊
========================================================= */


/* 右上 DYNASTY CALENDAR / 曜辰 / ANNUAL RECORD 不再顯示 */

#calendar .calendar-year {
  display:
    none !important;
}


/* =========================================================
   卡片層永遠在背景裝飾上方
========================================================= */

#calendar .calendar-timeline {
  position:
    relative !important;

  z-index:
    20 !important;

  pointer-events:
    auto !important;
}


/* 每張事件卡本身負責接收點擊 */

#calendar .calendar-event {
  position:
    relative !important;

  z-index:
    21 !important;

  pointer-events:
    auto !important;

  cursor:
    zoom-in !important;
}


/* 卡片裡面的文字、日期、裝飾
   不攔截滑鼠，點擊直接交給整張卡 */

#calendar .calendar-event > *,
#calendar .calendar-event-content,
#calendar .calendar-event-content *,
#calendar .calendar-date,
#calendar .calendar-date *,
#calendar .calendar-node {
  pointer-events:
    none !important;
}


/* 背景與軌道永遠不能擋卡片 */

#calendar .calendar-orbit,
#calendar .calendar-orbit::before,
#calendar .calendar-orbit::after,
#calendar.calendar-section::before,
#calendar.calendar-section::after {
  pointer-events:
    none !important;

  z-index:
    0 !important;
}


/* Header 保持在上層，但不遮下面卡片 */

#calendar .calendar-header {
  z-index:
    10 !important;
}
/* =========================================================
   04｜曜辰歲錄
   垂直位置修正 FINAL
========================================================= */

@media (min-width: 851px) {

  /* 標題區保持現在位置 */

  #calendar .calendar-header {
    margin:
      0 auto
      0
      !important;
  }


  /* 卡片區往下拉回來 */

  #calendar .calendar-timeline {
    margin:
      6.5vh 0 0
      !important;
  }


  /* Footer 跟著卡片，不要黏住 */

  #calendar .calendar-footer {
    margin-top:
      2vh
      !important;
  }

}
/* =========================================================
   全站｜中文斷行整理
   避免最後幾個字孤零零掉下一行
========================================================= */


/* 一般正文：
   讓瀏覽器優先選比較漂亮的斷句位置 */

.capital-text,
.house-desc,
.dossier-text,
.role-description,
.chronicle-text,
.creator-note p {
  word-break:
    normal !important;

  overflow-wrap:
    normal !important;

  line-break:
    strict !important;

  text-wrap:
    pretty;
}


/* =========================================================
   章節開場簡介
   這類短文要平均斷行，不要第一行超長、第二行只剩幾個字
========================================================= */

.houses-intro,
.chronicles-header > p,
.calendar-header > p {
  word-break:
    normal !important;

  overflow-wrap:
    normal !important;

  line-break:
    strict !important;

  text-wrap:
    balance;
}


/* =========================================================
   04｜曜辰歲錄
   桌機夠寬時讓這句直接完整一行
========================================================= */

@media (min-width: 851px) {

  #calendar .calendar-header > p {
    width:
      max-content !important;

    max-width:
      min(1180px, 76vw) !important;

    margin-left:
      auto !important;

    margin-right:
      auto !important;

    white-space:
      normal !important;
  }

}
/* =========================================================
   02｜五人物紋印放大視窗
   桌機雙欄正式版 FINAL
========================================================= */

@media (min-width: 851px) {

  .symbol-lightbox-inner {
    position:
      relative !important;

    display:
      grid !important;

    grid-template-columns:
      minmax(280px, 1fr)
      minmax(300px, .88fr)
      !important;

    grid-template-rows:
      auto
      auto
      1fr
      auto
      !important;

    column-gap:
      52px !important;

    row-gap:
      0 !important;

    align-items:
      center !important;

    width:
      min(980px, 88vw)
      !important;

    max-height:
      86vh !important;

    padding:
      48px 54px
      32px
      !important;

    overflow:
      hidden !important;

    box-sizing:
      border-box !important;

    background:
      radial-gradient(
        circle at 25% 45%,
        rgba(88, 59, 39, .10),
        transparent 38%
      ),

      linear-gradient(
        145deg,
        rgba(9, 12, 18, .985),
        rgba(3, 6, 10, .985)
      )
      !important;

    border:
      1px solid
      rgba(198, 156, 91, .24)
      !important;

    box-shadow:
      0 32px 100px
      rgba(0, 0, 0, .68),

      inset
      0 0 70px
      rgba(170, 108, 55, .025)
      !important;
  }


  /* =====================================================
     左側｜紋印大圖
  ====================================================== */

  .symbol-lightbox-image {
    grid-column:
      1 !important;

    grid-row:
      1 / 4 !important;

    align-self:
      center !important;

    justify-self:
      center !important;

    display:
      block !important;

    width:
      auto !important;

    height:
      auto !important;

    max-width:
      100% !important;

    max-height:
      64vh !important;

    margin:
      0 !important;

    object-fit:
      contain !important;

    filter:
      drop-shadow(
        0 20px 42px
        rgba(0, 0, 0, .50)
      )
      !important;
  }


  /* =====================================================
     右側｜小標
  ====================================================== */

  .symbol-lightbox-type {
    grid-column:
      2 !important;

    grid-row:
      1 !important;

    align-self:
      end !important;

    margin:
      0 0 10px
      !important;

    text-align:
      left !important;

    color:
      rgba(195, 155, 94, .62)
      !important;

    font-size:
      9px !important;

    letter-spacing:
      .32em !important;
  }


  /* =====================================================
     右側｜紋印名稱
  ====================================================== */

  .symbol-lightbox-title {
    grid-column:
      2 !important;

    grid-row:
      2 !important;

    margin:
      0 0 23px
      !important;

    text-align:
      left !important;

    color:
      rgba(245, 235, 216, .96)
      !important;

    font-size:
      30px !important;

    line-height:
      1.2 !important;

    font-weight:
      400 !important;

    letter-spacing:
      .15em !important;
  }


  /* =====================================================
     右側｜完整說明
  ====================================================== */

  .symbol-lightbox-note {
    grid-column:
      2 !important;

    grid-row:
      3 !important;

    align-self:
      start !important;

    width:
      100% !important;

    max-width:
      none !important;

    margin:
      0 !important;

    padding:
      21px 0 0
      !important;

    border-top:
      1px solid
      rgba(194, 151, 87, .20)
      !important;

    text-align:
      left !important;

    box-sizing:
      border-box !important;
  }


  .symbol-lightbox-rank {
    display:
      block !important;

    margin:
      0 0 9px
      !important;

    color:
      rgba(239, 210, 163, .96)
      !important;

    font-size:
      16px !important;

    line-height:
      1.5 !important;

    font-weight:
      400 !important;

    letter-spacing:
      .10em !important;
  }


  .symbol-lightbox-structure {
    display:
      block !important;

    margin:
      0 0 17px
      !important;

    color:
      rgba(201, 164, 105, .72)
      !important;

    font-size:
      12px !important;

    line-height:
      1.7 !important;

    letter-spacing:
      .07em !important;
  }


  .symbol-lightbox-description {
    margin:
      0 !important;

    color:
      rgba(226, 218, 202, .82)
      !important;

    font-size:
      15px !important;

    line-height:
      1.9 !important;

    letter-spacing:
      .035em !important;

    text-align:
      left !important;

    word-break:
      normal !important;

    line-break:
      strict !important;

    text-wrap:
      pretty;
  }


  /* =====================================================
     底部提示
  ====================================================== */

  .symbol-lightbox-hint {
    grid-column:
      1 / -1 !important;

    grid-row:
      4 !important;

    margin:
      27px 0 0
      !important;

    padding-top:
      17px;

    border-top:
      1px solid
      rgba(193, 151, 88, .08);

    color:
      rgba(183, 174, 157, .28)
      !important;

    font-size:
      7px !important;

    letter-spacing:
      5px !important;

    text-align:
      center !important;
  }


  /* X */

  .symbol-lightbox-close {
    z-index:
      5;

    top:
      18px !important;

    right:
      18px !important;
  }

}


/* =========================================================
   手機／窄畫面
   回到單欄，不讓雙欄爆掉
========================================================= */

@media (max-width: 850px) {

  .symbol-lightbox-inner {
    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      center !important;

    width:
      92vw !important;

    max-height:
      90vh !important;

    padding:
      42px 24px
      28px !important;

    overflow-y:
      auto !important;
  }


  .symbol-lightbox-image {
    max-width:
      76vw !important;

    max-height:
      44vh !important;

    margin:
      0 auto !important;
  }


  .symbol-lightbox-note {
    width:
      100% !important;

    margin:
      20px 0 0 !important;

    text-align:
      left !important;
  }


  .symbol-lightbox-description {
    font-size:
      14px !important;

    line-height:
      1.85 !important;

    text-align:
      left !important;
  }

}
/* =========================================================
   02｜人物紋印視窗
   右側資料垂直置中
========================================================= */

@media (min-width: 851px) {

  .symbol-lightbox-type,
  .symbol-lightbox-title,
  .symbol-lightbox-note {
    position:
      relative !important;

    top:
      118px !important;
  }


  /* 右側正文仍維持左對齊 */

  .symbol-lightbox-type,
  .symbol-lightbox-title,
  .symbol-lightbox-note,
  .symbol-lightbox-description {
    text-align:
      left !important;
  }

}
/* =========================================================
   04｜曜辰歲錄
   點開後雙欄歲錄版 FINAL
========================================================= */

@media (min-width: 851px) {

  .calendar-lightbox-inner {
    width:
      min(760px, 82vw)
      !important;

    max-height:
      none !important;

    overflow:
      visible !important;

    display:
      grid !important;

    grid-template-columns:
      150px 1fr
      !important;

    grid-template-rows:
      auto auto
      !important;

    column-gap:
      38px !important;

    row-gap:
      0 !important;

    align-items:
      center !important;

    padding:
      46px 52px
      30px
      !important;

    background:
      radial-gradient(
        circle at 12% 42%,
        rgba(134, 61, 49, .11),
        transparent 30%
      ),
      linear-gradient(
        145deg,
        rgba(10, 13, 19, .985),
        rgba(4, 6, 10, .985)
      )
      !important;
  }


  /* =====================================================
     左側日期
  ====================================================== */

  .calendar-lightbox-date {
    grid-column:
      1 !important;

    grid-row:
      1 !important;

    align-self:
      stretch !important;

    display:
      flex !important;

    flex-direction:
      column !important;

    align-items:
      flex-start !important;

    justify-content:
      center !important;

    gap:
      4px !important;

    min-height:
      190px;

    margin:
      0 !important;

    padding:
      0 28px 0 0
      !important;

    border-bottom:
      0 !important;

    border-right:
      1px solid
      rgba(190, 147, 86, .18)
      !important;
  }


  .calendar-lightbox-date span {
    color:
      rgba(201, 159, 94, .78)
      !important;

    font-size:
      12px !important;

    letter-spacing:
      .18em !important;
  }


  .calendar-lightbox-date strong {
    margin:
      6px 0 4px
      !important;

    color:
      rgba(246, 232, 205, .98)
      !important;

    font-size:
      72px !important;

    line-height:
      .92 !important;

    font-weight:
      400 !important;

    text-shadow:
      0 0 24px
      rgba(190, 118, 67, .10);
  }


  .calendar-lightbox-date em {
    color:
      rgba(193, 173, 142, .52)
      !important;

    font-size:
      9px !important;

    letter-spacing:
      .22em !important;
  }


  /* =====================================================
     右側內容
  ====================================================== */

  .calendar-lightbox-content {
    grid-column:
      2 !important;

    grid-row:
      1 !important;

    align-self:
      center !important;

    min-width:
      0;
  }


  .calendar-lightbox-content
  .calendar-story-tag {
    display:
      flex !important;

    align-items:
      center !important;

    gap:
      13px !important;

    margin:
      0 0 14px
      !important;
  }


  .calendar-lightbox-content
  .calendar-event-house {
    margin:
      0 0 12px
      !important;

    color:
      rgba(197, 155, 94, .72)
      !important;

    font-size:
      9px !important;

    letter-spacing:
      .24em !important;
  }


  .calendar-lightbox-content h3 {
    margin:
      0 0 18px
      !important;

    color:
      rgba(246, 233, 208, .98)
      !important;

    font-size:
      clamp(
        27px,
        2.1vw,
        36px
      )
      !important;

    line-height:
      1.42 !important;

    letter-spacing:
      .055em !important;
  }


  .calendar-lightbox-content > p {
    max-width:
      520px;

    margin:
      0 !important;

    color:
      rgba(222, 211, 193, .78)
      !important;

    font-size:
      14px !important;

    line-height:
      1.9 !important;

    letter-spacing:
      .04em !important;

    text-wrap:
      pretty;
  }


  /* =====================================================
     底部提示
  ====================================================== */

  .calendar-lightbox-hint {
    grid-column:
      1 / -1 !important;

    grid-row:
      2 !important;

    margin:
      28px 0 0
      !important;

    padding-top:
      17px;

    border-top:
      1px solid
      rgba(190, 147, 86, .08);

    color:
      rgba(184, 174, 157, .24)
      !important;
  }

}
/* =========================================================
   01｜京中別錄
   單張人物公告輪播
========================================================= */

#capital .capital-featured-records {
  position: absolute;

  left: 43.5%;
  top: 31%;

  z-index: 12;

  width:
    min(500px, 31vw);

  padding:
    18px 18px 15px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(200, 158, 95, .26);

  background:
    linear-gradient(
      145deg,
      rgba(7, 11, 18, .88),
      rgba(4, 7, 13, .72)
    );

  box-shadow:
    0 20px 55px
    rgba(0, 0, 0, .30),

    inset 0 0 0 1px
    rgba(255, 238, 207, .018);

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);
}


/* =========================================================
   上方標題
========================================================= */

#capital .capital-featured-head {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    14px;

  padding:
    2px 2px 13px;

  border-bottom:
    1px solid
    rgba(199, 157, 94, .17);
}


#capital .capital-featured-head > div > span {
  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(211, 166, 97, .60);

  font-size:
    7px;

  letter-spacing:
    .27em;
}


#capital .capital-featured-head h3 {
  margin:
    0;

  color:
    rgba(248, 236, 215, .96);

  font-size:
    22px;

  line-height:
    1.2;

  font-weight:
    400;

  letter-spacing:
    .16em;
}


#capital .capital-featured-head > em {
  margin-bottom:
    4px;

  color:
    rgba(196, 164, 114, .46);

  font-size:
    7px;

  font-style:
    normal;

  letter-spacing:
    .20em;
}


/* =========================================================
   輪播舞台
========================================================= */

#capital .capital-featured-stage {
  position:
    relative;

  min-height:
    310px;
}


#capital .capital-featured-slide {
  display:
    none;

  width:
    100%;

  color:
    inherit;

  text-decoration:
    none;

  animation:
    capitalRecordFade
    .38s ease both;
}


#capital .capital-featured-slide.active {
  display:
    block;
}


/* =========================================================
   圖片區
========================================================= */

#capital .capital-featured-media {
  position:
    relative;

  width:
    100%;

  height:
    215px;

  overflow:
    hidden;

  border:
    1px solid
    rgba(206, 167, 104, .16);

  background:
    rgba(3, 7, 12, .86);
}


#capital .capital-featured-media::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      transparent 50%,
      rgba(2, 5, 9, .50) 100%
    );
}


#capital .capital-featured-media img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  object-position:
    center 24%;

  filter:
    brightness(.82)
    saturate(.88);

  transition:
    transform .65s ease,
    filter .65s ease;
}


#capital .capital-featured-slide:hover
.capital-featured-media img {
  transform:
    scale(1.025);

  filter:
    brightness(.96)
    saturate(.96);
}


#capital .capital-featured-index {
  position:
    absolute;

  top:
    12px;

  left:
    14px;

  z-index:
    2;

  color:
    rgba(224, 180, 108, .74);

  font-size:
    8px;

  letter-spacing:
    .22em;
}


/* =========================================================
   人物資料
========================================================= */

#capital .capital-featured-copy {
  display:
    flex;

  align-items:
    flex-end;

  justify-content:
    space-between;

  gap:
    24px;

  min-height:
    82px;

  padding:
    13px 4px 2px;
}


#capital .capital-featured-house {
  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(198, 158, 96, .66);

  font-size:
    8px;

  letter-spacing:
    .20em;
}


#capital .capital-featured-copy strong {
  display:
    block;

  color:
    rgba(247, 235, 214, .96);

  font-size:
    20px;

  line-height:
    1.3;

  font-weight:
    400;

  letter-spacing:
    .10em;
}


#capital .capital-featured-copy p {
  margin:
    5px 0 0;

  color:
    rgba(222, 212, 195, .68);

  font-size:
    11px;

  letter-spacing:
    .045em;
}


#capital .capital-featured-enter {
  position:
    relative;

  flex:
    0 0 auto;

  margin-bottom:
    5px;

  color:
    rgba(220, 173, 100, .76);

  font-size:
    10px;

  font-style:
    normal;

  letter-spacing:
    .14em;
}


#capital .capital-featured-enter::after {
  content:
    "›";

  margin-left:
    8px;

  transition:
    margin-left .28s ease;
}


#capital .capital-featured-slide:hover
.capital-featured-enter {
  color:
    rgba(244, 197, 118, .98);
}


#capital .capital-featured-slide:hover
.capital-featured-enter::after {
  margin-left:
    12px;
}


/* =========================================================
   五個輪播點
========================================================= */

#capital .capital-featured-dots {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    10px;

  margin-top:
    13px;

  padding-top:
    12px;

  border-top:
    1px solid
    rgba(196, 153, 90, .09);
}


#capital .capital-featured-dots button {
  width:
    6px;

  height:
    6px;

  padding:
    0;

  border:
    1px solid
    rgba(200, 157, 91, .38);

  background:
    transparent;

  transform:
    rotate(45deg);

  cursor:
    pointer;

  transition:
    background .28s ease,
    border-color .28s ease,
    box-shadow .28s ease,
    transform .28s ease;
}


#capital .capital-featured-dots button:hover {
  border-color:
    rgba(231, 185, 111, .76);
}


#capital .capital-featured-dots button.active {
  background:
    rgba(151, 51, 40, .92);

  border-color:
    rgba(235, 185, 105, .92);

  box-shadow:
    0 0 9px
    rgba(184, 78, 48, .40);

  transform:
    rotate(45deg)
    scale(1.15);
}


/* =========================================================
   淡入
========================================================= */

@keyframes capitalRecordFade {

  from {
    opacity:
      0;

    transform:
      translateY(5px);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0);
  }

}


/* =========================================================
   較窄桌機
========================================================= */

@media (max-width: 850px) {

  #capital .capital-featured-records {
    left:
      42%;

    width:
      34vw;
  }

}


/* 手機暫時隱藏，避免壓到正文 */

@media (max-width: 850px) {

  #capital .capital-featured-records {
    display:
      none;
  }

}
/* =========================================================
   01｜京中別錄
   情報公告卡版本
========================================================= */

#capital .capital-featured-records.capital-intel-board {
  position: absolute !important;

   left: 46.5% !important;
   top: 12.5% !important;

  z-index: 12 !important;

   width: min(700px, 41vw) !important;

  padding:
    25px 27px
    20px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(206, 163, 96, .30)
    !important;

  background:
    linear-gradient(
      145deg,
      rgba(7, 11, 18, .92),
      rgba(3, 7, 13, .84)
    )
    !important;

  box-shadow:
    0 22px 70px
    rgba(0, 0, 0, .34),

    inset
    0 0 0 1px
    rgba(255, 240, 214, .025)
    !important;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);
}


/* =========================================================
   情報卡上方
========================================================= */

#capital
.capital-intel-board
.capital-featured-head {
  display:
    flex !important;

  justify-content:
    space-between !important;

  align-items:
    flex-end !important;

  margin:
    0 0 17px !important;

  padding:
    0 0 15px !important;

  border-bottom:
    1px solid
    rgba(205, 161, 94, .20)
    !important;
}


#capital
.capital-intel-board
.capital-featured-head
span {
  display:
    block;

  margin-bottom:
    6px;

  color:
    rgba(208, 166, 101, .62)
    !important;

  font-size:
    8px !important;

  letter-spacing:
    .26em !important;
}


#capital
.capital-intel-board
.capital-featured-head
h3 {
  margin:
    0 !important;

  color:
    rgba(247, 236, 218, .98)
    !important;

  font-size:
    27px !important;

  font-weight:
    400 !important;

  line-height:
    1.1 !important;

  letter-spacing:
    .15em !important;
}


#capital
.capital-intel-board
.capital-featured-head
> em {
  margin-bottom:
    3px;

  color:
    rgba(202, 169, 116, .46)
    !important;

  font-size:
    8px !important;

  font-style:
    normal;

  letter-spacing:
    .20em !important;
}


/* =========================================================
   圖片
========================================================= */

#capital
.capital-intel-board
.capital-featured-stage {
  min-height:
    374px !important;
}


#capital
.capital-intel-board
.capital-featured-media {
  position:
    relative;

  width:
    100% !important;

  height:
    275px !important;

  overflow:
    hidden !important;

  border:
    1px solid
    rgba(207, 165, 101, .21)
    !important;

  background:
    rgba(2, 6, 12, .90)
    !important;
}


#capital
.capital-intel-board
.capital-featured-media::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      to bottom,
      rgba(1, 4, 8, .02),
      rgba(1, 4, 8, .04) 56%,
      rgba(1, 4, 8, .48)
    );
}


#capital
.capital-intel-board
.capital-featured-media
img {
  display:
    block !important;

  width:
    100% !important;

  height:
    100% !important;

  object-fit:
    cover !important;

  object-position:
    center 25% !important;

  filter:
    brightness(.88)
    saturate(.92)
    !important;

  transition:
    transform .65s ease,
    filter .65s ease;
}


#capital
.capital-intel-board
.capital-featured-slide:hover
.capital-featured-media
img {
  transform:
    scale(1.025);

  filter:
    brightness(1)
    saturate(1)
    !important;
}


/* =========================================================
   圖片編號
========================================================= */

#capital
.capital-intel-board
.capital-featured-index {
  position:
    absolute;

  top:
    14px;

  left:
    16px;

  z-index:
    3;

  color:
    rgba(232, 189, 116, .90)
    !important;

  font-size:
    9px !important;

  letter-spacing:
    .18em !important;
}


/* =========================================================
   人物情報
========================================================= */

#capital
.capital-intel-board
.capital-featured-copy {
  display:
    flex !important;

  align-items:
    flex-end !important;

  justify-content:
    space-between !important;

  gap:
    25px !important;

  min-height:
    82px !important;

  padding:
    15px 3px 1px
    !important;
}


#capital
.capital-intel-board
.capital-featured-house {
  display:
    block;

  margin-bottom:
    5px;

  color:
    rgba(211, 166, 99, .76)
    !important;

  font-size:
    8px !important;

  letter-spacing:
    .20em !important;
}


#capital
.capital-intel-board
.capital-featured-copy
strong {
  display:
    block;

  color:
    rgba(250, 239, 219, .98)
    !important;

  font-size:
    22px !important;

  font-weight:
    400 !important;

  line-height:
    1.25 !important;

  letter-spacing:
    .08em !important;
}


#capital
.capital-intel-board
.capital-featured-copy
p {
  margin:
    6px 0 0 !important;

  color:
    rgba(225, 214, 196, .74)
    !important;

  font-size:
    12px !important;

  line-height:
    1.6 !important;
}


/* 入卷 */

#capital
.capital-intel-board
.capital-featured-enter {
  flex:
    0 0 auto;

  margin-bottom:
    4px;

  color:
    rgba(231, 187, 112, .88)
    !important;

  font-size:
    11px !important;

  font-style:
    normal;

  letter-spacing:
    .15em !important;
}


#capital
.capital-intel-board
.capital-featured-enter::after {
  content:
    " ›";

  margin-left:
    7px;
}


/* =========================================================
   五個切換點
========================================================= */

#capital
.capital-intel-board
.capital-featured-dots {
  display:
    flex !important;

  justify-content:
    center !important;

  align-items:
    center !important;

  gap:
    11px !important;

  margin:
    14px 0 0 !important;

  padding:
    14px 0 0 !important;

  border-top:
    1px solid
    rgba(201, 157, 91, .10)
    !important;
}


#capital
.capital-intel-board
.capital-featured-dots
button {
  width:
    6px !important;

  height:
    6px !important;

  padding:
    0 !important;

  border:
    1px solid
    rgba(210, 166, 99, .42)
    !important;

  background:
    transparent !important;

  transform:
    rotate(45deg);

  cursor:
    pointer;
}


#capital
.capital-intel-board
.capital-featured-dots
button.active {
  border-color:
    rgba(246, 197, 116, .98)
    !important;

  background:
    rgba(159, 51, 39, .98)
    !important;

  box-shadow:
    0 0 10px
    rgba(187, 70, 45, .44);
}
/* =========================================================
   01｜中央影片
========================================================= */

#capital .capital-film {
  position: absolute;

  left: 34.5%;
  top: 26%;

  z-index: 11;

  width: min(650px, 36vw);

  box-sizing: border-box;

  padding: 16px;

  border:
    1px solid
    rgba(198, 157, 94, .24);

  background:
    rgba(4, 8, 14, .72);

  box-shadow:
    0 20px 60px
    rgba(0, 0, 0, .28);

  backdrop-filter:
    blur(4px);

  -webkit-backdrop-filter:
    blur(4px);
}


/* 上方小標 */

#capital .capital-film-head {
  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 12px;

  padding:
    0 3px
    10px;

  border-bottom:
    1px solid
    rgba(198, 157, 94, .12);
}


#capital .capital-film-head span {
  color:
    rgba(227, 186, 117, .72);

  font-size: 8px;

  letter-spacing:
    .28em;
}


#capital .capital-film-head em {
  color:
    rgba(190, 159, 111, .40);

  font-size: 7px;

  font-style: normal;

  letter-spacing:
    .20em;
}


/* 影片框 */

#capital .capital-film-screen {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  border:
    1px solid
    rgba(203, 165, 104, .18);

  background:
    #03070d;
}


#capital .capital-film-screen::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  box-shadow:
    inset 0 0 55px
    rgba(0, 0, 0, .34);
}


#capital .capital-film-screen video {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    brightness(.86)
    saturate(.92);
}


/* 下方資料 */

#capital .capital-film-foot {
  display: flex;

  justify-content: space-between;

  align-items: center;

  padding:
    12px 3px
    1px;
}


#capital .capital-film-foot span {
  color:
    rgba(238, 226, 205, .78);

  font-size: 11px;

  letter-spacing:
    .12em;
}


#capital .capital-film-foot em {
  color:
    rgba(199, 158, 95, .40);

  font-size: 7px;

  font-style: normal;

  letter-spacing:
    .18em;
}
/* =========================================================
   01｜京中別錄｜右側定位
========================================================= */

#capital .capital-featured-records,
#capital .capital-featured-records.capital-intel-board {
  left: auto !important;

  right: 8.5vw !important;

  top: 31% !important;

  width: min(335px, 19vw) !important;

  transform: none !important;
}
/* =========================================================
   01｜三欄版最終位置微調
========================================================= */

/* 左｜曜辰京錄：限制正文寬度，不准伸進中央影片 */
#capital .capital-copy {
  width: 28.5vw !important;
  max-width: 500px !important;
}


/* 中｜世界影片 */
#capital .capital-film {
  left: 33.8% !important;
  top: 23.5% !important;

  width: min(690px, 38vw) !important;
}


/* 右｜京中別錄 */
#capital .capital-featured-records,
#capital .capital-featured-records.capital-intel-board {
  left: auto !important;
  right: 8.2vw !important;

  top: 20.5% !important;

  width: min(315px, 18vw) !important;

  transform: none !important;
}
#capital
.capital-intel-board
.capital-featured-media {
  height: 210px !important;
}

#capital
.capital-intel-board
.capital-featured-stage {
  min-height: 305px !important;
}
/* =========================================================
   01｜影片可點擊提示
========================================================= */

#capital .capital-film-screen {
  cursor: pointer;
}

#capital .capital-film-screen::before {
  content: "CLICK TO VIEW · SOUND ON";

  position: absolute;
  right: 16px;
  bottom: 14px;

  z-index: 3;

  color: rgba(238, 205, 151, .72);

  font-size: 8px;
  letter-spacing: .18em;

  opacity: 0;

  transition: opacity .3s ease;

  pointer-events: none;
}

#capital .capital-film-screen:hover::before {
  opacity: 1;
}


/* =========================================================
   01｜影片放大層
========================================================= */

.capital-film-modal {
  position: fixed;
  inset: 0;

  z-index: 99999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 5vh 6vw;

  background:
    rgba(1, 4, 8, .92);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.capital-film-modal.open {
  display: flex;
}

.capital-film-modal-inner {
  position: relative;

  width: min(1280px, 88vw);

  border: 1px solid rgba(210, 168, 101, .28);

  background: #02060b;

  box-shadow:
    0 30px 100px rgba(0, 0, 0, .65);
}

.capital-film-modal video {
  display: block;

  width: 100%;
  height: auto;

  max-height: 82vh;

  background: #000;
}

.capital-film-modal-close {
  position: absolute;

  top: -44px;
  right: 0;

  width: 36px;
  height: 36px;

  border: 1px solid rgba(210, 168, 101, .32);

  background: rgba(4, 8, 14, .86);

  color: rgba(240, 219, 184, .9);

  font-size: 22px;

  cursor: pointer;
}
/* =========================================================
   01｜中央影片｜聲音按鈕
========================================================= */

#capital .capital-film-sound {
  position: absolute;

  right: 14px;
  bottom: 38px;

  z-index: 6;

  padding: 7px 10px;

  border:
    1px solid
    rgba(218, 177, 109, .26);

  background:
    rgba(3, 7, 13, .70);

  color:
    rgba(238, 211, 168, .82);

  font-family: inherit;

  font-size: 9px;

  letter-spacing: .12em;

  cursor: pointer;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  transition:
    color .25s ease,
    border-color .25s ease,
    background .25s ease,
    opacity .25s ease;
}


#capital .capital-film-sound:hover {
  color:
    rgba(255, 230, 186, 1);

  border-color:
    rgba(222, 176, 103, .58);

  background:
    rgba(20, 15, 14, .84);
}


#capital .capital-film-sound.is-sound-on {
  color:
    rgba(235, 180, 106, .96);

  border-color:
    rgba(173, 65, 48, .52);
}


#capital .capital-film-sound.is-ended {
  opacity: 0;

  pointer-events: none;
}
/* =========================================================
   03｜族紋 / 承紋 / 主紋 popup
   背景圖 + 中文排版最終版
========================================================= */


/* 整個畫面背景 */
.mark-detail-lightbox {
  background:
    linear-gradient(
      90deg,
      rgba(2, 5, 10, .76),
      rgba(2, 5, 10, .66) 50%,
      rgba(2, 5, 10, .78)
    ),
    url("assets/images/mark-detail-bg.png")
    center center / cover no-repeat
    !important;

  backdrop-filter:
    blur(3px) !important;

  -webkit-backdrop-filter:
    blur(3px) !important;
}


/* 中間資料框：加寬 */
.mark-detail-inner {
  width:
    min(960px, 86vw) !important;

  padding:
    52px 58px
    44px !important;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(133, 77, 39, .12),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(8, 11, 17, .94),
      rgba(3, 6, 11, .90)
    )
    !important;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .58),

    inset 0 0 60px
    rgba(177, 113, 50, .025)
    !important;
}


/* 主標題 */
.mark-detail-title {
  margin-bottom:
    14px !important;

  font-size:
    46px !important;

  line-height:
    1.15 !important;
}


/* 身分 */
.mark-detail-status {
  margin-bottom:
    26px !important;

  padding-bottom:
    20px !important;
}


/* =========================================================
   正文：不要再被鎖在 670px
========================================================= */

.mark-detail-text {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  font-size:
    17px !important;

  line-height:
    2 !important;

  letter-spacing:
    .025em !important;

  color:
    rgba(238, 229, 214, .86)
    !important;

  word-break:
    normal !important;

  line-break:
    strict !important;

  text-wrap:
    pretty;
}


/* 下方補充框 */
.mark-detail-extra {
  width:
    100% !important;

  margin-top:
    25px !important;

  padding:
    16px 20px !important;

  font-size:
    15px !important;

  line-height:
    1.9 !important;

  letter-spacing:
    .02em !important;

  word-break:
    normal !important;

  line-break:
    strict !important;

  text-wrap:
    pretty;

  background:
    linear-gradient(
      90deg,
      rgba(89, 34, 30, .22),
      rgba(50, 24, 25, .08) 68%,
      transparent
    )
    !important;
}


/* 底下 CLICK OUTSIDE */
.mark-detail-hint {
  margin-top:
    28px !important;
}
/* =========================================================
   03｜族紋 / 承紋 / 主紋 popup
   背景圖 + 中文排版最終版
========================================================= */


/* 整個畫面背景 */
.mark-detail-lightbox {
  background:
    linear-gradient(
      90deg,
      rgba(2, 5, 10, .76),
      rgba(2, 5, 10, .66) 50%,
      rgba(2, 5, 10, .78)
    ),
    url("assets/images/mark-detail-bg.png")
    center center / cover no-repeat
    !important;

  backdrop-filter:
    blur(3px) !important;

  -webkit-backdrop-filter:
    blur(3px) !important;
}


/* 中間資料框：加寬 */
.mark-detail-inner {
  width:
    min(960px, 86vw) !important;

  padding:
    52px 58px
    44px !important;

  background:
    radial-gradient(
      circle at 20% 0%,
      rgba(133, 77, 39, .12),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      rgba(8, 11, 17, .94),
      rgba(3, 6, 11, .90)
    )
    !important;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .58),

    inset 0 0 60px
    rgba(177, 113, 50, .025)
    !important;
}


/* 主標題 */
.mark-detail-title {
  margin-bottom:
    14px !important;

  font-size:
    46px !important;

  line-height:
    1.15 !important;
}


/* 身分 */
.mark-detail-status {
  margin-bottom:
    26px !important;

  padding-bottom:
    20px !important;
}


/* =========================================================
   正文：不要再被鎖在 670px
========================================================= */

.mark-detail-text {
  width:
    100% !important;

  max-width:
    none !important;

  margin:
    0 !important;

  font-size:
    17px !important;

  line-height:
    2 !important;

  letter-spacing:
    .025em !important;

  color:
    rgba(238, 229, 214, .86)
    !important;

  word-break:
    normal !important;

  line-break:
    strict !important;

  text-wrap:
    pretty;
}


/* 下方補充框 */
.mark-detail-extra {
  width:
    100% !important;

  margin-top:
    25px !important;

  padding:
    16px 20px !important;

  font-size:
    15px !important;

  line-height:
    1.9 !important;

  letter-spacing:
    .02em !important;

  word-break:
    normal !important;

  line-break:
    strict !important;

  text-wrap:
    pretty;

  background:
    linear-gradient(
      90deg,
      rgba(89, 34, 30, .22),
      rgba(50, 24, 25, .08) 68%,
      transparent
    )
    !important;
}


/* 底下 CLICK OUTSIDE */
.mark-detail-hint {
  margin-top:
    28px !important;
}
/* =========================================================
   04｜曜辰歲錄詳細彈窗
   背景壓暗＋資訊卡提亮＋霧面感
========================================================= */

.calendar-lightbox {
  background:
    linear-gradient(
      90deg,
      rgba(3, 7, 12, .72) 0%,
      rgba(4, 8, 14, .64) 50%,
      rgba(3, 7, 12, .76) 100%
    ),
    url("assets/images/calendar-detail-bg.png")
    center center / cover no-repeat
    !important;

  backdrop-filter:
    blur(2px) !important;

  -webkit-backdrop-filter:
    blur(2px) !important;
}


/* 中間資訊卡 */
.calendar-lightbox-inner {
  background:
    radial-gradient(
      circle at 20% 22%,
      rgba(142, 84, 50, .10),
      transparent 34%
    ),
    linear-gradient(
      135deg,
      rgba(26, 27, 31, .78) 0%,
      rgba(14, 18, 24, .76) 48%,
      rgba(8, 11, 17, .84) 100%
    )
    !important;

  border-color:
    rgba(211, 171, 105, .42)
    !important;

  box-shadow:
    0 28px 90px
    rgba(0, 0, 0, .48),

    0 0 40px
    rgba(118, 67, 44, .06),

    inset 0 1px 0
    rgba(255, 236, 204, .045),

    inset 0 0 70px
    rgba(184, 126, 69, .025)
    !important;

  backdrop-filter:
    blur(14px)
    saturate(.82)
    !important;

  -webkit-backdrop-filter:
    blur(14px)
    saturate(.82)
    !important;
}


/* 標題與文字提亮 */

.calendar-lightbox-date strong {
  color:
    rgba(250, 238, 216, .98)
    !important;
}

.calendar-lightbox-content h3 {
  color:
    rgba(249, 237, 216, .98)
    !important;
}

.calendar-lightbox-content > p {
  color:
    rgba(230, 220, 202, .84)
    !important;
}

.calendar-lightbox-content
.calendar-event-house {
  color:
    rgba(212, 171, 106, .78)
    !important;
}


/* STORY START */

.calendar-lightbox-content
.calendar-story-tag {
  opacity:
    .92;
}


/* 關閉按鈕 */

.calendar-lightbox-close {
  background:
    rgba(5, 8, 13, .34)
    !important;

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  border-color:
    rgba(213, 174, 107, .36)
    !important;
}
/* =========================================================
   05｜三藏內容｜真正全螢幕覆蓋
========================================================= */


/* 只要三藏其中一頁開啟，
   整個 05 section 提到全站最上層 */
#archives:has(.archive-content-layer.is-open) {
  z-index:
    5000 !important;

  overflow:
    visible !important;

  isolation:
    auto !important;
}


/* 三個內容層真正吃滿瀏覽器 */
#archives .archive-content-layer {
  position:
    fixed !important;

  inset:
    0 !important;

  width:
    100vw !important;

  height:
    100dvh !important;

  min-height:
    100dvh !important;

  z-index:
    6000 !important;

  margin:
    0 !important;

  box-sizing:
    border-box !important;
}


/* 開啟時 */
#archives .archive-content-layer.is-open {
  opacity:
    1 !important;

  visibility:
    visible !important;

  pointer-events:
    auto !important;
}


/* 關閉時 */
#archives .archive-content-layer:not(.is-open) {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}
/* =========================================================
   05｜三個內頁主框｜滿版尺寸
========================================================= */


/* 01｜畫卷 */
#archives
[data-archive-content="visual"]
.archive-visual-shell {
  width:
    calc(100vw - 36px)
    !important;

  height:
    calc(100dvh - 36px)
    !important;

  max-width:
    none !important;

  max-height:
    none !important;
}


/* 02｜聲藏 */
#archives
[data-archive-content="audio"]
.audio-archive-shell {
  width:
    calc(100vw - 36px)
    !important;

  height:
    calc(100dvh - 36px)
    !important;

  max-width:
    none !important;

  max-height:
    none !important;
}


/* 03｜秘藏 */
#archives
[data-archive-content="sealed"]
.sealed-vault {
  width:
    calc(100vw - 36px)
    !important;

  height:
    calc(100dvh - 36px)
    !important;

  max-width:
    none !important;

  max-height:
    none !important;
}
/* =========================================================
   04｜曜辰歲錄
   年份標記
========================================================= */

#calendar .calendar-era {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    13px;

  margin:
    -2px 0 14px;
}


#calendar .calendar-era span {
  color:
    rgba(216, 176, 111, .88);

  font-size:
    12px;

  letter-spacing:
    .16em;
}


#calendar .calendar-era i {
  width:
    34px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(198, 151, 87, .52),
      transparent
    );
}


#calendar .calendar-era em {
  color:
    rgba(178, 155, 119, .46);

  font-size:
    8px;

  font-style:
    normal;

  letter-spacing:
    .28em;
}
/* =========================================================
   05｜月下藏卷
   點擊爆光真正全螢幕滿版
========================================================= */


/* 爆光啟動時，05 暫時取消裁切 */
#archives:has(.archives-burst.is-active) {
  overflow:
    visible !important;

  clip-path:
    none !important;
}


/* 真正鎖死成瀏覽器全畫面 */
#archives .archives-burst {
  position:
    fixed !important;

  top:
    0 !important;

  right:
    0 !important;

  bottom:
    0 !important;

  left:
    0 !important;

  width:
    100vw !important;

  height:
    100vh !important;

  height:
    100dvh !important;

  max-width:
    none !important;

  max-height:
    none !important;

  margin:
    0 !important;

  padding:
    0 !important;

  z-index:
    99999 !important;

  pointer-events:
    none !important;

  transform:
    none !important;

  clip-path:
    none !important;

  overflow:
    visible !important;
}


/* 啟動時保持全屏 */
#archives .archives-burst.is-active {
  visibility:
    visible !important;

  animation:
    archiveScreenBurst
    .68s
    ease-out
    forwards
    !important;
}
/* =========================================================
   05｜全螢幕爆光
   burst 已搬到 body
========================================================= */

body > .archives-burst {
  position:
    fixed !important;

  inset:
    0 !important;

  width:
    100vw !important;

  height:
    100vh !important;

  height:
    100dvh !important;

  margin:
    0 !important;

  padding:
    0 !important;

  z-index:
    999999 !important;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none !important;

  overflow:
    visible !important;

  transform:
    none !important;

  clip-path:
    none !important;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 1) 0%,
      rgba(232, 241, 250, .98) 24%,
      rgba(196, 215, 232, .76) 47%,
      rgba(6, 9, 14, 0) 75%
    );
}


body > .archives-burst.is-active {
  visibility:
    visible !important;

  animation:
    archiveScreenBurst
    .68s
    ease-out
    forwards !important;
}
/* =========================================================
   05｜第一段白光
   原藏器內爆光改為真正全螢幕
========================================================= */


/* 關掉原本會被 05 裁切的圓形內爆光 */
#archives .archive-vessel-flash {
  animation:
    none !important;

  opacity:
    0 !important;

  visibility:
    hidden !important;
}


/* 新的前置全螢幕白光 */
body > .archives-preflash {
  position:
    fixed !important;

  inset:
    0 !important;

  width:
    100vw !important;

  height:
    100vh !important;

  height:
    100dvh !important;

  z-index:
    999998 !important;

  pointer-events:
    none !important;

  opacity:
    0;

  visibility:
    hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(248, 252, 255, .98) 0%,
      rgba(230, 240, 250, .86) 25%,
      rgba(190, 211, 231, .48) 52%,
      rgba(8, 12, 18, 0) 82%
    );
}


/* 點下藏器後立即啟動 */
body > .archives-preflash.is-active {
  visibility:
    visible !important;

  animation:
    archivePreFlash
    .42s
    ease-out
    forwards !important;
}


@keyframes archivePreFlash {

  0% {
    opacity:
      0;
  }

  28% {
    opacity:
      .28;
  }

  62% {
    opacity:
      .88;
  }

  100% {
    opacity:
      0;
  }

}
/* =========================================================
   INDEX｜背景音樂控制
========================================================= */

.entry-music-control {
  position: fixed;
  right: 34px;
  bottom: 30px;
  z-index: 120;

  display: flex;
  align-items: center;
  gap: 10px;

  padding:
    8px
    12px;

  border:
    1px solid
    rgba(190, 151, 90, .28);

  background:
    rgba(4, 7, 11, .46);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);
}


.entry-music-btn {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    rgba(222, 194, 145, .88);

  font-family:
    inherit;

  font-size:
    12px;

  line-height:
    1;

  cursor:
    pointer;

  transition:
    color .25s ease,
    opacity .25s ease,
    transform .25s ease;
}


.entry-music-btn:hover {
  color:
    rgba(247, 224, 183, 1);

  transform:
    translateY(-1px);
}


.entry-music-btn.is-muted {
  opacity:
    .42;
}


.entry-music-volume {
  width:
    84px;

  height:
    3px;

  cursor:
    pointer;

  accent-color:
    #af8953;
}
/* =========================================================
   01｜京中別錄總入口
========================================================= */

#capital
.capital-featured-head
.capital-featured-head-link {
  display: flex;

  align-items: flex-end;
  justify-content: space-between;

  width: 100%;

  color: inherit;
  text-decoration: none;

  cursor: pointer;
}


/* 英文小標 */

#capital
.capital-featured-head
.capital-featured-head-link
span {
  display: block;
}


/* 中文標題 */

#capital
.capital-featured-head
.capital-featured-head-link
h3 {
  color: inherit;
}


/* 右側 CHARACTER RECORD */

#capital
.capital-featured-head
.capital-featured-head-link
> em {
  margin-bottom: 3px;

  color:
    rgba(202, 169, 116, .46);

  font-size: 8px;

  font-style: normal;

  letter-spacing: .20em;
}


/* 滑過時輕微提亮 */

#capital
.capital-featured-head
.capital-featured-head-link:hover
h3 {
  color:
    rgba(255, 244, 224, 1);
}


#capital
.capital-featured-head
.capital-featured-head-link:hover
span,
#capital
.capital-featured-head
.capital-featured-head-link:hover
> em {
  color:
    rgba(220, 181, 116, .82);
}
/* =========================================================
   00｜官方聯動活動
========================================================= */

.event-section {
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow: hidden;

  padding:
    92px
    7vw
    110px;

  color:
    #ebe2d3;

  background:
    linear-gradient(
      90deg,
      rgba(5, 8, 13, .88) 0%,
      rgba(5, 8, 13, .70) 43%,
      rgba(5, 8, 13, .42) 72%,
      rgba(5, 8, 13, .66) 100%
    ),
    linear-gradient(
      180deg,
      rgba(5, 7, 11, .30) 0%,
      rgba(5, 7, 11, .10) 52%,
      rgba(5, 7, 11, .78) 100%
    ),
    url(
      "assets/images/event-bg.png"
    )
    center center /
    cover
    no-repeat;
}


.event-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background:
    linear-gradient(
      135deg,
      rgba(195, 158, 98, .08),
      transparent 32%,
      transparent 68%,
      rgba(195, 158, 98, .05)
    );
}


.event-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,.02),
      rgba(255,255,255,0) 58%
    );
}


.event-inner {
  position: relative;
  z-index: 2;
  width: min(1320px, 100%);
  margin: 0 auto;
}


.event-chapter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}


.event-number {
  color: rgba(212, 171, 102, .86);
  font-size: 26px;
  letter-spacing: .18em;
}


.event-chapter-line {
  flex: 0 0 88px;
  height: 1px;
  background:
    linear-gradient(
      90deg,
      rgba(198, 160, 103, .72),
      rgba(198, 160, 103, 0)
    );
}


.event-chapter-name {
  color: rgba(219, 206, 182, .68);
  font-size: 11px;
  letter-spacing: .42em;
}


.event-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .72fr);
  gap: 34px;
  align-items: stretch;
  margin-bottom: 56px;
}


.event-copy,
.event-highlight-card,
.event-reward-card,
.event-token-card,
.event-lucky-card,
.event-notice {
  border: 1px solid rgba(201, 162, 97, .18);
  background: rgba(9, 12, 18, .62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 14px 34px rgba(0,0,0,.20);
}


.event-copy {
  padding: 34px 34px 30px;
}


.event-kicker {
  margin: 0 0 14px;
  color: rgba(210, 168, 101, .72);
  font-size: 11px;
  letter-spacing: .34em;
}


.event-title {
  margin: 0;
  color: rgba(250, 239, 219, .98);
  font-size: clamp(40px, 5vw, 76px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: .14em;
}


.event-lead {
  margin: 22px 0 0;
  max-width: 760px;
  color: rgba(226, 218, 202, .82);
  font-size: 16px;
  line-height: 2;
  letter-spacing: .08em;
}


.event-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}


.event-meta-item {
  padding: 16px 18px;
  border: 1px solid rgba(202, 163, 98, .14);
  background: rgba(255,255,255,.02);
}


.event-meta-item span {
  display: block;
  margin-bottom: 7px;
  color: rgba(198, 170, 128, .58);
  font-size: 10px;
  letter-spacing: .26em;
}


.event-meta-item strong {
  color: rgba(246, 235, 215, .94);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .08em;
}


.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}


.event-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  padding: 14px 22px;
  border: 1px solid rgba(197, 159, 96, .38);
  background: rgba(255,255,255,.02);
  color: rgba(240, 228, 206, .92);
  text-decoration: none;
  font-size: 13px;
  letter-spacing: .18em;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    color .25s ease;
}


.event-button:hover {
  transform: translateY(-1px);
  border-color: rgba(219, 181, 114, .72);
  background: rgba(171, 108, 54, .10);
  color: rgba(255, 243, 220, 1);
}


.event-button.primary {
  background:
    linear-gradient(
      180deg,
      rgba(108, 48, 33, .34),
      rgba(39, 20, 18, .66)
    );
}


.event-highlight-card {
  padding: 28px 26px;
}


.event-highlight-en {
  display: block;
  margin-bottom: 14px;
  color: rgba(204, 167, 103, .58);
  font-size: 10px;
  letter-spacing: .28em;
}


.event-highlight-card h3 {
  margin: 0 0 18px;
  color: rgba(248, 235, 212, .98);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .12em;
}


.event-highlight-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(225, 214, 196, .82);
  line-height: 2;
}


.event-block {
  margin-top: 56px;
}


.event-block-head {
  margin-bottom: 18px;
}


.event-block-head span {
  display: block;
  margin-bottom: 8px;
  color: rgba(205, 169, 107, .60);
  font-size: 10px;
  letter-spacing: .30em;
}


.event-block-head h2 {
  margin: 0;
  color: rgba(249, 238, 219, .98);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: .14em;
}


.event-reward-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}


.event-reward-card {
  padding: 24px 22px 22px;
}


.event-rank-label {
  display: inline-block;
  margin-bottom: 12px;
  color: rgba(210, 169, 101, .72);
  font-size: 10px;
  letter-spacing: .30em;
}


.event-reward-card h3 {
  margin: 0 0 14px;
  color: rgba(248, 236, 216, .98);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .12em;
}


.event-reward-card ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(228, 216, 199, .82);
  line-height: 1.95;
}


.event-token-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}


.event-token-card,
.event-lucky-card,
.event-notice {
  padding: 24px 22px;
}


.event-token-card strong,
.event-lucky-card strong {
  display: block;
  margin-bottom: 10px;
  color: rgba(247, 235, 214, .96);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: .10em;
}


.event-token-card p,
.event-lucky-card p {
  margin: 0;
  color: rgba(226, 214, 197, .80);
  line-height: 1.9;
}


.event-notice ul {
  margin: 0;
  padding-left: 18px;
  color: rgba(224, 213, 196, .82);
  line-height: 2;
}


@media (max-width: 850px) {

  .event-hero {
    grid-template-columns: 1fr;
  }

  .event-reward-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-token-grid {
    grid-template-columns: 1fr;
  }

  .event-meta {
    grid-template-columns: 1fr;
  }

}


@media (max-width: 700px) {

  .event-section {
    padding: 92px 22px 72px;
  }

  .event-copy,
  .event-highlight-card,
  .event-reward-card,
  .event-token-card,
  .event-lucky-card,
  .event-notice {
    padding: 22px 18px;
  }

  .event-title {
    font-size: 38px;
  }

  .event-block-head h2 {
    font-size: 28px;
  }

  .event-reward-grid {
    grid-template-columns: 1fr;
  }

  .event-actions {
    flex-direction: column;
  }

  .event-button {
    width: 100%;
  }

}
/* =========================================================
   00｜TOUCHIE × 夜巫京｜官方聯動
========================================================= */

.event-section {
  position: relative;

  width: 100%;
  min-height: 100vh;

  overflow: hidden;

  padding:
    92px
    7vw
    110px;

  color:
    #ebe2d3;

  background:
    radial-gradient(
      circle at 14% 18%,
      rgba(115, 38, 34, .16),
      transparent 36%
    ),
    radial-gradient(
      circle at 82% 24%,
      rgba(153, 112, 57, .08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #070a10 0%,
      #090c13 48%,
      #06090e 100%
    );
}


.event-atmosphere {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(201, 158, 90, .025) 50%,
      transparent 100%
    );

  opacity:
    .8;
}


.event-inner {
  position: relative;
  z-index: 2;

  width:
    min(1420px, 100%);

  margin:
    0 auto;
}


/* =========================================================
   章節標
========================================================= */

.event-chapter {
  display: flex;
  align-items: center;

  gap:
    14px;

  margin-bottom:
    52px;

  color:
    rgba(207, 164, 98, .76);
}


.event-chapter span {
  font-size:
    12px;

  letter-spacing:
    .18em;
}


.event-chapter i {
  width:
    58px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(205, 159, 91, .72),
      transparent
    );
}


.event-chapter em {
  color:
    rgba(221, 210, 192, .50);

  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .38em;
}


/* =========================================================
   首屏
========================================================= */

.event-hero {
  display: grid;

  grid-template-columns:
    minmax(0, 1.45fr)
    minmax(300px, .65fr);

  gap:
    52px;

  align-items:
    stretch;

  min-height:
    560px;
}


.event-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    42px
    4vw;

  border-left:
    1px solid
    rgba(197, 153, 85, .22);
}


.event-brand {
  margin:
    0 0 20px;

  color:
    rgba(210, 166, 99, .82);

  font-size:
    12px;

  letter-spacing:
    .42em;
}


.event-title {
  margin:
    0;

  color:
    rgba(248, 237, 218, .98);

  font-size:
    clamp(
      52px,
      6.6vw,
      102px
    );

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    .16em;
}


.event-en {
  margin:
    17px 0 0;

  color:
    rgba(209, 193, 168, .44);

  font-size:
    10px;

  letter-spacing:
    .60em;
}


.event-divider {
  width:
    min(420px, 70%);

  height:
    1px;

  margin:
    30px 0;

  background:
    linear-gradient(
      90deg,
      rgba(199, 153, 84, .65),
      rgba(199, 153, 84, 0)
    );
}


.event-intro {
  max-width:
    720px;

  margin:
    0;

  color:
    rgba(224, 214, 198, .78);

  font-size:
    15px;

  line-height:
    2;

  letter-spacing:
    .08em;
}


.event-info {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    1px;

  margin-top:
    34px;

  background:
    rgba(199, 158, 94, .15);

  border:
    1px solid
    rgba(199, 158, 94, .15);
}


.event-info > div {
  padding:
    18px
    20px;

  background:
    rgba(7, 10, 15, .90);
}


.event-info span {
  display: block;

  margin-bottom:
    8px;

  color:
    rgba(199, 161, 103, .52);

  font-size:
    8px;

  letter-spacing:
    .28em;
}


.event-info strong {
  display: block;

  color:
    rgba(240, 228, 208, .94);

  font-size:
    13px;

  font-weight:
    400;

  letter-spacing:
    .10em;
}


.event-info small {
  display: block;

  margin-top:
    5px;

  color:
    rgba(220, 210, 193, .42);

  font-size:
    10px;
}


.event-status {
  color:
    rgba(219, 168, 91, .96)
    !important;
}


/* =========================================================
   活動主按鈕
========================================================= */

.event-main-link {
  display: inline-flex;

  align-items: center;

  gap:
    18px;

  width:
    fit-content;

  margin-top:
    28px;

  padding:
    13px
    20px;

  border:
    1px solid
    rgba(201, 157, 89, .40);

  color:
    rgba(239, 225, 203, .92);

  text-decoration:
    none;

  transition:
    .28s ease;
}


.event-main-link span {
  color:
    rgba(213, 170, 103, .82);

  font-size:
    9px;

  letter-spacing:
    .24em;
}


.event-main-link em {
  font-size:
    12px;

  font-style:
    normal;

  letter-spacing:
    .16em;
}


.event-main-link:hover {
  border-color:
    rgba(225, 180, 107, .80);

  background:
    rgba(124, 61, 38, .12);

  box-shadow:
    0 0 26px
    rgba(173, 105, 55, .10);
}


/* =========================================================
   右側活動摘要
========================================================= */

.event-summary {
  align-self:
    center;

  padding:
    34px
    30px;

  border:
    1px solid
    rgba(197, 153, 88, .18);

  background:
    linear-gradient(
      150deg,
      rgba(38, 18, 19, .60),
      rgba(6, 10, 16, .82)
    );

  backdrop-filter:
    blur(10px);
}


.event-summary-index {
  color:
    rgba(201, 157, 93, .56);

  font-size:
    8px;

  letter-spacing:
    .34em;
}


.event-summary h2 {
  margin:
    10px 0 8px;

  font-size:
    30px;

  font-weight:
    400;

  letter-spacing:
    .14em;
}


.event-summary > p {
  margin:
    0 0 28px;

  color:
    rgba(216, 204, 185, .52);

  font-size:
    11px;

  letter-spacing:
    .12em;
}


.event-summary-list > div {
  display: flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    13px 0;

  border-top:
    1px solid
    rgba(198, 156, 91, .12);
}


.event-summary-list span {
  color:
    rgba(202, 157, 92, .52);

  font-size:
    9px;
}


.event-summary-list strong {
  font-size:
    13px;

  font-weight:
    400;

  letter-spacing:
    .10em;
}


/* =========================================================
   共用區塊
========================================================= */

.event-section-block {
  margin-top:
    100px;
}


.event-block-head {
  display: grid;

  grid-template-columns:
    auto auto 1fr;

  align-items:
    end;

  column-gap:
    18px;

  margin-bottom:
    34px;
}


.event-block-head span {
  color:
    rgba(202, 159, 94, .58);

  font-size:
    8px;

  letter-spacing:
    .32em;
}


.event-block-head h2 {
  margin:
    0;

  color:
    rgba(245, 233, 213, .96);

  font-size:
    30px;

  font-weight:
    400;

  letter-spacing:
    .14em;
}


.event-block-head i {
  height:
    1px;

  margin-bottom:
    7px;

  background:
    linear-gradient(
      90deg,
      rgba(196, 151, 84, .34),
      transparent
    );
}


/* =========================================================
   排名
========================================================= */

.event-podium {
  display: grid;

  grid-template-columns:
    repeat(
      12,
      minmax(0, 1fr)
    );

  gap:
    18px;
}


.event-rank-card {
  min-height:
    250px;

  padding:
    28px;

  border:
    1px solid
    rgba(196, 153, 89, .16);

  background:
    rgba(8, 11, 17, .72);
}


.rank-first {
  grid-column:
    span 5;

  min-height:
    320px;

  background:
    radial-gradient(
      circle at top right,
      rgba(143, 66, 42, .18),
      transparent 42%
    ),
    rgba(8, 11, 17, .80);

  border-color:
    rgba(213, 166, 92, .34);
}


.rank-second {
  grid-column:
    span 3;
}


.rank-third {
  grid-column:
    span 4;
}


.rank-four-five {
  grid-column:
    6 / 13;
}


.event-rank-top {
  display: flex;

  justify-content:
    space-between;

  align-items:
    center;
}


.event-rank-top span {
  color:
    rgba(205, 162, 97, .58);

  font-size:
    8px;

  letter-spacing:
    .30em;
}


.event-rank-top strong {
  color:
    rgba(206, 160, 91, .40);

  font-size:
    22px;

  font-weight:
    400;
}


.event-rank-card h3 {
  margin:
    34px 0 18px;

  color:
    rgba(248, 236, 215, .98);

  font-size:
    28px;

  font-weight:
    400;

  letter-spacing:
    .14em;
}


.rank-first h3 {
  font-size:
    38px;
}


.event-rank-line {
  height:
    1px;

  margin-bottom:
    18px;

  background:
    linear-gradient(
      90deg,
      rgba(204, 158, 91, .46),
      transparent
    );
}


.event-rank-card ul {
  margin:
    0;

  padding-left:
    18px;

  color:
    rgba(224, 213, 195, .78);

  line-height:
    2;

  font-size:
    13px;
}


/* =========================================================
   收藏
========================================================= */

.event-collection-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    16px;
}


.event-collection-card {
  min-height:
    190px;

  padding:
    26px;

  border-top:
    1px solid
    rgba(206, 162, 96, .32);

  border-bottom:
    1px solid
    rgba(206, 162, 96, .11);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .025),
      transparent
    );
}


.event-collection-card span {
  color:
    rgba(201, 160, 98, .52);

  font-size:
    8px;

  letter-spacing:
    .25em;
}


.event-collection-card strong {
  display: block;

  margin-top:
    28px;

  color:
    rgba(244, 231, 211, .94);

  font-size:
    20px;

  font-weight:
    400;

  letter-spacing:
    .10em;
}


.event-collection-card p {
  margin:
    12px 0 0;

  color:
    rgba(217, 207, 191, .54);

  font-size:
    12px;

  line-height:
    1.8;
}


/* =========================================================
   五姓信物
========================================================= */

.event-house-tokens {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    );

  gap:
    1px;

  background:
    rgba(196, 153, 89, .13);
}


.event-house-tokens > div {
  position: relative;

  min-height:
    135px;

  display: flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  background:
    rgba(7, 10, 16, .94);
}


.event-house-tokens span {
  color:
    rgba(204, 162, 98, .48);

  font-size:
    8px;

  letter-spacing:
    .26em;
}


.event-house-tokens strong {
  margin-top:
    10px;

  color:
    rgba(241, 229, 210, .92);

  font-size:
    21px;

  font-weight:
    400;

  letter-spacing:
    .14em;
}


.event-house-tokens i {
  width:
    7px;

  height:
    7px;

  margin-top:
    16px;

  transform:
    rotate(45deg);

  border:
    1px solid
    rgba(202, 156, 88, .58);
}


.event-token-note {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    18px;

  margin-top:
    18px;
}


.event-token-note > div {
  padding:
    22px 24px;

  border:
    1px solid
    rgba(197, 153, 90, .14);
}


.event-token-note span {
  display:
    block;

  color:
    rgba(199, 159, 98, .50);

  font-size:
    8px;

  letter-spacing:
    .26em;
}


.event-token-note strong {
  display:
    block;

  margin-top:
    9px;

  color:
    rgba(238, 226, 207, .90);

  font-size:
    15px;

  font-weight:
    400;
}


.event-token-note em {
  display:
    block;

  margin-top:
    7px;

  color:
    rgba(214, 168, 98, .90);

  font-size:
    18px;

  font-style:
    normal;
}


/* =========================================================
   幸運獎
========================================================= */

.event-lucky {
  display:
    grid;

  grid-template-columns:
    1fr auto auto;

  align-items:
    center;

  gap:
    40px;

  padding:
    32px 38px;

  border:
    1px solid
    rgba(203, 159, 93, .20);

  background:
    linear-gradient(
      90deg,
      rgba(70, 27, 27, .22),
      rgba(8, 11, 17, .82)
    );
}


.event-lucky span {
  color:
    rgba(203, 161, 96, .52);

  font-size:
    8px;

  letter-spacing:
    .34em;
}


.event-lucky h2 {
  margin:
    7px 0 0;

  font-size:
    28px;

  font-weight:
    400;

  letter-spacing:
    .16em;
}


.event-lucky > strong {
  color:
    rgba(226, 181, 105, .94);

  font-size:
    48px;

  font-weight:
    300;
}


.event-lucky > strong small {
  font-size:
    12px;
}


.event-lucky > p {
  margin:
    0;

  color:
    rgba(220, 208, 190, .66);

  font-size:
    13px;
}


.event-lucky > p em {
  margin-left:
    8px;

  color:
    rgba(242, 226, 198, .96);

  font-size:
    20px;

  font-style:
    normal;
}


/* =========================================================
   規則
========================================================= */

.event-notice-content {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    40px;

  padding:
    28px 30px;

  border-top:
    1px solid
    rgba(198, 154, 88, .18);
}


.event-notice-content p {
  max-width:
    760px;

  margin:
    0;

  color:
    rgba(218, 207, 190, .62);

  line-height:
    1.9;

  font-size:
    12px;
}


.event-notice-content a {
  color:
    rgba(213, 171, 105, .82);

  text-align:
    right;

  text-decoration:
    none;

  font-size:
    9px;

  letter-spacing:
    .24em;
}


.event-notice-content a span {
  display:
    block;

  margin-top:
    7px;

  color:
    rgba(235, 221, 199, .74);

  font-size:
    11px;

  letter-spacing:
    .12em;
}


/* =========================================================
   00｜RWD
========================================================= */

@media (max-width: 850px) {

  .event-hero {
    grid-template-columns:
      1fr;
  }


  .event-podium {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .rank-first,
  .rank-second,
  .rank-third,
  .rank-four-five {
    grid-column:
      auto;
  }


  .event-collection-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (max-width: 720px) {

  .event-section {
    padding:
      80px
      24px;
  }


  .event-hero-copy {
    padding:
      28px 0;
  }


  .event-info {
    grid-template-columns:
      1fr;
  }


  .event-podium,
  .event-collection-grid,
  .event-house-tokens,
  .event-token-note {
    grid-template-columns:
      1fr;
  }


  .event-lucky {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }


  .event-notice-content {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  .event-notice-content a {
    text-align:
      left;
  }

}
/* =========================================================
   00｜官方聯動｜單頁精簡版
   最終覆蓋
========================================================= */

#event.event-compact {
  position: relative;

  width: 100%;
  height: 100vh;
  min-height: 760px;

  overflow: hidden;

  padding:
    64px
    8vw
    48px;

  color:
    #ebe2d3;

  background:
    url(
      "assets/images/event-bg.png"
    )
    center center /
    cover
    no-repeat;
}


/* 整張壓暗，保證文字可讀 */

#event .event-compact-shade {
  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(4, 7, 12, .91) 0%,
      rgba(4, 7, 12, .80) 37%,
      rgba(4, 7, 12, .66) 65%,
      rgba(4, 7, 12, .78) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 7, 12, .45) 0%,
      rgba(4, 7, 12, .12) 45%,
      rgba(4, 7, 12, .82) 100%
    );
}


/* =========================================================
   主版面
========================================================= */

#event .event-compact-inner {
  position: relative;
  z-index: 2;

  width:
    min(1420px, 100%);

  height: 100%;

  margin:
    0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, .90fr)
    minmax(0, 1.10fr);

  grid-template-rows:
    minmax(0, 1fr)
    auto;

  column-gap:
    58px;

  row-gap:
    28px;
}


/* =========================================================
   左側
========================================================= */

#event .event-compact-hero {
  display: flex;
  flex-direction: column;

  justify-content: center;

  min-width: 0;
}


#event .event-compact-chapter {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom:
    34px;
}


#event .event-compact-chapter span {
  color:
    rgba(213, 168, 98, .88);

  font-size:
    11px;

  letter-spacing:
    .16em;
}


#event .event-compact-chapter i {
  width:
    52px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(207, 160, 91, .68),
      transparent
    );
}


#event .event-compact-chapter em {
  color:
    rgba(224, 211, 190, .46);

  font-size:
    8px;

  font-style:
    normal;

  letter-spacing:
    .36em;
}


#event .event-compact-brand {
  margin:
    0 0 14px;

  color:
    rgba(213, 169, 102, .80);

  font-size:
    11px;

  letter-spacing:
    .40em;
}


#event .event-compact-title {
  margin: 0;

  color:
    rgba(249, 237, 216, .98);

  font-size:
    clamp(
      52px,
      5.4vw,
      88px
    );

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    .16em;
}


#event .event-compact-en {
  margin:
    14px 0 0;

  color:
    rgba(212, 198, 174, .46);

  font-size:
    8px;

  letter-spacing:
    .54em;
}


#event .event-compact-line {
  width:
    min(390px, 82%);

  height:
    1px;

  margin:
    25px 0;

  background:
    linear-gradient(
      90deg,
      rgba(203, 157, 89, .62),
      transparent
    );
}


#event .event-compact-intro {
  max-width:
    600px;

  margin: 0;

  color:
    rgba(227, 216, 198, .72);

  font-size:
    13px;

  line-height:
    1.9;

  letter-spacing:
    .08em;
}


/* =========================================================
   日期 / 狀態
========================================================= */

#event .event-compact-meta {
  display: grid;

  grid-template-columns:
    1fr
    .62fr;

  max-width:
    620px;

  margin-top:
    24px;

  border-top:
    1px solid
    rgba(199, 155, 89, .18);

  border-bottom:
    1px solid
    rgba(199, 155, 89, .12);
}


#event .event-compact-meta > div {
  padding:
    14px
    18px
    14px
    0;
}


#event .event-compact-meta > div + div {
  padding-left:
    20px;

  border-left:
    1px solid
    rgba(199, 155, 89, .13);
}


#event .event-compact-meta span {
  display: block;

  color:
    rgba(200, 160, 98, .52);

  font-size:
    7px;

  letter-spacing:
    .28em;
}


#event .event-compact-meta strong {
  display: block;

  margin-top:
    6px;

  color:
    rgba(241, 228, 208, .92);

  font-size:
    12px;

  font-weight:
    400;

  letter-spacing:
    .08em;
}


#event .event-compact-meta strong.is-open {
  color:
    rgba(223, 173, 97, .96);
}


#event .event-compact-meta small {
  display: block;

  margin-top:
    3px;

  color:
    rgba(220, 209, 191, .36);

  font-size:
    9px;
}


/* =========================================================
   活動按鈕
========================================================= */

#event .event-compact-enter {
  display: inline-flex;

  align-items: center;

  gap:
    16px;

  width:
    fit-content;

  margin-top:
    23px;

  padding:
    11px
    17px;

  border:
    1px solid
    rgba(205, 159, 91, .38);

  color:
    rgba(239, 225, 202, .90);

  text-decoration:
    none;

  background:
    rgba(8, 10, 15, .34);

  transition:
    .25s ease;
}


#event .event-compact-enter span {
  color:
    rgba(210, 166, 99, .76);

  font-size:
    7px;

  letter-spacing:
    .24em;
}


#event .event-compact-enter em {
  font-size:
    11px;

  font-style:
    normal;

  letter-spacing:
    .12em;
}


#event .event-compact-enter:hover {
  border-color:
    rgba(226, 181, 107, .78);

  background:
    rgba(105, 49, 31, .15);
}


/* =========================================================
   右側排名
========================================================= */

#event .event-compact-ranking {
  align-self: start;
  min-width: 0;
  padding-top: 72px;
}

/* =========================================================
   活動倒數
========================================================= */

#event .event-countdown-panel {
  margin-bottom: 22px;
  padding: 16px 18px 18px;

  border: 1px solid rgba(205, 159, 91, .22);

  background:
    radial-gradient(
      circle at 85% 12%,
      rgba(126, 47, 33, .16),
      transparent 40%
    ),
    rgba(5, 8, 13, .66);
}

#event .event-countdown-head span {
  display: block;

  color: rgba(201, 158, 94, .50);
  font-size: 7px;
  letter-spacing: .30em;
}

#event .event-countdown-head strong {
  display: block;
  margin-top: 6px;

  color: rgba(244, 231, 210, .96);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: .10em;
}

#event .event-countdown-head small {
  display: block;
  margin-top: 5px;

  color: rgba(220, 209, 191, .42);
  font-size: 10px;
  letter-spacing: .08em;
}

#event .event-countdown-flip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;

  margin-top: 16px;
}

#event .event-countdown-unit {
  padding: 12px 8px 10px;

  border: 1px solid rgba(198, 154, 89, .16);

  background:
    linear-gradient(
      180deg,
      rgba(43, 28, 23, .34) 0%,
      rgba(8, 10, 15, .82) 100%
    );

  text-align: center;
}

#event .event-countdown-unit b {
  display: block;

  color: rgba(232, 180, 101, .98);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: .06em;
}

#event .event-countdown-unit small {
  display: block;
  margin-top: 7px;

  color: rgba(223, 212, 194, .52);
  font-size: 9px;
  letter-spacing: .16em;
}

#event .event-compact-head {
  display: flex;

  align-items: flex-end;

  gap:
    18px;

  margin-bottom:
    17px;
}


#event .event-compact-head > div {
  flex: 0 0 auto;
}


#event .event-compact-head span {
  display: block;

  color:
    rgba(201, 158, 94, .52);

  font-size:
    7px;

  letter-spacing:
    .30em;
}


#event .event-compact-head h2 {
  margin:
    5px 0 0;

  color:
    rgba(244, 231, 210, .96);

  font-size:
    24px;

  font-weight:
    400;

  letter-spacing:
    .13em;
}


#event .event-compact-head i {
  flex: 1;

  height:
    1px;

  margin-bottom:
    6px;

  background:
    linear-gradient(
      90deg,
      rgba(200, 155, 88, .32),
      transparent
    );
}


/* 第一名 */

#event .event-compact-first {
  padding:
    20px
    23px;

  border:
    1px solid
    rgba(213, 165, 92, .30);

  background:
    radial-gradient(
      circle at 88% 12%,
      rgba(136, 55, 35, .18),
      transparent 38%
    ),
    rgba(5, 8, 13, .66);
}


#event .event-compact-rank-title {
  display: flex;

  align-items: center;

  justify-content:
    space-between;
}


#event .event-compact-rank-title span {
  color:
    rgba(211, 168, 101, .60);

  font-size:
    7px;

  letter-spacing:
    .30em;
}


#event .event-compact-rank-title strong {
  color:
    rgba(220, 171, 96, .46);

  font-size:
    20px;

  font-weight:
    400;
}


#event .event-compact-first-body {
  display: flex;

  align-items:
    baseline;

  justify-content:
    space-between;

  margin-top:
    15px;
}


#event .event-compact-first-body h3 {
  margin: 0;

  color:
    rgba(249, 236, 214, .98);

  font-size:
    30px;

  font-weight:
    400;

  letter-spacing:
    .14em;
}


#event .event-compact-first-body p {
  margin: 0;

  color:
    rgba(221, 207, 185, .62);

  font-size:
    11px;
}


#event .event-compact-first-body p strong {
  margin-right:
    5px;

  color:
    rgba(227, 176, 98, .98);

  font-size:
    29px;

  font-weight:
    300;
}


#event .event-compact-reward-tags {
  display: flex;

  flex-wrap: wrap;

  gap:
    7px;

  margin-top:
    17px;
}


#event .event-compact-reward-tags span {
  padding:
    6px
    9px;

  border:
    1px solid
    rgba(199, 155, 90, .17);

  color:
    rgba(226, 214, 196, .72);

  font-size:
    10px;

  letter-spacing:
    .07em;
}


/* 第二～五名 */

#event .event-compact-minor-ranks {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    10px;

  margin-top:
    10px;
}


#event .event-compact-minor-ranks article {
  position: relative;

  min-height:
    137px;

  padding:
    16px;

  border:
    1px solid
    rgba(198, 154, 89, .15);

  background:
    rgba(5, 8, 13, .62);
}


#event .event-compact-rank-en {
  display: block;

  color:
    rgba(201, 158, 95, .48);

  font-size:
    6px;

  letter-spacing:
    .25em;
}


#event .event-compact-rank-number {
  position: absolute;

  top:
    14px;

  right:
    14px;

  color:
    rgba(209, 161, 89, .35);

  font-size:
    15px;

  font-weight:
    400;
}


#event .event-compact-minor-ranks h3 {
  margin:
    15px 0 5px;

  color:
    rgba(242, 229, 208, .92);

  font-size:
    17px;

  font-weight:
    400;

  letter-spacing:
    .10em;
}


#event .event-compact-minor-ranks p {
  margin:
    0;

  color:
    rgba(221, 171, 97, .88);

  font-size:
    13px;
}


#event .event-compact-minor-ranks small {
  display: block;

  margin-top:
    7px;

  color:
    rgba(217, 206, 189, .50);

  font-size:
    9px;

  line-height:
    1.55;
}


/* =========================================================
   底部四欄
========================================================= */

#event .event-compact-footer {
  grid-column:
    1 / -1;

  display: grid;

  grid-template-columns:
    1fr
    .78fr
    1.16fr
    .92fr;

  border-top:
    1px solid
    rgba(201, 157, 92, .22);

  border-bottom:
    1px solid
    rgba(201, 157, 92, .12);

  background:
    rgba(4, 7, 11, .52);
}


#event .event-compact-foot-item {
  min-width: 0;

  padding:
    17px
    20px;
}


#event
.event-compact-foot-item
+
.event-compact-foot-item {
  border-left:
    1px solid
    rgba(199, 155, 89, .13);
}


#event .event-compact-foot-item > span {
  display: block;

  color:
    rgba(199, 158, 95, .46);

  font-size:
    6px;

  letter-spacing:
    .27em;
}


#event .event-compact-foot-item > strong {
  display: block;

  margin-top:
    6px;

  color:
    rgba(238, 226, 206, .88);

  font-size:
    14px;

  font-weight:
    400;

  letter-spacing:
    .10em;
}


#event .event-compact-foot-item p {
  margin:
    7px 0 0;

  color:
    rgba(215, 204, 187, .56);

  font-size:
    10px;

  line-height:
    1.6;
}


#event .event-compact-foot-item p em {
  color:
    rgba(219, 170, 96, .90);

  font-style:
    normal;
}


#event .event-compact-rules a {
  display: inline-block;

  margin-top:
    8px;

  color:
    rgba(216, 171, 102, .82);

  font-size:
    9px;

  text-decoration:
    none;

  letter-spacing:
    .10em;
}


/* =========================================================
   較矮桌機
========================================================= */

@media (min-width: 721px) and (max-width: 850px) and (max-height: 860px) {

  #event.event-compact {
    padding-top:
      42px;

    padding-bottom:
      34px;

    min-height:
      700px;
  }


  #event .event-compact-chapter {
    margin-bottom:
      22px;
  }


  #event .event-compact-title {
    font-size:
      clamp(
        48px,
        4.8vw,
        76px
      );
  }


  #event .event-compact-line {
    margin:
      18px 0;
  }


  #event .event-compact-meta {
    margin-top:
      17px;
  }


  #event .event-compact-enter {
    margin-top:
      17px;
  }

}


/* =========================================================
   手機
========================================================= */

@media (max-width: 720px) {

  #event.event-compact {
    height: auto;
    min-height: 100vh;

    overflow: visible;

    padding:
      72px
      22px
      56px;
  }


  #event .event-compact-inner {
    height: auto;

    display: block;
  }


  #event .event-compact-ranking {
  margin-top:
    58px;

  padding-top:
    0;
}


/* 活動倒數｜手機 */

#event .event-countdown-panel {
  margin-bottom:
    28px;

  padding:
    14px
    12px
    16px;
}


#event .event-countdown-head strong {
  font-size:
    18px;
}


#event .event-countdown-head small {
  font-size:
    9px;

  line-height:
    1.6;
}


#event .event-countdown-flip {
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    6px;

  margin-top:
    14px;
}


#event .event-countdown-unit {
  min-width:
    0;

  padding:
    10px
    3px
    9px;
}


#event .event-countdown-unit b {
  font-size:
    clamp(
      20px,
      7vw,
      28px
    );

  letter-spacing:
    0;
}


#event .event-countdown-unit small {
  margin-top:
    6px;

  font-size:
    8px;
}


  #event .event-compact-minor-ranks {
    grid-template-columns:
      1fr;
  }


  #event .event-compact-footer {
    grid-template-columns:
      1fr;

    margin-top:
      38px;
  }


  #event
  .event-compact-foot-item
  +
  .event-compact-foot-item {
    border-left: 0;

    border-top:
      1px solid
      rgba(199, 155, 89, .13);
  }

}
/* =========================================================
   00｜活動頁文字可讀性加強
========================================================= */

/* 左上章節 */
#event .event-compact-chapter span {
  font-size: 13px !important;
}

#event .event-compact-chapter em {
  font-size: 10px !important;

  color:
    rgba(229, 216, 194, .66) !important;
}


/* TOUCHIE × 夜巫京 */
#event .event-compact-brand {
  font-size: 13px !important;

  color:
    rgba(226, 181, 108, .92) !important;
}


/* OFFICIAL EVENT */
#event .event-compact-en {
  font-size: 10px !important;

  color:
    rgba(220, 205, 180, .64) !important;
}


/* 左側活動說明 */
#event .event-compact-intro {
  font-size: 15px !important;

  line-height: 1.9 !important;

  color:
    rgba(238, 227, 208, .88) !important;
}


/* PERIOD / STATUS */
#event .event-compact-meta span {
  font-size: 9px !important;

  color:
    rgba(218, 176, 108, .72) !important;
}


/* 日期 / NOW OPEN */
#event .event-compact-meta strong {
  font-size: 14px !important;

  color:
    rgba(246, 234, 215, .96) !important;
}


/* 活動期間 / 活動進行中 */
#event .event-compact-meta small {
  font-size: 11px !important;

  color:
    rgba(226, 215, 196, .62) !important;
}


/* 前往活動按鈕英文 */
#event .event-compact-enter span {
  font-size: 9px !important;

  color:
    rgba(222, 177, 105, .88) !important;
}


/* 前往 Touchie 活動 */
#event .event-compact-enter em {
  font-size: 13px !important;
}


/* =========================================================
   排名獎勵
========================================================= */

/* RANKING REWARDS */
#event .event-compact-head span {
  font-size: 9px !important;

  color:
    rgba(216, 172, 104, .72) !important;
}


/* FIRST PRIZE */
#event .event-compact-rank-title span {
  font-size: 9px !important;

  color:
    rgba(222, 177, 107, .76) !important;
}


/* 第一名獎勵標籤 */
#event .event-compact-reward-tags span {
  font-size: 11px !important;

  color:
    rgba(238, 226, 207, .88) !important;
}


/* SECOND / THIRD / FOURTH */
#event .event-compact-rank-en {
  font-size: 8px !important;

  color:
    rgba(218, 173, 104, .68) !important;
}


/* 3000 / 2000 / 1000 金幣 */
#event .event-compact-minor-ranks p {
  font-size: 14px !important;

  color:
    rgba(230, 180, 103, .96) !important;
}


/* 抱枕 / 頭像框等說明 */
#event .event-compact-minor-ranks small {
  font-size: 11px !important;

  line-height: 1.6 !important;

  color:
    rgba(231, 219, 200, .70) !important;
}


/* =========================================================
   底部四欄
========================================================= */

/* TOKEN REWARDS / LUCKY DRAW 等 */
#event .event-compact-foot-item > span {
  font-size: 8px !important;

  color:
    rgba(214, 170, 104, .66) !important;
}


/* 五姓信物 / 幸運獎 / 限定收藏 / 活動辦法 */
#event .event-compact-foot-item > strong {
  font-size: 16px !important;

  color:
    rgba(245, 232, 211, .96) !important;
}


/* 底部說明 */
#event .event-compact-foot-item p {
  font-size: 12px !important;

  color:
    rgba(230, 218, 199, .74) !important;
}


/* 底部金幣數字 */
#event .event-compact-foot-item p em {
  color:
    rgba(229, 178, 99, .98) !important;
}


/* 查看官方完整規則 */
#event .event-compact-rules a {
  font-size: 11px !important;

  color:
    rgba(226, 179, 105, .94) !important;
}
/* =========================================================
   00｜官方合作 LOGO
========================================================= */

#event .event-brand-lockup {
  display: flex;
  align-items: center;

  gap: 18px;

  width: fit-content;

  margin:
    0 0 28px;
}


#event .event-brand-logo {
  display: block;

  width: auto;

  object-fit: contain;

  filter:
    brightness(.96)
    drop-shadow(
      0 0 10px
      rgba(198, 153, 86, .08)
    );
}


/* Touchie Logo */

#event .event-brand-logo-touchie {
  max-width: 280px;
  max-height: 59px;
}


/* 夜巫京 Logo */

#event .event-brand-logo-ywj {
  max-width: 196px;
  max-height: 64px;
}


#event .event-brand-x {
  color:
    rgba(213, 170, 103, .82);

  font-size: 20px;

  font-family:
    Georgia,
    serif;
}


@media (max-width: 720px) {

  #event .event-brand-lockup {
    gap: 12px;
  }


  #event .event-brand-logo-touchie,
  #event .event-brand-logo-ywj {
    max-width: 118px;
    max-height: 38px;
  }

}
#event .event-brand-logo-touchie {
  max-width: 150px;
  max-height: 42px;
}


#event .event-brand-logo-ywj {
  max-width: 150px;
  max-height: 48px;
}
/* =========================================================
   02｜HOUSE RECORD＋CAST RECORD
   五姓世錄擴充版
   只追加，不覆蓋原本人物卷功能
========================================================= */


/* =========================================================
   01｜五姓世錄標題區｜京中人物簿入口
========================================================= */

#houses .houses-heading {
  position: relative !important;
}


.houses-cast-open {
  position: absolute;

  top: 10px;
  right: 0;

  display: flex;
  align-items: center;

  gap: 10px;

  padding:
    10px 14px;

  border:
    1px solid
    rgba(198, 158, 94, .22);

  background:
    rgba(4, 8, 14, .42);

  color:
    rgba(229, 212, 180, .74);

  cursor: pointer;

  backdrop-filter:
    blur(8px);

  transition:
    color .35s ease,
    border-color .35s ease,
    background .35s ease,
    transform .35s ease;
}


/* =========================================================
   02｜人物卷三頁籤
   CHARACTER / HOUSE RECORD / YOUR ROLE
========================================================= */

.character-dossier
.dossier-view-tabs {
  gap:
    14px !important;
}


.character-dossier
.dossier-view-tabs > i {
  width:
    24px !important;
}


.character-dossier
.dossier-view-tab {
  min-width:
    0;
}


.character-dossier
.dossier-view-tab span {
  white-space:
    nowrap;
}


.character-dossier
.dossier-view-tab em {
  white-space:
    nowrap;
}



/* =========================================================
   03｜HOUSE RECORD 顯示邏輯
========================================================= */

.dossier-house-view {
  position:
    absolute;

  top:
    92px;
  right:
    7vw;
  bottom:
    95px;
  left:
    8vw;

  z-index:
    22;

  display:
    grid;

  grid-template-columns:
    minmax(360px, 1.15fr)
    minmax(360px, .95fr)
    minmax(220px, .48fr);

  align-items:
    center;

  gap:
    4vw;

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transform:
    translateY(10px);

  transition:
    opacity .45s ease,
    visibility .45s ease,
    transform .45s ease;
}


.character-dossier.show-house
.dossier-house-view {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transform:
    translateY(0);
}



/* HOUSE RECORD 開啟時
   隱藏原本 CHARACTER */

.character-dossier.show-house
.dossier-copy,

.character-dossier.show-house
.dossier-character-wrap,

.character-dossier.show-house
.dossier-symbols {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}



/* HOUSE RECORD 開啟時
   YOUR ROLE 保持關閉 */

.character-dossier.show-house
.dossier-role-view {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}



/* YOUR ROLE 開啟時
   HOUSE RECORD 保持關閉 */

.character-dossier.show-role
.dossier-house-view {
  opacity:
    0 !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}



/* =========================================================
   04｜HOUSE RECORD｜左側正文
========================================================= */

.house-record-copy {
  position:
    relative;

  max-width:
    590px;
}


.house-record-kicker {
  margin:
    0 0 12px;

  color:
    rgba(198, 155, 89, .68);

  font-size:
    10px;

  letter-spacing:
    .32em;
}


.house-record-title {
  margin:
    0;

  color:
    rgba(244, 232, 208, .98);

  font-size:
    clamp(
      42px,
      4.6vw,
      76px
    );

  font-weight:
    400;

  letter-spacing:
    .10em;

  line-height:
    1.05;
}


.house-record-lead {
  position:
    relative;

  margin:
    22px 0 0;

  padding:
    0 0 20px;

  color:
    rgba(231, 206, 159, .88);

  font-size:
    17px;

  letter-spacing:
    .13em;

  line-height:
    1.9;
}


.house-record-lead::after {
  content:
    "";

  position:
    absolute;

  left:
    0;
  bottom:
    0;

  width:
    min(
      320px,
      78%
    );

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      rgba(211, 169, 101, .54),
      rgba(211, 169, 101, .08),
      transparent
    );
}


.house-record-text {
  margin:
    21px 0 0;

  max-width:
    570px;

  color:
    rgba(225, 216, 199, .74);

  font-size:
    15px;

  line-height:
    2.15;

  letter-spacing:
    .075em;
}



/* =========================================================
   05｜HOUSE RECORD｜中央資料格
========================================================= */

.house-record-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  align-content:
    center;

  border-top:
    1px solid
    rgba(203, 164, 99, .18);

  border-left:
    1px solid
    rgba(203, 164, 99, .10);
}


.house-record-item {
  position:
    relative;

  min-height:
    103px;

  padding:
    18px 20px;

  border-right:
    1px solid
    rgba(203, 164, 99, .10);

  border-bottom:
    1px solid
    rgba(203, 164, 99, .14);

  background:
    linear-gradient(
      145deg,
      rgba(19, 20, 24, .28),
      rgba(5, 8, 13, .15)
    );
}


.house-record-item::before {
  content:
    "";

  position:
    absolute;

  top:
    0;
  left:
    0;

  width:
    22px;

  height:
    1px;

  background:
    rgba(215, 168, 94, .58);
}


.house-record-item span {
  display:
    block;

  margin:
    0 0 11px;

  color:
    rgba(189, 145, 80, .64);

  font-size:
    8px;

  letter-spacing:
    .23em;
}


.house-record-item strong {
  display:
    block;

  color:
    rgba(235, 223, 203, .88);

  font-size:
    13px;

  font-weight:
    400;

  letter-spacing:
    .07em;

  line-height:
    1.65;
}



/* =========================================================
   06｜HOUSE RECORD｜右側族紋
========================================================= */

.house-record-seal {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    390px;

  padding:
    34px 18px;

  border-left:
    1px solid
    rgba(203, 163, 98, .16);

  text-align:
    center;
}


.house-record-seal::before,
.house-record-seal::after {
  content:
    "";

  position:
    absolute;

  left:
    50%;

  width:
    1px;

  height:
    54px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(205, 164, 101, .28),
      transparent
    );
}


.house-record-seal::before {
  top:
    0;
}


.house-record-seal::after {
  bottom:
    0;
}


.house-record-seal > span {
  margin:
    0 0 26px;

  color:
    rgba(196, 151, 84, .62);

  font-size:
    8px;

  letter-spacing:
    .28em;
}


.house-record-seal img {
  width:
    min(
      145px,
      70%
    );

  height:
    auto;

  object-fit:
    contain;

  filter:
    brightness(.92)
    saturate(.86)
    drop-shadow(
      0 0 22px
      rgba(195, 147, 77, .12)
    );
}


.house-record-seal strong {
  margin:
    24px 0 7px;

  color:
    rgba(239, 227, 207, .90);

  font-size:
    18px;

  font-weight:
    400;

  letter-spacing:
    .14em;
}


.house-record-seal em {
  color:
    rgba(188, 150, 91, .50);

  font-size:
    8px;

  font-style:
    normal;

  letter-spacing:
    .20em;
}



/* =========================================================
   07｜CAST RECORD｜全螢幕人物簿
========================================================= */

.cast-record {
  position:
    fixed;

  inset:
    0;

  z-index:
    1600;

  width:
    100%;

  height:
    100vh;

  overflow:
    hidden;

  background:
    #04070c;

  color:
    rgba(237, 226, 206, .94);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .45s ease,
    visibility .45s ease;
}


.cast-record.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


.cast-record-shade {
  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle at 70% 34%,
      rgba(113, 75, 39, .11),
      transparent 35%
    ),
    radial-gradient(
      circle at 16% 70%,
      rgba(55, 74, 95, .11),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #05080d 0%,
      #080b11 44%,
      #03060a 100%
    );
}



/* =========================================================
   08｜CAST RECORD｜關閉
========================================================= */

.cast-record-close {
  position:
    absolute;

  top:
    31px;
  right:
    43px;

  z-index:
    20;

  width:
    44px;
  height:
    44px;

  padding:
    0;

  border:
    1px solid
    rgba(198, 158, 94, .22);

  background:
    rgba(4, 7, 12, .38);

  color:
    rgba(230, 211, 176, .72);

  font-family:
    Georgia,
    serif;

  font-size:
    25px;

  line-height:
    40px;

  cursor:
    pointer;

  transition:
    .3s ease;
}


.cast-record-close:hover {
  color:
    #fff0d4;

  border-color:
    rgba(218, 174, 103, .62);

  background:
    rgba(81, 51, 27, .22);

  transform:
    rotate(90deg);
}



/* =========================================================
   09｜CAST RECORD｜標題
========================================================= */

.cast-record-head {
  position:
    absolute;

  z-index:
    5;

  top:
    52px;
  left:
    7vw;

  width:
    min(
      520px,
      42vw
    );
}


.cast-record-head p {
  margin:
    0 0 11px;

  color:
    rgba(196, 151, 83, .67);

  font-size:
    9px;

  letter-spacing:
    .32em;
}


.cast-record-head h2 {
  margin:
    0;

  color:
    rgba(243, 231, 211, .98);

  font-size:
    clamp(
      37px,
      3.6vw,
      62px
    );

  font-weight:
    400;

  letter-spacing:
    .12em;
}


.cast-record-head > span {
  display:
    block;

  margin:
    15px 0 0;

  color:
    rgba(218, 208, 190, .53);

  font-size:
    11px;

  line-height:
    1.8;

  letter-spacing:
    .08em;
}



/* =========================================================
   10｜CAST RECORD｜篩選列
========================================================= */

.cast-record-filters {
  position:
    absolute;

  z-index:
    6;

  top:
    192px;
  left:
    7vw;
  right:
    7vw;

  display:
    flex;

  align-items:
    center;

  gap:
    2px;

  padding:
    0 0 13px;

  border-bottom:
    1px solid
    rgba(200, 160, 96, .13);
}


.cast-filter {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;

  min-width:
    108px;

  padding:
    9px 15px 10px;

  border:
    0;

  background:
    transparent;

  color:
    rgba(214, 198, 168, .40);

  cursor:
    pointer;

  transition:
    color .3s ease,
    background .3s ease;
}


.cast-filter::after {
  content:
    "";

  position:
    absolute;

  right:
    14px;
  bottom:
    -14px;
  left:
    14px;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(221, 174, 99, .88),
      transparent
    );

  opacity:
    0;

  transition:
    opacity .3s ease;
}


.cast-filter span {
  font-size:
    8px;

  letter-spacing:
    .22em;

  color:
    rgba(191, 144, 77, .52);
}


.cast-filter em {
  font-style:
    normal;

  font-size:
    11px;

  letter-spacing:
    .08em;
}


.cast-filter:hover,
.cast-filter.active {
  color:
    rgba(242, 225, 193, .94);

  background:
    rgba(106, 73, 39, .08);
}


.cast-filter.active::after {
  opacity:
    1;
}



/* =========================================================
   11｜CAST RECORD｜主內容
========================================================= */

.cast-record-body {
  position:
    absolute;

  z-index:
    5;

  top:
    256px;
  right:
    7vw;
  bottom:
    54px;
  left:
    7vw;

  display:
    grid;

  grid-template-columns:
    minmax(420px, .92fr)
    minmax(460px, 1.08fr);

  gap:
    48px;

  min-height:
    0;
}



/* =========================================================
   12｜人物列表
========================================================= */

.cast-record-list {
  min-height:
    0;

  overflow-y:
    auto;

  padding:
    0 14px 20px 0;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(181, 137, 77, .30)
    transparent;
}


.cast-record-list::-webkit-scrollbar {
  width:
    5px;
}


.cast-record-list::-webkit-scrollbar-track {
  background:
    transparent;
}


.cast-record-list::-webkit-scrollbar-thumb {
  background:
    rgba(181, 137, 77, .28);
}


.cast-card {
  position:
    relative;

  display:
    grid;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    auto;

  align-items:
    center;

  width:
    100%;

  min-height:
    90px;

  padding:
    15px 16px;

  border:
    0;

  border-bottom:
    1px solid
    rgba(196, 158, 95, .10);

  background:
    transparent;

  color:
    inherit;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background .28s ease,
    border-color .28s ease;
}


.cast-card[hidden] {
  display:
    none !important;
}


.cast-card::before {
  content:
    "";

  position:
    absolute;

  top:
    15px;
  bottom:
    15px;
  left:
    0;

  width:
    1px;

  background:
    rgba(216, 169, 94, .80);

  opacity:
    0;

  transition:
    opacity .28s ease;
}


.cast-card:hover,
.cast-card.active {
  background:
    linear-gradient(
      90deg,
      rgba(116, 75, 37, .12),
      rgba(35, 27, 20, .04),
      transparent
    );

  border-color:
    rgba(202, 161, 96, .22);
}


.cast-card.active::before {
  opacity:
    1;
}


.cast-card-index {
  color:
    rgba(192, 147, 80, .46);

  font-family:
    Georgia,
    serif;

  font-size:
    12px;
}


.cast-card > div {
  min-width:
    0;
}


.cast-card > div > strong {
  display:
    block;

  margin:
    0 0 6px;

  color:
    rgba(239, 226, 203, .90);

  font-size:
    16px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}


.cast-card p {
  margin:
    0 0 5px;

  color:
    rgba(219, 204, 178, .68);

  font-size:
    11px;

  letter-spacing:
    .06em;
}


.cast-card small {
  display:
    block;

  overflow:
    hidden;

  color:
    rgba(198, 189, 172, .42);

  font-size:
    9px;

  letter-spacing:
    .05em;

  white-space:
    nowrap;

  text-overflow:
    ellipsis;
}


.cast-card > em {
  margin-left:
    18px;

  color:
    rgba(197, 151, 82, .58);

  font-size:
    9px;

  font-style:
    normal;

  letter-spacing:
    .08em;

  white-space:
    nowrap;
}



/* =========================================================
   13｜人物詳細資料
========================================================= */

.cast-record-detail {
  position:
    relative;

  min-height:
    0;

  overflow-y:
    auto;

  padding:
    38px 42px 40px;

  border-left:
    1px solid
    rgba(203, 163, 98, .13);

  background:
    linear-gradient(
      145deg,
      rgba(13, 16, 21, .42),
      rgba(4, 7, 11, .18)
    );
}


.cast-detail-back {
  display:
    none;
}


.cast-detail-kicker {
  margin:
    0 0 12px;

  color:
    rgba(194, 147, 80, .62);

  font-size:
    9px;

  letter-spacing:
    .28em;
}


.cast-record-detail h3 {
  margin:
    0;

  color:
    rgba(245, 232, 208, .98);

  font-size:
    clamp(
      35px,
      3.5vw,
      58px
    );

  font-weight:
    400;

  letter-spacing:
    .12em;
}


.cast-detail-meta {
  margin:
    10px 0 0;

  color:
    rgba(197, 184, 162, .50);

  font-size:
    10px;

  letter-spacing:
    .13em;
}


.cast-detail-role {
  display:
    block;

  margin:
    25px 0 30px;

  color:
    rgba(231, 202, 151, .90);

  font-size:
    15px;

  font-weight:
    400;

  letter-spacing:
    .12em;
}


.cast-detail-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    rgba(201, 161, 96, .16);

  border-left:
    1px solid
    rgba(201, 161, 96, .09);
}


.cast-detail-grid > div {
  min-height:
    91px;

  padding:
    16px 18px;

  border-right:
    1px solid
    rgba(201, 161, 96, .09);

  border-bottom:
    1px solid
    rgba(201, 161, 96, .13);
}


.cast-detail-grid span {
  display:
    block;

  margin:
    0 0 10px;

  color:
    rgba(190, 143, 78, .56);

  font-size:
    8px;

  letter-spacing:
    .21em;
}


.cast-detail-grid strong {
  color:
    rgba(231, 219, 198, .80);

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.65;

  letter-spacing:
    .07em;
}


.cast-detail-line {
  width:
    100%;

  height:
    1px;

  margin:
    32px 0 26px;

  background:
    linear-gradient(
      90deg,
      rgba(207, 164, 96, .35),
      rgba(207, 164, 96, .04),
      transparent
    );
}


.cast-detail-profile {
  margin:
    0;

  max-width:
    660px;

  color:
    rgba(223, 214, 197, .72);

  font-size:
    15px;

  line-height:
    2.1;

  letter-spacing:
    .07em;
}



/* =========================================================
   14｜中型螢幕
========================================================= */

@media ( max-width: 850px ) {

  .dossier-house-view {
    grid-template-columns:
      minmax(330px, 1.15fr)
      minmax(340px, 1fr);

    gap:
      34px;
  }


  .house-record-seal {
    display:
      none;
  }


  .cast-record-body {
    grid-template-columns:
      minmax(360px, .85fr)
      minmax(420px, 1.15fr);

    gap:
      30px;
  }


  .cast-record-filters {
    overflow-x:
      auto;

    scrollbar-width:
      none;
  }


  .cast-record-filters::-webkit-scrollbar {
    display:
      none;
  }


  .cast-filter {
    flex:
      0 0 auto;
  }

}



/* =========================================================
   15｜手機
========================================================= */

@media ( max-width: 850px ) {

  .houses-cast-open {
    position:
      relative;

    top:
      auto;
    right:
      auto;

    width:
      fit-content;

    margin:
      22px auto 0;
  }


  .character-dossier
  .dossier-view-tabs {
    left:
      22px !important;

    right:
      22px !important;

    bottom:
      25px !important;

    display:
      flex;

    justify-content:
      center !important;

    gap:
      6px !important;
  }


  .character-dossier
  .dossier-view-tabs > i {
    width:
      10px !important;
  }


  .character-dossier
  .dossier-view-tab {
    padding:
      6px 2px;
  }


  .character-dossier
  .dossier-view-tab span {
    font-size:
      7px !important;
  }


  .character-dossier
  .dossier-view-tab em {
    font-size:
      10px !important;
  }


  .dossier-house-view {
    top:
      74px;
    right:
      22px;
    bottom:
      80px;
    left:
      22px;

    display:
      block;

    overflow-y:
      auto;

    padding:
      18px 0 40px;
  }


  .house-record-copy {
    max-width:
      none;
  }


  .house-record-title {
    font-size:
      42px;
  }


  .house-record-lead {
    font-size:
      14px;
  }


  .house-record-text {
    font-size:
      13px;

    line-height:
      2;
  }


  .house-record-grid {
    margin:
      31px 0 0;

    grid-template-columns:
      1fr;
  }


  .house-record-item {
    min-height:
      auto;
  }


  .house-record-seal {
    display:
      none;
  }


  /* 人物簿 */

  .cast-record {
    overflow:
      hidden;
  }


  .cast-record-close {
    top:
      18px;
    right:
      18px;

    width:
      38px;
    height:
      38px;

    line-height:
      34px;
  }


  .cast-record-head {
    top:
      28px;
    left:
      22px;

    width:
      calc(
        100% - 90px
      );
  }


  .cast-record-head h2 {
    font-size:
      34px;
  }


  .cast-record-head > span {
    display:
      none;
  }


  .cast-record-filters {
    top:
      116px;
    right:
      0;
    left:
      0;

    padding:
      0 15px 12px;

    overflow-x:
      auto;
  }


  .cast-filter {
    min-width:
      92px;

    padding:
      8px 10px;
  }


  .cast-record-body {
    top:
      174px;
    right:
      0;
    bottom:
      0;
    left:
      0;

    display:
      block;
  }


  .cast-record-list {
    height:
      100%;

    padding:
      0 18px 32px;
  }


  .cast-card {
    grid-template-columns:
      38px
      minmax(0, 1fr);

    min-height:
      88px;

    padding:
      13px 10px;
  }


  .cast-card > em {
    display:
      none;
  }


  .cast-record-detail {
    position:
      absolute;

    inset:
      0;

    z-index:
      12;

    padding:
      25px 24px 60px;

    border:
      0;

    background:
      #06090e;

    transform:
      translateX(100%);

    opacity:
      0;

    visibility:
      hidden;

    pointer-events:
      none;

    transition:
      transform .38s ease,
      opacity .38s ease,
      visibility .38s ease;
  }


  .cast-record-detail.is-mobile-open {
    transform:
      translateX(0);

    opacity:
      1;

    visibility:
      visible;

    pointer-events:
      auto;
  }


  .cast-detail-back {
    display:
      inline-block;

    margin:
      0 0 26px;

    padding:
      0;

    border:
      0;

    background:
      transparent;

    color:
      rgba(213, 169, 100, .78);

    font-size:
      11px;

    letter-spacing:
      .10em;

    cursor:
      pointer;
  }


  .cast-record-detail h3 {
    font-size:
      39px;
  }


  .cast-detail-grid {
    grid-template-columns:
      1fr;

    margin-top:
      24px;
  }


  .cast-detail-grid > div {
    min-height:
      auto;
  }


  .cast-detail-profile {
    font-size:
      13px;

    line-height:
      2;
  }

}



/* =========================================================
   16｜矮螢幕
========================================================= */

@media (min-width: 851px) and (max-width: 850px) and (max-height: 820px) {

  .dossier-house-view {
    top:
      78px;

    bottom:
      78px;
  }


  .house-record-title {
    font-size:
      48px;
  }


  .house-record-lead {
    margin-top:
      14px;

    padding-bottom:
      13px;
  }


  .house-record-text {
    margin-top:
      15px;

    font-size:
      13px;

    line-height:
      1.9;
  }


  .house-record-item {
    min-height:
      82px;

    padding:
      13px 16px;
  }


  .house-record-seal {
    min-height:
      310px;
  }


  .cast-record-head {
    top:
      32px;
  }


  .cast-record-head h2 {
    font-size:
      42px;
  }


  .cast-record-head > span {
    margin-top:
      8px;
  }


  .cast-record-filters {
    top:
      145px;
  }


  .cast-record-body {
    top:
      203px;
    bottom:
      30px;
  }


  .cast-card {
    min-height:
      72px;

    padding:
      10px 14px;
  }


  .cast-record-detail {
    padding:
      25px 35px;
  }

}
/* 06｜京中人物 */

.house-base-cast {
  object-position: center center;
}
/* =========================================================
   京中人物簿｜右側詳情區
========================================================= */

.cast-detail-panel {
  display: flex;
  flex-direction: column;
}

.cast-detail-kicker {
  margin: 0 0 16px;
  color: rgba(196, 160, 102, 0.62);
  font-size: 10px;
  letter-spacing: 0.28em;
}

.cast-detail-name {
  margin: 0;
  color: #f3e7cf;
  font-size: clamp(42px, 4vw, 72px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: 0.08em;
}

.cast-detail-meta {
  margin: 18px 0 0;
  color: rgba(214, 198, 168, 0.54);
  font-size: 13px;
  letter-spacing: 0.08em;
}

.cast-detail-role {
  margin: 18px 0 30px;
  color: #d8aa5e;
  font-size: 18px;
  letter-spacing: 0.06em;
}

.cast-detail-body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-bottom: 28px;
}

.cast-portrait-frame {
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid rgba(198, 159, 94, 0.16);
  background:
    linear-gradient(
      180deg,
      rgba(10, 14, 22, 0.72),
      rgba(4, 7, 12, 0.92)
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.02),
    0 12px 32px rgba(0,0,0,0.22);
}

.cast-portrait-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.cast-detail-side {
  min-width: 0;
}

.cast-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid rgba(198, 159, 94, 0.12);
  border-left: 1px solid rgba(198, 159, 94, 0.12);
}

.cast-info-item {
  min-height: 92px;
  padding: 18px 18px 16px;
  border-right: 1px solid rgba(198, 159, 94, 0.12);
  border-bottom: 1px solid rgba(198, 159, 94, 0.12);
}

.cast-info-label {
  margin: 0 0 10px;
  color: rgba(196, 160, 102, 0.54);
  font-size: 10px;
  letter-spacing: 0.22em;
}

.cast-info-value {
  margin: 0;
  color: #f0e3ca;
  font-size: 15px;
  line-height: 1.8;
}

.cast-detail-summary {
  padding-top: 26px;
  border-top: 1px solid rgba(198, 159, 94, 0.14);
  color: rgba(229, 221, 208, 0.76);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
}

/* 手機 */
@media (max-width: 850px) {
  .cast-detail-body {
    grid-template-columns: 1fr;
  }

  .cast-portrait-frame {
    max-width: 340px;
  }

  .cast-info-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   CAST RECORD｜人物立繪版詳情（新版）
   左邊資訊／右邊人物大圖
========================================================= */

.cast-detail-main {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(320px, 430px);
  gap: 34px;
  align-items: start;
  margin-top: 30px;
}


/* =========================================================
   左邊資訊
========================================================= */

.cast-detail-info {
  order: 1;
  min-width: 0;
}

.cast-detail-main
.cast-detail-grid {
  margin-top: 0;
}

.cast-detail-main
.cast-detail-profile {
  max-width: none;
}


/* =========================================================
   右邊人物立繪
   不另外加框、不做卡片感
========================================================= */

.cast-detail-portrait {
  order: 2;

  position: relative;

  width: min(420px, 100%);
  height: min(620px, 70vh);

  margin: 0;
  margin-left: auto;

  overflow: visible;

  border: 0;
  background: transparent;
  box-shadow: none;
}

.cast-detail-portrait::after {
  display: none;
}

.cast-detail-portrait-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center bottom;

  filter:
    drop-shadow(
      0 18px 28px
      rgba(0, 0, 0, .28)
    );
}


/* 沒有圖時的提示 */
.cast-detail-portrait-empty {
  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 8px;

  color:
    rgba(199, 159, 95, .34);

  text-align: center;
}

.cast-detail-portrait-empty span {
  font-size: 8px;
  letter-spacing: .30em;
}

.cast-detail-portrait-empty em {
  color:
    rgba(220, 208, 187, .25);

  font-size: 12px;
  font-style: normal;
  letter-spacing: .16em;
}

.cast-detail-portrait:not(.is-missing)
.cast-detail-portrait-empty {
  opacity: 0;
}


/* =========================================================
   可選：讓右側詳情欄稍微更寬
   如果你覺得現在還是太擠，就保留這段
========================================================= */

.cast-record-body {
  grid-template-columns:
    minmax(420px, .86fr)
    minmax(760px, 1.14fr);
}


/* =========================================================
   手機
========================================================= */

@media (max-width: 850px) {

  .cast-detail-main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(260px, 340px);
    gap: 24px;
  }

  .cast-detail-portrait {
    width: min(340px, 100%);
    height: min(520px, 62vh);
  }

}

@media (max-width: 850px) {

  .cast-detail-main {
    display: block;
    margin-top: 22px;
  }

  .cast-detail-portrait {
    width: min(280px, 76vw);
    height: 390px;

    margin:
      0 auto 26px;
  }

}


/* =========================================================
   人物立繪框
========================================================= */

.cast-detail-portrait {
  position: relative;

  width: 100%;
  height: min(430px, 47vh);

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(201, 161, 96, .14);

  background:
    radial-gradient(
      circle at 50% 36%,
      rgba(98, 78, 54, .12),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(13, 17, 24, .42),
      rgba(4, 7, 12, .72)
    );
}


/* 很淡的底部金線 */

.cast-detail-portrait::after {
  content: "";

  position: absolute;

  right: 18px;
  bottom: 17px;
  left: 18px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(205, 161, 92, .26),
      transparent
    );

  pointer-events: none;
}


/* =========================================================
   透明 PNG 立繪
   完整保留人物，不裁身體
========================================================= */

.cast-detail-portrait-image {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: contain;

  object-position:
    center bottom;

  max-width: none;

  filter:
    drop-shadow(
      0 14px 22px
      rgba(0, 0, 0, .30)
    );
}


/* =========================================================
   尚未放圖片
========================================================= */

.cast-detail-portrait-empty {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 8px;

  color:
    rgba(199, 159, 95, .34);

  text-align: center;
}


.cast-detail-portrait-empty span {
  font-size: 8px;

  letter-spacing:
    .30em;
}


.cast-detail-portrait-empty em {
  color:
    rgba(220, 208, 187, .25);

  font-size: 12px;

  font-style: normal;

  letter-spacing:
    .16em;
}


.cast-detail-portrait:not(.is-missing)
.cast-detail-portrait-empty {
  opacity: 0;
}


/* =========================================================
   右側人物資料
========================================================= */

.cast-detail-info {
  min-width: 0;
}


.cast-detail-main
.cast-detail-grid {
  margin-top: 0;
}


.cast-detail-main
.cast-detail-profile {
  max-width: none;
}


/* =========================================================
   中型螢幕
========================================================= */

@media ( max-width: 850px ) {

  .cast-detail-main {
    grid-template-columns:
      minmax(190px, 240px)
      minmax(0, 1fr);

    gap: 24px;
  }


  .cast-detail-portrait {
    height: min(390px, 44vh);
  }

}


/* =========================================================
   手機
========================================================= */

@media ( max-width: 850px ) {

  .cast-detail-main {
    display: block;

    margin-top: 22px;
  }


  .cast-detail-portrait {
    width: min(300px, 78vw);
    height: 390px;

    margin:
      0 auto 28px;
  }


  .cast-detail-info {
    width: 100%;
  }

}

/* =========================================================
   CAST RECORD｜人物詳情最終版
   左側資料／右側大立繪／人物無外框
========================================================= */


/* =========================================================
   整體人物簿左右比例
========================================================= */

.cast-record-body {
  grid-template-columns:
    minmax(420px, .82fr)
    minmax(820px, 1.18fr) !important;
}


/* =========================================================
   詳情區內部
   左：文字資料
   右：人物立繪
========================================================= */

.cast-detail-main {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(430px, 540px) !important;

  gap: 38px !important;

  align-items: start !important;

  margin-top: 30px !important;
}


/* =========================================================
   左側文字資料
========================================================= */

.cast-detail-info {
  order: 1 !important;

  min-width: 0 !important;

  padding-top: 0 !important;
}


.cast-detail-main
.cast-detail-grid {
  margin-top: 0 !important;
}


.cast-detail-main
.cast-detail-profile {
  max-width: none !important;
}


/* =========================================================
   右側人物展示區
   完全不要卡片框
========================================================= */

.cast-detail-portrait {
  order: 2 !important;

  position: relative !important;

  display: flex !important;

  align-items: flex-start !important;
  justify-content: center !important;

  width: 100% !important;
  max-width: 540px !important;

  height: 690px !important;

  margin:
    -115px
    0
    0
    auto !important;

  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* 移除舊版人物框的裝飾線 */

.cast-detail-portrait::before,
.cast-detail-portrait::after {
  content: none !important;

  display: none !important;

  border: 0 !important;

  background: none !important;

  box-shadow: none !important;
}


/* =========================================================
   人物圖片
   放大＋上移
========================================================= */

.cast-detail-portrait-image {
  position: absolute !important;

  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;

  object-position:
    center top !important;

  transform:
    scale(1.12) !important;

  transform-origin:
    center top !important;

  border: 0 !important;
  outline: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  filter:
    drop-shadow(
      0 18px 28px
      rgba(0, 0, 0, .24)
    ) !important;
}


/* =========================================================
   沒有立繪時才顯示提示
========================================================= */

.cast-detail-portrait-empty {
  position: absolute !important;

  inset: 0 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 8px !important;

  border: 0 !important;

  background: transparent !important;

  color:
    rgba(199, 159, 95, .34) !important;

  text-align: center !important;
}


.cast-detail-portrait-empty span {
  font-size: 8px !important;

  letter-spacing:
    .30em !important;
}


.cast-detail-portrait-empty em {
  color:
    rgba(220, 208, 187, .25) !important;

  font-size: 12px !important;

  font-style: normal !important;

  letter-spacing:
    .16em !important;
}


.cast-detail-portrait:not(.is-missing)
.cast-detail-portrait-empty {
  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;
}


/* =========================================================
   右側詳情本體不要形成第二個卡框
========================================================= */

.cast-record-detail {
  border-right: 0 !important;
}


/* =========================================================
   1450px 以下
========================================================= */

@media ( max-width: 850px ) {

  .cast-record-body {
    grid-template-columns:
      minmax(380px, .84fr)
      minmax(700px, 1.16fr) !important;
  }


  .cast-detail-main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(360px, 450px) !important;

    gap: 28px !important;
  }


  .cast-detail-portrait {
    max-width: 450px !important;

    height: 620px !important;

    margin-top:
      -90px !important;
  }


  .cast-detail-portrait-image {
    transform:
      scale(1.08) !important;
  }

}


/* =========================================================
   1250px 以下
========================================================= */

@media ( max-width: 850px ) {

  .cast-detail-main {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(300px, 380px) !important;

    gap: 22px !important;
  }


  .cast-detail-portrait {
    max-width: 380px !important;

    height: 540px !important;

    margin-top:
      -65px !important;
  }


  .cast-detail-portrait-image {
    transform:
      scale(1.04) !important;
  }

}


/* =========================================================
   手機
========================================================= */

@media ( max-width: 850px ) {

  .cast-detail-main {
    display: block !important;

    margin-top: 22px !important;
  }


  .cast-detail-portrait {
    width:
      min(
        320px,
        82vw
      ) !important;

    max-width: none !important;

    height: 430px !important;

    margin:
      0
      auto
      30px !important;
  }


  .cast-detail-portrait-image {
    transform:
      scale(1) !important;
  }


  .cast-detail-info {
    width: 100% !important;
  }

}
/* =========================================================
   CAST RECORD｜左右真正拆框版
   左：人物清單
   右：獨立人物詳細資料
========================================================= */

@media (min-width: 851px) {


  /* =====================================================
     左側篩選列
     不再橫跨整個畫面
  ====================================================== */

  .cast-record-filters {
    left: 7vw !important;
    right: auto !important;

    width: 35.5vw !important;
  }


  /* =====================================================
     左側人物列表
     只保留左半邊
  ====================================================== */

  .cast-record-body {
    position: absolute !important;

    top: 256px !important;
    left: 7vw !important;
    right: auto !important;
    bottom: 54px !important;

    display: block !important;

    width: 35.5vw !important;

    min-height: 0 !important;
  }


  .cast-record-list {
    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    padding:
      0
      14px
      20px
      0 !important;
  }


  /* =====================================================
     右側人物詳情
     正式脫離左側人物列表框
  ====================================================== */

  .cast-record-detail {
    position: fixed !important;

    top: 52px !important;
    left: 44vw !important;
    right: 7vw !important;
    bottom: 54px !important;

    z-index: 9 !important;

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding:
      38px
      42px
      40px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    box-sizing: border-box !important;

    border:
      1px solid
      rgba(203, 163, 98, .13) !important;

    background:
      linear-gradient(
        145deg,
        rgba(13, 16, 21, .50),
        rgba(4, 7, 11, .24)
      ) !important;

    box-shadow:
      inset 0 0 50px
      rgba(180, 137, 74, .025) !important;
  }


  /* =====================================================
     詳情：左文字／右大人物
  ====================================================== */

  .cast-detail-main {
    display: grid !important;

    grid-template-columns:
      minmax(0, .82fr)
      minmax(410px, 1.18fr) !important;

    gap: 36px !important;

    align-items: start !important;

    margin-top: 28px !important;
  }


  .cast-detail-info {
    order: 1 !important;

    min-width: 0 !important;
  }


  /* =====================================================
     右邊人物
     仍然沒有任何人物框
  ====================================================== */

  .cast-detail-portrait {
    order: 2 !important;

    position: relative !important;

    display: flex !important;

    align-items: flex-start !important;
    justify-content: center !important;

    width: 100% !important;
    max-width: 540px !important;

    height:
      min(
        720px,
        calc(100vh - 210px)
      ) !important;

    margin:
      -45px
      0
      0
      auto !important;

    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  .cast-detail-portrait::before,
  .cast-detail-portrait::after {
    content: none !important;

    display: none !important;
  }


  .cast-detail-portrait-image {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;
    object-position: center top !important;

    transform:
      scale(1.10) !important;

    transform-origin:
      center top !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    filter:
      drop-shadow(
        0 18px 28px
        rgba(0, 0, 0, .24)
      ) !important;
  }


  /* =====================================================
     左邊四格資訊
  ====================================================== */

  .cast-detail-main
  .cast-detail-grid {
    margin-top: 0 !important;
  }


  .cast-detail-main
  .cast-detail-profile {
    max-width: none !important;
  }

}


/* =========================================================
   中型桌面
========================================================= */

@media (min-width: 851px) and (max-width: 850px) {

  .cast-record-filters {
    width: 37vw !important;
  }


  .cast-record-body {
    width: 37vw !important;
  }


  .cast-record-detail {
    left: 46vw !important;

    padding:
      32px
      30px
      35px !important;
  }


  .cast-detail-main {
    grid-template-columns:
      minmax(0, .88fr)
      minmax(320px, 1.12fr) !important;

    gap: 25px !important;
  }


  .cast-detail-portrait {
    max-width: 430px !important;

    height:
      min(
        620px,
        calc(100vh - 200px)
      ) !important;
  }

}
/* =========================================================
   CAST RECORD｜右側人物檔案最終修正
   1. 人物頂端與姓名齊平
   2. 移除右側外框與可見捲軸
========================================================= */

@media (min-width: 851px) {


  /* =====================================================
     右側人物檔案本體
     移除整個外框／底板
  ====================================================== */

  .cast-record-detail {
    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    /*
      保留必要時可捲動，
      但不顯示右邊那條 scrollbar
    */
    overflow-y: auto !important;
    overflow-x: hidden !important;

    scrollbar-width: none !important;
  }


  .cast-record-detail::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;

    display: none !important;
  }


  /* =====================================================
     詳情內容
     左邊文字自己佔一區
     人物改成獨立絕對定位在右邊
  ====================================================== */

  .cast-detail-main {
    position: static !important;

    display: block !important;

    margin-top: 28px !important;

    /*
      留出右邊人物的位置
    */
    padding-right: 48% !important;
  }


  /* =====================================================
     左側文字資料
  ====================================================== */

  .cast-detail-info {
    width: 100% !important;

    min-width: 0 !important;

    max-width: none !important;
  }


  .cast-detail-main
  .cast-detail-grid {
    margin-top: 0 !important;
  }


  .cast-detail-main
  .cast-detail-profile {
    max-width: none !important;
  }


  /* =====================================================
     右側人物
     頂端直接抬到姓名高度
  ====================================================== */

  .cast-detail-portrait {
    position: absolute !important;

    /*
      這個高度就是讓人物頭頂
      約與姓名「伊耆諸／青棠」齊平
    */
    top: 78px !important;

    right: 20px !important;

    bottom: 0 !important;
    left: auto !important;

    width: 46% !important;
    max-width: none !important;

    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }


  /* 徹底清掉人物區舊框線 */

  .cast-detail-portrait::before,
  .cast-detail-portrait::after {
    content: none !important;

    display: none !important;
  }


  /* =====================================================
     人物圖片本體
  ====================================================== */

  .cast-detail-portrait-image {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;
    max-height: none !important;

    object-fit: contain !important;

    /*
      不再貼底
      從姓名高度往下展示
    */
    object-position: center top !important;

    transform: scale(1.04) !important;

    transform-origin: center top !important;

    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    filter:
      drop-shadow(
        0 18px 28px
        rgba(0, 0, 0, .22)
      ) !important;
  }


  /* =====================================================
     沒有圖片時也不要出現框
  ====================================================== */

  .cast-detail-portrait-empty {
    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }

}


/* =========================================================
   中型桌面
========================================================= */

@media (min-width: 851px) and (max-width: 850px) {

  .cast-detail-main {
    padding-right: 45% !important;
  }


  .cast-detail-portrait {
    top: 76px !important;

    right: 8px !important;

    width: 44% !important;
  }

}
/* =========================================================
   CAST RECORD｜左右區塊拉開距離
========================================================= */

@media (min-width: 851px) {

  /* 左邊篩選列寬度 */
  .cast-record-filters {
    width: 33.5vw !important;
  }

  /* 左邊人物清單寬度 */
  .cast-record-body {
    width: 33.5vw !important;
  }

  /* 右邊人物檔案整塊往右移，和左邊拉開 */
  .cast-record-detail {
    left: 46.5vw !important;
    right: 6.5vw !important;
  }

}


/* 中型桌面也一起調整 */
@media (min-width: 851px) and (max-width: 850px) {

  .cast-record-filters {
    width: 35vw !important;
  }

  .cast-record-body {
    width: 35vw !important;
  }

  .cast-record-detail {
    left: 48vw !important;
    right: 5.5vw !important;
  }

}
/* =========================================================
   CAST RECORD｜右側文字＋人物同步微調
========================================================= */

@media (min-width: 851px) {

  .cast-detail-info {
    padding-top: 18px !important;
  }

  .cast-detail-portrait {
    top: 88px !important;
  }

}
/* =========================================================
   CAST RECORD｜右側文字整組下移
   讓人物姓名對齊左側家族分類列
   人物立繪位置不動
========================================================= */

@media (min-width: 851px) {

  .cast-detail-kicker {
    margin-top: 80px !important;
  }

}
/* =========================================================
   CAST RECORD｜京中人物簿背景
========================================================= */

.cast-record {
  background:
    #04070c
    url("assets/images/cast-record-bg.png")
    center center / cover
    no-repeat !important;
}


.cast-record-backdrop {
  position: absolute;

  inset: 0;

  z-index: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(3, 6, 11, .82) 0%,
      rgba(3, 6, 11, .70) 42%,
      rgba(3, 6, 11, .60) 72%,
      rgba(3, 6, 11, .72) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3, 6, 11, .20) 0%,
      rgba(3, 6, 11, .48) 100%
    );
}
/* =========================================================
   CAST RECORD｜背景圖正式修正
========================================================= */

.cast-record {
  background:
    #04070c
    url("assets/images/cast-record-bg.png")
    center center / cover
    no-repeat !important;
}


/* 舊版可能是 shade，新版可能是 backdrop
   兩個一起處理 */

.cast-record-shade,
.cast-record-backdrop {
  position: absolute !important;
  inset: 0 !important;

  pointer-events: none !important;

  background:
    radial-gradient(
      circle at 72% 28%,
      rgba(117, 83, 48, .10),
      transparent 38%
    ),
    radial-gradient(
      circle at 18% 72%,
      rgba(48, 66, 88, .10),
      transparent 42%
    ),
    linear-gradient(
      90deg,
      rgba(3, 6, 11, .76) 0%,
      rgba(3, 6, 11, .64) 42%,
      rgba(3, 6, 11, .58) 72%,
      rgba(3, 6, 11, .70) 100%
    ) !important;
}
/* =========================================================
   CAST RECORD｜背景壓暗＋字體放大
========================================================= */

.cast-record-shade,
.cast-record-backdrop {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;

  background:
    linear-gradient(
      90deg,
      rgba(2, 4, 8, .84) 0%,
      rgba(2, 4, 8, .78) 28%,
      rgba(2, 4, 8, .72) 52%,
      rgba(2, 4, 8, .73) 72%,
      rgba(2, 4, 8, .80) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2, 4, 8, .38) 0%,
      rgba(2, 4, 8, .60) 100%
    ),
    radial-gradient(
      circle at 72% 32%,
      rgba(120, 85, 48, .07),
      transparent 38%
    ),
    radial-gradient(
      circle at 18% 72%,
      rgba(48, 66, 88, .07),
      transparent 42%
    ) !important;
}


/* =========================================================
   左上標題
========================================================= */

.cast-record-head p,
.cast-record-header p {
  font-size: 11px !important;
  letter-spacing: .34em !important;
}

.cast-record-head h2,
.cast-record-header h2 {
  font-size: clamp(54px, 4.4vw, 76px) !important;
  letter-spacing: .10em !important;
}

.cast-record-head > span,
.cast-record-header > div > span {
  font-size: 14px !important;
  line-height: 1.9 !important;
  color: rgba(230, 219, 200, .70) !important;
}


/* =========================================================
   上方分類
========================================================= */

.cast-filter span,
.cast-record-filters button span {
  font-size: 10px !important;
  letter-spacing: .22em !important;
}

.cast-filter em,
.cast-record-filters button em {
  font-size: 14px !important;
  letter-spacing: .06em !important;
}

.cast-record-filters {
  gap: 10px !important;
}


/* =========================================================
   左側人物清單
========================================================= */

.cast-card {
  min-height: 96px !important;
  padding: 16px 18px !important;
}

.cast-card-index {
  font-size: 13px !important;
}

.cast-card > div > strong,
.cast-card > strong {
  font-size: 18px !important;
  line-height: 1.4 !important;
}

.cast-card p,
.cast-card-role {
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: rgba(229, 216, 194, .80) !important;
}

.cast-card small {
  font-size: 11px !important;
  line-height: 1.7 !important;
  color: rgba(205, 191, 168, .54) !important;
}

.cast-card > em {
  font-size: 11px !important;
}


/* =========================================================
   右側人物主標
========================================================= */

.cast-detail-kicker {
  font-size: 10px !important;
  letter-spacing: .30em !important;
}

.cast-record-detail h3 {
  font-size: clamp(54px, 4.2vw, 74px) !important;
  line-height: 1.12 !important;
  letter-spacing: .08em !important;
}

.cast-detail-meta {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: rgba(221, 207, 184, .68) !important;
}

.cast-detail-role {
  font-size: 18px !important;
  line-height: 1.8 !important;
  color: rgba(219, 174, 103, .96) !important;
}


/* =========================================================
   右側四格資料
========================================================= */

.cast-detail-grid > div {
  min-height: 100px !important;
  padding: 18px 18px 16px !important;
}

.cast-detail-grid span {
  font-size: 9px !important;
  letter-spacing: .22em !important;
  color: rgba(196, 153, 89, .70) !important;
}

.cast-detail-grid strong {
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: rgba(239, 227, 207, .90) !important;
}


/* =========================================================
   右側人物介紹
========================================================= */

.cast-detail-profile {
  font-size: 16px !important;
  line-height: 2.15 !important;
  color: rgba(234, 223, 204, .84) !important;
}


/* =========================================================
   左側選中人物
========================================================= */

.cast-card.active > div > strong,
.cast-card.active > strong {
  color: rgba(248, 233, 205, .98) !important;
}

.cast-card.active p,
.cast-card.active .cast-card-role {
  color: rgba(229, 183, 109, .92) !important;
}
/* =========================================================
   CAST RECORD｜可讀性＋標題區間距修正版
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     左上標題說明
  ====================================================== */

  #castRecord .cast-record-head > span,
  #castRecord .cast-record-header > div > span {
    display: block !important;

    margin-top: 18px !important;

    font-size: 14px !important;
    line-height: 1.9 !important;
    letter-spacing: .06em !important;

    color: rgba(235, 224, 204, .78) !important;
  }


  /* =====================================================
     家族分類列往下移
     避免卡到上面的說明文字
  ====================================================== */

  #castRecord .cast-record-filters {
    top: 218px !important;

    padding-bottom: 15px !important;
  }


  /* 分類列下移後
     人物清單一起往下 */
  #castRecord .cast-record-body {
    top: 282px !important;
  }


  /* =====================================================
     上方分類文字放大
  ====================================================== */

  #castRecord .cast-filter span,
  #castRecord .cast-record-filters button span {
    font-size: 11px !important;

    letter-spacing: .20em !important;
  }


  #castRecord .cast-filter em,
  #castRecord .cast-record-filters button em {
    font-size: 15px !important;

    line-height: 1.5 !important;

    letter-spacing: .05em !important;
  }


  /* =====================================================
     左側人物列表
  ====================================================== */

  #castRecord .cast-card {
    min-height: 96px !important;

    padding:
      17px
      18px !important;
  }


  /* 編號 */

  #castRecord .cast-card-index {
    font-size: 13px !important;
  }


  /* 人名 */

  #castRecord .cast-card > strong,
  #castRecord .cast-card > div > strong {
    font-size: 20px !important;

    line-height: 1.35 !important;

    letter-spacing: .07em !important;

    color: rgba(246, 233, 209, .96) !important;
  }


  /* 身份 */

  #castRecord .cast-card-role,
  #castRecord .cast-card p {
    margin-top: 6px !important;

    font-size: 14px !important;

    line-height: 1.65 !important;

    color: rgba(231, 215, 187, .84) !important;
  }


  /* 所屬／第三行小字 */

  #castRecord .cast-card small {
    margin-top: 4px !important;

    font-size: 12px !important;

    line-height: 1.6 !important;

    color: rgba(211, 196, 171, .62) !important;
  }


  /* 右側家族標籤 */

  #castRecord .cast-card-related,
  #castRecord .cast-card > em {
    font-size: 12px !important;

    letter-spacing: .06em !important;

    color: rgba(207, 160, 91, .78) !important;
  }


  /* =====================================================
     右側人物檔案
  ====================================================== */

  #castRecord .cast-detail-kicker {
    font-size: 11px !important;

    letter-spacing: .28em !important;
  }


  #castRecord .cast-detail-meta {
    font-size: 15px !important;

    line-height: 1.8 !important;

    color: rgba(225, 212, 190, .74) !important;
  }


  #castRecord .cast-detail-role {
    font-size: 19px !important;

    line-height: 1.8 !important;

    color: rgba(226, 179, 105, .98) !important;
  }


  /* =====================================================
     右側四格資訊
  ====================================================== */

  #castRecord .cast-detail-grid > div {
    min-height: 105px !important;

    padding:
      19px
      20px !important;
  }


  #castRecord .cast-detail-grid span {
    margin-bottom: 12px !important;

    font-size: 10px !important;

    letter-spacing: .20em !important;

    color: rgba(205, 161, 94, .78) !important;
  }


  #castRecord .cast-detail-grid strong {
    font-size: 15px !important;

    line-height: 1.75 !important;

    letter-spacing: .04em !important;

    color: rgba(243, 231, 211, .94) !important;
  }


  /* =====================================================
     人物介紹正文
  ====================================================== */

  #castRecord .cast-detail-profile {
    font-size: 17px !important;

    line-height: 2.05 !important;

    letter-spacing: .04em !important;

    color: rgba(238, 227, 208, .88) !important;
  }

}
/* =========================================================
   CAST RECORD｜左上標題區再次修正
   拉開說明文字與家族分類列
========================================================= */

@media (min-width: 851px) {

  /* 標題下方說明文字 */
  #castRecord .cast-record-head > span,
  #castRecord .cast-record-header > div > span {
    display: block !important;

    margin-top: 24px !important;

    font-size: 15px !important;
    line-height: 1.8 !important;
    letter-spacing: .04em !important;

    color: rgba(238, 228, 210, .82) !important;
  }


  /* 家族分類整排再往下 */
  #castRecord .cast-record-filters {
    top: 238px !important;

    padding-top: 6px !important;
    padding-bottom: 16px !important;

    gap: 14px !important;
  }


  /* 英文分類 */
  #castRecord .cast-filter span,
  #castRecord .cast-record-filters button span {
    font-size: 11px !important;

    line-height: 1.4 !important;
    letter-spacing: .20em !important;
  }


  /* 中文分類 */
  #castRecord .cast-filter em,
  #castRecord .cast-record-filters button em {
    margin-top: 4px !important;

    font-size: 16px !important;

    line-height: 1.5 !important;
    letter-spacing: .04em !important;
  }


  /* 分類往下後，人物列表一起跟著往下 */
  #castRecord .cast-record-body {
    top: 312px !important;
  }


  /* 左邊人物名字再大一點 */
  #castRecord .cast-card > strong,
  #castRecord .cast-card > div > strong {
    font-size: 20px !important;

    line-height: 1.35 !important;
  }


  /* 人物身份 */
  #castRecord .cast-card-role,
  #castRecord .cast-card p {
    font-size: 14px !important;

    line-height: 1.7 !important;
  }


  /* 所屬小字 */
  #castRecord .cast-card small {
    font-size: 12px !important;

    line-height: 1.65 !important;
  }

}
/* =========================================================
   CAST RECORD｜說明文字往上移
========================================================= */

@media (min-width: 851px) {

  #castRecord .cast-record-head > span,
  #castRecord .cast-record-header > div > span {
    margin-top: 12px !important;
  }

}
/* =========================================================
   00｜京華盛典｜放大＋更滿版版
========================================================= */

@media (min-width: 721px) {

  #event.event-compact {
    padding-top: 4.2vw !important;
    padding-bottom: 3.2vw !important;
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }

  #event .event-compact-hero {
    transform: translate(-28px, -36px) !important;
  }

  #event .event-compact-ranking {
    transform: translateY(-36px) !important;
  }


  /* 上方章節字 */
  #event .event-compact-chapter span {
    font-size: 15px !important;
    letter-spacing: .18em !important;
  }

  #event .event-compact-chapter em {
    font-size: 12px !important;
    letter-spacing: .32em !important;
    color: rgba(235, 221, 198, .78) !important;
  }


  /* LOGO */
  #event .event-brand-lockup {
    margin-bottom: 22px !important;
    gap: 14px !important;
  }

  #event .event-brand-logo-touchie {
    max-width: 185px !important;
    max-height: 56px !important;
  }

  #event .event-brand-logo-ywj {
    max-width: 185px !important;
    max-height: 58px !important;
  }

  #event .event-brand-x {
    font-size: 24px !important;
  }


  /* 主標題 */
  #event .event-compact-title {
    font-size: clamp(76px, 6.2vw, 108px) !important;
    line-height: 1.02 !important;
    margin-bottom: 12px !important;
  }

  #event .event-compact-en {
    font-size: 12px !important;
    letter-spacing: .34em !important;
    color: rgba(228, 214, 191, .72) !important;
  }


  /* 左側活動說明 */
  #event .event-compact-intro {
    font-size: 19px !important;
    line-height: 1.9 !important;
    letter-spacing: .045em !important;
    color: rgba(245, 234, 216, .96) !important;
    margin-top: 18px !important;
    margin-bottom: 24px !important;
  }


  /* PERIOD / STATUS */
  #event .event-compact-meta {
    gap: 22px !important;
  }

  #event .event-compact-meta span {
    font-size: 11px !important;
    letter-spacing: .25em !important;
    color: rgba(224, 181, 111, .86) !important;
  }

  #event .event-compact-meta strong {
    font-size: 19px !important;
    line-height: 1.55 !important;
    color: rgba(249, 237, 217, .98) !important;
  }

  #event .event-compact-meta small {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: rgba(232, 220, 201, .76) !important;
  }


  /* 前往活動按鈕 */
  #event .event-compact-enter {
    min-height: 58px !important;
    padding: 0 26px !important;
  }

  #event .event-compact-enter span {
    font-size: 11px !important;
    letter-spacing: .26em !important;
  }

  #event .event-compact-enter em {
    font-size: 15px !important;
    letter-spacing: .08em !important;
  }


  /* 右側標題 */
  #event .event-compact-head span {
    font-size: 11px !important;
    letter-spacing: .26em !important;
    color: rgba(223, 180, 110, .86) !important;
  }

  #event .event-compact-head h2 {
    font-size: 34px !important;
    line-height: 1.2 !important;
    margin-top: 6px !important;
  }


  /* 第一名區塊 */
  #event .event-compact-first {
    padding: 24px 22px !important;
  }

  #event .event-compact-rank-title span {
    font-size: 10px !important;
    letter-spacing: .24em !important;
  }

  #event .event-compact-rank-title strong {
    font-size: 22px !important;
  }

  #event .event-compact-first-body h3 {
    font-size: 35px !important;
    line-height: 1.2 !important;
    margin-bottom: 12px !important;
  }

  #event .event-compact-first-body p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  #event .event-compact-first-body p strong {
    font-size: 40px !important;
    line-height: 1 !important;
  }

  #event .event-compact-reward-tags {
    gap: 10px !important;
    margin-top: 14px !important;
  }

  #event .event-compact-reward-tags span {
    font-size: 13px !important;
    line-height: 1.5 !important;
    padding: 8px 12px !important;
  }


  /* 第二～五名 */
  #event .event-compact-minor-ranks article {
    padding: 18px 16px !important;
  }

  #event .event-compact-rank-en {
    font-size: 10px !important;
    letter-spacing: .22em !important;
  }

  #event .event-compact-rank-number {
    font-size: 18px !important;
  }

  #event .event-compact-minor-ranks h3 {
    font-size: 21px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
  }

  #event .event-compact-minor-ranks p {
    font-size: 16px !important;
    line-height: 1.6 !important;
    margin-bottom: 8px !important;
  }

  #event .event-compact-minor-ranks small {
    font-size: 13px !important;
    line-height: 1.7 !important;
    color: rgba(238, 226, 207, .8) !important;
  }


  /* 底部四欄 */
  #event .event-compact-footer {
    margin-top: 10px !important;
  }

  #event .event-compact-foot-item {
    padding-top: 16px !important;
    padding-bottom: 14px !important;
  }

  #event .event-compact-foot-item > span {
    font-size: 10px !important;
    letter-spacing: .24em !important;
    color: rgba(221, 177, 108, .8) !important;
  }

  #event .event-compact-foot-item > strong {
    font-size: 19px !important;
    line-height: 1.35 !important;
  }

  #event .event-compact-foot-item p {
    font-size: 13px !important;
    line-height: 1.72 !important;
    color: rgba(236, 224, 205, .82) !important;
  }

  #event .event-compact-rules a {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }

}
/* =========================================================
   00｜京華盛典｜小型說明文字放大
========================================================= */

@media (min-width: 721px) {

  /* 活動期間／活動進行中 */
  #event .event-compact-meta small {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(240, 228, 208, .82) !important;
  }


  /* 第二～五名獎勵說明
     角色抱枕・特殊專屬頭像框 等 */
  #event .event-compact-minor-ranks small {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: rgba(242, 230, 210, .86) !important;
  }

}
/* =========================================================
   01｜曜辰京錄｜整體放大填滿版
   不動 00，不改 HTML / JS
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     左側曜辰京錄
  ====================================================== */

  #capital .capital-chapter {
    left: 5.2% !important;
  }

  #capital .capital-number {
    font-size: 13px !important;
  }

  #capital .capital-chapter-name {
    font-size: 10px !important;
    letter-spacing: .42em !important;
  }

  #capital .capital-copy {
    left: 5.2% !important;

    width: 26vw !important;
    max-width: 500px !important;
  }

  #capital .capital-kicker {
    font-size: 14px !important;
    letter-spacing: .34em !important;
  }

  #capital .capital-title {
    font-size: clamp(62px, 4.3vw, 80px) !important;
    letter-spacing: .14em !important;
  }

  #capital .capital-title-line {
    width: 230px !important;

    margin-top: 24px !important;
    margin-bottom: 26px !important;
  }

  #capital .capital-lead {
    font-size: 19px !important;
    line-height: 1.9 !important;

    color: rgba(242, 230, 208, .94) !important;
  }

  #capital .capital-text {
    font-size: 18px !important;
    line-height: 2 !important;

    color: rgba(232, 220, 199, .80) !important;
  }


  /* =====================================================
     中央影片放大
  ====================================================== */

  #capital .capital-film {
    left: 32.3% !important;
    top: 20.8% !important;

    width: min(760px, 40vw) !important;
  }

  #capital .capital-film-head {
    padding-bottom: 11px !important;
  }

  #capital .capital-film-head span {
    font-size: 10px !important;
    letter-spacing: .26em !important;
  }

  #capital .capital-film-head em {
    font-size: 9px !important;
    letter-spacing: .18em !important;
  }

  #capital .capital-film-foot span {
    font-size: 13px !important;
  }

  #capital .capital-film-foot em {
    font-size: 9px !important;
  }

  #capital .capital-film-screen::before {
    font-size: 10px !important;
  }


  /* =====================================================
     右側京中別錄整體放大
  ====================================================== */

  #capital .capital-featured-records,
  #capital .capital-featured-records.capital-intel-board {
    right: 5.8vw !important;
    top: 18.5% !important;

    width: min(360px, 19.5vw) !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-head
  span {
    font-size: 10px !important;
    letter-spacing: .24em !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-head
  h3 {
    font-size: 31px !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-head
  em {
    font-size: 9px !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-media {
    height: 245px !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-stage {
    min-height: 355px !important;
  }

  #capital .capital-featured-index {
    font-size: 10px !important;
  }

  #capital .capital-featured-house {
    font-size: 10px !important;
  }

  #capital .capital-featured-copy strong {
    font-size: 24px !important;
  }

  #capital .capital-featured-copy p {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  #capital .capital-featured-enter {
    font-size: 11px !important;
  }


  /* =====================================================
     右下四格資料
  ====================================================== */

  #capital .capital-fact .fact-en {
    font-size: 12px !important;
  }

  #capital .capital-fact strong {
    font-size: 19px !important;
    line-height: 1.6 !important;
  }

}
/* =========================================================
   01｜曜辰京錄｜第二階段微調
   只動左側文字、右側京中別錄、右下資料
   中央影片不動
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     左側｜曜辰京錄再放大
  ====================================================== */

  #capital .capital-title {
    font-size: clamp(66px, 4.6vw, 86px) !important;
  }

  #capital .capital-kicker {
    font-size: 15px !important;
  }

  #capital .capital-lead {
    font-size: 20px !important;
    line-height: 1.9 !important;
  }

  #capital .capital-text {
    font-size: 19px !important;
    line-height: 2 !important;
  }


  /* =====================================================
     右側｜京中別錄再放大一點
  ====================================================== */

  #capital .capital-featured-records,
  #capital .capital-featured-records.capital-intel-board {
    right: 4.8vw !important;

    width: min(385px, 20.5vw) !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-head
  span {
    font-size: 11px !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-head
  h3 {
    font-size: 34px !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-head
  em {
    font-size: 10px !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-media {
    height: 258px !important;
  }

  #capital
  .capital-intel-board
  .capital-featured-stage {
    min-height: 370px !important;
  }

  #capital .capital-featured-house {
    font-size: 11px !important;
  }

  #capital .capital-featured-copy strong {
    font-size: 26px !important;
  }

  #capital .capital-featured-copy p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  #capital .capital-featured-enter {
    font-size: 12px !important;
  }


  /* =====================================================
     右下｜DYNASTY / HOUSES / CAPITAL / BEYOND
     整組往上＋放大
  ====================================================== */

  #capital .capital-facts {
    right: 6.2% !important;
    bottom: 6.5% !important;

    grid-template-columns:
      repeat(2, 165px) !important;

    gap:
      20px
      32px !important;
  }

  #capital .capital-fact {
    padding-top: 14px !important;
  }

  #capital .capital-fact .fact-en {
    font-size: 12px !important;
    letter-spacing: .24em !important;
  }

  #capital .capital-fact strong {
    font-size: 19px !important;
    line-height: 1.6 !important;
    letter-spacing: .16em !important;
  }

}
/* =========================================================
   01｜京中別錄｜人物資料小字強制放大
========================================================= */

@media (min-width: 851px) {

  /* MOTAI・蜃君 / LUMEN・春主 */
  #capital
  .capital-featured-records.capital-intel-board
  .capital-featured-house {
    font-size: 13px !important;
    line-height: 1.6 !important;
    letter-spacing: .16em !important;
  }


  /* 人物姓名 */
  #capital
  .capital-featured-records.capital-intel-board
  .capital-featured-copy
  strong {
    font-size: 27px !important;
    line-height: 1.3 !important;
  }


  /* 墨胎氏現任家主 /
     鹿門氏唯一正式繼承人 */
  #capital
  .capital-featured-records.capital-intel-board
  .capital-featured-copy
  p {
    font-size: 16px !important;
    line-height: 1.7 !important;
    margin-top: 8px !important;
  }


  /* 入卷 */
  #capital
  .capital-featured-records.capital-intel-board
  .capital-featured-enter {
    font-size: 15px !important;
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
  }


  /* 入卷右邊箭頭 */
  #capital
  .capital-featured-records.capital-intel-board
  .capital-featured-enter::after {
    font-size: 15px !important;
  }

}
/* =========================================================
   01｜京中別錄｜身份說明強制單行
========================================================= */

@media (min-width: 851px) {

  #capital
  .capital-featured-records.capital-intel-board
  .capital-featured-copy {
    gap: 14px !important;
  }

  #capital
  .capital-featured-records.capital-intel-board
  .capital-featured-copy
  > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #capital
  .capital-featured-records.capital-intel-board
  .capital-featured-copy
  p {
    white-space: nowrap !important;
  }

}
/* =========================================================
   01｜京中別錄｜右側公告卡片往左移
========================================================= */

@media (min-width: 851px) {

  #capital .capital-featured-records.capital-intel-board,
  #capital .capital-intel-board {
    right: 72px !important;
    transform: translateX(-85px) !important;
  }

}
/* =========================================================
   02｜京中人物｜天燈浮動透明層
========================================================= */

.house-cast-lantern {
  position: absolute;

  top: 8%;
  right: -2%;

  z-index: 2;

  width: 78%;
  height: auto;

  max-width: none;

  opacity: 0.72;

  pointer-events: none;

  transform-origin: 70% 30%;

  filter:
    brightness(0.95)
    drop-shadow(
      0 0 14px
      rgba(220, 166, 92, 0.16)
    );

  animation:
    houseCastLanternFloat
    7s
    ease-in-out
    infinite;
}


/* 展開京中人物時稍微亮一點 */

.house-panel.house-cast.active
.house-cast-lantern {
  opacity: 0.92;
}


/* 未選中時退暗 */

.houses-track:hover
.house-panel.house-cast:not(.active)
.house-cast-lantern {
  opacity: 0.34;
}


/* =========================================================
   天燈浮動
========================================================= */

@keyframes houseCastLanternFloat {

  0%,
  100% {
    transform:
      translate3d(0, 0, 0)
      rotate(-0.4deg);
  }

  25% {
    transform:
      translate3d(-5px, -7px, 0)
      rotate(0.3deg);
  }

  50% {
    transform:
      translate3d(3px, -14px, 0)
      rotate(0.8deg);
  }

  75% {
    transform:
      translate3d(-3px, -8px, 0)
      rotate(-0.2deg);
  }

}
/* =========================================================
   02｜人物閱卷｜三頁滿版＋字體放大
   CHARACTER / HOUSE RECORD / YOUR ROLE
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     三頁頁籤
  ====================================================== */

  .character-dossier .dossier-view-tab span {
    font-size: 12px !important;
    letter-spacing: .24em !important;
  }

  .character-dossier .dossier-view-tab em {
    font-size: 14px !important;
    letter-spacing: .08em !important;
  }


  /* =====================================================
     01｜CHARACTER
     左側人物資料放大、向外撐開
  ====================================================== */

  .character-dossier .dossier-copy {
    left: 5.5vw !important;

    width: min(650px, 39vw) !important;

    transform:
      translate(0, -50%) !important;
  }

  .character-dossier.is-open .dossier-copy {
    transform:
      translate(0, -50%) !important;
  }


  .character-dossier .dossier-chapter {
    font-size: 11px !important;
  }


  .character-dossier .dossier-house {
    font-size: 14px !important;
  }


  .character-dossier .dossier-name {
    font-size:
      clamp(62px, 5.5vw, 94px) !important;
  }


  .character-dossier .dossier-title {
    font-size: 17px !important;
  }


  .character-dossier .dossier-meta {
    gap: 40px !important;
  }


  .character-dossier .dossier-meta span {
    font-size: 9px !important;
  }


  .character-dossier .dossier-meta strong {
    font-size: 15px !important;
  }


  .character-dossier .dossier-lead {
    font-size: 21px !important;
    line-height: 1.7 !important;
  }


  .character-dossier .dossier-text {
    max-width: 650px !important;

    font-size: 18px !important;
    line-height: 1.9 !important;

    letter-spacing: .06em !important;

    color:
      rgba(235, 225, 207, .82) !important;
  }


  /* CHARACTER 人物再大一些 */

  .character-dossier .dossier-character-wrap {
    width: min(740px, 47vw) !important;
    height: 98vh !important;
  }


  /* 右側家紋／主紋放大 */

  .character-dossier .dossier-symbols {
    right: 3vw !important;
    gap: 38px !important;
  }


  .character-dossier .dossier-symbol {
    width: 132px !important;
  }


  .character-dossier .dossier-symbol-label {
    font-size: 8px !important;
  }


  .character-dossier .dossier-symbol-image {
    width: 104px !important;
    height: 104px !important;
  }


  .character-dossier .dossier-symbol strong {
    font-size: 12px !important;
  }


  /* =====================================================
     02｜HOUSE RECORD
     整頁向四周撐開
  ====================================================== */

  .character-dossier .dossier-house-view {
    top: 72px !important;
    right: 5vw !important;
    bottom: 70px !important;
    left: 5vw !important;

    grid-template-columns:
      1.14fr
      1.05fr
      .52fr !important;

    gap: 3vw !important;
  }


  .character-dossier .house-record-copy {
    max-width: 700px !important;
  }


  .character-dossier .house-record-kicker {
    font-size: 12px !important;
  }


  .character-dossier .house-record-title {
    font-size:
      clamp(58px, 5vw, 84px) !important;
  }


  .character-dossier .house-record-lead {
    font-size: 20px !important;
    line-height: 1.8 !important;
  }


  .character-dossier .house-record-text {
    max-width: 700px !important;

    font-size: 18px !important;
    line-height: 1.9 !important;

    letter-spacing: .055em !important;

    color:
      rgba(235, 225, 207, .82) !important;
  }


  /* 中央六格 */

  .character-dossier .house-record-item {
    min-height: 122px !important;

    padding:
      22px 24px !important;
  }


  .character-dossier .house-record-item span {
    font-size: 10px !important;
  }


  .character-dossier .house-record-item strong {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }


  /* 家紋 */

  .character-dossier .house-record-seal {
    min-height: 470px !important;
  }


  .character-dossier .house-record-seal > span {
    font-size: 10px !important;
  }


  .character-dossier .house-record-seal img {
    width: min(178px, 78%) !important;
  }


  .character-dossier .house-record-seal strong {
    font-size: 22px !important;
  }


  .character-dossier .house-record-seal em {
    font-size: 10px !important;
  }


  /* =====================================================
     03｜YOUR ROLE
     左、中、右三欄全部撐開
  ====================================================== */

  .character-dossier .dossier-role-view {
    top: 72px !important;
    right: 5vw !important;
    bottom: 66px !important;
    left: 5vw !important;

    grid-template-columns:
      .94fr
      1.50fr
      .94fr !important;

    gap: 2.5vw !important;
  }


  /* 左側身份 */

  .character-dossier .role-copy {
    max-width: 500px !important;
  }


  .character-dossier .role-kicker {
    font-size: 12px !important;
  }


  .character-dossier .role-title {
    font-size:
      clamp(52px, 4vw, 72px) !important;
  }


  .character-dossier .role-lead {
    font-size: 20px !important;
  }


  .character-dossier .role-data {
    gap: 19px !important;
    margin-bottom: 30px !important;
  }


  .character-dossier .role-data-item span {
    font-size: 10px !important;
  }


  .character-dossier .role-data-item strong {
    font-size: 19px !important;
  }


  .character-dossier .role-data-item small {
    font-size: 12px !important;
  }


  .character-dossier .role-description {
    max-width: 500px !important;

    font-size: 18px !important;
    line-height: 1.9 !important;

    color:
      rgba(235, 225, 207, .82) !important;
  }


  /* 中央雙人立繪 */

  .character-dossier .role-figure-heading span {
    font-size: 11px !important;
  }


  .character-dossier .role-figure-heading em {
    font-size: 12px !important;
  }


  .character-dossier .role-hover-zone span,
  .character-dossier .role-hover-zone em {
    font-size: 17px !important;
  }


  /* 右側服制 */

  .character-dossier .role-attire {
    max-width: 460px !important;

    padding:
      24px 0
      24px 30px !important;
  }


  .character-dossier .role-attire-head > span {
    font-size: 11px !important;
  }


  .character-dossier .role-attire-head h3 {
    font-size: 34px !important;
  }


  .character-dossier .role-attire-head p {
    font-size: 12px !important;
  }


  .character-dossier .role-attire-meta span {
    font-size: 10px !important;
  }


  .character-dossier .role-attire-meta strong {
    font-size: 16px !important;
  }


  .character-dossier .role-attire-text {
    max-width: 440px !important;

    font-size: 17px !important;
    line-height: 1.9 !important;

    color:
      rgba(235, 225, 207, .82) !important;
  }


  .character-dossier .role-attire-note {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }


  /* =====================================================
     一句固定一整行
  ====================================================== */

  .character-dossier .dossier-sentence-line {
    display: block;

    width: max-content;
    max-width: none;

    margin-bottom: 6px;

    white-space: nowrap;
  }

  .character-dossier
  .dossier-sentence-line:last-child {
    margin-bottom: 0;
  }

}
/* =========================================================
   02｜人物閱卷｜三頁滿版強化版
   CHARACTER / HOUSE RECORD / YOUR ROLE
   僅調整尺寸・字級・間距
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     共用底部頁籤
  ====================================================== */

  .character-dossier .dossier-view-tab span {
    font-size: 13px !important;
    letter-spacing: .24em !important;
  }

  .character-dossier .dossier-view-tab em {
    font-size: 15px !important;
    letter-spacing: .08em !important;
  }


  /* =====================================================
     CHARACTER｜男主人物頁
  ====================================================== */

  .character-dossier .dossier-copy {
    left: 5.2vw !important;

    width:
      min(690px, 40vw) !important;
  }


  .character-dossier .dossier-chapter {
    font-size: 12px !important;
    letter-spacing: .28em !important;
  }


  .character-dossier .dossier-house {
    font-size: 16px !important;
    letter-spacing: .28em !important;
  }


  .character-dossier .dossier-name {
    font-size:
      clamp(
        74px,
        6vw,
        108px
      ) !important;

    line-height: 1 !important;
  }


  .character-dossier .dossier-title {
    font-size: 19px !important;

    margin:
      16px 0
      30px !important;
  }


  /* AGE / HEIGHT / STATUS */

  .character-dossier .dossier-meta {
    gap: 46px !important;
  }

  .character-dossier .dossier-meta span {
    font-size: 10px !important;
    letter-spacing: .25em !important;
  }

  .character-dossier .dossier-meta strong {
    font-size: 17px !important;
  }


  /* 核心句 */

  .character-dossier .dossier-lead {
    font-size: 23px !important;
    line-height: 1.7 !important;

    margin-bottom:
      18px !important;
  }


  /* 人物介紹 */

  .character-dossier .dossier-text {
    width: 100% !important;
    max-width: 690px !important;

    font-size: 20px !important;
    line-height: 1.9 !important;

    letter-spacing:
      .045em !important;

    color:
      rgba(
        238,
        228,
        210,
        .86
      ) !important;
  }


  /* 人物立繪 */

  .character-dossier .dossier-character-wrap {
    width:
      min(
        820px,
        50vw
      ) !important;

    height:
      100vh !important;
  }


  /* 家紋 / 主紋 */

  .character-dossier .dossier-symbols {
    right: 2.6vw !important;
    gap: 42px !important;
  }

  .character-dossier .dossier-symbol {
    width: 142px !important;
  }

  .character-dossier .dossier-symbol-label {
    font-size: 9px !important;
  }

  .character-dossier .dossier-symbol-image {
    width: 112px !important;
    height: 112px !important;
  }

  .character-dossier .dossier-symbol strong {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }


  /* =====================================================
     HOUSE RECORD｜家族誌
  ====================================================== */

  .character-dossier .dossier-house-view {
    top: 58px !important;
    right: 4vw !important;
    bottom: 58px !important;
    left: 4vw !important;

    grid-template-columns:
      1.18fr
      1.08fr
      .56fr !important;

    gap: 2.5vw !important;
  }


  .character-dossier .house-record-copy {
    max-width: 740px !important;
  }


  .character-dossier .house-record-kicker {
    font-size: 13px !important;
  }


  .character-dossier .house-record-title {
    font-size:
      clamp(
        68px,
        5.5vw,
        100px
      ) !important;
  }


  .character-dossier .house-record-lead {
    font-size: 22px !important;
    line-height: 1.75 !important;
  }


  .character-dossier .house-record-text {
    max-width: 740px !important;

    font-size: 19px !important;
    line-height: 1.9 !important;

    color:
      rgba(
        238,
        228,
        210,
        .86
      ) !important;
  }


  /* 中央資料格 */

  .character-dossier .house-record-item {
    min-height:
      132px !important;

    padding:
      24px 26px !important;
  }

  .character-dossier .house-record-item span {
    font-size: 11px !important;
  }

  .character-dossier .house-record-item strong {
    font-size: 18px !important;
    line-height: 1.65 !important;
  }


  /* 家紋欄 */

  .character-dossier .house-record-seal {
    min-height:
      500px !important;
  }

  .character-dossier .house-record-seal > span {
    font-size: 11px !important;
  }

  .character-dossier .house-record-seal img {
    width:
      min(
        190px,
        80%
      ) !important;
  }

  .character-dossier .house-record-seal strong {
    font-size: 24px !important;
  }

  .character-dossier .house-record-seal em {
    font-size: 11px !important;
  }


  /* =====================================================
     YOUR ROLE｜卷中之位
  ====================================================== */

  .character-dossier .dossier-role-view {
    top: 58px !important;
    right: 4vw !important;
    bottom: 58px !important;
    left: 4vw !important;

    grid-template-columns:
      1fr
      1.55fr
      1fr !important;

    gap: 2vw !important;
  }


  /* 左欄 */

  .character-dossier .role-copy {
    max-width: 540px !important;
  }

  .character-dossier .role-kicker {
    font-size: 13px !important;
  }

  .character-dossier .role-title {
    font-size:
      clamp(
        60px,
        4.6vw,
        84px
      ) !important;
  }

  .character-dossier .role-lead {
    font-size: 22px !important;
    line-height: 1.7 !important;
  }


  .character-dossier .role-data {
    gap: 21px !important;

    margin-bottom:
      32px !important;
  }

  .character-dossier .role-data-item span {
    font-size: 11px !important;
  }

  .character-dossier .role-data-item strong {
    font-size: 20px !important;
  }

  .character-dossier .role-data-item small {
    font-size: 13px !important;
  }


  .character-dossier .role-description {
    max-width: 540px !important;

    font-size: 19px !important;
    line-height: 1.9 !important;

    color:
      rgba(
        238,
        228,
        210,
        .86
      ) !important;
  }


  /* 中央人物標示 */

  .character-dossier .role-figure-heading span {
    font-size: 12px !important;
  }

  .character-dossier .role-figure-heading em {
    font-size: 14px !important;
  }

  .character-dossier .role-hover-zone span,
  .character-dossier .role-hover-zone em {
    font-size: 18px !important;
  }


  /* 右欄服制 */

  .character-dossier .role-attire {
    max-width:
      500px !important;

    padding:
      24px 0
      24px 32px !important;
  }

  .character-dossier
  .role-attire-head > span {
    font-size: 12px !important;
  }

  .character-dossier
  .role-attire-head h3 {
    font-size: 38px !important;
  }

  .character-dossier
  .role-attire-head p {
    font-size: 13px !important;
  }

  .character-dossier
  .role-attire-meta span {
    font-size: 11px !important;
  }

  .character-dossier
  .role-attire-meta strong {
    font-size: 18px !important;
  }

  .character-dossier
  .role-attire-text {
    max-width:
      480px !important;

    font-size: 18px !important;
    line-height: 1.9 !important;

    color:
      rgba(
        238,
        228,
        210,
        .86
      ) !important;
  }

  .character-dossier
  .role-attire-note {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

}
/* =========================================================
   02｜九方塵 CHARACTER｜字體尺寸修正
   只修九方塵，不影響其他四人
========================================================= */

@media (min-width: 851px) {

  /* 九方氏 */
  #jiufangDossier .dossier-house {
    font-size: 16px !important;
    letter-spacing: .28em !important;
  }


  /* 玄嶽 */
  #jiufangDossier .dossier-title {
    font-size: 19px !important;
  }


  /* AGE / HEIGHT / STATUS */
  #jiufangDossier .dossier-meta span {
    font-size: 10px !important;
  }

  #jiufangDossier .dossier-meta strong {
    font-size: 17px !important;
  }


  /* 山嶽不語，威勢自成。 */
  #jiufangDossier .dossier-lead {
    font-size: 23px !important;
    line-height: 1.7 !important;
    letter-spacing: .10em !important;
  }


  /* 九方塵人物介紹正文 */
  #jiufangDossier .dossier-text {
    max-width: 690px !important;

    font-size: 20px !important;
    line-height: 1.9 !important;

    letter-spacing: .045em !important;

    color: rgba(238, 228, 210, .86) !important;
  }

}
/* =========================================================
   02｜五男主人物卷｜左側介紹整組往右移
========================================================= */

.character-dossier .dossier-copy {
  transform: translate(200px, -46%) !important;
}

.character-dossier.is-open .dossier-copy {
  transform: translate(200px, -50%) !important;
}
/* =========================================================
   02｜家紋 / 主紋放大視窗｜文字可讀性加強
   FAMILY CREST / PRIMARY MARK 共用
========================================================= */

@media (min-width: 851px) {

  /* FAMILY CREST / PRIMARY MARK */
  .symbol-lightbox-type {
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: .28em !important;
  }


  /* 九方家紋 / 九嶽迴雲 */
  .symbol-lightbox-title {
    font-size: 36px !important;
    line-height: 1.25 !important;
    letter-spacing: .12em !important;

    margin-bottom: 26px !important;
  }


  /* 家紋｜九方氏
     主紋｜現任家主 */
  .symbol-lightbox-rank {
    font-size: 19px !important;
    line-height: 1.6 !important;

    margin-bottom: 10px !important;
  }


  /* 山嶽・迴雲・玄石
     族紋＋承紋專層＋家主專層 */
  .symbol-lightbox-structure {
    font-size: 15px !important;
    line-height: 1.7 !important;

    margin-bottom: 20px !important;

    color: rgba(215, 176, 112, .82) !important;
  }


  /* 正文完整介紹 */
  .symbol-lightbox-description {
    font-size: 18px !important;
    line-height: 1.9 !important;

    letter-spacing: .025em !important;

    color: rgba(235, 226, 210, .90) !important;
  }


  /* 說明區上方距離 */
  .symbol-lightbox-note {
    padding-top: 24px !important;
  }


  /* CLICK OUTSIDE / ESC TO CLOSE */
  .symbol-lightbox-hint {
    font-size: 9px !important;
    letter-spacing: 4px !important;
  }

}
/* =========================================================
   家紋 / 主紋說明區 整體往上微調
   先貼這段到 style.css 最底部
========================================================= */

@media (min-width: 851px) {
  .symbol-lightbox-note {
    padding-top: -60px !important;   /* 原本比較低，往上拉 */
    margin-top: -60px !important;  /* 整個文字區再上移一點 */
  }
}
/* =========================================================
   02｜家紋視窗｜右側標題與說明整組往上
   PRIMARY MARK 不受影響
========================================================= */

@media (min-width: 851px) {

  .symbol-lightbox.is-family-crest
  .symbol-lightbox-type,

  .symbol-lightbox.is-family-crest
  .symbol-lightbox-title,

  .symbol-lightbox.is-family-crest
  .symbol-lightbox-note {
    top: 70px !important;
  }

}
/* =========================================================
   02｜家紋視窗｜標題／分隔線／副標題重新對齊
   PRIMARY MARK 不動
========================================================= */

@media (min-width: 851px) {

  /* FAMILY CREST + 九方家紋 整組維持上移 */
  .symbol-lightbox.is-family-crest
  .symbol-lightbox-type,

  .symbol-lightbox.is-family-crest
  .symbol-lightbox-title {
    top: 72px !important;
  }


  /* 標題下方留一點距離 */
  .symbol-lightbox.is-family-crest
  .symbol-lightbox-title {
    margin-bottom: 18px !important;
  }


  /* 說明區：
     還原正常位置，
     線會重新出現在標題下方 */
  .symbol-lightbox.is-family-crest
  .symbol-lightbox-note {
    top: 72px !important;

    margin-top: 0 !important;

    padding-top: 18px !important;
  }


  /* 線下第一行：家紋｜九方氏 */
  .symbol-lightbox.is-family-crest
  .symbol-lightbox-rank {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
  }

}
/* =========================================================
   02｜身上主紋 / 承紋視窗
   標題 → 分隔線 → 副標題 排版修正
   不影響已經修好的 FAMILY CREST
========================================================= */

@media (min-width: 851px) {

  /* 九嶽迴雲 / 天垣奉祀 / 蜃月浮潮等 */
  .symbol-lightbox:not(.is-family-crest)
  .symbol-lightbox-title {
    margin-bottom: 22px !important;
  }


  /* 分隔線與下面說明整組往下一點 */
  .symbol-lightbox:not(.is-family-crest)
  .symbol-lightbox-note {
    margin-top: 14px !important;
    padding-top: 20px !important;
  }


  /* 主紋｜現任家主 */
  .symbol-lightbox:not(.is-family-crest)
  .symbol-lightbox-rank {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
  }

}
/* =========================================================
   02｜身體紋記說明｜分段顯示
========================================================= */

.symbol-lightbox-description {
  white-space: pre-line !important;
}
/* =========================================================
   02｜五人身上紋記視窗｜右側文字整體上移
   不影響 FAMILY CREST 家紋視窗
========================================================= */

@media (min-width: 851px) {

  .symbol-lightbox:not(.is-family-crest)
  .symbol-lightbox-type,

  .symbol-lightbox:not(.is-family-crest)
  .symbol-lightbox-title,

  .symbol-lightbox:not(.is-family-crest)
  .symbol-lightbox-note {
    top: 5px !important;
  }

}
/* =========================================================
   YOUR ROLE｜左側文字更清楚 + 整體往右移
   適用五家人物卷的「卷中之位」頁
========================================================= */

.character-dossier .role-copy {
  position: relative !important;
  z-index: 5 !important;

  max-width: 430px !important;
  margin-left: 50px !important;   /* ← 整塊往右移，想更右可改大 */
  padding: 24px 26px 24px 26px !important;

  background:
    linear-gradient(
      90deg,
      rgba(5, 10, 18, .90) 0%,
      rgba(5, 10, 18, .68) 58%,
      rgba(5, 10, 18, .30) 82%,
      rgba(5, 10, 18, 0) 100%
    ) !important;

  border-radius: 10px !important;

  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}


/* 左側小標 */
.character-dossier .role-kicker {
  color: rgba(214, 186, 129, .88) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .48) !important;
}


/* 左側大標題：卷中之位 */
.character-dossier .role-title {
  color: rgba(248, 240, 220, .98) !important;
  text-shadow:
    0 2px 18px rgba(0, 0, 0, .55),
    0 0 1px rgba(255, 245, 220, .18) !important;
}


/* 副句 */
.character-dossier .role-lead {
  color: rgba(232, 214, 176, .94) !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .42) !important;
}


/* 左邊資料欄位標題：HOUSE / IDENTITY / RELATION */
.character-dossier .role-data-item span {
  color: rgba(201, 173, 121, .84) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .38) !important;
}


/* 左邊資料主文字 */
.character-dossier .role-data-item strong {
  color: rgba(243, 233, 210, .96) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .46) !important;
}


/* 左邊資料小字 */
.character-dossier .role-data-item small {
  color: rgba(208, 196, 172, .82) !important;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .34) !important;
}


/* 左側正文 */
.character-dossier .role-description {
  color: rgba(236, 228, 210, .92) !important;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .42) !important;
}
/* =========================================================
   02｜人物閱卷｜底部三頁籤單獨往左移
   CHARACTER / HOUSE RECORD / YOUR ROLE
========================================================= */

.character-dossier .dossier-view-tabs {
  left: 5vw !important;
}
/* =========================================================
   02｜九方篇 YOUR ROLE｜尺寸統一
   只修九方，不影響另外四家
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     左側｜卷中之位
  ====================================================== */

  #jiufangDossier .role-kicker {
    font-size: 13px !important;
  }


  #jiufangDossier .role-title {
    font-size:
      clamp(60px, 4.6vw, 84px) !important;

    line-height: 1.08 !important;
  }


  #jiufangDossier .role-lead {
    font-size: 20px !important;
    line-height: 1.75 !important;
  }


  /* HOUSE / IDENTITY / RELATION */

  #jiufangDossier .role-data-item span {
    font-size: 11px !important;
  }


  #jiufangDossier .role-data-item strong {
    font-size: 20px !important;
    line-height: 1.6 !important;
  }


  #jiufangDossier .role-data-item small {
    font-size: 13px !important;
  }


  /* 左側正文 */

  #jiufangDossier .role-description {
    max-width: 500px !important;

    font-size: 18px !important;
    line-height: 1.9 !important;

    letter-spacing: .055em !important;

    color:
      rgba(238, 230, 213, .91) !important;
  }


  /* =====================================================
     中央｜九方篇雙人立繪放大
     九方 PNG 本身留白較多，所以獨立補償
  ====================================================== */

  #jiufangDossier .role-figure-layer {
    transform:
      scale(1.02) !important;

    transform-origin:
      center bottom !important;
  }


  /* YOUR APPEARANCE */

  #jiufangDossier .role-figure-heading span {
    font-size: 12px !important;
  }


  #jiufangDossier .role-figure-heading em {
    font-size: 14px !important;
  }


  /* MALE / FEMALE */

  #jiufangDossier .role-hover-zone span {
    font-size: 18px !important;
  }


  #jiufangDossier .role-hover-zone em {
    font-size: 16px !important;
  }


  /* =====================================================
     右側｜服制說明
  ====================================================== */

  #jiufangDossier .role-attire-head > span {
    font-size: 12px !important;
  }


  #jiufangDossier .role-attire-head h3 {
    font-size: 36px !important;
  }


  #jiufangDossier .role-attire-head p {
    font-size: 13px !important;
  }


  #jiufangDossier .role-attire-meta span {
    font-size: 11px !important;
  }


  #jiufangDossier .role-attire-meta strong {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }


  #jiufangDossier .role-attire-text {
    max-width: 450px !important;

    font-size: 18px !important;
    line-height: 1.9 !important;

    letter-spacing: .055em !important;

    color:
      rgba(238, 230, 213, .88) !important;
  }


  #jiufangDossier .role-attire-note {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

}
/* =========================================================
   京中人物簿｜最終可讀性＋右側下移＋取消右側捲動
   左側人物清單仍可正常捲動
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     左上｜京中人物簿說明
  ====================================================== */

  #castRecord .cast-record-head > span,
  #castRecord .cast-record-header > div > span {
    font-size: 17px !important;
    line-height: 1.85 !important;
    letter-spacing: .04em !important;

    color: rgba(243, 233, 216, .90) !important;
  }


  /* =====================================================
     上方家族分類
  ====================================================== */

  #castRecord .cast-filter span,
  #castRecord .cast-record-filters button span {
    font-size: 12px !important;
  }

  #castRecord .cast-filter em,
  #castRecord .cast-record-filters button em {
    font-size: 17px !important;
  }


  /* =====================================================
     左側人物清單
  ====================================================== */

  #castRecord .cast-card-index {
    font-size: 14px !important;
  }

  #castRecord .cast-card > strong,
  #castRecord .cast-card > div > strong {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  #castRecord .cast-card-role,
  #castRecord .cast-card p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }

  #castRecord .cast-card small {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }

  #castRecord .cast-card-related,
  #castRecord .cast-card > em {
    font-size: 13px !important;
  }


  /* =====================================================
     右側整區
     往下一點 + 完全取消內部上下捲動
  ====================================================== */

  #castRecord .cast-record-detail {
    transform: translateY(24px) !important;

    overflow-y: visible !important;
    overflow-x: visible !important;

    scrollbar-width: none !important;
    overscroll-behavior: none !important;
  }

  #castRecord .cast-record-detail::-webkit-scrollbar {
    display: none !important;
  }


  /* =====================================================
     右側 PERSONNEL FILE
  ====================================================== */

  #castRecord .cast-detail-kicker {
    font-size: 12px !important;
    letter-spacing: .27em !important;
  }


  /* 年齡 / 性別 */
  #castRecord .cast-detail-meta {
    font-size: 16px !important;
    line-height: 1.8 !important;

    color: rgba(233, 220, 198, .82) !important;
  }


  /* 鹿門篇｜王都多年友人 */
  #castRecord .cast-detail-role {
    font-size: 21px !important;
    line-height: 1.7 !important;

    color: rgba(229, 181, 107, .98) !important;
  }


  /* =====================================================
     右側四格
  ====================================================== */

  #castRecord .cast-detail-grid span {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  #castRecord .cast-detail-grid strong {
    font-size: 16px !important;
    line-height: 1.7 !important;

    color: rgba(246, 235, 216, .96) !important;
  }


  /* =====================================================
     右側人物介紹正文
  ====================================================== */

  #castRecord .cast-detail-profile {
    font-size: 19px !important;
    line-height: 1.95 !important;
    letter-spacing: .035em !important;

    color: rgba(242, 232, 215, .92) !important;
  }


  /* =====================================================
     右側人物立繪
     跟文字一起再稍微往下
  ====================================================== */

  #castRecord .cast-detail-portrait {
    top: 108px !important;
  }

}
/* =========================================================
   02｜五姓世錄｜副標題＋閱卷文字放大
========================================================= */

@media (min-width: 851px) {

  /* 五姓世錄下方說明 */
  #houses .houses-intro {
    font-size: 18px !important;
    line-height: 1.9 !important;
    letter-spacing: .05em !important;

    color: rgba(238, 227, 209, .88) !important;
  }


  /* 每一家卡片裡的「閱卷」 */
  #houses .house-enter {
    font-size: 16px !important;
    line-height: 1.4 !important;

    letter-spacing: .12em !important;

    color: rgba(228, 184, 111, .96) !important;
  }

}
/* =========================================================
   03｜京中異聞｜整體可讀性放大
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     上方章節標示
  ====================================================== */

  #chronicles .chronicles-kicker span {
    font-size: 13px !important;
  }

  #chronicles .chronicles-kicker em {
    font-size: 12px !important;
    letter-spacing: .30em !important;
  }


  /* 京中異聞 */
  #chronicles .chronicles-header h2 {
    font-size: clamp(60px, 5vw, 82px) !important;
    line-height: 1.08 !important;
  }


  /* 上方世界觀說明 */
  #chronicles .chronicles-header > p {
    max-width: 760px !important;

    font-size: 18px !important;
    line-height: 1.85 !important;

    letter-spacing: .04em !important;

    color: rgba(240, 229, 210, .90) !important;
  }


  /* =====================================================
     每個異聞分類主內容
  ====================================================== */

  #chronicles .chronicle-panel-index {
    font-size: 12px !important;
  }

  #chronicles .chronicle-en {
    font-size: 11px !important;
    letter-spacing: .28em !important;
  }

  #chronicles .chronicle-panel h3 {
    font-size: clamp(52px, 4.3vw, 72px) !important;
    line-height: 1.08 !important;
  }

  #chronicles .chronicle-lead {
    font-size: 19px !important;
    line-height: 1.7 !important;
  }

  #chronicles .chronicle-text {
    max-width: 940px !important;

    font-size: 17px !important;
    line-height: 1.9 !important;

    letter-spacing: .035em !important;

    color: rgba(237, 226, 207, .88) !important;
  }


  /* CLASSIFICATION */
  #chronicles .chronicle-meta span {
    font-size: 10px !important;
    letter-spacing: .22em !important;
  }

  #chronicles .chronicle-meta strong {
    font-size: 16px !important;
    line-height: 1.7 !important;
  }


  /* =====================================================
     07｜紋印主頁
  ====================================================== */

  #chronicles .chronicle-panel-marks h3 {
    font-size: clamp(52px, 4.3vw, 72px) !important;
  }

  #chronicles
  .chronicle-panel-marks
  .chronicle-lead {
    font-size: 19px !important;
  }

  #chronicles
  .chronicle-panel-marks
  .mark-system-intro {
    max-width: 1050px !important;

    font-size: 17px !important;
    line-height: 1.85 !important;

    color: rgba(239, 228, 209, .90) !important;
  }


  /* 三張：族紋 / 承紋 / 主紋 */
  #chronicles .mark-system-card > span {
    font-size: 11px !important;
  }

  #chronicles .mark-system-card > em {
    font-size: 10px !important;
    letter-spacing: .22em !important;
  }

  #chronicles .mark-system-card > strong {
    font-size: 30px !important;
    line-height: 1.35 !important;
  }

  #chronicles .mark-system-card > small {
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  #chronicles .mark-system-card > p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }


  /* CURRENT HOLDERS / MARRIAGE RULE */
  #chronicles .mark-system-current span,
  #chronicles .mark-system-rule-note span {
    font-size: 10px !important;
  }

  #chronicles .mark-system-current p,
  #chronicles .mark-system-rule-note p {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }

  #chronicles .mark-system-rule-note strong {
    font-size: 17px !important;
  }


  /* =====================================================
     底部 7 個分類
  ====================================================== */

  #chronicles
  .chronicle-index-item > span {
    font-size: 12px !important;
  }

  #chronicles
  .chronicle-index-item strong {
    font-size: 18px !important;
    line-height: 1.35 !important;
  }

  #chronicles
  .chronicle-index-item em {
    font-size: 10px !important;
    line-height: 1.5 !important;

    letter-spacing: .14em !important;
  }


  /* =====================================================
     紋印詳細彈窗
     族紋 / 承紋 / 主紋
  ====================================================== */

  .mark-detail-index {
    font-size: 11px !important;
  }

  .mark-detail-en {
    font-size: 11px !important;
    letter-spacing: .28em !important;
  }

  .mark-detail-title {
    font-size: 48px !important;
    line-height: 1.15 !important;
  }

  .mark-detail-status {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }

  .mark-detail-text {
    font-size: 17px !important;
    line-height: 1.9 !important;

    letter-spacing: .035em !important;

    color: rgba(240, 230, 212, .90) !important;
  }

  .mark-detail-extra {
    font-size: 15px !important;
    line-height: 1.8 !important;
  }

  .mark-detail-hint {
    font-size: 9px !important;
  }

}
/* =========================================================
   京中人物簿｜說明文字避免最後一字換行
========================================================= */

@media (min-width: 851px) {

  #castRecord .cast-record-head > span {
    width: 620px !important;
    max-width: 620px !important;
  }

}
/* =========================================================
   京中人物簿｜左側人物清單右側家族標籤放大
========================================================= */

@media (min-width: 851px) {

  #castRecord .cast-card-related,
  #castRecord .cast-card > em {
    font-size: 15px !important;
    line-height: 1.5 !important;
    letter-spacing: .05em !important;

    color: rgba(222, 174, 101, .92) !important;
  }

}
/* =========================================================
   03｜京中異聞｜最終字體放大
   請放在 style.css 最底部
========================================================= */

@media (min-width: 851px) {

  /* 03 / NIGHT CHRONICLES */
  body #chronicles.chronicles-section
  .chronicles-kicker > span {
    font-size: 14px !important;
  }

  body #chronicles.chronicles-section
  .chronicles-kicker > em {
    font-size: 12px !important;
    letter-spacing: .30em !important;
  }


  /* 京中異聞 */
  body #chronicles.chronicles-section
  .chronicles-header > h2 {
    font-size: clamp(68px, 5.2vw, 92px) !important;
    line-height: 1.08 !important;
  }


  /* 最上方總說明 */
  body #chronicles.chronicles-section
  .chronicles-header > p {
    max-width: 900px !important;

    font-size: 20px !important;
    line-height: 1.9 !important;
    letter-spacing: .035em !important;

    color: rgba(242, 232, 214, .94) !important;
  }


  /* 01 / 02 / 03... */
  body #chronicles.chronicles-section
  .chronicle-panel-index {
    font-size: 13px !important;
  }


  /* ABERRATION / SPIRIT... */
  body #chronicles.chronicles-section
  .chronicle-en {
    font-size: 12px !important;
    letter-spacing: .28em !important;
  }


  /* 妖異 / 精怪 / 遊魂... */
  body #chronicles.chronicles-section
  .chronicle-panel > h3 {
    font-size: clamp(58px, 4.4vw, 78px) !important;
    line-height: 1.08 !important;
  }


  /* 非人之形，異常之象。 */
  body #chronicles.chronicles-section
  .chronicle-lead {
    font-size: 22px !important;
    line-height: 1.65 !important;
  }


  /* 主要正文 */
  body #chronicles.chronicles-section
  .chronicle-text {
    max-width: 900px !important;

    font-size: 19px !important;
    line-height: 1.95 !important;
    letter-spacing: .03em !important;

    color: rgba(242, 232, 214, .92) !important;
  }


  /* CLASSIFICATION */
  body #chronicles.chronicles-section
  .chronicle-meta > span {
    font-size: 11px !important;
    letter-spacing: .22em !important;
  }

  body #chronicles.chronicles-section
  .chronicle-meta > strong {
    font-size: 17px !important;
    line-height: 1.7 !important;

    color: rgba(232, 193, 127, .94) !important;
  }


  /* =====================================================
     底部分類索引
  ====================================================== */

  body #chronicles.chronicles-section
  .chronicle-index-item > span {
    font-size: 12px !important;
  }

  body #chronicles.chronicles-section
  .chronicle-index-item strong {
    font-size: 20px !important;
    line-height: 1.35 !important;
  }

  body #chronicles.chronicles-section
  .chronicle-index-item em {
    font-size: 10px !important;
    line-height: 1.5 !important;
  }


  /* 紋印三張卡 */
  body #chronicles.chronicles-section
  .mark-system-card > span {
    font-size: 11px !important;
  }

  body #chronicles.chronicles-section
  .mark-system-card > em {
    font-size: 10px !important;
  }

  body #chronicles.chronicles-section
  .mark-system-card > strong {
    font-size: 31px !important;
  }

  body #chronicles.chronicles-section
  .mark-system-card > small {
    font-size: 15px !important;
  }

  body #chronicles.chronicles-section
  .mark-system-card > p {
    font-size: 15px !important;
    line-height: 1.75 !important;
  }

}


/* =========================================================
   03｜紋印彈窗｜字體同步放大
========================================================= */

@media (min-width: 851px) {

  body .mark-detail-index {
    font-size: 12px !important;
  }

  body .mark-detail-en {
    font-size: 12px !important;
  }

  body .mark-detail-title {
    font-size: 50px !important;
  }

  body .mark-detail-status {
    font-size: 19px !important;
  }

  body .mark-detail-text {
    font-size: 18px !important;
    line-height: 1.9 !important;
  }

  body .mark-detail-extra {
    font-size: 16px !important;
    line-height: 1.8 !important;
  }

}
/* =========================================================
   03｜紋印詳細彈窗｜最終字體放大
   族紋 / 承紋 / 主紋
========================================================= */

@media (min-width: 851px) {

  /* 彈窗稍微加寬，避免字放大後太擠 */
  body .mark-detail-lightbox.is-open .mark-detail-inner {
    width: min(1000px, 88vw) !important;

    padding:
      54px 64px
      44px !important;
  }


  /* 01 / 02 / 03 */
  body .mark-detail-lightbox.is-open
  .mark-detail-inner
  .mark-detail-index {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }


  /* CLAN MARK / SUCCESSION MARK / PRIMARY MARK */
  body .mark-detail-lightbox.is-open
  .mark-detail-inner
  .mark-detail-en {
    font-size: 13px !important;
    line-height: 1.5 !important;
    letter-spacing: .24em !important;
  }


  /* 族紋 / 承紋 / 主紋 */
  body .mark-detail-lightbox.is-open
  .mark-detail-inner
  .mark-detail-title {
    font-size: 54px !important;
    line-height: 1.15 !important;
    margin-bottom: 16px !important;
  }


  /* 正式族人 / 唯一正式承紋繼承人 / 現任家主 */
  body .mark-detail-lightbox.is-open
  .mark-detail-inner
  .mark-detail-status {
    font-size: 20px !important;
    line-height: 1.65 !important;

    margin-bottom: 28px !important;
    padding-bottom: 22px !important;
  }


  /* 主要說明正文 */
  body .mark-detail-lightbox.is-open
  .mark-detail-inner
  .mark-detail-text {
    width: 100% !important;
    max-width: none !important;

    font-size: 20px !important;
    line-height: 1.95 !important;
    letter-spacing: .025em !important;

    color: rgba(244, 235, 218, .94) !important;
  }


  /* 下方紅色補充框 */
  body .mark-detail-lightbox.is-open
  .mark-detail-inner
  .mark-detail-extra {
    width: 100% !important;

    margin-top: 28px !important;
    padding: 18px 22px !important;

    font-size: 18px !important;
    line-height: 1.85 !important;
    letter-spacing: .02em !important;

    color: rgba(232, 211, 178, .92) !important;
  }


  /* 最下面 CLICK OUTSIDE */
  body .mark-detail-lightbox.is-open
  .mark-detail-inner
  .mark-detail-hint {
    font-size: 10px !important;
  }

}
/* =========================================================
   04｜曜辰歲錄｜滿版＋全字體放大 FINAL
   ＋右側章節列／音樂控制同步放大
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     04 整頁｜把左右與上下空白收掉
  ====================================================== */

  #calendar.calendar-section {
    height: 100vh !important;
    min-height: 100vh !important;

    padding:
      3.2vh 5.2vw
      2.2vh !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }


  /* =====================================================
     上方標題區
  ====================================================== */

  #calendar .calendar-header {
    width: min(1180px, 82vw) !important;
    max-width: none !important;

    margin:
      0 auto 0
      !important;
  }


  /* 04 ─ CALENDAR OF YEWU JING */
  #calendar .calendar-kicker {
    margin-bottom: 12px !important;
    gap: 17px !important;
  }

  #calendar .calendar-kicker span,
  #calendar .calendar-kicker em {
    font-size: 12px !important;
    letter-spacing: .28em !important;
  }

  #calendar .calendar-kicker i {
    width: 62px !important;
  }


  /* 曜辰歲錄 */
  #calendar .calendar-header h2 {
    margin:
      0 0 12px !important;

    font-size:
      clamp(66px, 4.8vw, 88px)
      !important;

    line-height: 1 !important;
  }


  /* 曜辰二十七年 / YEAR XXVII */
  #calendar .calendar-era {
    gap: 15px !important;

    margin:
      0 0 14px !important;
  }

  #calendar .calendar-era span {
    font-size: 15px !important;
    letter-spacing: .14em !important;
  }

  #calendar .calendar-era em {
    font-size: 10px !important;
    letter-spacing: .24em !important;
  }

  #calendar .calendar-era i {
    width: 42px !important;
  }


  /* 標題下方說明 */
  #calendar .calendar-header > p {
    width: max-content !important;

    max-width:
      min(1380px, 86vw)
      !important;

    font-size: 18px !important;
    line-height: 1.8 !important;
    letter-spacing: .04em !important;

    color:
      rgba(239, 228, 209, .91)
      !important;
  }


  /* =====================================================
     15 格日程｜整區更滿、更高
  ====================================================== */

  #calendar .calendar-timeline {
    width: 100% !important;
    max-width: none !important;

    height:
      min(59vh, 575px)
      !important;

    margin:
      3.2vh 0 0
      !important;

    gap:
      12px 14px
      !important;

    grid-template-columns:
      repeat(5, minmax(0, 1fr))
      !important;

    grid-template-rows:
      repeat(3, minmax(0, 1fr))
      !important;
  }


  /* =====================================================
     每張卡片
  ====================================================== */

  #calendar .calendar-event {
    grid-template-columns:
      54px 1fr !important;

    grid-template-rows:
      43px 1fr !important;

    opacity: .84 !important;
  }


  /* 日期區 */
  #calendar .calendar-date {
    height: 43px !important;

    padding:
      8px 13px 6px
      !important;

    gap: 8px !important;
  }


  /* 二月 / 三月... */
  #calendar .calendar-date > span {
    font-size: 11px !important;
    letter-spacing: .11em !important;
  }


  /* 17 / 21 / 28... */
  #calendar .calendar-date strong {
    font-size: 27px !important;
    line-height: 1 !important;
  }


  /* SAT / THU / SUN... */
  #calendar .calendar-date em {
    font-size: 9px !important;
    letter-spacing: .15em !important;
  }


  /* 小菱形節點 */
  #calendar .calendar-node {
    margin-top: 18px !important;

    transform:
      scale(.92)
      !important;
  }


  /* 卡片正文位置 */
  #calendar .calendar-event-content {
    padding:
      13px 14px
      10px 6px
      !important;
  }


  /* 家族英文 */
  #calendar .calendar-event-house {
    margin:
      0 0 5px !important;

    font-size: 10px !important;
    line-height: 1.5 !important;
    letter-spacing: .14em !important;
  }


  /* 活動名稱 */
  #calendar .calendar-event-content h3,
  #calendar
  .calendar-event-story-only
  .calendar-event-content h3,
  #calendar
  .calendar-event-has-story
  .calendar-event-content h3 {
    font-size: 17px !important;
    line-height: 1.5 !important;
    letter-spacing: .04em !important;

    color:
      rgba(241, 229, 208, .92)
      !important;
  }


  /* 如果有顯示活動正文 */
  #calendar
  .calendar-event-content > p:last-child {
    font-size: 13px !important;
    line-height: 1.7 !important;
  }


  /* 婚期等補充資訊 */
  #calendar .calendar-period {
    font-size: 11px !important;
    line-height: 1.55 !important;

    padding:
      6px 8px !important;
  }


  /* =====================================================
     最底部 EVENT / RITES / STORY ENTRIES
  ====================================================== */

  #calendar .calendar-footer {
    margin-top:
      1.5vh !important;
  }

  #calendar .calendar-footer span {
    font-size: 10px !important;
    letter-spacing: .27em !important;
  }

}


/* =========================================================
   全站右側章節導航｜再放大
   00 / 01 / 02 / 03 / 04 / 05 / 06
========================================================= */

@media (min-width: 851px) {

  .chapter-rail {
    gap: 16px !important;
  }


  .chapter-rail .chapter-dot {
    min-width: 108px !important;
    min-height: 38px !important;

    padding:
      7px 15px 7px 8px
      !important;

    column-gap: 11px !important;
  }


  /* 00 / 01 / 02 ... */
  .chapter-rail .chapter-dot > span {
    width: 26px !important;

    font-size: 13px !important;
    letter-spacing: .10em !important;
  }


  /* 盛典 / 京錄 / 五姓 / 異聞 / 歲錄 */
  .chapter-rail .chapter-dot > em {
    font-size: 16px !important;
    letter-spacing: .08em !important;
  }


  /* active / hover 名稱展開寬度 */
  .chapter-rail
  .chapter-dot:hover > em,
  .chapter-rail
  .chapter-dot.active > em {
    width: 52px !important;
  }


  /* 右側菱形 */
  .chapter-rail .chapter-dot::after {
    width: 11px !important;
    height: 11px !important;

    transform:
      rotate(45deg)
      scale(1) !important;
  }

}


/* =========================================================
   全站右側音樂控制｜放大
========================================================= */

@media (min-width: 851px) {

  .chapter-rail .music-rail-button {
    min-width: 108px !important;
    min-height: 36px !important;

    gap: 11px !important;
  }


  /* ♪ / Ⅱ / » */
  .chapter-rail
  .music-rail-button > span {
    width: 26px !important;

    font-size: 15px !important;
  }


  /* 靜音 / 暫停 / 下一首 */
  .chapter-rail
  .music-rail-button > em {
    font-size: 14px !important;
    letter-spacing: .08em !important;
  }


  .chapter-rail
  .music-rail-button:hover > em {
    width: 62px !important;
  }


  /* 音樂按鈕右側菱形 */
  .chapter-rail
  .music-rail-button::after {
    width: 10px !important;
    height: 10px !important;

    transform:
      rotate(45deg)
      !important;
  }


  /* VOL */
  .chapter-rail .music-volume {
    width: 108px !important;

    margin-top: 12px !important;
    padding-top: 18px !important;
  }


  .chapter-rail
  .music-volume > span {
    margin-bottom: 10px !important;

    font-size: 9px !important;
  }


  /* 音量橫條 */
  .chapter-rail
  .music-volume input {
    width: 108px !important;
    height: 18px !important;
  }


  .chapter-rail
  .music-volume
  input::-webkit-slider-runnable-track {
    height: 2px !important;
  }

  .chapter-rail
  .music-volume
  input::-moz-range-track {
    height: 2px !important;
  }


  /* 音量拉鈕 */
  .chapter-rail
  .music-volume
  input::-webkit-slider-thumb {
    width: 10px !important;
    height: 10px !important;

    margin-top: -4px !important;
  }

  .chapter-rail
  .music-volume
  input::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
  }

}
/* =========================================================
   04｜日程區位置微調
   左移＋下移
========================================================= */

@media (min-width: 851px) {

  #calendar .calendar-timeline {

    /* 往左 */
    left: -65px !important;

    /* 左移後補回寬度，避免右邊反而空一塊 */
    width: calc(100% + 24px) !important;

    /* 往下 */
    margin-top: calc(3.2vh + 50px) !important;
  }

}
/* =========================================================
   04｜歲錄詳細彈窗｜字體放大
   只影響點擊日程後的 popup
========================================================= */

@media (min-width: 851px) {

  /* 左側月份：七月 / 六月 / 八月 */
  .calendar-lightbox.is-open
  .calendar-lightbox-date > span {
    font-size: 17px !important;
    line-height: 1.4 !important;
    letter-spacing: .12em !important;

    color: rgba(218, 177, 108, .92) !important;
  }


  /* 左側日期：12 / 21 / 03 */
  .calendar-lightbox.is-open
  .calendar-lightbox-date > strong {
    font-size: 78px !important;
    line-height: .95 !important;
  }


  /* FRI / SAT / MON */
  .calendar-lightbox.is-open
  .calendar-lightbox-date > em {
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .18em !important;

    color: rgba(213, 195, 165, .68) !important;
  }


  /* ROYAL SUMMER RIDING 之類英文小標 */
  .calendar-lightbox.is-open
  .calendar-lightbox-content
  .calendar-event-house {
    font-size: 12px !important;
    line-height: 1.5 !important;
    letter-spacing: .20em !important;
  }


  /* 王苑夏騎 */
  .calendar-lightbox.is-open
  .calendar-lightbox-content h3 {
    font-size: clamp(34px, 2.5vw, 44px) !important;
    line-height: 1.35 !important;
    letter-spacing: .04em !important;
  }


  /* 說明正文 */
  .calendar-lightbox.is-open
  .calendar-lightbox-content > p {
    max-width: 620px !important;

    font-size: 17px !important;
    line-height: 1.9 !important;
    letter-spacing: .025em !important;

    color: rgba(237, 227, 209, .90) !important;
  }


  /* 最底下 CLICK OUTSIDE */
  .calendar-lightbox.is-open
  .calendar-lightbox-hint {
    font-size: 9px !important;
    letter-spacing: .28em !important;
  }

}
/* =========================================================
   05｜月下藏卷｜整體放大版
   - 主頁字體放大
   - 藏器變大、位置微調
   - 影藏 / 聲藏 / 秘藏 內頁字體放大
   - 秘藏新增 30 日解封格樣式
========================================================= */

@media (min-width: 851px) {

  /* =====================================================
     05 首頁｜月下藏卷
  ====================================================== */

  #archives.archives-vessel-section {
    padding-top: 36px;
    padding-bottom: 32px;
  }

  #archives .archives-vessel-header {
    top: 34px;
    left: max(4vw, 64px);
    max-width: min(760px, 44vw);
  }

  #archives .archives-vessel-kicker span,
  #archives .archives-vessel-kicker em {
    font-size: 11px;
  }

  #archives .archives-vessel-small {
    font-size: 14px;
    letter-spacing: .14em;
  }

  #archives .archives-vessel-header h2 {
    font-size: clamp(70px, 5.6vw, 102px);
    line-height: 1.06;
  }

  #archives .archives-vessel-rule {
    width: 210px;
    margin: 20px 0 18px;
  }

  #archives .archives-vessel-intro {
    max-width: 760px;
    font-size: 17px;
    line-height: 1.95;
    color: rgba(226, 214, 194, .72);
  }

  #archives .archive-vessels {
    width: min(1360px, 86vw);
    gap: clamp(36px, 4vw, px);
    margin-top: clamp(90px, 13vh, 150px);
    align-items: center;
  }

  #archives .archive-vessel-stage {
    height: clamp(430px, 58vh, 640px);
  }

  #archives .archive-vessel-index {
    font-size: 11px;
  }

  #archives .archive-vessel-image {
    max-height: 100%;
  }

  /* 三罐位置微調 */
  #archives .archive-vessel-visual .archive-vessel-image {
    margin-top: 18px;
    height: 95%;
  }

  #archives .archive-vessel-audio .archive-vessel-image {
    margin-top: 2px;
    height: 98%;
  }

  #archives .archive-vessel-sealed .archive-vessel-image {
    margin-top: 16px;
    height: 94%;
  }

  #archives .archive-vessel-label {
    margin-top: 2px;
    padding-top: 16px;
  }

  #archives .archive-vessel-label em {
    font-size: 9px;
  }

  #archives .archive-vessel-label strong {
    font-size: 36px;
    margin-bottom: 9px;
  }

  #archives .archive-vessel-label span {
    font-size: 13px;
    line-height: 1.7;
  }

  #archives .archive-vessel-seal {
    width: 44px;
    height: 44px;
    bottom: 104px;
  }

  #archives .archive-vessel-seal span {
    font-size: 15px;
  }

  #archives .archives-vessel-footer span,
  #archives .archives-vessel-footer em {
    font-size: 9px;
  }


  /* =====================================================
     影藏 / 景藏 內頁
  ====================================================== */

  #archives .archive-visual-tabs {
    left: 42px;
    top: 34px;
    gap: 6px;
  }

  #archives .archive-visual-tab {
    min-width: 180px;
    padding: 13px 18px 14px;
  }

  #archives .archive-visual-tab span {
    font-size: 9px;
    margin-bottom: 5px;
  }

  #archives .archive-visual-tab strong {
    font-size: 22px;
  }

  #archives .archive-visual-tab em {
    font-size: 8px;
    margin-top: 5px;
  }

  #archives .archive-visual-counter {
    right: 92px;
    top: 38px;
    gap: 8px;
  }

  #archives .archive-visual-counter span {
    font-size: 36px;
  }

  #archives .archive-visual-counter i,
  #archives .archive-visual-counter em {
    font-size: 12px;
  }

  #archives .archive-visual-caption {
    left: 42px;
    bottom: 42px;
    max-width: 700px;
  }

  #archives .archive-visual-kind {
    font-size: 10px;
    margin-bottom: 8px;
  }

  #archives .archive-visual-caption h2 {
    font-size: clamp(40px, 2.8vw, 56px) !important;
    line-height: 1.18;
  }

  #archives .archive-visual-caption p {
    margin-top: 12px;
    font-size: 17px;
    line-height: 1.85;
    color: rgba(229, 217, 197, .76);
  }

  #archives .archive-visual-controls {
    bottom: 38px;
    gap: 20px;
  }

  #archives .archive-visual-controls > button {
    width: 46px;
    height: 46px;
    font-size: 16px;
  }

  #archives .archive-visual-dot {
    width: 7px;
    height: 7px;
  }


  /* =====================================================
     聲藏 內頁
  ====================================================== */

  #archives .audio-archive-shell {
    width: min(1500px, 92vw);
    height: min(830px, 88vh);
    grid-template-columns: minmax(430px, .96fr) minmax(580px, 1.18fr);
  }

  #archives .audio-archive-now {
    padding: 72px 72px;
  }

  #archives .audio-archive-kicker {
    top: 48px;
    left: 72px;
  }

  #archives .audio-archive-kicker span {
    font-size: 11px;
  }

  #archives .audio-archive-kicker em {
    font-size: 9px;
  }

  #archives .audio-archive-small {
    font-size: 14px;
    margin-bottom: 46px;
  }

  #archives .audio-archive-status {
    font-size: 9px;
    margin-bottom: 16px;
  }

  #archives .audio-archive-number {
    font-size: 18px;
  }

  #archives .audio-archive-now h2 {
    font-size: clamp(54px, 4.2vw, 80px) !important;
  }

  #archives .audio-archive-subtitle {
    font-size: 12px;
    margin-top: 16px;
  }

  #archives .audio-vinyl-label strong {
    font-size: 38px;
  }

  #archives .audio-vinyl-label em {
    font-size: 11px;
  }

  #archives .audio-vinyl-now span,
  #archives .audio-vinyl-now em {
    font-size: 10px;
  }

  #archives .audio-vinyl-credit {
    font-size: 15px;
    line-height: 1.8;
  }

  #archives .audio-vinyl-controls {
    gap: 16px;
  }

  #archives .audio-vinyl-control > span {
    font-size: 16px;
  }

  #archives .audio-vinyl-control > em {
    font-size: 12px;
  }

  #archives .audio-vinyl-volume > span {
    font-size: 11px;
  }

  #archives .audio-archive-progress {
    width: min(470px, 100%);
    margin-top: 58px;
  }

  #archives .audio-archive-time {
    font-size: 11px;
    margin-top: 9px;
  }

  #archives .audio-archive-library {
    padding: 58px 64px;
  }

  #archives .audio-archive-library-head span {
    font-size: 9px;
  }

  #archives .audio-archive-library-head strong {
    font-size: 34px;
  }

  #archives .audio-archive-library-head > em {
    font-size: 9px;
  }

  #archives .audio-archive-track {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 24px 10px;
  }

  #archives .audio-archive-track-number {
    font-size: 13px;
  }

  #archives .audio-archive-track-copy strong {
    font-size: 21px;
  }

  #archives .audio-archive-track-copy em {
    font-size: 10px;
  }

  #archives .audio-archive-track-state {
    font-size: 9px;
  }


  /* =====================================================
     秘藏 內頁｜整體字體放大
  ====================================================== */

  #archives .sealed-vault {
    width: min(1580px, 94vw);
    height: min(860px, 90vh);
  }

  #archives .sealed-vault-header {
    left: 52px;
    top: 44px;
  }

  #archives .sealed-vault-kicker span {
    font-size: 11px;
  }

  #archives .sealed-vault-kicker em {
    font-size: 10px;
  }

  #archives .sealed-vault-header > p {
    margin: 22px 0 6px;
    font-size: 15px;
  }

  #archives .sealed-vault-header h2 {
    font-size: 58px !important;
  }

  #archives .sealed-vault-core {
    left: 33%;
    top: 43%;
    width: min(410px, 29vw);
  }

  #archives .sealed-rune {
    font-size: 14px;
  }

  #archives .sealed-vault-mark {
    width: 166px;
    height: 166px;
  }

  #archives .sealed-vault-mark span,
  #archives .sealed-vault-mark em {
    font-size: 8px;
  }

  #archives .sealed-vault-mark strong {
    font-size: 72px;
  }

  #archives .sealed-progress-panel {
    left: 52px;
    right: 52px;
    bottom: 42px;
    grid-template-columns: 150px minmax(0, 1fr) 280px;
    align-items: start;
    gap: 28px;
    padding-top: 22px;
  }

  #archives .sealed-progress-copy > span {
    font-size: 9px;
  }

  #archives .sealed-progress-copy b {
    font-size: 38px;
  }

  #archives .sealed-progress-copy i {
    font-size: 14px;
  }

  #archives .sealed-progress-status {
    font-size: 14px;
    line-height: 1.8;
    text-align: right;
  }

  /* 舊直線進度保留資料用途，視覺先隱藏 */
  #archives .sealed-progress-track,
  #archives .sealed-progress-labels {
    display: none;
  }

  #archives .sealed-progress-main {
    min-width: 0;
  }

  #archives .sealed-tier-list {
    right: 56px;
    top: 49%;
    width: min(460px, 31vw);
  }

  #archives .sealed-tier {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 16px;
    padding: 28px 10px;
  }

  #archives .sealed-tier-index {
    font-size: 13px;
  }

  #archives .sealed-tier-copy em {
    font-size: 9px;
  }

  #archives .sealed-tier-copy strong {
    font-size: 28px;
  }

  #archives .sealed-tier-copy small {
    font-size: 13px;
  }

  #archives .sealed-tier-state {
    font-size: 10px;
  }


    /* =====================================================
     秘藏｜30日解封板（由 JS 動態插入）
  ====================================================== */

  #archives .sealed-checkin-wrap {
    display: grid;
    gap: 14px;
  }

  #archives .sealed-checkin-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
  }

  #archives .sealed-checkin-button {
    min-width: 148px;
    padding: 10px 18px;
    border: 1px solid rgba(196, 149, 93, .34);
    background:
      linear-gradient(
        180deg,
        rgba(49, 27, 23, .78),
        rgba(13, 10, 11, .92)
      );
    color: rgba(241, 223, 196, .92);
    font-size: 13px;
    letter-spacing: .16em;
    cursor: pointer;
    transition:
      border-color .25s ease,
      background .25s ease,
      transform .25s ease;
  }

  #archives .sealed-checkin-button:hover:not(:disabled) {
    border-color: rgba(221, 173, 108, .68);
    transform: translateY(-1px);
  }

  #archives .sealed-checkin-button:disabled {
    opacity: .48;
    cursor: default;
  }

  #archives .sealed-checkin-tip {
    margin: 0;
    color: rgba(212, 197, 173, .62);
    font-size: 12px;
    line-height: 1.75;
    letter-spacing: .04em;
  }

  #archives .sealed-checkin-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 10px 8px;
  }

  #archives .sealed-day-slot {
    position: relative;
    min-height: 58px;
    padding: 0;
    border: 1px solid rgba(174, 118, 78, .14);
    background:
      linear-gradient(
        180deg,
        rgba(10, 11, 15, .88),
        rgba(4, 5, 8, .96)
      );
    overflow: hidden;
    clip-path: polygon(
      6% 0,
      94% 0,
      100% 16%,
      100% 84%,
      94% 100%,
      6% 100%,
      0 84%,
      0 16%
    );
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.015),
      0 0 0 1px rgba(0,0,0,.08);
  }

  #archives .sealed-day-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(
        90deg,
        transparent 0%,
        rgba(188, 142, 88, .06) 50%,
        transparent 100%
      );
    pointer-events: none;
  }

  #archives .sealed-day-slot.is-today {
    box-shadow:
      0 0 0 1px rgba(214, 171, 108, .28),
      0 0 18px rgba(112, 63, 45, .10),
      inset 0 0 18px rgba(112, 63, 45, .06);
  }

  #archives .sealed-day-slot > b {
    position: absolute;
    left: 8px;
    top: 6px;
    color: rgba(191, 150, 89, .42);
    font-family: Georgia, serif;
    font-size: 8px;
    font-weight: 400;
    letter-spacing: .08em;
    line-height: 1;
    z-index: 2;
  }

  #archives .sealed-strip-seal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(162, 73, 65, .80);
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
    text-shadow: 0 0 14px rgba(144, 48, 43, .16);
    transition: opacity .28s ease;
  }

  #archives .sealed-strip-stamp {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 34px;
    height: 34px;
    object-fit: contain;
    transform: translate(-50%, -50%) rotate(-8deg);
    opacity: .96;
    filter:
      drop-shadow(0 0 10px rgba(194, 146, 89, .18))
      saturate(1.02);
  }

  #archives .sealed-day-slot.is-open {
    border-color: rgba(205, 160, 96, .32);
    background:
      linear-gradient(
        180deg,
        rgba(58, 33, 24, .42),
        rgba(12, 10, 12, .94)
      );
    box-shadow:
      inset 0 0 18px rgba(122, 57, 39, .07);
  }

  #archives .sealed-day-slot.is-open .sealed-strip-seal {
    opacity: .18;
  }

  #archives .sealed-day-slot.is-missed {
    opacity: .92;
  }

  @media (max-width: 850px) {
    #archives .sealed-checkin-grid {
      grid-template-columns: repeat(8, minmax(0, 1fr));
    }
  }

}
/* =========================================================
   05｜秘藏 最終覆蓋修正
   上方散落封條 ＋ 下方三個解封按鈕
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault {
  position: relative !important;
  overflow: hidden !important;
}


/* =========================
   中央大封印位置微調
========================= */
#archives
[data-archive-content="sealed"]
.sealed-vault-core {
  left: 34% !important;
  top: 43% !important;
  width: min(430px, 31vw) !important;
  z-index: 8 !important;
}


/* =========================
   上方散落封條區
========================= */
#archives
[data-archive-content="sealed"]
.sealed-strip-cloud {
  position: absolute !important;
  left: 360px !important;
  right: 68px !important;
  top: 34px !important;
  height: 180px !important;
  z-index: 20 !important;
  pointer-events: none !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper {
  position: absolute !important;
  width: 88px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(144, 92, 58, .42) !important;
  background:
    linear-gradient(
      180deg,
      rgba(44, 28, 24, .88) 0%,
      rgba(21, 12, 11, .94) 100%
    ) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(209, 154, 92, .05) !important;
  border-radius: 4px !important;
  transform:
    rotate(var(--paper-rotate, 0deg))
    scale(var(--paper-scale, 1)) !important;
  transform-origin: center center !important;
  cursor: pointer !important;
  pointer-events: auto !important;
  overflow: hidden !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    opacity .22s ease,
    filter .22s ease !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper:hover {
  transform:
    rotate(var(--paper-rotate, 0deg))
    scale(calc(var(--paper-scale, 1) + .04))
    translateY(-2px) !important;
  border-color: rgba(196, 136, 87, .72) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .34),
    0 0 14px rgba(155, 74, 51, .14) !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper:focus-visible {
  outline: none !important;
  border-color: rgba(220, 171, 109, .88) !important;
  box-shadow:
    0 0 0 1px rgba(220, 171, 109, .35),
    0 10px 24px rgba(0, 0, 0, .35) !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-locked {
  opacity: .92 !important;
  filter: grayscale(.08) brightness(.86) !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-available {
  opacity: 1 !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-opened {
  border-color: rgba(199, 149, 91, .72) !important;
  background:
    linear-gradient(
      180deg,
      rgba(55, 33, 26, .90) 0%,
      rgba(19, 12, 12, .95) 100%
    ) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .34),
    0 0 16px rgba(170, 88, 61, .16) !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper-no {
  position: absolute !important;
  left: 8px !important;
  top: 6px !important;
  color: rgba(206, 184, 156, .72) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  line-height: 1 !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper-seal {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: rgba(177, 65, 57, .88) !important;
  font-size: 27px !important;
  line-height: 1 !important;
  text-shadow: 0 0 14px rgba(159, 54, 49, .18) !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper-stamp {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper-stamp img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  opacity: .94 !important;
  filter:
    drop-shadow(0 0 8px rgba(223, 172, 109, .10))
    saturate(.95) !important;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-burning {
  animation: sealedPaperBurn .9s ease forwards !important;
}


@keyframes sealedPaperBurn {
  0% {
    filter: brightness(1);
    opacity: 1;
  }

  25% {
    filter: brightness(1.8) saturate(1.15);
    box-shadow:
      0 0 22px rgba(255, 122, 56, .18),
      0 0 38px rgba(255, 87, 34, .12);
  }

  55% {
    filter: brightness(2.2);
    box-shadow:
      0 0 34px rgba(255, 152, 85, .22),
      0 0 58px rgba(255, 93, 45, .16);
  }

  100% {
    filter: brightness(1);
    opacity: 1;
  }
}


/* =========================
   下方進度列
========================= */
#archives
[data-archive-content="sealed"]
.sealed-progress-panel {
  left: 48px !important;
  right: 48px !important;
  bottom: 28px !important;
  z-index: 14 !important;
  grid-template-columns: 130px minmax(260px, 1fr) 220px !important;
  gap: 22px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-progress-status {
  text-align: right !important;
  font-size: 12px !important;
}


/* =========================
   右邊初封深封終封
   改成下方三個按鈕
========================= */
#archives
[data-archive-content="sealed"]
.sealed-tier-list {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 112px !important;
  transform: translateX(-50%) !important;
  width: min(1040px, calc(100% - 96px)) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  border-top: 0 !important;
  z-index: 16 !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 110px !important;
  padding: 18px 18px !important;
  border: 1px solid rgba(176, 121, 80, .18) !important;
  border-bottom: 1px solid rgba(176, 121, 80, .18) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(
      180deg,
      rgba(14, 15, 20, .92) 0%,
      rgba(8, 9, 13, .96) 100%
    ) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .20),
    inset 0 0 0 1px rgba(255, 255, 255, .015) !important;
  color: rgba(181, 170, 151, .48) !important;
  text-align: left !important;
  cursor: default !important;
  transition:
    transform .22s ease,
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier-index {
  color: rgba(183, 124, 81, .48) !important;
  font-size: 12px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier-copy {
  display: grid !important;
  gap: 6px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier-copy em {
  color: rgba(167, 115, 79, .45) !important;
  font-size: 9px !important;
  letter-spacing: .20em !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier-copy strong {
  color: inherit !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: .10em !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  color: rgba(193, 179, 156, .44) !important;
  font-size: 12px !important;
  letter-spacing: .05em !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier-state {
  color: rgba(142, 62, 56, .62) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked {
  color: rgba(238, 220, 193, .92) !important;
  cursor: pointer !important;
  background:
    linear-gradient(
      180deg,
      rgba(59, 28, 26, .88) 0%,
      rgba(17, 11, 13, .96) 100%
    ) !important;
  border-color: rgba(199, 149, 91, .42) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, .26),
    0 0 18px rgba(153, 73, 48, .10) !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(213, 164, 97, .16) !important;
  pointer-events: none !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked .sealed-tier-state {
  color: rgba(220, 171, 100, .88) !important;
}


#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked:hover {
  transform: translateY(-3px) !important;
  background:
    linear-gradient(
      180deg,
      rgba(74, 34, 29, .92) 0%,
      rgba(21, 13, 14, .98) 100%
    ) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .30),
    0 0 22px rgba(180, 86, 55, .14) !important;
}


/* =========================
   小螢幕保底
========================= */
@media (max-width: 850px) {

  #archives
  [data-archive-content="sealed"]
  .sealed-strip-cloud {
    left: 300px !important;
    right: 38px !important;
    top: 28px !important;
    height: 160px !important;
  }

  #archives
  [data-archive-content="sealed"]
  .sealed-day-paper {
    width: 78px !important;
    height: 38px !important;
  }

  #archives
  [data-archive-content="sealed"]
  .sealed-tier-list {
    width: calc(100% - 72px) !important;
    bottom: 118px !important;
    gap: 12px !important;
  }

  #archives
  [data-archive-content="sealed"]
  .sealed-tier {
    min-height: 100px !important;
    padding: 16px 14px !important;
  }

  #archives
  [data-archive-content="sealed"]
  .sealed-tier-copy strong {
    font-size: 24px !important;
  }
}
/* =========================================================
   05｜秘藏 微調最終版
   - 大封印置中
   - 封條散落在周圍
   - 初封/深封/終封改成立體可按按鈕
========================================================= */

/* =========================
   1) 大封印置中
========================= */
#archives
[data-archive-content="sealed"]
.sealed-vault-core {
  left: 50% !important;
  top: 44% !important;
  width: min(430px, 30vw) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 12 !important;
}


/* =========================
   2) 封條散落區：圍繞大封印
========================= */
#archives
[data-archive-content="sealed"]
.sealed-strip-cloud {
  position: absolute !important;
  left: 50% !important;
  top: 41% !important;
  width: min(1100px, 76vw) !important;
  height: min(520px, 58vh) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 18 !important;
  pointer-events: none !important;
}

#archives
[data-archive-content="sealed"]
.sealed-day-paper {
  position: absolute !important;
  width: 88px !important;
  height: 42px !important;
  padding: 0 !important;
  border: 1px solid rgba(150, 93, 68, .42) !important;
  border-radius: 4px !important;
  background:
    linear-gradient(
      180deg,
      rgba(48, 27, 24, .90) 0%,
      rgba(22, 13, 12, .96) 100%
    ) !important;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, .30),
    inset 0 0 0 1px rgba(206, 146, 96, .05) !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transform:
    rotate(var(--paper-rotate, 0deg))
    scale(var(--paper-scale, 1)) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease,
    opacity .22s ease !important;
}

#archives
[data-archive-content="sealed"]
.sealed-day-paper:hover {
  transform:
    rotate(var(--paper-rotate, 0deg))
    scale(calc(var(--paper-scale, 1) + .04))
    translateY(-3px) !important;
  border-color: rgba(200, 138, 92, .78) !important;
  box-shadow:
    0 16px 28px rgba(0, 0, 0, .34),
    0 0 14px rgba(164, 73, 47, .14) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-opened {
  border-color: rgba(210, 156, 99, .74) !important;
  box-shadow:
    0 14px 30px rgba(0, 0, 0, .34),
    0 0 18px rgba(180, 84, 61, .18) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-day-paper-no {
  position: absolute !important;
  left: 8px !important;
  top: 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
  color: rgba(210, 187, 160, .72) !important;
  letter-spacing: .08em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-day-paper-seal {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 27px !important;
  line-height: 1 !important;
  color: rgba(177, 67, 57, .88) !important;
  text-shadow: 0 0 14px rgba(169, 63, 55, .18) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-day-paper-stamp {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  pointer-events: none !important;
}

#archives
[data-archive-content="sealed"]
.sealed-day-paper-stamp img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
  opacity: .96 !important;
  filter:
    drop-shadow(0 0 8px rgba(223, 176, 109, .14))
    saturate(.98) !important;
}


/* =========================
   2-2) 封條位置：散落在大封印四周
========================= */
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(1)  { left: 16%; top: 10%; --paper-rotate: -7deg; --paper-scale: 1.00; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(2)  { left: 27%; top: 7%;  --paper-rotate:  5deg; --paper-scale: .98; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(3)  { left: 39%; top: 11%; --paper-rotate: -8deg; --paper-scale: 1.02; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(4)  { left: 51%; top: 8%;  --paper-rotate:  6deg; --paper-scale: .99; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(5)  { left: 63%; top: 10%; --paper-rotate: -5deg; --paper-scale: 1.01; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(6)  { left: 74%; top: 8%;  --paper-rotate:  4deg; --paper-scale: 1.00; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(7)  { left: 12%; top: 23%; --paper-rotate:  7deg; --paper-scale: .97; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(8)  { left: 82%; top: 23%; --paper-rotate: -6deg; --paper-scale: 1.03; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(9)  { left: 20%; top: 31%; --paper-rotate: -9deg; --paper-scale: 1.00; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(10) { left: 72%; top: 30%; --paper-rotate:  8deg; --paper-scale: 1.00; }

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(11) { left: 9%;  top: 43%; --paper-rotate:  4deg; --paper-scale: .98; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(12) { left: 25%; top: 48%; --paper-rotate:  6deg; --paper-scale: 1.02; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(13) { left: 38%; top: 53%; --paper-rotate: -7deg; --paper-scale: 1.00; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(14) { left: 53%; top: 51%; --paper-rotate:  5deg; --paper-scale: .99; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(15) { left: 68%; top: 49%; --paper-rotate: -5deg; --paper-scale: 1.01; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(16) { left: 82%; top: 43%; --paper-rotate:  9deg; --paper-scale: .98; }

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(17) { left: 17%; top: 60%; --paper-rotate: -6deg; --paper-scale: 1.02; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(18) { left: 31%; top: 67%; --paper-rotate:  8deg; --paper-scale: .98; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(19) { left: 45%; top: 71%; --paper-rotate: -4deg; --paper-scale: 1.00; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(20) { left: 59%; top: 69%; --paper-rotate:  7deg; --paper-scale: 1.01; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(21) { left: 73%; top: 65%; --paper-rotate: -8deg; --paper-scale: .99; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(22) { left: 84%; top: 59%; --paper-rotate:  5deg; --paper-scale: 1.03; }

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(23) { left: 23%; top: 18%; --paper-rotate: -3deg; --paper-scale: .96; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(24) { left: 47%; top: 20%; --paper-rotate:  9deg; --paper-scale: 1.00; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(25) { left: 67%; top: 18%; --paper-rotate: -7deg; --paper-scale: .97; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(26) { left: 14%; top: 55%; --paper-rotate:  6deg; --paper-scale: .99; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(27) { left: 35%; top: 61%; --paper-rotate: -8deg; --paper-scale: 1.02; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(28) { left: 58%; top: 60%; --paper-rotate:  3deg; --paper-scale: .98; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(29) { left: 77%; top: 55%; --paper-rotate: -6deg; --paper-scale: 1.00; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(30) { left: 89%; top: 47%; --paper-rotate:  7deg; --paper-scale: .97; }


/* =========================
   3) 三個封印按鈕：更像可按按鈕
========================= */
#archives
[data-archive-content="sealed"]
.sealed-tier-list {
  position: absolute !important;
  left: 50% !important;
  bottom: 104px !important;
  width: min(860px, calc(100% - 120px)) !important;
  transform: translateX(-50%) !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
  z-index: 16 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 106px !important;
  padding: 18px 18px !important;
  border: 1px solid rgba(174, 119, 81, .18) !important;
  border-radius: 12px !important;
  background:
    linear-gradient(
      180deg,
      rgba(10, 13, 20, .90) 0%,
      rgba(7, 8, 12, .96) 100%
    ) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .015) !important;
  transform: translateY(0) scale(1) !important;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .22s ease !important;
  cursor: pointer !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier:hover {
  transform: translateY(-6px) scale(1.012) !important;
  border-color: rgba(196, 145, 95, .34) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, .28),
    0 0 10px rgba(170, 82, 58, .08) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier:active {
  transform: translateY(-1px) scale(.988) !important;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, .24),
    inset 0 2px 8px rgba(0, 0, 0, .25) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-index {
  color: rgba(185, 127, 84, .56) !important;
  font-size: 12px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy em {
  color: rgba(168, 117, 80, .45) !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy strong {
  font-size: 28px !important;
  font-weight: 400 !important;
  letter-spacing: .08em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  font-size: 12px !important;
  color: rgba(198, 183, 160, .46) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-state {
  font-size: 10px !important;
  letter-spacing: .18em !important;
  color: rgba(146, 70, 61, .52) !important;
}


/* 未解鎖：暗 */
#archives
[data-archive-content="sealed"]
.sealed-tier:not(.is-unlocked) {
  color: rgba(176, 165, 149, .62) !important;
  filter: saturate(.85) brightness(.92) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier:not(.is-unlocked):hover {
  color: rgba(205, 189, 164, .78) !important;
}


/* 已解鎖：亮 */
#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked {
  color: rgba(241, 224, 198, .96) !important;
  border-color: rgba(206, 154, 96, .48) !important;
  background:
    linear-gradient(
      180deg,
      rgba(58, 27, 24, .90) 0%,
      rgba(14, 10, 12, .97) 100%
    ) !important;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, .26),
    0 0 18px rgba(190, 92, 64, .14),
    inset 0 0 0 1px rgba(224, 174, 108, .12) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked:hover {
  transform: translateY(-7px) scale(1.018) !important;
  border-color: rgba(223, 172, 110, .72) !important;
  box-shadow:
    0 22px 38px rgba(0, 0, 0, .30),
    0 0 26px rgba(219, 126, 82, .20),
    0 0 54px rgba(219, 126, 82, .10) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked .sealed-tier-state {
  color: rgba(227, 180, 113, .92) !important;
}


/* =========================
   4) 小螢幕保底
========================= */
@media (max-width: 850px) {
  #archives
  [data-archive-content="sealed"]
  .sealed-strip-cloud {
    width: min(1000px, 78vw) !important;
    height: min(470px, 54vh) !important;
    top: 40% !important;
  }

  #archives
  [data-archive-content="sealed"]
  .sealed-tier-list {
    width: calc(100% - 100px) !important;
    bottom: 96px !important;
  }
}
/* =========================================================
   05｜秘藏：封條貼滿上半部 + 三按鈕下移
   直接貼在 style.css 最底部
========================================================= */

/* --- 大封印維持正中 --- */
#archives
[data-archive-content="sealed"]
.sealed-vault-core {
  left: 50% !important;
  top: 44% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 12 !important;
}


/* --- 封條散落區：貼滿整個上半部 --- */
#archives
[data-archive-content="sealed"]
.sealed-strip-cloud {
  position: absolute !important;
  left: 50% !important;
  top: 42% !important;
  width: calc(100% - 120px) !important;
  height: 72% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 18 !important;
}

/* 單張封條 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper {
  position: absolute !important;
  width: 96px !important;
  height: 44px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(168, 88, 72, 0.38) !important;
  background: linear-gradient(
    180deg,
    rgba(58, 28, 24, 0.92) 0%,
    rgba(22, 12, 12, 0.96) 100%
  ) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 150, 110, 0.04) !important;
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease !important;
  cursor: pointer !important;
}

#archives
[data-archive-content="sealed"]
.sealed-day-paper:hover {
  transform: scale(1.04) translateY(-2px) rotate(var(--paper-rotate, 0deg)) !important;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.3),
    0 0 16px rgba(198, 92, 72, 0.14) !important;
}

/* 你現在要的：整頁亂貼感 */
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(1)  { left: 02%; top: 22%; --paper-rotate: -15deg; transform: rotate(-15deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(2)  { left: 19%; top: 14%; --paper-rotate: 12deg;  transform: rotate(12deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(3)  { left: 36%; top: 07%; --paper-rotate: -11deg; transform: rotate(-11deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(4)  { left: 56%; top: 03%; --paper-rotate: 14deg;  transform: rotate(14deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(5)  { left: 74%; top: 08%; --paper-rotate: -9deg;  transform: rotate(-9deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(6)  { left: 90%; top: 14%; --paper-rotate: 16deg;  transform: rotate(16deg) !important; }

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(7)  { left: 10%; top: 38%; --paper-rotate: 18deg;  transform: rotate(18deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(8)  { left: 27%; top: 31%; --paper-rotate: -17deg; transform: rotate(-17deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(9)  { left: 47%; top: 24%; --paper-rotate: 13deg;  transform: rotate(13deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(10) { left: 66%; top: 34%; --paper-rotate: -12deg; transform: rotate(-12deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(11) { left: 84%; top: 25%; --paper-rotate: 15deg;  transform: rotate(15deg) !important; }

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(12) { left: 04%; top: 55%; --paper-rotate: -14deg; transform: rotate(-14deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(13) { left: 18%; top: 67%; --paper-rotate: 10deg;  transform: rotate(10deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(14) { left: 31%; top: 50%; --paper-rotate: -19deg; transform: rotate(-19deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(15) { left: 43%; top: 74%; --paper-rotate: 16deg;  transform: rotate(16deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(16) { left: 58%; top: 61%; --paper-rotate: -13deg; transform: rotate(-13deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(17) { left: 72%; top: 52%; --paper-rotate: 11deg;  transform: rotate(11deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(18) { left: 89%; top: 63%; --paper-rotate: -18deg; transform: rotate(-18deg) !important; }

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(19) { left: 08%; top: 16%; --paper-rotate: 14deg;  transform: rotate(14deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(20) { left: 24%; top: 59%; --paper-rotate: -10deg; transform: rotate(-10deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(21) { left: 39%; top: 43%; --paper-rotate: 18deg;  transform: rotate(18deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(22) { left: 52%; top: 16%; --paper-rotate: -15deg; transform: rotate(-15deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(23) { left: 63%; top: 45%; --paper-rotate: 12deg;  transform: rotate(12deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(24) { left: 78%; top: 36%; --paper-rotate: -17deg; transform: rotate(-17deg) !important; }

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(25) { left: 13%; top: 82%; --paper-rotate: -5deg;  transform: rotate(-5deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(26) { left: 33%; top: 84%; --paper-rotate: 17deg;  transform: rotate(17deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(27) { left: 53%; top: 83%; --paper-rotate: -11deg; transform: rotate(-11deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(28) { left: 73%; top: 82%; --paper-rotate: 15deg;  transform: rotate(15deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(29) { left: 86%; top: 76%; --paper-rotate: -16deg; transform: rotate(-16deg) !important; }
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(30) { left: 93%; top: 33%; --paper-rotate: 8deg;   transform: rotate(8deg) !important; }


/* --- 三個按鈕：再往下移 --- */
#archives
[data-archive-content="sealed"]
.sealed-tier-list {
  position: absolute !important;
  left: 50% !important;
  bottom: 16px !important;   /* 要更下面就改更小，例如 8px */
  transform: translateX(-50%) !important;
  width: min(860px, calc(100% - 120px)) !important;
  z-index: 14 !important;
}

/* 讓三個按鈕維持可按感 */
#archives
[data-archive-content="sealed"]
.sealed-tier {
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier:hover {
  transform: translateY(-5px) scale(1.015) !important;
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.24),
    0 0 16px rgba(200, 120, 80, 0.12) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked {
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.26),
    0 0 18px rgba(224, 136, 92, 0.18) !important;
}
/* =========================================================
   05｜秘藏｜局部安全修正版
   只改：
   1. 封條放大
   2. 30張封條重新散落
   3. 文字放大
   4. 三封按鈕＋分隔線
========================================================= */


/* =========================================================
   A｜封條活動範圍
   不動整個05，只讓封條可以灑滿秘藏畫面
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-strip-cloud {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  transform: none !important;

  z-index: 18 !important;

  pointer-events: none !important;
}


/* =========================================================
   B｜單張封條放大
   之後解封換成家紋時有足夠空間
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper {
  width: 126px !important;
  height: 68px !important;

  padding: 0 !important;

  pointer-events: auto !important;

  border:
    1px solid
    rgba(174, 86, 70, .42)
    !important;

  border-radius:
    7px !important;

  background:
    linear-gradient(
      180deg,
      rgba(58, 27, 24, .92),
      rgba(22, 12, 12, .97)
    ) !important;

  box-shadow:
    0 10px 24px
    rgba(0, 0, 0, .25),
    inset 0 0 0 1px
    rgba(240, 160, 110, .035)
    !important;

  transform:
    rotate(var(--paper-rotate, 0deg))
    scale(var(--paper-scale, 1))
    !important;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    filter .22s ease
    !important;
}


/* 封條編號 */

#archives
[data-archive-content="sealed"]
.sealed-day-paper-no {
  left: 9px !important;
  top: 8px !important;

  font-size: 11px !important;

  color:
    rgba(210, 188, 161, .68)
    !important;
}


/* 未解封的「封」 */

#archives
[data-archive-content="sealed"]
.sealed-day-paper-seal {
  font-size: 34px !important;

  color:
    rgba(181, 66, 58, .88)
    !important;
}


/* 解封後的家紋 */

#archives
[data-archive-content="sealed"]
.sealed-day-paper-stamp img {
  width: 48px !important;
  height: 48px !important;

  object-fit:
    contain !important;

  filter:
    drop-shadow(
      0 0 10px
      rgba(223, 171, 105, .18)
    )
    !important;
}


/* 封條 hover */

#archives
[data-archive-content="sealed"]
.sealed-day-paper:hover {
  transform:
    rotate(var(--paper-rotate, 0deg))
    scale(calc(var(--paper-scale, 1) + .05))
    translateY(-4px)
    !important;

  border-color:
    rgba(207, 137, 92, .72)
    !important;

  box-shadow:
    0 17px 30px
    rgba(0, 0, 0, .30),
    0 0 18px
    rgba(184, 81, 57, .12)
    !important;
}


/* =========================================================
   C｜30張封條重新散落
   左上故意留白，不壓「秘藏」標題
   中央可以壓到封印圈
========================================================= */

/* 01–05 */
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(1)  {
  left: 22% !important;
  top: 10% !important;
  --paper-rotate: -13deg !important;
  --paper-scale: 1.00 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(2)  {
  left: 36% !important;
  top: 7% !important;
  --paper-rotate: 9deg !important;
  --paper-scale: .94 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(3)  {
  left: 53% !important;
  top: 10% !important;
  --paper-rotate: -8deg !important;
  --paper-scale: 1.04 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(4)  {
  left: 69% !important;
  top: 7% !important;
  --paper-rotate: 12deg !important;
  --paper-scale: .96 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(5)  {
  left: 85% !important;
  top: 12% !important;
  --paper-rotate: -10deg !important;
  --paper-scale: 1.00 !important;
}


/* 06–10 */
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(6)  {
  left: 17% !important;
  top: 24% !important;
  --paper-rotate: 14deg !important;
  --paper-scale: .96 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(7)  {
  left: 30% !important;
  top: 20% !important;
  --paper-rotate: -7deg !important;
  --paper-scale: 1.03 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(8)  {
  left: 45% !important;
  top: 25% !important;
  --paper-rotate: 11deg !important;
  --paper-scale: .95 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(9)  {
  left: 65% !important;
  top: 21% !important;
  --paper-rotate: -14deg !important;
  --paper-scale: 1.04 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(10) {
  left: 83% !important;
  top: 27% !important;
  --paper-rotate: 8deg !important;
  --paper-scale: .96 !important;
}


/* 11–15 */
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(11) {
  left: 7% !important;
  top: 36% !important;
  --paper-rotate: -16deg !important;
  --paper-scale: .96 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(12) {
  left: 23% !important;
  top: 39% !important;
  --paper-rotate: 10deg !important;
  --paper-scale: 1.04 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(13) {
  left: 38% !important;
  top: 34% !important;
  --paper-rotate: -11deg !important;
  --paper-scale: .94 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(14) {
  left: 54% !important;
  top: 38% !important;
  --paper-rotate: 14deg !important;
  --paper-scale: 1.02 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(15) {
  left: 76% !important;
  top: 37% !important;
  --paper-rotate: -8deg !important;
  --paper-scale: .96 !important;
}


/* 16–20 */
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(16) {
  left: 14% !important;
  top: 53% !important;
  --paper-rotate: 13deg !important;
  --paper-scale: 1.00 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(17) {
  left: 28% !important;
  top: 57% !important;
  --paper-rotate: -15deg !important;
  --paper-scale: .95 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(18) {
  left: 43% !important;
  top: 50% !important;
  --paper-rotate: 8deg !important;
  --paper-scale: 1.03 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(19) {
  left: 62% !important;
  top: 54% !important;
  --paper-rotate: -12deg !important;
  --paper-scale: .96 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(20) {
  left: 86% !important;
  top: 52% !important;
  --paper-rotate: 11deg !important;
  --paper-scale: 1.00 !important;
}


/* 21–25 */
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(21) {
  left: 5% !important;
  top: 61% !important;
  --paper-rotate: -10deg !important;
  --paper-scale: .95 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(22) {
  left: 20% !important;
  top: 66% !important;
  --paper-rotate: 15deg !important;
  --paper-scale: 1.02 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(23) {
  left: 35% !important;
  top: 62% !important;
  --paper-rotate: -8deg !important;
  --paper-scale: .96 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(24) {
  left: 55% !important;
  top: 65% !important;
  --paper-rotate: 12deg !important;
  --paper-scale: 1.04 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(25) {
  left: 79% !important;
  top: 63% !important;
  --paper-rotate: -14deg !important;
  --paper-scale: .96 !important;
}


/* 26–30 */
#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(26) {
  left: 11% !important;
  top: 74% !important;
  --paper-rotate: 8deg !important;
  --paper-scale: .94 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(27) {
  left: 27% !important;
  top: 71% !important;
  --paper-rotate: -13deg !important;
  --paper-scale: 1.00 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(28) {
  left: 48% !important;
  top: 73% !important;
  --paper-rotate: 10deg !important;
  --paper-scale: .96 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(29) {
  left: 68% !important;
  top: 72% !important;
  --paper-rotate: -9deg !important;
  --paper-scale: 1.03 !important;
}

#archives [data-archive-content="sealed"] .sealed-day-paper:nth-child(30) {
  left: 88% !important;
  top: 70% !important;
  --paper-rotate: 14deg !important;
  --paper-scale: .95 !important;
}


/* =========================================================
   D｜整個秘藏頁文字放大
   只改字體，不改位置
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault-kicker span {
  font-size: 13px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-vault-kicker em {
  font-size: 11px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-vault-header > p {
  font-size: 18px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-vault-header h2 {
  font-size: 64px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy > span {
  font-size: 11px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy b {
  font-size: 44px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy i {
  font-size: 17px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-status {
  font-size: 15px !important;
  line-height: 1.7 !important;
}


/* =========================================================
   E｜三道秘藏按鈕
   只移按鈕列，不碰主頁
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-tier-list {
  left: 50% !important;
  right: auto !important;

  top: auto !important;
  bottom: 14px !important;

  width:
    min(900px, calc(100% - 160px))
    !important;

  transform:
    translateX(-50%)
    !important;

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr))
    !important;

  gap: 18px !important;

  border-top:
    0 !important;

  overflow:
    visible !important;
}


/* 三個按鈕字放大 */

#archives
[data-archive-content="sealed"]
.sealed-tier-index {
  font-size: 12px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy em {
  font-size: 10px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy strong {
  font-size: 30px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  font-size: 13px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-state {
  font-size: 11px !important;
}


/* =========================================================
   F｜原本長線不要了
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-progress-panel {
  border-top:
    0 !important;
}


/* =========================================================
   G｜在三個按鈕正上方畫新長線
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-tier-list::before {
  content: "";

  position: absolute;

  left: -330px;
  right: -330px;

  top: -20px;

  height: 1px;

  background:
    rgba(174, 118, 78, .15);

  pointer-events: none;
}


/* =========================================================
   H｜三個按鈕凸起感
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-tier {
  min-height: 98px !important;

  padding:
    17px 18px !important;

  border:
    1px solid
    rgba(178, 122, 82, .20)
    !important;

  border-radius:
    10px !important;

  background:
    linear-gradient(
      180deg,
      rgba(13, 14, 19, .94),
      rgba(7, 8, 12, .98)
    ) !important;

  box-shadow:
    0 9px 20px
    rgba(0, 0, 0, .20),
    inset 0 1px 0
    rgba(255, 255, 255, .025)
    !important;

  cursor:
    pointer !important;

  transition:
    transform .20s ease,
    border-color .20s ease,
    box-shadow .20s ease,
    filter .20s ease
    !important;
}


/* 未解封：滑過仍會凸起，但保持暗 */

#archives
[data-archive-content="sealed"]
.sealed-tier:not(.is-unlocked):hover {
  transform:
    translateY(-4px)
    !important;

  border-color:
    rgba(192, 139, 94, .32)
    !important;

  box-shadow:
    0 15px 28px
    rgba(0, 0, 0, .28)
    !important;
}


/* 按下去 */

#archives
[data-archive-content="sealed"]
.sealed-tier:active {
  transform:
    translateY(-1px)
    scale(.985)
    !important;
}


/* 已解封：平常就有一點亮 */

#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked {
  border-color:
    rgba(218, 163, 101, .48)
    !important;

  color:
    rgba(241, 224, 198, .96)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(61, 28, 24, .92),
      rgba(15, 10, 12, .98)
    ) !important;

  box-shadow:
    0 12px 25px
    rgba(0, 0, 0, .26),
    0 0 14px
    rgba(190, 88, 60, .10)
    !important;
}


/* 已解封 hover：明顯發亮＋凸起 */

#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked:hover {
  transform:
    translateY(-6px)
    scale(1.015)
    !important;

  border-color:
    rgba(231, 181, 115, .80)
    !important;

  box-shadow:
    0 20px 34px
    rgba(0, 0, 0, .30),

    0 0 24px
    rgba(216, 121, 77, .20),

    0 0 48px
    rgba(216, 121, 77, .09)
    !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier.is-unlocked
.sealed-tier-state {
  color:
    rgba(229, 181, 111, .92)
    !important;
}
/* =========================================================
   05｜秘藏
   封條圖片＋火燒解封動畫
   不修改任何定位
========================================================= */


/* 封條圖片本體 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper-art {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  pointer-events: none;
  user-select: none;

  transform: scale(1);

  opacity: 1;

  filter:
    brightness(1)
    saturate(1);

  transition:
    filter .25s ease,
    opacity .25s ease,
    transform .25s ease;
}


/* 圖片自己已經有封條外觀，
   舊 CSS 的背景／邊框盡量隱藏 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper {
  background:
    transparent !important;

  border-color:
    transparent !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;

  isolation:
    isolate;
}


/* 日期編號保留 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper-no {
  z-index: 6;

  color:
    rgba(236, 214, 181, .72)
    !important;

  text-shadow:
    0 1px 4px
    rgba(0, 0, 0, .75);
}


/* =========================================================
   火燒光
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper::before {
  content: "";

  position: absolute;
  inset: -8%;

  z-index: 7;

  pointer-events: none;

  opacity: 0;

  border-radius: 12px;

  background:
    radial-gradient(
      circle at 18% 75%,
      rgba(255, 226, 145, .95) 0 4%,
      rgba(255, 117, 42, .82) 5% 11%,
      rgba(183, 38, 21, .38) 12% 20%,
      transparent 32%
    ),
    radial-gradient(
      circle at 72% 28%,
      rgba(255, 215, 122, .92) 0 3%,
      rgba(255, 103, 36, .72) 5% 10%,
      rgba(163, 36, 24, .30) 12% 20%,
      transparent 31%
    );

  filter:
    blur(4px);
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper::after {
  content: "";

  position: absolute;
  inset: -5%;

  z-index: 8;

  pointer-events: none;

  opacity: 0;

  border:
    2px solid
    rgba(255, 118, 53, .0);

  border-radius: 10px;

  box-shadow:
    0 0 0
    rgba(255, 111, 45, 0);
}


/* =========================================================
   第一階段：原封條被燒掉
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-burning
.sealed-day-paper-art {
  animation:
    ywjSealBurnAway
    .52s
    cubic-bezier(.55, 0, .78, .32)
    forwards;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-burning::before {
  animation:
    ywjSealFire
    .52s
    ease-out
    forwards;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-burning::after {
  animation:
    ywjSealHotEdge
    .52s
    ease-out
    forwards;
}


/* =========================================================
   第二階段：家紋封條出現
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-revealing
.sealed-day-paper-art {
  animation:
    ywjCrestReveal
    .46s
    cubic-bezier(.18, .78, .28, 1)
    forwards;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-revealing::after {
  animation:
    ywjCrestGlow
    .46s
    ease-out
    forwards;
}


/* 已經解封後 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-opened
.sealed-day-paper-art {
  filter:
    brightness(1.06)
    saturate(1.08)
    drop-shadow(
      0 0 7px
      rgba(199, 125, 73, .16)
    );
}


/* 已解封 hover */
#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-opened:hover
.sealed-day-paper-art {
  filter:
    brightness(1.16)
    saturate(1.12)
    drop-shadow(
      0 0 12px
      rgba(221, 151, 91, .28)
    );
}


/* =========================================================
   Keyframes
========================================================= */

@keyframes ywjSealBurnAway {

  0% {
    opacity: 1;

    transform:
      scale(1);

    filter:
      brightness(1)
      saturate(1);
  }

  22% {
    opacity: 1;

    filter:
      brightness(1.45)
      saturate(1.35)
      sepia(.18);
  }

  48% {
    opacity: .84;

    transform:
      scale(1.025);

    filter:
      brightness(2)
      saturate(1.6)
      sepia(.45);
  }

  72% {
    opacity: .30;

    transform:
      scale(.985);

    filter:
      brightness(.72)
      sepia(.8);
  }

  100% {
    opacity: 0;

    transform:
      scale(.94);

    filter:
      brightness(.25)
      sepia(1);
  }

}


@keyframes ywjSealFire {

  0% {
    opacity: 0;
    transform: scale(.94);
  }

  28% {
    opacity: .42;
  }

  58% {
    opacity: 1;
    transform: scale(1.04);
  }

  100% {
    opacity: 0;
    transform: scale(1.12);
  }

}


@keyframes ywjSealHotEdge {

  0% {
    opacity: 0;

    border-color:
      rgba(255, 118, 53, 0);

    box-shadow:
      0 0 0
      rgba(255, 111, 45, 0);
  }

  45% {
    opacity: 1;

    border-color:
      rgba(255, 142, 69, .68);

    box-shadow:
      0 0 15px
      rgba(255, 99, 40, .55),
      0 0 28px
      rgba(183, 42, 23, .30);
  }

  100% {
    opacity: 0;

    border-color:
      rgba(255, 118, 53, 0);

    box-shadow:
      0 0 30px
      rgba(255, 99, 40, 0);
  }

}


@keyframes ywjCrestReveal {

  0% {
    opacity: 0;

    transform:
      scale(.88);

    filter:
      brightness(2)
      saturate(1.35);
  }

  45% {
    opacity: 1;

    transform:
      scale(1.055);

    filter:
      brightness(1.55)
      saturate(1.3)
      drop-shadow(
        0 0 16px
        rgba(224, 151, 89, .40)
      );
  }

  100% {
    opacity: 1;

    transform:
      scale(1);

    filter:
      brightness(1.06)
      saturate(1.08)
      drop-shadow(
        0 0 7px
        rgba(199, 125, 73, .16)
      );
  }

}


@keyframes ywjCrestGlow {

  0% {
    opacity: 0;
  }

  40% {
    opacity: 1;

    border-color:
      rgba(236, 183, 111, .70);

    box-shadow:
      0 0 18px
      rgba(232, 156, 88, .44),
      0 0 36px
      rgba(181, 77, 49, .18);
  }

  100% {
    opacity: 0;
  }

}
/* =========================================================
   05｜封條圖片單獨放大
   不改30張位置、不改按鈕位置、不改中央封印
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper-art {
  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 300% !important;
  height: 300% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;

  transform:
    translate(-50%, -50%)
    scale(1) !important;

  transform-origin:
    center center !important;
}
/* =========================================================
   05｜右下解封狀態文字放大
   只改字體，不動位置
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-progress-status {
  font-size: 20px !important;
  line-height: 1.6 !important;

  color:
    rgba(235, 222, 201, .82)
    !important;

  letter-spacing:
    .04em !important;

  white-space: nowrap !important;
  width: max-content !important;

  transform: translateX(-120px) !important;
}
/* =========================================================
   05｜封條解封｜強化火燒燼動畫
   不動位置、不動尺寸、不動散落排版
========================================================= */


/* ---------------------------------------------------------
   火焰主體
--------------------------------------------------------- */

#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-burning::before {
  content: "";

  position: absolute;
  left: -18%;
  top: -55%;

  width: 145%;
  height: 210%;

  z-index: 30;
  pointer-events: none;

  opacity: 0;

  background:

    radial-gradient(
      ellipse at 10% 72%,
      rgba(255, 236, 150, 1) 0 5%,
      rgba(255, 157, 48, .95) 6% 12%,
      rgba(238, 67, 24, .82) 13% 22%,
      transparent 34%
    ),

    radial-gradient(
      ellipse at 30% 60%,
      rgba(255, 230, 125, .96) 0 6%,
      rgba(255, 122, 35, .93) 7% 15%,
      rgba(190, 36, 20, .76) 16% 26%,
      transparent 38%
    ),

    radial-gradient(
      ellipse at 53% 70%,
      rgba(255, 242, 176, .96) 0 5%,
      rgba(255, 143, 42, .92) 7% 15%,
      rgba(208, 47, 19, .75) 16% 25%,
      transparent 38%
    ),

    radial-gradient(
      ellipse at 74% 58%,
      rgba(255, 220, 112, .95) 0 6%,
      rgba(255, 112, 30, .88) 7% 15%,
      rgba(174, 28, 17, .72) 16% 25%,
      transparent 36%
    ),

    radial-gradient(
      ellipse at 94% 72%,
      rgba(255, 239, 156, .95) 0 5%,
      rgba(255, 136, 38, .90) 6% 14%,
      rgba(201, 39, 19, .72) 15% 24%,
      transparent 36%
    );

  filter:
    blur(2px)
    drop-shadow(
      0 0 10px
      rgba(255, 91, 28, .85)
    )
    drop-shadow(
      0 0 22px
      rgba(255, 62, 18, .55)
    );

  mix-blend-mode: screen;

  transform-origin:
    center bottom;

  animation:
    ywjBigSealFlame
    .88s
    ease-in-out
    forwards !important;
}


/* ---------------------------------------------------------
   焦黑邊＋餘燼紅光
--------------------------------------------------------- */

#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-burning::after {
  content: "";

  position: absolute;
  inset: -10%;

  z-index: 31;
  pointer-events: none;

  opacity: 0;

  border-radius: 10px;

  background:
    radial-gradient(
      ellipse at center,
      transparent 36%,
      rgba(255, 106, 35, .48) 52%,
      rgba(95, 18, 12, .75) 66%,
      rgba(6, 4, 4, .95) 82%
    );

  box-shadow:
    0 0 16px
    rgba(255, 99, 34, .70),

    0 0 36px
    rgba(213, 48, 20, .48),

    0 0 65px
    rgba(112, 18, 9, .30);

  animation:
    ywjSealEmberEdge
    .88s
    ease-out
    forwards !important;
}


/* ---------------------------------------------------------
   封條本身真的被「燒掉」
--------------------------------------------------------- */

#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-burning
.sealed-day-paper-art {

  animation:
    ywjSealBurnToAsh
    .88s
    cubic-bezier(.47, 0, .65, .96)
    forwards !important;

  transform-origin:
    center center;

  -webkit-mask-image:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(0,0,0,.20) 10%,
      #000 22%,
      #000 100%
    );

  -webkit-mask-size:
    260% 100%;

  -webkit-mask-position:
    100% 0;

  -webkit-mask-repeat:
    no-repeat;

  mask-image:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(0,0,0,.20) 10%,
      #000 22%,
      #000 100%
    );

  mask-size:
    260% 100%;

  mask-position:
    100% 0;

  mask-repeat:
    no-repeat;
}


/* ---------------------------------------------------------
   解封後家紋：從餘燼中冒出
--------------------------------------------------------- */

#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-revealing
.sealed-day-paper-art {

  animation:
    ywjSealCrestAfterBurn
    .52s
    cubic-bezier(.15, .82, .25, 1)
    forwards !important;
}


/* ---------------------------------------------------------
   大火本體動畫
--------------------------------------------------------- */

@keyframes ywjBigSealFlame {

  0% {
    opacity: 0;

    transform:
      translateY(24px)
      scale(.72, .45);
  }

  16% {
    opacity: .68;

    transform:
      translateY(8px)
      scale(.92, .82);
  }

  34% {
    opacity: 1;

    transform:
      translateY(-9px)
      scale(1.06, 1.20);
  }

  52% {
    opacity: 1;

    transform:
      translateY(-17px)
      scale(1.16, 1.42);
  }

  70% {
    opacity: .82;

    transform:
      translateY(-31px)
      scale(1.05, 1.56);
  }

  100% {
    opacity: 0;

    transform:
      translateY(-58px)
      scale(.86, 1.78);
  }
}


/* ---------------------------------------------------------
   封條燒燼
--------------------------------------------------------- */

@keyframes ywjSealBurnToAsh {

  0% {
    opacity: 1;

    transform:
      scale(1);

    filter:
      brightness(1)
      saturate(1);

    -webkit-mask-position:
      100% 0;

    mask-position:
      100% 0;
  }

  18% {
    opacity: 1;

    transform:
      scale(1.015);

    filter:
      brightness(1.45)
      saturate(1.4);
  }

  38% {
    opacity: .98;

    filter:
      brightness(2.1)
      saturate(1.7)
      sepia(.25);

    -webkit-mask-position:
      74% 0;

    mask-position:
      74% 0;
  }

  58% {
    opacity: .78;

    transform:
      scale(1.025);

    filter:
      brightness(1.35)
      saturate(.95)
      sepia(.85);

    -webkit-mask-position:
      48% 0;

    mask-position:
      48% 0;
  }

  75% {
    opacity: .46;

    transform:
      scale(.985);

    filter:
      brightness(.62)
      saturate(.45)
      sepia(1)
      contrast(1.7);

    -webkit-mask-position:
      25% 0;

    mask-position:
      25% 0;
  }

  100% {
    opacity: 0;

    transform:
      scale(.91);

    filter:
      brightness(.18)
      saturate(.15)
      sepia(1)
      contrast(2);

    -webkit-mask-position:
      0% 0;

    mask-position:
      0% 0;
  }
}


/* ---------------------------------------------------------
   焦黑餘燼
--------------------------------------------------------- */

@keyframes ywjSealEmberEdge {

  0% {
    opacity: 0;
    transform: scale(.88);
  }

  28% {
    opacity: .55;
  }

  52% {
    opacity: 1;

    transform:
      scale(1.06);
  }

  72% {
    opacity: .78;

    box-shadow:
      0 0 25px
      rgba(255, 116, 41, .86),

      0 0 48px
      rgba(197, 42, 19, .60),

      0 0 82px
      rgba(109, 18, 10, .42);
  }

  100% {
    opacity: 0;

    transform:
      scale(1.18);
  }
}


/* ---------------------------------------------------------
   家紋重新顯現
--------------------------------------------------------- */

@keyframes ywjSealCrestAfterBurn {

  0% {
    opacity: 0;

    transform:
      scale(.76);

    filter:
      brightness(2.8)
      saturate(1.6)
      blur(3px)
      drop-shadow(
        0 0 30px
        rgba(255, 151, 72, .75)
      );
  }

  42% {
    opacity: 1;

    transform:
      scale(1.10);

    filter:
      brightness(1.9)
      saturate(1.35)
      blur(0)
      drop-shadow(
        0 0 24px
        rgba(235, 135, 65, .58)
      );
  }

  72% {
    transform:
      scale(.98);
  }

  100% {
    opacity: 1;

    transform:
      scale(1);

    filter:
      brightness(1.08)
      saturate(1.08)
      drop-shadow(
        0 0 8px
        rgba(213, 131, 70, .22)
      );
  }
}
/* =========================================================
   05｜月下藏卷｜主介面 FINAL OVERRIDE
   只調整：
   1. 標題真正置中
   2. 全部文字放大
   3. 三座藏器放大
   4. 三座藏器拉開
========================================================= */


/* =========================================================
   05 整頁
========================================================= */

html body
#archives.archives-section.archives-vessel-section {
  grid-template-rows:
    auto
    minmax(0, 1fr)
    auto !important;

  padding:
    34px 5vw
    26px !important;
}


/* =========================================================
   上方標題區｜真正水平置中
========================================================= */

html body
#archives
.archives-vessel-header {
  position:
    relative !important;

  top:
    auto !important;

  left:
    auto !important;

  right:
    auto !important;

  transform:
    none !important;

  justify-self:
    center !important;

  width:
    min(1500px, 88vw) !important;

  max-width:
    none !important;

  margin:
    0 auto 8px !important;

  padding:
    0 !important;

  text-align:
    center !important;
}


/* 05 / ARCHIVES */
html body
#archives
.archives-vessel-kicker {
  display:
    flex !important;

  justify-content:
    center !important;

  align-items:
    center !important;

  margin:
    0 auto 10px !important;
}

html body
#archives
.archives-vessel-kicker span {
  font-size:
    13px !important;

  letter-spacing:
    .18em !important;
}

html body
#archives
.archives-vessel-kicker em {
  font-size:
    12px !important;

  letter-spacing:
    .28em !important;
}


/* 未入正史・皆有所藏 */
html body
#archives
.archives-vessel-small {
  margin:
    0 0 8px !important;

  font-size:
    16px !important;

  line-height:
    1.5 !important;

  letter-spacing:
    .16em !important;

  text-align:
    center !important;
}


/* 月下藏卷 */
html body
#archives
.archives-vessel-header h2 {
  margin:
    0 !important;

  font-size:
  clamp(
    60px,
    4.4vw,
    82px
  ) !important;

  line-height:
    1.02 !important;

  letter-spacing:
    .08em !important;

  text-align:
    center !important;
}


/* 主標題下方金線 */
html body
#archives
.archives-vessel-rule {
  width:
    260px !important;

  margin:
    17px auto
    13px !important;
}


/* 形貌、聲色與未曾公開…… */
html body
#archives
.archives-vessel-intro {
  width:
    auto !important;

  max-width:
    920px !important;

  margin:
    0 auto !important;

  font-size:
    18px !important;

  line-height:
    1.9 !important;

  letter-spacing:
    .06em !important;

  text-align:
    center !important;

  color:
    rgba(
      235,
      224,
      205,
      .86
    ) !important;
}


/* =========================================================
   三座藏器區｜加寬＋拉開
========================================================= */

html body
#archives
.archive-vessels {
  position:
    relative !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;

  width:
    min(1500px, 86vw) !important;

  height:
    100% !important;

  margin:
    0 auto !important;

  padding:
    0 !important;

  gap:
    clamp(
      90px,
      7vw,
      150px
    ) !important;

  align-items:
    stretch !important;
}


/* 每一座藏器 */
html body
#archives
.archive-vessel {
  width:
    100% !important;

  padding:
    0 !important;
}


/* =========================================================
   藏器舞台｜直接加高
========================================================= */

html body
#archives
.archive-vessel-stage {
  width:
    100% !important;

  height:
    clamp(
      440px,
      55vh,
      520px
    ) !important;

  min-height:
    440px !important;

  padding:
    0 !important;

  margin:
    0 !important;

  display:
    flex !important;

  justify-content:
    center !important;

  align-items:
    center !important;

  overflow:
    visible !important;
}


/* =========================================================
   三座瓶罐本體｜真正放大
========================================================= */

html body
#archives
.archive-vessel-image {
  width:
    auto !important;

  height:
    100% !important;

  max-height:
    100% !important;

  max-width:
    115% !important;

  object-fit:
    contain !important;

  transform:
    none !important;

  transform-origin:
    center center !important;
}


/* Hover 仍保留原本浮起效果 */
html body
#archives
.archive-vessel:hover
.archive-vessel-stage {
  transform:
    translateY(-8px)
    scale(1.025) !important;
}


/* =========================================================
   01 / 02 / 03
========================================================= */

html body
#archives
.archive-vessel-index {
  font-size:
    13px !important;

  letter-spacing:
    .15em !important;
}


/* =========================================================
   畫藏 / 聲藏 / 秘藏 下方名稱區
========================================================= */

html body
#archives
.archive-vessel-label {
  min-height:
    98px !important;

  padding:
    13px 0 8px !important;

  margin:
    0 !important;

  text-align:
    center !important;
}


/* VISUAL ARCHIVE 等 */
html body
#archives
.archive-vessel-label em {
  display:
    block !important;

  margin-bottom:
    7px !important;

  font-size:
    11px !important;

  letter-spacing:
    .25em !important;
}


/* 畫藏 / 聲藏 / 秘藏 */
html body
#archives
.archive-vessel-label strong {
  display:
    block !important;

  margin-bottom:
    8px !important;

  font-size:
    38px !important;

  line-height:
    1.15 !important;

  letter-spacing:
    .12em !important;
}


/* 影像與被保存的形貌 等說明 */
html body
#archives
.archive-vessel-label span {
  display:
    block !important;

  font-size:
    14px !important;

  line-height:
    1.7 !important;

  letter-spacing:
    .05em !important;

  color:
    rgba(
      224,
      212,
      192,
      .74
    ) !important;
}


/* =========================================================
   底部 SELECT A VESSEL
========================================================= */

html body
#archives
.archives-vessel-footer {
  width:
    min(1500px, 86vw) !important;

  margin:
    8px auto 0 !important;
}

html body
#archives
.archives-vessel-footer span,
html body
#archives
.archives-vessel-footer em {
  font-size:
    11px !important;

  letter-spacing:
    .22em !important;
}


/* =========================================================
   你的桌機高度附近
   不再被舊 max-height:850 規則縮回去
========================================================= */

@media (min-width: 851px) and (max-width: 850px) and (max-height: 900px) {

  html body
  #archives
  .archives-vessel-header h2 {
    font-size:
      76px !important;
  }

  html body
  #archives
  .archive-vessel-stage {
    height:
      430px !important;

    min-height:
      430px !important;
  }

  html body
  #archives
  .archive-vessel-image {
    width:
      auto !important;

    height:
      100% !important;

    max-height:
      100% !important;

    max-width:
      115% !important;
  }

}
/* =========================================================
   05｜月下藏卷｜真蝴蝶＋精靈光球 FINAL
   不改瓶罐大小
   不改三瓶位置
   不改05整體排版
========================================================= */


/* =========================================================
   瓶罐舞台
========================================================= */

html body
#archives
.archive-vessel-stage {
  position: relative !important;
  overflow: visible !important;
  isolation: isolate !important;

  transition:
    transform .55s ease,
    filter .55s ease !important;
}


/* =========================================================
   滑鼠移入：整座瓶罐輕浮
========================================================= */

html body
#archives
.archive-vessel:hover
.archive-vessel-stage {
  transform:
    translateY(-9px)
    scale(1.028) !important;
}


/* =========================================================
   原本三色 Aura 保留
   只把它變得更明顯
========================================================= */

html body
#archives
.archive-vessel:hover
.archive-vessel-aura {
  opacity:
    .78 !important;

  transform:
    translate(-50%, -50%)
    scale(1.24) !important;

  filter:
    blur(38px) !important;
}


/* =========================================================
   真 PNG 蝴蝶層
========================================================= */

html body
#archives
.archive-butterfly-layer {
  position: absolute;

  /* 整組蝴蝶往左 */
  left: 47%;
  top: 51%;

  /* 比現在稍微放大 */
  width: 54%;
  height: 82%;

  transform:
    translate(-50%, -50%);

  z-index: 6;

  pointer-events: none;

  overflow: visible;
}


/* 三張 PNG sprite sheet */

html body
#archives
.archive-butterfly-layer-visual {
  --butterfly-sheet:
    url("assets/images/visual-butterflies.png");
}

html body
#archives
.archive-butterfly-layer-audio {
  --butterfly-sheet:
    url("assets/images/audio-butterflies.png");
}

html body
#archives
.archive-butterfly-layer-sealed {
  --butterfly-sheet:
    url("assets/images/sealed-butterflies.png");
}


/* =========================================================
   每隻真蝴蝶
========================================================= */

html body
#archives
.archive-real-butterfly {
  position: absolute;

  width:
    clamp(48px, 3.4vw, 68px);

  aspect-ratio:
    1.18 / 1;

  background-image:
    var(--butterfly-sheet);

  background-repeat:
    no-repeat;

  background-size:
    200% 200%;

  opacity:
    .46;

  transform-origin:
    center center;

  pointer-events:
    none;

  transition:
    opacity .45s ease,
    filter .45s ease;
}


/* 2 × 2 sprite 的四隻蝴蝶 */

html body
#archives
.archive-real-butterfly.b1 {
  background-position:
    0% 0%;

  left:
    17%;

  top:
    26%;

  animation:
    archiveRealButterflyA
    4.8s
    ease-in-out
    infinite;
}


html body
#archives
.archive-real-butterfly.b2 {
  background-position:
    100% 0%;

  left:
    61%;

  top:
    20%;

  animation:
    archiveRealButterflyB
    5.4s
    ease-in-out
    -.9s
    infinite;
}


html body
#archives
.archive-real-butterfly.b3 {
  background-position:
    0% 100%;

  left:
    28%;

  top:
    54%;

  animation:
    archiveRealButterflyC
    4.2s
    ease-in-out
    -1.7s
    infinite;
}


html body
#archives
.archive-real-butterfly.b4 {
  background-position:
    100% 100%;

  left:
    62%;

  top:
    68%;

  animation:
    archiveRealButterflyD
    5.8s
    ease-in-out
    -2.4s
    infinite;
}


/* hover：蝶影變亮 */

html body
#archives
.archive-vessel:hover
.archive-real-butterfly {
  opacity:
    .94;

  filter:
    brightness(1.26)
    saturate(1.12)
    drop-shadow(
      0 0 7px
      rgba(255,255,255,.26)
    );
}


/* =========================================================
   四隻蝴蝶不同飛行路徑
========================================================= */

@keyframes archiveRealButterflyA {

  0%,
  100% {
    transform:
      translate(0, 0)
      rotate(-10deg)
      scaleX(.88)
      scaleY(.96);
  }

  25% {
    transform:
      translate(8px, -13px)
      rotate(3deg)
      scaleX(1)
      scaleY(1);
  }

  55% {
    transform:
      translate(-5px, -28px)
      rotate(12deg)
      scaleX(.78)
      scaleY(1.03);
  }

  78% {
    transform:
      translate(7px, -12px)
      rotate(-2deg)
      scaleX(1)
      scaleY(.98);
  }

}


@keyframes archiveRealButterflyB {

  0%,
  100% {
    transform:
      translate(0, 0)
      rotate(8deg)
      scaleX(1);
  }

  30% {
    transform:
      translate(-14px, -8px)
      rotate(-8deg)
      scaleX(.74);
  }

  60% {
    transform:
      translate(8px, -23px)
      rotate(13deg)
      scaleX(1);
  }

  82% {
    transform:
      translate(-3px, -12px)
      rotate(4deg)
      scaleX(.82);
  }

}


@keyframes archiveRealButterflyC {

  0%,
  100% {
    transform:
      translate(0, 0)
      rotate(-4deg)
      scaleX(.82);
  }

  22% {
    transform:
      translate(11px, -8px)
      rotate(9deg)
      scaleX(1);
  }

  48% {
    transform:
      translate(4px, -21px)
      rotate(-12deg)
      scaleX(.72);
  }

  73% {
    transform:
      translate(-10px, -29px)
      rotate(7deg)
      scaleX(1);
  }

}


@keyframes archiveRealButterflyD {

  0%,
  100% {
    transform:
      translate(0, 0)
      rotate(10deg)
      scaleX(1);
  }

  24% {
    transform:
      translate(-7px, -14px)
      rotate(-5deg)
      scaleX(.76);
  }

  54% {
    transform:
      translate(10px, -30px)
      rotate(14deg)
      scaleX(1);
  }

  80% {
    transform:
      translate(5px, -17px)
      rotate(2deg)
      scaleX(.82);
  }

}


/* =========================================================
   JS 精靈光球容器
========================================================= */

html body
#archives
.archive-spirit-orbs {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 78%;
  height: 88%;

  transform:
    translate(-50%, -50%);

  z-index: 7;

  overflow: visible;

  pointer-events: none;
}


/* =========================================================
   三個瓶罐自己的光色
========================================================= */

/* 畫藏｜銀白冷藍 */

html body
#archives
.archive-vessel-visual {
  --orb-core:
    rgba(250, 253, 255, .98);

  --orb-mid:
    rgba(181, 218, 239, .86);

  --orb-outer:
    rgba(118, 175, 210, .26);

  --orb-shadow:
    rgba(156, 208, 235, .70);
}


/* 聲藏｜紫藍 */

html body
#archives
.archive-vessel-audio {
  --orb-core:
    rgba(249, 244, 255, .98);

  --orb-mid:
    rgba(180, 157, 242, .90);

  --orb-outer:
    rgba(116, 102, 201, .28);

  --orb-shadow:
    rgba(170, 145, 239, .76);
}


/* 秘藏｜暗紅 */

html body
#archives
.archive-vessel-sealed {
  --orb-core:
    rgba(255, 231, 222, .98);

  --orb-mid:
    rgba(210, 82, 72, .88);

  --orb-outer:
    rgba(119, 31, 34, .28);

  --orb-shadow:
    rgba(206, 65, 62, .72);
}


/* =========================================================
   單顆 JS 光球
========================================================= */

html body
#archives
.archive-spirit-orb {
  position: absolute;

  left:
    var(--orb-x);

  bottom:
    var(--orb-start-y);

  width:
    var(--orb-size);

  height:
    var(--orb-size);

  border-radius:
    50%;

  pointer-events:
    none;

  opacity:
    0;

  background:
    radial-gradient(
      circle,
      var(--orb-core) 0%,
      var(--orb-core) 11%,
      var(--orb-mid) 28%,
      var(--orb-outer) 52%,
      transparent 73%
    );

  box-shadow:
    0 0 8px
      var(--orb-shadow),

    0 0 18px
      var(--orb-shadow),

    0 0 34px
      var(--orb-outer);

  filter:
    blur(.15px);

  animation:
    archiveSpiritOrbRise
    var(--orb-duration)
    cubic-bezier(.18,.58,.25,1)
    forwards;
}


/* =========================================================
   一顆一顆真正往上飄
========================================================= */

@keyframes archiveSpiritOrbRise {

  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        14px,
        0
      )
      scale(.50);
  }

  10% {
    opacity: .82;
  }

  35% {
    opacity: .95;
  }

  70% {
    opacity: .72;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--orb-end-x),
        var(--orb-end-y),
        0
      )
      scale(.82);
  }

}


/* =========================================================
   名稱 hover 微亮
========================================================= */

html body
#archives
.archive-vessel:hover
.archive-vessel-label strong {
  text-shadow:
    0 0 10px
      rgba(255,245,220,.22),

    0 0 24px
      var(--orb-shadow)
      !important;
}


html body
#archives
.archive-vessel:hover
.archive-vessel-label span {
  color:
    rgba(
      238,
      228,
      212,
      .90
    ) !important;
}
/* =========================================================
   05｜聲藏｜FINAL
   字體放大＋黑膠強制正圓＋歌詞 UI
========================================================= */


/* =========================================================
   黑膠播放器容器｜強制正方形
========================================================= */

html body
#archives
.audio-vinyl-player {
  width:
    min(430px, 34vw) !important;

  height:
    min(430px, 34vw) !important;

  aspect-ratio:
    1 / 1 !important;

  flex:
    0 0 auto !important;
}


/* =========================================================
   黑膠本體｜強制正圓
========================================================= */

html body
#archives
.audio-vinyl-disc {
  width:
    82% !important;

  height:
    82% !important;

  aspect-ratio:
    auto !important;

  border-radius:
    50% !important;

  box-sizing:
    border-box !important;
}


/* =========================================================
   黑膠中間唱片標｜強制正圓
========================================================= */

html body
#archives
.audio-vinyl-label {
  width:
    37% !important;

  height:
    37% !important;

  aspect-ratio:
    auto !important;

  border-radius:
    50% !important;

  box-sizing:
    border-box !important;

  flex:
    none !important;
}


/* =========================================================
   左上章節
========================================================= */

html body
#archives
.audio-archive-kicker span {
  font-size:
    12px !important;
}

html body
#archives
.audio-archive-kicker em {
  font-size:
    11px !important;
}

html body
#archives
.audio-archive-small {
  font-size:
    15px !important;

  line-height:
    1.6 !important;
}


/* =========================================================
   黑膠中央文字
========================================================= */

html body
#archives
.audio-vinyl-number {
  font-size:
    12px !important;
}

html body
#archives
.audio-vinyl-label strong {
  font-size:
    clamp(
      20px,
      1.55vw,
      27px
    ) !important;
}

html body
#archives
.audio-vinyl-label em {
  font-size:
    9px !important;

  line-height:
    1.5 !important;
}


/* =========================================================
   NOW PLAYING / 作詞曲
========================================================= */

html body
#archives
.audio-vinyl-now span,
html body
#archives
.audio-vinyl-now em {
  font-size:
    11px !important;
}

html body
#archives
.audio-vinyl-credit {
  font-size:
    14px !important;

  line-height:
    1.7 !important;
}


/* =========================================================
   控制列
========================================================= */

html body
#archives
.audio-vinyl-controls {
  grid-template-columns:
    repeat(4, auto)
    minmax(110px, 1fr)
    !important;

  gap:
    15px !important;

  width:
    min(470px, 96%)
    !important;
}

html body
#archives
.audio-vinyl-control > span {
  font-size:
    16px !important;
}

html body
#archives
.audio-vinyl-control > em {
  font-size:
    12px !important;

  letter-spacing:
    .08em !important;
}

html body
#archives
.audio-vinyl-volume > span {
  font-size:
    11px !important;
}


/* =========================================================
   播放時間
========================================================= */

html body
#archives
.audio-archive-time {
  font-size:
    13px !important;
}


/* =========================================================
   右側聲藏錄
========================================================= */

html body
#archives
.audio-archive-library-head span {
  font-size:
    11px !important;
}

html body
#archives
.audio-archive-library-head strong {
  font-size:
    38px !important;
}

html body
#archives
.audio-archive-library-head > em {
  font-size:
    11px !important;
}


/* 曲目編號 */
html body
#archives
.audio-archive-track-number {
  font-size:
    13px !important;
}


/* 曲名 */
html body
#archives
.audio-archive-track-copy strong {
  font-size:
    23px !important;

  line-height:
    1.35 !important;
}


/* CHARACTER OST */
html body
#archives
.audio-archive-track-copy em {
  font-size:
    11px !important;

  line-height:
    1.6 !important;
}


/* PLAY / NOW */
html body
#archives
.audio-archive-track-state {
  font-size:
    11px !important;
}


/* 每列略加高 */
html body
#archives
.audio-archive-track {
  padding:
    25px 12px !important;
}


/* =========================================================
   歌詞按鈕
========================================================= */

html body
#archives
.audio-vinyl-control[data-audio-lyrics] {
  color:
    rgba(224, 204, 174, .72);
}

html body
#archives
.audio-vinyl-control[data-audio-lyrics]:hover {
  color:
    rgba(245, 222, 183, 1);
}


/* =========================================================
   歌詞浮層
========================================================= */

html body
#archives
.audio-lyrics-layer {
  position:
    absolute;

  inset:
    34px;

  z-index:
    40;

  display:
    flex;

  flex-direction:
    column;

  padding:
    48px 58px;

  box-sizing:
    border-box;

  border:
    1px solid
    rgba(193,151,89,.24);

  background:
    linear-gradient(
      135deg,
      rgba(3,6,10,.97),
      rgba(6,8,13,.95)
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity .35s ease,
    visibility .35s ease;
}


html body
#archives
.audio-archive-shell.is-lyrics-open
.audio-lyrics-layer {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;
}


/* 歌詞上方 */
html body
#archives
.audio-lyrics-kicker {
  margin:
    0 0 14px !important;

  color:
    rgba(205,165,100,.78)
    !important;

  font-size:
    14px !important;

  line-height:
    1.4 !important;

  letter-spacing:
    .24em !important;
}


html body
#archives
.audio-lyrics-title {
  margin:
    0 !important;

  color:
    rgba(245,230,204,.97)
    !important;

  font-size:
    48px !important;

  line-height:
    1.15 !important;

  font-weight:
    400 !important;

  letter-spacing:
    .08em !important;
}


html body
#archives
.audio-lyrics-subtitle {
  /* 從歌名下面拉開 */
  margin:
    18px 0 0 !important;

  color:
    rgba(210,194,168,.72)
    !important;

  font-size:
    16px !important;

  line-height:
    1.6 !important;

  letter-spacing:
    .12em !important;
}


/* 歌詞正文 */
html body
#archives
.audio-lyrics-body {
  margin-top:
    32px;

  padding:
    28px 10px 40px 0;

  overflow-y:
    auto;

  white-space:
    pre-line;

  color:
    rgba(235,225,208,.86);

  font-size:
    18px;

  line-height:
    2.15;

  letter-spacing:
    .07em;
}


/* 關閉歌詞 */
html body
#archives
.audio-lyrics-close {
  position:
    absolute;

  top:
    22px;

  right:
    24px;

  width:
    44px;

  height:
    44px;

  border:
    1px solid
    rgba(193,151,89,.25);

  background:
    rgba(3,6,10,.72);

  color:
    rgba(224,196,151,.80);

  font-size:
    22px;

  cursor:
    pointer;
}
/* =========================================================
   05｜聲藏｜歌詞固定覆蓋右側聲藏錄
========================================================= */

html body
#archives
.audio-archive-library {
  position: relative !important;
  overflow: hidden !important;
}


html body
#archives
.audio-archive-library
.audio-lyrics-layer {
  position: absolute !important;

  /* 歌詞視窗比右側聲藏錄小一圈 */
  top: 52px !important;
right: 100px !important;
bottom: 52px !important;
left: 100px !important;

  width: auto !important;
  height: auto !important;

  z-index: 50 !important;

  box-sizing: border-box !important;

  margin: 0 !important;

  padding:
    44px 54px
    38px !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(193,151,89,.24)
    !important;

  background:
  linear-gradient(
    180deg,
    rgba(3, 6, 10, .84) 0%,
    rgba(3, 6, 10, .72) 36%,
    rgba(3, 6, 10, .84) 100%
  ),
  var(--lyrics-bg)
  center center /
  cover
  no-repeat
  !important;

  box-shadow:
    0 22px 65px
    rgba(0,0,0,.42)
    !important;

  grid-column: auto !important;
  grid-row: auto !important;
}


html body
#archives
.audio-archive-shell.is-lyrics-open
.audio-archive-library
.audio-lyrics-layer {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* =========================================================
   05｜聲藏歌詞｜整篇置中
========================================================= */

html body
#archives
.audio-lyrics-kicker {
  width: 100% !important;
  text-align: center !important;
}


html body
#archives
.audio-lyrics-title {
  width: 100% !important;
  text-align: center !important;
}


/* 夜巫京 / MAIN THEME */
html body
#archives
.audio-lyrics-subtitle {
  width: 100% !important;

  margin:
    22px 0 0 !important;

  text-align: center !important;
}


/* 真正歌詞正文 */
html body
#archives
.audio-lyrics-body {
  flex:
    1 1 auto !important;

  width:
    min(720px, 100%)
    !important;

  min-height:
    0 !important;

  margin:
    34px auto 0 !important;

  padding:
    0 18px
    36px !important;

  box-sizing:
    border-box !important;

  overflow-y:
    auto !important;

  white-space:
    pre-line !important;

  text-align:
    center !important;

    font-size: 22px !important;
line-height: 2.2 !important;
font-weight: 500 !important;
letter-spacing: .04em !important;
color: rgba(247, 239, 226, .96) !important;
text-shadow:
  0 1px 1px rgba(0,0,0,.45),
  0 0 10px rgba(0,0,0,.18) !important;
}
/* =========================================================
   05｜聲藏｜實際 CLASS 最終放大版
========================================================= */


/* =========================
   左上 02 / AUDIO ARCHIVE
========================= */

html body #archives .audio-archive-kicker span {
  font-size: 13px !important;
}

html body #archives .audio-archive-kicker em {
  font-size: 12px !important;
  letter-spacing: .24em !important;
}

html body #archives .audio-archive-small {
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: rgba(224, 211, 190, .72) !important;
}


/* =========================
   黑膠整體放大
========================= */

html body #archives .audio-vinyl-player {
  width: min(500px, 38vw) !important;
  height: min(500px, 38vw) !important;

  aspect-ratio: 1 / 1 !important;

  margin-top: 42px !important;
}


/* 黑膠本體再佔大一點 */
html body #archives .audio-vinyl-disc {
  width: 88% !important;
  height: 88% !important;

  aspect-ratio: 1 / 1 !important;

  border-radius: 50% !important;
}


/* =========================
   NOW PLAYING 那條
========================= */

html body #archives .audio-vinyl-now {
  width: min(470px, 94%) !important;

  margin-top: 4px !important;
}

html body #archives .audio-vinyl-now span,
html body #archives .audio-vinyl-now em {
  font-size: 13px !important;

  letter-spacing: .18em !important;

  color: rgba(219, 178, 108, .85) !important;
}


/* 作詞 / 曲 */
html body #archives .audio-vinyl-credit {
  width: min(470px, 94%) !important;

  margin-top: 12px !important;

  font-size: 16px !important;

  line-height: 1.7 !important;

  color: rgba(226, 211, 185, .76) !important;
}


/* =========================
   靜音 / 暫停 / 下一首 / 歌詞
========================= */

html body #archives .audio-vinyl-controls {
  width: min(470px, 94%) !important;

  gap: 16px !important;
}

html body #archives .audio-vinyl-control > span {
  font-size: 17px !important;
}

html body #archives .audio-vinyl-control > em {
  font-size: 13px !important;

  letter-spacing: .10em !important;
}

html body #archives .audio-vinyl-volume > span {
  font-size: 13px !important;
}


/* =========================
   進度條與時間
========================= */

html body #archives .audio-archive-progress {
  width: min(470px, 94%) !important;
}

html body #archives .audio-archive-time {
  font-size: 14px !important;

  color: rgba(226, 214, 194, .75) !important;
}


/* =========================
   右側標題
========================= */

html body #archives .audio-archive-library-head span {
  font-size: 12px !important;

  color: rgba(205, 164, 100, .68) !important;
}

html body #archives .audio-archive-library-head strong {
  font-size: 38px !important;

  color: rgba(242, 227, 203, .94) !important;
}

html body #archives .audio-archive-library-head > em {
  font-size: 12px !important;

  color: rgba(190, 163, 120, .60) !important;
}


/* =========================
   六首歌
========================= */

html body #archives .audio-archive-track {
  grid-template-columns:
    54px
    minmax(0, 1fr)
    68px !important;

  gap: 18px !important;

  padding: 24px 14px !important;
}


/* 00 / 01 / 02 */
html body #archives .audio-archive-track-number {
  font-size: 14px !important;

  color: rgba(210, 163, 92, .58) !important;
}


/* 歌名 */
html body #archives .audio-archive-track-copy strong {
  font-size: 24px !important;

  line-height: 1.3 !important;

  letter-spacing: .07em !important;

  color: rgba(225, 215, 197, .72) !important;
}


/* 墨胎冥 / CHARACTER OST 這種小字 */
html body #archives .audio-archive-track-copy em {
  font-size: 14px !important;

  line-height: 1.7 !important;

  letter-spacing: .10em !important;

  color: rgba(205, 194, 176, .66) !important;
}


/* PLAY / NOW */
html body #archives .audio-archive-track-state {
  font-size: 13px !important;

  letter-spacing: .16em !important;

  color: rgba(200, 158, 93, .55) !important;

  text-align: right !important;
}


/* =========================
   正在播放那一首｜明顯強化
========================= */

html body #archives .audio-archive-track.active {
  color: rgba(250, 233, 204, 1) !important;

  background:
    linear-gradient(
      90deg,
      rgba(177, 122, 55, .22) 0%,
      rgba(145, 97, 42, .12) 55%,
      rgba(90, 58, 24, .03) 100%
    ) !important;

  box-shadow:
    inset 3px 0 0 rgba(226, 177, 98, .95),
    inset 0 0 0 1px rgba(194, 147, 75, .16),
    0 0 28px rgba(144, 91, 35, .10)
    !important;
}


/* 正在播放：歌名 */
html body
#archives
.audio-archive-track.active
.audio-archive-track-copy strong {
  font-size: 25px !important;

  color: rgba(255, 237, 207, 1) !important;

  text-shadow:
    0 0 12px rgba(226, 181, 108, .22)
    !important;
}


/* 正在播放：角色副標 */
html body
#archives
.audio-archive-track.active
.audio-archive-track-copy em {
  color: rgba(229, 199, 153, .86) !important;
}


/* 正在播放：NOW */
html body
#archives
.audio-archive-track.active
.audio-archive-track-state {
  font-size: 14px !important;

  font-weight: 600 !important;

  color: rgba(234, 187, 108, .98) !important;

  text-shadow:
    0 0 10px rgba(219, 166, 86, .24)
    !important;
}
/* =========================================================
   05｜聲藏歌詞背景｜文字可讀性
========================================================= */

html body
#archives
.audio-archive-library
.audio-lyrics-layer {
  background-blend-mode:
    normal !important;
}


/* 標題區稍微壓暗背後 */
html body
#archives
.audio-lyrics-kicker,
html body
#archives
.audio-lyrics-title,
html body
#archives
.audio-lyrics-subtitle {
  position:
    relative;

  z-index:
    2;
}


/* 歌詞正文保持清楚 */
html body
#archives
.audio-lyrics-body {
  position:
    relative;

  z-index:
    2;

  text-shadow:
    0 1px 5px
    rgba(0,0,0,.82);
}
/* =========================================================
   06｜Creator 最終微調
   - 左圖往上移，不再壓到底下字
   - 除大標題外，其餘說明字體放大
========================================================= */

/* ---------- 左側照片 ---------- */
#creator .creator-photo-wrap {
  left: 5.6vw !important;
  top: 49.5% !important;
  width: clamp(340px, 21vw, 420px) !important;
  height: clamp(560px, 67vh, 760px) !important;
  transform: translateY(-50%) !important;
}

#creator .creator-photo {
  object-fit: cover !important;
  object-position: center top !important;
}

#creator .creator-photo-caption {
  margin-top: 12px !important;
  position: relative !important;
  z-index: 5 !important;
}

/* ---------- 左上小章節字 ---------- */
#creator .creator-kicker span {
  font-size: 12px !important;
}

#creator .creator-kicker em {
  font-size: 11px !important;
  letter-spacing: .26em !important;
}

/* ---------- LILINÉ 下面的說明 ---------- */
#creator .creator-overline {
  font-size: 15px !important;
  letter-spacing: .24em !important;
  margin-bottom: 18px !important;
}

#creator .creator-role {
  font-size: 26px !important;
  line-height: 1.6 !important;
  letter-spacing: .08em !important;
  color: rgba(234, 220, 198, .92) !important;
  margin: 0 0 40px 0 !important;
}

/* ---------- 六格能力區 ---------- */
#creator .creator-fields {
  margin-top: 46px !important;
}

#creator .creator-field {
  min-height: 98px !important;
  padding: 22px 24px !important;
}

#creator .creator-field > span {
  font-size: 11px !important;
  color: rgba(182, 126, 84, .82) !important;
}

#creator .creator-field strong {
  font-size: 18px !important;
  line-height: 1.5 !important;
  color: rgba(235, 221, 198, .94) !important;
}

#creator .creator-field em {
  font-size: 9px !important;
  line-height: 1.5 !important;
  letter-spacing: .14em !important;
  color: rgba(196, 175, 145, .58) !important;
}

/* ---------- 下方手記 ---------- */
#creator .creator-note {
  width: min(760px, 100%) !important;
  margin-top: 42px !important;
  padding-left: 28px !important;
}

#creator .creator-note-label {
  font-size: 9px !important;
  letter-spacing: .24em !important;
  margin-bottom: 14px !important;
}

#creator .creator-note strong {
  font-size: 22px !important;
  line-height: 1.5 !important;
  margin-bottom: 18px !important;
  color: rgba(242, 226, 202, .96) !important;
}

#creator .creator-note p {
  font-size: 17px !important;
  line-height: 2 !important;
  letter-spacing: .03em !important;
  color: rgba(226, 214, 196, .86) !important;
}

/* ---------- 署名 ---------- */
#creator .creator-signature {
  margin-top: 30px !important;
  gap: 14px !important;
}

#creator .creator-signature span {
  font-size: 8px !important;
}

#creator .creator-signature strong {
  font-size: 13px !important;
  color: rgba(221, 202, 175, .82) !important;
}

#creator .creator-signature em {
  font-size: 9px !important;
}

/* ---------- 底部左右資訊 ---------- */
#creator .creator-footer-left span,
#creator .creator-footer-right span {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: rgba(226, 212, 192, .80) !important;
}

#creator .creator-footer-left em,
#creator .creator-footer-right em {
  font-size: 10px !important;
  color: rgba(186, 143, 78, .62) !important;
}

#creator .creator-footer-center {
  font-size: 10px !important;
}

#creator .creator-footer-center span {
  font-size: 11px !important;
}
/* =========================================================
   05｜秘藏 V2｜30日逐日異變＋個人藏錄
   2026-09-26
   此區放在 style.css 最末端，覆蓋舊秘藏樣式。
========================================================= */

body.sealed-modal-open {
  overflow: hidden !important;
}

/* ---------------------------------------------------------
   30日封條：補上 missed / available 狀態
--------------------------------------------------------- */

#archives [data-archive-content="sealed"] .sealed-day-paper.is-missed {
  opacity: .62 !important;
  filter: saturate(.65) brightness(.78);
}

#archives [data-archive-content="sealed"] .sealed-day-paper.is-missed:hover {
  filter: saturate(.72) brightness(.86);
}

#archives [data-archive-content="sealed"] .sealed-day-paper.is-available {
  filter:
    drop-shadow(0 0 11px rgba(189, 98, 61, .24))
    brightness(1.04);
}

/* ---------------------------------------------------------
   中央：藏紋與異象疊層
--------------------------------------------------------- */

#archives [data-archive-content="sealed"] .sealed-vault-core {
  isolation: isolate;
  cursor: pointer;
  outline: none;
}

#archives [data-archive-content="sealed"] .sealed-vault-core:focus-visible {
  filter:
    drop-shadow(0 0 16px rgba(206, 155, 92, .24));
}

#archives [data-archive-content="sealed"] .sealed-anomaly-stack {
  position: absolute;
  inset: -16%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
}

#archives [data-archive-content="sealed"] .sealed-anomaly-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112%;
  height: 112%;
  object-fit: contain;
  transform: translate(-50%, -50%);
  opacity: .20;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: saturate(.82) brightness(.86);
  animation: sealedAnomalyBreath 8.5s ease-in-out infinite;
}

#archives [data-archive-content="sealed"] .sealed-anomaly-secondary {
  width: 126%;
  height: 126%;
  opacity: .11;
  transform: translate(-50%, -50%) rotate(17deg);
  animation-duration: 11.5s;
  animation-delay: -4.2s;
}

#archives [data-archive-content="sealed"] .sealed-core-mark-image {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 92%;
  height: 92%;
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter:
    drop-shadow(0 0 14px rgba(170, 64, 48, .18))
    drop-shadow(0 0 28px rgba(143, 94, 54, .08));
  animation: sealedMarkBreath 7.5s ease-in-out infinite;
}

#archives [data-archive-content="sealed"] .sealed-vault-mark {
  z-index: 8;
  transition:
    opacity .6s ease,
    border-color .6s ease,
    background .6s ease;
}

#archives [data-archive-content="sealed"] .sealed-vault-mark.has-image {
  opacity: .12;
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

#archives [data-archive-content="sealed"] .sealed-vault-mark.has-image > * {
  opacity: 0 !important;
}

#archives [data-archive-content="sealed"] .sealed-core-caption {
  position: absolute;
  left: 50%;
  top: calc(50% + 122px);
  z-index: 12;
  width: min(330px, 80%);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(211, 193, 167, .58);
  font-size: 11px;
  line-height: 1.75;
  letter-spacing: .08em;
  text-align: center;
  pointer-events: none;
}

#archives [data-archive-content="sealed"] .sealed-vault-core.is-observed {
  animation: sealedObservedPulse .7s ease-out;
}

#archives [data-archive-content="sealed"] .sealed-vault-core[data-phase="initial"] .sealed-orbit,
#archives [data-archive-content="sealed"] .sealed-vault-core[data-phase="deep"] .sealed-orbit,
#archives [data-archive-content="sealed"] .sealed-vault-core[data-phase="final"] .sealed-orbit {
  opacity: calc(.30 + var(--sealed-day-progress, .2) * .28);
}

@keyframes sealedAnomalyBreath {
  0%, 100% {
    opacity: .13;
    transform: translate(-50%, -50%) scale(.985);
  }
  50% {
    opacity: .24;
    transform: translate(-50%, -50%) scale(1.018);
  }
}

@keyframes sealedMarkBreath {
  0%, 100% {
    opacity: .86;
    filter:
      brightness(.92)
      drop-shadow(0 0 11px rgba(166, 63, 49, .12));
  }
  50% {
    opacity: 1;
    filter:
      brightness(1.08)
      drop-shadow(0 0 22px rgba(181, 69, 49, .25));
  }
}

@keyframes sealedObservedPulse {
  0% { filter: brightness(1); }
  38% {
    filter:
      brightness(1.18)
      drop-shadow(0 0 30px rgba(173, 72, 51, .24));
  }
  100% { filter: brightness(1); }
}

/* ---------------------------------------------------------
   左側即時藏錄
--------------------------------------------------------- */

#archives [data-archive-content="sealed"] .sealed-live-record {
  position: absolute;
  left: 54px;
  top: 235px;
  z-index: 94;
  width: 255px;
  padding: 15px 17px 17px;
  border-top: 1px solid rgba(190, 141, 83, .16);
  border-bottom: 1px solid rgba(190, 141, 83, .10);
  background:
    linear-gradient(90deg, rgba(7, 7, 10, .72), rgba(7, 7, 10, .20));
  backdrop-filter: blur(3px);
  pointer-events: none;
}

#archives [data-archive-content="sealed"] .sealed-live-record-head {
  display: grid;
  gap: 5px;
}

#archives [data-archive-content="sealed"] .sealed-live-record-head span {
  color: rgba(172, 121, 76, .48);
  font-size: 7px;
  letter-spacing: .24em;
}

#archives [data-archive-content="sealed"] .sealed-live-record-head strong {
  color: rgba(222, 203, 177, .76);
  font-family: Georgia, serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
}

#archives [data-archive-content="sealed"] .sealed-live-record dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 15px 0 0;
}

#archives [data-archive-content="sealed"] .sealed-live-record dl > div {
  min-width: 0;
}

#archives [data-archive-content="sealed"] .sealed-live-record dt {
  color: rgba(167, 122, 79, .48);
  font-size: 8px;
  letter-spacing: .12em;
}

#archives [data-archive-content="sealed"] .sealed-live-record dd {
  margin: 4px 0 0;
  color: rgba(228, 211, 187, .76);
  font-size: 13px;
  letter-spacing: .08em;
}

#archives [data-archive-content="sealed"] .sealed-live-record > p {
  margin: 15px 0 0;
  color: rgba(203, 187, 164, .52);
  font-size: 10px;
  line-height: 1.75;
  letter-spacing: .04em;
}

/* ---------------------------------------------------------
   個人藏錄入口
--------------------------------------------------------- */

#archives [data-archive-content="sealed"] .sealed-settlement-entry {
  position: absolute;
  right: 56px;
  bottom: 132px;
  z-index: 96;
  width: min(460px, 31vw);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border: 0;
  border-top: 1px solid rgba(181, 130, 78, .12);
  border-bottom: 1px solid rgba(181, 130, 78, .08);
  background: rgba(7, 7, 10, .18);
  color: rgba(184, 168, 145, .42);
  cursor: default;
  transition: .35s ease;
}

#archives [data-archive-content="sealed"] .sealed-settlement-entry > span {
  color: rgba(153, 98, 67, .44);
  font-family: Georgia, serif;
  font-size: 7px;
  letter-spacing: .18em;
}

#archives [data-archive-content="sealed"] .sealed-settlement-entry > strong {
  color: inherit;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .12em;
  text-align: left;
}

#archives [data-archive-content="sealed"] .sealed-settlement-entry > em {
  color: rgba(177, 144, 102, .40);
  font-size: 9px;
  font-style: normal;
  letter-spacing: .05em;
}

#archives [data-archive-content="sealed"] .sealed-settlement-entry.is-available {
  color: rgba(233, 217, 192, .88);
  cursor: pointer;
  background: rgba(98, 37, 33, .05);
  border-color: rgba(190, 139, 82, .22);
}

#archives [data-archive-content="sealed"] .sealed-settlement-entry.is-available:hover {
  transform: translateY(-2px);
  background: rgba(105, 41, 35, .10);
  box-shadow: 0 0 26px rgba(142, 66, 45, .10);
}

/* =========================================================
   7 / 14 / 30 階段解封 Overlay
   由 JS 移到 body，因此不可依賴 #archives 前綴
========================================================= */

.sealed-reveal.sealed-milestone-reveal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 10020 !important;
  display: grid !important;
  place-items: center !important;
  padding: 4vh 4vw !important;
  overflow: auto !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(111, 39, 34, .18), transparent 34%),
    rgba(2, 3, 6, .92) !important;
  backdrop-filter: blur(14px) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .45s ease, visibility .45s ease !important;
}

.sealed-reveal.sealed-milestone-reveal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.sealed-milestone-reveal .sealed-reveal-close {
  position: fixed !important;
  right: 34px !important;
  top: 24px !important;
  z-index: 5 !important;
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(191, 143, 85, .16) !important;
  background: rgba(5, 6, 9, .72) !important;
  color: rgba(225, 209, 183, .76) !important;
  font-size: 24px !important;
  cursor: pointer !important;
}

.sealed-milestone-reveal .sealed-reveal-inner {
  position: relative !important;
  width: min(1220px, 94vw) !important;
  max-height: 90vh !important;
  overflow: auto !important;
  padding: 44px 48px 48px !important;
  border: 1px solid rgba(189, 137, 80, .14) !important;
  background:
    linear-gradient(145deg, rgba(12, 11, 14, .97), rgba(4, 5, 8, .98)) !important;
  box-shadow:
    0 30px 100px rgba(0, 0, 0, .56),
    inset 0 0 90px rgba(88, 35, 29, .05) !important;
}

.sealed-milestone-reveal .sealed-reveal-head {
  text-align: center;
}

.sealed-milestone-reveal .sealed-reveal-kicker {
  color: rgba(175, 124, 77, .56);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: .34em;
}

.sealed-milestone-reveal .sealed-reveal-head h3 {
  margin: 10px 0 0;
  color: rgba(239, 220, 193, .92);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 400;
  letter-spacing: .22em;
  text-indent: .22em;
}

.sealed-milestone-reveal .sealed-reveal-head > i {
  display: block;
  width: 76px;
  height: 1px;
  margin: 18px auto;
  background: linear-gradient(90deg, transparent, rgba(164, 66, 53, .72), transparent);
}

.sealed-milestone-reveal .sealed-reveal-head > p {
  margin: 0;
  color: rgba(209, 193, 169, .58);
  font-size: 13px;
  letter-spacing: .06em;
}

.sealed-milestone-grid {
  display: grid;
  grid-template-columns: minmax(230px, .78fr) minmax(280px, .92fr) minmax(320px, 1fr);
  gap: 30px;
  align-items: stretch;
  margin-top: 38px;
}

.sealed-phase-mark-stage,
.sealed-phase-record,
.sealed-milestone-reveal .sealed-reward {
  min-width: 0;
  margin: 0 !important;
  padding: 22px;
  border: 1px solid rgba(183, 132, 80, .10);
  background:
    radial-gradient(circle at 50% 44%, rgba(101, 35, 33, .09), transparent 46%),
    rgba(5, 6, 9, .58);
}

.sealed-phase-mark-stage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 440px;
  text-align: center;
}

.sealed-phase-mark-stage > span,
.sealed-phase-record > span,
.sealed-reward-head > span {
  color: rgba(172, 122, 75, .46);
  font-family: Georgia, serif;
  font-size: 8px;
  letter-spacing: .24em;
}

.sealed-phase-mark-stage > img {
  width: 100%;
  height: 320px;
  object-fit: contain;
  align-self: center;
  filter: drop-shadow(0 0 18px rgba(146, 56, 45, .16));
}

.sealed-phase-mark-stage figcaption {
  color: rgba(212, 192, 164, .54);
  font-size: 11px;
  letter-spacing: .08em;
}

.sealed-phase-record {
  display: flex;
  flex-direction: column;
}

.sealed-phase-record h4 {
  margin: 28px 0 24px;
  color: rgba(235, 216, 188, .90);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .12em;
}

.sealed-phase-record dl {
  margin: 0;
}

.sealed-phase-record dl > div {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(172, 124, 76, .09);
}

.sealed-phase-record dt {
  color: rgba(165, 116, 72, .50);
  font-size: 10px;
  letter-spacing: .12em;
}

.sealed-phase-record dd {
  margin: 0;
  color: rgba(224, 207, 181, .78);
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1.7;
}

.sealed-phase-record > p {
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(172, 124, 76, .10);
  color: rgba(203, 184, 159, .55);
  font-size: 12px;
  line-height: 1.85;
  letter-spacing: .05em;
  white-space: normal;
  word-break: break-word;
}

.sealed-milestone-reveal .sealed-reward {
  width: auto !important;
}

.sealed-reward-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.sealed-reward-head > strong {
  color: rgba(234, 216, 190, .84);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .10em;
}

.sealed-milestone-reveal .sealed-reward-stage {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: 1px solid rgba(182, 130, 79, .12) !important;
  background:
    radial-gradient(circle at 50% 40%, rgba(104, 39, 35, .12), transparent 38%),
    rgba(3, 4, 7, .94) !important;
}

.sealed-milestone-reveal .sealed-reward-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sealed-milestone-reveal .sealed-reward-empty {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background:
    radial-gradient(circle at center, rgba(126, 51, 44, .07), transparent 40%) !important;
}

.sealed-milestone-reveal .sealed-reward-empty[hidden] {
  display: none !important;
}

.sealed-milestone-reveal .sealed-reward-empty > span {
  color: rgba(178, 127, 79, .42);
  font-size: 8px;
  letter-spacing: .30em;
}

.sealed-milestone-reveal .sealed-reward-empty > i {
  width: 68px;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, transparent, rgba(155, 61, 52, .58), transparent);
}

.sealed-milestone-reveal .sealed-reward-empty > strong {
  color: rgba(232, 215, 189, .82);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: .16em;
}

.sealed-milestone-reveal .sealed-reward-empty > p {
  margin: 11px 0 0;
  color: rgba(199, 181, 156, .50);
  font-size: 11px;
}

.sealed-milestone-reveal .sealed-reward-empty > em {
  margin-top: 25px;
  color: rgba(145, 61, 54, .48);
  font-family: Georgia, serif;
  font-size: 7px;
  font-style: normal;
  letter-spacing: .25em;
}

.sealed-milestone-reveal .sealed-reward-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
}

.sealed-milestone-reveal .sealed-reward-footer span,
.sealed-milestone-reveal .sealed-reward-footer em {
  color: rgba(171, 129, 87, .42);
  font-size: 7px;
  font-style: normal;
  letter-spacing: .14em;
}

.sealed-milestone-reveal .sealed-reward-footer i {
  width: 24px;
  height: 1px;
  background: rgba(152, 83, 60, .22);
}

/* =========================================================
   個人藏錄結算 Overlay
========================================================= */

.sealed-settlement {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 4vh 4vw;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 30%, rgba(105, 37, 33, .16), transparent 34%),
    rgba(2, 3, 6, .94);
  backdrop-filter: blur(16px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .42s ease, visibility .42s ease;
}

.sealed-settlement.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sealed-settlement-close {
  position: fixed;
  right: 34px;
  top: 24px;
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(191, 143, 85, .16);
  background: rgba(5, 6, 9, .72);
  color: rgba(225, 209, 183, .76);
  font-size: 24px;
  cursor: pointer;
}

.sealed-settlement-shell {
  width: min(1120px, 94vw);
  max-height: 91vh;
  overflow: auto;
  padding: 44px 48px 50px;
  border: 1px solid rgba(185, 133, 79, .14);
  background:
    linear-gradient(145deg, rgba(12, 11, 14, .98), rgba(4, 5, 8, .99));
  box-shadow:
    0 30px 100px rgba(0, 0, 0, .58),
    inset 0 0 90px rgba(86, 34, 29, .05);
}

.sealed-settlement-head {
  text-align: center;
}

.sealed-settlement-head > span {
  color: rgba(174, 123, 76, .54);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: .30em;
}

.sealed-settlement-head h3 {
  margin: 10px 0 0;
  color: rgba(239, 220, 194, .94);
  font-size: clamp(36px, 4vw, 54px);
  font-weight: 400;
  letter-spacing: .18em;
  text-indent: .18em;
}

.sealed-settlement-head p {
  margin: 14px 0 0;
  color: rgba(204, 187, 163, .54);
  font-size: 12px;
  letter-spacing: .06em;
}

.sealed-settlement-grid {
  display: grid;
  grid-template-columns: minmax(300px, .8fr) minmax(360px, 1.2fr);
  gap: 42px;
  margin-top: 38px;
}

.sealed-holder-panel,
.sealed-result-panel {
  min-width: 0;
}

.sealed-holder-preview {
  position: relative;
  width: min(320px, 100%);
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, rgba(94, 50, 42, .11), transparent 45%),
    rgba(4, 5, 8, .84);
}

.sealed-holder-preview > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sealed-holder-silhouette {
  object-fit: contain;
  z-index: 1;
}

.sealed-holder-photo {
  object-fit: cover;
  z-index: 1;
  transform-origin: center center;
}

.sealed-holder-frame {
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

.sealed-holder-controls {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.sealed-holder-controls label {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.sealed-holder-controls label > span,
.sealed-crop-controls label > span {
  color: rgba(172, 126, 82, .54);
  font-size: 10px;
  letter-spacing: .08em;
}

.sealed-holder-controls input[type="text"] {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid rgba(177, 128, 78, .15);
  background: rgba(5, 6, 9, .72);
  color: rgba(235, 218, 192, .88);
  outline: none;
  font: inherit;
}

.sealed-holder-controls input[type="file"] {
  min-width: 0;
  color: rgba(201, 183, 159, .58);
  font-size: 10px;
}

.sealed-crop-controls {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(169, 119, 74, .08);
  border-bottom: 1px solid rgba(169, 119, 74, .08);
}

.sealed-crop-controls[hidden] {
  display: none !important;
}

.sealed-crop-controls label {
  display: grid;
  grid-template-columns: 48px 1fr;
  align-items: center;
  gap: 10px;
}

.sealed-crop-controls input[type="range"] {
  width: 100%;
  accent-color: #9c5d45;
}

.sealed-photo-clear {
  justify-self: start;
  padding: 8px 12px;
  border: 1px solid rgba(170, 120, 74, .14);
  background: transparent;
  color: rgba(205, 188, 164, .56);
  font-size: 10px;
  letter-spacing: .08em;
  cursor: pointer;
}

.sealed-result-panel {
  padding: 6px 0 0;
}

.sealed-result-panel > span {
  color: rgba(174, 123, 76, .52);
  font-family: Georgia, serif;
  font-size: 9px;
  letter-spacing: .26em;
}

.sealed-result-panel h4 {
  margin: 13px 0 24px;
  color: rgba(239, 221, 195, .92);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: .11em;
}

.sealed-result-panel dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 26px;
}

.sealed-result-panel dl > div {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid rgba(175, 125, 77, .09);
}

.sealed-result-panel .sealed-result-anomaly-row {
  grid-column: 1 / -1;
}

.sealed-result-panel dt {
  color: rgba(169, 121, 76, .48);
  font-size: 10px;
  letter-spacing: .10em;
}

.sealed-result-panel dd {
  margin: 0;
  color: rgba(226, 209, 183, .78);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: .06em;
  word-break: break-word;
}

.sealed-result-panel > p {
  margin: 28px 0 0;
  color: rgba(204, 186, 160, .54);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: .05em;
}

.sealed-settlement-actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

.sealed-settlement-actions button {
  min-width: 180px;
  padding: 12px 18px;
  border: 1px solid rgba(191, 141, 84, .24);
  background:
    linear-gradient(180deg, rgba(66, 28, 27, .42), rgba(8, 8, 11, .84));
  color: rgba(236, 218, 191, .82);
  font-size: 12px;
  letter-spacing: .10em;
  cursor: pointer;
  transition: .28s ease;
}

.sealed-settlement-actions button:hover {
  transform: translateY(-1px);
  border-color: rgba(211, 159, 95, .48);
  box-shadow: 0 0 22px rgba(151, 67, 48, .10);
}

.sealed-generation-status {
  margin: 15px 0 0;
  color: rgba(184, 165, 140, .44);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .05em;
  text-align: center;
}

.sealed-output-wrap {
  width: min(520px, 100%);
  margin: 28px auto 0;
}

.sealed-output-wrap[hidden] {
  display: none !important;
}

.sealed-output-wrap canvas {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(184, 132, 79, .14);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .40);
}

/* =========================================================
   響應式
========================================================= */

@media (max-width: 850px) {
  #archives [data-archive-content="sealed"] .sealed-live-record {
    left: 34px;
    width: 220px;
  }

  #archives [data-archive-content="sealed"] .sealed-settlement-entry {
    right: 34px;
    width: 360px;
  }

  .sealed-milestone-grid {
    grid-template-columns: minmax(220px, .85fr) minmax(260px, 1fr);
  }

  .sealed-milestone-reveal .sealed-reward {
    grid-column: 1 / -1;
    width: min(430px, 100%) !important;
    justify-self: center;
  }
}

@media (max-width: 820px) {
  #archives [data-archive-content="sealed"] .sealed-live-record {
    display: none;
  }

  #archives [data-archive-content="sealed"] .sealed-settlement-entry {
    right: 22px;
    bottom: 122px;
    width: min(360px, 56vw);
  }

  .sealed-milestone-reveal .sealed-reveal-inner,
  .sealed-settlement-shell {
    padding: 36px 24px 40px !important;
  }

  .sealed-milestone-grid,
  .sealed-settlement-grid {
    grid-template-columns: 1fr;
  }

  .sealed-phase-mark-stage {
    min-height: 380px;
  }

  .sealed-result-panel dl {
    grid-template-columns: 1fr;
  }

  .sealed-result-panel .sealed-result-anomaly-row {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  #archives [data-archive-content="sealed"] .sealed-settlement-entry {
    right: 18px;
    left: 18px;
    bottom: 124px;
    width: auto;
  }

  .sealed-settlement-actions {
    flex-direction: column;
  }

  .sealed-settlement-actions button {
    width: 100%;
  }

  .sealed-holder-controls label {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   05｜秘藏｜局部位置精修
   只做：
   01. 移動 08 / 13 / 14 / 18 四張封條
   02. 日期狀態移到「天數」與「初封」中間
   03. 個人藏錄移到右下並強化成獨立按鈕
   04. 左上 PRIVATE RECORD 資訊放大

   ※ 不修改任何封條尺寸
   ※ 不重排其他 26 張封條
========================================================= */


/* =========================================================
   01｜只移動四張封條
   08 → 左側綠框
   13 / 14 / 18 → 右側三個綠框
========================================================= */


/* 08｜移到左側中段空位 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(8) {
  left: 7.5% !important;
  top: 46% !important;
}


/* 13｜移到右側第一個空位 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(13) {
  left: 66.5% !important;
  top: 42% !important;
}


/* 14｜移到右側第二個空位 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(14) {
  left: 75.5% !important;
  top: 49% !important;
}


/* 18｜移到右側最外面的空位 */
#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(18) {
  left: 88% !important;
  top: 38% !important;
}


/* =========================================================
   02｜底部進度區重新分工
   左：14日
   中左：日期／活動狀態
   中央：初封／深封／終封
   右：個人藏錄
========================================================= */


/* 舊進度線目前本來就不用顯示，直接不佔格子 */
#archives
[data-archive-content="sealed"]
.sealed-progress-main {
  display: none !important;
}


/* 底部 progress panel 只負責：
   天數 + 日期狀態 */
#archives
[data-archive-content="sealed"]
.sealed-progress-panel {
  left: 48px !important;
  right: 48px !important;
  bottom: 22px !important;

  display: grid !important;

  grid-template-columns:
    150px
    260px
    1fr !important;

  align-items: end !important;

  column-gap: 28px !important;

  z-index: 20 !important;

  border-top: 0 !important;
}


/* 日期／活動資訊
   → 移到 14日 與 初封中間 */
#archives
[data-archive-content="sealed"]
.sealed-progress-status {
  grid-column: 2 !important;

  position: relative !important;

  left: 0 !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  width: 245px !important;

  margin: 0 0 7px !important;

  padding: 10px 0 10px 18px !important;

  border-left:
    1px solid
    rgba(183, 127, 79, .24)
    !important;

  color:
    rgba(222, 205, 179, .78)
    !important;

  font-size: 14px !important;

  line-height: 1.65 !important;

  letter-spacing: .06em !important;

  text-align: left !important;

  white-space: normal !important;
}


/* =========================================================
   03｜個人藏錄
   搬到原本「活動尚未開始」右下位置
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-settlement-entry {
  position: absolute !important;

  right: 50px !important;
  bottom: 18px !important;

  width: 315px !important;
  min-height: 82px !important;

  z-index: 40 !important;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    auto !important;

  grid-template-rows:
    auto
    auto !important;

  column-gap: 18px !important;
  row-gap: 5px !important;

  align-items: center !important;

  padding:
    14px 18px 15px !important;

  border:
    1px solid
    rgba(191, 137, 81, .28)
    !important;

  border-radius:
    8px !important;

  background:
    linear-gradient(
      135deg,
      rgba(47, 21, 20, .86),
      rgba(11, 10, 13, .96) 68%
    ) !important;

  box-shadow:
    0 12px 28px
    rgba(0, 0, 0, .28),
    inset 0 0 24px
    rgba(121, 45, 36, .055)
    !important;

  color:
    rgba(233, 216, 190, .86)
    !important;

  text-align: left !important;

  overflow: hidden !important;
}


/* 左側細亮線 */
#archives
[data-archive-content="sealed"]
.sealed-settlement-entry::before {
  content: "";

  position: absolute;

  left: 0;
  top: 16px;
  bottom: 16px;

  width: 2px;

  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(213, 155, 87, .78),
      transparent
    );

  box-shadow:
    0 0 10px
    rgba(185, 91, 55, .18);

  pointer-events: none;
}


/* PERSONAL ARCHIVE */
#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > span {
  grid-column: 1;
  grid-row: 1;

  color:
    rgba(184, 127, 77, .68)
    !important;

  font-size:
    9px !important;

  letter-spacing:
    .24em !important;
}


/* 個人藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > strong {
  grid-column: 1;
  grid-row: 2;

  color:
    rgba(240, 221, 193, .94)
    !important;

  font-size:
    23px !important;

  font-weight:
    400 !important;

  letter-spacing:
    .14em !important;
}


/* 活動結束後結算／可生成藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > em {
  grid-column: 2;
  grid-row: 1 / span 2;

  max-width: 105px;

  color:
    rgba(198, 165, 119, .64)
    !important;

  font-size:
    10px !important;

  font-style:
    normal !important;

  line-height:
    1.6 !important;

  letter-spacing:
    .05em !important;

  text-align:
    right !important;
}


/* 已可結算時更亮 */
#archives
[data-archive-content="sealed"]
.sealed-settlement-entry.is-available {
  border-color:
    rgba(211, 157, 91, .48)
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(76, 29, 26, .92),
      rgba(13, 11, 14, .98) 70%
    ) !important;

  box-shadow:
    0 13px 30px
    rgba(0, 0, 0, .34),
    0 0 22px
    rgba(157, 66, 47, .11)
    !important;

  cursor: pointer !important;
}


#archives
[data-archive-content="sealed"]
.sealed-settlement-entry.is-available:hover {
  transform:
    translateY(-3px)
    !important;

  border-color:
    rgba(223, 169, 99, .68)
    !important;

  background:
    linear-gradient(
      135deg,
      rgba(93, 35, 29, .94),
      rgba(14, 12, 15, .98) 72%
    ) !important;

  box-shadow:
    0 17px 36px
    rgba(0, 0, 0, .38),
    0 0 28px
    rgba(174, 73, 49, .17)
    !important;
}


/* =========================================================
   04｜左上「秘藏」下面 PRIVATE RECORD 全面放大
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-live-record {
  width: 280px !important;

  padding:
    17px 18px 19px !important;
}


/* PRIVATE RECORD */
#archives
[data-archive-content="sealed"]
.sealed-live-record-head span {
  font-size: 9px !important;

  letter-spacing:
    .24em !important;

  color:
    rgba(190, 137, 84, .66)
    !important;
}


/* YWJ-XXXX */
#archives
[data-archive-content="sealed"]
.sealed-live-record-head strong {
  margin-top: 2px !important;

  font-size: 14px !important;

  line-height: 1.4 !important;

  color:
    rgba(232, 213, 185, .90)
    !important;
}


/* 封痕／異象 */
#archives
[data-archive-content="sealed"]
.sealed-live-record dt {
  font-size: 10px !important;

  color:
    rgba(187, 138, 87, .68)
    !important;
}


/* 潮痕、花羽殘影等等 */
#archives
[data-archive-content="sealed"]
.sealed-live-record dd {
  margin-top: 6px !important;

  font-size: 15px !important;

  line-height: 1.45 !important;

  color:
    rgba(235, 218, 192, .88)
    !important;
}


/* 最下方觀測句 */
#archives
[data-archive-content="sealed"]
.sealed-live-record > p {
  margin-top: 16px !important;

  font-size: 12px !important;

  line-height: 1.8 !important;

  color:
    rgba(215, 198, 173, .70)
    !important;
}
/* =========================================================
   05｜秘藏｜第二輪微調修正版
   只貼在 style.css 最底部
========================================================= */


/* =========================================================
   01｜剩下那張封條再移位
   08 → 移到你圈的中左空位
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(8) {
  left: 31.5% !important;
  top: 36.5% !important;
  --paper-rotate: -11deg !important;
  --paper-scale: .98 !important;
}


/* =========================================================
   02｜左上即時藏錄再放大
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-live-record {
  left: 54px !important;
  top: 214px !important;
  width: 312px !important;
  padding: 18px 20px 20px !important;
  border-top: 1px solid rgba(190, 141, 83, .20) !important;
  border-bottom: 1px solid rgba(190, 141, 83, .14) !important;
  background:
    linear-gradient(
      90deg,
      rgba(8, 8, 12, .82),
      rgba(8, 8, 12, .28)
    ) !important;
  backdrop-filter: blur(4px) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record-head {
  gap: 7px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record-head span {
  font-size: 9px !important;
  letter-spacing: .24em !important;
  color: rgba(184, 132, 84, .70) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record-head strong {
  font-size: 16px !important;
  line-height: 1.35 !important;
  letter-spacing: .10em !important;
  color: rgba(239, 221, 194, .92) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record dl {
  margin: 18px 0 0 !important;
  gap: 16px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record dt {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  color: rgba(184, 132, 84, .72) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record dd {
  margin-top: 6px !important;
  font-size: 18px !important;
  line-height: 1.45 !important;
  letter-spacing: .06em !important;
  color: rgba(239, 221, 194, .92) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record > p {
  margin: 18px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.85 !important;
  letter-spacing: .04em !important;
  color: rgba(220, 203, 180, .78) !important;
}


/* =========================================================
   03｜左下 DAYS + 日期狀態
   把狀態移到 30日右側空位中央，並拉開距離
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-progress-panel {
  left: 48px !important;
  right: 48px !important;
  bottom: 18px !important;

  display: grid !important;
  grid-template-columns: 190px 360px 1fr !important;
  column-gap: 34px !important;
  align-items: center !important;

  border-top: 0 !important;
  padding-top: 0 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy {
  min-height: 88px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy > span {
  font-size: 12px !important;
  letter-spacing: .18em !important;
  margin-bottom: 10px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy > strong {
  display: flex !important;
  align-items: flex-end !important;
  gap: 14px !important;
  line-height: 1 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy b {
  font-size: 50px !important;
  line-height: .92 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy i {
  font-size: 19px !important;
  line-height: 1 !important;
  transform: translateY(-6px) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-status {
  grid-column: 2 !important;

  width: 340px !important;
  min-height: 88px !important;

  margin: 0 !important;
  padding: 0 0 0 22px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  border-left: 1px solid rgba(183, 127, 79, .22) !important;

  font-size: 18px !important;
  line-height: 1.7 !important;
  letter-spacing: .04em !important;
  color: rgba(229, 212, 186, .86) !important;

  text-align: left !important;
}


/* =========================================================
   04｜個人藏錄按鈕
   字再放大，內容垂直置中
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-settlement-entry {
  right: 56px !important;
  bottom: 18px !important;

  width: 380px !important;
  min-height: 92px !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 6px !important;
  align-items: center !important;

  padding: 16px 20px !important;

  border: 1px solid rgba(190, 139, 82, .32) !important;
  border-radius: 10px !important;

  background:
    linear-gradient(
      135deg,
      rgba(70, 30, 27, .88),
      rgba(10, 10, 14, .95) 72%
    ) !important;

  box-shadow:
    0 10px 26px rgba(0, 0, 0, .24),
    inset 0 0 20px rgba(135, 53, 38, .06) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > span {
  grid-column: 1 !important;
  grid-row: 1 !important;

  font-size: 10px !important;
  letter-spacing: .22em !important;
  color: rgba(191, 139, 89, .72) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > strong {
  grid-column: 1 !important;
  grid-row: 2 !important;

  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: .12em !important;
  color: rgba(243, 226, 199, .96) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > em {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;

  align-self: center !important;
  justify-self: end !important;

  max-width: 130px !important;

  font-size: 12px !important;
  line-height: 1.7 !important;
  letter-spacing: .04em !important;
  text-align: right !important;

  color: rgba(214, 183, 141, .78) !important;
}


/* =========================================================
   05｜中央核心
   拿掉怪方框感、降低遮擋、中央說明字放大
========================================================= */

/* =========================================================
   05｜秘藏｜異象正式顯示
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-anomaly-stack {
  display: block !important;

  position: absolute !important;
  inset: -22% !important;

  z-index: 4 !important;

  pointer-events: none !important;
  overflow: visible !important;
}


/* 第一層｜當日異象 */
#archives
[data-archive-content="sealed"]
.sealed-anomaly-primary {
  width: 120% !important;
  height: 120% !important;

  object-fit: contain !important;

  mix-blend-mode: screen !important;

  filter:
    brightness(1.12)
    saturate(.92)
    drop-shadow(
      0 0 18px
      rgba(128, 158, 184, .14)
    ) !important;

  animation:
    ywjArchiveAnomalyPrimary
    7.2s
    ease-in-out
    infinite
    !important;
}


/* 第二層｜累積主導異象 */
#archives
[data-archive-content="sealed"]
.sealed-anomaly-secondary {
  width: 138% !important;
  height: 138% !important;

  object-fit: contain !important;

  mix-blend-mode: screen !important;

  filter:
    brightness(.96)
    saturate(.78)
    blur(.3px)
    !important;

  animation:
    ywjArchiveAnomalySecondary
    10.5s
    ease-in-out
    infinite
    !important;
}


@keyframes ywjArchiveAnomalyPrimary {

  0%,
  100% {
    opacity: .22;

    transform:
      translate(-50%, -50%)
      scale(.97);
  }

  50% {
    opacity: .42;

    transform:
      translate(-50%, -50%)
      scale(1.035);
  }

}


@keyframes ywjArchiveAnomalySecondary {

  0%,
  100% {
    opacity: .10;

    transform:
      translate(-50%, -50%)
      rotate(14deg)
      scale(.98);
  }

  50% {
    opacity: .22;

    transform:
      translate(-50%, -50%)
      rotate(18deg)
      scale(1.035);
  }

}

/* 核心本體不要有任何怪框感 */
#archives
[data-archive-content="sealed"]
.sealed-vault-core {
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* 中央主藏紋稍微更清楚 */
#archives
[data-archive-content="sealed"]
.sealed-core-mark-image {
  width: 84% !important;
  height: 84% !important;
  filter:
    brightness(1.05)
    drop-shadow(0 0 14px rgba(181, 72, 52, .16))
    drop-shadow(0 0 24px rgba(132, 77, 49, .08))
    !important;
}

/* 中央那句說明字改大，不再被吃掉 */
#archives
[data-archive-content="sealed"]
.sealed-core-caption {
  top: calc(50% + 126px) !important;
  z-index: 20 !important;

  width: min(330px, 78%) !important;
  margin: 0 !important;
  padding: 8px 14px !important;

  border-radius: 999px !important;

  background:
    linear-gradient(
      180deg,
      rgba(10, 10, 14, .58),
      rgba(10, 10, 14, .22)
    ) !important;

  backdrop-filter: blur(3px) !important;

  color: rgba(237, 220, 194, .88) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  letter-spacing: .05em !important;
  text-align: center !important;

  text-shadow: 0 0 10px rgba(0, 0, 0, .42) !important;
}

/* 外圈符字稍微淡一點，避免搶字 */
#archives
[data-archive-content="sealed"]
.sealed-rune {
  opacity: .55 !important;
}
/* =========================================================
   05｜秘藏｜第三輪微調修正版
   直接貼在 style.css 最底部
========================================================= */


/* =========================================================
   A｜左上即時藏錄資訊再放大
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-live-record {
  left: 52px !important;
  top: 158px !important;
  width: 350px !important;
  padding: 18px 22px 20px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record-head span {
  font-size: 10px !important;
  letter-spacing: .24em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record-head strong {
  font-size: 17px !important;
  line-height: 1.35 !important;
  letter-spacing: .10em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record dl {
  margin: 18px 0 0 !important;
  gap: 18px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record dt {
  font-size: 12px !important;
  letter-spacing: .10em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record dd {
  margin-top: 6px !important;
  font-size: 19px !important;
  line-height: 1.45 !important;
  letter-spacing: .05em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-live-record > p {
  margin: 18px 0 0 !important;
  font-size: 14px !important;
  line-height: 1.82 !important;
  letter-spacing: .04em !important;
}


/* =========================================================
   B｜左上被資訊擋住的那張封條下移
   這裡先調第 11 張
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(11) {
  left: 16.2% !important;
  top: 43.4% !important;
  --paper-rotate: -8deg !important;
  --paper-scale: 1.00 !important;
}


/* =========================================================
   C｜左下 DAYS + 狀態
   改成：30日  |  活動尚未開始。
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-progress-panel {
  left: 48px !important;
  right: 48px !important;
  bottom: 18px !important;

  display: grid !important;
  grid-template-columns: 210px 430px 1fr !important;
  column-gap: 34px !important;
  align-items: center !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy {
  min-height: 82px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-self: center !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy > span {
  font-size: 12px !important;
  letter-spacing: .18em !important;
  margin-bottom: 10px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy > strong {
  display: flex !important;
  align-items: flex-end !important;
  gap: 16px !important;
  line-height: 1 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy b {
  font-size: 52px !important;
  line-height: .92 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-copy i {
  font-size: 20px !important;
  line-height: 1 !important;
  transform: translateY(-6px) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-status {
  grid-column: 2 !important;

  position: relative !important;
  width: 430px !important;
  min-height: 82px !important;

  margin: 0 !important;
  padding: 0 0 0 34px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  border-left: 0 !important;

  font-size: 17px !important;
  line-height: 1.5 !important;
  letter-spacing: .03em !important;
  text-align: left !important;
}

#archives
[data-archive-content="sealed"]
.sealed-progress-status::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

  width: 1px !important;
  height: 34px !important;
  background: rgba(191, 141, 87, .30) !important;
}


/* =========================================================
   D｜初封 / 深封 / 終封
   底下那行改成單行並往下移一點
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-tier {
  align-items: start !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy strong {
  margin-bottom: 12px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  display: block !important;
  margin-top: 10px !important;

  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: .04em !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
}


/* =========================================================
   E｜個人藏錄
   再往左上移、字再穩一點
========================================================= */
#archives
[data-archive-content="sealed"]
.sealed-settlement-entry {
  right: 112px !important;
  bottom: 28px !important;
  width: 380px !important;
  min-height: 92px !important;

  padding: 15px 20px !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: auto auto !important;
  column-gap: 18px !important;
  row-gap: 6px !important;
  align-items: center !important;
}

#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > span {
  font-size: 10px !important;
  letter-spacing: .22em !important;
  align-self: end !important;
}

#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > strong {
  font-size: 22px !important;
  line-height: 1.2 !important;
  align-self: start !important;
}

#archives
[data-archive-content="sealed"]
.sealed-settlement-entry > em {
  max-width: 144px !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  text-align: right !important;
  align-self: center !important;
}


/* =========================================================
   F｜中央說明字
   再往下一點、再大一點
========================================================= */
/* =========================================================
   F｜中央說明字｜手動調整
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault-core {

  /* =========================
     你以後只改這裡
     X：+ 往右 / - 往左
     Y：+ 往下 / - 往上
  ========================= */

  --ywj-caption-x: 20px;
  --ywj-caption-y: 0px;

  /* 字體大小 */
  --ywj-caption-size: 16px;

  /* 文字區寬度 */
  --ywj-caption-width: 360px;
}


#archives
[data-archive-content="sealed"]
.sealed-core-caption {

  left: 50% !important;
  top: calc(50% + 142px) !important;

  transform:
    translateX(-50%)
    translate(
      var(--ywj-caption-x),
      var(--ywj-caption-y)
    )
    !important;

  width:
    min(
      var(--ywj-caption-width),
      82%
    )
    !important;

  padding:
    10px 16px !important;

  font-size:
    var(--ywj-caption-size)
    !important;

  line-height:
    1.85 !important;

  letter-spacing:
    .05em !important;
}
/* =========================================================
   秘藏｜手動位置控制
   以後只改這四個數字
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault {

  /* 30日 | 活動狀態
     X：+右 / -左
     Y：+下 / -上
  */
  --ywj-progress-x: 30px;
  --ywj-progress-y: -30px;

  /* 右下個人藏錄
     X：+右 / -左
     Y：+下 / -上
  */
  --ywj-record-x: 0px;
  --ywj-record-y: -50px;
}


/* 左下 30日＋活動狀態 */
#archives
[data-archive-content="sealed"]
.sealed-progress-panel {
  transform:
    translate(
      var(--ywj-progress-x),
      var(--ywj-progress-y)
    ) !important;
}


/* 右下個人藏錄摘要 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary {
  transform:
    translate(
      var(--ywj-record-x),
      var(--ywj-record-y)
    ) !important;
}
/* =========================================================
   秘藏｜個人藏錄摘要正式修復
   修正：
   1. 不再跑到左邊變亂碼
   2. 固定回右下
   3. 可自己上下左右微調
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault {
  /* 個人藏錄手動位置控制
     X：+右 / -左
     Y：+下 / -上
  */
  --ywj-record-x: 0px;
  --ywj-record-y: 0px;
}


/* =========================================================
   個人藏錄摘要卡
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary {
  position: absolute !important;

  right: 58px !important;
  bottom: 26px !important;

  z-index: 60 !important;

  width: 430px !important;
  min-height: 132px !important;

  box-sizing: border-box !important;

  margin: 0 !important;
  padding: 16px 20px 18px !important;

  border:
    1px solid
    rgba(193, 139, 82, .32)
    !important;

  border-radius:
    9px !important;

  background:
    linear-gradient(
      135deg,
      rgba(61, 25, 23, .90),
      rgba(9, 9, 13, .96) 72%
    ) !important;

  box-shadow:
    0 14px 32px
    rgba(0, 0, 0, .28),
    inset 0 0 24px
    rgba(130, 50, 39, .05)
    !important;

  transform:
    translate(
      var(--ywj-record-x),
      var(--ywj-record-y)
    ) !important;
}


/* 標頭 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}


/* PERSONAL ARCHIVE + 個人藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head > div {
  display: grid !important;
  gap: 5px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-record-summary-head span {
  color:
    rgba(188, 132, 81, .72)
    !important;

  font-size:
    10px !important;

  letter-spacing:
    .22em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-record-summary-head strong {
  color:
    rgba(243, 224, 195, .96)
    !important;

  font-size:
    22px !important;

  font-weight:
    400 !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .12em !important;
}


/* 點擊中央提示 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head em {
  max-width:
    145px !important;

  color:
    rgba(204, 169, 123, .70)
    !important;

  font-size:
    11px !important;

  font-style:
    normal !important;

  line-height:
    1.55 !important;

  text-align:
    right !important;
}


/* RECORD ID */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-id {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;

  margin-top:
    12px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-record-summary-id span {
  color:
    rgba(181, 129, 82, .60)
    !important;

  font-size:
    9px !important;

  letter-spacing:
    .14em !important;
}

#archives
[data-archive-content="sealed"]
.sealed-record-summary-id strong {
  color:
    rgba(233, 215, 189, .88)
    !important;

  font-size:
    13px !important;

  font-weight:
    400 !important;

  letter-spacing:
    .08em !important;
}


/* 封痕 / 異象 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary dl {
  display:
    grid !important;

  grid-template-columns:
    1fr 1fr !important;

  gap:
    18px !important;

  margin:
    12px 0 0 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-record-summary dt {
  color:
    rgba(183, 130, 82, .62)
    !important;

  font-size:
    10px !important;
}

#archives
[data-archive-content="sealed"]
.sealed-record-summary dd {
  margin:
    4px 0 0 !important;

  color:
    rgba(238, 220, 194, .92)
    !important;

  font-size:
    15px !important;

  line-height:
    1.4 !important;
}


/* 觀測句 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary > p {
  margin:
    12px 0 0 !important;

  color:
    rgba(217, 199, 174, .72)
    !important;

  font-size:
    12px !important;

  line-height:
    1.7 !important;
}
/* =========================================================
   秘藏｜右下個人藏錄＋三階說明文字精修
========================================================= */


/* =========================================================
   01｜右下個人藏錄
   框縮小、壓到水平線以下、資料放大
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary {
  right: 52px !important;
  bottom: 23px !important;

  width: 390px !important;
  height: 122px !important;
  min-height: 0 !important;

  box-sizing: border-box !important;

  padding: 12px 16px 13px !important;

  border-radius: 7px !important;

  overflow: hidden !important;
}


/* ---------- 標頭 ---------- */

#archives
[data-archive-content="sealed"]
.sealed-record-summary-head {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    142px
    !important;

  gap: 14px !important;

  align-items: center !important;
}


/* PERSONAL ARCHIVE + 個人藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head > div {
  gap: 2px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary-head span {
  font-size: 9px !important;

  letter-spacing:
    .20em !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary-head strong {
  font-size: 21px !important;

  line-height: 1.15 !important;

  letter-spacing:
    .10em !important;
}


/* 點擊中央藏紋查看完整藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head em {
  max-width: none !important;

  font-size: 11px !important;

  line-height: 1.45 !important;

  color:
    rgba(215, 183, 139, .82)
    !important;

  text-align: right !important;
}


/* =========================================================
   02｜RECORD ID
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary-id {
  margin-top: 7px !important;

  gap: 8px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary-id span {
  font-size: 9px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary-id strong {
  font-size: 13px !important;

  color:
    rgba(239, 222, 196, .92)
    !important;
}


/* =========================================================
   03｜封痕 / 異象
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary dl {
  margin:
    7px 0 0 !important;

  gap:
    18px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary dt {
  font-size: 10px !important;

  color:
    rgba(194, 142, 91, .76)
    !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary dd {
  margin:
    2px 0 0 !important;

  font-size: 15px !important;

  line-height: 1.3 !important;

  color:
    rgba(244, 226, 199, .96)
    !important;
}


/* =========================================================
   04｜最下面觀測句
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary > p {
  margin:
    7px 0 0 !important;

  font-size: 11px !important;

  line-height: 1.4 !important;

  color:
    rgba(224, 205, 179, .82)
    !important;

  white-space: nowrap !important;
}


/* =========================================================
   05｜初封 / 深封 / 終封
   「累計解封……」放大並保持一行
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  display: block !important;

  margin-top:
    10px !important;

  font-size:
    13px !important;

  line-height:
    1.2 !important;

  letter-spacing:
    .035em !important;

  white-space:
    nowrap !important;

  word-break:
    keep-all !important;

  color:
    rgba(217, 197, 171, .68)
    !important;
}


/* 三個卡片內文稍微往下留空 */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy strong {
  margin-bottom:
    2px !important;
}
/* =========================================================
   秘藏｜個人藏錄｜橫向精簡版
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary {
  width: 440px !important;

  height: auto !important;
  min-height: 0 !important;

  padding: 12px 17px 13px !important;

  box-sizing: border-box !important;

  border-radius: 7px !important;

  overflow: visible !important;
}


/* =========================================================
   01｜第一區
   PERSONAL ARCHIVE        點擊中央藏紋查看完整藏錄
   個人藏錄
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary-head {
  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    180px !important;

  column-gap: 20px !important;

  align-items: center !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary-head > div {
  display: grid !important;

  gap: 2px !important;
}


/* PERSONAL ARCHIVE */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head span {
  font-size: 10px !important;

  line-height: 1.2 !important;

  letter-spacing: .20em !important;
}


/* 個人藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head strong {
  font-size: 22px !important;

  line-height: 1.25 !important;

  letter-spacing: .10em !important;
}


/* 點擊中央藏紋查看完整藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head em {
  max-width: none !important;

  font-size: 11px !important;

  line-height: 1.45 !important;

  letter-spacing: .02em !important;

  text-align: right !important;

  white-space: nowrap !important;

  color:
    rgba(216, 184, 140, .80)
    !important;
}


/* =========================================================
   02｜RECORD ID
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary-id {
  display: flex !important;

  align-items: baseline !important;

  gap: 10px !important;

  margin-top: 9px !important;
}


/* RECORD ID */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-id span {
  font-size: 10px !important;

  line-height: 1.2 !important;

  letter-spacing: .12em !important;
}


/* YWJ-... */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-id strong {
  font-size: 14px !important;

  line-height: 1.2 !important;

  letter-spacing: .07em !important;

  color:
    rgba(243, 225, 199, .95)
    !important;
}


/* =========================================================
   03｜封痕 影      異象 不明暗影
   改成同一行
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary dl {
  display: flex !important;

  align-items: baseline !important;

  gap: 42px !important;

  margin: 10px 0 0 !important;
}


/* 每一組：封痕＋影 / 異象＋不明暗影 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary dl > div {
  display: flex !important;

  align-items: baseline !important;

  gap: 10px !important;

  min-width: 0 !important;
}


/* 封痕 / 異象 —— 加大 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary dt {
  font-size: 13px !important;

  line-height: 1.2 !important;

  letter-spacing: .08em !important;

  color:
    rgba(203, 150, 96, .84)
    !important;

  white-space: nowrap !important;
}


/* 影 / 不明暗影 —— 加大 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary dd {
  margin: 0 !important;

  font-size: 16px !important;

  line-height: 1.25 !important;

  letter-spacing: .03em !important;

  color:
    rgba(246, 228, 201, .97)
    !important;

  white-space: nowrap !important;
}


/* =========================================================
   04｜終封已成。它記住了你。
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary > p {
  margin: 10px 0 0 !important;

  padding: 0 !important;

  border: 0 !important;

  font-size: 13px !important;

  line-height: 1.4 !important;

  letter-spacing: .035em !important;

  color:
    rgba(226, 207, 181, .84)
    !important;

  white-space: nowrap !important;
}
/* =========================================================
   秘藏｜右下個人藏錄去框＋中央藏紋強化
========================================================= */


/* =========================================================
   01｜右下個人藏錄：取消卡片感
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary {
  width: 390px !important;

  height: auto !important;
  min-height: 0 !important;

  padding: 0 !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;

  box-shadow: none !important;

  overflow: visible !important;
}


/* PERSONAL ARCHIVE + 個人藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head {
  display: block !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary-head > div {
  display: grid !important;
  gap: 3px !important;
}


/* 隱藏「點擊中央藏紋查看完整藏錄」 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head em {
  display: none !important;
}


/* PERSONAL ARCHIVE */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head span {
  font-size: 10px !important;

  letter-spacing: .20em !important;

  color:
    rgba(184, 132, 82, .66)
    !important;
}


/* 個人藏錄 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary-head strong {
  font-size: 23px !important;

  line-height: 1.2 !important;

  color:
    rgba(242, 224, 197, .95)
    !important;
}


/* =========================================================
   02｜ID
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary-id {
  display: flex !important;

  align-items: baseline !important;

  gap: 10px !important;

  margin-top: 10px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary-id span {
  font-size: 10px !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary-id strong {
  font-size: 14px !important;

  color:
    rgba(239, 221, 195, .90)
    !important;
}


/* =========================================================
   03｜封痕 / 異象
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary dl {
  display: flex !important;

  align-items: baseline !important;

  gap: 42px !important;

  margin: 10px 0 0 !important;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary dl > div {
  display: flex !important;

  align-items: baseline !important;

  gap: 10px !important;
}


/* 封痕 / 異象 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary dt {
  font-size: 13px !important;

  color:
    rgba(199, 146, 92, .80)
    !important;
}


/* 影 / 不明暗影 */
#archives
[data-archive-content="sealed"]
.sealed-record-summary dd {
  margin: 0 !important;

  font-size: 16px !important;

  color:
    rgba(244, 226, 199, .95)
    !important;
}


/* =========================================================
   04｜觀測句
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary > p {
  margin: 10px 0 0 !important;

  padding: 0 !important;

  border: 0 !important;

  font-size: 13px !important;

  color:
    rgba(220, 202, 176, .78)
    !important;
}


/* =========================================================
   05｜中央藏紋：增加一點亮光與呼吸感
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault-core {
  position: absolute !important;

  cursor: pointer !important;

  filter:
    drop-shadow(
      0 0 14px
      rgba(210, 72, 47, .22)
    )
    drop-shadow(
      0 0 30px
      rgba(146, 42, 33, .16)
    ) !important;
}


/* 外層柔光 */
#archives
[data-archive-content="sealed"]
.sealed-vault-core::before {
  content: "" !important;

  position: absolute !important;

  left: 50% !important;
  top: 50% !important;

  width: 76% !important;
  aspect-ratio: 1 / 1 !important;

  transform:
    translate(-50%, -50%)
    scale(.96);

  border-radius: 50% !important;

  background:
    radial-gradient(
      circle,
      rgba(221, 68, 48, .15) 0%,
      rgba(166, 45, 36, .09) 32%,
      rgba(105, 24, 26, .035) 55%,
      transparent 72%
    ) !important;

  filter:
    blur(10px) !important;

  opacity: .72 !important;

  pointer-events: none !important;

  animation:
    ywjArchiveCoreBreath
    3.4s ease-in-out infinite
    !important;
}


/* 主藏紋稍亮 */
#archives
[data-archive-content="sealed"]
.sealed-core-mark-image {
  filter:
    brightness(1.10)
    saturate(1.06)
    drop-shadow(
      0 0 10px
      rgba(239, 72, 51, .25)
    )
    drop-shadow(
      0 0 22px
      rgba(177, 45, 37, .18)
    ) !important;

  transition:
    filter .25s ease,
    transform .25s ease
    !important;
}


/* 滑過時微亮，不要誇張 */
#archives
[data-archive-content="sealed"]
.sealed-vault-core:hover
.sealed-core-mark-image {
  transform:
    scale(1.025) !important;

  filter:
    brightness(1.18)
    saturate(1.10)
    drop-shadow(
      0 0 14px
      rgba(245, 79, 53, .34)
    )
    drop-shadow(
      0 0 30px
      rgba(177, 46, 37, .22)
    ) !important;
}


/* 呼吸動畫 */
@keyframes ywjArchiveCoreBreath {

  0%,
  100% {
    opacity: .48;
    transform:
      translate(-50%, -50%)
      scale(.94);
  }

  50% {
    opacity: .82;
    transform:
      translate(-50%, -50%)
      scale(1.04);
  }

}
/* =========================================================
   個人藏錄｜手動位置控制
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault {

  /* 個人藏錄位置
     X：正數往右／負數往左
     Y：正數往下／負數往上
  */
  --record-move-x: 130px;
  --record-move-y: -15px;
}


#archives
[data-archive-content="sealed"]
.sealed-record-summary {

  transform:
    translate(
      var(--record-move-x),
      var(--record-move-y)
    ) !important;
}
/* =========================================================
   秘藏｜中央藏紋互動 FINAL
   1. hover 絕不位移
   2. 常駐暗紅呼吸光
   3. hover 微亮
   4. click 全畫面紅光爆開
========================================================= */


/* =========================================================
   核心本體永遠鎖死原位
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault-core,
#archives
[data-archive-content="sealed"]
.sealed-vault-core:hover,
#archives
[data-archive-content="sealed"]
.sealed-vault-core:focus-visible,
#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-observed,
#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-unsealing {

  transform:
    translate(-50%, -50%)
    !important;

  transition:
    filter .28s ease !important;
}


/* =========================================================
   主藏紋
   重點：縮放時保留 translate(-50%, -50%)
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-core-mark-image {

  transform:
    translate(-50%, -50%)
    scale(1)
    !important;

  transform-origin:
    center center !important;

  animation:
    ywjSealedCorePulse
    3.2s
    ease-in-out
    infinite
    !important;
}


/* hover 只放大一點，不改位置 */
#archives
[data-archive-content="sealed"]
.sealed-vault-core:hover
.sealed-core-mark-image {

  transform:
    translate(-50%, -50%)
    scale(1.025)
    !important;
}


/* =========================================================
   常駐外圍暗紅光
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault-core::before {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 94%;
  aspect-ratio: 1;

  transform:
    translate(-50%, -50%);

  border-radius:
    50%;

  z-index:
    2;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle,
      rgba(236, 55, 42, .20) 0%,
      rgba(191, 36, 35, .11) 32%,
      rgba(120, 20, 27, .055) 53%,
      transparent 72%
    );

  filter:
    blur(15px);

  animation:
    ywjSealedCoreAura
    3.2s
    ease-in-out
    infinite;
}


/* 點下去時核心再爆一圈 */
#archives
[data-archive-content="sealed"]
.sealed-vault-core::after {

  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 82%;
  aspect-ratio: 1;

  border:
    1px solid
    rgba(255, 86, 58, .72);

  border-radius:
    50%;

  transform:
    translate(-50%, -50%)
    scale(.78);

  opacity:
    0;

  pointer-events:
    none;

  z-index:
    10;
}


#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-observed::after {

  animation:
    ywjSealedCoreClickRing
    .72s ease-out
    forwards;
}


/* =========================================================
   主藏紋呼吸
========================================================= */

@keyframes ywjSealedCorePulse {

  0%,
  100% {
    opacity: .88;

    filter:
      brightness(1.02)
      saturate(1.03)
      drop-shadow(
        0 0 10px
        rgba(222, 53, 43, .20)
      )
      drop-shadow(
        0 0 24px
        rgba(153, 34, 34, .12)
      );
  }

  50% {
    opacity: 1;

    filter:
      brightness(1.18)
      saturate(1.10)
      drop-shadow(
        0 0 18px
        rgba(244, 64, 47, .42)
      )
      drop-shadow(
        0 0 38px
        rgba(183, 40, 38, .25)
      );
  }

}


@keyframes ywjSealedCoreAura {

  0%,
  100% {
    opacity: .46;

    transform:
      translate(-50%, -50%)
      scale(.92);
  }

  50% {
    opacity: .90;

    transform:
      translate(-50%, -50%)
      scale(1.07);
  }

}


@keyframes ywjSealedCoreClickRing {

  0% {
    opacity: .95;

    transform:
      translate(-50%, -50%)
      scale(.72);
  }

  100% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(1.52);
  }

}


/* =========================================================
   中央藏紋專用「全螢幕紅爆光」
   不影響外面 05 原本的白光
========================================================= */

body > .archives-burst.is-core-burst {

  background:
    radial-gradient(
      circle at center,
      rgba(255, 214, 190, .98) 0%,
      rgba(255, 78, 52, .92) 15%,
      rgba(193, 26, 35, .72) 34%,
      rgba(106, 13, 25, .36) 54%,
      rgba(10, 4, 8, 0) 77%
    ) !important;
}


body > .archives-burst.is-core-burst.is-active {

  animation:
    ywjSealedRedBurst
    .72s
    ease-out
    forwards
    !important;
}


@keyframes ywjSealedRedBurst {

  0% {
    opacity: 0;
  }

  22% {
    opacity: .55;
  }

  44% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }

}
/* =========================================================
   個人藏錄｜寬版工作區
   左：資料＋照片調整
   右：即時成品
========================================================= */

.sealed-settlement {

  padding:
    2.5vh 2.5vw !important;
}


/* 整張工作台加寬 */
.sealed-settlement-shell {

  width:
    min(1660px, 96vw) !important;

  max-height:
    94vh !important;

  padding:
    30px 36px 34px !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(720px, 1.35fr)
    minmax(480px, .82fr)
    !important;

  grid-template-areas:
    "head head"
    "editor preview"
    "actions preview"
    "status preview"
    !important;

  column-gap:
    46px !important;

  row-gap:
    0 !important;

  overflow:
    auto !important;
}


/* =========================================================
   標頭
========================================================= */

.sealed-settlement-head {

  grid-area:
    head !important;

  margin-bottom:
    26px !important;
}


.sealed-settlement-head > span {

  font-size:
    11px !important;
}


.sealed-settlement-head h3 {

  margin-top:
    8px !important;

  font-size:
    48px !important;
}


.sealed-settlement-head p {

  margin-top:
    10px !important;

  font-size:
    15px !important;

  line-height:
    1.7 !important;
}


/* =========================================================
   左側編輯區
========================================================= */

.sealed-settlement-grid {

  grid-area:
    editor !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(300px, .78fr)
    minmax(390px, 1.22fr)
    !important;

  gap:
    34px !important;

  margin:
    0 !important;

  align-items:
    start !important;
}


/* 照片預覽再放大 */
.sealed-holder-preview {

  width:
    min(360px, 100%) !important;
}


/* =========================================================
   表單文字全部放大
========================================================= */

.sealed-holder-controls {

  gap:
    14px !important;

  margin-top:
    20px !important;
}


.sealed-holder-controls label {

  grid-template-columns:
    104px
    minmax(0, 1fr)
    !important;

  gap:
    14px !important;
}


.sealed-holder-controls label > span,
.sealed-crop-controls label > span {

  font-size:
    13px !important;

  line-height:
    1.4 !important;

  color:
    rgba(208, 166, 113, .76)
    !important;
}


.sealed-holder-controls input[type="text"] {

  padding:
    12px 14px !important;

  font-size:
    15px !important;
}


.sealed-holder-controls input[type="file"] {

  font-size:
    13px !important;
}


.sealed-crop-controls {

  gap:
    12px !important;

  padding:
    14px 0 !important;
}


.sealed-crop-controls label {

  grid-template-columns:
    62px 1fr
    !important;

  gap:
    12px !important;
}


.sealed-photo-clear {

  padding:
    10px 14px !important;

  font-size:
    12px !important;
}


/* =========================================================
   左側結果資料全部放大
========================================================= */

.sealed-result-panel {

  padding-top:
    2px !important;
}


.sealed-result-panel > span {

  font-size:
    11px !important;
}


.sealed-result-panel h4 {

  margin:
    12px 0 21px !important;

  font-size:
    34px !important;
}


.sealed-result-panel dl {

  gap:
    0 24px !important;
}


.sealed-result-panel dl > div {

  grid-template-columns:
    92px
    minmax(0, 1fr)
    !important;

  gap:
    12px !important;

  padding:
    14px 0 !important;
}


.sealed-result-panel dt {

  font-size:
    13px !important;

  color:
    rgba(196, 146, 91, .74)
    !important;
}


.sealed-result-panel dd {

  font-size:
    16px !important;

  line-height:
    1.55 !important;

  color:
    rgba(238, 220, 194, .92)
    !important;
}


.sealed-result-panel > p {

  margin-top:
    23px !important;

  font-size:
    14px !important;

  line-height:
    1.8 !important;
}


/* =========================================================
   下載按鈕放左下
========================================================= */

.sealed-settlement-actions {

  grid-area:
    actions !important;

  justify-content:
    flex-start !important;

  margin:
    24px 0 0 !important;
}


.sealed-settlement-actions button {

  min-width:
    190px !important;

  padding:
    13px 18px !important;

  font-size:
    13px !important;
}


/* 提示字 */
.sealed-generation-status {

  grid-area:
    status !important;

  margin:
    12px 0 0 !important;

  text-align:
    left !important;

  font-size:
    12px !important;
}


/* =========================================================
   右側成品預覽
========================================================= */

.sealed-output-wrap {

  grid-area:
    preview !important;

  width:
    100% !important;

  margin:
    0 !important;

  align-self:
    start !important;

  position:
    sticky !important;

  top:
    0 !important;

  padding:
    8px 0 !important;
}


.sealed-output-wrap canvas {

  display:
    block !important;

  width:
    min(100%, 590px) !important;

  height:
    auto !important;

  max-height:
    calc(94vh - 105px) !important;

  object-fit:
    contain !important;

  margin:
    0 auto !important;

  box-shadow:
    0 20px 70px
    rgba(0, 0, 0, .48)
    !important;
}


/* 小螢幕再恢復上下 */
@media (max-width: 850px) {

  .sealed-settlement-shell {

    grid-template-columns:
      1fr !important;

    grid-template-areas:
      "head"
      "editor"
      "actions"
      "status"
      "preview"
      !important;
  }

  .sealed-output-wrap {

    position:
      static !important;

    margin-top:
      30px !important;
  }

}
/* =========================================================
   個人藏錄｜桌面正式版 FINAL
   01. 桌面不使用內部捲軸
   02. 左＝照片
   03. 中＝藏錄資料＋姓名／照片／裁切／下載
   04. 右＝即時成品
   05. 全頁字體再次放大
========================================================= */

@media (min-width: 851px) {

  /* =========================================
     整個彈窗
  ========================================= */

  .sealed-settlement {
    padding: 18px 28px !important;

    align-items: center !important;
    justify-content: center !important;

    overflow: hidden !important;
  }


  .sealed-settlement-shell {
    width: min(1680px, 96vw) !important;

    height: min(900px, 94vh) !important;
    max-height: none !important;

    box-sizing: border-box !important;

    padding: 22px 30px 24px !important;

    overflow: hidden !important;

    display: grid !important;

    grid-template-columns:
      minmax(760px, 1.42fr)
      minmax(500px, .86fr)
      !important;

    grid-template-rows:
      auto
      minmax(0, 1fr)
      auto
      auto
      !important;

    grid-template-areas:
      "head head"
      "editor preview"
      "actions preview"
      "status preview"
      !important;

    column-gap: 46px !important;
    row-gap: 0 !important;
  }


  /* =========================================
     上方標題
  ========================================= */

  .sealed-settlement-head {
    grid-area: head !important;

    margin: 0 0 18px !important;
  }


  .sealed-settlement-head > span {
    font-size: 13px !important;
    letter-spacing: .22em !important;
  }


  .sealed-settlement-head h3 {
    margin: 6px 0 0 !important;

    font-size: 50px !important;
    line-height: 1.15 !important;
  }


  .sealed-settlement-head p {
    margin: 8px 0 0 !important;

    font-size: 17px !important;
    line-height: 1.55 !important;
  }


  /* =========================================
     左＋中編輯區
  ========================================= */

  .sealed-settlement-grid {
    grid-area: editor !important;

    min-height: 0 !important;

    display: grid !important;

    grid-template-columns:
      330px
      minmax(400px, 1fr)
      !important;

    grid-template-rows:
      auto
      auto
      !important;

    column-gap: 34px !important;
    row-gap: 18px !important;

    align-content: start !important;
    align-items: start !important;

    margin: 0 !important;
  }


  /*
     關鍵：
     讓 holder-panel 本身不佔一整欄，
     裡面的照片與控制項直接參與外層 grid
  */
  .sealed-holder-panel {
    display: contents !important;
  }


  /* =========================================
     左邊：照片
  ========================================= */

  .sealed-holder-preview {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;

    width: 320px !important;
    max-width: 320px !important;

    justify-self: center !important;

    margin: 0 !important;
  }


  /* =========================================
     中間上：藏錄資料
  ========================================= */

  .sealed-result-panel {
    grid-column: 2 !important;
    grid-row: 1 !important;

    padding: 0 !important;
    margin: 0 !important;
  }


  .sealed-result-panel > span {
    font-size: 13px !important;
    letter-spacing: .18em !important;
  }


  .sealed-result-panel h4 {
    margin: 10px 0 16px !important;

    font-size: 38px !important;
    line-height: 1.2 !important;
  }


  .sealed-result-panel dl {
    gap: 0 26px !important;
  }


  .sealed-result-panel dl > div {
    grid-template-columns:
      94px
      minmax(0, 1fr)
      !important;

    gap: 12px !important;

    padding: 11px 0 !important;
  }


  .sealed-result-panel dt {
    font-size: 15px !important;
    line-height: 1.45 !important;
  }


  .sealed-result-panel dd {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }


  .sealed-result-panel > p {
    margin: 16px 0 0 !important;

    font-size: 16px !important;
    line-height: 1.65 !important;
  }


  /* =========================================
     中間下：
     持藏者名／上傳／左右／上下／縮放
  ========================================= */

  .sealed-holder-controls {
    grid-column: 2 !important;
    grid-row: 2 !important;

    width: 100% !important;

    margin: 0 !important;

    padding-top: 16px !important;

    border-top:
      1px solid
      rgba(174, 126, 77, .16)
      !important;

    display: grid !important;

    grid-template-columns:
      1fr
      1fr
      !important;

    gap: 12px 18px !important;
  }


  .sealed-holder-controls > label {
    display: grid !important;

    grid-template-columns:
      100px
      minmax(0, 1fr)
      !important;

    gap: 12px !important;

    align-items: center !important;
  }


  .sealed-holder-controls label > span,
  .sealed-crop-controls label > span {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }


  .sealed-holder-controls input[type="text"] {
    min-height: 42px !important;

    padding: 9px 12px !important;

    font-size: 16px !important;
  }


  .sealed-holder-controls input[type="file"] {
    font-size: 14px !important;
  }


  /* 三個 Slider 橫跨兩欄 */
  .sealed-crop-controls {
    grid-column: 1 / -1 !important;

    display: grid !important;

    grid-template-columns:
      repeat(3, minmax(0, 1fr))
      !important;

    gap: 18px !important;

    padding: 4px 0 0 !important;
  }


  .sealed-crop-controls label {
    display: grid !important;

    grid-template-columns:
      46px
      minmax(0, 1fr)
      !important;

    gap: 9px !important;

    align-items: center !important;
  }


  .sealed-crop-controls input[type="range"] {
    width: 100% !important;
  }


  /* 匿名按鈕 */
  .sealed-photo-clear {
    grid-column: 1 / -1 !important;

    justify-self: start !important;

    margin-top: 0 !important;

    padding: 10px 16px !important;

    font-size: 14px !important;
  }


  /* =========================================
     生成按鈕
     放在左＋中區域底部
  ========================================= */

  .sealed-settlement-actions {
    grid-area: actions !important;

    display: flex !important;

    justify-content: center !important;
    align-items: center !important;

    gap: 18px !important;

    margin: 14px 0 0 !important;
  }


  .sealed-settlement-actions button {
    min-width: 210px !important;

    padding: 13px 20px !important;

    font-size: 15px !important;
    letter-spacing: .08em !important;
  }


  .sealed-generation-status {
    grid-area: status !important;

    margin: 9px 0 0 !important;

    text-align: center !important;

    font-size: 13px !important;
    line-height: 1.5 !important;
  }


  /* =========================================
     右邊：即時成品
  ========================================= */

  .sealed-output-wrap {
    grid-area: preview !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    position: static !important;
  }


  .sealed-output-wrap canvas {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 100% !important;
    max-height: calc(94vh - 125px) !important;

    object-fit: contain !important;

    margin: 0 auto !important;

    box-shadow:
      0 18px 56px
      rgba(0, 0, 0, .42)
      !important;
  }

}
/* =========================================================
   放大預覽按鈕＋放大檢視器
========================================================= */

.sealed-action-group {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.sealed-settlement-actions button.is-ghost {
  background: rgba(10, 10, 16, 0.72);
  border: 1px solid rgba(176, 123, 72, 0.48);
  color: rgba(232, 220, 200, 0.92);
}

.sealed-settlement-actions button.is-ghost:hover {
  background: rgba(28, 18, 18, 0.92);
  border-color: rgba(212, 149, 88, 0.68);
}

.sealed-preview-viewer {
  position: fixed;
  inset: 0;
  z-index: 20000 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background: rgba(0, 0, 0, 0.84);
}

.sealed-preview-viewer.is-open {
  display: flex;
}

.sealed-preview-shell {
  position: relative;
  width: min(1320px, 96vw);
  height: min(92vh, 980px);
  padding: 20px;
  border: 1px solid rgba(176, 124, 72, 0.34);
  background:
    linear-gradient(180deg, rgba(9, 9, 15, 0.98), rgba(12, 9, 12, 0.98));
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.52),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 14px;
}

.sealed-preview-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(176, 124, 72, 0.38);
  background: rgba(16, 12, 14, 0.84);
  color: rgba(234, 222, 205, 0.92);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.sealed-preview-close:hover {
  border-color: rgba(212, 149, 88, 0.66);
  background: rgba(32, 17, 17, 0.94);
}

.sealed-preview-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  padding-right: 50px;
}

.sealed-preview-head strong {
  font-size: 22px;
  font-weight: 600;
  color: rgba(238, 228, 210, 0.96);
}

.sealed-preview-head span {
  font-size: 14px;
  color: rgba(190, 150, 106, 0.82);
  letter-spacing: 0.08em;
}

.sealed-preview-stage {
  overflow: auto;
  padding: 20px;
  border: 1px solid rgba(176, 124, 72, 0.18);
  background: rgba(6, 6, 10, 0.72);
  cursor: grab;
}

.sealed-preview-stage.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.sealed-preview-image {
  display: block;
  width: 1200px;
  max-width: none;
  height: auto;
  margin: 0 auto;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.44);
}

@media (max-width: 850px) {
  .sealed-settlement-actions {
    grid-template-columns: 1fr !important;
  }

  .sealed-preview-shell {
    width: 96vw;
    height: 92vh;
    padding: 16px;
  }

  .sealed-preview-image {
    width: 1000px;
  }
}
/* =========================================================
   終封錄｜個人藏錄頁新版背景
========================================================= */

/* =========================================================
   終封錄｜背景放最底層
========================================================= */

.sealed-settlement {
  background:
    linear-gradient(
      180deg,
      rgba(2, 4, 8, .30),
      rgba(2, 3, 6, .46)
    ),
    url("assets/images/archive-settlement-bg.png")
    center center / cover
    no-repeat
    !important;

  background-color:
    #05070b
    !important;

  backdrop-filter:
    none !important;
}


/* 中間工作框本身透明 */
.sealed-settlement-shell {
  background:
    transparent !important;

  background-color:
    transparent !important;
}
/* =========================================================
   05｜秘藏｜新版初封 / 深封 / 終封框
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-tier {
  position: relative !important;

  min-height:
    140px !important;

  padding:
    30px 30px 26px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  overflow:
    visible !important;
}


/* =========================
   新版框圖共通層
========================= */

#archives
[data-archive-content="sealed"]
.sealed-tier::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 0;

  background-position:
    center;

  background-repeat:
    no-repeat;

  background-size:
    116% 150%;

  pointer-events:
    none;
}


/* 文字一定在框上面 */

#archives
[data-archive-content="sealed"]
.sealed-tier > * {
  position: relative;

  z-index: 1;
}


/* =========================
   01｜初封｜07 日
========================= */

#archives
[data-archive-content="sealed"]
.sealed-tier[data-sealed-tier="7"]::after {
  background-image:
    url("assets/images/archive/sealed/archive-tier-initial.png");
}


/* =========================
   02｜承封｜14 日
========================= */

#archives
[data-archive-content="sealed"]
.sealed-tier[data-sealed-tier="14"]::after {
  background-image:
    url("assets/images/archive/sealed/archive-tier-second.png");
}


/* =========================
   03｜深封｜21 日
========================= */

#archives
[data-archive-content="sealed"]
.sealed-tier[data-sealed-tier="21"]::after {
  background-image:
    url("assets/images/archive/sealed/archive-tier-deep.png");
}


/* =========================
   04｜終封｜30 日
========================= */

#archives
[data-archive-content="sealed"]
.sealed-tier[data-sealed-tier="30"]::after {
  background-image:
    url("assets/images/archive/sealed/archive-tier-final.png");
}
/* =========================================================
   05｜秘藏｜修正三個封印框點擊區
   讓底部進度資訊不擋住按鈕
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-progress-panel {
  pointer-events: none !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-list {
  pointer-events: auto !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* =========================================================
   05｜秘藏附藏 CG｜FINAL
   直式 CG 完整顯示
========================================================= */

.sealed-reveal.sealed-milestone-reveal
.sealed-reward-stage {

  position:
    absolute !important;

  inset:
    auto !important;

  left:
    50% !important;

  top:
    58px !important;

  transform:
    translateX(-50%) !important;


  /* =========================
     CG 展示框尺寸
  ========================= */

  width:
    min(520px, 76vw) !important;

  height:
    calc(90vh - 150px) !important;

  max-height:
    760px !important;


  aspect-ratio:
    auto !important;

  margin:
    0 !important;

  padding:
    0 !important;


  box-sizing:
    border-box !important;

  overflow:
    hidden !important;


  border:
    1px solid
    rgba(182, 130, 79, .16)
    !important;


  background-color:
    #03060a !important;

  background-size:
    contain !important;

  background-position:
    center center !important;

  background-repeat:
    no-repeat !important;
}


/* CG 本體已由 JS 放到 stage 背景
   img 只保留 src 給下載功能 */
.sealed-reveal.sealed-milestone-reveal
.sealed-reward-image {

  display:
    none !important;

}
/* =========================================================
   附藏 CG｜頂部資訊
   ATTACHED ARCHIVE 左上
   角色名正中央
========================================================= */

.sealed-reveal.sealed-milestone-reveal
.sealed-reward-head {
  position:
    absolute !important;

  left:
    0 !important;

  right:
    0 !important;

  top:
    0 !important;

  height:
    54px !important;

  margin:
    0 !important;

  z-index:
    45 !important;

  display:
    block !important;

  pointer-events:
    none !important;
}


/* 左上 ATTACHED ARCHIVE */
.sealed-reveal.sealed-milestone-reveal
.sealed-reward-head > span {
  position:
    absolute !important;

  left:
    18px !important;

  top:
    18px !important;
}


/* 角色名字置中 */
.sealed-reveal.sealed-milestone-reveal
.sealed-reward-head > strong {
  position:
    absolute !important;

  left:
    50% !important;

  top:
    14px !important;

  transform:
    translateX(-50%) !important;

  margin:
    0 !important;

  text-align:
    center !important;

  white-space:
    nowrap !important;
}
/* =========================================================
   附藏 CG｜儲存按鈕
========================================================= */

.sealed-reveal.sealed-milestone-reveal
.sealed-reward-download {
  position:
    absolute !important;

  left:
    50% !important;

  bottom:
    22px !important;

  transform:
    translateX(-50%) !important;

  z-index:
    48 !important;

  padding:
    10px 24px !important;

  border:
    1px solid
    rgba(190, 145, 88, .40)
    !important;

  background:
    rgba(4, 7, 11, .82)
    !important;

  color:
    rgba(235, 219, 193, .90)
    !important;

  font-size:
    12px !important;

  letter-spacing:
    .12em !important;

  cursor:
    pointer !important;
}


.sealed-reveal.sealed-milestone-reveal
.sealed-reward-download:hover {
  border-color:
    rgba(222, 174, 105, .78)
    !important;

  background:
    rgba(25, 18, 19, .92)
    !important;
}
/* =========================================================
   05｜附藏 CG｜新版全螢幕背景
========================================================= */

.sealed-reveal.sealed-milestone-reveal {
  background:
    linear-gradient(
      180deg,
      rgba(2, 5, 9, .68),
      rgba(2, 4, 8, .78)
    ),
    url(
      "assets/images/archive/sealed/archive-reveal-bg.png"
    )
    center center / cover
    no-repeat
    fixed
    !important;

  backdrop-filter:
    none !important;
}


/* 中央 CG 大框保持實底，不透明 */
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner {
  background:
    #03060a !important;

  box-shadow:
    0 35px 110px
    rgba(0, 0, 0, .70)
    !important;
}
/* =========================================================
   終封錄｜工作區暗透玻璃
   背景可見，但資料仍是主體
========================================================= */

.sealed-settlement-shell {
  background:
    linear-gradient(
      145deg,
      rgba(4, 7, 12, .84),
      rgba(3, 5, 9, .90)
    )
    !important;

  backdrop-filter:
    blur(5px)
    saturate(.90)
    !important;

  -webkit-backdrop-filter:
    blur(5px)
    saturate(.90)
    !important;

  border:
    1px solid
    rgba(185, 133, 79, .16)
    !important;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .48),
    inset 0 0 90px
    rgba(34, 44, 60, .08)
    !important;
}
/* =========================================================
   05｜附藏 CG｜左側藏紋改成懸浮印記
========================================================= */

.sealed-reveal.sealed-milestone-reveal
.sealed-phase-mark-stage {

  position:
    absolute !important;

  left:
    52px !important;

  top:
    50% !important;

  transform:
    translateY(-50%) !important;

  width:
    190px !important;

  min-height:
    0 !important;

  padding:
    0 !important;

  margin:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    14px !important;

  z-index:
    20 !important;

  pointer-events:
    none !important;
}


/* ARCHIVE MARK 小標 */
.sealed-reveal.sealed-milestone-reveal
.sealed-phase-mark-stage > span {

  font-size:
    7px !important;

  letter-spacing:
    .30em !important;

  color:
    rgba(177, 134, 83, .30) !important;
}


/* 封印本體 */
.sealed-reveal.sealed-milestone-reveal
.sealed-phase-mark-stage > img {

  width:
    150px !important;

  height:
    150px !important;

  object-fit:
    contain !important;

  opacity:
    .55 !important;

  filter:
    drop-shadow(
      0 0 20px
      rgba(165, 48, 46, .20)
    ) !important;
}


/* 深封藏紋已成立 */
.sealed-reveal.sealed-milestone-reveal
.sealed-phase-mark-stage figcaption {

  margin:
    0 !important;

  font-size:
    9px !important;

  letter-spacing:
    .08em !important;

  color:
    rgba(205, 187, 161, .28) !important;
}
/* =========================================================
   05｜附藏 CG｜右側家紋封條
   橫式斜放版
========================================================= */

.sealed-reveal.sealed-milestone-reveal
.sealed-house-seal-stage {

  position:
    absolute !important;

  right:
    42px !important;

  top:
    52% !important;

  transform:
    translateY(-50%) !important;

  width:
    300px !important;

  height:
    240px !important;

  z-index:
    20 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  gap:
    12px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  pointer-events:
    none !important;
}


/* HOUSE SEAL */
.sealed-reveal.sealed-milestone-reveal
.sealed-house-seal-stage > span {

  margin:
    0 !important;

  font-family:
    Georgia,
    serif !important;

  font-size:
    7px !important;

  letter-spacing:
    .30em !important;

  color:
    rgba(177, 134, 83, .30)
    !important;
}


/* 五家封條本體 */
.sealed-reveal.sealed-milestone-reveal
.sealed-house-seal-stage > img {

  display:
    block !important;

  width:
    270px !important;

  height:
    auto !important;

  max-width:
    none !important;

  object-fit:
    contain !important;

  transform:
    rotate(-10deg) !important;

  transform-origin:
    center center !important;

  opacity:
    .52 !important;

  filter:
    brightness(.90)
    drop-shadow(
      0 0 18px
      rgba(163, 61, 48, .18)
    )
    !important;
}


/* 九方家紋 / 伊耆家紋... */
.sealed-reveal.sealed-milestone-reveal
.sealed-house-seal-stage > em {

  margin:
    0 !important;

  font-size:
    9px !important;

  font-style:
    normal !important;

  letter-spacing:
    .12em !important;

  color:
    rgba(205, 187, 161, .30)
    !important;
}
/* =========================================================
   05｜秘藏｜未成立藏紋必須完全隱藏
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-core-mark-image[hidden] {
  display: none !important;
}
/* =========================================================
   05｜秘藏｜異象矩形邊界修正 FINAL
========================================================= */

/* 沒有正式啟動的異象一定完全消失 */
#archives
[data-archive-content="sealed"]
.sealed-anomaly-image[hidden] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  animation: none !important;
}


/* 已啟動異象：把 PNG 畫布四周柔化掉
   避免透明圖邊界形成方框 */
#archives
[data-archive-content="sealed"]
.sealed-anomaly-image:not([hidden]) {
  display: block !important;

  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;

  -webkit-mask-image:
    radial-gradient(
      ellipse at center,
      #000 0%,
      #000 58%,
      rgba(0, 0, 0, .88) 70%,
      rgba(0, 0, 0, .42) 84%,
      transparent 100%
    );

  mask-image:
    radial-gradient(
      ellipse at center,
      #000 0%,
      #000 58%,
      rgba(0, 0, 0, .88) 70%,
      rgba(0, 0, 0, .42) 84%,
      transparent 100%
    );
}
/* =========================================================
   06｜京中留影
   CAPITAL PORTRAITS
========================================================= */

#portraits {
  position: relative;

  width: 100%;
  min-height: 100vh;

  box-sizing: border-box;

  padding:
    10vh 6vw
    9vh;

  overflow: hidden;

  color:
    rgba(233, 221, 201, .92);

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(74, 93, 124, .11),
      transparent 36%
    ),
    radial-gradient(
      circle at 75% 68%,
      rgba(112, 59, 50, .08),
      transparent 27%
    ),
    linear-gradient(
      135deg,
      #05080e 0%,
      #03060b 52%,
      #07080d 100%
    );
}


/* =========================================================
   背景紋理
========================================================= */

#portraits
.portraits-atmosphere {
  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(194, 155, 94, .025),
      transparent
    );

  opacity: .8;
}


#portraits
.portraits-atmosphere::before,
#portraits
.portraits-atmosphere::after {
  content: "";

  position: absolute;

  left: 6vw;
  right: 6vw;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(190, 147, 88, .15),
      transparent
    );
}


#portraits
.portraits-atmosphere::before {
  top: 12vh;
}


#portraits
.portraits-atmosphere::after {
  bottom: 10vh;
}


/* =========================================================
   左上 06
========================================================= */

#portraits
.portraits-kicker {
  position: absolute;

  top: 48px;
  left: 6vw;

  z-index: 10;

  display: flex;

  align-items: center;

  gap: 14px;

  color:
    rgba(194, 151, 94, .58);
}


#portraits
.portraits-kicker span {
  font-family:
    Georgia,
    serif;

  font-size: 11px;
}


#portraits
.portraits-kicker i {
  width: 46px;
  height: 1px;

  background:
    rgba(194, 151, 94, .33);
}


#portraits
.portraits-kicker em {
  font-size: 9px;

  font-style: normal;

  letter-spacing: .28em;
}


/* =========================================================
   標題
========================================================= */

#portraits
.portraits-heading {
  position: relative;

  z-index: 4;

  width:
    min(1500px, 88vw);

  margin:
    0 auto
    38px;

  text-align: center;
}


#portraits
.portraits-heading p {
  margin: 0 0 10px;

  color:
    rgba(185, 149, 95, .53);

  font-size: 9px;

  letter-spacing: .28em;
}


#portraits
.portraits-heading h2 {
  margin: 0;

  font-size:
    clamp(
      38px,
      4.4vw,
      70px
    );

  font-weight: 400;

  letter-spacing: .18em;
}


#portraits
.portraits-heading > div {
  width: 130px;
  height: 1px;

  margin:
    18px auto;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(200, 158, 93, .65),
      transparent
    );
}


#portraits
.portraits-heading > span {
  color:
    rgba(214, 203, 185, .58);

  font-size: 12px;

  letter-spacing: .14em;
}


/* =========================================================
   五人選擇器
========================================================= */

#portraits
.portraits-selector {
  position: relative;

  z-index: 5;

  width:
    min(1500px, 90vw);

  aspect-ratio:
    16 / 9;

  margin:
    0 auto;

  overflow: hidden;

  border:
    1px solid
    rgba(190, 148, 87, .19);

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, .42),
    inset
    0 0 70px
    rgba(0, 0, 0, .18);

  background:
    #03060a;
}


/* 原圖整張壓暗 */

#portraits
.portraits-selector-base {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  filter:
    brightness(.38)
    saturate(.64)
    contrast(1.05);

  transform:
    scale(1.002);

  pointer-events: none;
}


/* 五個透明點擊區 */

#portraits
.portraits-character {
  position: absolute;

  top: 0;
  bottom: 0;

  width: 20%;

  padding:
    0 0 28px;

  border: 0;
  border-right:
    1px solid
    rgba(230, 207, 169, .08);

  background:
    transparent;

  color:
    rgba(234, 219, 195, .68);

  cursor: pointer;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  justify-content:
    flex-end;

  align-items:
    center;

  gap: 5px;

  transition:
    color .35s ease,
    box-shadow .35s ease;
}


#portraits
.portraits-character:nth-of-type(1) {
  left: 0;
}


#portraits
.portraits-character:nth-of-type(2) {
  left: 20%;
}


#portraits
.portraits-character:nth-of-type(3) {
  left: 40%;
}


#portraits
.portraits-character:nth-of-type(4) {
  left: 60%;
}


#portraits
.portraits-character:nth-of-type(5) {
  left: 80%;
}


/* =========================================================
   同一張原圖切成五份
   滑到誰 → 誰恢復亮度
========================================================= */

#portraits
.portraits-character::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  background-image:
    url("assets/images/portraits/portrait-selector.jpg");

  background-repeat:
    no-repeat;

  background-size:
    500% 100%;

  background-position:
    var(--portrait-pos)
    center;

  opacity: 0;

  filter:
    brightness(1)
    saturate(1)
    contrast(1.02);

  transition:
    opacity .38s ease,
    filter .38s ease;
}


/* 微光 */

#portraits
.portraits-character::after {
  content: "";

  position: absolute;

  inset: 0;

  z-index: -1;

  opacity: 0;

  background:
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(4, 6, 10, .15) 69%,
      rgba(5, 5, 8, .76) 100%
    );

  box-shadow:
    inset
    0 0 0 1px
    rgba(220, 178, 107, .34),
    inset
    0 -45px 65px
    rgba(116, 70, 34, .08);

  transition:
    opacity .35s ease;
}


/* 滑鼠移上去 */

#portraits
.portraits-character:hover::before,
#portraits
.portraits-character.is-selected::before {
  opacity: 1;
}


#portraits
.portraits-character:hover::after,
#portraits
.portraits-character.is-selected::after {
  opacity: 1;
}


#portraits
.portraits-character:hover,
#portraits
.portraits-character.is-selected {
  color:
    rgba(255, 236, 205, .98);

  box-shadow:
    inset
    0 0 35px
    rgba(218, 169, 95, .06);
}


/* 中文名 */

#portraits
.portraits-character span {
  position: relative;

  z-index: 4;

  font-size:
    clamp(
      18px,
      1.55vw,
      28px
    );

  letter-spacing: .12em;

  text-shadow:
    0 2px 12px
    rgba(0, 0, 0, .90);
}


/* 英文 */

#portraits
.portraits-character em {
  position: relative;

  z-index: 4;

  font-size: 8px;

  font-style: normal;

  letter-spacing: .27em;

  opacity: .55;

  text-shadow:
    0 2px 8px
    rgba(0, 0, 0, .92);
}


#portraits
.portraits-hint {
  position: relative;

  z-index: 5;

  margin:
    18px 0 0;

  text-align: center;

  color:
    rgba(185, 156, 112, .42);

  font-family:
    Georgia,
    serif;

  font-size: 8px;

  letter-spacing: .28em;
}


/* =========================================================
   合影放大視窗
========================================================= */

body.portraits-modal-open {
  overflow: hidden !important;
}


#portraits
.portraits-gallery {
  position: fixed;

  inset: 0;

  z-index: 12000;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 18px;

  box-sizing: border-box;

  background:
    rgba(1, 3, 7, .88);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transition:
    opacity .32s ease,
    visibility .32s ease;
}


#portraits
.portraits-gallery.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;
}


/* 跟 05 影藏完全同樣大 */

#portraits
.portraits-gallery-shell {
  position: relative;

  width:
    calc(100vw - 36px);

  height:
    calc(100dvh - 36px);

  max-width:
    none;

  max-height:
    none;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

  border:
    1px solid
    rgba(190, 149, 90, .18);

  background:
    #03060a;

  box-shadow:
    0 28px 90px
    rgba(0, 0, 0, .66);
}


/* =========================================================
   合影上方
========================================================= */

#portraits
.portraits-gallery-head {
  flex:
    0 0 82px;

  display: grid;

  grid-template-columns:
    1fr
    auto
    56px;

  align-items: center;

  gap: 24px;

  padding:
    0 28px
    0 34px;

  box-sizing: border-box;

  border-bottom:
    1px solid
    rgba(190, 149, 90, .13);
}


#portraits
.portraits-gallery-head > div {
  display: flex;

  flex-direction: column;

  gap: 5px;
}


#portraits
.portraits-gallery-head span {
  color:
    rgba(191, 150, 91, .55);

  font-size: 8px;

  letter-spacing: .26em;
}


#portraits
.portraits-gallery-head strong {
  color:
    rgba(241, 226, 204, .94);

  font-size: 24px;

  font-weight: 400;

  letter-spacing: .13em;
}


#portraits
.portraits-gallery-head > em {
  color:
    rgba(201, 174, 134, .54);

  font-family:
    Georgia,
    serif;

  font-size: 10px;

  font-style: normal;

  letter-spacing: .14em;
}


#portraits
.portraits-gallery-close {
  width: 42px;
  height: 42px;

  border:
    1px solid
    rgba(195, 151, 88, .20);

  background:
    rgba(8, 10, 15, .50);

  color:
    rgba(229, 205, 169, .78);

  font-size: 24px;

  cursor: pointer;
}


/* =========================================================
   合影主圖
========================================================= */

#portraits
.portraits-gallery-stage {
  position: relative;

  flex:
    1 1 auto;

  min-height: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(25, 31, 42, .42),
      rgba(3, 6, 10, .98) 70%
    );
}


#portraits
.portraits-gallery-stage img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  object-position:
    center center;
}


#portraits
.portraits-gallery-stage img[hidden] {
  display: none !important;
}


/* 沒圖 */

#portraits
.portraits-gallery-empty {
  text-align: center;

  color:
    rgba(193, 166, 125, .44);
}


#portraits
.portraits-gallery-empty[hidden] {
  display: none !important;
}


#portraits
.portraits-gallery-empty span {
  display: block;

  margin-bottom: 12px;

  font-size: 8px;

  letter-spacing: .27em;
}


#portraits
.portraits-gallery-empty strong {
  font-size: 22px;

  font-weight: 400;

  letter-spacing: .16em;
}


/* =========================================================
   上一張 / 下一張
========================================================= */

#portraits
.portraits-gallery-controls {
  flex:
    0 0 72px;

  display: grid;

  grid-template-columns:
    150px
    1fr
    150px;

  align-items: center;

  padding:
    0 32px;

  border-top:
    1px solid
    rgba(190, 149, 90, .13);

  box-sizing: border-box;
}


#portraits
.portraits-gallery-controls button {
  border: 0;

  background:
    transparent;

  color:
    rgba(218, 192, 153, .68);

  font-family:
    Georgia,
    serif;

  font-size: 9px;

  letter-spacing: .18em;

  cursor: pointer;
}


#portraits
.portraits-gallery-controls button:first-child {
  text-align: left;
}


#portraits
.portraits-gallery-controls button:last-child {
  text-align: right;
}


#portraits
.portraits-gallery-controls button:disabled {
  opacity: .18;

  cursor: default;
}


#portraits
.portraits-gallery-controls span {
  text-align: center;

  color:
    rgba(218, 205, 186, .54);

  font-size: 10px;

  letter-spacing: .18em;
}


/* =========================================================
   06｜手機
========================================================= */

@media (max-width: 760px) {

  #portraits {
    padding:
      100px 14px
      70px;
  }


  #portraits
  .portraits-kicker {
    left: 24px;
  }


  #portraits
  .portraits-selector {
    width:
      calc(100vw - 28px);
  }


  #portraits
  .portraits-character {
    padding-bottom:
      12px;
  }


  #portraits
  .portraits-character span {
    font-size:
      11px;

    letter-spacing:
      .04em;
  }


  #portraits
  .portraits-character em {
    display: none;
  }


  #portraits
  .portraits-gallery {
    padding: 14px;
  }


  #portraits
  .portraits-gallery-shell {
    width:
      calc(100vw - 28px);

    height:
      calc(100dvh - 28px);
  }


  #portraits
  .portraits-gallery-head {
    grid-template-columns:
      1fr
      auto
      42px;

    padding:
      0 14px;

    gap: 10px;
  }


  #portraits
  .portraits-gallery-controls {
    grid-template-columns:
      90px
      1fr
      90px;

    padding:
      0 16px;
  }

}
/* =========================================================
   06｜京中留影｜點擊層 FIX
========================================================= */

#portraits
.portraits-selector {
  position: relative !important;
  isolation: isolate !important;
}


/* 底圖永遠不能吃滑鼠 */
#portraits
.portraits-selector-base {
  z-index: 0 !important;
  pointer-events: none !important;
}


/* 五個角色點擊區一定壓在圖片上面 */
#portraits
.portraits-character {
  z-index: 5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* 亮起的角色圖層 */
#portraits
.portraits-character::before {
  z-index: 0 !important;
}


/* 光效層 */
#portraits
.portraits-character::after {
  z-index: 1 !important;
}


/* 名字一定在最上面 */
#portraits
.portraits-character > span,
#portraits
.portraits-character > em {
  position: relative !important;
  z-index: 2 !important;
}


/* 關閉中的合影視窗絕對不能擋住底下 */
#portraits
.portraits-gallery:not(.is-open) {
  visibility: hidden !important;
  pointer-events: none !important;
}


/* 開啟才接收點擊 */
#portraits
.portraits-gallery.is-open {
  visibility: visible !important;
  pointer-events: auto !important;
}
/* =========================================================
   06｜京中留影｜背景
========================================================= */

#portraits {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(
      to bottom,
      rgba(4, 7, 16, 0.70),
      rgba(3, 5, 13, 0.82)
    ),
    url("assets/images/portraits/portraits-bg.jpg") center center / cover no-repeat !important;
}

#portraits::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(69, 94, 172, 0.10),
      transparent 42%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.32),
      transparent 18%,
      transparent 82%,
      rgba(0, 0, 0, 0.32)
    );
  pointer-events: none;
  z-index: 0;
}

#portraits > * {
  position: relative;
  z-index: 1;
}
/* =========================================================
   06｜京中留影｜亮圖 FINAL
   完整圖片不縮放、不變形，只切亮區
========================================================= */


/* 舊的每格背景亮圖完全停用 */
#portraits
.portraits-character::before {
  content: none !important;
  display: none !important;
}


/* =========================================================
   五人原圖
========================================================= */

#portraits
.portraits-selector {

  /*
    伊耆右線 = 墨胎左線

    只改這一個數字即可。

    數字變小 → 分界往左
    數字變大 → 分界往右
  */

  --yiqi-motai-line: 38.6%;

}


/* 底層暗圖 */
#portraits
.portraits-selector-base {
  position: absolute !important;

  inset: 0 !important;

  z-index: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;

  filter:
    brightness(.38)
    saturate(.64)
    contrast(1.05)
    !important;

  pointer-events: none !important;
}


/* 上層亮圖：
   永遠跟底圖完全一樣大
   不准 scale / 壓縮 / 拉伸
*/
#portraits
.portraits-selector-light {
  position: absolute !important;

  inset: 0 !important;

  z-index: 1 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;

  filter:
    brightness(1)
    saturate(1)
    contrast(1)
    !important;

  opacity: 0;

  pointer-events: none !important;

  transition:
    opacity .28s ease,
    clip-path .28s ease;
}


/* 五個透明按鈕保持原來平均 20%
   只負責感應滑鼠，不再負責畫圖片
*/
#portraits
.portraits-character {
  width: 20% !important;

  overflow: visible !important;

  z-index: 5 !important;

  transform: none !important;

  pointer-events: auto !important;
}


/* 九方 */
#portraits
.portraits-character:nth-of-type(1) {
  left: 0 !important;
}


/* 伊耆 */
#portraits
.portraits-character:nth-of-type(2) {
  left: 20% !important;
}


/* 墨胎 */
#portraits
.portraits-character:nth-of-type(3) {
  left: 40% !important;
}


/* 飛廉 */
#portraits
.portraits-character:nth-of-type(4) {
  left: 60% !important;
}


/* 鹿門 */
#portraits
.portraits-character:nth-of-type(5) {
  left: 80% !important;
}
/* =========================================================
   06｜京中留影｜亮暗 FINAL
   純 CSS Hover，不依賴 JS
========================================================= */


/* 亮圖本體：
   跟暗圖完全相同大小與位置
*/
#portraits .portraits-selector-light {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;
  object-position: center center !important;

  transform: none !important;

  display: block !important;
  visibility: visible !important;

  z-index: 4 !important;

  opacity: 0 !important;

  filter:
    brightness(1.28)
    saturate(1.08)
    contrast(1.03)
    !important;

  pointer-events: none !important;

  transition:
    opacity .22s ease,
    clip-path .22s ease
    !important;
}


/* 五個滑鼠感應區在亮圖上面 */
#portraits .portraits-character {
  z-index: 5 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* 舊的框與舊亮圖全部關掉 */
#portraits .portraits-character::before,
#portraits .portraits-character::after {
  content: none !important;
  display: none !important;
}


/* =========================================================
   九方
========================================================= */

#portraits .portraits-selector:has(.portraits-character[data-portrait-key="jiufang"]:hover) .portraits-selector-light {
  opacity: 1 !important;

  clip-path:
    inset(
      0
      80%
      0
      0
    ) !important;
}


/* =========================================================
   伊耆

   右邊界現在先放 38.6%
   之後要往左只改這裡的 61.4%
========================================================= */

#portraits .portraits-selector:has(.portraits-character[data-portrait-key="yiqi"]:hover) .portraits-selector-light {
  opacity: 1 !important;

  clip-path:
    inset(
      0
      61.4%
      0
      20%
    ) !important;
}


/* =========================================================
   墨胎

   左邊界跟伊耆右邊界同一條
========================================================= */

#portraits .portraits-selector:has(.portraits-character[data-portrait-key="motai"]:hover) .portraits-selector-light {
  opacity: 1 !important;

  clip-path:
    inset(
      0
      40%
      0
      38.6%
    ) !important;
}


/* =========================================================
   飛廉
========================================================= */

#portraits .portraits-selector:has(.portraits-character[data-portrait-key="feilian"]:hover) .portraits-selector-light {
  opacity: 1 !important;

  clip-path:
    inset(
      0
      20%
      0
      60%
    ) !important;
}


/* =========================================================
   鹿門
========================================================= */

#portraits .portraits-selector:has(.portraits-character[data-portrait-key="lumen"]:hover) .portraits-selector-light {
  opacity: 1 !important;

  clip-path:
    inset(
      0
      0
      0
      80%
    ) !important;
}
/* =========================================================
   06｜京中留影｜Hover FINAL
   不要框，只保留人物亮暗
========================================================= */

/* 舊 Hover 方框關掉 */
#portraits
.portraits-character::after {
  content: none !important;
  display: none !important;
}


/* 亮圖本身再亮一點，和暗面差異明顯 */
#portraits
.portraits-selector-light {
  filter:
    brightness(1.18)
    saturate(1.05)
    contrast(1.02)
    !important;

  transition:
    opacity .25s ease,
    clip-path .25s ease
    !important;
}
/* =========================================================
   06｜京中留影｜一屏完整顯示 FINAL 02
   上方留呼吸、下方不留大空洞
========================================================= */


/* 整頁 */
#portraits {
  min-height: 100dvh !important;

  padding:
    46px 6vw
    12px
    !important;
}


/* 左上 06 */
#portraits
.portraits-kicker {
  top: 34px !important;
}


/* =========================================================
   標題區
========================================================= */

#portraits
.portraits-heading {
  margin:
    0 auto
    24px
    !important;
}


/* YEWU JING · LIMITED RECORD */
#portraits
.portraits-heading p {
  margin:
    0 0 10px
    !important;

  font-size:
    10px
    !important;
}


/* 京中留影 */
#portraits
.portraits-heading h2 {
  font-size:
    clamp(
      40px,
      4vw,
      62px
    )
    !important;

  line-height:
    1.15
    !important;
}


/* 標題下面金線 */
#portraits
.portraits-heading > div {
  margin:
    14px auto
    !important;
}


/* =========================================================
   副標題
========================================================= */

#portraits
.portraits-heading > span {
  display:
    block !important;

  font-size:
    20px !important;

  line-height:
    1.8 !important;

  letter-spacing:
    .13em !important;

  color:
    rgba(
      222,
      209,
      190,
      .72
    )
    !important;
}


/* =========================================================
   五人圖
   比上一版再大一些
========================================================= */

#portraits
.portraits-selector {
  width:
    min(
      1500px,
      89vw,
      calc(
        (100dvh - 175px)
        * 16 / 9
      )
    )
    !important;

  aspect-ratio:
    16 / 9
    !important;

  margin:
    0 auto
    !important;
}


/* 最下面提示不要留太多空間 */
#portraits
.portraits-hint {
  margin:
    7px 0 0
    !important;
}
/* =========================================================
   06｜京中留影｜點開後展示 FINAL
========================================================= */


/* 整體遮罩 */
#portraits
.portraits-gallery {
  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(73, 91, 130, .14),
      transparent 38%
    ),
    rgba(2, 4, 9, .92)
    !important;

  backdrop-filter:
    blur(14px)
    !important;

  -webkit-backdrop-filter:
    blur(14px)
    !important;
}


/* 外框 */
#portraits
.portraits-gallery-shell {
  border:
    1px solid
    rgba(192, 150, 88, .18)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(5, 9, 17, .98),
      rgba(2, 5, 10, .99)
    )
    !important;

  box-shadow:
    0 30px 100px
    rgba(0, 0, 0, .72),
    inset
    0 0 70px
    rgba(31, 44, 67, .14)
    !important;
}


/* =========================================================
   上方資訊
========================================================= */

#portraits
.portraits-gallery-head {
  flex:
    0 0 76px
    !important;

  padding:
    0 28px
    0 34px
    !important;

  border-bottom:
    1px solid
    rgba(191, 149, 88, .12)
    !important;

  background:
    rgba(3, 7, 13, .72)
    !important;
}


/* CAPITAL PORTRAITS */
#portraits
.portraits-gallery-head span {
  font-size:
    9px
    !important;

  letter-spacing:
    .28em
    !important;

  color:
    rgba(188, 148, 91, .52)
    !important;
}


/* 男主名字 */
#portraits
.portraits-gallery-head strong {
  font-size:
    26px
    !important;

  line-height:
    1.25
    !important;

  color:
    rgba(240, 226, 203, .96)
    !important;
}


/* 01 / 04 */
#portraits
.portraits-gallery-head > em {
  font-size:
    11px
    !important;

  letter-spacing:
    .18em
    !important;

  color:
    rgba(203, 176, 135, .62)
    !important;
}


/* X */
#portraits
.portraits-gallery-close {
  border:
    1px solid
    rgba(194, 149, 87, .22)
    !important;

  background:
    rgba(8, 11, 18, .64)
    !important;

  color:
    rgba(232, 207, 171, .82)
    !important;

  transition:
    .25s ease
    !important;
}


#portraits
.portraits-gallery-close:hover {
  border-color:
    rgba(222, 175, 105, .55)
    !important;

  color:
    #fff0d5
    !important;

  box-shadow:
    0 0 20px
    rgba(194, 135, 65, .12)
    !important;
}


/* =========================================================
   合影主圖
========================================================= */

#portraits
.portraits-gallery-stage {
  position:
    relative
    !important;

  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(35, 48, 71, .28),
      rgba(3, 6, 11, .96) 70%
    )
    !important;
}


/* 大圖保持完整，不裁切 */
#portraits
.portraits-gallery-stage img {
  width:
    100%
    !important;

  height:
    100%
    !important;

  object-fit:
    contain
    !important;

  object-position:
    center center
    !important;

  transform:
    none
    !important;

  filter:
    none
    !important;
}


/* 圖片周圍淡淡聚焦 */
#portraits
.portraits-gallery-stage::before {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  z-index:
    2;

  box-shadow:
    inset
    0 0 90px
    rgba(0, 0, 0, .36);
}

/* =========================================================
   底部切換
========================================================= */

#portraits
.portraits-gallery-controls {
  flex:
    0 0 66px
    !important;

  border-top:
    1px solid
    rgba(191, 149, 88, .12)
    !important;

  background:
    rgba(3, 7, 13, .76)
    !important;
}


/* 上一張 / 下一張 */
#portraits
.portraits-gallery-controls button {
  font-size:
    20px
    !important;

  color:
    rgba(219, 191, 151, .66)
    !important;

  transition:
    color .25s ease,
    letter-spacing .25s ease
    !important;
}


#portraits
.portraits-gallery-controls button:not(:disabled):hover {
  color:
    rgba(255, 230, 190, .96)
    !important;

  letter-spacing:
    .22em
    !important;
}


/* 中央文字 */
#portraits
.portraits-gallery-controls span {
  font-size:
    20px
    !important;

  color:
    rgba(225, 211, 190, .64)
    !important;

  letter-spacing:
    .18em
    !important;
}

/* =========================================================
   夜巫京｜桌機縮放穩定層 FINAL
   目的：
   1. 851px 以上統一使用同一套桌機排版
   2. 瀏覽器縮放不再誤觸 900～1600px 的中間斷點
   3. 桌機低高度不再因 max-height 規則突然縮版
   4. 真正小螢幕 / 手機仍由 850px 以下規則接手
========================================================= */

@media (min-width: 851px) {

  html,
  body.main-page {
    min-width: 1200px;
  }

  body.main-page {
    overflow-x: auto;
  }

  body.main-page main {
    min-width: 1200px;
  }

}
/* =========================================================
   01｜曜辰京錄｜影片最終微調
   1. 放大影片縮小
   2. 放大層加入專屬背景
   3. 首頁小影片稍微往右
========================================================= */


/* =========================================================
   A｜放大影片背景
========================================================= */

.capital-film-modal {
  background:
    linear-gradient(
      180deg,
      rgba(1, 4, 9, .80),
      rgba(1, 4, 9, .92)
    ),
    url("assets/images/capital-film-modal-bg.png")
    center center / cover no-repeat
    !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* =========================================================
   B｜放大影片縮小
   原本：1280px / 88vw
   現在：約縮小一級
========================================================= */

.capital-film-modal-inner {
  width:
    min(
      1080px,
      72vw
    )
    !important;
}


.capital-film-modal video {
  width: 100% !important;
  height: auto !important;

  max-height:
    68vh
    !important;

  object-fit:
    contain
    !important;
}


/* =========================================================
   C｜01 首頁小影片稍微往右
========================================================= */

@media (min-width: 1100px) {

  #capital .capital-film {
    left:
      34%
      !important;
  }

}
/* =========================================================
   06｜京中留影｜垂直位置修正
   主圖往上、完整收進一屏
========================================================= */

#portraits .portraits-heading {
  margin-bottom:
    10px
    !important;
}


#portraits .portraits-selector {
  width:
    min(
      1500px,
      89vw,
      calc(
        (100dvh - 205px)
        * 16 / 9
      )
    )
    !important;

  margin:
    -4px auto 0
    !important;
}
/* =========================================================
   全站圖片｜基本防拖曳 / 長按
========================================================= */

img {
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* =========================================================
   05｜秘藏｜21 日顯封補丁
   四階段：07 / 14 / 21 / 30
========================================================= */

#archives .sealed-progress-node.node-21 {
  left: 70%;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-list {
  width:
    min(1120px, calc(100% - 120px))
    !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr))
    !important;

  gap:
    14px
    !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier {
  min-width: 0 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy {
  min-width: 0 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  white-space: normal !important;
}

#archives
[data-archive-content="sealed"]
.sealed-vault-core[data-phase="third"]
.sealed-orbit {
  opacity:
    calc(.30 + var(--sealed-day-progress, .2) * .28);
}
/* =========================================================
   05｜秘藏｜中央藏紋紅光加強 FINAL
========================================================= */


/* 主藏紋呼吸變明顯 */
#archives
[data-archive-content="sealed"]
.sealed-core-mark-image {
  animation:
    ywjSealedCorePulseStrong
    2.7s
    ease-in-out
    infinite
    !important;
}


/* 外圍紅光放大 */
#archives
[data-archive-content="sealed"]
.sealed-vault-core::before {
  width: 108% !important;

  background:
    radial-gradient(
      circle,
      rgba(255, 72, 52, .30) 0%,
      rgba(207, 38, 38, .18) 30%,
      rgba(131, 21, 29, .09) 52%,
      transparent 74%
    )
    !important;

  filter:
    blur(19px)
    !important;

  animation:
    ywjSealedAuraStrong
    2.7s
    ease-in-out
    infinite
    !important;
}


/* Hover：不移位，但浮起感更明顯 */
#archives
[data-archive-content="sealed"]
.sealed-vault-core:hover
.sealed-core-mark-image {
  transform:
    translate(-50%, -50%)
    scale(1.06)
    !important;

  filter:
    brightness(1.32)
    saturate(1.18)
    drop-shadow(
      0 0 20px
      rgba(255, 82, 57, .58)
    )
    drop-shadow(
      0 0 46px
      rgba(190, 39, 37, .34)
    )
    !important;
}


/* 主藏紋紅光呼吸 */
@keyframes ywjSealedCorePulseStrong {

  0%,
  100% {
    opacity: .82;

    filter:
      brightness(.96)
      saturate(1.02)
      drop-shadow(
        0 0 8px
        rgba(221, 45, 40, .16)
      )
      drop-shadow(
        0 0 20px
        rgba(135, 29, 32, .10)
      );
  }

  50% {
    opacity: 1;

    filter:
      brightness(1.30)
      saturate(1.18)
      drop-shadow(
        0 0 22px
        rgba(255, 73, 51, .58)
      )
      drop-shadow(
        0 0 48px
        rgba(191, 39, 38, .34)
      );
  }
}


/* 外圍光域呼吸 */
@keyframes ywjSealedAuraStrong {

  0%,
  100% {
    opacity: .38;

    transform:
      translate(-50%, -50%)
      scale(.88);
  }

  50% {
    opacity: .95;

    transform:
      translate(-50%, -50%)
      scale(1.12);
  }
}
/* =========================================================
   05｜秘藏｜四階卡片文字 FINAL
   1. 英文階段名與 UNSEALED 不再重疊
   2. 累計解封說明固定單行
========================================================= */


/* 卡片重新分配：
   01序號 + 主要文字
   狀態字改成右上絕對定位
*/
#archives
[data-archive-content="sealed"]
.sealed-tier {
  position: relative !important;

  grid-template-columns:
    30px
    minmax(0, 1fr)
    !important;

  column-gap: 8px !important;

  padding:
    22px
    15px
    20px
    !important;
}


/* 文字區右側預留給 UNSEALED / SEALED */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy {
  min-width: 0 !important;

  padding-right:
    62px
    !important;
}


/* FIRST SEAL / SECOND SEAL / DEEP SEAL / FINAL SEAL */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy em {
  display: block !important;

  white-space:
    nowrap
    !important;

  font-size:
    8px
    !important;

  line-height:
    1.2
    !important;

  letter-spacing:
    .13em
    !important;
}


/* SEALED / UNSEALED 固定右上 */
#archives
[data-archive-content="sealed"]
.sealed-tier-state {
  position:
    absolute
    !important;

  top:
    24px
    !important;

  right:
    14px
    !important;

  margin:
    0
    !important;

  white-space:
    nowrap
    !important;

  font-size:
    8px
    !important;

  line-height:
    1.2
    !important;

  letter-spacing:
    .12em
    !important;
}


/* 中文標題 */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy strong {
  margin-top:
    7px
    !important;

  margin-bottom:
    2px
    !important;
}


/* 累計解封七日・得錄
   累計解封十四日・得應
   累計解封二十一日・得識
   累計解封三十日・得藏
   全部強制一行
*/
#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  display:
    block
    !important;

  margin-top:
    8px
    !important;

  white-space:
    nowrap
    !important;

  word-break:
    keep-all
    !important;

  overflow:
    visible
    !important;

  font-size:
    11px
    !important;

  line-height:
    1.25
    !important;

  letter-spacing:
    .025em
    !important;
}
/* =========================================================
   05｜秘藏｜卡片中文主標與說明整體上移
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-tier-copy strong {
  margin-top: 2px !important;   /* 原本比較低，現在往上提 */
  margin-bottom: 0 !important;
}

#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  margin-top: 4px !important;   /* 說明也一起往上 */
}

/* 如果還想整組再往上一點，可調這個 */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy {
  transform: translateY(-6px) !important;
}
/* =========================================================
   05｜秘藏｜四階卡片文字垂直對齊 FINAL
   英文維持原位
   只上移中文標題＋累計解封
========================================================= */


/* 取消上一版整組上移 */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy {
  transform:
    none
    !important;
}


/* 英文小標維持原位 */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy em {
  transform:
    none
    !important;

  margin:
    0
    !important;
}


/* 中文主標單獨往上 */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy strong {
  transform:
    translateY(-6px)
    !important;

  margin-top:
    7px
    !important;

  margin-bottom:
    0
    !important;
}


/* 累計解封單獨往上 */
#archives
[data-archive-content="sealed"]
.sealed-tier-copy small {
  transform:
    translateY(-8px)
    !important;

  margin-top:
    4px
    !important;

  white-space:
    nowrap
    !important;
}
/* =========================================================
   05｜秘藏｜日期狀態改成兩行
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-progress-status {
  white-space:
    pre-line
    !important;

  line-height:
    1.55
    !important;
}

/* =========================================================
   05｜秘藏｜30 日獎勵系統 V3
   01 / 03 / 07 / 10 / 14 / 18 / 21 / 25 / 30
========================================================= */

[data-sealed-character-choice][hidden],
[data-sealed-bonus-character-choice][hidden],
[data-sealed-bonus-result][hidden],
.sealed-reward-ledger[hidden],
.sealed-bonus-reveal[hidden] {
  display: none !important;
}

/* ---------- 獎錄入口 ---------- */
#archives .sealed-reward-ledger-trigger {
  position: absolute;
  left: 50%;
  bottom: 24px;
  z-index: 72;
  transform: translateX(-50%);
  width: min(360px, 36vw);
  min-height: 74px;
  padding: 12px 22px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-items: center;
  border: 1px solid rgba(194, 145, 89, .34);
  background:
    linear-gradient(135deg, rgba(57, 24, 22, .88), rgba(7, 9, 14, .94) 70%);
  color: rgba(239, 222, 195, .94);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .30), inset 0 0 24px rgba(159, 67, 51, .05);
  cursor: pointer;
  text-align: left;
}
#archives .sealed-reward-ledger-trigger > span {
  grid-row: 1 / span 2;
  color: rgba(191, 139, 80, .82);
  font-size: 9px;
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}
#archives .sealed-reward-ledger-trigger > strong {
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .16em;
}
#archives .sealed-reward-ledger-trigger > em {
  color: rgba(215, 205, 187, .58);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .06em;
}
#archives .sealed-reward-ledger-trigger:hover {
  border-color: rgba(223, 174, 107, .72);
  background: linear-gradient(135deg, rgba(75, 31, 27, .94), rgba(8, 10, 15, .97) 72%);
}

/* ---------- 7 / 14 / 21 / 30 選角 ---------- */
.sealed-character-choice {
  width: min(1040px, 90vw);
  margin: 22px auto 0;
  padding: 26px 30px 28px;
  border: 1px solid rgba(194, 145, 89, .30);
  background: linear-gradient(180deg, rgba(17, 15, 18, .96), rgba(5, 7, 11, .94));
  box-shadow: inset 0 0 42px rgba(123, 48, 38, .05);
  text-align: center;
}
.sealed-character-choice > span,
.sealed-bonus-character-choice > span {
  color: rgba(192, 140, 83, .78);
  font-size: 10px;
  letter-spacing: .26em;
}
.sealed-character-choice > h4,
.sealed-bonus-character-choice > h4 {
  margin: 8px 0 8px;
  color: rgba(242, 225, 199, .97);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: .13em;
}
.sealed-character-choice > p,
.sealed-bonus-character-choice > p {
  margin: 0 auto 22px;
  max-width: 720px;
  color: rgba(214, 205, 191, .65);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
}
.sealed-character-choice-grid,
.sealed-bonus-character-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.sealed-character-choice-grid > button,
.sealed-bonus-character-grid > button {
  min-height: 150px;
  padding: 16px 10px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(186, 139, 87, .22);
  background: rgba(7, 9, 13, .76);
  color: rgba(234, 219, 198, .86);
  cursor: pointer;
  transition: .22s ease;
}
.sealed-character-choice-grid img,
.sealed-bonus-character-grid img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: .76;
  filter: saturate(.78) brightness(.9);
}
.sealed-character-choice-grid strong,
.sealed-bonus-character-grid strong {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .10em;
}
.sealed-character-choice-grid em {
  color: rgba(204, 192, 174, .48);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .16em;
}
.sealed-character-choice-grid > button:hover,
.sealed-bonus-character-grid > button:hover,
.sealed-character-choice-grid > button.is-selected,
.sealed-bonus-character-grid > button.is-selected {
  border-color: rgba(220, 168, 102, .76);
  background: linear-gradient(180deg, rgba(62, 29, 27, .62), rgba(7, 9, 13, .88));
  box-shadow: inset 0 0 28px rgba(157, 71, 53, .10), 0 0 22px rgba(182, 124, 70, .07);
}
.sealed-character-choice-grid > button.is-selected img,
.sealed-bonus-character-grid > button.is-selected img {
  opacity: 1;
  filter: saturate(.95) brightness(1.08) drop-shadow(0 0 12px rgba(194, 140, 78, .20));
}
.sealed-character-choice-confirm,
.sealed-bonus-character-confirm {
  margin-top: 22px;
  min-width: 170px;
  padding: 11px 24px;
  border: 1px solid rgba(205, 157, 96, .52);
  background: rgba(40, 23, 23, .74);
  color: rgba(244, 226, 198, .95);
  font: inherit;
  letter-spacing: .14em;
  cursor: pointer;
}
.sealed-character-choice-confirm:disabled,
.sealed-bonus-character-confirm:disabled {
  opacity: .34;
  cursor: default;
}

/* ---------- 三十日獎錄 Overlay ---------- */
.sealed-reward-ledger,
.sealed-bonus-reveal {
  position: fixed;
  inset: 0;
  z-index: 9997;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(2, 4, 7, .88);
  backdrop-filter: blur(8px);
}
.sealed-reward-ledger-shell,
.sealed-bonus-shell {
  position: relative;
  width: min(1080px, 94vw);
  max-height: 90vh;
  overflow: auto;
  padding: 38px 42px 42px;
  border: 1px solid rgba(194, 145, 89, .32);
  background:
    radial-gradient(circle at 50% 0, rgba(111, 46, 39, .12), transparent 42%),
    linear-gradient(180deg, rgba(14, 14, 18, .99), rgba(5, 7, 11, .99));
  box-shadow: 0 26px 80px rgba(0,0,0,.55), inset 0 0 52px rgba(125, 49, 40, .05);
}
.sealed-reward-ledger-close,
.sealed-bonus-close {
  position: absolute;
  right: 18px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(197, 152, 96, .24);
  background: rgba(6, 8, 12, .78);
  color: rgba(231, 216, 195, .78);
  font-size: 24px;
  cursor: pointer;
}
.sealed-reward-ledger-head,
.sealed-bonus-head {
  text-align: center;
  margin-bottom: 28px;
}
.sealed-reward-ledger-head > span,
.sealed-bonus-head > span {
  color: rgba(191, 139, 80, .78);
  font-size: 10px;
  letter-spacing: .28em;
}
.sealed-reward-ledger-head h3,
.sealed-bonus-head h3 {
  margin: 8px 0 8px;
  color: rgba(244, 228, 203, .97);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: .16em;
}
.sealed-reward-ledger-head p,
.sealed-bonus-head p {
  margin: 0;
  color: rgba(211, 203, 190, .60);
  font-size: 12px;
  letter-spacing: .05em;
}
.sealed-reward-ledger-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.sealed-reward-ledger-item {
  min-height: 126px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 54px 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 4px 14px;
  align-items: center;
  border: 1px solid rgba(186, 139, 87, .20);
  background: rgba(7, 9, 13, .70);
  color: rgba(232, 218, 198, .88);
  text-align: left;
  cursor: pointer;
}
.sealed-reward-ledger-item:disabled {
  opacity: .38;
  cursor: default;
}
.sealed-reward-ledger-day {
  grid-row: 1 / span 3;

  color:
    rgba(199, 148, 87, .86);

  font-size:
    30px;

  font-weight:
    300;

  letter-spacing:
    .02em;
}


.sealed-reward-ledger-item strong {
  font-size:
    21px;

  font-weight:
    400;

  letter-spacing:
    .08em;
}


.sealed-reward-ledger-item small {
  color:
    rgba(220, 208, 190, .70);

  font-size:
    14px;

  line-height:
    1.65;

  letter-spacing:
    .025em;
}


.sealed-reward-ledger-item em {
  grid-column:
    3;

  grid-row:
    1 / span 3;

  color:
    rgba(197, 151, 94, .78);

  font-size:
    11px;

  font-style:
    normal;

  letter-spacing:
    .13em;
}
.sealed-reward-ledger-item.is-ready {
  border-color: rgba(211, 158, 94, .48);
}
.sealed-reward-ledger-item.is-recorded {
  background: linear-gradient(135deg, rgba(55, 26, 25, .54), rgba(7, 9, 13, .75));
  border-color: rgba(197, 145, 86, .38);
}

/* ---------- 中途獎勵 ---------- */
.sealed-bonus-shell {
  width: min(840px, 92vw);
}
.sealed-bonus-result {
  min-height: 300px;
  padding: 34px 38px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
  border: 1px solid rgba(189, 141, 87, .24);
  background:
    radial-gradient(circle at 50% 35%, rgba(111, 49, 41, .10), transparent 44%),
    rgba(6, 8, 12, .74);
}
.sealed-bonus-crest {
  width: 78px;
  height: 78px;
  object-fit: contain;
  margin-bottom: 4px;
  filter: brightness(.98) drop-shadow(0 0 14px rgba(193, 142, 83, .16));
}
.sealed-bonus-result > span {
  color: rgba(190, 139, 81, .70);
  font-size: 10px;
  letter-spacing: .24em;
}
.sealed-bonus-result > strong {
  color: rgba(245, 228, 201, .97);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: .11em;
}
.sealed-bonus-result > p {
  width: min(620px, 100%);
  margin: 4px auto;
  color: rgba(224, 213, 196, .78);
  font-size: 15px;
  line-height: 2;
  letter-spacing: .05em;
}
.sealed-bonus-result > em {
  color: rgba(197, 184, 166, .48);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .12em;
}
.sealed-bonus-character-choice {
  padding: 16px 0 0;
  text-align: center;
}
.sealed-bonus-character-grid > button {
  min-height: 126px;
}

@media (max-width: 900px) {
  #archives .sealed-reward-ledger-trigger {
    width: min(390px, 78vw);
    bottom: 18px;
  }
  .sealed-character-choice-grid,
  .sealed-bonus-character-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sealed-reward-ledger-list {
    grid-template-columns: 1fr;
  }
  .sealed-reward-ledger-shell,
  .sealed-bonus-shell {
    padding: 34px 22px 28px;
  }
}

@media (max-width: 560px) {
  .sealed-reward-ledger,
  .sealed-bonus-reveal {
    padding: 12px;
  }
  .sealed-character-choice {
    width: 94vw;
    padding: 22px 16px 24px;
  }
  .sealed-character-choice-grid,
  .sealed-bonus-character-grid {
    grid-template-columns: 1fr 1fr;
  }
  .sealed-character-choice-grid > button,
  .sealed-bonus-character-grid > button {
    min-height: 116px;
  }
  .sealed-bonus-result {
    padding: 28px 18px;
  }
}


/* =========================================================
   05｜中央終封｜滿 30 日前完全鎖定
   - 未滿 30 日：不可滑鼠點擊、不可鍵盤聚焦、取消 hover 誘導
   - 滿 30 日：恢復正常互動
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-final-locked {
  pointer-events: none !important;
  cursor: default !important;
}

#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-final-locked
.sealed-core-mark-image,
#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-final-locked:hover
.sealed-core-mark-image {
  transform:
    translate(-50%, -50%)
    scale(1) !important;
}

#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-final-locked::after {
  display: none !important;
}

#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-final-unlocked {
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* =========================================================
   V5｜首次入京記名 + 個人藏錄收藏中心
========================================================= */

.sealed-name-gate {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 5, 9, .82);
  backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
}

.sealed-name-gate.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sealed-name-gate-card {
  position: relative;
  width: min(560px, 92vw);
  padding: 42px 42px 36px;
  border: 1px solid rgba(193, 139, 82, .42);
  background:
    linear-gradient(145deg, rgba(57, 24, 23, .94), rgba(7, 9, 13, .98) 68%),
    #090b10;
  box-shadow: 0 28px 80px rgba(0,0,0,.56), inset 0 0 45px rgba(127, 47, 39, .08);
  color: #e9dfcf;
}

.sealed-name-gate-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(203, 160, 96, .12);
  pointer-events: none;
}

.sealed-name-gate-kicker {
  display: block;
  margin-bottom: 9px;
  color: rgba(192, 142, 86, .76);
  font-size: 10px;
  letter-spacing: .30em;
}

.sealed-name-gate-card h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: .18em;
}

.sealed-name-gate-card > i {
  display: block;
  width: 74px;
  height: 1px;
  margin: 18px 0;
  background: linear-gradient(90deg, rgba(208,161,94,.75), transparent);
}

.sealed-name-gate-card > p {
  margin: 0 0 26px;
  color: rgba(226, 216, 201, .72);
  font-size: 13px;
  line-height: 1.95;
  letter-spacing: .05em;
}

.sealed-name-field {
  display: grid;
  gap: 9px;
}

.sealed-name-field span {
  color: rgba(194, 153, 98, .72);
  font-size: 10px;
  letter-spacing: .20em;
}

.sealed-name-field input {
  width: 100%;
  height: 50px;
  padding: 0 15px;
  border: 1px solid rgba(190, 145, 88, .34);
  outline: 0;
  background: rgba(3, 6, 10, .72);
  color: #f0e5d5;
  font: inherit;
  font-size: 16px;
  letter-spacing: .08em;
}

.sealed-name-field input:focus {
  border-color: rgba(222, 174, 105, .76);
  box-shadow: 0 0 22px rgba(173, 108, 59, .10);
}

.sealed-name-error {
  min-height: 20px;
  margin: 8px 0 0 !important;
  color: rgba(229, 139, 123, .9) !important;
  font-size: 12px !important;
}

.sealed-name-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

.sealed-name-actions button,
.sealed-name-edit,
.sealed-record-open {
  border: 1px solid rgba(190, 145, 88, .42);
  background: rgba(25, 17, 18, .78);
  color: rgba(239, 225, 204, .92);
  padding: 10px 17px;
  font: inherit;
  font-size: 12px;
  letter-spacing: .10em;
  cursor: pointer;
}

.sealed-name-actions button:hover,
.sealed-name-edit:hover,
.sealed-record-open:hover {
  border-color: rgba(223, 174, 104, .82);
  background: rgba(64, 31, 27, .72);
}

.sealed-name-actions .is-ghost {
  background: transparent;
  color: rgba(215, 205, 192, .62);
}

.sealed-name-gate-close {
  position: absolute;
  right: 16px;
  top: 13px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: rgba(221, 205, 184, .58);
  font-size: 24px;
  cursor: pointer;
}

#archives [data-archive-content="sealed"] .sealed-record-summary.sealed-gift-summary {
  min-height: 228px !important;
  padding: 16px 18px 15px !important;
}

.sealed-gift-summary .sealed-record-summary-head > em {
  max-width: 170px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(244, 226, 197, .92) !important;
  font-size: 15px !important;
  font-style: normal;
}

.sealed-gift-summary-progress {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid rgba(193, 139, 82, .16);
}

.sealed-gift-summary-progress > div {
  display: grid;
  gap: 2px;
}

.sealed-gift-summary-progress span {
  color: rgba(190, 139, 83, .66);
  font-size: 9px;
  letter-spacing: .20em;
}

.sealed-gift-summary-progress strong {
  color: rgba(244, 226, 197, .96);
  font-size: 20px;
  font-weight: 400;
}

.sealed-gift-summary-progress strong b {
  font-weight: 400;
}

.sealed-gift-summary-progress small {
  color: rgba(213, 203, 188, .58);
  font-size: 10px;
  letter-spacing: .05em;
}

.sealed-gift-mini-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  margin-top: 10px;
}

.sealed-gift-mini-list span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(202, 195, 184, .50);
  font-size: 10px;
  line-height: 1.65;
}

.sealed-gift-mini-list span.is-recorded {
  color: rgba(230, 205, 168, .82);
}

.sealed-gift-summary-actions {
  display: flex;
  gap: 8px;
  margin-top: 11px;
}

.sealed-gift-summary-actions button {
  padding: 7px 12px;
  font-size: 10px;
}

.sealed-gift-summary .sealed-record-summary-id {
  margin-top: 10px !important;
}

.sealed-hidden-legacy {
  display: none !important;
}

@media (max-width: 700px) {
  .sealed-name-gate {
    padding: 14px;
  }

  .sealed-name-gate-card {
    padding: 34px 24px 28px;
  }

  .sealed-name-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .sealed-gift-mini-list {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   FIX｜DAY REWARD / 三十日獎錄 Overlay 開關修正
========================================================= */

.sealed-reward-ledger,
.sealed-bonus-reveal {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition:
    opacity 0.35s ease,
    visibility 0.35s ease;
}


/* 開啟時才顯示 */

.sealed-reward-ledger.is-open,
.sealed-bonus-reveal.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* 保險：ARIA 標記為關閉時一定不能攔截點擊 */

.sealed-reward-ledger[aria-hidden="true"],
.sealed-bonus-reveal[aria-hidden="true"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* ARIA 開啟時正常顯示 */

.sealed-reward-ledger[aria-hidden="false"],
.sealed-bonus-reveal[aria-hidden="false"] {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* =========================================================
   FIX｜05 月下藏卷
   畫藏 / 聲藏 / 秘藏名稱固定在罐子下方
========================================================= */


/* 三座藏器外框不要再強制吃滿父層高度 */
html body
#archives
.archive-vessels {
  height: auto !important;

  align-items: start !important;
}


/* 每座藏器改成正常上下排列：
   上面 = 罐子
   下面 = 名稱
*/
html body
#archives
.archive-vessel {
  height: auto !important;

  min-height: 0 !important;

  display: grid !important;

  grid-template-rows:
    auto
    auto !important;

  align-content: start !important;

  overflow: visible !important;
}


/* 罐子舞台 */
html body
#archives
.archive-vessel-stage {
  grid-row: 1 !important;

  width: 100% !important;

  height:
    clamp(
      420px,
      50vh,
      500px
    ) !important;

  min-height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  position: relative !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;
}


/* 罐子本體只待在 stage 裡 */
html body
#archives
.archive-vessel-image {
  width: auto !important;

  height: 100% !important;

  max-height: 100% !important;

  max-width: 100% !important;

  object-fit: contain !important;

  transform: none !important;
}


/* 名稱正式放到罐子下面 */
html body
#archives
.archive-vessel-label {
  grid-row: 2 !important;

  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;

  margin:
    12px
    0
    0 !important;

  padding:
    13px
    0
    8px !important;

  min-height:
    98px !important;

  transform:
    none !important;

  text-align:
    center !important;

  border-top:
    1px solid
    rgba(188, 146, 86, .16)
    !important;
}
/* =========================================================
   FIX｜05 月下藏卷
   三座藏器＋名稱整組往下移
========================================================= */

html body
#archives
.archive-vessels {
  margin:
    clamp(
      36px,
      4.5vh,
      58px
    )
    auto
    0
    !important;
}
/* =========================================================
   05｜秘藏
   30 張封條｜懸浮飄動效果
   已解封 / 未解封全部適用
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper {
  animation-name: ywjSealFloatA;
  animation-duration: 6.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;

  will-change:
    translate,
    rotate,
    scale;
}


/* =========================================================
   分成四種不同飄動軌跡
   避免 30 張一起同步上下動
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(4n + 1) {
  animation-name: ywjSealFloatA;
  animation-duration: 6.2s;
  animation-delay: -1.4s;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(4n + 2) {
  animation-name: ywjSealFloatB;
  animation-duration: 7.1s;
  animation-delay: -3.7s;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(4n + 3) {
  animation-name: ywjSealFloatC;
  animation-duration: 5.7s;
  animation-delay: -2.2s;
}


#archives
[data-archive-content="sealed"]
.sealed-day-paper:nth-child(4n + 4) {
  animation-name: ywjSealFloatD;
  animation-duration: 7.8s;
  animation-delay: -5.1s;
}


/* =========================================================
   飄動 A
========================================================= */

@keyframes ywjSealFloatA {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }

  25% {
    translate: 4px -6px;
    rotate: .45deg;
    scale: 1.006;
  }

  50% {
    translate: -2px -10px;
    rotate: -.35deg;
    scale: 1.01;
  }

  75% {
    translate: -5px -3px;
    rotate: .25deg;
    scale: 1.004;
  }

}


/* =========================================================
   飄動 B
========================================================= */

@keyframes ywjSealFloatB {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }

  25% {
    translate: -5px -4px;
    rotate: -.4deg;
    scale: 1.005;
  }

  50% {
    translate: 2px -9px;
    rotate: .5deg;
    scale: 1.009;
  }

  75% {
    translate: 5px -6px;
    rotate: -.2deg;
    scale: 1.003;
  }

}


/* =========================================================
   飄動 C
========================================================= */

@keyframes ywjSealFloatC {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }

  20% {
    translate: 3px -8px;
    rotate: -.3deg;
    scale: 1.008;
  }

  55% {
    translate: -4px -5px;
    rotate: .45deg;
    scale: 1.004;
  }

  80% {
    translate: 2px -2px;
    rotate: -.2deg;
    scale: 1.006;
  }

}


/* =========================================================
   飄動 D
========================================================= */

@keyframes ywjSealFloatD {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }

  30% {
    translate: -3px -7px;
    rotate: .35deg;
    scale: 1.004;
  }

  60% {
    translate: 5px -10px;
    rotate: -.45deg;
    scale: 1.009;
  }

  82% {
    translate: 3px -4px;
    rotate: .2deg;
    scale: 1.005;
  }

}


/* =========================================================
   Hover
   玩家指到某一張時，該張稍微穩住
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper:hover {
  animation-play-state: paused;
}


/* =========================================================
   正在燃燒解封時
   原本燃燒動畫優先，不讓漂浮干擾
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-day-paper.is-burning {
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
}


/* =========================================================
   減少動態設定
========================================================= */

@media (prefers-reduced-motion: reduce) {

  #archives
  [data-archive-content="sealed"]
  .sealed-day-paper {
    animation: none !important;
    translate: 0 0;
    rotate: 0deg;
    scale: 1;
  }

}
/* =========================================================
   FIX｜入京記名 / 更名
   真正全螢幕置中
========================================================= */

html body .sealed-name-gate {
  position: fixed !important;

  inset: 0 !important;

  width: 100vw !important;
  height: 100dvh !important;

  margin: 0 !important;
  padding: 24px !important;

  display: grid !important;

  place-items: center !important;

  z-index: 1000000 !important;

  transform: none !important;

  box-sizing: border-box !important;
}


/* 關閉狀態 */
html body .sealed-name-gate:not(.is-open) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* 開啟狀態 */
html body .sealed-name-gate.is-open {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}


/* 更名卡本體真正置中 */
html body .sealed-name-gate-card {
  position: relative !important;

  justify-self: center !important;
  align-self: center !important;

  width: min(560px, calc(100vw - 48px)) !important;

  max-height: calc(100dvh - 48px) !important;

  margin: 0 !important;

  transform: none !important;

  box-sizing: border-box !important;
}
/* =========================================================
   FIX｜入京記名 / 更名
   桌機閱讀尺寸放大
========================================================= */

html body .sealed-name-gate-card {
  width: min(650px, calc(100vw - 56px)) !important;

  padding:
    50px
    48px
    42px
    !important;
}


/* PRIVATE RECORD */
html body .sealed-name-gate-kicker {
  font-size: 12px !important;

  letter-spacing:
    .28em !important;

  margin-bottom:
    12px !important;
}


/* 入京記名 / 更改記名 */
html body .sealed-name-gate-card h3 {
  font-size: 38px !important;

  line-height:
    1.25 !important;

  letter-spacing:
    .14em !important;
}


/* 標題下面金線 */
html body .sealed-name-gate-card > i {
  width: 88px !important;

  margin:
    22px
    0
    22px
    !important;
}


/* 說明文字 */
html body .sealed-name-gate-card > p {
  margin:
    0
    0
    30px
    !important;

  font-size:
    16px !important;

  line-height:
    1.9 !important;

  letter-spacing:
    .04em !important;
}


/* 你的名字 */
html body .sealed-name-field span {
  font-size:
    12px !important;

  letter-spacing:
    .16em !important;
}


/* 輸入框 */
html body .sealed-name-field input {
  height:
    58px !important;

  padding:
    0
    18px
    !important;

  font-size:
    18px !important;

  line-height:
    1.4 !important;
}


/* 錯誤提示 */
html body .sealed-name-error {
  min-height:
    22px !important;

  font-size:
    14px !important;
}


/* 底部按鈕區 */
html body .sealed-name-actions {
  gap:
    12px !important;

  margin-top:
    22px !important;
}


/* 暫不留名 / 確認更名 */
html body .sealed-name-actions button {
  min-height:
    46px !important;

  padding:
    11px
    20px
    !important;

  font-size:
    14px !important;

  letter-spacing:
    .08em !important;
}


/* 右上角 X */
html body .sealed-name-gate-close {
  right:
    18px !important;

  top:
    16px !important;

  width:
    42px !important;

  height:
    42px !important;

  font-size:
    30px !important;

  line-height:
    1 !important;
}


/* 手機不要跟著放太誇張 */
@media (max-width: 700px) {

  html body .sealed-name-gate-card {
    width:
      calc(100vw - 28px)
      !important;

    padding:
      40px
      24px
      30px
      !important;
  }

  html body .sealed-name-gate-card h3 {
    font-size:
      30px !important;
  }

  html body .sealed-name-gate-card > p {
    font-size:
      14px !important;
  }

  html body .sealed-name-field input {
    font-size:
      17px !important;
  }

  html body .sealed-name-actions button {
    font-size:
      13px !important;
  }
}

/* =========================================================
   05｜秘藏｜V6 正式收藏素材接線
   DAY 01 / 03 / 10 / 18 / 25 預覽＋下載
   DAY 30 私藏情書／同心契沿用既有結算 Canvas
========================================================= */

#archives [data-sealed-bonus-art-stage][hidden],
#archives [data-sealed-bonus-download][hidden] {
  display: none !important;
}

#archives .sealed-bonus-shell {
  width: min(1100px, 94vw) !important;
}

#archives .sealed-bonus-result {
  min-height: 520px !important;
  padding: 28px 30px !important;

  display: grid !important;
  grid-template-columns: minmax(280px, 430px) minmax(0, 1fr) !important;
  grid-template-areas:
    "art crest"
    "art label"
    "art title"
    "art text"
    "art meta"
    "art action" !important;

  column-gap: 34px !important;
  row-gap: 12px !important;

  align-items: start !important;
  justify-items: start !important;

  text-align: left !important;
}

#archives .sealed-bonus-art-stage {
  grid-area: art;

  width: 100%;
  min-height: 500px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 12px;

  border: 1px solid rgba(189, 141, 87, .18);
  background:
    radial-gradient(circle at 50% 40%, rgba(109, 51, 43, .08), transparent 62%),
    rgba(3, 5, 8, .58);

  overflow: hidden;
}

#archives .sealed-bonus-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  object-fit: contain;

  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .30));
}

#archives .sealed-bonus-crest {
  grid-area: crest;
  justify-self: start !important;
  margin: 4px 0 0 !important;
}

#archives .sealed-bonus-result > span {
  grid-area: label;
  align-self: end;
}

#archives .sealed-bonus-result > strong {
  grid-area: title;
  font-size: 30px !important;
  line-height: 1.45 !important;
}

#archives .sealed-bonus-result > p {
  grid-area: text;
  width: 100% !important;
  margin: 4px 0 0 !important;
  font-size: 15px !important;
  line-height: 2 !important;
  color: rgba(222, 210, 191, .76) !important;
}

#archives .sealed-bonus-result > em {
  grid-area: meta;
  margin-top: 8px;
  color: rgba(190, 142, 88, .70) !important;
  font-size: 10px !important;
  line-height: 1.6 !important;
  letter-spacing: .13em !important;
}

#archives .sealed-bonus-download {
  grid-area: action;

  margin-top: 12px;
  min-width: 190px;
  padding: 12px 20px;

  border: 1px solid rgba(210, 160, 99, .54);
  background:
    linear-gradient(180deg, rgba(60, 29, 27, .90), rgba(17, 12, 14, .94));

  color: rgba(244, 226, 198, .96);
  font: inherit;
  font-size: 13px;
  letter-spacing: .12em;

  cursor: pointer;

  box-shadow:
    0 10px 24px rgba(0, 0, 0, .24),
    inset 0 0 18px rgba(178, 91, 62, .05);

  transition: .22s ease;
}

#archives .sealed-bonus-download:hover {
  transform: translateY(-2px);
  border-color: rgba(230, 181, 116, .82);
  box-shadow:
    0 15px 30px rgba(0, 0, 0, .30),
    0 0 20px rgba(202, 124, 74, .10);
}

/* DAY 30 兩組正式成品按鈕稍微區分主次，但仍維持同系列。 */
#archives .sealed-settlement-actions .sealed-action-group:first-child > button:first-child,
#archives .sealed-settlement-actions .sealed-action-group:nth-child(2) > button:first-child {
  min-width: 220px !important;
}

@media (max-width: 820px) {
  #archives .sealed-bonus-result {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "art"
      "crest"
      "label"
      "title"
      "text"
      "meta"
      "action" !important;

    justify-items: center !important;
    text-align: center !important;
  }

  #archives .sealed-bonus-art-stage {
    width: min(420px, 100%);
    min-height: 420px;
  }

  #archives .sealed-bonus-crest {
    justify-self: center !important;
  }

  #archives .sealed-bonus-result > p {
    text-align: center !important;
  }
}


/* =========================================================
   V7｜05 月下藏卷・最終覆蓋
   01 三藏器爆光配色
   02 畫藏光球銀白化
   03 右下個人藏錄精簡／透明
   04 7/14/21/30 角色局部預覽
========================================================= */

/* 01｜畫藏銀白 / 聲藏紫藍 / 秘藏暗紅 */
body:has(#archives .archive-vessel-visual.is-awakening) > .archives-burst {
  background: radial-gradient(circle at center,
    rgba(255,255,255,1) 0%,
    rgba(239,243,246,.98) 24%,
    rgba(202,211,218,.72) 47%,
    rgba(6,9,14,0) 75%) !important;
}

body:has(#archives .archive-vessel-audio.is-awakening) > .archives-burst {
  background: radial-gradient(circle at center,
    rgba(244,238,255,1) 0%,
    rgba(194,174,245,.98) 24%,
    rgba(128,106,210,.76) 47%,
    rgba(20,13,46,0) 75%) !important;
}

body:has(#archives .archive-vessel-sealed.is-awakening) > .archives-burst {
  background: radial-gradient(circle at center,
    rgba(255,213,204,.98) 0%,
    rgba(216,82,72,.96) 24%,
    rgba(128,34,38,.78) 47%,
    rgba(34,5,9,0) 75%) !important;
}

/* 02｜畫藏光球：水藍改冷銀白 */
html body #archives .archive-vessel-visual {
  --orb-core: rgba(255,255,255,.99);
  --orb-mid: rgba(232,236,239,.92);
  --orb-outer: rgba(190,199,206,.24);
  --orb-shadow: rgba(225,232,237,.76);
}

/* 03｜右下個人藏錄：只留標題、5/5、查看藏錄 */
#archives [data-archive-content="sealed"] .sealed-record-summary.sealed-gift-summary {
  position: absolute !important;
  right: 78px !important;
  bottom: 44px !important;
  width: 230px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px 0 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  border: none !important;
  outline: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  z-index: 120 !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary .sealed-record-summary-head {
  display: block !important;
  margin: 0 0 9px !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary .sealed-record-summary-head > div {
  display: grid !important;
  gap: 3px !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary .sealed-record-summary-head span {
  font-size: 7px !important;
  letter-spacing: .22em !important;
  color: rgba(190,143,84,.50) !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary .sealed-record-summary-head strong {
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
  letter-spacing: .08em !important;
  color: rgba(240,224,198,.94) !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary [data-sealed-profile-name] {
  display: none !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-progress {
  display: block !important;
  margin: 0 !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-progress > div {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-progress span {
  font-size: 7px !important;
  letter-spacing: .18em !important;
  color: rgba(182,137,83,.46) !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-progress strong,
#archives [data-archive-content="sealed"] .sealed-gift-summary-progress strong b {
  display: inline !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: rgba(244,225,195,.96) !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-progress small,
#archives [data-archive-content="sealed"] .sealed-gift-mini-list,
#archives [data-archive-content="sealed"] .sealed-gift-summary .sealed-record-summary-id,
#archives [data-archive-content="sealed"] .sealed-hidden-legacy {
  display: none !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-actions {
  display: block !important;
  margin-top: 11px !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-actions [data-sealed-name-edit] {
  display: none !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-actions [data-sealed-reward-ledger-trigger] {
  width: 100% !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(186,139,82,.32) !important;
  background: rgba(52,27,25,.14) !important;
  color: rgba(231,211,181,.86) !important;
  font-size: 11px !important;
  letter-spacing: .12em !important;
  cursor: pointer !important;
  transition: .25s ease !important;
}

#archives [data-archive-content="sealed"] .sealed-gift-summary-actions [data-sealed-reward-ledger-trigger]:hover {
  border-color: rgba(214,162,94,.60) !important;
  background: rgba(88,35,31,.26) !important;
  color: rgba(255,235,202,.98) !important;
  box-shadow: 0 0 18px rgba(135,48,42,.12) !important;
}

/* 04｜7/14/21/30 五人角色局部預覽 */
#archives [data-archive-content="sealed"] .sealed-character-preview[hidden] {
  display: none !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview {
  width: min(560px, 92%) !important;
  margin: 22px auto 0 !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-window {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 16 / 6.2 !important;
  overflow: hidden !important;
  border: 1px solid rgba(194,147,88,.26) !important;
  background: rgba(5,5,8,.88) !important;
  box-shadow: inset 0 0 28px rgba(0,0,0,.54), 0 18px 34px rgba(0,0,0,.20) !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-window::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5,5,8,.60), transparent 16%, transparent 84%, rgba(5,5,8,.62)),
    linear-gradient(180deg, rgba(5,5,8,.42), transparent 26%, transparent 72%, rgba(5,5,8,.70));
}

#archives [data-archive-content="sealed"] .sealed-character-preview-image {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: var(--preview-x,50%) var(--preview-y,50%) !important;
  transform: scale(var(--preview-zoom,1.75)) !important;
  transform-origin: var(--preview-x,50%) var(--preview-y,50%) !important;
  filter: brightness(.76) saturate(.88) contrast(1.04) !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-copy {
  position: absolute !important;
  left: 18px !important;
  bottom: 14px !important;
  z-index: 4 !important;
  display: grid !important;
  gap: 3px !important;
  text-align: left !important;
  pointer-events: none !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-copy span {
  color: rgba(193,145,87,.70) !important;
  font-size: 7px !important;
  letter-spacing: .22em !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-copy strong {
  color: rgba(248,231,207,.98) !important;
  font-family: Georgia, "Noto Serif TC", serif !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  letter-spacing: .10em !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-copy em {
  color: rgba(224,207,184,.62) !important;
  font-size: 9px !important;
  font-style: normal !important;
  letter-spacing: .08em !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-top: 12px !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-actions button {
  min-height: 42px !important;
  padding: 9px 14px !important;
  border: 1px solid rgba(187,139,82,.30) !important;
  background: rgba(34,20,20,.44) !important;
  color: rgba(236,217,189,.88) !important;
  font-size: 11px !important;
  letter-spacing: .10em !important;
  cursor: pointer !important;
  transition: .24s ease !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-actions .sealed-character-rethink {
  background: rgba(9,10,13,.54) !important;
  color: rgba(211,195,174,.72) !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-actions button:hover:not(:disabled) {
  border-color: rgba(219,166,97,.62) !important;
  color: rgba(255,238,209,.98) !important;
  box-shadow: 0 0 20px rgba(126,50,42,.14) !important;
}

#archives [data-archive-content="sealed"] .sealed-character-preview-actions button:disabled {
  opacity: .38 !important;
  cursor: default !important;
}

#archives [data-archive-content="sealed"] .sealed-character-choice-grid [data-sealed-character-option].is-selected {
  border-color: rgba(213,160,96,.66) !important;
  box-shadow: inset 0 0 20px rgba(120,55,42,.12), 0 0 20px rgba(138,69,48,.12) !important;
}

@media (max-width: 680px) {
  #archives [data-archive-content="sealed"] .sealed-character-preview {
    width: 96% !important;
  }

  #archives [data-archive-content="sealed"] .sealed-character-preview-window {
    aspect-ratio: 16 / 7.5 !important;
  }

  #archives [data-archive-content="sealed"] .sealed-character-preview-actions {
    grid-template-columns: 1fr !important;
  }

  #archives [data-archive-content="sealed"] .sealed-record-summary.sealed-gift-summary {
    right: 24px !important;
    bottom: 28px !important;
    width: 210px !important;
  }
}


/* =========================================================
   V8｜05 秘藏資訊架構
   01 個人藏錄六格：持藏者＋五件收藏
   02 持藏者資料／更名／照片全部移入個人藏錄
   03 中央終封只顯示私藏情書＋同心契
========================================================= */

/* ---------- 個人藏錄：固定 3 x 2 六格 ---------- */
html body .sealed-reward-ledger-shell {
  width: min(1120px, 94vw) !important;
  max-height: 92vh !important;
}

html body .sealed-reward-ledger-list {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

html body .sealed-reward-ledger-item {
  min-height: 138px !important;
}

html body .sealed-reward-ledger-profile {
  background:
    radial-gradient(circle at 18% 20%, rgba(153,73,59,.12), transparent 46%),
    linear-gradient(135deg, rgba(59,28,27,.58), rgba(7,9,13,.78)) !important;
  border-color: rgba(212,160,96,.48) !important;
}

html body .sealed-reward-ledger-profile .sealed-reward-ledger-day {
  font-size:
    23px !important;

  letter-spacing:
    .08em !important;
}

/* =========================================================
   ME｜持藏者資料｜滿版一頁式
========================================================= */

html body .sealed-profile-reveal[hidden] {
  display: none !important;
}


html body .sealed-profile-reveal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;

  display: grid !important;
  place-items: center !important;

  padding: 2vh 2vw !important;

  background:
  linear-gradient(
    180deg,
    rgba(2, 4, 8, .66),
    rgba(2, 4, 8, .82)
  ),
  url("assets/images/archive/sealed/backgrounds/sealed-detail-bg.png")
  center center / cover
  no-repeat
  fixed
  !important;

backdrop-filter:
  none !important;

-webkit-backdrop-filter:
  none !important;

  backdrop-filter:
    blur(10px) !important;
}


/* =========================================================
   主框｜滿版但保留安全邊距
========================================================= */

html body .sealed-profile-shell {
  position: relative !important;

  width:
    min(1500px, 96vw) !important;

  height:
    min(900px, 94vh) !important;

  max-width:
    none !important;

  max-height:
    none !important;

  box-sizing:
    border-box !important;

  overflow:
    hidden !important;

  padding:
    30px 44px 28px !important;

  border:
    1px solid
    rgba(194,145,89,.34) !important;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(111,46,39,.13),
      transparent 42%
    ),
    linear-gradient(
      180deg,
      rgba(14,14,18,.995),
      rgba(5,7,11,.995)
    ) !important;

  box-shadow:
    0 28px 90px
    rgba(0,0,0,.62) !important;

  display:
    grid !important;

  grid-template-rows:
    auto
    auto
    minmax(0, 1fr)
    auto !important;
}


/* =========================================================
   關閉
========================================================= */

html body .sealed-ledger-profile-close {
  position: absolute !important;

  top: 16px !important;
  right: 18px !important;

  z-index: 50 !important;

  width: 42px !important;
  height: 42px !important;

  border:
    1px solid
    rgba(197,152,96,.32) !important;

  background:
    rgba(6,8,12,.84) !important;

  color:
    rgba(235,219,196,.88) !important;

  font-size:
    27px !important;

  cursor:
    pointer !important;
}


/* =========================================================
   大標題
========================================================= */

html body .sealed-ledger-profile-head {
  margin:
    0 55px 20px !important;

  text-align:
    center !important;
}


html body .sealed-ledger-profile-head > span {
  font-size:
    13px !important;

  letter-spacing:
    .28em !important;

  color:
    rgba(194,143,84,.78) !important;
}


html body .sealed-ledger-profile-head h4 {
  margin:
    8px 0 0 !important;

  font-size:
    36px !important;

  line-height:
    1.2 !important;

  font-weight:
    400 !important;

  letter-spacing:
    .13em !important;

  color:
    rgba(244,228,203,.98) !important;
}


/* =========================================================
   上方三格資訊
========================================================= */

html body .sealed-ledger-profile-meta {
  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  gap:
    16px !important;

  margin:
    0 0 22px !important;
}


html body .sealed-ledger-profile-meta > div {
  min-height:
    76px !important;

  padding:
    14px 18px !important;

  box-sizing:
    border-box !important;

  border:
    1px solid
    rgba(190,141,83,.18) !important;

  background:
    rgba(7,9,13,.52) !important;
}


html body .sealed-ledger-profile-meta span {
  display:
    block !important;

  font-size:
    13px !important;

  line-height:
    1.35 !important;

  letter-spacing:
    .16em !important;

  color:
    rgba(202,151,92,.75) !important;
}


html body .sealed-ledger-profile-meta strong {
  display:
    block !important;

  margin-top:
    8px !important;

  font-size:
    18px !important;

  line-height:
    1.35 !important;

  font-weight:
    400 !important;

  color:
    rgba(242,224,199,.96) !important;
}


/* =========================================================
   主要區域｜左圖右資料
========================================================= */

html body .sealed-profile-main {
  min-height:
    0 !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(300px, .78fr)
    minmax(600px, 1.65fr) !important;

  gap:
    46px !important;

  align-items:
    stretch !important;
}


/* =========================================================
   左側｜照片＋姓名
========================================================= */

html body .sealed-profile-left {
  min-width:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;
}


html body .sealed-profile-left
.sealed-holder-preview {
  position:
    relative !important;

  width:
    min(360px, 100%) !important;

  max-height:
    535px !important;

  margin:
    0 auto !important;

  overflow:
    hidden !important;

  isolation:
    isolate !important;
}

/* =========================================================
   ME｜新版相框照片遮罩
   新框內窗：約 左右14%／上24%／下23%
========================================================= */

html body .sealed-profile-left
.sealed-holder-preview::before {
  content:
    "";

  position:
    absolute !important;

  left:
  8% !important;

right:
  8% !important;

top:
  10% !important;

bottom:
  10% !important;

  z-index:
    2 !important;

  background:
    transparent !important;

  box-shadow:
  0 0 0 9999px
  rgba(8,9,13,.995) !important;

  pointer-events:
    none !important;
}


/* 玩家照片與匿名藏影在遮罩下方 */
html body .sealed-profile-left
.sealed-holder-photo,

html body .sealed-profile-left
.sealed-holder-silhouette {
  z-index:
    1 !important;
}


/* 新版裝飾框永遠最上層 */
html body .sealed-profile-left
.sealed-holder-frame {
  z-index:
    3 !important;

  object-fit:
    contain !important;

  pointer-events:
    none !important;
}


/* 姓名區 */
html body .sealed-profile-name-controls {
  width:
    min(360px, 100%) !important;

  margin:
    16px auto 0 !important;

  padding-top:
    16px !important;

  border-top:
    1px solid
    rgba(176,128,78,.16) !important;

  display:
    grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    145px !important;

  gap:
    12px !important;

  align-items:
    end !important;
}


html body .sealed-profile-name-controls label {
  display:
    grid !important;

  grid-template-columns:
    92px minmax(0,1fr) !important;

  gap:
    12px !important;

  align-items:
    center !important;
}


html body .sealed-profile-name-controls label > span {
  font-size:
    15px !important;

  color:
    rgba(205,158,103,.80) !important;
}


html body .sealed-profile-name-controls
input[type="text"] {
  min-width:
    0 !important;

  height:
    44px !important;

  box-sizing:
    border-box !important;

  padding:
    10px 13px !important;

  border:
    1px solid
    rgba(177,128,78,.22) !important;

  background:
    rgba(5,6,9,.74) !important;

  color:
    rgba(239,221,195,.94) !important;

  font:
    inherit !important;

  font-size:
    17px !important;

  outline:
    none !important;
}


html body .sealed-profile-name-save {
  width:
    100% !important;

  height:
    44px !important;

  padding:
    0 14px !important;

  border:
    1px solid
    rgba(198,150,93,.36) !important;

  background:
    rgba(62,31,28,.42) !important;

  color:
    rgba(241,222,194,.95) !important;

  font-size:
    15px !important;

  letter-spacing:
    .08em !important;

  cursor:
    pointer !important;
}

/* ME｜左側匿名藏影 */
html body .sealed-profile-name-controls
.sealed-photo-clear {
  grid-column:
    1 / -1 !important;

  width:
    100% !important;

  min-height:
    42px !important;

  margin:
    0 !important;

  padding:
    10px 16px !important;

  justify-self:
    stretch !important;

  border:
    1px solid
    rgba(170,120,74,.22) !important;

  background:
    rgba(7,8,11,.30) !important;

  color:
    rgba(219,200,175,.72) !important;

  font-size:
    14px !important;

  cursor:
    pointer !important;
}

/* =========================================================
   右側
========================================================= */

html body .sealed-profile-right {
  position:
  relative !important;

isolation:
  isolate !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  display:
    grid !important;

  grid-template-rows:
    minmax(0,1fr)
    auto !important;

  align-content:
    center !important;

  gap:
    18px !important;
}

/* =========================================================
   ME｜夜巫京淡浮水印
========================================================= */

html body .sealed-profile-right::before {
  content:
    "";

  position:
    absolute !important;

  /* 浮水印位置 */
  top:
    -24px !important;

  right:
    12px !important;

  /* 浮水印大小 */
  width:
    290px !important;

  height:
    170px !important;

  background:
    url("assets/images/yewujing-logo.png")
    center / contain
    no-repeat !important;

  opacity:
    .12 !important;

  filter:
  grayscale(.65)
  sepia(.35)
  brightness(1.35) !important;

  pointer-events:
    none !important;

  z-index:
    0 !important;
}


/* 資料壓在 Logo 上面 */
html body .sealed-profile-right > * {
  position:
    relative !important;

  z-index:
    1 !important;
}
/* =========================================================
   FINAL RECORD
========================================================= */

html body .sealed-profile-record {
  min-width:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  justify-content:
    center !important;

  padding:
    0 0 4px !important;
}


html body .sealed-profile-record-en {
  display:
    block !important;

  text-align:
    center !important;

  font-size:
    13px !important;

  letter-spacing:
    .24em !important;

  color:
    rgba(190,140,83,.70) !important;
}


html body .sealed-profile-record h5 {
  margin:
    9px 0 22px !important;

  text-align:
    center !important;

  color:
    rgba(243,225,199,.98) !important;

  font-size:
    36px !important;

  line-height:
    1.25 !important;

  font-weight:
    400 !important;

  letter-spacing:
    .08em !important;
}


html body .sealed-profile-record dl {
  display:
    grid !important;

  grid-template-columns:
    repeat(2, minmax(0,1fr)) !important;

  gap:
    0 30px !important;

  margin:
    0 !important;
}


html body .sealed-profile-record dl > div {
  display:
    grid !important;

  grid-template-columns:
    105px minmax(0,1fr) !important;

  gap:
    14px !important;

  align-items:
    baseline !important;

  padding:
    13px 0 !important;

  border-bottom:
    1px solid
    rgba(183,135,82,.14) !important;
}


html body .sealed-profile-record dt {
  font-size:
    15px !important;

  line-height:
    1.45 !important;

  letter-spacing:
    .05em !important;

  color:
    rgba(198,148,92,.78) !important;

  white-space:
    nowrap !important;
}


html body .sealed-profile-record dd {
  margin:
    0 !important;

  font-size:
    18px !important;

  line-height:
    1.5 !important;

  color:
    rgba(237,220,195,.94) !important;
}


html body .sealed-profile-record
.sealed-profile-anomaly {
  grid-column:
    1 / -1 !important;
}


html body .sealed-profile-record > p {
  width:
    100% !important;

  margin:
    16px auto 0 !important;

  text-align:
    center !important;

  font-size:
    15px !important;

  line-height:
    1.6 !important;

  color:
    rgba(215,198,175,.68) !important;
}


/* =========================================================
   右下｜照片更換＋裁切
========================================================= */

html body .sealed-profile-photo-controls {
  position:
    relative !important;

  z-index:
    20 !important;

  padding-top:
    16px !important;

  border-top:
    1px solid
    rgba(180,132,81,.18) !important;
}


html body .sealed-profile-photo-controls
.sealed-photo-file {
  display:
    grid !important;

  grid-template-columns:
    115px minmax(0,1fr) !important;

  align-items:
    center !important;

  gap:
    16px !important;

  margin-bottom:
    12px !important;
}


html body .sealed-profile-photo-controls
.sealed-photo-file > span {
  font-size:
    15px !important;

  color:
    rgba(205,158,103,.82) !important;
}


html body .sealed-profile-photo-controls
input[type="file"] {
  position:
    relative !important;

  z-index:
    30 !important;

  pointer-events:
    auto !important;

  min-width:
    0 !important;

  font-size:
    15px !important;

  color:
    rgba(222,206,184,.82) !important;

  cursor:
    pointer !important;
}


/* =========================================================
   Slider｜加大操作區
========================================================= */

html body .sealed-profile-photo-controls
.sealed-crop-controls {
  position:
    relative !important;

  z-index:
    30 !important;

  display:
    grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  gap:
    22px !important;

  padding:
    10px 0 14px !important;

  border:
    0 !important;

  pointer-events:
    auto !important;
}


html body .sealed-profile-photo-controls
.sealed-crop-controls[hidden] {
  display:
    grid !important;

  visibility:
    hidden !important;

  pointer-events:
    none !important;
}


html body .sealed-profile-photo-controls
.sealed-crop-controls label {
  display:
    grid !important;

  grid-template-columns:
    45px minmax(0,1fr) !important;

  align-items:
    center !important;

  gap:
    10px !important;

  min-width:
    0 !important;
}


html body .sealed-profile-photo-controls
.sealed-crop-controls label > span {
  font-size:
    15px !important;

  color:
    rgba(205,158,103,.80) !important;
}


html body .sealed-profile-photo-controls
input[type="range"] {
  position:
    relative !important;

  z-index:
    40 !important;

  width:
    100% !important;

  height:
    32px !important;

  margin:
    0 !important;

  padding:
    0 !important;

  pointer-events:
    auto !important;

  cursor:
    grab !important;

  accent-color:
    #a5634c !important;

  touch-action:
    none !important;
}


html body .sealed-profile-photo-controls
input[type="range"]:active {
  cursor:
    grabbing !important;
}


/* =========================================================
   右下按鈕
========================================================= */

html body .sealed-profile-photo-actions {
  display:
    grid !important;

  grid-template-columns:
    minmax(180px,.72fr)
    minmax(260px,1fr) !important;

  gap:
    16px !important;

  align-items:
    center !important;
}


html body .sealed-photo-clear {
  width:
    100% !important;

  min-height:
    44px !important;

  padding:
    10px 16px !important;

  border:
    1px solid
    rgba(170,120,74,.22) !important;

  background:
    rgba(7,8,11,.30) !important;

  color:
    rgba(219,200,175,.72) !important;

  font-size:
    14px !important;

  cursor:
    pointer !important;
}


html body .sealed-profile-download {
  width:
    100% !important;

  min-height:
    46px !important;

  margin:
    0 !important;

  padding:
    11px 18px !important;

  border:
    1px solid
    rgba(198,150,93,.38) !important;

  background:
    linear-gradient(
      135deg,
      rgba(72,33,30,.60),
      rgba(17,13,16,.82)
    ) !important;

  color:
    rgba(242,224,197,.96) !important;

  font-family:
    inherit !important;

  font-size:
    15px !important;

  letter-spacing:
    .08em !important;

  cursor:
    pointer !important;
}


html body .sealed-profile-download:hover {
  border-color:
    rgba(219,166,97,.64) !important;

  background:
    linear-gradient(
      135deg,
      rgba(92,40,34,.68),
      rgba(20,14,17,.88)
    ) !important;
}


/* =========================================================
   操作訊息
========================================================= */

html body .sealed-ledger-profile-status {
  min-height:
    20px !important;

  margin:
    10px 0 0 !important;

  text-align:
    center !important;

  font-size:
    14px !important;

  line-height:
    1.5 !important;

  color:
    rgba(214,198,176,.66) !important;
}


html body .sealed-ledger-profile-status:empty {
  display:
    none !important;
}

/* =========================================================
   ME｜未選照片時正確隱藏
========================================================= */

/* 防止全站 img { display:block } 把 hidden 蓋掉 */
html body .sealed-holder-photo[hidden],
html body .sealed-holder-silhouette[hidden] {
  display: none !important;
}


/* 沒有照片時，匿名按鈕也一起收起 */
html body .sealed-photo-clear[hidden] {
  display: none !important;
}

/* =========================================================
   比較小螢幕保底
========================================================= */

@media (max-width: 1000px) {

  html body .sealed-profile-shell {
    width:
      96vw !important;

    height:
      auto !important;

    max-height:
      94vh !important;

    overflow-y:
      auto !important;

    padding:
      30px 22px !important;
  }


  html body .sealed-profile-main {
    grid-template-columns:
      1fr !important;
  }


  html body .sealed-profile-left {
    padding-bottom:
      12px !important;
  }


  html body .sealed-profile-record dl {
    grid-template-columns:
      1fr !important;
  }


  html body .sealed-profile-photo-controls
  .sealed-crop-controls {
    grid-template-columns:
      1fr !important;
  }

}

/* ---------- 中央終封：只保留兩份最終私藏 ---------- */
html body .sealed-final-gift-panel {
  padding: 24px !important;
}

html body .sealed-final-gift-shell {
  width: min(880px, 94vw) !important;
  height: auto !important;
  max-height: 90vh !important;
  padding: 38px 42px 40px !important;
  display: block !important;
  overflow: auto !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  grid-template-areas: none !important;
}

html body .sealed-final-gift-shell .sealed-settlement-head {
  margin: 0 0 30px !important;
  text-align: center !important;
}

html body .sealed-final-gifts {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

html body .sealed-final-gift-card {
  min-height: 270px !important;
  padding: 26px 24px !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1px solid rgba(190,142,87,.24) !important;
  background:
    radial-gradient(circle at 50% 5%, rgba(112,48,41,.11), transparent 45%),
    rgba(6,8,12,.76) !important;
}

html body .sealed-final-gift-card > span {
  color: rgba(192,143,84,.68) !important;
  font-size: 9px !important;
  letter-spacing: .22em !important;
}

html body .sealed-final-gift-card h4 {
  margin: 10px 0 14px !important;
  color: rgba(244,228,202,.96) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  letter-spacing: .12em !important;
}

html body .sealed-final-gift-card p {
  margin: 0 !important;
  color: rgba(216,205,189,.66) !important;
  font-size: 12px !important;
  line-height: 1.9 !important;
}

html body .sealed-final-gift-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 9px !important;
  margin-top: auto !important;
  padding-top: 22px !important;
}

html body .sealed-final-gift-actions button {
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(202,154,96,.42) !important;
  background: rgba(63,31,29,.52) !important;
  color: rgba(242,224,197,.94) !important;
  font-size: 12px !important;
  letter-spacing: .11em !important;
  cursor: pointer !important;
}

html body .sealed-final-gift-actions button.is-ghost {
  background: rgba(7,9,13,.68) !important;
  border-color: rgba(183,138,84,.25) !important;
}

html body .sealed-final-gift-actions button:disabled {
  opacity: .32 !important;
  cursor: default !important;
}

html body .sealed-final-gift-shell .sealed-generation-status {
  margin: 18px 0 0 !important;
  text-align: center !important;
  font-size: 11px !important;
}

html body .sealed-final-gift-shell .sealed-output-wrap {
  display: none !important;
}

@media (max-width: 900px) {
  html body .sealed-reward-ledger-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .sealed-ledger-holder-slot .sealed-holder-panel {
    grid-template-columns: 1fr !important;
  }

  html body .sealed-final-gifts {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  html body .sealed-reward-ledger-list,
  html body .sealed-ledger-profile-meta {
    grid-template-columns: 1fr !important;
  }

  html body .sealed-final-gift-shell {
    padding: 34px 20px 26px !important;
  }
}
/* =========================================================
   V8｜05 右下個人藏錄位置最終調整
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-record-summary.sealed-gift-summary {
  right: 200px !important;
  bottom: 15px !important;
}
/* =========================================================
   V8｜終封私藏｜說明文字與按鈕字體放大
========================================================= */

/* 最上方說明 */
html body
.sealed-final-gift-shell
.sealed-settlement-head p {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(224, 214, 198, .76) !important;
}


/* 私藏情書／婚書卡片說明 */
html body
.sealed-final-gift-card p {
  font-size: 15px !important;
  line-height: 1.85 !important;
  color: rgba(224, 214, 198, .76) !important;
}


/* 四顆操作按鈕 */
html body
.sealed-final-gift-actions button {
  font-size: 14px !important;
  line-height: 1.4 !important;
  padding: 13px 16px !important;
}


/* 最下面狀態說明 */
html body
.sealed-final-gift-shell
.sealed-generation-status {
  font-size: 13px !important;
  line-height: 1.75 !important;
  color: rgba(211, 197, 176, .68) !important;
}
/* =========================================================
   V8 FIX｜7 / 14 / 21 / 30
   未選角色前，完整結果層必須真正隱藏
========================================================= */

/* JS 加 hidden 時，絕對不可被舊 CSS display:grid 蓋回來 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid[hidden] {
  display: none !important;
}


/* 五人選擇畫面開啟時確保在最上層 */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice]:not([hidden]) {
  display: block !important;
  position: relative !important;
  z-index: 100 !important;
}


/* 尚未成立的藏紋圖片也不得提前跑出來 */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-phase-mark][hidden] {
  display: none !important;
}


/* 尚未選角時，右側家紋也不能偷跑 */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-house-seal][hidden] {
  display: none !important;
}
/* =========================================================
   V8 FIX｜7 / 14 / 21 / 30
   五人選角畫面重新排版
========================================================= */

/* 尚未選角時，整個視窗不要維持巨大 CG 尺寸 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner:has(
  [data-sealed-character-choice]:not([hidden])
) {
  width: min(1120px, 82vw) !important;
  height: min(620px, 82vh) !important;

  min-height: 0 !important;

  margin: auto !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* 初封 / 承封 / 深封 / 終封 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner:has(
  [data-sealed-character-choice]:not([hidden])
)
[data-sealed-reveal-title] {
  top: 42px !important;

  font-size: 46px !important;
  letter-spacing: .14em !important;
}


/* 標題下方紅線 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner:has(
  [data-sealed-character-choice]:not([hidden])
)
> i {
  top: 105px !important;
}


/* 七日得錄……那行 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner:has(
  [data-sealed-character-choice]:not([hidden])
)
[data-sealed-reveal-text] {
  top: 126px !important;

  font-size: 13px !important;
  line-height: 1.6 !important;
}


/* 五人選角主框 */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice]:not([hidden]) {
  position: absolute !important;

  left: 50% !important;
  top: 178px !important;

  transform: translateX(-50%) !important;

  width: min(960px, calc(100% - 70px)) !important;

  margin: 0 !important;
  padding: 24px 26px 26px !important;

  box-sizing: border-box !important;
}


/* CHOOSE YOUR ARCHIVE */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice] > span {
  font-size: 10px !important;
}


/* 選擇本階段想收錄的角色 */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice] > h4 {
  margin: 7px 0 7px !important;

  font-size: 24px !important;
}


/* 說明 */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice] > p {
  max-width: 760px !important;

  margin: 0 auto 18px !important;

  font-size: 12px !important;
  line-height: 1.7 !important;
}


/* 五張角色卡 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-choice-grid {
  gap: 14px !important;
}


/* 每張角色卡再有份量一點 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-choice-grid > button {
  min-height: 145px !important;

  padding: 15px 10px !important;
}


/* 家紋稍微放大 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-choice-grid img {
  width: 62px !important;
  height: 62px !important;
}


/* 人名 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-choice-grid strong {
  font-size: 18px !important;
}
/* =========================================================
   V8｜7 / 14 / 21 / 30 選角頁
   說明文字放大
========================================================= */

/* 上方階段說明：七日得錄…… */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-reveal-text] {
  font-size: 16px !important;
  line-height: 1.8 !important;

  color:
    rgba(224, 211, 191, .76)
    !important;

  letter-spacing: .06em !important;
}


/* 五人選擇框內的長說明 */
html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice-caption] {
  max-width: 800px !important;

  margin:
    8px auto 22px
    !important;

  font-size: 15px !important;
  line-height: 1.9 !important;

  color:
    rgba(220, 207, 188, .76)
    !important;

  letter-spacing: .035em !important;
}
/* =========================================================
   V8｜7 / 14 / 21 / 30 選角頁
   說明文字大幅放大
========================================================= */

/* 上方：七日得錄…… */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner
[data-sealed-reveal-text] {
  font-size: 20px !important;
  line-height: 1.75 !important;

  color: rgba(236, 224, 205, .86) !important;

  letter-spacing: .04em !important;

  font-weight: 400 !important;
}


/* 下方：藏景・壹／先選一位角色…… */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner
[data-sealed-character-choice-caption] {
  max-width: 860px !important;

  margin: 10px auto 24px !important;

  font-size: 18px !important;
  line-height: 1.85 !important;

  color: rgba(232, 220, 202, .84) !important;

  letter-spacing: .03em !important;

  font-weight: 400 !important;
}
/* =========================================================
   V8 FIX｜7/14/21/30
   點角色後切換成「局部預覽確認畫面」
========================================================= */


/* ---------------------------------------------------------
   01｜預覽出現時，整個彈窗稍微加高
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner:has(
  [data-sealed-character-preview]:not([hidden])
) {
  width: min(1120px, 82vw) !important;

  height: min(720px, 88vh) !important;

  overflow: hidden !important;
}


/* ---------------------------------------------------------
   02｜預覽出現後，五張角色卡先收起
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice]:has(
  [data-sealed-character-preview]:not([hidden])
)
.sealed-character-choice-grid {
  display: none !important;
}


/* ---------------------------------------------------------
   03｜預覽狀態下，選角框位置重新整理
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice]:has(
  [data-sealed-character-preview]:not([hidden])
) {
  top: 175px !important;

  width: min(900px, calc(100% - 80px)) !important;

  padding:
    24px
    34px
    30px
    !important;
}


/* ---------------------------------------------------------
   04｜預覽狀態下，原本長說明先隱藏
   不要跟預覽搶空間
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-choice]:has(
  [data-sealed-character-preview]:not([hidden])
)
[data-sealed-character-choice-caption] {
  display: none !important;
}


/* ---------------------------------------------------------
   05｜局部預覽主體
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
[data-sealed-character-preview]:not([hidden]) {
  display: block !important;

  width: min(720px, 92%) !important;

  margin:
    22px
    auto
    0
    !important;
}


/* ---------------------------------------------------------
   06｜局部預覽圖片框
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-window {
  position: relative !important;

  width: 100% !important;
  height: 270px !important;

  aspect-ratio: auto !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(205, 157, 96, .38)
    !important;

  background:
    rgba(4, 5, 8, .96)
    !important;

  box-shadow:
    inset 0 0 32px rgba(0, 0, 0, .58),
    0 18px 34px rgba(0, 0, 0, .24)
    !important;
}


/* ---------------------------------------------------------
   07｜局部預覽圖
   保留「隨機固定位置＋放大裁切」
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-image {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  object-fit: cover !important;

  object-position:
    var(--preview-x, 50%)
    var(--preview-y, 50%)
    !important;

  transform:
    scale(
      var(--preview-zoom, 1.75)
    )
    !important;

  transform-origin:
    var(--preview-x, 50%)
    var(--preview-y, 50%)
    !important;
}


/* ---------------------------------------------------------
   08｜預覽上的角色資訊放大
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-copy {
  left: 24px !important;
  bottom: 20px !important;

  gap: 5px !important;
}


html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-copy span {
  font-size: 10px !important;
}


html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-copy strong {
  font-size: 25px !important;
}


html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-copy em {
  font-size: 13px !important;
}


/* ---------------------------------------------------------
   09｜兩顆確認按鈕
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions {
  display: grid !important;

  grid-template-columns:
    1fr
    1fr
    !important;

  gap: 14px !important;

  margin-top: 16px !important;
}


html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions button {
  min-height: 52px !important;

  padding:
    12px
    18px
    !important;

  font-size: 15px !important;

  letter-spacing: .12em !important;
}
/* =========================================================
   V8 FIX｜局部預覽兩顆按鈕統一樣式
========================================================= */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions
button {
  appearance: none !important;
  -webkit-appearance: none !important;

  min-height: 54px !important;
  padding: 12px 18px !important;

  border: 1px solid rgba(196, 148, 90, .38) !important;

  background:
    linear-gradient(
      180deg,
      rgba(39, 23, 23, .86),
      rgba(12, 11, 14, .94)
    ) !important;

  color: rgba(240, 222, 196, .94) !important;

  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 400 !important;

  letter-spacing: .12em !important;

  box-shadow: none !important;

  cursor: pointer !important;
}


/* 跟我再想想：稍微低調，但仍然同系列 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions
[data-sealed-character-rethink] {
  background:
    linear-gradient(
      180deg,
      rgba(17, 17, 21, .92),
      rgba(7, 8, 11, .96)
    ) !important;

  color: rgba(218, 203, 182, .82) !important;
}


/* 確定收錄：主操作稍微偏暗紅 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions
[data-sealed-character-confirm] {
  background:
    linear-gradient(
      180deg,
      rgba(55, 28, 27, .92),
      rgba(22, 15, 17, .97)
    ) !important;

  color: rgba(247, 226, 197, .96) !important;
}


/* hover */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions
button:hover {
  border-color: rgba(224, 174, 106, .72) !important;

  box-shadow:
    0 0 18px rgba(139, 66, 48, .12)
    !important;
}
/* =========================================================
   V8 FIX｜局部預覽兩顆按鈕尺寸完全一致
========================================================= */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;

  align-items: stretch !important;
}


/* 左右兩顆全部統一 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions
button {
  width: 100% !important;

  min-width: 0 !important;
  max-width: none !important;

  height: 56px !important;
  min-height: 56px !important;
  max-height: 56px !important;

  margin: 0 !important;

  padding: 0 18px !important;

  box-sizing: border-box !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;

  transform: none !important;
}


/* 特別清掉舊「確認收錄」自己的 margin */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions
.sealed-character-choice-confirm {
  margin: 0 !important;

  min-width: 0 !important;

  height: 56px !important;
  min-height: 56px !important;
}


/* 跟我再想想也完全同規格 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-character-preview-actions
.sealed-character-rethink {
  margin: 0 !important;

  min-width: 0 !important;

  height: 56px !important;
  min-height: 56px !important;
}
/* =========================================================
   V8 FIX｜7 / 14 / 21 / 30
   確定收錄後｜完整 CG 正式版排版
   左：階段藏紋
   中：完整 CG
   右：家紋封條
========================================================= */


/* ---------------------------------------------------------
   01｜完整結果層不要再用舊三欄 grid
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden]) {
  position: absolute !important;

  inset: 0 !important;

  display: block !important;

  width: 100% !important;
  height: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}


/* ---------------------------------------------------------
   02｜PERSONAL RESPONSE 那整塊資料拿掉
   不要跟左側藏紋疊在一起
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden])
.sealed-phase-record {
  display: none !important;
}


/* ---------------------------------------------------------
   03｜附藏 CG 主區重新佔滿整個工作區
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden])
.sealed-reward {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
}


/* ---------------------------------------------------------
   04｜中央完整 CG 固定回正中央
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden])
.sealed-reward-stage {
  position: absolute !important;

  left: 50% !important;
  top: 58px !important;

  transform: translateX(-50%) !important;

  width: min(520px, 40vw) !important;

  height: calc(90vh - 150px) !important;
  max-height: 760px !important;

  margin: 0 !important;
}


/* ---------------------------------------------------------
   05｜左側階段藏紋固定位置
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden])
.sealed-phase-mark-stage {
  position: absolute !important;

  left: 80px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 190px !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 30 !important;
}


/* 左側藏紋本體 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden])
.sealed-phase-mark-stage
[data-sealed-phase-mark] {
  width: 150px !important;
  height: 150px !important;

  object-fit: contain !important;
}


/* ---------------------------------------------------------
   06｜右側家紋封條固定回右邊
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden])
.sealed-house-seal-stage {
  position: absolute !important;

  right: 52px !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 280px !important;
  height: auto !important;

  margin: 0 !important;

  z-index: 30 !important;
}


/* 家紋封條本體不要過大 */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden])
.sealed-house-seal-stage
[data-sealed-house-seal] {
  width: 235px !important;
  max-width: 235px !important;

  height: auto !important;
}


/* ---------------------------------------------------------
   07｜下載 CG 按鈕固定底部中央
--------------------------------------------------------- */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-milestone-grid:not([hidden])
.sealed-reward-download {
  left: 50% !important;
  bottom: 22px !important;

  transform: translateX(-50%) !important;

  margin: 0 !important;

  z-index: 50 !important;
}
/* =========================================================
   V8｜完整 CG 頁
   左右藏紋／封條文字放大
========================================================= */

/* 左上：ARCHIVE MARK */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-phase-mark-stage > span {
  font-size: 12px !important;
  letter-spacing: .24em !important;
  color: rgba(205, 164, 108, .72) !important;
}


/* 左下：初封藏紋已成立／深封藏紋已成立... */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-phase-mark-stage figcaption {
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: .08em !important;
  color: rgba(226, 210, 187, .72) !important;
}


/* 右上：HOUSE SEAL */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-house-seal-stage > span {
  font-size: 12px !important;
  letter-spacing: .24em !important;
  color: rgba(205, 164, 108, .72) !important;
}


/* 右下：九方氏封條／伊耆氏封條... */
html body
.sealed-reveal.sealed-milestone-reveal
.sealed-house-seal-stage > em {
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: .10em !important;
  color: rgba(226, 210, 187, .72) !important;
}
/* =========================================================
   私藏情書｜只保留信紙感，不要厚重 UI 框
========================================================= */

/* 最外層 */
.private-letter-viewer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 內層視窗框全部拿淡 */
.private-letter-viewer .modal-panel,
.private-letter-viewer .modal-frame,
.private-letter-viewer .doc-frame,
.private-letter-viewer .doc-panel,
.private-letter-viewer .archive-paper-viewer {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* 標題列保留，但輕量化 */
.private-letter-viewer .modal-header,
.private-letter-viewer .paper-viewer-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 12px 0 8px !important;
}

.private-letter-viewer .modal-title,
.private-letter-viewer .paper-viewer-title {
  font-size: 18px !important;
  letter-spacing: .08em !important;
  color: rgba(245, 235, 220, .95) !important;
}

/* 右上說明字縮成輔助資訊 */
.private-letter-viewer .modal-hint,
.private-letter-viewer .paper-viewer-hint {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  color: rgba(210, 185, 150, .7) !important;
}

/* 滾動區 */
.private-letter-viewer .modal-body,
.private-letter-viewer .paper-viewer-body {
  background: transparent !important;
  padding: 0 !important;
  overflow: auto !important;
}

/* 信紙舞台：置中、縮小 */
.private-letter-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 8px 0 32px;
}

/* 整張信本體大小 */
.private-letter-sheet {
  position: relative;
  width: min(820px, 72vw);
  max-width: 820px;
}

/* 背景信紙圖 */
.private-letter-sheet > img,
.private-letter-sheet .letter-base,
.private-letter-sheet .letter-art {
  display: block;
  width: 100%;
  height: auto;
}

/* 疊字層 */
.private-letter-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 稱呼 */
.private-letter-name {
  position: absolute;
  left: 23%;
  top: 22.5%;
  width: 42%;
  font-size: 32px;
  line-height: 1.2;
  color: rgba(86, 60, 44, .88);
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  letter-spacing: .06em;
}

/* 正文區 */
.private-letter-body {
  position: absolute;
  left: 23%;
  top: 31%;
  width: 48%;
  font-size: 20px;
  line-height: 2.08;
  color: rgba(86, 60, 44, .78);
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  white-space: pre-wrap;
  letter-spacing: .035em;
}

/* 屬名 */
.private-letter-sign {
  position: absolute;
  right: 18%;
  bottom: 19%;
  font-size: 28px;
  color: rgba(90, 65, 48, .82);
  font-family: "Ma Shan Zheng", "STKaiti", "KaiTi", serif;
  letter-spacing: .08em;
}

/* 日期 */
.private-letter-date {
  position: absolute;
  right: 17.5%;
  bottom: 12.5%;
  font-size: 15px;
  color: rgba(126, 102, 82, .66);
  letter-spacing: .05em;
}

/* 記錄 ID */
.private-letter-id {
  position: absolute;
  right: 16.8%;
  bottom: 8.3%;
  font-size: 13px;
  color: rgba(126, 102, 82, .48);
  letter-spacing: .08em;
}

/* 玩家照片格：確實卡在照片紙內 */
.private-letter-photo-slot {
  position: absolute;
  left: 11.4%;
  bottom: 9.8%;
  width: 18.2%;
  aspect-ratio: 3 / 4;
  transform: rotate(-8deg);
  overflow: hidden;
  border-radius: 2px;
  z-index: 3;
}

/* 照片真的填滿照片格 */
.private-letter-photo-slot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

/* 如果上傳的是預設剪影，也塞滿 */
.private-letter-photo-slot canvas,
.private-letter-photo-slot .fallback-photo {
  width: 100%;
  height: 100%;
  display: block;
}

/* 手寫效果顯示時比較自然 */
.private-letter-body .typed-char {
  opacity: 0;
  transform: translateY(2px);
  animation: letterFadeIn .28s ease forwards;
}

@keyframes letterFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 小螢幕微調 */
@media (max-width: 1280px) {
  .private-letter-sheet {
    width: min(880px, 84vw);
  }

  .private-letter-name {
    font-size: 28px;
  }

  .private-letter-body {
    font-size: 18px;
    line-height: 1.95;
  }

  .private-letter-sign {
    font-size: 24px;
  }
}
/* =========================================================
   FINAL FIX｜05 秘藏四階段按鈕點擊層
   一定放在 style.css 最底部
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-tier-list {
  position: absolute !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
}


/* 四顆初封／承封／深封／終封 */
#archives
[data-archive-content="sealed"]
.sealed-tier-list
.sealed-tier {
  position: relative !important;
  z-index: 10000 !important;

  pointer-events: auto !important;
  cursor: pointer !important;
}


/* =========================================================
   FIX｜30張封條全部可點
   用途：查看該日活動日期／解封狀態
========================================================= */

/* 封條容器本身不擋其他區塊 */
#archives
[data-archive-content="sealed"]
.sealed-strip-cloud {
  pointer-events: none !important;
}


/* 每一張封條本身恢復點擊 */
#archives
[data-archive-content="sealed"]
.sealed-strip-cloud
.sealed-day-paper {
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* =========================================================
   DAY30｜私藏情書預覽
   去框＋縮小
========================================================= */


/* 情書預覽整體 */
.sealed-preview-viewer.is-private-letter-preview {
  padding: 18px !important;
}


/* 外面大框完全移除 */
.sealed-preview-viewer.is-private-letter-preview
.sealed-preview-shell {
  position: relative !important;

  width:
    min(
      680px,
      72vw,
      68vh
    )
    !important;

  height: auto !important;

  max-width: none !important;
  max-height: 92vh !important;

  padding: 0 !important;

  border: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  display: block !important;
}


/* 上方「九方塵｜私藏情書」那整條拿掉 */
.sealed-preview-viewer.is-private-letter-preview
.sealed-preview-head {
  display: none !important;
}


/* 圖片外面的第二層框也拿掉 */
.sealed-preview-viewer.is-private-letter-preview
.sealed-preview-stage {
  width: 100% !important;

  max-height: 92vh !important;

  padding: 0 !important;

  overflow: auto !important;

  border: 0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  cursor: default !important;
}


/* 情書本體縮小 */
.sealed-preview-viewer.is-private-letter-preview
.sealed-preview-image {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;

  margin: 0 auto !important;

  box-shadow:
    none !important;
}


/* 關閉 X 留著，直接浮在右上 */
.sealed-preview-viewer.is-private-letter-preview
.sealed-preview-close {
  top: 8px !important;
  right: 8px !important;

  z-index: 20 !important;

  width: 40px !important;
  height: 40px !important;

  background:
    rgba(5, 5, 8, .78)
    !important;

  border:
    1px solid
    rgba(186, 145, 92, .38)
    !important;
}
/* =========================================================
   DAY30 私藏情書｜預覽放大
========================================================= */

.sealed-preview-viewer.is-private-letter-preview
.sealed-preview-shell {
  width: min(820px, 86vw, 76vh) !important;
  max-height: 96vh !important;
}

.sealed-preview-viewer.is-private-letter-preview
.sealed-preview-stage {
  max-height: 96vh !important;
}

.sealed-preview-viewer.is-private-letter-preview
.sealed-preview-image {
  width: 100% !important;
  height: auto !important;
}
/* =========================================================
   DAY30｜同心契預覽
   去除大框＋完整顯示整張
========================================================= */

.sealed-preview-viewer.is-union-contract-preview {
  padding: 10px !important;
}


/* 外層大框拿掉 */
.sealed-preview-viewer.is-union-contract-preview
.sealed-preview-shell {
  position: relative !important;

  width: min(
    760px,
    86vw,
    74vh
  ) !important;

  height: auto !important;

  max-width: none !important;
  max-height: 95vh !important;

  padding: 0 !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  display: block !important;
}


/* 上方「九方塵｜同心契」整條隱藏 */
.sealed-preview-viewer.is-union-contract-preview
.sealed-preview-head {
  display: none !important;
}


/* 圖片外第二層框拿掉 */
.sealed-preview-viewer.is-union-contract-preview
.sealed-preview-stage {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;

  padding: 0 !important;

  overflow: visible !important;

  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  cursor: default !important;
}


/* 完整同心契直接縮放進視窗 */
.sealed-preview-viewer.is-union-contract-preview
.sealed-preview-image {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;

  margin: 0 auto !important;

  box-shadow: none !important;
}


/* 關閉鈕浮在右上 */
.sealed-preview-viewer.is-union-contract-preview
.sealed-preview-close {
  position: absolute !important;

  top: 6px !important;
  right: 6px !important;

  z-index: 30 !important;

  width: 40px !important;
  height: 40px !important;

  background: rgba(5,5,8,.80) !important;

  border:
    1px solid
    rgba(186,145,92,.40)
    !important;
}
/* =========================================================
   FINAL FIX｜DAY 01 / 03 / 10 / 18 / 25
   中途收藏全部改成一頁式完整預覽
   注意：sealed-bonus-reveal 已被 JS 搬到 body
========================================================= */


/* 整個收藏視窗 */
body > .sealed-bonus-reveal
.sealed-bonus-shell {
  width: min(760px, 92vw) !important;

  max-height: 94vh !important;

  padding:
    22px
    28px
    26px
    !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
}


/* 上方標題不要佔太多高度 */
body > .sealed-bonus-reveal
.sealed-bonus-head {
  margin-bottom: 16px !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-head h3 {
  margin: 6px 0 !important;

  font-size: 28px !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-head p {
  font-size: 12px !important;
  line-height: 1.6 !important;
}


/* =========================================================
   結果區改成直式一頁
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-result {
  width: 100% !important;

  min-height: 0 !important;

  padding: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 9px !important;

  text-align: center !important;

  border: 0 !important;

  background:
    transparent
    !important;
}


/* =========================================================
   收藏圖區
   不再做巨大黑色工作框
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-art-stage {
  width: min(560px, 100%) !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  padding: 0 !important;
  margin: 0 auto !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;

  border: 0 !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;
}


/* =========================================================
   最重要
   1200×1500 Canvas 強制整張縮進畫面
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-canvas {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 66vh !important;

  margin: 0 auto !important;

  object-fit: contain !important;

  filter:
    drop-shadow(
      0 14px 30px
      rgba(0, 0, 0, .28)
    )
    !important;
}


/* 家紋不要太大 */
body > .sealed-bonus-reveal
.sealed-bonus-crest {
  width: 54px !important;
  height: 54px !important;

  margin: 2px auto !important;
}


/* 收藏名稱 */
body > .sealed-bonus-reveal
.sealed-bonus-result > strong {
  font-size: 23px !important;
  line-height: 1.45 !important;

  text-align: center !important;
}


/* 收藏說明 */
body > .sealed-bonus-reveal
.sealed-bonus-result > p {
  width: min(540px, 100%) !important;

  margin: 2px auto !important;

  font-size: 14px !important;
  line-height: 1.75 !important;

  text-align: center !important;
}


/* 編號 / 資料 */
body > .sealed-bonus-reveal
.sealed-bonus-result > em {
  margin: 0 auto !important;

  font-size: 10px !important;

  text-align: center !important;
}


/* 下載按鈕 */
body > .sealed-bonus-reveal
.sealed-bonus-download {
  margin:
    8px
    auto
    0
    !important;

  min-width: 190px !important;
}
/* =========================================================
   FINAL｜DAY 01 / 03 / 10 / 18 / 25
   一頁式收藏預覽
   入京帖 / 五家籤 / 夜巫京藏品 / 角色私箋 / 久居夜巫京
========================================================= */


/* 整個黑幕 */


/* =========================================================
   外層收藏視窗
   做成像妳圖三那種窄直式一頁
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-shell {
  position: relative !important;

  width: min(560px, 92vw) !important;

  height: auto !important;
  max-height: 94vh !important;

  padding:
    18px
    22px
    20px
    !important;

  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;

  border:
    1px solid
    rgba(190, 143, 88, .26)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(15, 12, 15, .98),
      rgba(6, 8, 11, .99)
    )
    !important;
}


/* =========================================================
   上方標題
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-head {
  flex: 0 0 auto !important;

  margin:
    0
    0
    10px
    !important;

  text-align: center !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-head > span {
  font-size: 8px !important;
  letter-spacing: .28em !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-head h3 {
  margin:
    5px
    0
    4px
    !important;

  font-size: 24px !important;
  line-height: 1.35 !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-head p {
  margin: 0 !important;

  font-size: 10px !important;
  line-height: 1.5 !important;
}


/* =========================================================
   整個收藏內容
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-result {
  flex: 1 1 auto !important;

  width: 100% !important;

  min-height: 0 !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: flex-start !important;

  gap: 7px !important;

  text-align: center !important;

  border: 0 !important;

  background:
    transparent
    !important;

  overflow: hidden !important;
}


/* =========================================================
   圖片區
   不要黑色大框
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-art-stage {
  flex: 0 1 auto !important;

  width: auto !important;
  max-width: 100% !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin:
    0
    auto
    2px
    !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  overflow: visible !important;
}


/* =========================================================
   1200×1500 收藏成品
   強制整張縮進一頁
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-canvas {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 430px !important;
  max-height: 51vh !important;

  margin: 0 auto !important;

  object-fit: contain !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  filter:
    drop-shadow(
      0 10px 20px
      rgba(0, 0, 0, .20)
    )
    !important;
}


/* =========================================================
   下方資訊
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-crest {
  width: 34px !important;
  height: 34px !important;

  margin:
    1px
    auto
    0
    !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-result > span {
  font-size: 8px !important;
  line-height: 1.3 !important;

  letter-spacing: .22em !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-result > strong {
  margin: 0 !important;

  font-size: 19px !important;
  line-height: 1.45 !important;

  text-align: center !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-result > p {
  width: min(470px, 100%) !important;

  margin:
    1px
    auto
    !important;

  font-size: 11px !important;
  line-height: 1.65 !important;

  text-align: center !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-result > em {
  margin: 0 auto !important;

  font-size: 8px !important;
  line-height: 1.4 !important;

  text-align: center !important;
}


/* =========================================================
   下載按鈕
   不要瀏覽器預設白色
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-download {
  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 210px !important;
  height: 40px !important;

  margin:
    5px
    auto
    0
    !important;

  padding:
    0
    22px
    !important;

  border:
    1px solid
    rgba(190, 139, 82, .46)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(48, 25, 25, .94),
      rgba(17, 12, 15, .98)
    )
    !important;

  color:
    rgba(236, 219, 195, .92)
    !important;

  font-family:
    "Noto Serif TC",
    serif
    !important;

  font-size: 12px !important;

  letter-spacing:
    .12em
    !important;

  cursor: pointer !important;

  box-shadow:
    inset 0 0 18px
    rgba(164, 82, 59, .04)
    !important;

  transition:
    .2s ease
    !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-download:hover {
  border-color:
    rgba(218, 164, 99, .74)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(65, 31, 28, .96),
      rgba(23, 14, 16, .98)
    )
    !important;

  color:
    rgba(255, 235, 204, .98)
    !important;

  transform:
    translateY(-1px)
    !important;
}


/* 關閉鈕稍微縮小 */
body > .sealed-bonus-reveal
.sealed-bonus-close {
  top: 10px !important;
  right: 10px !important;

  width: 34px !important;
  height: 34px !important;

  font-size: 22px !important;
}


/* =========================================================
   螢幕高度比較矮時，再自動縮一次
========================================================= */

@media (max-height: 760px) {

  body > .sealed-bonus-reveal
  .sealed-bonus-canvas {
    max-height: 43vh !important;
    max-width: 370px !important;
  }

  body > .sealed-bonus-reveal
  .sealed-bonus-head h3 {
    font-size: 21px !important;
  }

  body > .sealed-bonus-reveal
  .sealed-bonus-result > p {
    font-size: 10px !important;
  }
}
/* =========================================================
   FINAL FIX｜DAY 01 / 03 / 10 / 18 / 25
   02式橫向收藏詳情
   左：收藏成品
   右：標題／說明／資料／下載
========================================================= */


/* 整個黑幕｜六格收藏詳情背景 */
body > .sealed-bonus-reveal {
  padding: 28px !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;

  background:
    linear-gradient(
      180deg,
      rgba(2, 4, 8, .66),
rgba(2, 4, 8, .82)
    ),
    url("assets/images/archive/sealed/backgrounds/sealed-detail-bg.png")
    center center / cover
    no-repeat
    fixed
    !important;

  backdrop-filter:
    none !important;

  -webkit-backdrop-filter:
    none !important;
}

/* =========================================================
   外框｜改成橫式
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-shell {
  position: relative !important;

  width: min(1120px, 94vw) !important;
  height: auto !important;
  max-height: 90vh !important;

  padding: 34px 42px 36px !important;

  display: grid !important;

  grid-template-columns:
    minmax(350px, 440px)
    minmax(0, 1fr)
    !important;

  grid-template-areas:
  "art head"
  "art label"
  "art title"
  "art text"
  "art meta"
  "art action"
  !important;

  column-gap: 52px !important;
  row-gap: 10px !important;

  align-items: start !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(190, 143, 88, .28)
    !important;

  background:
    radial-gradient(
      circle at 78% 22%,
      rgba(92, 39, 35, .10),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      rgba(13, 12, 16, .99),
      rgba(5, 7, 10, .99)
    )
    !important;
}


/* =========================================================
   右上標題區
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-head {
  grid-area: head !important;

  width: 100% !important;

  margin:
    24px
    0
    20px
    !important;

  padding-bottom: 20px !important;

  text-align: center !important;

  border-bottom:
    1px solid
    rgba(190, 143, 88, .20)
    !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-head > span {
  color:
    rgba(191, 139, 80, .82)
    !important;

  font-size: 12px !important;

  letter-spacing:
    .25em
    !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-head h3 {
  margin:
    10px
    0
    8px
    !important;

  color:
    rgba(244, 228, 203, .98)
    !important;

  font-size: 38px !important;

  font-weight:
    400
    !important;

  line-height:
    1.3
    !important;

  letter-spacing:
    .10em
    !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-head p {
  margin: 0 !important;

  color:
    rgba(216, 205, 188, .78)
    !important;

  font-size: 19px !important;

  line-height:
    1.8
    !important;

  letter-spacing:
    .04em
    !important;
}


/* =========================================================
   result 本身不要再形成第三層大框
   讓它的子元素直接進入 shell grid
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-result {
  display: contents !important;
}


/* =========================================================
   左側收藏圖
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-art-stage {
  grid-area: art !important;

  width: 100% !important;
  height: 72vh !important;

  max-height: 680px !important;
  min-height: 520px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  overflow: hidden !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-canvas {
  display: block !important;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 100% !important;

  margin: 0 auto !important;

  object-fit: contain !important;

  background:
    transparent
    !important;

  box-shadow:
    none
    !important;

  filter:
    drop-shadow(
      0 18px 30px
      rgba(0, 0, 0, .28)
    )
    !important;
}


/* =========================================================
   右側家紋
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-crest {
  display: none !important;
}


/* =========================================================
   右側資料
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-result > span {
  grid-area: label !important;

  display: block !important;

  color:
    rgba(192, 143, 84, .78)
    !important;

  font-size: 11px !important;

  line-height:
    1.5
    !important;

  letter-spacing:
    .23em
    !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-result > strong {
  grid-area: title !important;

  display: block !important;

  color:
    rgba(245, 228, 202, .98)
    !important;

  font-size: 32px !important;

  font-weight:
    400
    !important;

  line-height:
    1.45
    !important;

  letter-spacing:
    .07em
    !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-result > p {
  grid-area: text !important;

  display: block !important;

  width: 100% !important;

  margin:
    8px
    0
    0
    !important;

  color:
    rgba(224, 213, 196, .86)
    !important;

  font-size: 21px !important;

  line-height:
    1.9
    !important;

  letter-spacing:
    .035em
    !important;

  text-align: center !important;
}

body > .sealed-bonus-reveal
.sealed-bonus-result > em {
  grid-area: meta !important;

  display: block !important;

  margin-top:
    10px
    !important;

  color:
    rgba(193, 148, 92, .72)
    !important;

  font-size: 11px !important;

  font-style:
    normal
    !important;

  line-height:
    1.7
    !important;

  letter-spacing:
    .11em
    !important;
}


/* =========================================================
   下載按鈕
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-download {
  grid-area: action !important;

  display: inline-flex !important;

  align-items: center !important;
  justify-content: center !important;

  justify-self: start !important;

  min-width: 220px !important;
  height: 44px !important;

  margin-top:
    18px
    !important;

  padding:
    0
    24px
    !important;

  border:
    1px solid
    rgba(207, 158, 98, .52)
    !important;

  background:
    linear-gradient(
      180deg,
      rgba(57, 27, 26, .94),
      rgba(17, 12, 15, .98)
    )
    !important;

  color:
    rgba(244, 226, 198, .96)
    !important;

  font-family:
    "Noto Serif TC",
    serif
    !important;

  font-size: 14px !important;

  letter-spacing:
    .12em
    !important;

  cursor: pointer !important;
}


body > .sealed-bonus-reveal
.sealed-bonus-download:hover {
  transform:
    translateY(-2px)
    !important;

  border-color:
    rgba(230, 181, 116, .82)
    !important;
}


/* =========================================================
   DAY18 尚未選角時
========================================================= */

body > .sealed-bonus-reveal
.sealed-bonus-character-choice {
  grid-column:
    1 / -1
    !important;

  width: 100% !important;
}


/* 關閉 */
body > .sealed-bonus-reveal
.sealed-bonus-close {
  top: 14px !important;
  right: 14px !important;

  width: 38px !important;
  height: 38px !important;

  font-size: 24px !important;
}


/* =========================================================
   窄視窗才回直式
========================================================= */

@media (max-width: 900px) {

  body > .sealed-bonus-reveal
  .sealed-bonus-shell {
    width: min(620px, 94vw) !important;

    max-height: 94vh !important;

    padding:
      24px
      26px
      30px
      !important;

    display: flex !important;
    flex-direction: column !important;

    overflow-y: auto !important;
  }


  body > .sealed-bonus-reveal
  .sealed-bonus-result {
    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;

    gap: 10px !important;

    text-align: center !important;
  }


  body > .sealed-bonus-reveal
  .sealed-bonus-head {
    order: 0 !important;

    text-align: center !important;

    margin:
      0
      0
      16px
      !important;
  }


  body > .sealed-bonus-reveal
  .sealed-bonus-art-stage {
    order: 1 !important;

    width: 100% !important;
    height: 56vh !important;

    min-height: 400px !important;
  }


  body > .sealed-bonus-reveal
  .sealed-bonus-crest {
    justify-self: center !important;
  }


  body > .sealed-bonus-reveal
  .sealed-bonus-result > p {
    text-align: center !important;
  }


  body > .sealed-bonus-reveal
  .sealed-bonus-download {
    justify-self: center !important;
  }
}
/* =========================================================
   FIX｜7 / 14 / 21 / 30
   已完成收錄後，隱藏上方階段說明
   避免文字從 CG 框左右露出
========================================================= */

html body
.sealed-reveal.sealed-milestone-reveal
.sealed-reveal-inner:has(
  .sealed-milestone-grid:not([hidden])
)
[data-sealed-reveal-text] {
  display:
    none !important;
}
/* =========================================================
   DAY30｜終封私藏獨立入口
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-gift-summary-actions
[data-sealed-settlement-open][hidden] {
  display: none !important;
}


#archives
[data-archive-content="sealed"]
.sealed-gift-summary-actions
[data-sealed-settlement-open] {
  width: 100% !important;
  min-height: 34px !important;

  margin-top: 8px !important;
  padding: 7px 12px !important;

  border:
    1px solid
    rgba(198,150,93,.38) !important;

  background:
    linear-gradient(
      135deg,
      rgba(72,33,30,.48),
      rgba(17,13,16,.78)
    ) !important;

  color:
    rgba(242,224,197,.94) !important;

  font-size: 11px !important;
  letter-spacing: .12em !important;

  cursor: pointer !important;
}


/* =========================================================
   DAY30｜最終私藏角色選擇
========================================================= */

html body
.sealed-final-character-choice[hidden] {
  display: none !important;
}


html body
.sealed-final-character-choice {
  margin:
    0 0 22px !important;

  padding:
    22px 24px !important;

  border:
    1px solid
    rgba(190,142,87,.28) !important;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(112,48,41,.12),
      transparent 55%
    ),
    rgba(6,8,12,.70) !important;

  text-align:
    center !important;
}


html body
.sealed-final-character-choice > span {
  color:
    rgba(192,143,84,.72) !important;

  font-size:
    9px !important;

  letter-spacing:
    .22em !important;
}


html body
.sealed-final-character-choice h4 {
  margin:
    9px 0 10px !important;

  color:
    rgba(244,228,202,.96) !important;

  font-size:
    22px !important;

  font-weight:
    400 !important;

  letter-spacing:
    .12em !important;
}


html body
.sealed-final-character-choice p {
  margin:
    0 auto 18px !important;

  max-width:
    680px !important;

  color:
    rgba(216,205,189,.70) !important;

  font-size:
    13px !important;

  line-height:
    1.85 !important;
}


html body
.sealed-final-character-options {
  display:
    grid !important;

  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    ) !important;

  gap:
    8px !important;
}


html body
.sealed-final-character-options button,
html body
.sealed-final-character-confirm {
  min-height:
    40px !important;

  border:
    1px solid
    rgba(190,142,87,.30) !important;

  background:
    rgba(18,13,16,.86) !important;

  color:
    rgba(232,216,193,.86) !important;

  font-family:
    inherit !important;

  font-size:
    12px !important;

  cursor:
    pointer !important;
}


html body
.sealed-final-character-options button:hover,
html body
.sealed-final-character-options button.is-selected {
  border-color:
    rgba(222,169,101,.72) !important;

  background:
    rgba(75,34,30,.62) !important;

  color:
    rgba(255,236,204,.98) !important;
}


html body
.sealed-final-character-confirm {
  width:
    min(300px, 100%) !important;

  margin-top:
    16px !important;
}


html body
.sealed-final-character-confirm:disabled {
  opacity:
    .34 !important;

  cursor:
    default !important;
}


@media (max-width: 760px) {

  html body
  .sealed-final-character-options {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      ) !important;
  }

}
/* =========================================================
   FIX｜中央終封未到日期仍可點擊查看提示
========================================================= */

#archives
[data-archive-content="sealed"]
.sealed-vault-core.is-final-locked {
  pointer-events: auto !important;
  cursor: pointer !important;
}


/* =========================================================
   中央終封｜未開放提示
========================================================= */

.sealed-core-notice {
  position: fixed;

  left: 50%;
  top: 50%;

  z-index: 9999999;

  width:
    min(420px, calc(100vw - 40px));

  padding:
    26px 30px 24px;

  border:
    1px solid
    rgba(194,145,87,.38);

  background:
    linear-gradient(
      145deg,
      rgba(17,12,15,.97),
      rgba(8,9,13,.98)
    );

  box-shadow:
    0 28px 80px
    rgba(0,0,0,.55),
    0 0 40px
    rgba(126,49,39,.10);

  text-align:
    center;

  opacity: 0;

  pointer-events: none;

  transform:
    translate(-50%, -46%)
    scale(.97);

  transition:
    opacity .22s ease,
    transform .22s ease;
}


.sealed-core-notice.is-visible {
  opacity: 1;

  transform:
    translate(-50%, -50%)
    scale(1);
}


.sealed-core-notice > span {
  display: block;

  margin-bottom: 10px;

  color:
    rgba(187,137,81,.72);

  font-size:
    9px;

  letter-spacing:
    .24em;
}


.sealed-core-notice > strong {
  display: block;

  color:
    rgba(244,228,202,.96);

  font-size:
    22px;

  font-weight: 400;

  letter-spacing:
    .10em;
}


.sealed-core-notice > p {
  margin:
    12px 0 0;

  color:
    rgba(215,201,181,.72);

  font-size:
    13px;

  line-height:
    1.8;

  letter-spacing:
    .05em;
}