:root {
  color-scheme: light;
  --ink: #173848;
  --muted: #60777e;
  --page: #f8faf9;
  --paper: #fff;
  --line: #e2e8e8;
  --radius: 10px;
  --shadow-soft: 0 .75rem 2rem #17384812;
  --blue: #185bdd;
  --blue-deep: #174bad;
  --lime: #d5ee74;
  --thai: 'Noto Sans Thai', 'Manrope', sans-serif;
  --latin: 'Manrope', 'Noto Sans Thai', sans-serif;
  --headline: 'Manrope', 'Noto Sans Thai', sans-serif;
  --section: 'Noto Sans Thai', 'Manrope', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
body { margin: 0; background: var(--page); color: var(--ink); font: 1rem/1.65 var(--thai); }
button, input, select { font: inherit; }
button, a, input, select { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.header-inner, main, footer { width: min(100% - 3rem, 1280px); margin-inline: auto; }
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--page);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  min-height: 5.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink); white-space: nowrap; }
.brand-wordmark { font: 800 1.9rem/1 var(--latin); letter-spacing: -.075em; }
.brand-period { color: var(--blue); }
.brand-divider { width: 1px; height: 2rem; background: var(--line); }
.brand-sub { display: flex; flex-direction: column; gap: .16rem; color: var(--ink); font: 800 .63rem/1 var(--latin); letter-spacing: .18em; }
.brand-sub small { color: var(--muted); font-size: .44rem; letter-spacing: .2em; }
nav { display: flex; align-items: center; gap: 2rem; }
nav a, .owner { color: var(--muted); font-size: .88rem; font-weight: 600; transition: color .15s ease; }
nav a:hover { color: var(--blue-deep); }
nav a.active { position: relative; color: var(--blue); font-weight: 800; }
nav a.active::after { position: absolute; right: 0; bottom: -1.6rem; left: 0; height: 3px; background: var(--blue); content: ''; }
.owner { padding: .55rem .85rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.owner:hover { border-color: #b9cce0; color: var(--blue-deep); }
.saved-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.65rem; padding: .45rem .7rem; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink); font-size: .88rem; font-weight: 600; cursor: pointer; }
.saved-toggle:hover, .saved-toggle[aria-pressed="true"] { border-color: var(--line); background: #fff; color: var(--blue-deep); }
.saved-toggle svg { width: 1.1rem; height: 1.1rem; }
.saved-count { min-width: 1.2rem; padding: .03rem .32rem; border-radius: 99rem; background: var(--lime); color: var(--ink); font: 700 .7rem/1.4 var(--latin); text-align: center; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.25rem);
  min-height: 18.5rem;
  margin: 1.25rem 0 .75rem;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: .65rem 0; }
.eyebrow { color: var(--blue-deep); font: 800 .72rem/1.35 var(--latin); letter-spacing: .12em; text-transform: uppercase; }
.hero-eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--ink); letter-spacing: .16em; }
.hero-eyebrow::before { width: 1.25rem; height: 2px; background: var(--blue); content: ''; }
h1 { margin: 1.05rem 0 .7rem; color: var(--ink); font: 800 clamp(2.8rem, 4.4vw, 4rem)/1.24 var(--headline); letter-spacing: -.045em; }
.hero h1 span { display: block; }
.hero-title-accent { color: var(--blue); }
.hero-copy > p { max-width: 26rem; margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.hero-bottom { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.25rem; padding-top: .75rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.hero-bottom span:last-child { padding: .18rem .65rem; border-radius: 1rem; background: var(--lime); color: #263b30; font-weight: 700; }
.hero-art { position: relative; min-height: 18.5rem; overflow: hidden; border-radius: 10px; background: #647c7e; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 47%; }
.hero-art::after { position: absolute; inset: 35% 0 0; content: ''; background: linear-gradient(0deg, #10272c8c, transparent); pointer-events: none; }
.art-top, .art-label { position: absolute; z-index: 1; left: 1.2rem; }
.art-top { top: 1.2rem; display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .75rem; border-radius: 6px; background: var(--lime); color: var(--ink); font: 800 .62rem/1.2 var(--latin); letter-spacing: .11em; }
.art-top::before { width: .52rem; height: .52rem; border: 1px solid currentColor; border-radius: 50%; content: ''; }
.art-label { bottom: 1.2rem; padding: .35rem .1rem; color: white; font: 800 .76rem/1.65 var(--latin); letter-spacing: .17em; }

.finder-panel { display: grid; grid-template-columns: minmax(14rem, 1.5fr) minmax(10rem, 1fr) auto; align-items: end; gap: .8rem; margin: 0 0 3rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-soft); }
.finder-panel.has-province { grid-template-columns: minmax(14rem, 1.35fr) minmax(8rem, .75fr) minmax(9rem, .9fr) auto; }
.finder-search { display: flex; flex-direction: column; gap: .4rem; color: #435963; font-size: .875rem; font-weight: 600; }
.finder-search .search-field input { width: 100%; min-width: 0; min-height: 3.15rem; padding: .55rem .75rem .55rem 2.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease; }
.finder-search .search-field input::placeholder { color: #778b93; }
.finder-search .search-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #185bdd1f; outline: none; }
.finder-location-field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; color: #435963; font-size: .875rem; font-weight: 600; }
.finder-location-field[hidden] { display: none; }
.finder-location-field select { width: 100%; min-width: 0; min-height: 3.15rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: .95rem; }
.finder-location-field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #185bdd1f; outline: none; }
.finder-areas { display: flex; grid-column: 1 / -1; grid-row: 2; flex-direction: column; gap: .4rem; min-width: 0; }
.finder-area-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; min-width: 0; }
.finder-area-label { color: var(--ink); font-size: .92rem; font-weight: 700; }
.finder-areas .area-list { gap: .4rem; }
.finder-submit { display: inline-flex; grid-column: 3; grid-row: 1; align-items: center; justify-content: center; gap: .5rem; min-width: 7rem; min-height: 3.15rem; padding: .6rem 1.15rem; border: 0; border-radius: var(--radius); background: var(--blue); color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background .15s ease, transform .15s ease; }
.finder-panel.has-province .finder-submit { grid-column: 4; }
.finder-submit svg { width: 1.15rem; height: 1.15rem; }
.finder-submit:hover { background: var(--blue-deep); transform: translateY(-1px); }
.finder-submit:active { transform: none; }
.sheet-directory { margin: 0 0 4.5rem; padding: 0; border: 0; background: transparent; box-shadow: none; }
.sheet-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.25rem; }
.eyebrow.muted { color: #5a747d; }
h2 { margin: .3rem 0 .25rem; font: 500 1.75rem/1.4 var(--section); letter-spacing: 0; }
.sheet-heading p { max-width: 53rem; margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.sheet-updated { flex: 0 0 auto; color: var(--muted); font-size: .8rem; }
.sport-tabs { display: flex; gap: .55rem; margin-top: 1.2rem; }
.sport-tab { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 2.7rem; padding: .55rem 1.15rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #45606a; font: 600 .95rem/1.35 var(--section); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.sport-icon { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; }
.sport-tab-count { min-width: 1.35rem; padding: .08rem .32rem; border-radius: 99rem; background: #edf2f4; color: var(--muted); font: 700 .75rem/1.4 var(--latin); font-variant-numeric: tabular-nums; }
.sport-tab.is-active .sport-tab-count { background: #d9e6ff; color: var(--blue-deep); }
.sport-tab:hover { border-color: #b9ccd2; }
.sport-tab.is-active { border-color: var(--blue); background: #edf3ff; color: var(--blue-deep); box-shadow: inset 0 -2px 0 var(--blue); }

.filter-bar { display: flex; align-items: center; gap: .6rem; margin-top: 1.1rem; }
.filter-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .5rem 1.05rem; border: 1px solid var(--line); border-radius: 99rem; background: var(--paper); color: var(--ink); font-size: .9rem; font-weight: 700; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease; }
.filter-toggle svg { width: 1.1rem; height: 1.1rem; }
.filter-toggle:hover { border-color: #b9cce0; }
.filter-toggle.is-open, .filter-toggle.has-active { border-color: var(--blue); color: var(--blue-deep); background: #eef4fd; }
.filter-toggle-count { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; border-radius: 99rem; background: var(--blue); color: #fff; font-size: .72rem; font-weight: 800; }
.sheet-filters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: .8rem; margin-top: .9rem; }
.sheet-filters label { display: flex; flex-direction: column; gap: .35rem; color: #435963; font-size: .875rem; font-weight: 600; }
.sheet-toggle { flex-direction: row; align-items: center; gap: .5rem; min-height: 2.9rem; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.sheet-toggle input { width: 1.05rem; height: 1.05rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--blue); flex: 0 0 auto; }
.sheet-toggle span { line-height: 1.3; }
.sheet-toggle:has(input:checked) { border-color: var(--blue); background: #eef4fd; color: var(--blue-deep); }
.sheet-filters input:not([type="checkbox"]), .sheet-filters select {
  width: 100%;
  min-width: 0;
  min-height: 2.9rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-size: .95rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sheet-filters input::placeholder { color: #778b93; }
.sheet-filters input:not([type="checkbox"]):focus, .sheet-filters select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #185bdd1f; outline: none; }
.sheet-result-line { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 3.2rem; margin-top: .5rem; border-bottom: 1px solid var(--line); }
.sheet-status { margin: .45rem 0; color: var(--muted); font-size: .9rem; }
.spinner { display: inline-block; width: 1rem; height: 1rem; vertical-align: -.17rem; border: 2px solid #c6d6dc; border-top-color: var(--blue); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; background: var(--blue); color: #fff; font-size: 1.35rem; line-height: 1; box-shadow: 0 .4rem 1.1rem #17384840; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(.6rem); transition: opacity .2s ease, transform .2s ease, visibility .2s ease, background .15s ease; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--blue-deep); }
.sheet-count { color: var(--muted); font-size: .85rem; }
.sheet-retry { margin-left: .35rem; padding: 0 .15rem; border: 0; border-bottom: 1px solid var(--blue); background: transparent; color: var(--blue-deep); font-weight: 700; }
.search-field { position: relative; display: flex; align-items: center; }
.search-ic { position: absolute; left: .7rem; width: 1.15rem; height: 1.15rem; color: #6b808a; pointer-events: none; }
.sheet-search .search-field input { padding-left: 2.35rem; }

.venue-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-top: 1.35rem; }
.venue-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  box-shadow: 0 1px 2px #1738480a;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.venue-card:hover { transform: translateY(-2px); border-color: #c4d6dc; box-shadow: 0 .6rem 1.6rem #1738481f; }
.vc-media { position: relative; aspect-ratio: 16 / 7.5; background: #d6e2e6; }
.vc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vc-media-tile { background: #30506a; }
.vc-tile { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; padding: .75rem; color: #fff; text-align: center; }
.vc-tile-initial { font: 700 2.2rem/1 var(--headline); text-shadow: 0 2px 10px #0000003d; }
.vc-tile-sport { font-size: .8rem; font-weight: 600; letter-spacing: .03em; opacity: .92; }
.vc-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0d262c40, transparent 45%); pointer-events: none; }
.vc-badge { position: absolute; top: .55rem; z-index: 1; padding: .2rem .55rem; border-radius: 99rem; font-size: .72rem; font-weight: 700; line-height: 1.4; }
.vc-type { left: .65rem; background: var(--lime); color: #243b1e; }
.vc-access { right: .65rem; max-width: 62%; background: #ffffffec; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-save { position: absolute; right: .6rem; bottom: .6rem; z-index: 2; display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid #ffffffb8; border-radius: 50%; background: #ffffffec; color: var(--ink); cursor: pointer; box-shadow: 0 .15rem .4rem #17384824; }
.vc-save:hover, .vc-save.is-saved { background: #fff; color: var(--blue); }
.vc-save svg { width: 1.15rem; height: 1.15rem; }
.vc-save.is-saved svg path { fill: #dbe7ff; }
.vc-cat-free { background: #ddf3d7; color: #1f5a2f; }
.vc-cat-rental { background: #d4f1ec; color: #0f5b51; }
.vc-cat-private { background: #ffe0d6; color: #a23c22; }
.vc-cat-other { background: #e7eef1; color: #3a515a; }
.vc-body { display: flex; flex-direction: column; gap: .5rem; padding: .8rem .9rem .9rem; }
.vc-name { margin: 0; font: 600 1.06rem/1.35 var(--section); color: var(--ink); }
.vc-loc { display: flex; align-items: center; gap: .35rem; margin: -.1rem 0 0; color: #2f4a54; font-size: .86rem; font-weight: 600; }
.vc-loc:hover { color: var(--blue-deep); }
.vc-loc:hover .vc-loc-text { text-decoration: underline; text-underline-offset: .2em; }
.vc-loc svg { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: var(--blue); }
.vc-loc-ext { margin-left: auto; color: #90a4ac; font-weight: 700; }
.vc-loc:hover .vc-loc-ext { color: var(--blue); }
.vc-addr { margin: 0; color: #536871; font-size: .8rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vc-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .02rem 0 0; padding: 0; list-style: none; }
.vc-chips li { padding: .22rem .58rem; border: 1px solid #cfe0e4; border-radius: 99rem; background: #eef6f7; color: #244953; font-size: .76rem; font-weight: 600; }
.vc-chips li.vc-chip-soft { border-color: #e4eaec; background: #f6f8f9; color: #566a72; font-weight: 500; }
.vc-meta { display: flex; flex-direction: column; gap: .25rem; margin: .05rem 0 0; padding: .55rem .7rem; border-radius: .5rem; background: #f6fafb; }
.vc-meta-row { display: flex; align-items: baseline; gap: .55rem; }
.vc-meta-k { flex: 0 0 2.2rem; color: #5f757d; font-size: .76rem; font-weight: 600; }
.vc-meta-v { color: #33484f; font-size: .83rem; line-height: 1.4; }
.vc-price { color: var(--ink); font-size: .92rem; font-weight: 700; }
.vc-price.is-free { color: #1f7a3d; }
.vc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .8rem; margin-top: .15rem; }
.vc-invite { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.15rem; padding: .4rem .85rem; border: 0; border-radius: .4rem; background: var(--blue); color: #fff; font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s ease; }
.vc-invite:hover { background: var(--blue-deep); }
.vc-invite::before { content: '＋'; font-weight: 700; }
.vc-contact { padding: .1rem 0; border-bottom: 2px solid var(--blue); color: var(--blue-deep); font-size: .83rem; font-weight: 700; }
.vc-note { margin: 0; color: #465a63; font-size: .8rem; line-height: 1.5; }
.vc-transit { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: start; gap: .6rem; margin-top: .15rem; padding: .75rem .75rem .7rem; border-left: 3px solid var(--blue); background: #eef5fa; }
.vc-transit-icon { width: 1.25rem; height: 1.25rem; margin-top: .05rem; color: var(--blue-deep); }
.vc-transit-detail { min-width: 0; }
.vc-transit-label { display: block; margin-bottom: .2rem; color: var(--blue-deep); font-size: .74rem; font-weight: 700; }
.vc-transit-text { margin: 0; color: #344e59; font-size: .8rem; line-height: 1.55; overflow-wrap: anywhere; }
.vc-transit-link { align-self: end; white-space: nowrap; color: var(--blue-deep); font-size: .76rem; font-weight: 700; text-decoration: underline; text-underline-offset: .16em; }
.vc-transit-link:focus-visible { border-radius: .15rem; outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.vc-demand { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-top: .1rem; }
.vc-demand-btn { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.15rem; padding: .4rem .85rem; border: 1px solid #cdddf5; border-radius: .4rem; background: #eef4fd; color: var(--blue-deep); font-size: .82rem; font-weight: 700; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.vc-demand-btn:hover:not(:disabled) { background: #dfeafb; border-color: var(--blue); }
.vc-demand-btn.is-voted { background: #e7f3ea; border-color: #bfe0c7; color: #1f7a3d; cursor: default; }
.vc-demand-count { color: #5f757d; font-size: .78rem; font-weight: 600; }
.vc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .8rem; margin-top: .05rem; padding-top: .55rem; border-top: 1px solid #edf1f3; }
.vc-checked { color: #778990; font-size: .72rem; }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem; margin-top: 1.6rem; }
.page-btn { min-width: 2.4rem; min-height: 2.4rem; padding: .35rem .65rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: #3a515a; font-size: .9rem; font-weight: 600; }
.page-btn:hover:not(:disabled):not(.is-active) { border-color: var(--blue); color: var(--blue-deep); }
.page-btn.is-active { border-color: var(--blue); background: var(--blue); color: #fff; cursor: default; }
.page-btn:disabled { opacity: .4; cursor: not-allowed; }
.page-gap { padding: 0 .2rem; color: var(--muted); }
.sheet-empty { padding: 2.5rem 1rem; color: var(--muted); text-align: center; }
.sheet-empty p { margin: 0 0 .85rem; }
.sheet-clear-btn { min-height: 2.6rem; padding: .5rem 1.1rem; border: 1px solid var(--blue); border-radius: .3rem; background: #fff; color: var(--blue-deep); font-weight: 700; }
.sheet-clear-btn:hover { background: var(--blue); color: #fff; }

/* Home page community and event previews */
.home-community, .home-events { margin: 0 0 2.8rem; padding: 1.8rem 0 2.2rem; border-top: 1px solid var(--line); }
.home-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.home-section-heading h2 { margin: .25rem 0 .2rem; font-size: 1.65rem; }
.home-section-heading p { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }
.section-link { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 2.7rem; padding: .45rem .1rem; border-bottom: 1px solid var(--blue); color: var(--blue-deep); font-size: .9rem; font-weight: 700; }
.section-link:hover { color: var(--blue); }
.home-preview-status, .home-preview-empty { margin: 1rem 0 0; color: var(--muted); font-size: .9rem; }
.home-preview-status[hidden], .home-preview-empty[hidden], .home-game-grid[hidden], .home-event-grid[hidden] { display: none; }
.home-preview-empty { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.home-preview-empty p { margin: 0; }
.home-preview-empty a { color: var(--blue-deep); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.home-game-grid { display: grid; grid-template-columns: 1fr; gap: .8rem; margin-top: 1.1rem; }
.home-game-card { display: grid; grid-template-columns: 3.65rem minmax(0, 1fr); align-items: center; gap: .85rem; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--radius); background: var(--paper); }
.home-date-block { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 4.1rem; border-radius: 7px; background: var(--blue); color: #fff; font-variant-numeric: tabular-nums; }
.home-date-day { font: 800 1.35rem/1.15 var(--latin); }
.home-date-month { margin-top: .12rem; font-size: .72rem; font-weight: 700; }
.home-game-detail { display: flex; flex-direction: column; align-items: flex-start; gap: .22rem; min-width: 0; }
.home-game-detail .game-sport { padding: .12rem .5rem; font-size: .72rem; }
.home-game-venue { max-width: 100%; margin: .1rem 0 0; overflow: hidden; color: var(--ink); font: 600 .95rem/1.4 var(--section); text-overflow: ellipsis; white-space: nowrap; }
.home-game-when { margin: 0; color: var(--muted); font-size: .82rem; }
.home-game-slots { padding: .1rem .45rem; border-radius: 99rem; background: var(--lime); color: #263b30; font-size: .72rem; font-weight: 700; }
.home-event-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-top: 1.1rem; }
.home-event-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 1px 2px #1738480a; }
.home-event-art { display: flex; min-height: 8.5rem; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: 1rem 1.15rem; }
.home-event-card-rally .home-event-art { background: #185bdd; color: #fff; }
.home-event-card-serve .home-event-art { background: var(--lime); color: var(--ink); }
.home-event-art-label { font: 800 clamp(1.1rem, 2.3vw, 1.6rem)/1.1 var(--latin); letter-spacing: .04em; }
.home-event-art-sport { padding: .18rem .55rem; border: 1px solid currentColor; border-radius: 99rem; font-size: .75rem; font-weight: 700; }
.home-event-detail { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: .95rem 1.1rem 1.05rem; }
.home-event-type { color: var(--blue-deep); font-size: .78rem; font-weight: 700; }
.home-event-title { margin: 0; color: var(--ink); font: 600 1rem/1.4 var(--section); }
.home-event-meta { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.home-event-link { margin-top: .15rem; color: var(--blue-deep); font-size: .85rem; font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }

/* Community game board */
.comm-hero { margin: 2rem 0 1.5rem; padding: 2.1rem 0 1.5rem; border-bottom: 1px solid var(--line); background: transparent; }
.comm-hero h1 { margin: 1rem 0 .55rem; font: 600 clamp(2rem, 4vw, 2.8rem)/1.2 var(--headline); letter-spacing: -.01em; }
.comm-hero p { max-width: 40rem; margin: 0; color: #4d626e; line-height: 1.8; }
.comm-board { margin: 0 0 4rem; }
.comm-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.comm-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.1rem 0 .4rem; }
.games-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-top: 1rem; }
.game-card { display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.05rem; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); background: var(--paper); box-shadow: 0 1px 2px #1738480a; transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease; }
.game-card:hover { transform: translateY(-2px); box-shadow: 0 .6rem 1.6rem #1738481f; }
.game-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.game-sport { padding: .22rem .6rem; border-radius: 99rem; font-size: .76rem; font-weight: 700; }
.game-sport-pickleball { background: #d4f1ec; color: #0f5b51; }
.game-sport-tennis { background: #ffe0d6; color: #a23c22; }
.game-slots { padding: .22rem .6rem; border-radius: 99rem; background: var(--lime); color: #243b1e; font-size: .76rem; font-weight: 700; }
.game-venue { margin: 0; font: 600 1.1rem/1.35 var(--section); }
.game-when { margin: 0; color: #2f4a54; font-size: .92rem; }
.game-when strong { font-weight: 700; }
.game-note { margin: 0; color: #465a63; font-size: .84rem; line-height: 1.55; }
.game-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin-top: .15rem; padding-top: .6rem; border-top: 1px solid #eef2f4; }
.game-host { color: #5f757d; font-size: .82rem; font-weight: 600; }
.game-contact { color: var(--blue-deep); font-size: .85rem; font-weight: 700; }
a.game-contact { text-decoration: underline; text-underline-offset: .2em; }
.event-card { border-left-color: var(--lime); }
.ev-type { padding: .22rem .6rem; border-radius: 99rem; background: var(--blue); color: #fff; font-size: .76rem; font-weight: 700; }
.ev-type-clinic { background: #6d5ae0; }
.ev-type-open-play { background: #1f8a7a; }
.ev-type-league { background: #d9772e; }
.ev-type-other { background: #566a72; }
.ev-venue { margin: 0; color: #37525c; font-size: .86rem; font-weight: 600; }
.ev-meta { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.ev-meta li { padding: .2rem .55rem; border: 1px solid #d3e2e5; border-radius: 99rem; background: #f3f9fa; color: #2c4953; font-size: .75rem; font-weight: 600; }
.ev-register { display: inline-flex; align-items: center; min-height: 2.15rem; padding: .35rem .9rem; border-radius: .4rem; background: var(--blue); color: #fff; font-size: .82rem; font-weight: 700; }
.ev-register:hover { background: var(--blue-deep); }

/* Admin dashboard */
.admin-login { max-width: 26rem; margin: 3rem auto; padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.admin-login h1 { margin: .5rem 0 .3rem; font: 600 1.6rem/1.3 var(--headline); }
.admin-login p { color: var(--muted); margin: 0 0 1rem; }
.admin-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; color: #435963; font-size: .85rem; font-weight: 600; }
.admin-field input { min-height: 2.9rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; font-size: 1rem; }
.admin-field input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #185bdd1f; outline: none; }
.admin-login .primary { width: 100%; }
.admin-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin: 2rem 0 0; }
.admin-head h1 { margin: .2rem 0 0; font: 600 1.6rem/1.3 var(--headline); }
.admin-tabs { margin: 1.2rem 0 1rem; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.admin-table th { padding: .6rem .7rem; text-align: left; background: #f3f7f9; color: #4d626b; font-size: .8rem; font-weight: 700; white-space: nowrap; }
.admin-table td { padding: .6rem .7rem; border-bottom: 1px solid #e5ecef; }
.admin-venue { font-weight: 600; min-width: 11rem; }
.admin-num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-strong { font-weight: 700; color: var(--blue-deep); }
.admin-list { display: flex; flex-direction: column; gap: .6rem; }
.admin-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--paper); }
.admin-row-main { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.admin-row-main strong { font-size: .95rem; }
.admin-sub { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.admin-del { flex: 0 0 auto; min-height: 2.2rem; padding: .4rem .9rem; border: 1px solid #e3b9b0; border-radius: .35rem; background: #fdeeea; color: #a23c22; font-weight: 700; cursor: pointer; }
.admin-del:hover { background: #f8ddd5; }
.admin-empty { padding: 2rem 1rem; color: var(--muted); text-align: center; }
.admin-subfilter { margin: 0 0 1rem; }
.admin-actions { display: flex; flex-wrap: wrap; gap: .4rem; flex: 0 0 auto; }
.admin-toggle { min-height: 2.2rem; padding: .4rem .9rem; border: 1px solid #c9d8de; border-radius: .35rem; background: #fff; color: var(--blue-deep); font-weight: 700; cursor: pointer; }
.admin-toggle:hover { background: #eef4fd; border-color: var(--blue); }
.admin-row.is-hidden { opacity: .65; background: #f6f8f9; }
.admin-flag { margin-left: .5rem; padding: .1rem .45rem; border-radius: 99rem; background: #fdeeea; color: #a23c22; font-size: .7rem; font-weight: 700; }
.comm-empty { padding: 2.5rem 1rem; color: var(--muted); text-align: center; }
.comm-empty p { margin: 0 0 1rem; }
.create-dialog { width: min(34rem, calc(100% - 2rem)); }
.create-form { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.create-form label { display: flex; flex-direction: column; gap: .3rem; color: #435963; font-size: .82rem; font-weight: 600; }
.create-form input, .create-form select, .create-form textarea { width: 100%; min-height: 2.8rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: .95rem; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.create-form input:focus, .create-form select:focus, .create-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px #185bdd1f; outline: none; }
.create-form textarea { min-height: 3.5rem; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
.form-consent { flex-direction: row; align-items: flex-start; gap: .5rem; font-weight: 500; line-height: 1.5; }
.form-consent input { width: 1.1rem; min-height: 0; height: 1.1rem; margin: .15rem 0 0; flex: 0 0 auto; accent-color: var(--blue); }
.form-error { margin: 0; color: #c0392b; font-size: .85rem; font-weight: 600; }
.hp-field { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

@media (min-width: 560px) { .venue-grid { grid-template-columns: repeat(2, 1fr); } .games-grid { grid-template-columns: repeat(2, 1fr); } .home-game-grid, .home-event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .venue-grid { grid-template-columns: repeat(3, 1fr); } .games-grid, .home-game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .venue-grid { grid-template-columns: repeat(4, 1fr); } }

.area-list { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.area-chip { padding: .48rem .95rem; border: 1px solid var(--line); border-radius: 99rem; background: #fff; color: var(--ink); font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease; }
.area-chip:hover { border-color: var(--blue); color: var(--blue-deep); box-shadow: 0 3px 9px #17384814; transform: translateY(-1px); }
.area-list li:nth-child(3n + 1) .area-chip { background: #f3f8df; border-color: #e4edc1; }
.area-list li:nth-child(3n + 2) .area-chip { background: #fff; border-color: var(--line); }
.area-list li:nth-child(3n + 1) .area-chip:hover, .area-list li:nth-child(3n + 2) .area-chip:hover { border-color: var(--blue); color: var(--blue-deep); }

.owner-banner { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; margin: 3.6rem 0 2.8rem; padding: 1.8rem 2rem; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--radius); background: #f2f6ff; box-shadow: var(--shadow-soft); }
.owner-banner .eyebrow { color: var(--blue-deep); }
.owner-banner h2 { margin: .15rem 0; font-size: 1.4rem; }
.owner-banner p { margin: 0; color: var(--muted); font-size: .92rem; }
.owner-banner button, .primary { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.9rem; padding: .65rem 1.2rem; border: 0; border-radius: var(--radius); background: var(--blue); color: white; font-weight: 700; cursor: pointer; box-shadow: 0 .3rem .8rem #185bdd33; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.owner-banner button:hover, .primary:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: 0 .5rem 1.2rem #185bdd4d; }
.owner-banner button:active, .primary:active { transform: translateY(0); }
footer { display: flex; flex-direction: column; gap: 1.3rem; padding: 2rem 0 1.8rem; border-top: 1px solid var(--line); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 1.5rem 2.5rem; }
.footer-h { display: block; margin-bottom: .5rem; color: var(--ink); font-size: .85rem; font-weight: 700; }
.footer-contact-block { display: flex; flex-direction: column; gap: .35rem; }
.footer-contact-block a { color: var(--blue-deep); font-size: .88rem; font-weight: 600; }
.footer-contact-block a:hover { text-decoration: underline; text-underline-offset: .2em; }
.footer-company { max-width: 24rem; }
.footer-company p { margin: 0 0 .25rem; color: var(--muted); font-size: .85rem; line-height: 1.55; }
.footer-bottom { padding-top: 1.1rem; border-top: 1px solid var(--line); }
.footer-bottom small { color: var(--muted); font-size: .8rem; }

dialog { position: relative; width: min(32rem, calc(100% - 2rem)); padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); box-shadow: 0 1.4rem 4rem #17384847; }
dialog::backdrop { background: #10232a99; }
dialog h2 { margin: 1.1rem 0 .5rem; }
dialog p { color: var(--muted); }
.dialog-contact { margin-top: .6rem; color: var(--ink); font-weight: 600; line-height: 1.7; }
.dialog-contact a { color: var(--blue-deep); font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.dialog-actions .dismiss { min-height: 2.9rem; margin-top: 0; padding: .65rem 1.2rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 600; }
.dialog-actions .dismiss:hover { background: var(--page); }
.ghost { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.9rem; padding: .65rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--blue-deep); font-weight: 700; }
.ghost:hover { border-color: var(--blue); background: #eef4fd; }
.share-dialog p { margin: .4rem 0 1.1rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.share-options { display: flex; flex-direction: column; gap: .55rem; }
.share-opt { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.9rem; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); font-size: .95rem; font-weight: 700; cursor: pointer; }
.share-opt:hover { background: var(--page); }
.share-fb { border-color: transparent; background: #1877f2; color: #fff; }
.share-fb:hover { background: #0e5fd1; }
.share-line { border-color: transparent; background: #06c755; color: #fff; }
.share-line:hover { background: #05a647; }
.close { position: absolute; top: .65rem; right: .65rem; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: #eef4f6; color: var(--ink); font-size: 1.5rem; line-height: 1; }
.dismiss { margin-top: .25rem; }

@media (min-width: 1500px) {
  .header-inner, main, footer { width: min(100% - 4rem, 1360px); }
  .hero { min-height: 20rem; }
  .hero-art { min-height: 20rem; }
}
@media (max-width: 900px) {
  .header-inner, main, footer { width: min(100% - 2rem, 1280px); }
  nav { gap: 1.1rem; }
  .hero { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.5rem; min-height: 18.5rem; }
  .hero-art { min-height: 18.5rem; }
  h1 { font-size: clamp(2.45rem, 4.8vw, 3.4rem); }
  .sheet-heading { align-items: flex-start; }
  .finder-panel { grid-template-columns: 1fr; gap: 1rem; }
  .finder-panel.has-province { grid-template-columns: 1fr; }
  .finder-panel .finder-submit { grid-column: 1; grid-row: auto; }
  .finder-panel .finder-areas { grid-column: 1; grid-row: auto; }
  .sheet-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .header-inner { min-height: 4.5rem; gap: .5rem; }
  .brand { gap: .55rem; }
  .brand-wordmark { font-size: 1.55rem; }
  .brand-divider { height: 1.7rem; }
  .brand-sub { font-size: .52rem; }
  .brand-sub small { font-size: .37rem; }
  nav { display: none; }
  .saved-toggle { width: 2.65rem; height: 2.65rem; min-height: 2.65rem; padding: .45rem; flex: 0 0 auto; }
  .saved-toggle span:first-of-type { display: none; }
  .owner { padding: .45rem .55rem; font-size: .78rem; }
  .hero { grid-template-columns: 1fr; min-height: 0; margin: 1.15rem 0 1rem; }
  .hero-copy { padding: 1rem 0 .25rem; }
  h1 { margin: .75rem 0 .55rem; font-size: clamp(2.25rem, 7.1vw, 2.75rem); }
  .hero-copy > p { font-size: .95rem; }
  .hero-bottom { margin-top: 1rem; font-size: .78rem; }
  .hero-art { min-height: 13.5rem; }
  .art-top { top: .8rem; left: .8rem; }
  .art-label { bottom: .7rem; left: .8rem; font-size: .72rem; }
  .comm-hero { margin: 1.15rem 0 1.2rem; padding: 1.5rem 0 1rem; }
  .comm-head { align-items: flex-start; }
  .form-row { grid-template-columns: 1fr; }
  .finder-panel { gap: .9rem; margin-bottom: 2rem; padding: .85rem; }
  .finder-search { font-size: .875rem; }
  .finder-search .search-field input { min-height: 3rem; font-size: 1rem; }
  .finder-location-field select { min-height: 3rem; font-size: .9rem; }
  .finder-areas { gap: .55rem; }
  .finder-area-label { font-size: .9rem; }
  .finder-submit { width: 100%; }
  .sheet-directory { margin-bottom: 3rem; }
  .sheet-heading { flex-direction: column; gap: .4rem; }
  .home-section-heading { align-items: flex-start; flex-direction: column; gap: .65rem; }
  .home-section-heading h2 { font-size: 1.4rem; }
  .home-game-grid, .home-event-grid { grid-template-columns: 1fr; }
  h2 { font-size: 1.45rem; }
  .sheet-heading p { font-size: .82rem; }
  .sheet-updated { font-size: .76rem; }
  .sport-tabs { margin-top: .9rem; }
  .sport-tab { flex: 1; padding: .5rem .5rem; text-align: center; }
  .sheet-filters { gap: .55rem; margin-top: 1rem; }
  .sheet-filters label { font-size: .875rem; }
  .sheet-filters input:not([type="checkbox"]), .sheet-filters select { min-height: 2.7rem; padding-inline: .5rem; font-size: .875rem; }
  .sheet-filters .sheet-toggle { grid-column: 1 / -1; }
  .sheet-result-line { min-height: 2.8rem; }
  .sheet-status { font-size: .82rem; }
  .sheet-count { font-size: .78rem; text-align: right; }
  .venue-grid { gap: .85rem; }
  .vc-body { padding: .9rem .95rem 1rem; }
  .vc-transit { grid-template-columns: 1.25rem minmax(0, 1fr); }
  .vc-transit-link { grid-column: 2; justify-self: start; margin-top: .1rem; }
  .vc-name { font-size: 1.1rem; }
  .area-list { gap: .4rem; }
  .area-chip { padding: .42rem .8rem; font-size: .875rem; }
  .owner-banner { align-items: flex-start; flex-direction: column; margin: 2.5rem 0 2rem; padding: 1.2rem; }
  .owner-banner h2 { font-size: 1.25rem; }
  .owner-banner button { width: 100%; }
  footer { flex-wrap: wrap; }
  footer .brand-wordmark { font-size: 1.45rem; }
  footer small { width: 100%; }
}
@media (max-width: 380px) {
  .sheet-filters { grid-template-columns: 1fr; }
  .sheet-filters .sheet-toggle { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .spinner { animation: none; }
  .venue-card, .area-chip, .sport-tab, .to-top { transition: none; }
}