/* Layout: a court-side clipboard. One 720px column, a sticky tab bar, and the
   court diagram as the hero of every card. Style: neubrutalist, chosen for
   bright sun and sweaty thumbs: cream paper, 3px ink borders, hard offset
   shadows, ball-yellow for "you are here", blue for the primary action.
   Orange and mint teams read on blue, cream and dark. Dark mode swaps ink to
   cream and the shadow to ball-yellow. */
:root {
  --bg: #fffbe8;
  --surface: #ffffff;
  --surface-2: #f6f0d4;
  --fg: #111111;
  --muted: #4d4a3c;
  --ink: #111111;
  --shadow-ink: #111111;
  /* Outline colour and widths. Pickleball draws them in ink; tennis mode
     (tennis/styles/tennis.css) gives them a soft line of their own. */
  --line: var(--ink);
  --line-soft: #d9d3b8;
  --accent: #345d86;          /* buttons and links: a deeper grey-blue than the court (user 2026-10-05) */
  --male: #345d86; --female: #c2255c;
  --accent-fg: #ffffff;
  --mark: #e4ff3a;
  --mark-fg: #111111;
  /* Court a quieter blue (user 2026-10-05: fewer loud colours), so the team colours stand out. */
  --court: #3f6f9e;
  --court-nvz: #6f93b8;
  --court-line: #ffffff;
  --floor: #d8d0b2;
  --hl: rgba(228, 255, 58, 0.85);
  --hl-stroke: #111111;
  --ball: #e4ff3a;
  --ball-stroke: #111111;
  --team-a: #ff6b35;
  --team-b: #3ddc97;
  --team-fg: #111111;
  --warn-bg: #e4ff3a;
  --warn-fg: #111111;
  --fav: #e0245e;
  --bw: 3px;
  --bw2: 2px;
  --shadow: 4px 4px 0 var(--shadow-ink);
  --shadow-lg: 6px 6px 0 var(--shadow-ink);
  --font-display: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
  --font-num: "Space Grotesk", "Noto Sans TC", "PingFang TC", "Helvetica Neue", Arial, sans-serif;
  --radius: 12px;
  --radius-sm: 8px;
  --gutter: 16px;
  color-scheme: light;
}
/* Fonts per language (<html lang> comes from src/lang.js): Simplified Chinese
   uses SC faces; English puts a Latin stack first. */
:root:lang(zh-Hans) {
  --font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-num: "Space Grotesk", "Noto Sans SC", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
}
:root:lang(en) {
  --font-display: "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
  --font-body: "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
}
/* Light by default; dark only when chosen in settings (src/ui/settings.js). */
:root[data-theme="dark"] {
  --bg: #151510; --surface: #22221c; --surface-2: #2c2c24; --fg: #f7f4e4; --muted: #bdb9a3;
  --ink: #f7f4e4; --shadow-ink: #e4ff3a; --line-soft: #45443a; --accent: #9dbbdb; --accent-fg: #0d1530;
  --male: #9dbbdb; --female: #ff8fbd;
  --court: #2c4f73; --court-nvz: #4a6d8f; --court-line: #eef3ff; --floor: #4a4636; --hl: rgba(228, 255, 58, 0.7);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 900; line-height: 1.25; text-wrap: balance; margin: 0; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.2rem; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 0.875rem; }

/* Top bar */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10;
  background: var(--bg); border-bottom: var(--bw) solid var(--line);
  padding: 10px var(--gutter);
}
.topbar-inner { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; }
.brand h1 { font-family: var(--font-num); font-weight: 700; letter-spacing: -0.01em; }
.brand-mark { display: inline-block; width: 20px; height: 28px; border: var(--bw) solid var(--line); border-radius: 3px; position: relative; background: var(--court); }
.brand-mark::before { content: ""; position: absolute; left: 0; right: 0; top: 30%; bottom: 30%; background: var(--mark); }
.brand-mark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--ink); }
.tabs {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-left: auto;
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow); background: var(--surface);
}
.tab {
  border: 0; background: transparent; padding: 8px 14px; min-height: 44px;
  color: var(--fg); font-weight: 700; white-space: nowrap;
}
.tab + .tab { border-left: var(--bw) solid var(--line); }
.tab[aria-selected="true"] { background: var(--mark); color: var(--mark-fg); font-weight: 900; }
.topbar { transition: transform 0.2s ease; }
.topbar.is-hidden { transform: translateY(calc(-100% - 6px)); }
@media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }
.brand { color: var(--fg); text-decoration: none; min-height: 44px; }
/* Narrow phones: the brand and up to four top-bar icons (install, share, me,
   theme) stay on one line. */
@media (max-width: 389px) {
  .topbar-inner { gap: 8px 6px; }
  .brand h1 { font-size: 1.15rem; }
  .theme-btn, .install-btn.is-invite { width: 40px; height: 40px; }
}
.theme-btn {
  flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); box-shadow: var(--shadow);
}
.theme-btn[hidden] { display: none; }
.install-btn {
  flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px;
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--mark); color: var(--mark-fg); font-weight: 900; box-shadow: var(--shadow);
}
.install-btn[hidden] { display: none; }
/* Invite mode: a plain icon button, quieter than the yellow install button. */
.install-btn.is-invite { width: 44px; padding: 0; justify-content: center; background: var(--surface); color: var(--fg); }
.install-btn svg { width: 20px; height: 20px; }
.install-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow-ink); }
.install-sheet { max-width: min(360px, calc(100vw - 32px)); padding: 18px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-lg); }
.install-sheet::backdrop { background: rgba(0, 0, 0, 0.45); }
.install-sheet p { margin: 8px 0 14px; line-height: 1.6; }
.theme-btn svg { width: 22px; height: 22px; }
.theme-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow-ink); }
.tab span { pointer-events: none; }

/* Bottom navigation on phones: the four destinations in the thumb zone. The
   header keeps only the brand there. Desktop keeps the tabs in the header. */
.bottom-nav { display: none; }
/* Beta features (src/beta.js) are hidden until switched on: html gets beta-<id>. */
html:not(.beta-draw) .tab[data-route="draw"],
html:not(.beta-me) #me-btn,
html:not(.beta-me) .home-me { display: none; }
@media (max-width: 767px) {
  .topbar .tabs { display: none; }
  /* The brand takes the free space, so the icons on the right (install,
     我的戰績 when its Beta is on, ⚙︎) always sit together whichever are shown. */
  .brand { margin-right: auto; }
  .topbar { padding-top: 8px; padding-bottom: 8px; }
  .bottom-nav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; /* one even column per shown tab */
    position: fixed; z-index: 15; left: 0; right: 0; bottom: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--bg); border-top: var(--bw) solid var(--line);
  }
  .bottom-nav .tab {
    display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; padding: 4px;
    border: var(--bw) solid transparent; border-radius: var(--radius-sm); background: transparent;
    color: var(--fg); font-size: 0.8rem; font-weight: 700;
  }
  .bottom-nav .tab + .tab { border-left: var(--bw) solid transparent; }
  .bottom-nav .tab svg { width: 24px; height: 24px; }
  .bottom-nav .tab[aria-selected="true"] { background: var(--mark); color: var(--mark-fg); border-color: var(--ink); font-weight: 900; }
  main.page { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } /* clears the fixed bottom bar; main. beats the base .page rule below */
}

/* Home */
/* Plenty of air around the slogan: it carries the page. */
.home-hero { display: grid; gap: 12px; align-content: center; min-height: clamp(220px, 32vh, 340px); padding: 16px 0 0; }
.home-slogan { display: grid; gap: 2px; font-family: var(--font-num); font-weight: 700; font-size: clamp(2.3rem, 11vw, 4rem); line-height: 1.02; letter-spacing: -0.02em; }
.home-slogan .mark { justify-self: start; background: var(--mark); color: var(--mark-fg); padding: 0 8px; margin-left: 3px; box-shadow: 0 0 0 var(--bw) var(--ink); }
.home-entries { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-right: 6px; }
.home-entry {
  display: grid; gap: 4px; align-content: start; min-height: 112px; padding: 14px;
  background: var(--surface); color: var(--fg); text-decoration: none;
  border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.home-entry b { font-size: 1.2rem; font-weight: 900; }
.home-entry span { color: var(--muted); font-size: 0.9rem; }
/* A card left alone on the last row takes the full width. */
.home-entry:nth-child(2n+1):last-child { grid-column: 1 / -1; }
.home-entry.lead { background: var(--mark); color: var(--mark-fg); }
.home-entry.lead span { color: var(--mark-fg); }
.home-partner { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; margin-top: 14px; padding: 12px 16px; min-height: 44px; border: var(--bw2) dashed var(--line); border-radius: var(--radius); color: var(--fg); text-decoration: none; }
.home-partner b { font-weight: 900; }
.home-partner span { color: var(--muted); font-size: 0.85rem; grid-column: 1; }
.home-partner .home-partner-go { grid-column: 2; grid-row: 1 / span 2; font-size: 1.3rem; color: var(--fg); }
.home-entry:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--shadow-ink); }

/* Page column */
.page { max-width: 720px; margin: 0 auto; padding: 24px var(--gutter) 64px; display: grid; gap: 22px; }
.view { display: grid; gap: 20px; align-content: start; min-width: 0; }
.view > * { min-width: 0; }
.view[hidden] { display: none; }
.section-head { display: grid; gap: 6px; justify-items: start; }
.section-head h2 { background: var(--mark); color: var(--mark-fg); padding: 0 8px; margin-left: 3px; box-shadow: 0 0 0 var(--bw) var(--ink); }
.section-head .sub { color: var(--muted); font-weight: 700; }
.intro { color: var(--muted); max-width: 60ch; }

/* Rules index and single-rule pages */
.filters { display: grid; gap: 10px; padding: 12px; margin-right: 4px; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.seg-row { display: flex; align-items: center; gap: 10px; }
.seg-label { flex: none; width: 2.5em; font-weight: 900; }
/* English labels and buttons are longer than two Chinese characters. */
:lang(en) .seg-label { width: 4.6em; font-size: 0.9rem; }
:lang(en) .seg button { padding-left: 6px; padding-right: 6px; font-size: 0.9rem; }
:lang(en) .bar-seg button { padding: 0 6px; font-size: 0.8rem; }
.seg { flex: 1; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: 0; background: var(--surface); color: var(--fg); min-height: 44px; padding: 6px 8px; font-weight: 700; }
.seg button + button { border-left: var(--bw) solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); font-weight: 900; }
.applies { align-items: center; }
.applies .muted { border: 0; padding: 0; }
.applies .en-tag { border: 0; padding: 0; }
.applies .en-tag, th .en-tag, .drawer-note .en-tag { font-size: 1em; }
.drawer-note { margin: 4px 4px 8px; font-size: 0.875rem; color: var(--muted); }
.drawer-note b { color: var(--fg); }
.en-tag { font-family: var(--font-num); font-weight: 700; font-size: 0.8em; opacity: 0.7; overflow-wrap: anywhere; }
.rule-group { display: grid; gap: 10px; }
.rule-group h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rule-list { display: grid; gap: 10px; }
.rule-link {
  display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; margin-right: 4px;
  background: var(--surface); color: var(--fg); text-decoration: none;
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow);
}
.rule-link::after { content: "›"; font-family: var(--font-num); font-size: 1.6rem; font-weight: 700; line-height: 1; flex: none; }
.rule-link:active { transform: translate(2px, 2px); box-shadow: none; }
.rule-link-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rule-link-text b { font-weight: 900; font-size: 1.05rem; }
.rule-link-sum { color: var(--muted); font-size: 0.875rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rule-top { display: flex; align-items: center; gap: 12px; }
.back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 10px;
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--fg); font-weight: 900; text-decoration: none;
}
.back::before { content: "‹"; font-family: var(--font-num); font-size: 1.4rem; line-height: 1; }
.section-note { margin: -4px 0 2px; color: var(--muted); }
.try-score { margin-top: 4px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
.seg button { line-height: 1.15; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-right: 4px; }
.pager-link {
  display: grid; gap: 0; align-content: center; min-height: 64px; padding: 8px 12px; min-width: 0;
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--fg); text-decoration: none; box-shadow: var(--shadow);
}
.pager-link b { font-weight: 900; overflow-wrap: anywhere; }
.pager-link.next { text-align: right; background: var(--accent); color: var(--accent-fg); }
.pager-link.next .muted { color: var(--accent-fg); opacity: 0.85; }
.pager-link:active { transform: translate(2px, 2px); box-shadow: none; }

/* Rules drawer: a left sheet opened by the tab on the left edge */
.rules-page { display: grid; gap: 20px; min-width: 0; }
.rules-page > * { min-width: 0; }
.rules-bar {
  position: sticky; z-index: 9; top: var(--topbar-h, 0px); display: flex; align-items: center; gap: 12px;
  margin: -8px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter); background: var(--bg); border-bottom: var(--bw2) solid var(--line);
  transition: top 0.2s ease;
}
.chrome-hidden .rules-bar { top: 0; }
/* Phones, under 規則 and 抽籤: no top bar at all; the bottom bar handles
   navigation and, under 規則, the 目錄 bar sits at the top. */
@media (max-width: 767px) {
  html[data-tab="rules"] .topbar, html[data-tab="draw"] .topbar, html[data-tab="score"] .topbar,
  html[data-tab="venues"] .topbar { display: none; }
  html[data-tab="rules"] .rules-bar, html[data-tab="venues"] .venue-bar { top: env(safe-area-inset-top, 0px); }
}
@media (prefers-reduced-motion: reduce) { .rules-bar { transition: none; } }
.bar-filters { flex: 1; min-width: 0; display: flex; gap: 8px; }
.bar-seg button { min-height: 44px; padding: 0 9px; font-size: 0.85rem; white-space: nowrap; line-height: 1.15; }
.bar-seg { flex: 1 1 auto; }
.seg-en { display: block; font-size: 0.68rem; font-weight: 600; opacity: 0.8; }
@media (max-width: 340px) { .bar-filters { gap: 4px; } .bar-seg button { padding: 0 5px; font-size: 0.8rem; } }
/* First visit only: the hint sits inside the bar, on its own line under the
   switches, so it never covers the page title. */
.rules-bar:has(.filter-hint:not([hidden])) { flex-wrap: wrap; }
.filter-hint {
  position: relative; flex: 1 0 100%; margin: 6px 0 2px;
  padding: 8px 12px; border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); background: var(--ink); color: var(--bg); font-weight: 700; font-size: 0.9rem;
}
.filter-hint::before { content: ""; position: absolute; left: 22px; top: -8px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--ink); }
.filter-hint[hidden] { display: none; }
.link-btn { min-height: 44px; padding: 0 10px; border: var(--bw2) solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font-weight: 700; }
.bar-share { flex: none; }
/* Share is an icon only, the same square everywhere. */
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; padding: 0;
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font-weight: 900;
}
.share-btn svg { width: 20px; height: 20px; }
.rule-top .share-btn { margin-left: auto; }
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.toast-reload { border: 0; background: none; color: inherit; font: inherit; font-weight: 900; text-decoration: underline; min-height: 44px; cursor: pointer; }
.toast {
  position: fixed; z-index: 30; left: 50%; transform: translateX(-50%); bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100% - 32px); padding: 10px 14px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm);
  background: var(--ink); color: var(--bg); font-weight: 700; box-shadow: var(--shadow);
}
.toast[hidden] { display: none; }
.toast-url { user-select: all; overflow-wrap: anywhere; font-family: var(--font-num); }
@media (min-width: 768px) { .toast { bottom: 24px; } }
.rules-where small, .rules-where b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rules-where small { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.rules-where b { font-weight: 900; }
/* Contents tab on the left edge, low down (out of the reading area, near
   the thumb, just above the bottom bar on phones): a narrow ball-yellow tag
   with vertical text. The button is 44px wide for the thumb; only the left
   28px are drawn. */
.drawer-tab {
  position: fixed; z-index: 12; left: 0; bottom: 32px;
  width: 44px; height: 92px; padding: 0; border: 0; background: transparent; touch-action: none;
}
.drawer-tab span {
  position: absolute; left: 0; top: 0; bottom: 0; width: 28px; display: grid; place-items: center;
  writing-mode: vertical-rl; text-orientation: upright; letter-spacing: 0.2em; font-weight: 900; font-size: 0.85rem;
  background: var(--mark); color: var(--mark-fg); border: var(--bw2) solid var(--line); border-left: 0; border-radius: 0 10px 10px 0;
  box-shadow: 2px 2px 0 var(--shadow-ink); opacity: 0.92;
}
/* Latin text reads sideways, not one stacked letter at a time. */
:lang(en) .drawer-tab span { text-orientation: mixed; letter-spacing: 0.05em; }
.drawer-tab:active span { transform: translateX(3px); }
@media (max-width: 767px) { .drawer-tab { bottom: calc(112px + env(safe-area-inset-bottom, 0px)); } }
#view-rules[hidden] .drawer-tab { display: none; }
html.is-fullscreen .drawer-tab { display: none; }
.drawer {
  position: fixed; inset: 0 auto 0 0; margin: 0; padding: 0; width: min(320px, 86vw); height: 100dvh; max-height: 100dvh; max-width: none;
  border: 0; border-right: var(--bw) solid var(--line); background: var(--bg); color: var(--fg);
  touch-action: pan-y; transition: transform 0.2s ease;
}
.drawer[open] { display: flex; flex-direction: column; animation: drawer-in 0.2s ease; }
.drawer::backdrop { background: rgba(0, 0, 0, 0.45); }
@keyframes drawer-in { from { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) { .drawer[open] { animation: none; } }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px; border-bottom: var(--bw) solid var(--line); font-size: 1.1rem;
}
.drawer-close { width: 44px; height: 44px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-size: 1.4rem; line-height: 1; font-weight: 700; }
.drawer-body { overflow-y: auto; padding: 12px 12px calc(24px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 4px; align-content: start; }
.drawer-body h3 { font-size: 0.9rem; color: var(--muted); margin: 14px 4px 4px; }
.drawer-body h4 { font-size: 0.8rem; color: var(--muted); font-weight: 700; margin: 8px 4px 2px; }
.format-group { margin: 6px 0 -2px; font-size: 0.95rem; }
.drawer-body ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.drawer-body a {
  display: block; min-height: 44px; padding: 9px 12px; line-height: 1.45; border: 2px solid transparent; border-radius: var(--radius-sm);
  color: var(--fg); text-decoration: none; font-weight: 700;
}
.drawer-body a:hover { border-color: var(--ink); }
.drawer-body a[aria-current="page"] { background: var(--mark); color: var(--mark-fg); border-color: var(--ink); font-weight: 900; }

/* Cards */
.card {
  background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 16px; display: grid; gap: 12px; min-width: 0; margin-right: 6px;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.rule-no { font-family: var(--font-num); font-size: 0.75rem; font-weight: 700; color: var(--bg); background: var(--ink); border-radius: 4px; padding: 2px 8px; white-space: nowrap; }
.summary { font-size: 1.05rem; font-weight: 700; max-width: 60ch; }
details { border-top: var(--bw) solid var(--line); padding-top: 10px; }
summary { cursor: pointer; color: var(--fg); font-weight: 900; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 8px; }
summary::-webkit-details-marker { display: none; }
summary::before {
  content: "＋"; display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none;
  border: var(--bw) solid var(--line); border-radius: 6px; background: var(--mark); color: var(--mark-fg); line-height: 1;
}
details[open] summary::before { content: "－"; }
.detail { display: grid; gap: 8px; padding-top: 8px; max-width: 62ch; }
.detail li { margin: 0; }
.detail ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* Court */
.court-wrap { width: 100%; max-width: 420px; margin: 0 auto; }
.scene-wrap .court-wrap { max-width: 300px; touch-action: pan-y; }
@media (max-width: 767px) { .scene-wrap .court-wrap { max-width: none; width: calc(100% + 16px); margin: 0 -8px; } }
.court.landscape .player text { font-size: 19px; }
.court.landscape .player.off text { font-size: 17px; }
.court.landscape .court-zone { font-size: 16px; }
/* "Kitchen" is wider than 廚房: smaller so it sits inside the kitchen with room on both sides. */
:lang(en) .court.landscape .court-zone { font-size: 11px; }
.court.landscape .court-dim { font-size: 16px; }
svg.court { width: 100%; height: auto; display: block; overflow: visible; }
/* 借場地打: host floor and lines, pickleball lines reused (white) or taped (yellow). */
.setup-body { display: grid; gap: 10px; }
.setup-body p { margin: 0; }
.setup-group { display: grid; gap: 8px; border-top: 2px solid var(--line-soft); padding-top: 12px; }
.setup-group h4 { margin: 0; font-size: 1.05rem; }
.setup-group svg.setup { max-width: 520px; }
/* Paddle drawings (src/paddle.js). */
.rule-figure { margin: 12px 0; display: grid; gap: 6px; justify-items: center; }
.paddle-fig { width: 100%; max-width: 420px; height: auto; display: block; }
.rule-figure .paddle-fig[viewBox^="0 0 330"] { max-width: 260px; }
.picker-shapes .paddle-fig { max-width: 300px; margin: 0 auto; }
.pd-face { fill: var(--court); }
.pd-edge { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.pd-grip { fill: var(--ink); }
.pd-tape { fill: none; stroke: var(--mark); }
.pd-tape-fill { fill: var(--mark); }
.pd-spot { fill: var(--mark); opacity: 0.85; stroke: #111111; stroke-width: 3; }
.pd-dim { stroke: var(--muted); stroke-width: 3; }
.pd-arrowhead { fill: var(--muted); }
.pd-lead { stroke: var(--muted); stroke-width: 2; stroke-dasharray: 4 4; }
.pd-label { font-size: 24px; font-weight: 700; fill: var(--fg); }
.pd-pin circle { fill: var(--surface); stroke: var(--ink); stroke-width: 4; }
.pd-pin text { font-size: 24px; font-weight: 900; fill: var(--fg); }
.rule-figure figcaption { display: grid; gap: 6px; max-width: 420px; }
.figure-keys { margin: 0; padding-left: 1.4em; display: grid; gap: 4px; }
.pd-name { font-size: 26px; font-weight: 900; fill: var(--fg); }
.pd-shape.dim { opacity: 0.3; }
.paddle-fig.cores { max-width: 360px; }
.pd-skin { fill: var(--court); }
.pd-core { fill: var(--surface); }
.pd-foam { fill: var(--mark); opacity: 0.55; }
.pd-bubble { fill: var(--surface); stroke: var(--muted); stroke-width: 2; }
.pd-cell { fill: none; stroke: var(--muted); stroke-width: 3; }
.pd-cut { fill: none; stroke: var(--ink); stroke-width: 4; }
.pd-shape.picked .pd-edge { stroke: var(--mark); stroke-width: 10; }
/* 怎麼選球拍: sport chips, then the suggestion. */
.picker { display: grid; gap: 10px; margin: 12px 0; padding: 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.picker p { margin: 0; }
.picker-options { display: flex; flex-wrap: wrap; gap: 8px; }
.picker-result:empty { display: none; }
.picker-result { display: grid; gap: 8px; }
.picker-result .me-row > span { flex: none; }
.picker-result ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.setup-group ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.setup-floor { fill: var(--floor); stroke: var(--ink); stroke-width: 6; }
.setup-pb { stroke: none; }
.setup-host { stroke: var(--muted); stroke-width: 3; stroke-dasharray: 8 6; }
.setup-reuse-edge, .setup-tape-edge { stroke: #111111; stroke-width: 11; stroke-linecap: square; }
.setup-reuse { stroke: var(--court-line); stroke-width: 7; stroke-linecap: square; }
.setup-tape { stroke: var(--mark); stroke-width: 7; stroke-linecap: square; }
.setup-net { stroke: var(--ink); stroke-width: 4; stroke-dasharray: 3 4; }
.setup-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.setup-legend i { display: inline-block; width: 24px; height: 6px; margin-right: 6px; vertical-align: middle; outline: 2px solid #111111; }
.setup-legend .lg-reuse { background: var(--court-line); }
.setup-legend .lg-tape { background: var(--mark); }
.setup-legend .lg-host { outline: none; background: repeating-linear-gradient(90deg, var(--muted) 0 8px, transparent 8px 14px); }
.court-surface { fill: var(--court); stroke: var(--ink); stroke-width: 8; }
.court-nvz { fill: var(--court-nvz); }
.court-line { stroke: var(--court-line); stroke-width: 3; fill: none; }
.court-net { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 4 3; }
.court-post { fill: var(--ink); }
.court-hl { fill: var(--hl); stroke: var(--hl-stroke); stroke-width: 2; }
.hl-baseline-near, .hl-baseline-far, .hl-kitchenLine-near, .hl-kitchenLine-far, .hl-net { fill: var(--ball); stroke: var(--ball-stroke); stroke-width: 1.5; }
.court-dim { font-size: 12px; fill: var(--muted); font-family: var(--font-num); font-weight: 700; }
.court-zone { font-size: 13px; fill: var(--court-line); font-weight: 700; }
.ball-seg { stroke: var(--ball); stroke-width: 2.5; stroke-dasharray: 6 5; opacity: 0.55; }
.ball-seg-current { opacity: 1; stroke-width: 3; }
.ball-bounce { fill: none; stroke: var(--ball); stroke-width: 2; opacity: 0.9; }
.ball circle { fill: var(--ball); stroke: var(--ball-stroke); stroke-width: 1.5; }
.ball, .player { transition: transform 0.35s ease; }
@media (prefers-reduced-motion: reduce) { .ball, .player { transition: none; } }
.player circle { stroke: var(--ink); stroke-width: 2.5; }
.player.team-A circle { fill: var(--team-a); }
.player.team-B circle { fill: var(--team-b); }
.player text { font-size: 13px; font-weight: 700; fill: var(--team-fg); font-family: var(--font-body); }
.player.serving circle:first-child { stroke: var(--ball); stroke-width: 4; }
.player .serve-mark { fill: var(--ball); stroke: var(--ball-stroke); stroke-width: 1.5; }
.player.dim { opacity: 0.6; }

/* Scene carousel */
.scene-wrap { display: grid; gap: 10px; }
.steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 0; }
.steps::-webkit-scrollbar { display: none; }
.step { flex: 0 0 100%; scroll-snap-align: start; padding: 2px 3px; min-width: 0; }
.step-caption {
  min-height: 3.2em; font-weight: 700; background: var(--mark); color: var(--mark-fg);
  border: var(--bw) solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px;
}
.step-no { font-family: var(--font-num); font-weight: 700; margin-right: 8px; }
.scene-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dots { display: flex; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: var(--bw2) solid var(--line); padding: 0; }
.dot.active { background: var(--ink); }
.btn {
  border: var(--bw) solid var(--line); background: var(--surface); color: var(--fg); border-radius: var(--radius-sm);
  padding: 8px 16px; min-height: 48px; font-weight: 900;
}
.btn:not(:disabled):active { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn-primary { background: var(--accent); color: var(--accent-fg); box-shadow: var(--shadow); }
.btn-ghost { border-style: dashed; background: transparent; }
.scene-nav .btn-ghost { border-style: solid; background: var(--surface); }
.btn-block { width: calc(100% - 4px); }

/* Compare table */
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.925rem; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 2px solid var(--line-soft); vertical-align: top; }
thead th { border-bottom: var(--bw) solid var(--line); }
th { color: var(--fg); font-weight: 900; white-space: nowrap; }
td:first-child { font-weight: 700; white-space: nowrap; }

/* Formats */
.formats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.format-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 0.8rem; color: var(--fg); }
.format-meta span { border: var(--bw2) solid var(--line); border-radius: 4px; padding: 0 6px; font-weight: 700; }
.format-meta .venue-closed { background: var(--warn-bg); color: var(--warn-fg); }
/* 照片 pill: a dashed, rounded tag that links out; the link is 44px tall, the pill inside stays tag-sized. */
.venue-photos { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; color: var(--fg); text-decoration: none; }
.venue-photos b { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: var(--bw2) dashed var(--line); border-radius: 999px; background: var(--surface); }
.venue-photos svg { width: 15px; height: 15px; flex: none; }
.venue-photos b svg:last-child { width: 12px; height: 12px; margin-left: -1px; }
.format ol { margin: 0; padding-left: 1.3em; display: grid; gap: 4px; }
.format-tip { background: var(--surface-2); border: var(--bw2) dashed var(--line); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.9rem; }

/* Glossary */
.glossary { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.term { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface); border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); }
.term b { font-size: 1rem; font-weight: 900; }
.term .en { color: var(--accent); font-family: var(--font-num); font-weight: 700; font-size: 0.85rem; }
.faq { display: grid; gap: 10px; }
.faq details { border: var(--bw) solid var(--line); border-radius: var(--radius-sm); padding: 4px 12px; background: var(--surface); }
.faq summary { color: var(--fg); }
.faq p { padding: 6px 0 8px; max-width: 60ch; }

/* Forms */
/* minmax(0, 1fr): a native date / time box (Android) cannot push past its column. */
.field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field label { font-weight: 900; font-size: 0.925rem; }
.input, select.input {
  border: var(--bw) solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 8px 12px; min-height: 48px; width: 100%; min-width: 0; font-weight: 700;
  /* Our own text colour, so a phone's forced dark mode can't leave white text on the white box. */
  color: var(--fg); -webkit-text-fill-color: var(--fg);
}
.input::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1 1 140px; min-width: 0; }
.field-label { font-weight: 900; font-size: 0.925rem; }
.card .filters { padding: 0; border: 0; box-shadow: none; background: transparent; margin-right: 0; }
.mode-hint { color: var(--muted); min-height: 1.5em; }
.mode-tag { justify-self: center; padding: 2px 10px; border: var(--bw2) solid var(--line); border-radius: 999px; font-weight: 900; font-size: 0.9rem; }
.team-fields { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
@media (max-width: 480px) { .team-fields { grid-template-columns: 1fr; } }
.team-label { display: flex; align-items: center; gap: 8px; font-weight: 900; }
.swatch { width: 16px; height: 16px; border-radius: 50%; display: inline-block; border: var(--bw2) solid var(--line); }
.swatch-A { background: var(--team-a); }
.swatch-B { background: var(--team-b); }

/* Scoreboard play */
.board { --board-gap: 16px; display: grid; gap: var(--board-gap); position: relative; }
.board > .share-btn { position: absolute; top: -6px; right: -6px; }
/* Full screen: no frame, half see-through, like a video player's corner icon. */
.fs-btn {
  position: absolute; top: -6px; left: -6px; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: none; color: var(--fg); opacity: 0.55;
}
.fs-btn:hover, .fs-btn:focus-visible { opacity: 1; }
.fs-btn svg { width: 22px; height: 22px; }
.icon-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Reset keeps its distance from undo. */
.board .toolbar #reset { margin-left: 18px; }
/* After a game: one row. Undo and reset shrink to icons (their names stay
   for screen readers); 再來一局 and 分享到 IG keep their words. */
.board .toolbar.is-finished { flex-wrap: nowrap; gap: 6px; }
.board .toolbar.is-finished .btn { padding: 8px 10px; white-space: nowrap; font-size: 0.95rem; }
.board .toolbar.is-finished .icon-btn { gap: 4px; }
/* One flat row: a raised 再來一局 next to flat buttons looks misaligned. */
.board .toolbar.is-finished .btn-primary { box-shadow: none; }
.board .toolbar.is-finished #undo, .board .toolbar.is-finished #reset { width: 44px; min-width: 44px; padding: 0; justify-content: center; margin-left: 0; }
.board .toolbar.is-finished .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.board #to-draw { margin: 0 auto 10px; display: block; }
.board #share-score .lbl-short { display: none; }
@media (max-width: 379px) { .board #share-score .lbl-long { display: none; } .board #share-score .lbl-short { display: inline; } }
.icon-btn svg { width: 20px; height: 20px; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.announce {
  text-align: center; display: grid; gap: 4px; padding: 14px 10px; border-radius: var(--radius-sm);
  background: #111111; color: #ffffff; border: var(--bw) solid var(--line);
}
.announce .big { font-family: var(--font-num); font-size: clamp(3.5rem, 18vw, 5.5rem); font-weight: 700; line-height: 1; letter-spacing: 0.02em; color: var(--mark); }
.announce .who { color: #ffffff; font-weight: 700; }
/* Two lines kept for who serves, so a long name wrapping mid-game moves nothing below. */
.board.sb .announce .who { line-height: 1.3; min-height: 2.6em; display: grid; align-content: center; }
/* A sticker on the top edge, so the board keeps its height. */
.announce { position: relative; }
.announce .game-point { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 1px 10px; font-size: 0.85rem; line-height: 1.5; border: 2px solid #111111; border-radius: 999px; background: var(--mark); color: var(--mark-fg); font-weight: 900; }
.score-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-right: 5px; }
.score-btn {
  border: var(--bw) solid var(--line); border-radius: var(--radius); min-height: 110px; display: grid; gap: 2px; align-content: center; justify-items: center;
  color: var(--team-fg); font-weight: 900; padding: 10px; box-shadow: var(--shadow-lg);
}
.score-btn:not(:disabled):active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--shadow-ink); }
.score-btn.team-A { background: var(--team-a); }
.score-btn.team-B { background: var(--team-b); }
.score-btn .pts { font-family: var(--font-num); font-size: 3.2rem; font-weight: 700; line-height: 1; }
.score-btn .name { font-size: 0.95rem; }
.score-btn:disabled { opacity: 0.5; cursor: default; }
.banner { background: var(--warn-bg); color: var(--warn-fg); border: var(--bw) solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-weight: 700; display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.banner .btn { min-height: 44px; padding: 6px 12px; background: #ffffff; color: #111111; border-color: #111111; }
.winner { text-align: center; font-family: var(--font-display); font-weight: 900; font-size: 1.5rem; }
.board .court-wrap { max-width: 300px; }
/* After the side switch the near team (drawn left when lying down) is 乙, so the buttons follow. */
.score-row.switched .team-A { order: 2; }
@media (max-width: 767px) { .board .court-wrap { max-width: none; width: calc(100% + 16px); margin: 0 -8px; } }
/* Desktop keeps the upright court under the buttons so they stay on screen. */
@media (min-width: 768px) { .board #board-court { order: 1; } }
/* Phones, during a game: the page title folds away too (the top bar is
   already hidden under 計分) so the board gets the screen. */
@media (max-width: 767px) {
  #view-score.score-playing .section-head { display: none; }
}
/* Short phones: keep the score buttons above the bottom bar. */
@media (max-width: 767px) and (max-height: 760px) { .board { --board-gap: 10px; } .announce .big { font-size: 3.2rem; } .score-btn { min-height: 92px; } }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Pickleball scoreboard (.sb, user 2026-10-04: line things up, make it look good).
   Tennis keeps its own board. Top row: full screen, mode, hand-over, same size. */
.board-top { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.board-top .mode-tag { justify-self: center; margin: 0; text-align: center; font-size: 0.85rem; line-height: 1.3; }
.board.sb .board-top .fs-btn, .board.sb .board-top .share-btn { position: static; opacity: 1; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
/* Point buttons: same height, the number on one line, names on one line, then a small 贏這球. */
.board.sb .score-btn { min-height: 132px; grid-template-rows: auto auto auto; gap: 4px; }
.board.sb .score-btn .name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; }
.board.sb .score-btn .sub { font-size: 0.8rem; font-weight: 700; opacity: 0.75; }
/* Undo and reset line up under the two point buttons. */
/* Before the first rally: tap a player to serve, or flip a coin (a yellow tip under the court). */
.court-wrap.picking .player { cursor: pointer; }
.sb-first-tip { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); z-index: 1; width: max-content; max-width: calc(100% - 16px); margin: 0; padding: 2px 12px; border: 2px solid #111111; border-radius: 999px; background: var(--surface); color: var(--fg); font-weight: 900; font-size: 0.9rem; text-align: center; }
/* The tip is a note, not a mark: white like the mode tag (user 2026-10-05); yellow stays for the score and the server. */
/* Lying down, the tip sits halfway between the court's bottom line (18.4% of the
   picture above its bottom edge) and the score buttons one board gap below: even space above and below. */
.court-wrap.land > .sb-first-tip { bottom: calc(9.2% - var(--board-gap, 16px) / 2 - 15.5px); }
.sb-first-tip button { font: inherit; color: inherit; background: none; border: 0; padding: 10px 2px; margin: -10px 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* 換場 before the first rally: a small round ⇄ on the end of the net (top when lying down, right when upright). */
.board .court-wrap { position: relative; }
/* What is happening (game line or set table, the call, the court) sits in one box that the layout
   ignores, except in full screen on a phone on its side (the left column). */
.board .sb-info { display: contents; }
.sb-ends { position: absolute; top: 50%; right: -6px; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: var(--bw2) solid var(--line); border-radius: 50%; background: var(--surface); color: var(--fg); cursor: pointer; }
.court-wrap.land .sb-ends { top: -6px; right: auto; left: 50%; transform: translateX(-50%); }
.sb-ends svg { width: 20px; height: 20px; }
/* The deciding-game reminder lies across the middle of the court, so nothing below it moves. */
.court-wrap > .banner { position: absolute; left: 8px; right: 8px; top: 50%; transform: translateY(-50%); z-index: 2; box-shadow: var(--shadow-lg); }
/* Best of three: which game, and games won so far. */
.sb-game { margin: 0; display: flex; justify-content: center; gap: 12px; font-weight: 900; }
.board.sb .sb-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-right: 5px; }
.board.sb .sb-tools .btn, .board.sb .sb-tools #reset { justify-content: center; margin: 0; }
.board.sb .sb-tools .btn-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* A finished game: winner and score big, 分享到 IG first, the rest in one quiet row. */
.board.sb .sb-share { justify-content: center; min-height: 54px; font-size: 1.1rem; }
.board.sb .sb-share svg { width: 22px; height: 22px; }
.sb-next { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sb-next .btn { justify-content: center; padding: 6px; white-space: nowrap; min-height: 48px; }
.board.sb #to-draw { margin: 0; }
/* 輪流上場 (src/ui/rotation.js): the list, the four on court, the queue. Tap to pick, tap another to swap. */
.rot-card { display: grid; gap: 10px; padding: 14px; border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rot-card p { margin: 0; }
.rot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rot-head b { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.rot-icon, .sb-trophy { width: 22px; height: 22px; flex: none; }
/* A won game stays on the board: the result in the score box (trophy first),
   the point buttons where they were, unpressable, the winner's ringed. */
.announce .who .sb-trophy { width: 1em; height: 1em; vertical-align: -0.12em; margin-right: 6px; color: var(--mark); }
/* A team or server named in its colour (no 甲隊／乙隊 on the board). */
.team-chip { display: inline-block; padding: 0 8px; border-radius: 999px; background: var(--team-a); color: var(--team-fg); font-weight: 900; white-space: nowrap; }
.team-chip.team-B { background: var(--team-b); }
.announce .game-point.team-A { background: var(--team-a); color: var(--team-fg); }
.announce .game-point.team-B { background: var(--team-b); color: var(--team-fg); }
.board.sb .score-btn.won:disabled { opacity: 1; outline: 4px solid var(--mark); outline-offset: -4px; }
.board.sb .score-btn.lost:disabled { opacity: 0.45; box-shadow: none; }
.board.sb .score-btn:disabled .sub { visibility: hidden; }
.rot-roster { display: flex; flex-wrap: wrap; gap: 6px; }
.rot-chip { display: inline-flex; align-items: center; min-height: 40px; padding-left: 12px; border: var(--bw2) solid var(--line); border-radius: 999px; font-weight: 700; }
.rot-chip button { width: 36px; min-height: 40px; border: 0; background: none; color: var(--muted); font-size: 1.1rem; }
.rot-chip .rot-chip-name { width: auto; padding: 0; color: var(--fg); font: inherit; font-weight: 700; font-size: 1rem; }
.rot-list summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 44px; align-content: center; cursor: pointer; }
.rot-list[open] summary { margin-bottom: 8px; }
.rot-add { border-style: dashed; background: none; color: var(--fg); font: inherit; font-weight: 700; padding: 0 14px; }
.rot-new { width: 8.5em; min-height: 40px; outline: none; }
.rot-new:focus { border-style: solid; }
.rot-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.rot-team { display: grid; gap: 6px; padding: 8px; border-radius: var(--radius-sm); }
.rot-team.team-A { background: var(--team-a); }
.rot-team.team-B { background: var(--team-b); }
.rot-name { min-height: 44px; padding: 4px 12px; border: var(--bw2) solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rot-team .rot-name { border-color: transparent; }
.rot-name.picked { outline: 3px dashed var(--fg); outline-offset: 2px; }
.rot-queue { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* A folded part of the scoreboard as one line (user 2026-10-05): what it is,
   the current value, and the word to tap (改 / 調整 / 開啟). */
.sum-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.sum-row .sum-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sum-row small { color: var(--muted); font-weight: 700; font-size: 0.8rem; }
.sum-row b { font-size: 1rem; }
/* A team never splits across lines; only a team longer than the row wraps inside. */
.sum-team { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.sum-row .sum-go { font-weight: 800; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.sum-row .rot-icon { flex: none; }
.sb-setup .sb-more[hidden] { display: none; }
.sb-setup .sb-more { display: grid; gap: 12px; }
.sb-setup .sb-more-row:not(:empty) { margin: 12px 0; }
/* 下一場開打 says who plays. */
.board.sb .sb-go { display: grid; gap: 2px; justify-items: center; }
.board.sb .sb-go small { font-weight: 700; opacity: 0.9; }
/* The 輪流上場 panel (src/ui/rotation.js openRotationPanel). */
.rot-panel { width: min(440px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); overflow-y: auto; gap: 12px; }
.rot-panel[open] { display: grid; }
.rot-panel .rot-card { border: 0; padding: 0; box-shadow: none; }
/* 今天戰績 under the card: room between 重新抽籤 and its rule line. */
.rot-panel .rot-stats { margin-top: 16px; padding-top: 4px; }

.rot-stats summary { cursor: pointer; padding: 8px 0; }
.sb-setup .rot-box:not(:empty) { margin-bottom: 12px; }
/* Setup: the two teams side by side, even on phones. */
.sb-setup .team-fields { grid-template-columns: 1fr 1fr; }
.sb-setup .team-fields[hidden] { display: none; }
/* Two to a row even at 360px: 打到幾分｜要贏幾分, 誰先發球｜丟硬幣. */
.sb-setup .row { flex-wrap: nowrap; }
.sb-setup .team-fields .input { min-width: 0; }

/* Draw */
.roster { display: flex; flex-wrap: wrap; gap: 8px; }
.name-chip { display: inline-flex; align-items: center; gap: 2px; background: var(--surface); border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); padding: 0; min-height: 48px; font-weight: 700; }
.name-chip button { border: 0; background: transparent; width: 44px; height: 44px; border-radius: 4px; color: var(--fg); font-size: 1rem; line-height: 1; }
.name-chip button:hover { background: var(--mark); color: var(--mark-fg); }
/* The name itself is tappable to rename it. */
.name-chip .chip-name { width: auto; height: 44px; padding: 0 4px 0 12px; font: inherit; font-weight: 700; overflow-wrap: anywhere; text-align: left; }
.name-chip .chip-sex { width: 36px; padding: 0 0 0 6px; font-size: 1.35rem; font-weight: 900; color: var(--male); }
.name-chip .chip-sex[data-g="f"] { color: var(--female); }
.name-chip .chip-sex[data-g="none"] { color: var(--muted); font-size: 1rem; }
.name-chip .chip-sex + .chip-name { padding-left: 2px; }
.mix-toggle { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; }
.mix-toggle input { width: 20px; height: 20px; margin: 0; }
.mix-note { font-weight: 500; }
.me-btn { text-decoration: none; }
.me-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px 0; }
.me-tile { border: var(--bw) solid var(--line); border-radius: var(--radius-sm); padding: 8px 6px; background: var(--surface); text-align: center; box-shadow: var(--shadow); }
.me-tile b { display: block; font-family: var(--font-num); font-size: 1.9rem; line-height: 1.15; }
.me-tile span { font-size: 0.8rem; color: var(--muted); font-weight: 700; }
.me-tile.hl { background: var(--mark); color: var(--mark-fg); }
.me-tile.hl span { color: var(--mark-fg); }
.me-card { display: block; text-decoration: none; color: inherit; margin-bottom: 14px; }
.me-card p { margin: 6px 0 0; }
.me-range { margin: 4px 0 6px; }
.me-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 2px solid var(--line-soft); }
.me-row:last-child { border-bottom: 0; }
.me-row b { text-align: right; overflow-wrap: anywhere; }
.me-wl { flex: none; font-family: var(--font-num); font-weight: 900; border: var(--bw2) solid var(--line); border-radius: 6px; padding: 0 8px; }
.me-wl.w { background: var(--mark); color: var(--mark-fg); }
.me-names { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.me-who .toolbar { margin-top: 12px; justify-content: flex-end; }
.me-who-line { margin: 0; }
.me-clear { text-align: center; margin-top: 18px; }
.me-link { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; text-decoration: underline; padding: 6px 4px; min-height: 44px; cursor: pointer; }
.group-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: none; }
.group-chip { flex: none; min-height: 44px; padding: 6px 14px; border: var(--bw2) solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-weight: 900; white-space: nowrap; }
.group-chip[aria-pressed="true"] { background: var(--mark); color: var(--mark-fg); }
.group-chip.group-add { border-style: dashed; color: var(--muted); font-weight: 700; }
.group-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.group-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 2px solid var(--line-soft); padding: 4px 0; }
.group-list .btn { min-height: 40px; padding: 4px 12px; }
.group-sheet .group-manage:empty { display: none; }
.rename-form { display: grid; gap: 12px; }
.subtabs { display: flex; gap: 6px; border-bottom: var(--bw) solid var(--line); }
.subtab { border: 0; background: transparent; padding: 10px 12px; min-height: 44px; color: var(--muted); font-weight: 700; border-radius: 6px 6px 0 0; }
.subtab[aria-selected="true"] { color: var(--mark-fg); background: var(--mark); font-weight: 900; box-shadow: inset 0 0 0 var(--bw) var(--ink); }
.matches { display: grid; gap: 10px; }
.match { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px 10px; align-items: center; padding: 10px 12px; background: var(--surface-2); border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); }
.match .court-no { font-family: var(--font-num); font-weight: 700; color: var(--bg); background: var(--ink); border-radius: 4px; padding: 0 6px; white-space: nowrap; }
.match .vs { color: var(--muted); font-size: 0.8rem; font-weight: 900; text-align: center; }
.team-names { display: grid; gap: 2px; min-width: 0; }
.team-names span { display: block; overflow-wrap: anywhere; }
.team-names.serve-first::after { content: attr(data-first); font-size: 0.7rem; font-weight: 900; color: var(--mark-fg); background: var(--mark); justify-self: start; padding: 0 4px; border-radius: 3px; }
.waiting { color: var(--muted); font-size: 0.9rem; }
.round { display: grid; gap: 8px; }
.round h3 { display: flex; justify-content: space-between; align-items: baseline; }
.koc-court, #view-draw #out { scroll-margin-top: calc(var(--topbar-h, 0px) + 12px); }
.koc-court { display: grid; gap: 8px; padding: 12px; background: var(--surface-2); border: var(--bw2) solid var(--line); border-radius: var(--radius); }
/* Each game is a plain court outline: one team per half, the net a line
   down the middle. Kept quiet on purpose (no fills or team colors). */
.koc-teams {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 8px;
  border: var(--bw2) solid var(--line); border-radius: 4px;
}
.koc-teams::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%); background: var(--ink); }
.koc-team { display: grid; gap: 6px; grid-template-rows: 1fr auto; } /* buttons line up even when one team has the 先發球 tag */
.koc-team .btn { width: 100%; }
.koc-team .team-names { align-content: start; }
.streak { font-size: 0.8rem; color: var(--muted); }
.court-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 44px; margin: -6px -6px -4px 0; }
.court-head .waiting, .court-head .streak { flex: 1; }
.court-score { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--accent); border-radius: var(--radius-sm); padding: 0; }
.court-score svg { width: 24px; height: 24px; }
.court-score:hover { background: var(--mark); color: var(--mark-fg); }
.from-draw { margin: 0; color: var(--accent); font-weight: 700; }
.queue { display: flex; flex-wrap: wrap; gap: 6px; }
.queue span { background: var(--surface); border: var(--bw2) solid var(--line); border-radius: 4px; padding: 2px 10px; font-size: 0.9rem; font-weight: 700; }
.queue span:first-child, .queue span:nth-child(2) { background: var(--mark); color: var(--mark-fg); }
.queue-4 span:nth-child(3), .queue-4 span:nth-child(4) { background: var(--mark); color: var(--mark-fg); }
/* 今天戰績 title with its share icon. */
.stats-title { display: flex; align-items: center; justify-content: space-between; }
.stats-share { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; border: var(--bw2) solid var(--line); background: var(--surface); color: var(--fg); padding: 4px 12px; border-radius: 999px; font: inherit; font-weight: 900; font-size: 0.95rem; }
.stats-share svg { width: 20px; height: 20px; }
.stats-btns { display: inline-flex; gap: 8px; }
.handoff-choice { border-top: 2px solid var(--line-soft); padding-top: 12px; margin-top: 12px; }
.handoff-choice p { margin: 4px 0 10px; }
.handoff-sheet .toolbar { margin-top: 14px; }
.me-pass .btn { margin-top: 8px; }
/* Share-as-picture sheet (src/ui/sharecard.js): the preview fits the phone. */
.share-sheet { width: min(420px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px); overflow-y: auto; display: grid; gap: 10px; padding: 14px; }
.share-sheet[open] { display: grid; }
.share-sheet [hidden] { display: none !important; }
.share-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.share-sheet-head .btn { min-height: 44px; padding: 4px 12px; }
/* Settings (src/ui/settings.js): each label sits above its buttons, so long
   English labels fit, with room between the rows. */
.settings-sheet[open] { display: grid; gap: 16px; }
.settings-sheet .seg-row { flex-direction: column; align-items: stretch; gap: 6px; }
.settings-sheet .seg-label { width: auto; font-size: 0.9rem; }
.settings-sheet p { margin: -8px 0 0; }
.settings-sub { margin-top: 4px; padding-top: 14px; border-top: 2px solid var(--line-soft); }
/* Beta features: one quiet row each, name left, a small on/off switch right. */
.beta-list { list-style: none; margin: -6px 0 0; padding: 0; }
.beta-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; font-weight: 700; }
.beta-list li + li { border-top: 1px solid var(--line-soft); }
.switch { position: relative; flex: none; width: 44px; height: 26px; padding: 0; border: var(--bw2) solid var(--line); border-radius: 999px; background: var(--surface); }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--ink); }
.switch[aria-checked="true"]::after { transform: translateX(18px); background: var(--bg); }
/* Keep the tap area 44px tall without a bigger switch. */
.switch::before { content: ''; position: absolute; inset: -9px -4px; }
.share-photo { display: flex; gap: 8px; flex-wrap: wrap; }
.share-photo .btn { flex: 1; text-align: center; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; }
.share-preview { display: block; width: auto; max-width: 100%; max-height: 48dvh; margin: 0 auto; border: var(--bw2) solid var(--line); border-radius: 6px; background: var(--surface-2); }
.share-preview.is-sticker { background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 20px 20px; }
.share-photo .share-nophoto { flex: none; width: 48px; padding: 0; font-size: 1.4rem; }
.share-size { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-size .seg { flex: none; }
.share-preview.is-movable { touch-action: none; cursor: grab; }
.share-actions .btn { flex: 1; }
.share-hint { margin: 0; }
.stats-title { margin: 14px 0 6px; font-size: 1rem; }
.stats { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.stats th, .stats td { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--line-soft); }
.stats th { color: var(--muted); font-weight: 700; }
.stats td.num, .stats th:not(:first-child) { text-align: right; width: 3.5em; }
footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding-top: 12px; }
/* The rulebook line belongs with the rules, not on the home page. */
html[data-route="home"] #footer, html[data-route="me"] #footer { display: none; }


/* 揪團卡 and the courts list. */
.meetup-when { font-size: 1.35rem; font-weight: 700; background: var(--mark); color: var(--mark-fg); justify-self: start; padding: 0 8px; border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); }
.meetup-card h3 { font-size: 1.4rem; }
.meetup-need { background: var(--ink); color: var(--bg); }
.meetup-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.meetup-actions .btn { display: inline-flex; align-items: center; text-decoration: none; }
.venue-bar {
  position: sticky; z-index: 9; top: var(--topbar-h, 0px); display: grid; gap: 8px;
  margin: 0 calc(-1 * var(--gutter)); padding: 8px var(--gutter); background: var(--bg); border-bottom: var(--bw2) solid var(--line);
  transition: top 0.2s ease;
}
.chrome-hidden .venue-bar { top: 0; }
.venue-bar .seg button { padding: 6px 4px; font-size: 0.9rem; }
.venue-list { display: grid; gap: 14px; }
/* 📍 新加坡｜台北 under the courts title: the shown country is solid, the other dashed. */
.venue-areas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.venue-area { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 14px 0 8px; border: var(--bw2) solid var(--line); border-radius: 999px; background: var(--mark); color: var(--mark-fg); font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; }
.venue-area[aria-pressed="false"] { border-style: dashed; background: transparent; color: var(--muted); }
.venue-area svg { width: 16px; height: 16px; color: var(--accent); }
.venue-area[aria-pressed="false"] svg { color: inherit; }
/* Booking: icon buttons (phone, WhatsApp, LINE) and a short 預約 for the web, then 發報名訊息. */
.book-btn { gap: 6px; justify-content: center; padding: 8px 12px; }
.book-btn svg { width: 22px; height: 22px; flex: none; }
.book-btn.icon-only { width: 48px; padding: 0; }
.venue .meetup-actions .btn-primary { margin-left: auto; }
/* Scoreboard 直接開始: one big tap, then the full setup for anyone who wants it. */
.quick-start { display: grid; gap: 8px; }
.quick-start #quick { min-height: 56px; font-size: 1.15rem; }
.quick-start p { margin: 0; }
.quick-or { margin: 0 0 -4px; font-size: 1rem; color: var(--muted); }
/* A friend's filter link: what is filtered, and the way back to the whole list. */
.venue-shared { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 12px; border: var(--bw) solid var(--line); border-radius: var(--radius-sm); background: var(--mark); color: var(--mark-fg); }
.venue-shared[hidden], .venue-bar[hidden] { display: none; }
.venue-shared p { flex: 1; margin: 0; }
.venue-shared .nowrap { white-space: nowrap; }
.venue-shared .btn { flex: none; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
/* Bar row under the regions: favourites, the 篩選 button (badge = filters on), sort. */
.venue-tools { display: flex; gap: 8px; align-items: stretch; }
.venue-tools .input { flex: 1; min-width: 0; }
.venue-tools .btn { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 4px 12px; }
.venue-tools .btn svg { width: 20px; height: 20px; }
.venue-fav { width: 48px; padding: 0 !important; }
.venue-fav[aria-pressed="true"] { color: var(--fav); }
.venue-filter[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.venue-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--mark); color: var(--mark-fg); font-size: 0.85rem; line-height: 22px; text-align: center; }
/* The 篩選 sheet: one row of toggle chips per group. */
.venue-sheet h4 { margin: 0 0 8px; font-size: 0.95rem; }
.venue-sheet section p { margin: 6px 0 0; }
.venue-sheet .toolbar { display: flex; gap: 8px; margin: 4px 0 -14px; position: sticky; bottom: -14px; padding: 10px 0 14px; background: var(--surface); border-top: 2px solid var(--line-soft); }
.venue-sheet .toolbar .btn-primary { flex: 1; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 6px 14px; border: var(--bw) solid var(--line); border-radius: 999px; background: var(--surface); color: var(--fg); font: inherit; font-weight: 700; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.venue-head { flex-wrap: nowrap; align-items: flex-start; }
/* The address is the map link: dotted underline and a pin. */
.venue-address { display: inline-flex; align-items: flex-start; gap: 6px; min-height: 44px; padding-top: 2px; color: var(--fg); text-decoration: underline dotted; text-underline-offset: 4px; }
.venue-address svg { flex: none; width: 18px; height: 18px; margin-top: 4px; color: var(--accent); }
.fav-btn { flex: none; width: 44px; height: 44px; margin: -8px -8px 0 0; display: grid; place-items: center; border: 0; background: none; color: var(--muted); }
.fav-btn[aria-pressed="true"] { color: var(--fav); }
.fav-btn svg { width: 24px; height: 24px; }
/* The share icon sits just left of the heart, same size, no border, so the card head stays quiet. */
/* The name takes the free width, so ♥ and share stay pinned top right on every card. */
.venue-head h3 { flex: 1; min-width: 0; }
.venue-share { margin-right: -4px; color: var(--fg); }
/* Heart and share drawn to the same box and stroke, so neither looks bigger. */
.venue-head .fav-btn svg { width: 24px; height: 24px; }
.venue-head .fav-btn:not([aria-pressed="true"]) { color: var(--fg); }
.venue-one { display: grid; gap: 14px; }
.venue .event-facts div { grid-template-columns: 5em 1fr; }
:lang(en) .venue .event-facts div { grid-template-columns: 5.5em 1fr; }
.name-btn {
  display: block; width: 100%; min-height: 44px; padding: 4px 8px; text-align: left; font: inherit; font-weight: 700; color: var(--fg);
  background: var(--surface); border: 2px dashed var(--line-soft); border-radius: 6px;
  /* A long name ends in … instead of breaking mid-word; the full name is on the list and in 戰績. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.name-btn:active { border-color: var(--ink); }
.queue .name-btn { display: inline-flex; align-items: center; width: auto; min-height: 44px; border: var(--bw2) solid var(--line); border-radius: 4px; padding: 2px 10px; font-size: 0.9rem; }
.queue .name-btn:nth-child(-n+2), .queue-4 .name-btn:nth-child(-n+4) { background: var(--mark); color: var(--mark-fg); }
.swap-sheet { width: min(360px, calc(100vw - 32px)); max-height: 80dvh; overflow-y: auto; }
.swap-group { margin: 10px 0 4px; font-weight: 900; }
.swap-names { display: flex; flex-wrap: wrap; gap: 8px; }
.swap-names .btn { min-height: 44px; padding: 6px 12px; }
.swap-sheet .toolbar { margin-top: 16px; }
.swap-sheet .toolbar .btn { min-width: 120px; }
.paste-list { display: grid; gap: 8px; }
.paste-list[open] { padding-bottom: 4px; }
.paste-list > *:not(summary) { margin-top: 8px; }
.paste-sessions { display: grid; gap: 8px; }
/* Scoreboard paste: hint and 隨機分隊 on one line, then the names as chips. */
.score-paste { margin-bottom: 12px; }
.score-paste-head { display: flex; align-items: center; gap: 10px; }
.score-paste-head p { flex: 1; margin: 0; }
.score-paste-head .btn { flex: none; white-space: nowrap; }
.score-paste-names { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.score-paste-names .chip[aria-pressed="true"] { background: var(--surface); color: var(--muted); text-decoration: line-through; }
.signup-sessions { display: grid; gap: 12px; }
.signup-session { margin: 0; padding: 10px 12px 12px; border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); display: grid; gap: 8px; min-width: 0; }
.signup-session legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-weight: 900; }
.signup-preview { margin: 0; padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.55; background: var(--surface-2); border: var(--bw2) dashed var(--line); border-radius: var(--radius-sm); min-height: 6em; user-select: text; }
.section-head a.btn { display: inline-flex; align-items: center; text-decoration: none; margin-top: 6px; }
a.btn-block { display: flex; align-items: center; justify-content: center; text-decoration: none; }
textarea.input { font-family: inherit; font-size: 1rem; line-height: 1.5; resize: vertical; } /* 16px: readable, and iPhones don't zoom in */

/* Pico Bowl: home card and tournament page. */
.event-card {
  display: grid; gap: 4px; margin: 0 6px 18px 0; padding: 16px; text-decoration: none;
  background: var(--accent); color: var(--accent-fg); border: var(--bw) solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.event-card b { font-family: var(--font-num); font-size: 1.8rem; line-height: 1.1; letter-spacing: -0.01em; }
.event-card span { font-weight: 700; }
.event-card-tag { justify-self: start; padding: 1px 10px; border: 2px solid #111111; border-radius: 999px; background: var(--mark); color: var(--mark-fg); font-size: 0.85rem; font-weight: 900; }
.event-card.is-soon { cursor: default; margin: 18px 6px 0 0; padding: 10px 16px; grid-template-columns: auto 1fr; align-items: center; gap: 2px 10px; box-shadow: none; }
.event-card.is-soon b { font-size: 1.2rem; }
.event-card.is-soon span:last-child { grid-column: 1 / -1; font-size: 0.85rem; font-weight: 500; }
a.event-card:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--shadow-ink); }
.event-kicker { font-weight: 900; color: var(--muted); }
.event-hero { display: grid; gap: 10px; }
.event-name { font-family: var(--font-num); font-size: clamp(2.6rem, 13vw, 4rem); line-height: 1; letter-spacing: -0.02em; justify-self: start; background: var(--mark); color: var(--mark-fg); padding: 2px 10px; box-shadow: 0 0 0 var(--bw) var(--ink); margin-left: 3px; }
.event-facts, .event-day { display: grid; gap: 6px; margin: 0; }
.event-facts div, .event-day div { display: grid; grid-template-columns: max-content 1fr; gap: 12px; }
.event-facts dt, .event-day dt { font-weight: 900; }
.event-facts dd, .event-day dd { margin: 0; }
.event-draft { display: flex; gap: 8px; align-items: baseline; color: var(--muted); font-size: 0.9rem; }
.event-divisions { display: grid; gap: 8px; }
.event-divisions div { display: grid; gap: 2px; padding: 10px 12px; background: var(--surface-2); border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); }
.event-divisions span { color: var(--muted); font-size: 0.9rem; }
.event-links { display: flex; flex-wrap: wrap; gap: 8px; }
.event-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); color: var(--fg); font-weight: 700; text-decoration: none; background: var(--surface); }

/* Pico Bowl organizer screen. */
.t-teams-input { min-height: 140px; resize: vertical; font-family: inherit; line-height: 1.5; }
.form-error { color: #c62828; font-weight: 700; margin: 0; }
.form-error[hidden] { display: none; }
.t-courts { display: grid; gap: 12px; }
@media (min-width: 768px) { .t-courts { grid-template-columns: 1fr 1fr; } }
.t-court { display: grid; gap: 6px; }
.t-court .court-no { justify-self: start; }
.t-match { display: grid; gap: 6px; padding: 10px 12px; background: var(--surface-2); border: var(--bw2) solid var(--line); border-radius: var(--radius-sm); }
.t-match.is-done { opacity: 0.8; }
.t-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.t-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.t-teams b:last-child { text-align: right; }
.t-score { font-weight: 700; white-space: nowrap; }
.score-form { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 6px; align-items: center; }
.score-form .input { min-width: 0; text-align: center; font-size: 1.2rem; }
.t-div { border: var(--bw) solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 6px 14px 14px; margin-right: 6px; box-shadow: var(--shadow); }
.t-div summary { font-size: 1.1rem; }
.t-div h4 { margin: 14px 0 6px; }
.t-list { display: grid; gap: 8px; }
.t-row { display: grid; gap: 6px; }
.t-edit { justify-self: end; min-height: 44px; }
.t-champ { font-size: 1.1rem; font-weight: 900; background: var(--mark); color: var(--mark-fg); padding: 6px 10px; border-radius: var(--radius-sm); border: 2px solid #111111; }

/* Full screen on the draw: only the courts, the queue and the counts. */
.out-head { display: flex; justify-content: flex-end; margin: -8px -8px 4px 0; }
.out-head .fs-btn { position: static; }
html.is-fullscreen[data-full="draw"] #view-draw .section-head,
html.is-fullscreen[data-full="draw"] #view-draw .roster-card,
html.is-fullscreen[data-full="draw"] #view-draw .subtabs,
html.is-fullscreen[data-full="draw"] #view-draw .draw-controls { display: none; }
html.is-fullscreen[data-full="draw"] #view-draw .draw-card { box-shadow: none; margin-right: 0; padding-top: max(12px, env(safe-area-inset-top, 0px)); padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)); }

/* Full screen (scoreboard only): nothing but the board, spread evenly down
   the screen with big score buttons and a bigger court. */
html.is-fullscreen .topbar, html.is-fullscreen .bottom-nav, html.is-fullscreen #footer,
html.is-fullscreen #view-score .section-head { display: none; }
html.is-fullscreen main.page { max-width: none; padding: 8px; }
/* Phones put their own bars and notices over the edges in full screen (the
   gesture bar, Chrome's 'drag from the top to exit' note, notches), so the
   card keeps generous room at the top and bottom. */
html.is-fullscreen #view-score > .card { height: calc(100dvh - 16px); box-shadow: none; margin-right: 0; padding: max(20px, calc(12px + env(safe-area-inset-top, 0px))) 12px max(48px, calc(20px + env(safe-area-inset-bottom, 0px))); display: flex; flex-direction: column; }
html.is-fullscreen .board { --board-gap: 10px; display: flex; flex-direction: column; flex: 1; min-height: 0; gap: var(--board-gap); justify-content: space-evenly; }
html.is-fullscreen .board > *, html.is-fullscreen .board .sb-info > * { min-height: 0; }
/* Bottom row: icons only, fixed size, never squeezed off screen. */
html.is-fullscreen .board .toolbar { flex: none; flex-wrap: nowrap; gap: 14px; }
html.is-fullscreen .board .toolbar .btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.is-fullscreen .board .toolbar .icon-btn, html.is-fullscreen .board .toolbar .share-btn { width: 56px; min-width: 56px; height: 48px; padding: 0; justify-content: center; }
html.is-fullscreen .board .toolbar svg { width: 24px; height: 24px; }
html.is-fullscreen .board:not(.sb) #share-score span { display: none; }
/* Score buttons: up to 27% of the screen, shrinking when the side-switch
   reminder needs the room. Tall enough to hit blind, never stretched. */
html.is-fullscreen .score-row { flex: 0 1 clamp(110px, 27vh, 280px); min-height: 110px; margin-right: 0; }
html.is-fullscreen .score-btn { height: 100%; min-height: 0; overflow: hidden; padding: 6px; }
html.is-fullscreen .score-btn .pts { font-size: clamp(2.4rem, 10vh, 8rem); }
html.is-fullscreen .score-btn .name { font-size: clamp(0.85rem, 2.2vh, 1.3rem); }
html.is-fullscreen .board .court-wrap, html.is-fullscreen .board #board-court { max-width: min(100%, 520px); align-self: center; flex: none; order: 0; }
html.is-fullscreen .mode-tag { align-self: center; }
html.is-fullscreen .board .court-wrap svg { max-height: 34vh; width: auto; max-width: 100%; margin: 0 auto; }
html.is-fullscreen .announce { padding: 8px; }
html.is-fullscreen .announce .big { font-size: clamp(2.6rem, 9vh, 6rem); }
/* The scoreboards' undo / 回到設定 row keeps its words and stays lined up
   under the two score buttons; nothing is squeezed under anything else (only
   the court gives way), and a board taller than the screen scrolls. */
html.is-fullscreen #view-score > .card { overflow-y: auto; }
html.is-fullscreen .board.sb > *, html.is-fullscreen .board.sb .sb-info > * { flex-shrink: 0; }
html.is-fullscreen .board.sb .sb-info > .court-wrap, html.is-fullscreen .board.sb > .score-row { flex-shrink: 1; }
/* The score buttons fill the row as it shrinks, never spill out of it. */
html.is-fullscreen .board.sb .score-row { grid-template-rows: minmax(0, 1fr); }
html.is-fullscreen .board.sb .score-btn { min-height: 0; }
/* A short screen shrinks the score buttons: the number shrinks with the
   button (container units) and the small 贏這球 line goes first, so the
   names always show (user 2026-10-05). */
html.is-fullscreen .board.sb .score-btn { container-type: size; grid-template-rows: minmax(0, 1fr) auto auto; align-content: stretch; }
html.is-fullscreen .board.sb .score-btn .pts { align-self: end; font-size: min(clamp(2.4rem, 10vh, 8rem), 46cqh); }
html.is-fullscreen .board.sb .score-btn .name { align-self: start; }
@container (max-height: 150px) { html.is-fullscreen .board.sb .score-btn .sub { display: none; } }
/* Upright, the court takes the height that is left (and gives it up first on
   a short screen), so the board always fits. */
html.is-fullscreen .board.sb #board-court { flex: 1 1 0; min-height: 72px; width: 100%; max-width: none; }
html.is-fullscreen .board.sb #board-court svg { display: block; width: 100%; height: 100%; max-height: none; }
html.is-fullscreen .board.sb .sb-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html.is-fullscreen .board.sb .sb-tools .icon-btn { width: auto; min-width: 0; padding: 0 12px; }
html.is-fullscreen .board.sb .sb-tools .btn-text { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
html.is-fullscreen .board.sb .sb-tools svg { width: 20px; height: 20px; }
/* A wide screen (a phone on its side, a laptop): two columns. What is happening (.sb-info: game line
   or set table, the call, the court) on the left; the top row, the score
   buttons (taking the height that is left) and everything to press on the right. */
@media (min-aspect-ratio: 5/4) {
  html.is-fullscreen #view-score > .card { padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) max(12px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px)); }
  html.is-fullscreen .board.sb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-auto-rows: auto; column-gap: 16px; row-gap: 8px; }
  html.is-fullscreen .board.sb > * { grid-column: 2; }
  html.is-fullscreen .board.sb > .sb-info { grid-column: 1; grid-row: 1 / span 3; display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden; }
  /* The court takes the height left in the column, as big as it fits. */
  html.is-fullscreen .board.sb .sb-info > #board-court { flex: 1 1 0; min-height: 120px; width: 100%; max-width: none; margin: 0; }
  html.is-fullscreen .board.sb .sb-info > #board-court svg { display: block; width: 100%; height: 100%; max-height: none; }
  /* The column clips its edge, so the 0-0 tip sits just inside the court. */
  html.is-fullscreen .board.sb .sb-info .sb-first-tip { bottom: 4px; }
  html.is-fullscreen .board.sb > .score-row { grid-row: 2; height: auto; min-height: 0; align-self: stretch; }
  html.is-fullscreen .board.sb .announce { padding: 4px 8px; }
  html.is-fullscreen .board.sb .announce .big { font-size: clamp(2rem, 13vh, 3.4rem); }
  html.is-fullscreen .score-btn .pts { font-size: clamp(2.4rem, 16vh, 5rem); }
}
/* Full-screen QA (user 2026-10-05: the court looked squeezed). Both modes.
   Upright: less bottom padding and slightly shorter point buttons, so the
   court gets the height. Wide: the court's column is the wider one (the court
   lies down, so width is what makes it big) and the point numbers grow with
   their buttons. */
html.is-fullscreen #view-score > .card { padding-bottom: max(20px, calc(12px + env(safe-area-inset-bottom, 0px))); }
html.is-fullscreen .board.sb > .score-row { flex: 1 1 clamp(100px, 22vh, 260px); max-height: 340px; }
/* The court's box is the court's own shape (the lying-down viewBox in src/court.js,
   552 × 294; tennis sets --court-ratio for its own court), so no empty band sits around it and the 0-0 tip hugs its edge;
   on a short screen it still shrinks. */
html.is-fullscreen .board.sb #board-court.land { flex: 0 1 auto; aspect-ratio: var(--court-ratio, 552 / 294); height: auto; }
@media (min-aspect-ratio: 5/4) {
  html.is-fullscreen .board.sb { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  html.is-fullscreen .board.sb .sb-info > #board-court.land { flex: 0 1 auto; margin: auto 0; }
  html.is-fullscreen .board.sb > .score-row { max-height: none; }
  /* The column clips its edges: room for the 賽末點 pill above the call. */
  html.is-fullscreen .board.sb .sb-info > .announce { margin-top: 14px; }
  html.is-fullscreen .board.sb .score-btn .pts { font-size: min(46cqh, 55cqw); }
}