:root {
  --felt: #1f7a4d;
  --felt-dark: #155c39;
  --wood: #5a3a22;
  --wood-light: #7a5230;
  --gold: #e7c66b;
  --ink: #10241a;
  --paper: #f5f1e6;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  background: radial-gradient(
    circle at 50% 0%,
    var(--felt) 0%,
    var(--felt-dark) 70%
  );
  color: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.topbar {
  width: 100%;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(var(--wood-light), var(--wood));
  border-bottom: 3px solid var(--gold);
}

.topbar .brand {
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
}

.topbar .back {
  color: var(--paper);
  text-decoration: none;
  font-size: 14px;
  border: 1px solid var(--gold);
  padding: 6px 12px;
  border-radius: 6px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.who {
  font-size: 14px;
  opacity: 0.9;
}

.link-btn {
  cursor: pointer;
  color: var(--paper);
  font-size: 14px;
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--gold);
  padding: 6px 12px;
  border-radius: 6px;
}

.big-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.admin-box {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(231 198 107 / 40%);
  border-radius: 14px;
  padding: 22px;
  margin: 16px 0;
  overflow-x: auto;
}

.admin-box table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-box th,
.admin-box td {
  padding: 8px 10px;
  border-bottom: 1px solid rgb(231 198 107 / 25%);
  text-align: left;
}

.admin-box th {
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}

.admin-box .big-btn {
  padding: 8px 14px;
  min-width: auto;
  font-size: 14px;
  letter-spacing: 1px;
}

.danger-btn {
  background: linear-gradient(#c0392b, #a93226) !important;
  color: #fff !important;
}

/* ---- 对阵 / 我的比赛 ---- */

.bracket {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 6px;
  overflow-x: auto;
}

.round-col {
  min-width: 140px;
}

.round-title {
  color: var(--gold);
  font-size: 13px;
  margin: 4px 0 8px;
  letter-spacing: 1px;
}

.bm {
  background: rgb(0 0 0 / 20%);
  border: 1px solid rgb(231 198 107 / 25%);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  font-size: 13px;
}

.bm.done {
  opacity: 0.75;
}

.bm .p1,
.bm .p2 {
  padding: 2px 0;
}

.bm .p1.win {
  color: var(--gold);
  font-weight: 700;
}

.bm .mid {
  border-top: 1px dashed rgb(231 198 107 / 30%);
  margin-top: 6px;
  padding-top: 4px;
  font-size: 12px;
  opacity: 0.75;
}

/* ---- 128 席位大对阵表 ---- */

.bracket-note {
  display: block;
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 1px;
  opacity: 0.85;
}

.bracket.b128 {
  display: block;
  overflow-x: auto;
  padding-bottom: 10px;
  white-space: nowrap;
}

.bracket.b128 .round-col {
  display: inline-block;
  vertical-align: top;
  width: 168px;
  margin-right: 16px;
  white-space: normal;
}

.bracket.b128 .round-title {
  text-align: center;
  padding: 6px 0 8px;
  border-bottom: 1px solid rgb(231 198 107 / 35%);
}

.bracket.b128 .bm {
  margin-bottom: 12px;
  padding: 8px 10px 6px;
  border-left: 3px solid rgb(231 198 107 / 55%);
}

.bracket.b128 .bm-no {
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 1px;
}

.bracket.b128 .slot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 3px 2px;
  border-bottom: 1px dashed rgb(231 198 107 / 18%);
}

.bracket.b128 .slot em {
  font-family: "Courier New", monospace;
  font-style: normal;
  font-weight: 700;
  color: var(--gold);
}

.bracket.b128 .time {
  margin-top: 6px;
  padding: 2px 0;
  font-size: 12px;
  color: rgb(245 241 230 / 80%);
}

.bracket.b128 .time-val {
  color: var(--gold);
  letter-spacing: 1px;
}

.mine-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.mine-play {
  padding: 10px 18px;
  min-width: auto;
  font-size: 16px;
  letter-spacing: 2px;
  text-decoration: none;
}

.report-form {
  max-width: 320px;
  margin-top: 12px;
}

.report-form .field {
  display: inline-block;
  width: 48%;
  margin: 6px 1%;
}

.admin-bm {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgb(0 0 0 / 18%);
  border: 1px solid rgb(231 198 107 / 25%);
  border-radius: 8px;
  padding: 7px 10px;
  margin: 6px 0;
  font-size: 14px;
  flex-wrap: wrap;
}

.admin-bm.conflict {
  border-color: rgb(255 120 120 / 60%);
}

.admin-bm .players {
  font-weight: 600;
}

.admin-bm select {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid rgb(231 198 107 / 50%);
  background: rgb(0 0 0 / 30%);
  color: var(--paper);
}

.admin-bm .cfg {
  font-size: 12px;
  opacity: 0.85;
}

.admin-bm .done-badge {
  color: var(--gold);
  font-size: 12px;
}

.admin-login-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-login-row input[type="password"] {
  flex: 1;
  min-width: 220px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgb(231 198 107 / 50%);
  background: rgb(0 0 0 / 25%);
  color: var(--paper);
  font-size: 15px;
}

.wrap {
  width: 100%;
  max-width: 980px;
  padding: 28px 18px 60px;
  flex: 1;
}

h1.page-title {
  text-align: center;
  color: var(--gold);
  font-weight: 600;
  letter-spacing: 4px;
  margin: 8px 0 26px;
}

.btn-row {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.big-btn {
  cursor: pointer;
  border: none;
  border-radius: 14px;
  padding: 26px 34px;
  min-width: 180px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--ink);
  background: linear-gradient(var(--gold), #c9a848);
  box-shadow: 0 8px 18px rgb(0 0 0 / 35%);
  transition:
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

.big-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 22px rgb(0 0 0 / 40%);
}

.big-btn.secondary {
  background: linear-gradient(var(--wood-light), var(--wood));
  color: var(--paper);
}

.big-btn:active {
  transform: translateY(1px);
}

.card {
  background: rgb(255 255 255 / 6%);
  border: 1px solid rgb(231 198 107 / 40%);
  border-radius: 14px;
  padding: 22px;
  margin: 16px 0;
}

.card h2 {
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 20px;
  letter-spacing: 2px;
}

.notice-card {
  border-color: rgb(231 198 107 / 60%);
  background: rgb(231 198 107 / 8%);
}

.notice-text {
  margin: 0;
  color: var(--paper);
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 1px;
}

.rules-body {
  color: var(--paper);
  font-size: 15px;
  line-height: 1.7;
}

.rules-body p {
  margin: 0 0 10px;
}

.rules-body h3,
.rules-body h4 {
  margin: 16px 0 6px;
  color: var(--gold);
  font-weight: 600;
}

.rules-body ul {
  margin: 0 0 10px;
  padding-left: 20px;
}

/* ---- SEO 落地文案 ----
   home.html 上这段可抓取正文承载中文长尾词（在线台球/多人台球/免注册…）。
   搜索引擎真正能读的就是它，所以必须是真文案而不是隐藏层：不要改成
   visibility:hidden 或移到屏幕外，那属于给爬虫看的假内容。 */

.seo-list {
  margin: 0 0 14px;
  padding-left: 20px;
  line-height: 1.8;
}

.seo-list li {
  margin: 6px 0;
}

.seo-list b {
  color: var(--gold);
}

.seo-cta a {
  margin: 0 10px 0 0;
}

/* 首页底部的次要入口行：打赏 / 自助广告 / 充值积分。
   这三个是运营与商业入口，不属于练球工具，所以从首屏大按钮降级成小字链接。
   纯新增规则，沿用 --gold / --paper 配色，不改动任何已有选择器。 */
.foot-links {
  text-align: center;
  margin: 26px 0 0;
  font-size: 13px;
  color: rgb(245 241 230 / 55%);
}

.foot-links a {
  margin: 0 12px 0 0;
  color: var(--gold);
  text-decoration: none;
}

.foot-links a:hover {
  text-decoration: underline;
}

.foot-links a:last-child {
  margin-right: 0;
}

/* 合规提示条：积分性质、器材推荐性质这类必须让用户先看到的约束。
   用琥珀色左边框而不是红色 —— 这里陈述的是规则不是错误，
   红色会让人以为出了故障。 */
.compliance-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 18px;
  padding: 11px 14px;
  border: 1px solid rgb(231 198 107 / 40%);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  background: rgb(231 198 107 / 10%);
  font-size: 13px;
  line-height: 1.7;
  color: rgb(245 241 230 / 88%);
}

.compliance-note strong {
  color: var(--gold);
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.grid .item {
  background: rgb(0 0 0 / 15%);
  padding: 12px 14px;
  border-radius: 8px;
}

.grid .item span {
  display: block;
  font-size: 13px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.grid .item strong {
  font-size: 15px;
}

form .field {
  margin: 14px 0;
}

form label {
  display: block;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--gold);
}

form input[type="text"],
form input[type="password"],
form input[type="file"],
form textarea {
  width: 100%;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid rgb(231 198 107 / 50%);
  background: rgb(0 0 0 / 25%);
  color: var(--paper);
  font-size: 15px;
  font-family: inherit;
}

.captcha-box {
  display: flex;
  gap: 12px;
  align-items: center;
}

.captcha-code {
  font-family: "Courier New", monospace;
  font-size: 24px;
  letter-spacing: 6px;
  font-weight: 700;
  color: var(--gold);
  background: rgb(0 0 0 / 35%);
  padding: 8px 16px;
  border-radius: 8px;
  user-select: none;
}

.choose {
  display: flex;
  gap: 14px;
  margin: 10px 0;
}

.choose label {
  flex: 1;
  border: 2px solid rgb(231 198 107 / 40%);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  color: var(--paper);
  font-weight: 600;
}

.choose input {
  display: none;
}

.choose input:checked + span {
  color: var(--gold);
}

.choose label.checked {
  border-color: var(--gold);
  background: rgb(231 198 107 / 12%);
}

.avail-table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
  font-size: 14px;
}

.avail-table th {
  color: var(--gold);
  font-weight: 600;
  padding: 6px 4px;
  text-align: center;
  border-bottom: 1px solid rgb(231 198 107 / 30%);
}

.avail-table td {
  padding: 6px 4px;
  text-align: center;
}

.avail-day {
  color: var(--paper);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  padding-right: 8px;
}

.avail-cell {
  cursor: pointer;
}

.avail-box {
  width: 18px;
  height: 18px;
  accent-color: var(--gold);
  cursor: pointer;
}

.submit-btn {
  width: 100%;
  margin-top: 18px;
  cursor: pointer;
  border: none;
  border-radius: 10px;
  padding: 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ink);
  background: linear-gradient(var(--gold), #c9a848);
}

.qr-code {
  width: 200px;
  height: 200px;
  margin: 12px 0;
  object-fit: contain;
}

.msg {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
}

.msg.ok {
  background: rgb(31 122 77 / 50%);
  color: #d6ffdf;
}

.msg.err {
  background: rgb(150 40 40 / 50%);
  color: #ffd6d6;
}

.practice-frame,
.watch-frame {
  width: 100%;
  height: 78vh;
  border: 3px solid var(--gold);
  border-radius: 12px;
  background: #000;
}

.watch-placeholder {
  height: 78vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 3px dashed rgb(231 198 107 / 50%);
  border-radius: 12px;
  color: var(--paper);
}

@media (width <= 640px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

/* ---- 自助广告横幅 ---- */

.ad-banner-host {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 12px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  padding: 0 12px;
}

.ad-banner {
  position: relative;
  width: min(728px, 100%);
  max-width: 100%;
  aspect-ratio: 728 / 90;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 60px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgb(0 0 0 / 35%);
  pointer-events: auto;
}

.ad-banner-text {
  font-size: clamp(14px, 2.4vw, 22px);
  font-weight: 700;
  letter-spacing: 1px;
  color: #000;
  text-align: center;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.ad-banner-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 48px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(0 0 0 / 18%);
  border: none;
  cursor: pointer;
  font-size: 24px;
  font-weight: 700;
  color: inherit;
  line-height: 1;
}

.ad-banner-close:hover {
  background: rgb(0 0 0 / 32%);
}

/* 总访问量面板下方的灰色说明（未配置 / 数据延迟 / 统计起始日）。 */
.stats-note {
  margin-top: 10px;
  font-size: 13px;
  color: rgb(255 255 255 / 55%);
}