/* ===== 爆旋陀螺道館徽章賽 — DARK RED + NAVY theme ===== */
    :root {
      --by-red: #b1121f;
      --by-red-deep: #6e0a13;
      --by-navy: #0f2456;
      --by-gold: #FBAB18;
    }
    .by-hero {
      position: relative; overflow: hidden; color: #fff;
      padding: 88px 48px 80px; text-align: center;
      background:
        radial-gradient(circle at 18% 20%, rgba(177,18,31,.55), transparent 45%),
        radial-gradient(circle at 82% 80%, rgba(15,36,86,.65), transparent 50%),
        linear-gradient(135deg, var(--by-red-deep) 0%, var(--by-navy) 100%);
    }
    .by-hero::before {
      content: "🌀"; position: absolute; font-size: 320px; opacity: .07;
      top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none;
    }
    .by-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
    .by-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--by-gold); color: var(--dark); font-weight: 800;
      padding: 7px 18px; border-radius: 20px; font-size: 13px; margin-bottom: 22px;
      letter-spacing: 1px;
    }
    .by-hero h1 { font-size: 52px; font-weight: 800; line-height: 1.12; margin-bottom: 18px; }
    .by-hero h1 span { color: var(--by-gold); }
    .by-hero p { font-size: 17px; color: rgba(255,255,255,.88); line-height: 1.7; margin: 0 auto 32px; max-width: 600px; }
    .by-hero .hero-buttons { justify-content: center; }
    .btn-red {
      background: linear-gradient(90deg, var(--by-red), #e02437); color: #fff;
      border: none; border-radius: 8px; font-weight: 800; cursor: pointer;
      font-family: var(--mk-font); font-size: 15px; padding: 14px 32px;
      transition: transform .2s, opacity .2s;
      box-shadow: 0 10px 28px rgba(177,18,31,.45);
    }
    .btn-red:hover { transform: translateY(-2px); opacity: .94; }

    /* dark red / navy section overrides */
    .by-section-dark {
      background:
        radial-gradient(circle at 85% 0%, rgba(177,18,31,.30), transparent 45%),
        linear-gradient(135deg, var(--by-navy) 0%, #0a1838 100%);
      color: #fff;
    }
    .by-section-dark .section-header h2 { color: #fff; }
    .by-section-dark .section-header p { color: rgba(255,255,255,.72); }
    .by-section-red {
      background: linear-gradient(135deg, var(--by-red-deep) 0%, var(--by-red) 100%);
      color: #fff;
    }
    .by-section-red .section-header h2 { color: #fff; }
    .by-section-red .section-header p { color: rgba(255,255,255,.82); }

    .by-tag { background: var(--by-red); color: #fff; }

    /* format / rule cards */
    .by-rule-card {
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
      border-radius: var(--radius); padding: 28px 24px; text-align: center;
    }
    .by-rule-icon { font-size: 44px; margin-bottom: 14px; }
    .by-rule-card h3 { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 10px; }
    .by-rule-card p { font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.7; }

    /* difficulty pills */
    .by-diff-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
    .by-diff {
      display: inline-flex; align-items: center; gap: 5px;
      background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
      color: #fff; padding: 5px 12px; border-radius: 16px; font-size: 12px; font-weight: 700;
    }

    /* prize cards */
    .by-prize {
      background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
      border-radius: var(--radius); padding: 30px 22px; text-align: center;
      position: relative;
    }
    .by-prize.gold { background: linear-gradient(160deg, rgba(251,171,24,.28), rgba(255,255,255,.06)); border-color: var(--by-gold); }
    .by-prize-icon { font-size: 50px; margin-bottom: 12px; }
    .by-prize h3 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; }
    .by-prize .by-prize-amt { font-size: 26px; font-weight: 800; color: var(--by-gold); margin-bottom: 6px; }
    .by-prize ul { list-style: none; margin-top: 12px; text-align: left; display: inline-block; }
    .by-prize li { font-size: 13px; color: rgba(255,255,255,.85); margin-bottom: 7px; padding-left: 20px; position: relative; }
    .by-prize li::before { content: "✦"; position: absolute; left: 0; color: var(--by-gold); }

    /* leaderboard */
    .by-board { max-width: 720px; margin: 0 auto; background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius); overflow: hidden; }
    .by-board table { width: 100%; border-collapse: collapse; }
    .by-board th, .by-board td { padding: 13px 18px; text-align: left; font-size: 14px; }
    .by-board th { background: rgba(0,0,0,.25); color: var(--by-gold); font-weight: 800; font-size: 13px; letter-spacing: .5px; }
    .by-board td { color: rgba(255,255,255,.9); border-top: 1px solid rgba(255,255,255,.1); }
    .by-board tr:hover td { background: rgba(255,255,255,.05); }
    .by-rank { font-weight: 800; color: #fff; }
    .by-rank.top { color: var(--by-gold); font-size: 17px; }
    .by-pts { font-weight: 800; color: var(--by-gold); }

    /* upcoming competition cards keep .mk-card look but tinted cover */
    .cover-beyblade { background: linear-gradient(135deg, var(--by-red-deep), var(--by-navy)); }

    .by-cta-wrap { text-align: center; }

    /* ===== 團購 GROUPON ===== */
    .by-grp-card { background:#fff; border:1px solid #e6e9f0; border-radius:var(--radius); padding:26px 24px; box-shadow:var(--shadow); display:flex; flex-direction:column; text-align:left; }
    .by-grp-card.featured { border:2px solid var(--by-red); }
    .by-grp-top { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
    .by-grp-top h3 { font-size:18px; font-weight:800; color:var(--by-navy); margin:0; }
    .by-grp-flag { padding:4px 12px; border-radius:16px; font-size:12px; font-weight:800; color:#fff; white-space:nowrap; }
    .by-grp-flag.hot { background:var(--by-red); }
    .by-grp-flag.new { background:#0a9396; }
    .by-grp-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; margin:4px 0; }
    .by-grp-now { font-size:28px; font-weight:800; color:var(--by-red); }
    .by-grp-old { font-size:15px; color:#999; text-decoration:line-through; }
    .by-grp-off { background:var(--by-gold); color:var(--dark); padding:2px 8px; border-radius:6px; font-size:12px; font-weight:800; }
    .by-grp-unit { font-size:13px; color:#667085; margin:6px 0 14px; }
    .by-grp-prog { margin:12px 0; }
    .by-grp-prog .lbl { display:flex; justify-content:space-between; font-size:13px; margin-bottom:6px; }
    .by-grp-prog .lbl .left { color:#667085; }
    .by-grp-prog .lbl .right { color:var(--by-red); font-weight:800; }
    .by-grp-track { background:#eef0f4; height:10px; border-radius:6px; overflow:hidden; }
    .by-grp-fill { height:100%; background:linear-gradient(90deg,var(--by-red),#e02437); border-radius:6px; }
    .by-grp-fill.full { background:#1f9d55; }
    .by-grp-meta { background:#f7f8fb; border-radius:10px; padding:12px 14px; margin:12px 0; font-size:13px; color:#667085; line-height:1.7; }
    .by-grp-meta strong { color:var(--by-red); }
    .by-grp-actions { display:flex; gap:10px; margin-top:auto; }
    .by-grp-ghost { background:#fff; color:var(--by-navy); border:2px solid var(--by-navy); border-radius:8px; font-weight:800; font-size:14px; padding:11px 18px; cursor:pointer; font-family:var(--mk-font); transition:background .2s,color .2s; white-space:nowrap; }
    .by-grp-ghost:hover { background:var(--by-navy); color:#fff; }
    .by-grp-success { background:#eafaf0; border-left:4px solid #1f9d55; border-radius:10px; padding:12px 14px; margin:12px 0; }
    .by-grp-success p { margin:0; font-size:13px; color:#15694a; }
    .by-grp-success p.t { font-weight:800; margin-bottom:4px; }
    .by-grp-closed { width:100%; background:#e9ecef; color:#999; border:none; border-radius:8px; font-weight:800; padding:12px; cursor:not-allowed; font-family:var(--mk-font); }

    @media (max-width: 768px) {
      .by-hero { padding: 56px 18px 56px; }
      .by-hero h1 { font-size: 34px; }
      .by-board th, .by-board td { padding: 10px 12px; font-size: 13px; }
    }

/* 頁尾殘留樣式：底色/排列由 public-chrome.css 統一擁有，這裡只補各頁的 padding/間距 */
.mk-footer { padding: 36px 48px; gap: 14px; }
.footer-logo { font-size: 19px; }
@media (max-width: 768px) {
  .mk-footer { padding: 24px 18px; flex-direction: column; text-align: center; }
}