* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  background: #fff;
}

.site-header-inner {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.site-logo {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: 15px;
}

.site-nav a:hover {
  color: var(--color-primary);
}

.hero {
  padding: 72px 0;
  background: var(--color-surface);
}

.hero h1 {
  max-width: 760px;
  margin: 0 0 16px;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hero p {
  max-width: 680px;
  margin: 0;
  color: var(--color-muted);
  font-size: 18px;
}

.section {
  padding: var(--space-6) 0;
}

.section-title {
  margin: 0 0 28px;
  font-size: 28px;
  line-height: 1.3;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.card {
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

.card h3 {
  margin: 0 0 8px;
  font-size: 20px;
}

.card p {
  margin: 0;
  color: var(--color-muted);
}

.site-footer {
  margin-top: var(--space-6);
  padding: 40px 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .site-header-inner {
    min-height: 56px;
  }

  .site-nav {
    display: none;
  }

  .hero {
    padding: 48px 0;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero p {
    font-size: 16px;
  }

  .section {
    padding: 48px 0;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }
}
/* ===== 首頁新版專用樣式 ===== */
.home-redesign .hero-redesign {
    min-height: 540px;
    display: flex;
    align-items: center;
}

.home-redesign .hero-layout {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 56px;
}

.home-redesign .hero-eyebrow,
.home-redesign .section-kicker,
.home-redesign .feature-index {
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
}

.home-redesign .hero-cta {
    display: inline-flex;
    gap: 24px;
    align-items: center;
    margin-top: 28px;
    padding: 13px 20px;
    border: 1px solid var(--gold);
    border-radius: 6px;
    color: var(--ivory);
    transition: background .2s ease, color .2s ease;
}

.home-redesign .hero-cta:hover {
    background: var(--gold);
    color: var(--ink);
}

.home-redesign .hero-meta {
    margin-top: 34px;
    color: #b9c0b7;
    font-size: 10px;
    letter-spacing: .12em;
}

.home-redesign .hero-meta span {
    color: var(--gold);
    padding: 0 6px;
}

.home-redesign .hero-visual {
    position: relative;
    min-height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 28px;
    border: 1px solid rgba(199,166,107,.35);
    border-radius: 18px;
    background:
        radial-gradient(ellipse at center, #315341, #14251e 72%);
    box-shadow: 0 25px 60px rgba(0,0,0,.2);
}

.home-redesign .hero-visual-label,
.home-redesign .hero-visual-note {
    position: absolute;
    color: var(--gold-light);
    font-size: 10px;
    letter-spacing: .14em;
}

.home-redesign .hero-visual-label {
    top: 22px;
    left: 24px;
}

.home-redesign .hero-visual-note {
    bottom: 22px;
    left: 24px;
}

.home-redesign .hero-card {
    width: 38%;
    max-width: 150px;
    aspect-ratio: 2 / 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border-radius: 10px;
    background: #f7f1e4;
    color: #1b2922;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    font-size: 12px;
    letter-spacing: .12em;
    transform: rotate(-7deg);
}

.home-redesign .hero-card span {
    font-size: 54px;
    font-weight: 800;
}

.home-redesign .hero-card-banker {
    transform: rotate(7deg) translateY(12px);
    background: #e9d6b1;
}

.home-redesign .hero-index {
    position: absolute;
    right: 24px;
    bottom: 24px;
    color: #aeb8ae;
    font-size: 10px;
    line-height: 2;
    letter-spacing: .1em;
}

.home-redesign .hero-index span {
    color: var(--gold);
}

.home-redesign .section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    margin-bottom: 30px;
}

.home-redesign .section-heading-row .section-title {
    margin-bottom: 0;
}

.home-redesign .section-intro {
    max-width: 390px;
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 14px;
}





.home-redesign .feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow);
}



.home-redesign .feature-art::after {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(224,201,155,.25);
    border-radius: 50%;
    content: "";
}

.home-redesign .art-play {
    background: linear-gradient(135deg, #1b3027, #385846);
}

.home-redesign .art-rules {
    background: linear-gradient(135deg, #263947, #526d7c);
}

.home-redesign .art-odds {
    background: linear-gradient(135deg, #3a3023, #806741);
}

.home-redesign .art-roads {
    background: linear-gradient(135deg, #252b2b, #3c4b43);
}

.home-redesign .art-number {
    position: absolute;
    top: 16px;
    left: 18px;
    color: rgba(255,255,255,.65);
    font-size: 11px;
    letter-spacing: .1em;
}

.home-redesign .art-symbol {
    font-family: Georgia, serif;
    font-size: 100px;
    line-height: 1;
}

.home-redesign .art-label {
    position: absolute;
    bottom: 15px;
    left: 18px;
    font-size: 9px;
    letter-spacing: .16em;
}

.home-redesign .road-dots {
    display: grid;
    grid-template-columns: repeat(4, 18px);
    gap: 10px;
}

.home-redesign .road-dots i {
    width: 16px;
    height: 16px;
    border: 2px solid #d4b27b;
    border-radius: 50%;
}

.home-redesign .road-dots i:nth-child(3n) {
    border-color: #c56c67;
}



.home-redesign .feature-info h3 {
    margin: 12px 0 7px;
    font-size: 20px;
}

.home-redesign .feature-info p {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}



.home-redesign .home-articles,
.home-redesign .home-more {
    background: var(--ivory);
}

.home-redesign .home-latest {
    background: #fff;
}





.home-redesign .latest-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}



.home-redesign .latest-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform .4s ease;
}

.home-redesign .latest-card:hover .latest-image img {
    transform: scale(1.04);
}

.home-redesign .latest-placeholder {
    color: var(--gold-light);
    font-size: 16px;
    line-height: 2;
    text-align: center;
    letter-spacing: .15em;
}



.home-redesign .latest-meta {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .08em;
}

.home-redesign .latest-content h3 {
    margin: 10px 0;
    font-size: 19px;
    line-height: 1.6;
}

.home-redesign .latest-content p {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.85;
}

.home-redesign .latest-read {
    display: inline-flex;
    gap: 12px;
    margin-top: 8px;
    color: #426d5a;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 900px) {
    .home-redesign .hero-layout {
      grid-template-columns: 1fr;
        gap: 36px;
    }

    .home-redesign .hero-visual {
        min-height: 300px;
    }




}

@media (max-width: 560px) {
    .home-redesign .hero-redesign {
        padding: 64px 0;
    }

    .home-redesign .hero h1 {
        font-size: 39px;
    }

    .home-redesign .hero-visual {
        min-height: 250px;
        gap: 12px;
        padding: 20px;
    }

    .home-redesign .hero-card span {
        font-size: 42px;
    }

    .home-redesign .hero-index {
        display: none;
    }

    .home-redesign .section-heading-row {
        display: block;
    }

    .home-redesign .section-intro {
        margin-top: 15px;
    }

    .home-redesign .feature-grid,



}

/* 首頁主視覺：深綠金色編輯風格 */
.home-redesign .hero-redesign {
  background:
    linear-gradient(90deg, rgba(8,18,15,.96) 0%, rgba(8,18,15,.82) 36%, rgba(8,18,15,.12) 100%),
    radial-gradient(ellipse at 72% 50%, #174b3b 0%, #102b23 48%, #0b1713 100%) !important;
  color: #f7f1e5 !important;
  min-height: 405px;
  padding-top: 64px;
  padding-bottom: 64px;
}

.home-redesign .hero-redesign h1,
.home-redesign .hero-redesign h2 {
  color: #f7f1e5;
}

.home-redesign .hero-redesign p {
  color: #d7d0c3;
}

.home-redesign .hero-redesign .hero-cta,
.home-redesign .hero-redesign a.hero-cta {
  background: #d4b078;
  color: #17231c;
  border: 1px solid #d4b078;
}

.home-redesign .hero-visual {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(31,91,69,.75), transparent 65%),
    linear-gradient(145deg, #173b2e, #091812) !important;
  border: 1px solid rgba(212,176,120,.65);
  box-shadow: 0 25px 60px rgba(0,0,0,.28);
}

.home-redesign {
  background: #f5f1e8;
}

.home-redesign .feature-grid,


@media (max-width: 900px) {
  .home-redesign .hero-redesign {
    min-height: auto;
    padding-top: 42px;
    padding-bottom: 42px;
  }
}

/* 修正首頁主視覺背景 */
.home-redesign > .hero-redesign {
  background:
    linear-gradient(90deg, rgba(8,18,15,.97) 0%, rgba(8,18,15,.85) 34%, rgba(8,18,15,.25) 68%, rgba(8,18,15,.12) 100%),
    radial-gradient(ellipse at 70% 50%, #174b3b 0%, #102b23 55%, #091812 100%) !important;
  color: #f7f1e5 !important;
  min-height: 405px;
  padding: 64px max(24px, calc((100% - 1240px) / 2));
}

.home-redesign > .hero-redesign h1,
.home-redesign > .hero-redesign p,
.home-redesign > .hero-redesign .hero-eyebrow,
.home-redesign > .hero-redesign .hero-meta {
  color: #f7f1e5 !important;
}

.home-redesign > .hero-redesign .hero-visual {
  min-height: 320px;
  background:
    radial-gradient(ellipse at center, rgba(31,91,69,.75), transparent 65%),
    linear-gradient(145deg, #173b2e, #091812) !important;
  border: 1px solid rgba(212,176,120,.65);
  box-shadow: 0 25px 60px rgba(0,0,0,.28);
}

@media (max-width: 900px) {
  .home-redesign > .hero-redesign {
    padding: 42px 24px;
  }
}

/* 首頁主視覺最終覆蓋修正 */
main.home-redesign > section.hero-redesign {
  background: linear-gradient(110deg, #091812 0%, #102b23 55%, #174b3b 100%) !important;
  color: #f7f1e5 !important;
  min-height: 405px;
  padding-top: 64px;
  padding-bottom: 64px;
}

main.home-redesign > section.hero-redesign .hero-copy h1,
main.home-redesign > section.hero-redesign .hero-copy p,
main.home-redesign > section.hero-redesign .hero-eyebrow,
main.home-redesign > section.hero-redesign .hero-meta {
  color: #f7f1e5 !important;
}

main.home-redesign > section.hero-redesign .hero-cta {
  background: #d4b078 !important;
  color: #17231c !important;
  border-color: #d4b078 !important;
}

main.home-redesign > section.hero-redesign .hero-visual {
  background: radial-gradient(ellipse at center, #174b3b, #091812) !important;
  border: 1px solid rgba(212,176,120,.65);
}

@media (max-width: 900px) {
  main.home-redesign > section.hero-redesign {
    min-height: auto;
    padding: 42px 24px;
  }
}

/* 知識分類：接近參考稿的橫向卡片 */




.home-redesign .feature-card > :first-child {
  min-width: 0;
}

.home-redesign .feature-card h3 {
  color: #172b25;
}

.home-redesign .feature-card p {
  color: #77736b;
}

@media (max-width: 700px) {

}

/* 首頁四張分類卡片：橫向版型 */
main.home-redesign .feature-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

main.home-redesign a.feature-card {
  display: grid !important;
  grid-template-columns: 43% 57% !important;
  min-height: 150px;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden;
  background: #fcfaf6 !important;
  border: 1px solid #e5ded2;
  border-radius: 10px;
  text-decoration: none;
}

main.home-redesign .feature-card .feature-art {
  width: 100% !important;
  height: 100% !important;
  min-height: 150px;
  margin: 0 !important;
  border-radius: 0 !important;
}

main.home-redesign .feature-card .feature-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 18px 22px;
  background: #fcfaf6;
}

main.home-redesign .feature-card .feature-info h3 {
  color: #172b25 !important;
  font-size: 22px;
  margin: 8px 0;
}

main.home-redesign .feature-card .feature-info p {
  color: #77736b !important;
  font-size: 13px;
  line-height: 1.7;
}

main.home-redesign .feature-card .feature-index {
  color: #b68b52 !important;
}

main.home-redesign .feature-card .feature-arrow {
  color: #b68b52 !important;
  align-self: flex-end;
}

@media (max-width: 900px) {
  main.home-redesign .feature-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  main.home-redesign a.feature-card {
    grid-template-columns: 38% 62% !important;
  }

  main.home-redesign .feature-card .feature-info {
    padding: 12px;
  }

  main.home-redesign .feature-card .feature-info h3 {
    font-size: 18px;
  }
}

/* ===== 最新文章：三欄橫向卡片 ===== */
main.home-redesign .latest-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

main.home-redesign .latest-card {
  display: grid !important;
  grid-template-columns: 38% minmax(0, 1fr) !important;
  align-items: stretch;
  min-width: 0;
  min-height: 150px;
  overflow: hidden;
  background: #fcfaf6 !important;
  border: 1px solid #e5ded2;
  border-radius: 9px;
}

main.home-redesign .latest-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  overflow: hidden;
  background: #17382e;
}

main.home-redesign .latest-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

main.home-redesign .latest-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 150px;
  padding: 12px;
  color: #d4b078;
  text-align: center;
}

main.home-redesign .latest-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px;
}

main.home-redesign .latest-meta {
  color: #b68b52;
  font-size: 10px;
  letter-spacing: .04em;
}

main.home-redesign .latest-content h3 {
  margin: 9px 0;
  font-size: 16px;
  line-height: 1.45;
  color: #172b25;
}

main.home-redesign .latest-content h3 a {
  color: inherit;
  text-decoration: none;
}

main.home-redesign .latest-content p {
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
  color: #77736b;
}

main.home-redesign .latest-read {
  margin-top: auto;
  padding-top: 10px;
  color: #b68b52;
  font-size: 12px;
  text-decoration: none;
}

@media (max-width: 1100px) {
  main.home-redesign .latest-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 700px) {
  main.home-redesign .latest-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ===== 首頁 Hero 統一正式版 ===== */

.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: "Noto Serif TC", "PMingLiU", serif;
    font-weight: 800;
}

.site-header .logo-spade {
    color: #bb9255;
    font-size: 25px;
}

main.home-redesign > section.hero-redesign {
    position: relative !important;
    isolation: isolate;
    display: flex !important;
    align-items: center !important;
    height: 410px !important;
    min-height: 410px !important;
    padding: 0 !important;
    overflow: hidden;
    background: #081713 !important;
}

/* 背景圖以固定高度呈現，維持原始比例 */
main.home-redesign > section.hero-redesign::before {
    content: ""; mask-image: linear-gradient(to right, transparent 0%, black 35%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 35%);
    position: absolute;
    z-index: -2;
    inset: 0;
    background-image: url('../images/hero-baccarat.webp');
    background-size: auto 410px;
    background-position: right center;
    background-repeat: no-repeat;
}

/* 左側漸層 */
main.home-redesign > section.hero-redesign::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(
        90deg,
        #081310 0%,
        rgba(8,19,16,.99) 15%,
        rgba(8,19,16,.93) 27%,
        rgba(8,19,16,.72) 36%,
        rgba(8,19,16,.18) 58%,
        rgba(8,19,16,.20) 82%,
        rgba(8,19,16,.72) 100%
    );
    pointer-events: none;
}

main.home-redesign .hero-layout {
    position: relative !important;
    z-index: 2;
    display: block !important;
    width: min(calc(100% - 48px), 1200px) !important;
    margin: 0 auto !important;
}

main.home-redesign .hero-copy {
    position: relative !important;
    width: 38% !important;
    max-width: 450px !important;
    min-width: 0;
    z-index: 3;
}

main.home-redesign .hero-copy > * {
    visibility: visible !important;
    opacity: 1 !important;
}

main.home-redesign .hero-eyebrow {
    display: block;
    margin-bottom: 16px;
    color: #a99d86;
    font-family: Georgia, serif;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: .16em;
}

main.home-redesign .hero-redesign h1 {
    margin: 0 0 16px !important;
    color: #fffaf0 !important;
    font-family: "Noto Serif TC", "PMingLiU", serif !important;
    font-size: clamp(38px, 3.5vw, 54px) !important;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: .035em;
    white-space: nowrap;
}

main.home-redesign .hero-redesign h1 span {
    color: #d4ad72 !important;
}

main.home-redesign .hero-copy p {
    max-width: 320px;
    margin: 0;
    color: #d5d0c5;
    font-size: 13px;
    line-height: 1.8;
}

main.home-redesign .hero-cta,
main.home-redesign .hero-redesign a.hero-cta {
    display: inline-flex !important;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    padding: 11px 21px;
    border: 1px solid #caa36b;
    border-radius: 5px;
    background: #d8b47e !important;
    color: #18231c !important;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    visibility: visible !important;
    opacity: 1 !important;
}

main.home-redesign .hero-meta {
    margin-top: 25px;
    color: #8e9188;
    font-size: 10px;
    letter-spacing: .12em;
}

main.home-redesign .hero-visual {
    display: none !important;
}

/* 右側導覽 */
main.home-redesign > section.hero-redesign .hero-index {
    position: absolute !important;
    z-index: 4;
    top: 50% !important;
    right: 3% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 120px;
    padding: 14px 16px; background: rgba(5,15,13,.82); border-left: 1px solid rgba(212,173,114,.5); border-radius: 4px;
    color: #e4d9c7;
    font-size: 11px;
    line-height: 1.8;
    letter-spacing: .03em;
}

main.home-redesign .hero-index-number {
    color: #d4ad72;
    font-size: 12px;
}

main.home-redesign .hero-index-number span {
    color: #c8bdad;
}

main.home-redesign .hero-index-line {
    width: 100%;
    height: 1px;
    margin: 8px 0 17px;
    background: rgba(212,173,114,.65);
}

main.home-redesign .hero-index a {
    display: block;
    margin-bottom: 8px;
    color: #eee8dc;
    text-decoration: none;
    font-size: 11px;
}

main.home-redesign .hero-index a:hover {
    color: #d4ad72;
}

@media (max-width: 900px) {
    main.home-redesign .hero-copy {
        width: 62% !important;
    }

    main.home-redesign .hero-redesign h1 {
        font-size: 42px !important;
    }

    main.home-redesign .hero-index {
        display: none !important;
    }
}

@media (max-width: 600px) {
    main.home-redesign > section.hero-redesign {
        height: 490px !important;
        min-height: 490px !important;
    }

    main.home-redesign > section.hero-redesign::before {
        background-size: auto 100%;
        background-position: 57% center;
    }

    main.home-redesign > section.hero-redesign::after {
        background: linear-gradient(
            90deg,
            rgba(8,19,16,.97),
            rgba(8,19,16,.78) 75%,
            rgba(8,19,16,.4)
        );
    }

    main.home-redesign .hero-layout {
        width: calc(100% - 40px) !important;
    }

    main.home-redesign .hero-copy {
        width: 100% !important;
        max-width: 350px !important;
    }

    main.home-redesign .hero-redesign h1 {
        font-size: clamp(35px, 9vw, 44px) !important;
    }
}

/* ===== Header 視覺定稿 ===== */
.site-header {
    background: #f6f3ec;
    border-bottom: 1px solid #e5dfd3;
}

.site-header .site-header-inner {
    min-height: 58px;
}

.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #172c3c;
    font-family: "Noto Serif TC", "PMingLiU", serif;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
}

.site-header .logo-spade {
    color: #c7a06a;
    font-size: 24px;
    line-height: 1;
}

.site-header .site-nav {
    display: flex;
    align-items: center;
    gap: 24px;
}

.site-header .site-nav a {
    color: #26323a;
    font-size: 12px;
    text-decoration: none;
}

.site-header .site-nav a:hover {
    color: #b58d56;
}

.site-header .header-search {
    font-size: 23px !important;
    line-height: 1;
    margin-left: 7px;
}

@media (max-width: 600px) {
    .site-header .site-header-inner {
        min-height: 60px;
    }
    .site-header .site-logo {
        font-size: 15px;
    }
    .site-header .site-nav {
        gap: 10px;
    }
    .site-header .site-nav a {
        font-size: 11px;
    }
}


/* ===== 皇家金屬黑桃 Logo ===== */
.site-header .site-logo .royal-spade {
    display: block;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    overflow: visible;
    filter: drop-shadow(0 1px 1px rgba(73, 44, 13, .24));
}

.site-header .site-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}


/* 皇家金色黑桃 Logo：正式顯示 */
.site-header .site-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 9px !important;
}
.site-header .royal-logo-icon {
    display: block !important;
    width: 29px !important;
    height: 29px !important;
    min-width: 29px !important;
    flex-shrink: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    object-fit: contain !important;
}


/* ===== 首頁下半部正式排版 V1 ===== */

main.home-redesign .home-knowledge,
main.home-redesign .home-latest {
    background: #f5f2eb;
    color: #182a28;
}

main.home-redesign .home-knowledge {
    padding: 52px 0 24px;
}

main.home-redesign .home-latest {
    padding: 24px 0 65px;
}

main.home-redesign .home-knowledge > .container,
main.home-redesign .home-latest > .container {
    max-width: 1140px;
    margin: 0 auto;
}

main.home-redesign .home-knowledge .section-heading-row,
main.home-redesign .home-latest .section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 22px;
}

main.home-redesign .home-knowledge .section-title,
main.home-redesign .home-latest .section-title {
    font-family: "Noto Serif TC", serif;
    font-size: 27px;
    line-height: 1.3;
    color: #172b32;
}

main.home-redesign .home-knowledge .section-kicker,
main.home-redesign .home-latest .section-kicker {
    color: #a98b61;
    font-size: 10px;
    letter-spacing: .16em;
}

main.home-redesign .home-knowledge .section-intro,
main.home-redesign .home-latest .section-intro {
    color: #797d78;
    font-size: 12px;
}

/* 四大分類 */

main.home-redesign .home-knowledge .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

main.home-redesign .home-knowledge .feature-card {
    display: grid;
    grid-template-columns: 44% 56%;
    min-height: 142px;
    overflow: hidden;
    background: #fffdf9;
    border: 1px solid #e9e4d9;
    border-radius: 8px;
    text-decoration: none;
    box-shadow: 0 5px 20px rgba(31, 34, 26, .035);
    transition: transform .2s, box-shadow .2s;
}

main.home-redesign .home-knowledge .feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(31, 34, 26, .09);
}

main.home-redesign .home-knowledge .feature-art {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 142px;
    border: 0;
    border-radius: 0;
    background: #102a29;
    overflow: hidden;
}

main.home-redesign .home-knowledge .art-play {
    background: radial-gradient(circle at 60% 40%, #42634e, #102923 75%);
}

main.home-redesign .home-knowledge .art-rules {
    background: radial-gradient(circle at 50% 50%, #34566a, #122a35 75%);
}

main.home-redesign .home-knowledge .art-odds {
    background: linear-gradient(145deg, #142a32, #0c1d25);
}

main.home-redesign .home-knowledge .art-roads {
    background: linear-gradient(145deg, #163947, #0d202c);
}

main.home-redesign .home-knowledge .art-symbol {
    font-size: 66px;
    color: #d5ad70;
    opacity: .85;
}

main.home-redesign .home-knowledge .art-number {
    position: absolute;
    top: 12px;
    left: 13px;
    z-index: 2;
    color: #d9bc8c;
    font-size: 11px;
}

main.home-redesign .home-knowledge .art-label {
    position: absolute;
    bottom: 12px;
    left: 13px;
    z-index: 2;
    color: #e0d6c1;
    font-size: 9px;
    letter-spacing: .1em;
}

main.home-redesign .home-knowledge .feature-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 19px 34px 19px 20px;
    min-width: 0;
}

main.home-redesign .home-knowledge .feature-index {
    color: #b99462;
    font-size: 10px;
    letter-spacing: .1em;
}

main.home-redesign .home-knowledge .feature-info h3 {
    margin: 8px 0 6px;
    color: #15282a;
    font-family: "Noto Serif TC", serif;
    font-size: 19px;
}

main.home-redesign .home-knowledge .feature-info p {
    margin: 0;
    color: #7b7d77;
    font-size: 11px;
    line-height: 1.7;
}

main.home-redesign .home-knowledge .feature-arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid #dec6a3;
    border-radius: 50%;
    color: #bd9864;
    font-size: 13px;
}

/* 最新文章 */

main.home-redesign .home-latest .latest-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

main.home-redesign .home-latest .latest-card {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    min-height: 140px;
    overflow: hidden;
    background: #fffdf9;
    border: 1px solid #e9e4d9;
    border-radius: 8px;
}

main.home-redesign .home-latest .latest-image {
    display: block;
    min-height: 140px;
    background: #17302d;
    overflow: hidden;
}

main.home-redesign .home-latest .latest-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

main.home-redesign .home-latest .latest-content {
    position: relative;
    min-width: 0;
    padding: 13px 12px 30px;
}

main.home-redesign .home-latest .latest-meta {
    color: #ad8b60;
    font-size: 9px;
}

main.home-redesign .home-latest .latest-content h3 {
    margin: 7px 0;
    font-family: "Noto Serif TC", serif;
    font-size: 13px;
    line-height: 1.5;
}

main.home-redesign .home-latest .latest-content h3 a {
    color: #172c30;
    text-decoration: none;
}

main.home-redesign .home-latest .latest-content p {
    margin: 0;
    color: #777d7a;
    font-size: 10px;
    line-height: 1.6;
}

main.home-redesign .home-latest .latest-read {
    position: absolute;
    right: 12px;
    bottom: 9px;
    color: #b48b56;
    font-size: 10px;
    text-decoration: none;
}

/* 響應式 */

@media (max-width: 900px) {
    main.home-redesign .home-latest .latest-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    main.home-redesign .home-knowledge .feature-grid,
    main.home-redesign .home-latest .latest-grid {
        grid-template-columns: 1fr;
    }

    main.home-redesign .home-knowledge .feature-card {
        grid-template-columns: 42% 58%;
    }

    main.home-redesign .home-knowledge .section-heading-row,
    main.home-redesign .home-latest .section-heading-row {
        align-items: start;
        flex-direction: column;
        gap: 8px;
    }

    main.home-redesign .home-knowledge,
    main.home-redesign .home-latest {
        padding-left: 0;
        padding-right: 0;
    }
}


/* ===== KNOWLEDGE CARDS V2 START ===== */
main.home-redesign .home-knowledge {
    background: #f5f2eb;
    padding: 54px 0 62px;
}

main.home-redesign .home-knowledge .section-heading-row {
    margin-bottom: 24px;
}

main.home-redesign .home-knowledge .section-title {
    color: #152b35;
    font-family: "Noto Serif TC", serif;
    font-size: 30px;
}

main.home-redesign .home-knowledge .feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

main.home-redesign .home-knowledge .feature-card {
    display: grid;
    grid-template-columns: 42% 58%;
    min-width: 0;
    min-height: 145px;
    overflow: hidden;
    background: #fcfaf6;
    border: 1px solid #e7e0d4;
    border-radius: 9px;
    text-decoration: none;
    box-shadow: 0 5px 18px rgba(30, 30, 20, .035);
    transition: transform .2s ease, box-shadow .2s ease;
}

main.home-redesign .home-knowledge .feature-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(30, 30, 20, .10);
}

main.home-redesign .home-knowledge .feature-art {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 145px;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: radial-gradient(circle at 55% 45%, #2c5346, #102b2a 80%);
    color: #cda76b;
    overflow: hidden;
}

main.home-redesign .home-knowledge .art-rules {
    background: radial-gradient(circle, #285269, #102934 80%);
}

main.home-redesign .home-knowledge .art-odds,
main.home-redesign .home-knowledge .art-roads {
    background: radial-gradient(circle, #183d47, #0b222b 80%);
}

main.home-redesign .home-knowledge .feature-art::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(205, 167, 107, .22);
    border-radius: 50%;
}

main.home-redesign .home-knowledge .art-number {
    position: absolute;
    top: 13px;
    left: 13px;
    font-size: 12px;
    color: #d4ad72;
}

main.home-redesign .home-knowledge .art-symbol {
    font-size: 62px;
    line-height: 1;
    color: #cda76b;
}

main.home-redesign .home-knowledge .art-label {
    position: absolute;
    bottom: 12px;
    left: 13px;
    font-size: 9px;
    letter-spacing: .09em;
    color: #e3d0af;
}

main.home-redesign .home-knowledge .feature-info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 20px 34px 20px 20px;
}

main.home-redesign .home-knowledge .feature-index {
    font-size: 10px;
    color: #bd9055;
}

main.home-redesign .home-knowledge .feature-info h3 {
    margin: 9px 0 7px;
    color: #142c35;
    font-family: "Noto Serif TC", serif;
    font-size: 19px;
}

main.home-redesign .home-knowledge .feature-info p {
    margin: 0;
    color: #807b72;
    font-size: 11px;
    line-height: 1.7;
}

main.home-redesign .home-knowledge .feature-arrow {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border: 1px solid #e1c9a5;
    border-radius: 50%;
    color: #bc9258;
    font-size: 15px;
}

@media (max-width: 800px) {
    main.home-redesign .home-knowledge .feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    main.home-redesign .home-knowledge .feature-card {
        grid-template-columns: 38% 62%;
        min-height: 135px;
    }

    main.home-redesign .home-knowledge .feature-art {
        min-height: 135px;
    }

    main.home-redesign .home-knowledge .feature-info {
        padding: 15px 30px 15px 14px;
    }

    main.home-redesign .home-knowledge .feature-info h3 {
        font-size: 17px;
    }
}
/* ===== KNOWLEDGE CARDS V2 END ===== */

/* 探索知識：四張獨立圖片 */
main.home-redesign .home-knowledge .art-play {
    background: url('../images/card-play.jpg') center / cover no-repeat;
}

main.home-redesign .home-knowledge .art-rules {
    background: url('../images/card-rules.jpg') center / cover no-repeat;
}

main.home-redesign .home-knowledge .art-odds {
    background: url('../images/card-odds.jpg') center / cover no-repeat;
}

main.home-redesign .home-knowledge .art-roads {
    background: url('../images/card-roads.jpg') center / cover no-repeat;
}

main.home-redesign .home-knowledge .feature-art::before,
main.home-redesign .home-knowledge .art-symbol,
main.home-redesign .home-knowledge .road-dots {
    display: none;
}

main.home-redesign .home-knowledge .art-number,
main.home-redesign .home-knowledge .art-label {
    z-index: 2;
    text-shadow: 0 1px 5px #000;
}

/* 分類圖片已內含英文標籤，隱藏重複文字 */
main.home-redesign .home-knowledge .feature-art .art-label {
    display: none !important;
}

/* Mobile content safety: actual stylesheet enqueued by functions.php. */
@media (max-width: 640px) {
  .entry-content, .article-content, .wp-block-post-content {
    overflow-wrap: anywhere;
    min-width: 0;
  }
  .entry-content pre, .article-content pre, .wp-block-post-content pre {
    max-width: 100%;
    overflow-x: auto;
  }
  .entry-content table, .article-content table, .wp-block-post-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}

/* Mobile audit 2026-10-18: limit the road diagram without clipping content. */
@media (max-width: 640px) {
  body.single-post .tb-cockroach table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Homepage hero mobile heading: override desktop nowrap in the stylesheet actually enqueued. */
@media (max-width: 600px) {
  main.home-redesign .hero-copy { min-width: 0 !important; max-width: 100% !important; }
  main.home-redesign .hero-redesign h1 {
    max-width: 100% !important;
    font-size: clamp(24px, 6.9vw, 28px) !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
  }
  main.home-redesign .hero-redesign h1 span { white-space: normal !important; overflow-wrap: anywhere; }
}

/* Defer below-the-fold knowledge card rendering without changing hero layout. */
@supports (content-visibility: auto) {
  main.home-redesign .home-knowledge .feature-art {
    content-visibility: auto;
    contain-intrinsic-size: auto 220px;
  }
}

/* Regression fixes: scoped typography and mobile article overflow. */
main.home-redesign .latest-content h3 {
  font-size: 18px !important;
  line-height: 1.5 !important;
}
@media (max-width: 700px) {
  main.home-redesign .latest-content h3 { font-size: 17px !important; }
  body.single-post .article-content { min-width: 0; max-width: 100%; }
  body.single-post .article-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Scoped 360-430px ROAD ATLAS overflow repair; retain scrollable diagrams. */
@media (max-width: 640px) {
  body.single-post.postid-54,
  body.single-post.postid-59 { max-width: 100%; overflow-x: clip; }
  body.single-post.postid-54 .tb-big-road,
  body.single-post.postid-59 .tb-big-eye,
  body.single-post.postid-59 .tb-road,
  body.single-post.postid-54 main,
  body.single-post.postid-59 main { min-width: 0; max-width: 100%; }
  body.single-post.postid-54 :is(table,pre,.road-grid,.road-board,.road-table),
  body.single-post.postid-59 :is(table,pre,.road-grid,.road-board,.road-table) {
    max-width: 100%;
    overflow-x: auto;
  }
}