<div class="raw-html-embed">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>博悅 Online｜黑盒密碼・序號加次活動</title>

<style>
  :root {
    color-scheme: dark;
    --gold: #f3cf84;
    --cream: #fff4dd;
    --muted: #d8c9e5;
    --line: #e3b96c44;
    font-family: system-ui, "Microsoft JhengHei", sans-serif;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    color: var(--cream);
    background: radial-gradient(
      ellipse at 50% 0,
      #4b2369,
      transparent 46rem
    ), #13091e;
  }

  main {
    width: min(56rem, calc(100% - 2rem));
    margin: clamp(1rem, 5vw, 3rem) auto;
  }

  .hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 1rem 1.2rem clamp(1.7rem, 5vw, 2.75rem);
    border: 1px solid var(--line);
    border-radius: 1.25rem;
    background:
      radial-gradient(
        ellipse at 50% 18%,
        #63358088,
        transparent 68%
      ),
      linear-gradient(160deg, #301744, #1b0d2d 76%);
    box-shadow: 0 1.2rem 4rem #0006;
  }

  .hero::before,
  .hero::after {
    content: "";
    position: absolute;
    top: 1rem;
    width: 2rem;
    height: 2rem;
    border-top: 1px solid #e7b76488;
    pointer-events: none;
  }

  .hero::before {
    left: 1rem;
    border-left: 1px solid #e7b76488;
  }

  .hero::after {
    right: 1rem;
    border-right: 1px solid #e7b76488;
  }

  .kicker {
    margin: .7rem 0;
    color: var(--gold);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .2em;
  }

  h1 {
    margin: .15rem 0 .6rem;
    color: #ffe2a5;
    font: 800 clamp(2.6rem, 9vw, 5.3rem)/1.05
      "Noto Serif TC", "PMingLiU", serif;
    letter-spacing: .08em;
    text-shadow:
      0 .12rem 0 #886043,
      0 0 2rem #c7836670;
  }

  .period {
    display: inline-block;
    margin: .25rem 0 0;
    padding: .3rem .85rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #160a2470;
    color: var(--gold);
    font-size: .87rem;
    font-weight: 700;
  }

  .lead {
    margin: .9rem auto;
    color: var(--muted);
    line-height: 1.7;
  }

  .stats {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
    max-width: 33rem;
    margin: 1.3rem auto 1.4rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: #160a24a0;
  }

  .stat {
    padding: .75rem .2rem;
  }

  .stat + .stat {
    border-left: 1px solid var(--line);
  }

  .stat strong,
  .stat span {
    display: block;
  }

  .stat strong {
    color: var(--gold);
    font-size: clamp(.92rem, 3.2vw, 1.35rem);
  }

  .stat span {
    margin-top: .25rem;
    color: var(--muted);
    font-size: .75rem;
  }

  .cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 3.2rem;
    padding: .7rem 2.2rem;
    border-radius: .7rem;
    background: linear-gradient(
      115deg,
      #fff1bf,
      #edc16e 65%,
      #d39c51
    );
    color: #241332;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 .4rem 1.4rem #dda85835;
  }

  .cta:hover {
    background: #ffdf95;
  }

  .cta:focus-visible {
    outline: 2px solid #fff0c1;
    outline-offset: 4px;
  }

  /* 新增：APP 瀏覽器開啟提醒 */
  .cta-note {
    margin: .7rem auto 0;
    color: #f3cf84;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.7;
    text-align: center;
    letter-spacing: .02em;
  }

  .details {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: .8rem;
    margin-top: .8rem;
  }

  .panel {
    padding: 1rem 1.25rem;
    border: 1px solid var(--line);
    border-radius: 1rem;
    background: #251437;
  }

  h2 {
    margin: .1rem 0 .65rem;
    color: var(--gold);
    font-size: 1.1rem;
  }

  ol, p {
    line-height: 1.65;
  }

  ol {
    margin: 0;
    padding-left: 1.35rem;
  }

  li + li {
    margin-top: .35rem;
  }

  .panel p {
    margin: 0;
  }

  .panel p + p {
    margin-top: .55rem;
    color: var(--muted);
    font-size: .9rem;
  }

  .panel-prize { grid-column: 1 / -1; }

  footer {
    margin-top: .85rem;
    color: var(--muted);
    text-align: center;
    font-size: .82rem;
  }

  @media (max-width: 38rem) {
    .details {
      grid-template-columns: 1fr;
    }

    .cta {
      width: min(100%, 22rem);
    }

    .cta-note {
      max-width: 22rem;
      font-size: .75rem;
    }
  }

  /* 紫金光影：不影響文字閱讀與按鈕操作。 */
  .hero {
    isolation: isolate;
    --light-x: 50%;
    --light-y: 32%;
    animation: blackbox-enter .85s ease-out both;
  }

  .hero > :not(.hero-fx) { position: relative; z-index: 1; }
  .hero::before, .hero::after {
    z-index: 2;
    animation: blackbox-corner 4s ease-in-out infinite alternate;
  }

  .hero-fx {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
  }

  .hero-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(20rem circle at var(--light-x) var(--light-y), #ffdf9d24, transparent 70%);
  }

  .aurora {
    position: absolute;
    width: 78%;
    height: 78%;
    border-radius: 50%;
    filter: blur(3rem);
    opacity: .5;
    animation: blackbox-aurora 13s ease-in-out infinite alternate;
  }

  .aurora-purple {
    top: -30%;
    left: -22%;
    background: radial-gradient(ellipse, #9d5ada90, transparent 70%);
  }

  .aurora-gold {
    right: -30%;
    bottom: -40%;
    background: radial-gradient(ellipse, #dca55e65, transparent 70%);
    animation-delay: -7s;
    animation-direction: alternate-reverse;
  }

  .light-particle {
    position: absolute;
    width: .24rem;
    height: .24rem;
    border-radius: 50%;
    background: #ffe1a2;
    box-shadow: 0 0 .7rem #f4c476aa;
    opacity: .18;
    animation: blackbox-twinkle 4.5s ease-in-out infinite;
  }

  .light-particle:nth-of-type(1) { left: 9%; top: 24%; animation-delay: -.4s; }
  .light-particle:nth-of-type(2) { left: 21%; top: 65%; animation-delay: -2s; }
  .light-particle:nth-of-type(3) { left: 37%; top: 11%; animation-delay: -3.2s; }
  .light-particle:nth-of-type(4) { left: 61%; top: 18%; animation-delay: -1.1s; }
  .light-particle:nth-of-type(5) { left: 84%; top: 34%; animation-delay: -2.7s; }
  .light-particle:nth-of-type(6) { left: 92%; top: 76%; animation-delay: -3.8s; }
  .light-particle:nth-of-type(7) { left: 72%; top: 87%; animation-delay: -.8s; }
  .light-particle:nth-of-type(8) { left: 12%; top: 89%; animation-delay: -1.6s; }

  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero h1 {
      background: linear-gradient(110deg, #eab964 15%, #ffe4a9 38%, #fff8e5 48%, #ffe4a9 58%, #eab964 85%);
      background-size: 220% auto;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 1.4rem #e4aa6338;
      animation: blackbox-title 9s ease-in-out infinite;
    }
  }

  .stat { transition: background .25s ease, box-shadow .25s ease; }
  .stat:first-child { border-radius: .85rem 0 0 .85rem; }
  .stat:last-child { border-radius: 0 .85rem .85rem 0; }
  .stat:hover { background: #f3cf8410; box-shadow: inset 0 0 1.8rem #f3cf8408; }

  .cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  }

  .cta::before {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -55%;
    width: 35%;
    background: linear-gradient(90deg, transparent, #fff9, transparent);
    transform: skewX(-20deg);
    animation: blackbox-sweep 5.5s ease-in-out infinite;
    pointer-events: none;
  }

  .cta:hover, .cta:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 .6rem 2rem #dda85860, 0 0 0 1px #ffe4a966;
  }

  .cta:active { transform: translateY(0) scale(.985); }

  .cta-ripple {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff9;
    pointer-events: none;
    animation: blackbox-ripple .7s ease-out forwards;
  }

  .panel {
    position: relative;
    overflow: hidden;
    --light-x: 50%;
    --light-y: 50%;
    transition: border-color .3s ease, box-shadow .3s ease;
    animation: blackbox-enter .85s .12s ease-out both;
  }

  .panel + .panel { animation-delay: .22s; }
  .panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(15rem circle at var(--light-x) var(--light-y), #f3cf8418, transparent 75%);
    opacity: 0;
    transition: opacity .3s ease;
  }

  .panel:hover { border-color: #edc27a88; box-shadow: 0 .5rem 1.5rem #0003; }
  .panel:hover::before { opacity: 1; }

  @keyframes blackbox-enter {
    from { opacity: 0; transform: translateY(.65rem); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes blackbox-aurora {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(18%, 15%, 0) scale(1.15); }
  }
  @keyframes blackbox-twinkle {
    0%, 100% { opacity: .15; transform: translateY(0) scale(.7); }
    50% { opacity: .8; transform: translateY(-.5rem) scale(1.15); }
  }
  @keyframes blackbox-corner {
    from { opacity: .45; filter: drop-shadow(0 0 0 #e7b76400); }
    to { opacity: 1; filter: drop-shadow(0 0 .3rem #e7b76499); }
  }
  @keyframes blackbox-title {
    0%, 100% { background-position: 100% center; }
    50% { background-position: 0% center; }
  }
  @keyframes blackbox-sweep {
    0%, 65% { left: -55%; opacity: 0; }
    70% { opacity: .7; }
    88%, 100% { left: 125%; opacity: 0; }
  }
  @keyframes blackbox-ripple {
    from { transform: translate(-50%, -50%) scale(0); opacity: .6; }
    to { transform: translate(-50%, -50%) scale(24); opacity: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    [data-blackbox-announcement] *,
    [data-blackbox-announcement] *::before,
    [data-blackbox-announcement] *::after {
      animation: none !important;
      transition: none !important;
    }
    .cta-ripple { display: none; }
    .cta:hover, .cta:focus-visible, .cta:active { transform: none; }
  }
</style>

<main data-blackbox-announcement="">
  <header class="hero">
    <div class="hero-fx" aria-hidden="true">
      <span class="aurora aurora-purple"></span>
      <span class="aurora aurora-gold"></span>
      <i class="light-particle"></i><i class="light-particle"></i>
      <i class="light-particle"></i><i class="light-particle"></i>
      <i class="light-particle"></i><i class="light-particle"></i>
      <i class="light-particle"></i><i class="light-particle"></i>
    </div>


    <p class="kicker">每日免費挑戰・序號加開機會</p>

    <h1>黑盒密碼</h1>

    <p class="period">
      活動期間
      <time datetime="2026-11-12">11/12</time>～
      <time datetime="2026-11-18">11/15</time>
      （台灣時間）
    </p>

    <p class="lead">
      跟著提示縮小範圍，猜中你的專屬密碼，解鎖兌換碼。
    </p>

    <div class="stats">
      <div class="stat">
        <strong>0–500</strong>
        <span>密碼範圍</span>
      </div>

      <div class="stat">
        <strong>3 次</strong>
        <span>每日免費機會</span>
      </div>

      <div class="stat">
        <strong>8 次</strong>
        <span>每日最多機會</span>
      </div>
    </div>

    <a class="cta" href="https://supreme-club-blackbox.pages.dev/" target="_blank" rel="noopener noreferrer">
      立即挑戰 ↗
    </a>

    
    <p class="cta-note">
      📌 APP 內開啟請長按按鈕，選擇「使用瀏覽器開啟」
    </p>

  </header>

  <div class="details">

    <section class="panel" aria-labelledby="rules">
      <h2 id="rules">挑戰方式</h2>
      <ol>
        <li>填寫正確的博悅 Online 遊戲暱稱。</li>
        <li>每天享有 3 次免費猜號碼機會。</li>
        <li>直接輸入 0～500 的整數，不需補零；依提示縮小範圍，超出提示範圍不扣次數。</li>
      </ol>
    </section>

    <section class="panel" aria-labelledby="serial">
      <h2 id="serial">序號加開機會</h2>
      <ol>
        <li>透過WEB館任意金額儲值，可獲得 1 張活動序號。</li>
        <li>在黑盒密碼輸入序號，每張可增加 1 次猜號碼機會。</li>
        <li>每日最多可獲得 5 張序號，搭配免費機會，當日合計最多挑戰 8 次。</li>
      </ol>
    </section>

    <section class="panel panel-prize" aria-labelledby="prize">
      <h2 id="prize">領獎方式</h2>

      <p>
        成功解鎖密碼即可獲得獎勵兌換碼。點擊「前往博悅 Online 兌換」會自動帶入該組兌換碼，
        也可使用「複製兌換碼」自行兌換。
      </p>

      <p>
        使用兌換碼時，當日有任意金額的儲值紀錄即可立即領取。
      </p>
    </section>

  </div>

  <footer>
    每日台灣時間 00:00 重置密碼與挑戰次數
  </footer>
</main>

<script>
  (() => {
    const root = document.querySelector("[data-blackbox-announcement]");
    if (!root) return;
    const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)");

    root.querySelectorAll(".hero, .panel").forEach((card) => {
      let frame = 0;
      let x = 50;
      let y = 50;
      card.addEventListener("pointermove", (event) => {
        if (reducedMotion.matches || event.pointerType === "touch") return;
        const rect = card.getBoundingClientRect();
        if (!rect.width || !rect.height) return;
        x = Math.max(0, Math.min(100, (event.clientX - rect.left) / rect.width * 100));
        y = Math.max(0, Math.min(100, (event.clientY - rect.top) / rect.height * 100));
        if (frame) return;
        frame = requestAnimationFrame(() => {
          card.style.setProperty("--light-x", x + "%");
          card.style.setProperty("--light-y", y + "%");
          frame = 0;
        });
      });
      card.addEventListener("pointerleave", () => {
        cancelAnimationFrame(frame);
        frame = 0;
        card.style.removeProperty("--light-x");
        card.style.removeProperty("--light-y");
      });
    });

    const cta = root.querySelector(".cta");
    if (!cta) return;
    cta.addEventListener("pointerdown", (event) => {
      if (reducedMotion.matches) return;
      const rect = cta.getBoundingClientRect();
      const ripple = document.createElement("span");
      ripple.className = "cta-ripple";
      ripple.setAttribute("aria-hidden", "true");
      ripple.style.left = (event.clientX - rect.left) + "px";
      ripple.style.top = (event.clientY - rect.top) + "px";
      cta.append(ripple);
      setTimeout(() => ripple.remove(), 800);
    });
  })();
</script>
</div>

博悅

聖誕黑盒密碼大挑戰