:root {
	--renju-primary: #285860;
	--renju-primary-dark: #103642;
	--renju-primary-soft: #e7f2ed;
	--renju-page: #f8f8f5;
	--renju-surface: #fffefa;
	--renju-nav: #103642;
	--renju-accent: #b9965a;
	--renju-text: #203743;
	--renju-text-muted: #72818a;
	--renju-border: #e1e6e2;
	--renju-link: #356679;
	--renju-link-hover: #174953;
	--renju-button-primary: #285860;
	--renju-button-primary-hover: #103642;
	--renju-button-secondary: #fffefa;
	--renju-button-secondary-hover: #e7f2ed;
	--renju-button-secondary-border: #b9cfc4;
	--renju-button-secondary-text: #21404b;
	--renju-danger: #B1534C;
}

html { background: var(--renju-page); }
body {
	font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
	font-size: 1.125rem; line-height: 1.55; color: var(--renju-text);
	background-color: var(--renju-page); box-sizing: border-box; width: 100%; max-width: 1600px;
	margin: 0 auto; padding: 90px clamp(40px, 6vw, 100px) 32px;
}
*, *::before, *::after { box-sizing: inherit; }
/* 舊內容頁標題：延續首頁深青文字與金色直線的視覺階層 */
h1 {
  margin: 0 0 15px;
  padding: 3px 0 3px 14px;
  border-left: 5px solid var(--renju-accent);
  color: var(--renju-primary-dark);
  font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-size: 1.75rem;
  font-weight: 750;
  line-height: 1.4;
  text-shadow: none;
}
h2 {
  padding-left: 11px;
  border-left: 4px solid var(--renju-accent);
  color: #21404b;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-size: 1.42rem;
  font-weight: 700;
  line-height: 1.45;
}
h3 { color: #315b60; font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif; font-size: 1.16rem; font-weight: 700; }
p { margin-top: 0; margin-bottom: 1em; }
hr { border: 0; border-top: 1px solid var(--renju-border); margin: 1.25rem 0; }

/* 共用頂部導覽：與協會首頁一致的深青色、金線、米白選單 */
#menu {
  position: fixed;
  z-index: 9999;
  top: 0; left: 0; right: 0;
  height: 72px;
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 max(24px, calc((100vw - 1410px) / 2));
  color: #f8f7f1;
  background: rgba(12, 48, 60, .985);
  box-shadow: 0 3px 16px rgba(22, 40, 45, .14);
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
}
#menu .site-nav-brand,
#menu .site-nav-brand:visited {
  display: flex;
  align-items: center;
  gap: 13px;
  flex-shrink: 0;
  color: #f8f7f1;
  text-decoration: none;
}
#menu .site-nav-brand:hover { color: #fff; background: none; text-decoration: none; }
#menu .site-nav-logo { display: block; width: 45px; height: 45px; flex-shrink: 0; }
#menu .site-nav-names { display: flex; flex-direction: column; gap: 5px; line-height: 1.15; white-space: nowrap; }
#menu .site-nav-name { font-size: 21px; font-weight: 700; letter-spacing: .045em; }
#menu .site-nav-en { font: 12px Georgia, "Times New Roman", serif; letter-spacing: .095em; color: #d5d7d3; }
#menu .site-nav-toggle { display: none; width: auto; min-width: 0; height: auto; min-height: 0; border: 1px solid #607c84; border-radius: 8px; padding: 9px 10px; background: none; color: #fff; cursor: pointer; }
#menu .site-nav-toggle svg { display: block; }
#menu .menu-main, #menu .submenu { margin: 0; padding: 0; list-style: none; }
#menu .menu-main { display: flex; align-items: stretch; justify-content: flex-end; flex: 1 1 auto; gap: 22px; height: 100%; min-width: 0; }
#menu .menu-group { display: flex; align-items: stretch; position: relative; flex: 0 0 auto; }
#menu .menu-parent {
  width: auto; min-width: 0; height: 100%; min-height: 0;
  margin: 0; padding: 0 13px;
  border: 0; border-bottom: 3px solid transparent; border-radius: 0;
  background: none; box-shadow: none;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: #f5f7f6; font-size: 17px; font-weight: 650; letter-spacing: .11em;
  cursor: pointer;
  transition: border-color .17s, color .17s;
}
#menu .menu-group.is-current > .menu-parent { color: #f3d39a; border-bottom-color: #c7a26b; }
#menu .menu-parent:hover,
#menu .menu-group:focus-within .menu-parent {
  color: #f4d7aa; border-bottom-color: #c7a26b;
  background: none; box-shadow: none;
}
/* Mouse hover temporarily moves the gold underline; the active page resumes on leave. */
@media (hover: hover) and (min-width: 851px) {
  #menu:has(.menu-group:hover) .menu-group.is-current:not(:hover) > .menu-parent {
    color: #f5f7f6; border-bottom-color: transparent;
  }
}
#menu .menu-arrow {
  display: block; width: 7px; height: 7px;
  border-bottom: 1.6px solid currentColor; border-right: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .16s;
}
#menu .menu-group:hover .menu-arrow,
#menu .menu-group:focus-within .menu-arrow { transform: translateY(2px) rotate(225deg); }
#menu .submenu {
  position: absolute; top: calc(100% - 1px); right: 0;
  width: max-content; min-width: 128px; max-width: min(90vw, 220px);
  padding: 9px 7px 8px;
  background: linear-gradient(145deg, rgba(255,254,250,.99), rgba(247,247,242,.99));
  color: #203743;
  border: 1px solid rgba(194,183,161,.45); border-top: 2px solid #c5a36b;
  border-radius: 0 0 14px 14px;
  box-shadow: 0 20px 40px rgba(9,36,41,.19), inset 0 1px 0 rgba(255,255,255,.94);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-5px);
  transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}
#menu .submenu::before {
  content: ""; display: block; width: 30px; height: 2px; margin: 1px 0 7px 13px;
  background: linear-gradient(to right, #b48c51, rgba(180,140,81,0));
}
#menu .menu-group:hover > .submenu,
#menu .menu-group:focus-within > .submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}
#menu .submenu li { margin: 0; padding: 0; }
#menu .submenu li + li { border-top: 1px solid rgba(41,78,78,.075); }
#menu .submenu a,
#menu .submenu a:visited {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 8px 9px;
  border-radius: 8px; color: #294750;
  font-size: 16px; font-weight: 550; line-height: 1.45; letter-spacing: .055em;
  white-space: nowrap; text-align: left; text-decoration: none;
  transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
#menu .submenu a::before {
  content: ""; width: 6px; height: 6px; flex: none;
  border: 1.2px solid #b99b6c; transform: rotate(45deg); opacity: .85;
}
#menu .submenu a:hover,
#menu .submenu a:focus-visible {
  color: #0e4e52; background: #e7f0eb; box-shadow: inset 3px 0 0 #b99a65;
  text-decoration: none;
}
#menu .menu-parent:focus-visible,
#menu .site-nav-toggle:focus-visible,
#menu .site-nav-brand:focus-visible { outline: 3px solid #d7af63; outline-offset: 3px; }
@media (max-width: 1170px) and (min-width: 851px) {
  #menu { gap: 12px; padding-inline: 24px; }
  #menu .site-nav-name { font-size: 19px; }
  #menu .site-nav-en { font-size: 10px; }
  #menu .menu-main { gap: 6px; }
  #menu .menu-parent { font-size: 16px; padding-inline: 10px; }
}

/* 舊頁表格：與首頁活動資訊一致的深青表頭、暖白資料列 */
table.tb, table.rank {
  width: 100%; max-width: 100%; table-layout: auto;
  border-collapse: separate; border-spacing: 0;
  background: var(--renju-surface);
  border: 1px solid var(--renju-border); border-radius: 12px;
  box-shadow: 0 5px 20px rgba(20, 49, 55, .065);
  overflow: hidden; line-height: 1.45;
}
table.tb th, table.rank th {
  padding: 10px 12px;
  background: #174550; color: #faf9f3;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-weight: 700; text-align: center;
  border-right: 1px solid rgba(255,255,255,.14);
  border-bottom: 2px solid var(--renju-accent); white-space: nowrap;
}
table.tb td, table.rank td {
  padding: 9px 12px;
  background: var(--renju-surface); color: var(--renju-text);
  font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
  font-weight: 400; border-right: 1px solid #e7eae5;
  border-bottom: 1px solid #e7eae5;
  transition: background-color .15s ease;
}
table.rank td { text-align: center; }
table.tb tr:last-child td, table.rank tr:last-child td { border-bottom: 0; }
table.tb th:last-child, table.tb td:last-child, table.rank th:last-child, table.rank td:last-child { border-right: 0; }
table.tb tbody tr:nth-child(even) td, table.rank tbody tr:nth-child(even) td { background: #f5f7f3; }
table.tb tbody tr:hover td, table.rank tbody tr:hover td { background: var(--renju-primary-soft); }

/* 共用連結 */
a, a:visited { color: var(--renju-link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--renju-link-hover); background-color: transparent; text-decoration: underline; text-decoration-thickness: 1px; }
a:focus-visible { outline: 2px solid var(--renju-primary); outline-offset: 2px; border-radius: 3px; }
table.tb a, table.rank a, table.tb a:visited, table.rank a:visited { color: var(--renju-link); font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif; font-weight: 400; }
table.tb a:hover, table.rank a:hover { color: var(--renju-link-hover); background: transparent; text-decoration-color: #a7c3b8; }
table.tb a:focus-visible, table.rank a:focus-visible { outline: 2px solid var(--renju-primary); outline-offset: 2px; border-radius: 3px; }

/* 共用表單 */
input, select, textarea, button { font-family: inherit; font-size: 1rem; }
input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], select, textarea { max-width: 100%; padding: 9px 12px; border: 1px solid var(--renju-border); border-radius: 8px; background: var(--renju-surface); color: var(--renju-text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; }
textarea { resize: vertical; line-height: 1.5; }
input[type="text"]:focus, input[type="search"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, select:focus, textarea:focus { border-color: var(--renju-primary); box-shadow: 0 0 0 3px rgba(40, 88, 96, .16); background: #FFFCF7; }
/* 全站一般操作按鈕：共用主色與次要樣式，棋盤及選單控制沿用各自元件規則。 */
button, input[type="button"], input[type="submit"], input[type="reset"],
.record-search-clear, .wr-filters .wr-action,
.wr-filters .wr-opening-all, .wr-filters .wr-opening-done,
.swiss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-sizing: border-box; min-height: 40px; padding: 8px 15px;
  border: 1px solid var(--renju-button-primary); border-radius: 8px;
  background: var(--renju-button-primary); color: #faf9f3;
  font-family: inherit; font-size: 15px; font-weight: 650; line-height: 1.4;
  text-align: center; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, box-shadow .15s ease, transform .08s ease;
}
button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover,
.wr-filters .wr-action:hover, .wr-filters .wr-opening-done:hover {
  background: var(--renju-button-primary-hover);
  border-color: var(--renju-button-primary-hover); color: #fff;
}
.record-search-clear, .record-search-clear:visited,
.wr-filters .wr-action:not(.wr-action-primary),
.wr-filters .wr-action:not(.wr-action-primary):visited,
.wr-filters .wr-opening-all,
.swiss-btn, .swiss-btn:visited {
  background: var(--renju-button-secondary);
  border-color: var(--renju-button-secondary-border);
  color: var(--renju-button-secondary-text);
}
.record-search-clear:hover, .record-search-clear:focus-visible,
.wr-filters .wr-action:not(.wr-action-primary):hover,
.wr-filters .wr-opening-all:hover,
.swiss-btn:hover {
  background: var(--renju-button-secondary-hover);
  border-color: #9fbeb0; color: var(--renju-primary-dark); text-decoration: none;
}
button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active,
.record-search-clear:active, .wr-filters .wr-action:active, .swiss-btn:active {
  transform: translateY(1px);
}
button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible, .record-search-clear:focus-visible,
.wr-filters .wr-action:focus-visible, .wr-filters .wr-opening-all:focus-visible,
.wr-filters .wr-opening-done:focus-visible, .swiss-btn:focus-visible {
  outline: 2px solid var(--renju-accent); outline-offset: 3px;
}
button:disabled, input:disabled, select:disabled, textarea:disabled { cursor: not-allowed; opacity: 0.58; }

/* 共用內容元件 */
.site-panel { margin: 20px 0; padding: 16px; background: var(--renju-surface); border: 1px solid var(--renju-border); border-radius: 10px; box-shadow: 0 3px 12px rgba(36, 69, 95, 0.08); }
.site-panel--center { text-align: center; }
.form-label { display: block; margin-bottom: 8px; font-weight: 700; color: var(--renju-primary-dark); }
.rule-selector { width: 100%; max-width: 300px; cursor: pointer; }
.news-list { display: grid; gap: 7px; margin: 18px 0 22px; }
.news-link, .news-link:visited { display: block; width: fit-content; max-width: 100%; font-weight: 600; color: var(--renju-link); }
.news-link--featured, .news-link--featured:visited { color: #9B6E2F; font-weight: 700; }
.news-link--featured:hover { color: #7D5422; }
.site-updates { width: 100%; height: 108px; min-height: 108px; }
.content-image { display: block; max-width: 100%; height: auto; }

/* 規章與說明頁 */
.rule-page { max-width: 1180px; }
.rule-page ol { padding-left: 1.6em; }
.rule-page li { margin: 0.35em 0; }
.rule-meta { margin-bottom: 1.3rem; color: var(--renju-text-muted); font-size: 0.95rem; line-height: 1.65; }
.rule-section { margin: 18px 0; padding: 16px 18px; background: var(--renju-surface); border: 1px solid var(--renju-border); border-left: 4px solid var(--renju-primary); border-radius: 9px; }
.rule-section > h2, .rule-section > h3 { margin-top: 0; }
.rule-formula { display: block; margin: 8px 0; padding: 10px 12px; background: var(--renju-primary-soft); border-radius: 7px; font-family: Consolas, "Microsoft JhengHei", sans-serif; overflow-wrap: anywhere; }
.rule-table { margin: 12px 0 8px; }
.rule-table th, .rule-table td { text-align: center; vertical-align: middle; }

/* 比賽頁 */
.international-link, .international-link:visited { color: #9B6E2F !important; font-weight: 700 !important; }
.international-link:hover { color: #7D5422 !important; }
.tourb-page { width: 100%; min-width: 0; max-width: 100%; overflow-x: hidden; }
.tourb-scroll, .tourb-legacy { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tourb-scroll { margin-bottom: 16px; }
.tourb-scroll > table.rank { width: max-content; min-width: 100%; max-width: none; }
.tourb-legacy { margin: 12px 0 18px; }
.tourb-legacy table { max-width: none; }
.tourb-swiss, .tourb-swiss .swiss-component, .tourb-swiss .swiss-scroll { min-width: 0; max-width: 100%; }

/* 排名頁與日期選擇器 */
.ranking-page .rank-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ranking-page #datepicker { min-height: 36px; padding: 6px 10px; font-size: 0.9rem; }
table.rank td.rating-score { color: var(--rating-color, var(--renju-text)); font-weight: 600; }
.ranking-page .ui-widget, .ranking-page .ui-widget input, .ranking-page .ui-widget select, .ranking-page .ui-widget button { font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif; }
.ranking-page .ui-datepicker { padding: 8px; background: var(--renju-surface); border: 1px solid var(--renju-border); border-radius: 10px; box-shadow: 0 10px 26px rgba(36, 69, 95, 0.18); color: var(--renju-text); }
.ranking-page .ui-datepicker .ui-datepicker-header { padding: 7px 4px; background: var(--renju-primary); border: 0; border-radius: 7px; color: #FBF8F2; }
.ranking-page .ui-datepicker .ui-datepicker-title { color: #FBF8F2; }
.ranking-page .ui-datepicker .ui-datepicker-title select { min-height: 30px; padding: 3px 5px; border: 1px solid rgba(251, 248, 242, 0.62); border-radius: 5px; background: #FFFCF7; color: var(--renju-text); }
.ranking-page .ui-datepicker .ui-datepicker-prev, .ranking-page .ui-datepicker .ui-datepicker-next { top: 6px; border-radius: 6px; cursor: pointer; }
.ranking-page .ui-datepicker .ui-datepicker-prev-hover, .ranking-page .ui-datepicker .ui-datepicker-next-hover { background: rgba(251, 248, 242, 0.23); border-color: transparent; }
.ranking-page .ui-datepicker th { color: var(--renju-primary-dark); font-weight: 700; }
.ranking-page .ui-datepicker td a, .ranking-page .ui-datepicker td span { padding: 6px; border: 0; border-radius: 6px; background: transparent; color: var(--renju-text); text-align: center; }
.ranking-page .ui-datepicker td a:hover { background: var(--renju-primary-soft); color: var(--renju-primary-dark); text-decoration: none; }
.ranking-page .ui-datepicker .ui-state-highlight { background: #F1DFC0; color: #7A5726; }
.ranking-page .ui-datepicker .ui-state-active { background: var(--renju-primary-dark); color: #FBF8F2; font-weight: 700; }

/* 共用工具類別 */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-muted { color: var(--renju-text-muted) !important; }
.text-danger { color: var(--renju-danger) !important; }
.nowrap { white-space: nowrap !important; }
.w-full { width: 100% !important; }
.chart-container { position: relative; width: 100%; max-width: 100%; height: clamp(260px, 42vw, 420px); margin-bottom: 20px; }
.chart-container canvas { width: 100% !important; max-width: 100%; }
.result-win { color: #2F7D5A !important; font-weight: 600; }
.result-loss { color: var(--renju-danger) !important; font-weight: 600; }
.result-draw { color: #4F6F91 !important; font-weight: 600; }
.result-note { color: var(--renju-text-muted) !important; }


/* 手機導覽：與首頁相同的漢堡選單及可點擊的單層下拉 */
@media (max-width: 850px) {
  body { padding-top: 78px; }
  #menu { height: 64px; padding-inline: 16px; gap: 9px; }
  #menu .site-nav-logo { width: 38px; height: 38px; }
  #menu .site-nav-brand { gap: 9px; }
  #menu .site-nav-name { font-size: 17px; }
  #menu .site-nav-en { font-size: 10px; letter-spacing: .015em; }
  #menu .site-nav-toggle { display: block; margin-left: auto; }
  #menu .menu-main {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    height: auto; min-width: 0; max-height: calc(100vh - 64px); overflow-y: auto;
    padding: 0 16px 15px; gap: 0;
    flex-direction: column;
    background: #103642; border-top: 1px solid #345763;
    box-shadow: 0 20px 24px rgba(0,0,0,.16);
  }
  #menu.nav-open .menu-main { display: flex; }
  #menu .menu-group { display: block; width: 100%; border-bottom: 1px solid #355762; }
  #menu .menu-parent {
    width: 100%; height: 53px; display: flex; justify-content: space-between;
    padding: 0 7px; border-bottom: 0; font-size: 17px;
  }
  #menu .menu-group:first-child .menu-parent { border-bottom: 0; }
  #menu .submenu {
    position: static; display: none; width: 100%; min-width: 0; max-width: none;
    padding: 0 0 10px 10px; border: 0; border-radius: 0;
    background: transparent; box-shadow: none;
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
  }
  #menu .submenu::before { display: none; }
  #menu .submenu li + li { border-top: 0; }
  #menu .menu-group.menu-open > .submenu { display: block; }
  #menu .menu-group.menu-open .menu-parent { color: #f4d7aa; }
  #menu .menu-group.menu-open .menu-arrow { transform: translateY(2px) rotate(225deg); }
  #menu .submenu a,
  #menu .submenu a:visited {
    color: #dce9e8; font-size: 16px; padding: 10px 15px; background: transparent;
  }
  #menu .submenu a::before { border-color: #c5a36b; }
  #menu .submenu a:hover,
  #menu .submenu a:focus-visible { background: #28515b; color: #fff; box-shadow: none; }
}
@media (max-width: 520px) {
  #menu .site-nav-name { font-size: 16px; }
  #menu .site-nav-en { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #menu .submenu, #menu .menu-arrow { transition: none; }
}

@media (max-width: 768px) {
	body { padding: 78px 12px 24px; }
	table.tb, table.rank { font-size: 0.95rem; }
	table.tb th, table.tb td, table.rank th, table.rank td { padding: 7px 9px; }
	input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], select, textarea { width: 100%; }
	.player-page table.rank { font-size: 15px; }
	.player-page table.rank th, .player-page table.rank td { padding: 5px 4px; }
	.rule-section { padding: 13px 14px; }
	.tourb-body { overflow-x: hidden; }
	.tourb-page > h2 { margin-top: 12px; margin-bottom: 10px; line-height: 1.35; }
	.tourb-scroll > table.rank { font-size: 13px; }
	.tourb-scroll > table.rank th, .tourb-scroll > table.rank td { padding: 6px 8px; }
	.tourb-swiss .swiss-title { font-size: 18px; line-height: 1.35; }
	.tourb-swiss .swiss-meta { white-space: normal; line-height: 1.5; }
	.tourb-swiss .swiss-subhead { flex-wrap: wrap; }
	.ranking-page .rank-heading { align-items: stretch; }
	.ranking-page #datepicker { width: auto; }
}