/* Chess Allez: "Sunny Social" design system (ported from the main site) */
:root {
  --bg: #fff8ec;
  --card: #ffffff;
  --ink: #1c1329;
  --ink-muted: #6b6178;
  --pink: #ff5c8a;
  --orange: #ff8a3d;
  --yellow: #ffc93c;
  --purple: #7c5cff;
  --purple-ink: #5f41ec; /* the purple to use for text: 6:1 on white and cream (the brand purple is 4.3:1) */
  --teal: #2ec4b6;
  --border: #f0e4cf;
  --shadow: rgba(28, 19, 41, 0.12);
  --ok: #0f8f5c;
  --bad: #c41e3a;
  --gold: #d9a520;
  --silver: #9aa3ad;
  --bronze: #b0713a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: 'Inter', sans-serif; }
h1, h2, h3, h4 { font-family: 'Fredoka', sans-serif; margin: 0; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
main { display: block; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 10px 0; z-index: 200; font-weight: 700; }
.skip-link:focus { left: 0; }

/* NAV */
nav.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; position: sticky; top: 0; z-index: 50;
  background: rgba(255, 248, 236, 0.94); backdrop-filter: blur(6px);
  border-bottom: 2px solid var(--border);
}
.logo { display: flex; align-items: center; gap: 10px; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 20px; min-width: 0; }
.logo img { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; }
.logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-links { display: flex; gap: 6px; font-weight: 700; font-size: 15px; flex-wrap: wrap; }
.nav-links a { padding: 8px 14px; border-radius: 999px; }
.nav-links a:hover { color: var(--purple-ink); }
.nav-links a.on { background: var(--ink); color: #fff; }
/* Club portal and administrator tabs: an outline when not active, filled with the brand yellow on hover or keyboard focus */
.nav-links.tabs a { border: 2px solid var(--ink); padding: 6px 14px; }
.nav-links.tabs a:hover, .nav-links.tabs a:focus-visible { background: var(--yellow); color: var(--ink); }
.nav-links.tabs a.on, .nav-links.tabs a.on:hover { background: var(--ink); color: #fff; }
.nav-right { display: flex; gap: 10px; align-items: center; }
.nav-cta { background: var(--ink); color: #fff; padding: 11px 20px; border-radius: 999px; font-weight: 700; font-size: 14px; box-shadow: 4px 4px 0 var(--yellow); white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 2px solid var(--ink); border-radius: 10px; padding: 7px 10px; font-size: 18px; cursor: pointer; }

/* BUTTONS */
.btn {
  display: inline-block; padding: 14px 26px; border-radius: 999px; font-weight: 700; font-family: inherit;
  font-size: 15px; border: 2px solid var(--ink); transition: transform .15s ease; cursor: pointer; background: #fff; color: var(--ink);
  text-align: center; line-height: 1.2;
}
.btn:hover { transform: translate(-2px, -2px); }
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--yellow); box-shadow: 4px 4px 0 var(--ink); }
.btn-secondary { background: #fff; box-shadow: 4px 4px 0 var(--purple); }
.btn-ghost { background: #fff; box-shadow: 3px 3px 0 var(--shadow); }
.btn-danger { background: #fff; color: var(--bad); border-color: var(--bad); box-shadow: 3px 3px 0 rgba(196, 30, 58, .15); }
.btn-dark { background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--yellow); }
.btn-sm { padding: 8px 15px; font-size: 13px; }
.btn-sm.btn-primary, .btn-sm.btn-secondary { box-shadow: 3px 3px 0 var(--ink); }
.btn-sm.btn-secondary { box-shadow: 3px 3px 0 var(--purple); }

/* BADGES AND CHIPS */
.badge { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--ink); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 22px; }
.badge .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); }
.chip { display: inline-block; font-size: 12px; font-weight: 800; padding: 4px 11px; border-radius: 999px; text-transform: uppercase; letter-spacing: .4px; vertical-align: middle; white-space: nowrap; }
.chip-green { background: #dff8f5; color: #0a6f65; }
.chip-yellow { background: #fff0d6; color: #8a5200; }
.chip-pink { background: #ffe3ea; color: #a82a56; }
.chip-purple { background: #e6e0ff; color: #5c3fd9; }
.chip-gray { background: #eee9f3; color: #6b6178; }
.chip-dark { background: var(--ink); color: #fff; }

/* LANDING */
.hero { padding: 60px 28px 50px; max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; }
.hero h1 { font-size: 54px; line-height: 1.08; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px; }
.hero h1 .u1 { color: #d93a6a; }
.hero h1 .u2 { color: var(--purple); }
.hero p { font-size: 19px; color: var(--ink-muted); max-width: 500px; margin: 0 0 30px; font-weight: 500; line-height: 1.55; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-art { position: relative; background: linear-gradient(135deg, var(--pink), var(--purple)); border-radius: 32px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; box-shadow: 8px 8px 0 var(--ink); }
.hero-art img { width: 55%; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,255,255,0.25); }
.hero-art .float { position: absolute; background: #fff; border: 2px solid var(--ink); border-radius: 16px; padding: 10px 14px; font-weight: 700; font-size: 14px; box-shadow: 3px 3px 0 var(--ink); }
.float1 { top: 14px; left: -18px; transform: rotate(-8deg); }
.float2 { bottom: 20px; right: -20px; transform: rotate(6deg); color: #0a6f65; }
.float3 { top: 46%; right: -26px; transform: rotate(4deg); color: var(--purple-ink); }
.marquee-wrap { overflow: hidden; background: var(--ink); padding: 14px 0; transform: rotate(-1deg); margin: 20px 0 50px; }
.marquee { display: flex; gap: 40px; white-space: nowrap; animation: scroll 26s linear infinite; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 18px; color: #fff; }
.marquee span { color: var(--yellow); }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

.eyebrow { color: var(--purple-ink); font-weight: 800; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.section { max-width: 1100px; margin: 0 auto; padding: 20px 28px 70px; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 44px; }
.section-head h2 { font-size: 38px; margin-bottom: 14px; line-height: 1.2; }
.section-head p { color: var(--ink-muted); font-size: 17px; font-weight: 500; margin: 0; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.feature { background: var(--card); border: 2px solid var(--ink); border-radius: 24px; padding: 28px 24px; box-shadow: 6px 6px 0 var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover { transform: translate(-4px,-4px); box-shadow: 9px 9px 0 rgba(28,19,41,0.18); }
.feature .swatch { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin-bottom: 16px; }
.feature h3, .feature h4 { font-size: 21px; margin-bottom: 8px; }
.feature p { color: var(--ink-muted); font-size: 15px; line-height: 1.6; font-weight: 500; margin: 0; }
.sw1 { background: #ffe3ea; } .sw2 { background: #e6e0ff; } .sw3 { background: #dff8f5; } .sw4 { background: #fff0d6; }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step { background: var(--ink); color: #fff; border-radius: 26px; padding: 30px; position: relative; overflow: hidden; }
.step::before { counter-increment: step; content: counter(step); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 44px; color: var(--yellow); display: block; margin-bottom: 8px; }
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { color: #c7bfd6; font-size: 15px; line-height: 1.6; font-weight: 500; margin: 0; }
.final-cta { padding: 56px 28px 80px; text-align: center; background: linear-gradient(180deg, var(--bg), #ffe9cc); }
.final-cta h2 { font-size: 44px; margin-bottom: 16px; }
.final-cta p { color: var(--ink-muted); font-size: 18px; margin: 0 0 32px; font-weight: 500; }
footer.site { padding: 36px 28px; text-align: center; color: var(--ink-muted); font-size: 14px; background: var(--bg); }
footer.site a { font-weight: 700; margin: 0 6px; }

/* AUTH PAGES */
.auth-wrap { max-width: 480px; margin: 0 auto; padding: 50px 24px 90px; }
.auth-wrap h1 { font-size: 34px; margin-bottom: 8px; }
.auth-wrap .lead { color: var(--ink-muted); font-weight: 500; margin: 0 0 24px; line-height: 1.55; }
.link-preview { font-size: 13px; color: var(--ink-muted); font-weight: 600; margin-top: 6px; word-break: break-all; }
.link-preview b { color: var(--purple-ink); }

/* FORMS */
.card { background: var(--card); border: 2px solid var(--ink); border-radius: 22px; padding: 24px; box-shadow: 5px 5px 0 var(--shadow); margin-bottom: 22px; }
.card > h2, .card-head h2 { font-size: 22px; margin-bottom: 4px; }
.card > h2 { margin-bottom: 14px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
label.inline { display: flex; align-items: center; gap: 10px; font-weight: 600; margin: 12px 0 0; cursor: pointer; }
label.inline input { width: auto; }
.field-first label:first-child { margin-top: 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=tel], input[type=url], select, textarea {
  width: 100%; padding: 11px 13px; border: 2px solid var(--border); border-radius: 12px; font-size: 15px; font-family: 'Inter', sans-serif; background: #fff; color: var(--ink);
}
input:focus, select:focus, textarea:focus { border-color: var(--purple); outline: none; }
input[type=checkbox], input[type=radio] { accent-color: var(--purple); width: 18px; height: 18px; }
textarea { resize: vertical; min-height: 110px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; }
.grid label:first-child { margin-top: 14px; }
.hint { font-size: 13px; color: var(--ink-muted); font-weight: 500; line-height: 1.5; margin-top: 6px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.row.between { justify-content: space-between; }
.form-status { margin-top: 12px; font-weight: 600; font-size: 14px; }
.form-status.error, .error-msg { color: var(--bad); font-weight: 600; font-size: 14px; }
.form-status.success { color: var(--ok); }
.note { padding: 12px 16px; border-radius: 14px; background: #e6e0ff; border: 2px solid #cfc5ff; font-size: 14px; font-weight: 500; margin-bottom: 16px; line-height: 1.5; }
.note.ok { background: #dff8f5; border-color: #a9e6df; }
.note.warn { background: #ffe3ea; border-color: #ffc1d0; }
.note.gold { background: #fff0d6; border-color: #ffd99a; }
.empty { color: var(--ink-muted); font-weight: 500; text-align: center; padding: 30px; border: 2px dashed var(--border); border-radius: 22px; }

/* PORTAL LAYOUT */
.wrap { max-width: 1100px; margin: 0 auto; padding: 30px 28px 90px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { font-size: 34px; line-height: 1.15; }
.page-head .sub { color: var(--ink-muted); font-weight: 500; margin-top: 6px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 22px; }
.stat { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 18px 20px; box-shadow: 5px 5px 0 var(--shadow); }
.stat .n { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 34px; line-height: 1.1; }
.stat .l { color: var(--ink-muted); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }
.stat.s1 .n { color: var(--purple-ink); } .stat.s2 .n { color: #07857a; } .stat.s3 .n { color: #d6336c; } .stat.s4 .n { color: #c95300; }
.list-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 2px solid var(--border); flex-wrap: wrap; }
.list-row:last-child { border-bottom: 0; }
.list-row .main { min-width: 220px; flex: 1; }
.list-row .main b { font-size: 17px; font-family: 'Fredoka', sans-serif; }
.list-row .meta { font-size: 13px; color: var(--ink-muted); font-weight: 500; margin-top: 3px; }
.list-row .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.copy-box { display: flex; gap: 10px; align-items: center; background: var(--bg); border: 2px dashed var(--border); border-radius: 14px; padding: 10px 14px; flex-wrap: wrap; }
.copy-box code { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; word-break: break-all; flex: 1; min-width: 200px; }

/* TABS AND FILTER CHIPS */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; }
.tab { border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 14px; cursor: pointer; font-family: inherit; color: var(--ink); }
.tab.on { background: var(--ink); color: #fff; }
.tab.lock { opacity: .72; }
.tab.done::after { content: " \2713"; color: var(--teal); }
.tab.on.done::after { color: #7ff0e4; }

/* TABLES */
.scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl th, .tbl td { text-align: left; padding: 11px 10px; border-bottom: 2px solid var(--border); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .5px; font-weight: 800; white-space: nowrap; }
.tbl td.n, .tbl th.n { text-align: right; }
.tbl td small, .sub-line { display: block; color: var(--ink-muted); font-weight: 500; font-size: 12.5px; }
.tbl tr.p1 td:first-child { box-shadow: inset 6px 0 0 var(--gold); }
.tbl tr.p2 td:first-child { box-shadow: inset 6px 0 0 var(--silver); }
.tbl tr.p3 td:first-child { box-shadow: inset 6px 0 0 var(--bronze); }
.tbl tr.mine td { background: #fff5d0; }
.tbl input[type=text], .tbl input[type=number] { padding: 7px 10px; border-radius: 10px; }
.tbl input.po { width: 72px; }
.tbl input.rt { width: 92px; }
.tie-badge { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; background: #ffe3ea; color: #a82a56; margin-left: 6px; }

/* TOOLBAR */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.toolbar input[type=text] { max-width: 300px; }
.toolbar select { width: auto; }

/* BOARDS */
.board { display: grid; grid-template-columns: 58px 1fr 210px 1fr; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 2px solid var(--border); }
.board:last-child { border-bottom: 0; }
.bnum { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--purple-ink); font-size: 17px; }
.pl { display: flex; flex-direction: column; min-width: 0; }
.pl b { font-size: 15px; overflow-wrap: anywhere; }
.pl small { color: var(--ink-muted); font-size: 12.5px; }
.pl.right { text-align: right; align-items: flex-end; }
.pl.right .dot-c { margin: 0 0 0 7px; }
.pl .pts { display: inline-block; margin-left: 7px; padding: 0 8px; font-size: 12px; font-weight: 800; color: #5c3fd9; background: #e6e0ff; border-radius: 999px; }
.dot-c { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--ink); margin-right: 7px; vertical-align: middle; }
.dot-c.w { background: #fff; } .dot-c.b { background: var(--ink); }
.res { display: flex; gap: 4px; }
.res button { flex: 1; padding: 9px 4px; border: 2px solid var(--ink); background: #fff; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; }
.res button.on { background: var(--ink); color: #fff; }
.byeRow { padding: 12px 0; color: var(--ink-muted); font-weight: 600; }

/* PICKER */
.picker { border: 2px solid var(--border); border-radius: 16px; max-height: 340px; overflow-y: auto; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 2px solid var(--border); cursor: pointer; margin: 0; font-weight: 600; }
.pick:last-child { border-bottom: 0; }
.pick.in { opacity: .5; cursor: default; }
.pick .who { flex: 1; min-width: 0; }
.pick .who small { display: block; color: var(--ink-muted); font-weight: 500; font-size: 12.5px; }

/* TEMPLATE PICKER */
.tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.tplcard { border: 2px solid var(--border); border-radius: 18px; padding: 8px; cursor: pointer; background: #fff; text-align: left; font-family: inherit; color: inherit; }
.tplcard.on { border-color: var(--ink); box-shadow: 4px 4px 0 var(--purple); }
.tplcard img { width: 100%; border-radius: 10px; border: 2px solid var(--border); display: block; background: #f3eee4; aspect-ratio: 4/5; object-fit: cover; }
.tplcard b { display: block; margin-top: 8px; font-family: 'Fredoka', sans-serif; font-size: 15px; }
.tplcard small { color: var(--ink-muted); font-size: 12px; line-height: 1.3; display: block; font-weight: 500; }
.tplcard .pf { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 800; color: #0a6f65; background: #dff8f5; border-radius: 999px; padding: 1px 8px; }

/* FORMAT CHOICE */
.choice { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice label { margin: 0; border: 2px solid var(--border); border-radius: 18px; padding: 16px; cursor: pointer; font-weight: 500; display: block; }
.choice label b { display: block; font-family: 'Fredoka', sans-serif; font-size: 18px; margin-bottom: 4px; }
.choice label span { color: var(--ink-muted); font-size: 13.5px; line-height: 1.45; display: block; }
.choice input:checked + label { border-color: var(--ink); box-shadow: 4px 4px 0 var(--purple); background: #faf8ff; }
.choice input:focus-visible + label { outline: 3px solid var(--purple); outline-offset: 2px; }

/* POST / COPY BLOCKS */
.post { border: 2px solid var(--border); border-radius: 18px; padding: 16px; margin-bottom: 14px; background: #fffdf8; }
.post h3 { font-size: 17px; margin-bottom: 4px; }
.post textarea { min-height: 200px; font-size: 14px; line-height: 1.5; margin-top: 8px; }

/* MODAL, TOAST */
.modal-overlay { position: fixed; inset: 0; background: rgba(28,19,41,0.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-card { background: #fff; border: 2px solid var(--ink); border-radius: 22px; padding: 26px; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; box-shadow: 6px 6px 0 rgba(28,19,41,0.2); }
.modal-card.wide { width: min(780px, 100%); }
.modal-card.tall { width: min(1000px, 100%); height: 92vh; display: flex; flex-direction: column; padding: 16px 20px; }
.modal-card h2, .modal-card h3 { font-size: 22px; margin-bottom: 14px; }
.modal-card > p { color: var(--ink-muted); line-height: 1.5; margin: 0 0 16px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
.modal-card.tall .modal-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.modal-card iframe { flex: 1; min-height: 0; border: 0; width: 100%; background: #eee9f3; border-radius: 12px; margin-top: 10px; }
.img-stack { display: grid; gap: 14px; justify-items: center; background: #eee9f3; border-radius: 14px; padding: 14px; overflow-y: auto; }
.img-stack img { max-width: min(440px, 100%); height: auto; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 300; box-shadow: 4px 4px 0 var(--yellow); max-width: 92vw; text-align: center; }

/* PRINT SHEET */
.sheet { background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 28px 32px; max-width: 820px; margin: 0 auto 20px; color: #1a1a1a; }
.sh-head { display: flex; gap: 16px; align-items: center; border-bottom: 4px solid var(--purple); padding-bottom: 12px; }
.sh-head img { width: 66px; height: 66px; border-radius: 50%; flex: none; object-fit: cover; }
.sh-head h1 { margin: 0; font-size: 28px; line-height: 1.15; }
.sh-head .sub { color: #444; font-size: 14px; margin-top: 3px; }
.sh-qr { display: flex; gap: 24px; align-items: center; margin: 18px 0; padding: 16px 20px; border: 2px solid var(--ink); border-radius: 18px; background: #faf8ff; }
.sh-qr .qr { width: 200px; height: 200px; flex: none; background: #fff; padding: 10px; border-radius: 12px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 13px; color: var(--ink-muted); }
.sh-qr .qr svg { width: 100%; height: 100%; display: block; }
.sh-qr h2 { margin: 0 0 8px; font-size: 21px; line-height: 1.2; }
.sh-qr ol { margin: 0 0 8px; padding-left: 20px; font-size: 15px; }
.sh-qr .url { font-size: 13px; color: var(--ink-muted); word-break: break-all; }
.sh-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 26px; margin-bottom: 14px; }
.sh-item b { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--purple-ink); margin-bottom: 2px; }
.sh-item div { font-size: 14px; }
.sh-rules { border-top: 2px solid var(--border); padding-top: 10px; }
.sh-rules h3 { margin: 0 0 6px; font-size: 16px; }
.sh-rules ul { margin: 0; padding-left: 18px; font-size: 13.5px; }
.sh-rules li { margin: 2px 0; }
.sh-foot { margin-top: 12px; font-size: 12.5px; color: var(--ink-muted); text-align: center; }
@page { size: Letter; margin: 0.45in; }
@media print {
  nav.top, .noprint, .tabs, .toast, footer.site { display: none !important; }
  body { background: #fff; }
  .wrap { padding: 0; max-width: none; }
  .sheet { border: 0; padding: 0; max-width: none; margin: 0; border-radius: 0; }
  .card { border: 0; box-shadow: none; padding: 0; }
  .res button:not(.on) { display: none; }
}

/* PUBLIC PAGES (player page, club page) */
.pub-head { background: linear-gradient(135deg, var(--pink), var(--purple)); color: #fff; padding: 22px 20px 18px; border-bottom: 3px solid var(--ink); }
.pub-head .in { max-width: 680px; margin: 0 auto; display: flex; gap: 14px; align-items: center; }
.pub-head img.lg { width: 56px; height: 56px; border-radius: 50%; border: 3px solid #fff; flex: none; object-fit: cover; background: #fff; }
.pub-head h1 { font-size: 24px; line-height: 1.15; }
.pub-head .meta { font-size: 14px; opacity: .92; margin-top: 3px; font-weight: 500; }
.pub-head .upd { max-width: 680px; margin: 10px auto 0; font-size: 12.5px; opacity: .85; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pub-head .upd button { background: rgba(255,255,255,.2); color: #fff; border: 2px solid rgba(255,255,255,.7); border-radius: 999px; padding: 4px 14px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pub-main { max-width: 680px; margin: 0 auto; padding: 20px 16px 60px; }
.pub-main .card { padding: 18px; border-radius: 20px; margin-bottom: 18px; }
.pub-main .card h2 { font-size: 18px; margin-bottom: 10px; }
.me { box-shadow: 5px 5px 0 var(--purple); }
.me .who { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-muted); font-weight: 600; }
.me .who a { color: var(--purple-ink); cursor: pointer; text-decoration: underline; font-weight: 700; }
.me .rd { font-size: 14px; color: var(--ink-muted); margin: 8px 0 0; font-weight: 600; }
.me .bd { font-family: 'Fredoka', sans-serif; font-size: 60px; font-weight: 700; color: var(--purple-ink); line-height: 1.05; }
.me .bd small { font-size: 18px; font-weight: 600; color: var(--ink-muted); }
.colorchip { display: inline-flex; align-items: center; gap: 9px; margin-top: 8px; font-size: 22px; font-weight: 700; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--ink); font-family: 'Fredoka', sans-serif; }
.colorchip i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }
.colorchip.w { background: #fff; } .colorchip.w i { background: #fff; }
.colorchip.b { background: var(--ink); color: #fff; } .colorchip.b i { background: var(--ink); border-color: #fff; }
.vs { margin-top: 12px; font-size: 16px; }
.vs b { font-size: 20px; font-family: 'Fredoka', sans-serif; }
.win { color: var(--ok); font-weight: 800; } .loss { color: var(--bad); font-weight: 800; }
.matches { margin-top: 8px; display: grid; gap: 8px; }
.matches button { text-align: left; font: inherit; font-weight: 600; padding: 12px 14px; border: 2px solid var(--ink); background: #fff; border-radius: 14px; cursor: pointer; }
.pub-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pub-tabs button { flex: 1 1 auto; min-width: 0; padding: 11px 14px; border: 2px solid var(--ink); background: #fff; border-radius: 999px; font: inherit; font-weight: 700; cursor: pointer; }
.pub-tabs button.on { background: var(--ink); color: #fff; }
@media (max-width: 480px) { .pub-tabs { gap: 6px; } .pub-tabs button { padding: 11px 6px; font-size: 14px; } }
.bo { display: grid; grid-template-columns: 44px 1fr auto 1fr; gap: 6px 10px; padding: 11px 6px; border-bottom: 2px solid var(--border); align-items: center; }
.bo:last-child { border-bottom: 0; }
.bo.mine { background: #fff5d0; border-radius: 12px; }
.bo .n { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--purple-ink); font-size: 18px; }
.bo .p b { display: block; font-size: 15px; overflow-wrap: anywhere; }
.bo .p.right { text-align: right; }
.bo .p.right .dot-c { margin: 0 0 0 7px; }
.bo .rp { text-align: center; }
.bo .r { grid-column: 2 / 5; font-size: 12.5px; color: var(--ink-muted); font-weight: 600; text-align: center; }
.pub-powered { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; }
.pub-powered img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.pub-foot { text-align: center; color: var(--ink-muted); font-size: 13px; padding: 10px 16px 40px; font-weight: 500; }
.pub-foot a { font-weight: 700; text-decoration: underline; }
.pub-foot a.pub-powered { text-decoration: none; color: var(--ink-muted); }
.pub-foot a.pub-powered:hover span { text-decoration: underline; }
.event-card { background: #fff; border: 2px solid var(--ink); border-radius: 22px; padding: 22px; box-shadow: 6px 6px 0 var(--shadow); }
.event-card .date { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; color: var(--ink-muted); margin: 10px 0 6px; }
.event-card h3 { font-size: 20px; margin-bottom: 6px; }
.event-card .loc { font-size: 14px; color: var(--ink-muted); font-weight: 500; }

@media (max-width: 820px) {
  nav.top { padding: 12px 16px; flex-wrap: wrap; }
  .nav-links { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .nav-links a { white-space: nowrap; }
  .hero { grid-template-columns: 1fr; padding-top: 34px; }
  .hero h1 { font-size: 38px; }
  .float1 { left: -6px; } .float2, .float3 { right: -6px; }
  .grid3, .steps, .grid2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .section-head h2 { font-size: 28px; }
  .final-cta h2 { font-size: 32px; }
  .wrap { padding: 22px 16px 80px; }
  .page-head h1 { font-size: 28px; }
  .board { grid-template-columns: 52px 1fr 190px 1fr; gap: 8px; }
  .choice { grid-template-columns: 1fr; }
  .sh-grid { grid-template-columns: 1fr; }
  .sh-qr { flex-direction: column; text-align: center; }
  .card { padding: 18px; }
  .btn { padding: 12px 20px; }
}

/* Phones: names side by side, result buttons on their own row */
@media (max-width: 600px) {
  .board { grid-template-columns: 46px 1fr 1fr; }
  .board > .bnum { grid-column: 1; grid-row: 1; }
  .board > .pl:not(.right) { grid-column: 2; grid-row: 1; }
  .board > .pl.right { grid-column: 3; grid-row: 1; }
  .board > .res { grid-column: 1 / -1; grid-row: 2; }
  nav.top { position: static; }
  .tbl { font-size: 14px; }
  .tbl th, .tbl td { padding: 9px 5px; }
  .tbl th { font-size: 11px; letter-spacing: 0; }
  .card .scroll { margin: 0 -6px; }
  .tbl.stack thead { display: none; }
  .tbl.stack, .tbl.stack tbody { display: block; }
  .tbl.stack tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 0; border-bottom: 2px solid var(--border); }
  .tbl.stack tr:last-child { border-bottom: 0; }
  .tbl.stack td { border: 0; padding: 0; }
  .tbl.stack td:first-child { flex: 1 1 100%; }
  .tbl.stack td.n:last-child { flex: 1 1 100%; text-align: left; white-space: normal !important; }
}

/* Club avatar (shown when a club has not uploaded a logo) */
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; flex: none; font-family: 'Inter', sans-serif; }
.avatar.lg { width: 56px; height: 56px; font-size: 32px; border: 3px solid #fff; background: var(--ink); }
.avatar.xl { width: 66px; height: 66px; font-size: 38px; }
.logo-preview { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); }
.logo-preview.avatar { font-size: 52px; }

/* Rendered Markdown (details text), from lib/markdown.js */
.md-body { font-size: 15px; line-height: 1.6; font-weight: 500; }
.md-body p { margin: 0 0 8px; }
.md-body p:last-child { margin-bottom: 0; }
.md-body ul { margin: 0 0 8px; padding-left: 20px; }
.md-body a { color: var(--purple-ink); font-weight: 700; text-decoration: underline; }
.md-body strong { color: var(--ink); }
.sheet .md-body { font-size: 13.5px; }

/* Pagination */
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.pager-info { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.pager .pages { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pg { border: 2px solid var(--ink); background: #fff; border-radius: 999px; min-width: 38px; padding: 6px 12px; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink); }
.pg.on { background: var(--ink); color: #fff; }
.pg:disabled { opacity: .4; cursor: not-allowed; }
.pg-gap { color: var(--ink-muted); font-weight: 700; padding: 0 2px; }

.img-item { margin: 0; display: grid; gap: 8px; justify-items: center; }

/* ---------- Game recorder ---------- */
body.rec-open { overflow: hidden; }
.rec-btn { width: 100%; margin-top: 14px; }
.rec-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(28, 19, 41, .55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 12px; }
.rec-panel { background: var(--bg); border: 3px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); width: 100%; max-width: 480px; padding: 16px; margin: auto; }
.rec-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rec-top h2 { margin: 0; }
.rec-x { border: 2px solid var(--ink); background: #fff; border-radius: 50%; width: 38px; height: 38px; font-size: 22px; line-height: 1; cursor: pointer; }
.rec-names { display: flex; justify-content: space-between; gap: 10px; font-weight: 700; margin: 10px 0 4px; font-size: 14.5px; }
.rec-names span { overflow-wrap: anywhere; }
.rec-names span:last-child { text-align: right; }
.rec-status { min-height: 40px; font-weight: 600; font-size: 14px; margin: 4px 0 8px; }
.rec-board { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); container-type: inline-size; aspect-ratio: 1; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; touch-action: manipulation; }
.rec-board[data-off] { opacity: .7; }
.rec-board .sq { position: relative; width: 100%; height: 100%; overflow: hidden; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; display: flex; align-items: center; justify-content: center; min-width: 0; }
.rec-board .sq.lt { background: #fbe6b8; }
.rec-board .sq.dk { background: #d99a5b; }
.rec-board .sq.last { box-shadow: inset 0 0 0 100px rgba(255, 201, 60, .45); }
.rec-board .sq.sel { box-shadow: inset 0 0 0 100px rgba(124, 92, 255, .4); }
.rec-board .sq.tgt::after { content: ''; width: 28%; height: 28%; border-radius: 50%; background: rgba(124, 92, 255, .7); position: absolute; }
.rec-board .sq.cap { box-shadow: inset 0 0 0 4px rgba(255, 92, 138, .9); }
.rec-board .pc { font-size: 10cqw; line-height: 1; }
.rec-promo .pc { font-size: 32px; line-height: 1; }
.pc { font-variant-emoji: text; }
.pc.w { color: #fff; text-shadow: 0 0 2px #1c1329, 0 0 2px #1c1329, 1px 1px 0 #1c1329, -1px -1px 0 #1c1329, 1px -1px 0 #1c1329, -1px 1px 0 #1c1329; }
.pc.b { color: #1c1329; text-shadow: 0 0 1px #fff; }
.rec-board .cf, .rec-board .cr { position: absolute; font-style: normal; font-size: 9px; font-weight: 800; color: rgba(28, 19, 41, .55); pointer-events: none; }
.rec-board .cf { bottom: 1px; right: 3px; }
.rec-board .cr { top: 1px; left: 3px; }
.rec-promo { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-weight: 700; flex-wrap: wrap; }
.rec-promo button:not(.link) { border: 2px solid var(--ink); background: #fff; border-radius: 12px; width: 52px; height: 52px; cursor: pointer; }
.rec-msg { min-height: 18px; font-size: 13px; margin-top: 8px; }
.rec-msg.bad { color: var(--bad); font-weight: 600; }
.rec-actions { display: flex; gap: 10px; margin-top: 8px; }
.rec-actions .btn { flex: 1; }
.rec-moves { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 3px 8px; margin-top: 12px; max-height: 150px; overflow-y: auto; padding: 8px 10px; background: #fff; border: 2px solid var(--border); border-radius: 12px; font-weight: 600; font-size: 14px; }
.rec-moves .mn { color: var(--ink-muted); }
.rec-moves .mv.cur { color: var(--purple-ink); font-weight: 800; }
.rec-result { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rec-result > span { font-weight: 700; margin-right: 4px; }
.rec-result button:not(.link) { border: 2px solid var(--ink); background: #fff; border-radius: 999px; padding: 8px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.rec-result button.on { background: var(--ink); color: #fff; }
.rec-result button:disabled { opacity: .45; cursor: not-allowed; }
.rec-panel .link { background: none; border: 0; color: var(--purple-ink); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 600; }
#recPin { font-size: 28px; letter-spacing: .4em; text-align: center; }
#recPin::placeholder { letter-spacing: normal; font-size: 16px; }
.recrow { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 13px; padding-top: 2px; }
.recrow .pin { font-family: 'Fredoka', sans-serif; letter-spacing: .15em; background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 8px; }
.recrow .link { background: none; border: 0; color: var(--purple-ink); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 600; }
.rec-badge { background: var(--teal); color: var(--ink); font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.rec-sugg { font-weight: 600; }
.rec-moves .hint { margin: 0; }
.recrow a { color: var(--purple-ink); font-weight: 700; }
.rec-nav { display: flex; gap: 8px; margin-top: 10px; }
.rec-nav button { flex: 1; border: 2px solid var(--ink); background: #fff; border-radius: 12px; padding: 10px 0; font: inherit; font-weight: 700; cursor: pointer; }
.rec-nav button.wide { flex: 2.2; }
.rec-nav button:disabled { opacity: .4; cursor: not-allowed; }
.rec-moves button.mv { border: 0; background: none; font: inherit; font-weight: 600; text-align: left; cursor: pointer; padding: 1px 4px; border-radius: 6px; }
.rec-moves button.mv.cur { background: var(--yellow); color: var(--ink); }
.rec-actions a.btn { flex: 1; text-align: center; text-decoration: none; }
.bo .r .link { background: none; border: 0; color: var(--purple-ink); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.tbl .link { background: none; border: 0; color: var(--purple-ink); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 700; padding: 0; }
.rec-names .dot-c.b { margin: 0 0 0 7px; }
.me-grid { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.me-main { min-width: 0; }
.me-acts { display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; }
.me-acts .btn { white-space: nowrap; }

/* ---------- Plan and billing ---------- */
.pkgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 14px; }
.pkg { border: 2px solid var(--ink); border-radius: 18px; padding: 16px; background: #fff; display: flex; flex-direction: column; gap: 4px; box-shadow: 4px 4px 0 var(--purple); }
.pkg.credit { box-shadow: 4px 4px 0 var(--teal); }
.pkg h3 { margin: 4px 0 0; font-size: 18px; }
.pkg .price { font-family: 'Fredoka', sans-serif; font-size: 28px; }
.pkg .price s { font-size: 16px; color: var(--ink-muted); }
.pkg .price small { font-size: 14px; color: var(--ink-muted); font-family: 'Inter', sans-serif; }
.pkg .what { font-weight: 700; font-size: 13.5px; }
.pkg .hint { margin: 2px 0 6px; }
.pkg .btn { margin-top: auto; align-self: flex-start; }
.pkg .chip-gap { height: 22px; }
.sub-h { margin: 22px 0 8px; font-size: 16px; }
.order { border: 2px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; background: #fffdf7; }
.order-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.pay-box { border: 2px dashed var(--ink); border-radius: 14px; padding: 12px 14px; margin-top: 4px; background: #fff; }
.pay-text { white-space: pre-wrap; margin-top: 4px; font-size: 14px; }
.nav-badge { display: inline-block; margin-left: 6px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; font-weight: 800; text-align: center; }
.sub-h small { font-weight: 500; color: var(--ink-muted); font-size: 13px; margin-left: 6px; }
.pkg .what { font-size: 13.5px; }
footer.site a.pub-powered { margin: 0; text-decoration: none; color: var(--ink); }
footer.site a.pub-powered img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* ---------- Landing pricing ---------- */
.price-lead { max-width: 640px; margin: 10px auto 0; color: var(--ink-muted); }
.pricing { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.pricing .sub-h { text-align: left; }
.pkg.trial { box-shadow: 4px 4px 0 var(--teal); max-width: 420px; width: 100%; margin: 0 auto; }
.pricing .pkgs { grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; gap: 20px; }
@media (max-width: 820px) { .pricing .pkgs { grid-template-columns: minmax(0, 420px); } }
.price-cta { text-align: center; margin-top: 28px; }
.slug-msg { min-height: 18px; font-size: 13px; font-weight: 600; margin-top: 4px; color: var(--ink-muted); }
.slug-msg.ok { color: var(--ok); }
.slug-msg.bad { color: var(--bad); }
.try-box { border: 3px dashed #f26a1b; background: #ffdba0; border-radius: 16px; padding: 14px 16px; margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--ink); box-shadow: 4px 4px 0 rgba(242, 106, 27, .35); }
.try-box b { color: #b23f00; font-size: 16px; }
.section#pricing { padding-bottom: 24px; }
.price-cta { margin-top: 22px; }

/* ---------- Honeypot field, FAQ and server-rendered content ---------- */
.hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0; }
.faq { max-width: 760px; margin: 0 auto; }
.faq-item { background: #fff; border: 2px solid var(--ink); border-radius: 16px; margin-bottom: 12px; box-shadow: 3px 3px 0 var(--purple); }
.faq-item summary { cursor: pointer; font-weight: 700; padding: 14px 18px; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; float: right; font-weight: 800; color: var(--purple-ink); }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item p { margin: 0; padding: 0 18px 16px; color: var(--ink-muted); font-weight: 500; }
.foot-links { margin: 0 0 12px; }
.foot-links a { text-decoration: underline; }
.ssr-facts { list-style: none; margin: 0 0 10px; padding: 0; }
.ssr-facts li { padding: 3px 0; }
.ssr-list { list-style: none; margin: 0; padding: 0; }
.ssr-list li { background: #fff; border: 2px solid var(--border); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; }
.ssr-list li a { font-weight: 700; font-size: 17px; text-decoration: underline; }
.ssr-list li span { display: block; color: var(--ink-muted); font-size: 13.5px; margin-top: 2px; }
.ssr-list li p { margin: 4px 0 0; color: var(--ink-muted); }
main.pub-main section { margin-bottom: 16px; }
main.pub-main section h2 { font-size: 18px; margin: 14px 0 8px; }

/* ---------- Colored boxes (security and analytics) ---------- */
.stat[class*="tone-"] { border-color: var(--ink); box-shadow: 5px 5px 0 var(--shadow); }
.stat.tone-pink { background: #fff0f4; } .stat.tone-pink .n { color: #d6336c; }
.stat.tone-purple { background: #f4f0ff; } .stat.tone-purple .n { color: #6d3df2; }
.stat.tone-orange { background: #fff4e8; } .stat.tone-orange .n { color: #c95300; }
.stat.tone-yellow { background: #fffbe6; } .stat.tone-yellow .n { color: #d99a00; }
.stat.tone-teal { background: #edfbf8; } .stat.tone-teal .n { color: #07857a; }
.stat.tone-blue { background: #edf5ff; } .stat.tone-blue .n { color: #1c7ed6; }
.stat.tone-gray { background: #f5f2f8; } .stat.tone-gray .n { color: #6b6178; }
.stat small { font-size: 16px; color: var(--ink-muted); font-weight: 600; }
.stat[class*="tone-"] .l { color: var(--ink); }
.card.tone-pink h2 { color: #c2255c; } .card.tone-purple h2 { color: #5f3dc4; } .card.tone-teal h2 { color: #0b7a70; }
.times { color: #c2255c; font-size: 12.5px; }
.bar { height: 10px; background: #eee9f3; border-radius: 999px; overflow: hidden; border: 1.5px solid var(--ink); }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink)); }
.an-row { cursor: pointer; } .an-row.top1 td:first-child b { color: #d9a520; } .an-row.top2 td:first-child b { color: #8d99a6; } .an-row.top3 td:first-child b { color: #c2763a; }
.an-row td small { font-weight: 700; color: var(--ink-muted); }
.an-detail > td { background: #faf6ff; padding: 6px 12px 16px; }
.an-page { padding: 8px 4px; font-size: 14px; } .an-page a { text-decoration: underline; color: var(--purple-ink); font-weight: 700; }
.an-sub th, .an-sub td { font-size: 13px; padding: 9px 6px; }
.page-head .row select { width: auto; min-width: 190px; }

/* ---------- Clubs directory: letter buttons ---------- */
.az { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; }
.az a, .az span { min-width: 38px; height: 38px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--ink); border-radius: 999px; font-weight: 800; font-size: 14px; background: #fff; color: var(--ink); text-decoration: none; }
.az a:hover { background: var(--yellow); }
.az a.on { background: var(--ink); color: #fff; }
.az a:first-child { padding: 0 16px; }
.az span.off { border-color: var(--border); color: #c5bdd0; background: transparent; cursor: default; }

.club-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.club-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 16px; background: #fff; border: 2px solid var(--ink); border-radius: 20px; box-shadow: 5px 5px 0 var(--shadow); color: var(--ink); text-decoration: none; transition: transform .12s, box-shadow .12s; }
.club-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--purple); }
.club-card .club-logo { width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--ink); object-fit: cover; background: #fff; margin-bottom: 8px; font-size: 40px; }
.club-card h3 { margin: 0; font-size: 18px; line-height: 1.25; overflow-wrap: anywhere; }
.club-card .loc { color: var(--purple-ink); font-weight: 700; font-size: 13px; }
.club-card p { margin: 4px 0 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.club-card .club-logo.avatar { background: var(--purple); color: #fff; display: flex; align-items: center; justify-content: center; }
code.url { font-size: 12.5px; background: #fff; border: 1.5px solid var(--border); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; word-break: break-all; }

/* ---------- Tournament feedback: stars, form and reviews ---------- */
.starpick { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.star { border: 0; background: none; padding: 2px; width: 46px; height: 46px; cursor: pointer; transition: transform .1s; }
.star svg, .rostars svg { width: 100%; height: 100%; display: block; overflow: visible; }
.star polygon, .rostars polygon { fill: #fff; stroke: #1c1329; stroke-width: 1.6; stroke-linejoin: round; transition: fill .1s; }
.star:hover { transform: scale(1.12) rotate(-4deg); }
.star.on polygon, .rostars .fill polygon { fill: #ffc93c; }
.star:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 10px; }
.fb-items .star { width: 36px; height: 36px; }
.starword { margin-left: 8px; font-weight: 700; font-size: 13px; color: var(--ink-muted); }
.fb-q { margin: 14px 0; }
.fb-label { font-weight: 700; margin-bottom: 4px; }
.fb-label .req { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: #c72d63; border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }
.fb-sub { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--purple-ink); margin-top: 18px; }
.fb-msg { color: var(--bad); font-weight: 700; font-size: 14px; margin: 10px 0; }
.fb-form textarea { min-height: 110px; }
.fb-form .btn { margin-top: 14px; width: 100%; }
.fb-thanks { text-align: center; padding: 24px 8px; } .fb-thanks .big { line-height: 0; } .fb-thanks .rostars svg { width: 40px; height: 40px; } .fb-thanks h3 { margin: 8px 0 4px; }
.rostars { position: relative; display: inline-block; vertical-align: middle; line-height: 0; }
.rostars .base, .rostars .fill { display: inline-flex; gap: 2px; }
.rostars .fill { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; }
.rostars svg { width: 22px; height: 22px; flex: none; }
.rv-big .rostars svg { width: 26px; height: 26px; }
.rv-summary { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.rv-big { text-align: center; } .rv-big .n { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 52px; line-height: 1; } .rv-big .c { color: var(--ink-muted); font-size: 13px; font-weight: 600; margin-top: 4px; }
.rv-bars { flex: 1; min-width: 220px; }
.rv-row { display: grid; grid-template-columns: 130px 1fr 34px; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 600; margin: 5px 0; }
.rv-row .bar { height: 10px; } .rv-row b { text-align: right; }
.rv-card { border: 2px solid var(--border); border-radius: 16px; padding: 14px 16px; margin-bottom: 12px; background: #fff; }
.rv-card .who { font-weight: 800; } .rv-card .when { color: var(--ink-muted); font-size: 12.5px; font-weight: 600; margin-left: 8px; }
.rv-card p { margin: 8px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .rv-chips span { font-size: 12px; font-weight: 700; background: #f4f0ff; border-radius: 999px; padding: 3px 10px; }
.fb-qrbox { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .fb-qrbox canvas { width: 220px; height: 220px; border: 3px solid var(--ink); border-radius: 16px; background: #fff; }
.fb-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.rating-card { border-width: 3px; box-shadow: 5px 5px 0 var(--yellow); }
.rating-card h2 { margin-top: 0; }
.ev-rate { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; } .ev-rate b { font-family: 'Fredoka', sans-serif; font-size: 17px; } .ev-rate span { color: var(--ink-muted); font-weight: 600; font-size: 13px; }
.ev-rate .rostars svg { width: 18px; height: 18px; }
.sh-qr2 { gap: 16px; padding: 10px 14px; margin: 14px 0 8px; border-width: 1.5px; font-size: 13px; } .sh-qr2 .qr { width: 84px; height: 84px; padding: 6px; } .sh-qr2 h2 { font-size: 14px; margin-bottom: 4px; } .sh-qr2 .url { font-size: 11px; }
.forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.form-tile { border: 2px solid var(--border); border-radius: 16px; padding: 14px 16px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.form-tile h3 { margin: 0; font-size: 17px; } .form-tile p { margin: 0 0 6px; color: var(--ink-muted); font-size: 13.5px; line-height: 1.45; } .form-tile .btn { align-self: flex-start; margin-top: auto; }

/* ---------- Withdrawn players ---------- */
.tbl tr.out td { color: var(--ink-muted); } .tbl tr.out td b { color: var(--ink-muted); }
.wd-note { display: block; color: var(--ink-muted); font-size: 12px; margin-top: 2px; }
.wd-choice { margin: 12px 0; } .wd-choice .radio { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; cursor: pointer; } .wd-choice .radio input { width: auto; margin-top: 3px; }

/* Muted history tables (order history) */
.muted-tbl { font-size: 13.5px; color: var(--ink-muted); }
.muted-tbl th { font-size: 11px; }
.muted-tbl td, .muted-tbl th { padding: 9px 7px; }
.muted-tbl td:nth-child(2) { white-space: normal; min-width: 110px; }
.muted-tbl td b { color: var(--ink); }
.muted-tbl td:nth-child(2) { color: var(--ink); font-weight: 600; }
.muted-tbl td:not(:nth-child(2)), .muted-tbl .faint { white-space: nowrap; }
.faint { color: var(--ink-muted); font-style: italic; }
@media (max-width: 600px) { .muted-tbl td:nth-child(5), .muted-tbl th:nth-child(5) { display: none; } }
.chip-dl { border: 0; font-family: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.chip-dl:hover { background: #c4f1ec; }
.chip-dl:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.chip-dl:disabled { opacity: .6; cursor: progress; }
.stat-cell { white-space: nowrap; }
.dl-btn { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; margin-left: 4px; vertical-align: middle; }
.tbl .ctr { text-align: center; }
.muted-tbl tr.paid-row td { background: #e9f9f3; color: #3f6f5d; }
.muted-tbl tr.paid-row td b { color: #14543f; }
.muted-tbl tr.paid-row td:nth-child(2) { color: #14543f; }
.dl-btn { margin-left: 0; }

/* Payment accounts: admin editor and the club's How to pay box */
.acct-row { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 4px 12px; align-items: end; padding: 10px 0 12px; border-bottom: 2px dashed var(--border); margin-bottom: 8px; }
@media (max-width: 820px) { .acct-row { grid-template-columns: 1fr 1fr; } .acct-row .btn { justify-self: start; } }
.pay-accts { display: grid; gap: 10px; margin: 8px 0; }
.pay-acct { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 14px; background: #fff; border: 2px solid var(--border); border-radius: 12px; padding: 10px 12px; }
.pay-acct small { display: block; color: var(--ink-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pay-acct b { font-size: 15px; overflow-wrap: anywhere; }
.inv-no { font-family: "Fredoka", sans-serif; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.paytbl { font-size: 14px; }
.paytbl th, .paytbl td { padding: 10px 6px; }
.paytbl td .chip { font-size: 11px; padding: 3px 9px; }
.paytbl td:nth-child(1) { min-width: 62px; }
.paytbl td:nth-child(6) { min-width: 120px; }
.paytbl td:last-child .btn + .btn { margin-left: 2px; }
.paytbl .btn-sm { padding: 6px 12px; }
@media (max-width: 460px) { nav.top .nav-right { gap: 6px; } nav.top .nav-right .btn-sm { padding: 8px 12px; } }
/* The optional ratings sit in two columns when the card is wide enough, so the right half is not left empty */
.fb-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: 24px; }
.fb-items .fb-sub { grid-column: 1 / -1; }

/* Social media and website links on a club's public page */
.club-links { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.social-links { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.social { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 3px 3px 0 var(--purple); transition: transform .12s, background .12s, color .12s; }
.social:hover, .social:focus-visible { transform: translate(-1px, -1px); color: #fff; }
.social-facebook:hover, .social-facebook:focus-visible { background: #1877f2; }
.social-instagram:hover, .social-instagram:focus-visible { background: #e1306c; }
.social-youtube:hover, .social-youtube:focus-visible { background: #e00; }
.social-tiktok:hover, .social-tiktok:focus-visible { background: #111; }
.social-website:hover, .social-website:focus-visible { background: var(--purple); }
.social-other:hover, .social-other:focus-visible { background: var(--teal); }
@media (prefers-reduced-motion: reduce) { .social { transition: none; } }

/* Settings form: one compact box per link, with the network's icon inside instead of a label above */
.soc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; margin-top: 14px; } /* 16px between columns, like the form rows below */
.soc-field, .soc-other { position: relative; }
.soc-field.wide { grid-column: span 2; }
.soc-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--ink-muted); pointer-events: none; }
.soc-ico svg { width: 20px; height: 20px; }
.soc-field input, .soc-other input { padding-left: 42px; margin: 0; }
#sOthers { display: grid; gap: 10px; margin-top: 10px; }
/* Same three columns as the boxes above: the name sits under Facebook, the link under the Instagram and YouTube boxes. */
.soc-other { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 16px; }
.soc-other .soc-url { grid-column: span 2; }
.soc-other .soc-url input { padding-left: 14px; }
/* The remove button hangs off the top-right corner of the link box: outside the input, and it takes no width,
   so the boxes always span the whole row and never change size when a link is added or removed. */
.soc-x { position: absolute; right: -9px; top: -9px; z-index: 1; border: 2px solid var(--ink); background: #fff; border-radius: 50%; width: 24px; height: 24px; font-size: 16px; line-height: 1; cursor: pointer; color: var(--ink); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.soc-x:hover, .soc-x:focus-visible { background: #ffe3ea; }
@media (max-width: 700px) { .soc-grid { grid-template-columns: 1fr 1fr; } .soc-field.wide { grid-column: span 2; } .soc-other { grid-template-columns: 1fr 1fr; } .soc-other .soc-url { grid-column: auto; } }
@media (max-width: 480px) { .soc-grid { grid-template-columns: 1fr; } .soc-field.wide { grid-column: auto; } .soc-other { grid-template-columns: 1fr; } }
.pub-foot .social-links { justify-content: center; margin: 4px 0 14px; }
.pub-foot .pub-powered { margin-top: 22px; }
/* Logo on top, with a small, regular-weight, muted line of text under it */
.pub-foot a.pub-powered { flex-direction: column; gap: 6px; font-weight: 400; font-size: 12px; line-height: 1.3; }
.pub-foot a.pub-powered:hover { color: var(--ink); }
.pub-foot a.pub-powered img { width: 40px; height: 40px; }

/* Landing page footer: same look as the public pages' footer (logo above a small, regular, muted line), without the words "Powered by" */
footer.site a.pub-powered { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; margin: 22px 0 0; font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--ink-muted); text-decoration: none; }
footer.site a.pub-powered:hover { color: var(--ink); }
footer.site a.pub-powered img { width: 40px; height: 40px; }
footer.site a.pub-powered:hover span { text-decoration: underline; }

/* Create your club page: centred headline, perk pills, compact form, benefit row */
.signup-b { max-width: 580px; text-align: center; }
.signup-b h1 { font-size: 36px; line-height: 1.15; }
.signup-b .lead { margin-bottom: 16px; }
.perk-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0 0 22px; padding: 0; }
/* Light, bright fills with the bold ink outline and offset shadow, so the dark text stays easy to read */
.perk-pills { gap: 12px; margin-bottom: 26px; padding-right: 3px; }
.perk-pills .chip { font-size: 14px; font-weight: 800; padding: 7px 16px; text-transform: none; letter-spacing: 0; color: var(--ink); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.perk-pills .chip-green { background: #8ff3e6; }
.perk-pills .chip-purple { background: #ffee73; }
.perk-pills .chip-yellow { background: #ffa9c6; }
.signup-b .card { text-align: left; }
.pw-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.opt-email { margin-top: 14px; }
.opt-email summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--purple-ink); list-style: none; }
.opt-email summary::-webkit-details-marker { display: none; }
.opt-email summary::before { content: '+ '; font-weight: 800; }
.opt-email[open] summary::before { content: '- '; }
.have-club { text-align: center; margin: 16px 0 0; font-size: 14px; color: var(--ink-muted); font-weight: 600; }
.have-club a { color: var(--purple-ink); font-weight: 800; text-decoration: underline; }
.perk-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; list-style: none; margin: 26px 0 0; padding: 0; color: var(--ink-muted); font-size: 14px; font-weight: 700; }
.perk-icons li { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 480px) { .signup-b h1 { font-size: 30px; } .pw-row { grid-template-columns: 1fr; } }
.pw-row { margin-top: 14px; }

/* Text for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.rec-who { font-size: 13px; margin: 2px 0 6px; }
.rec-who .link { font-size: 13px; }
.rec-sides { display: grid; gap: 10px; margin: 12px 0; }
.rec-sides .btn { justify-content: flex-start; text-align: left; white-space: normal; }
/* Two players sharing one device: Black's pieces and name are turned to face the Black player */
.rec-board.face .pc.b { display: inline-block; transform: rotate(180deg); }
.rec-names.face span:last-child { transform: rotate(180deg); }
.rec-strip { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 8px 0; font-weight: 700; font-size: 14.5px; }
.rec-strip .who { overflow-wrap: anywhere; }
.rec-strip.black { transform: rotate(180deg); }

/* Looks like a button but is only a label: same outline and offset shadow as .btn, no hover movement, normal cursor */
.fee-row { margin-bottom: 14px; text-align: center; }
.fee-badge {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 11px 24px; border-radius: 999px; border: 2px solid var(--ink);
  background: #d9f7f3; color: var(--ink); box-shadow: 4px 4px 0 var(--teal); font-weight: 800; font-size: 16px; line-height: 1.2;
  cursor: default; user-select: none;
}
.fee-badge small { font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; opacity: .8; }
.social-email:hover, .social-email:focus-visible { background: var(--teal); }
/* Club page: the contact and social icons are centered under the Membership pill. On phones they are a little smaller so seven fit on one line, and more wrap into centered rows */
.club-links { justify-content: center; }
.club-links .social-links { justify-content: center; }
@media (max-width: 560px) {
  .club-links .social-links { gap: 8px; }
  .club-links .social { width: 40px; height: 40px; }
  .club-links .social svg { width: 20px; height: 20px; }
}

/* Kudos */
.kd-chips, .kd-skills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.kd-chip { font: inherit; font-size: 13.5px; font-weight: 700; padding: 8px 14px; min-height: 40px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; }
.kd-chip b { margin-left: 4px; }
.kd-chip.on { background: #d9f7f3; box-shadow: 2px 2px 0 var(--teal); }
.kd-chip:disabled { opacity: .45; cursor: not-allowed; }
.kd-chips .kd-chip { cursor: default; min-height: 0; padding: 5px 12px; }
.kd-me { background: #f4f0ff; border: 2px solid var(--ink); border-radius: 16px; padding: 12px 16px; margin: 0 0 10px; }
.kd-sub { margin: 18px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.kd-row { border-top: 1px solid rgba(28, 19, 41, .14); padding: 10px 0; }
.kd-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kd-name { font-weight: 800; flex: 1 1 140px; overflow-wrap: anywhere; }
.kd-given { font-size: 12.5px; color: var(--ink-soft, #5b5370); flex: 2 1 160px; }
.kd-top3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.kd-lead { border: 2px solid var(--ink); border-radius: 14px; padding: 10px 14px; background: #fff; }
.kd-lead b { display: block; margin-bottom: 4px; }
.kd-n { display: inline-block; min-width: 22px; text-align: center; font-weight: 800; font-size: 12.5px; background: #d9f7f3; border: 1.5px solid var(--ink); border-radius: 999px; padding: 0 7px; }
.kd-pl { padding: 10px 0; border-top: 1px solid rgba(28, 19, 41, .14); }
.kd-pl:first-of-type { border-top: 0; }
#kdPin { font-size: 26px; letter-spacing: .4em; text-align: center; max-width: 240px; }
#kdPin::placeholder { letter-spacing: normal; font-size: 16px; }
#kdCard h3 { margin: 18px 0 6px; }
#kdCard h3:first-child { margin-top: 0; }
#kdCard .kd-me + h3 { margin-top: 16px; }
.kd-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
/* Standings: a small button under a player's name that shows the kudos they received */
.kd-toggle { font: inherit; font-size: 12px; font-weight: 800; margin-left: 8px; padding: 3px 11px; border-radius: 999px; border: 2px solid var(--ink); background: #d9f7f3; color: var(--ink); cursor: pointer; vertical-align: middle; }
/* Roster: a player who has paid the entry fee */
.paid-chip { font: inherit; font-size: 12.5px; font-weight: 800; padding: 6px 13px; border-radius: 999px; border: 2px solid var(--ink); background: #dff8f5; color: #0a6f65; cursor: pointer; white-space: nowrap; }
.paid-chip:hover { transform: translate(-1px, -1px); }

/* TV VIEW (public player page): big text, no chrome, made for a TV or projector */
body.tv .pub-head, body.tv .pub-foot { display: none; }
body.tv { --vh: 1vh; --tv-bg: #17132b; --tv-panel: #241d44; --tv-text: #fff; --tv-accent: #b9a6ff; --tv-line: rgba(255,255,255,.12); --tv-gold: #ffd54a; --tv-silver: #dfe4ee; --tv-bronze: #f0a36b; --tv-dot-b: #17132b; --tv-dot-edge: #fff; background: var(--tv-bg); color: var(--tv-text); overflow: hidden; }
body.tv.tv-light { --tv-bg: #fff8ec; --tv-panel: #fff; --tv-text: #1c1329; --tv-accent: #5f41ec; --tv-line: #f0e4cf; --tv-gold: #b27700; --tv-silver: #5a6577; --tv-bronze: #a5530f; --tv-dot-b: #1c1329; --tv-dot-edge: #1c1329; }
body.tv .pub-main { max-width: none; padding: 0; margin: 0; }
.tv-screen { height: 100vh; display: flex; flex-direction: column; padding: calc(2.2 * var(--vh)) 2.4vw 0; gap: calc(2 * var(--vh)); box-sizing: border-box; }
.tv-head { display: flex; align-items: center; gap: 1.6vw; flex: none; }
.tv-logo img, .tv-logo .avatar { width: calc(8 * var(--vh)); height: calc(8 * var(--vh)); border-radius: 50%; object-fit: cover; background: #fff; border: calc(.4 * var(--vh)) solid #fff; font-size: calc(5 * var(--vh)); display: flex; align-items: center; justify-content: center; color: var(--purple-ink); }
.tv-title { flex: 1; min-width: 0; font-size: calc(2.4 * var(--vh)); opacity: .9; }
.tv-title h1 { font-size: calc(5.2 * var(--vh)); line-height: 1.1; color: var(--tv-text); overflow-wrap: anywhere; }
.tv-meta { text-align: right; font-size: calc(2.2 * var(--vh)); opacity: .9; display: flex; flex-direction: column; gap: calc(.4 * var(--vh)); align-items: flex-end; }
.tv-exit { background: transparent; color: var(--tv-text); border: calc(.25 * var(--vh)) solid currentColor; border-radius: 999px; padding: calc(.5 * var(--vh)) calc(1.4 * var(--vh)); font: inherit; font-size: calc(1.8 * var(--vh)); cursor: pointer; opacity: .35; }
.tv-exit:hover, .tv-exit:focus-visible { opacity: 1; }
.tv-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 2fr 1fr; gap: 2vw; }
.tv-panel { background: var(--tv-panel); border-radius: calc(2 * var(--vh)); padding: calc(2 * var(--vh)) 1.6vw; display: flex; flex-direction: column; min-height: 0; }
.tv-panel h2 { color: var(--tv-text); font-size: calc(3.4 * var(--vh)); margin: 0 0 calc(1.4 * var(--vh)); display: flex; justify-content: space-between; align-items: baseline; gap: 1vw; }
.tv-panel h2 small { font-size: calc(2 * var(--vh)); opacity: .65; font-family: 'Inter', sans-serif; font-weight: 500; }
.tv-scroll { flex: 1; min-height: 0; overflow: hidden; font-size: var(--fs, calc(3.4 * var(--vh))); }
.tv-bo { display: grid; grid-template-columns: 1.7em 1fr 2.4em 1fr; gap: 0 .5em; align-items: center; padding: .28em .15em; border-bottom: .06em solid var(--tv-line); font-size: 1em; font-weight: 600; line-height: 1.15; }
.tv-bo .n { color: var(--tv-accent); font-family: 'Fredoka', sans-serif; font-weight: 700; }
.tv-bo .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tv-bo .p.right { text-align: right; }
.tv-bo .r { text-align: center; font-size: .82em; opacity: .85; }
.tv-bo .dot-c { width: .7em; height: .7em; margin: 0 .35em 0 0; }
.tv-bo .p.right .dot-c { margin: 0 0 0 .35em; }
.tv-bo.bye .p { grid-column: 2 / 5; opacity: .75; }
.tv-st { display: grid; grid-template-columns: 1.7em 1fr 2.6em; gap: 0 .5em; align-items: center; padding: .28em .15em; border-bottom: .06em solid var(--tv-line); font-size: 1em; font-weight: 600; line-height: 1.15; break-inside: avoid; }
.tv-st .p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tv-st .n { font-family: 'Fredoka', sans-serif; font-weight: 700; color: var(--tv-accent); }
.tv-st .r { text-align: right; font-weight: 800; }
.tv-st.p1 .n, .tv-st.p1 .p { color: var(--tv-gold); }
.tv-st.p2 .n, .tv-st.p2 .p { color: var(--tv-silver); }
.tv-st.p3 .n, .tv-st.p3 .p { color: var(--tv-bronze); }
.tv-st.out { opacity: .5; }
.tv-st small { font-size: .6em; opacity: .7; }
.tv-empty, .tv-wait { text-align: center; font-size: calc(3 * var(--vh)); opacity: .8; padding: calc(6 * var(--vh)) 2vw; }
.tv-wait { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tv-wait h2 { color: var(--tv-text); font-size: calc(6 * var(--vh)); margin-bottom: calc(2 * var(--vh)); }
.tv-wait p { font-size: calc(3.4 * var(--vh)); margin: calc(1 * var(--vh)) 0; }
.tv-bar { flex: none; height: calc(.8 * var(--vh)); background: var(--tv-line); margin: 0 -2.4vw; }
.tv-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pink), var(--purple)); transition: width 1s linear; }

.tv-side { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tv-side .tv-panel { flex: 1; min-height: 0; }
.tv-foot { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--vh)); font-size: calc(1.7 * var(--vh)); opacity: .7; padding: calc(1.2 * var(--vh)) 0 calc(.4 * var(--vh)); }
.tv-foot img { width: calc(3 * var(--vh)); height: calc(3 * var(--vh)); border-radius: 50%; object-fit: cover; }
body.tv .dot-c { border-color: var(--tv-dot-edge); }
body.tv .dot-c.w { background: #fff; border-color: var(--tv-dot-b); }
body.tv .dot-c.b { background: var(--tv-dot-b); border-color: var(--tv-dot-edge); }
.tv-btns { display: flex; gap: calc(1 * var(--vh)); }
#tvTheme { display: inline-flex; align-items: center; gap: calc(.6 * var(--vh)); }
#tvTheme svg { width: calc(2.1 * var(--vh)); height: calc(2.1 * var(--vh)); }
.tv-clock { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: calc(5 * var(--vh)); line-height: 1; opacity: 1; }
#tvTheme { padding: calc(.5 * var(--vh)) calc(1.1 * var(--vh)); }
#tvTheme svg { width: calc(2.4 * var(--vh)); height: calc(2.4 * var(--vh)); }
.tv-left { display: flex; align-items: center; gap: 1.6vw; min-width: 0; }
.tv-row { display: flex; align-items: baseline; gap: 1.2vw; justify-content: flex-end; }
.tv-head .tv-clock { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: calc(3.6 * var(--vh)); font-variant-numeric: tabular-nums; }
.tv-count { display: inline-flex; align-items: center; gap: calc(.6 * var(--vh)); justify-content: flex-end; }
.tv-count svg { width: calc(2.2 * var(--vh)); height: calc(2.2 * var(--vh)); }
#tvRefresh { display: inline-flex; align-items: center; gap: calc(.6 * var(--vh)); }
#tvRefresh svg { width: calc(2.2 * var(--vh)); height: calc(2.2 * var(--vh)); }
.tv-count { font-variant-numeric: tabular-nums; }
#tvExit { display: inline-flex; align-items: center; padding: calc(.5 * var(--vh)) calc(1.1 * var(--vh)); }
#tvExit svg { width: calc(2.4 * var(--vh)); height: calc(2.4 * var(--vh)); }

.pub-head .upd-btns { display: inline-flex; gap: 8px; margin-left: auto; }
.pub-head .upd button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; }
.tv-left { flex: 1; }
.tv-head .tv-meta { margin-left: auto; flex: none; }
/* Fixed widths and tabular digits so the ticking clock and countdown never nudge the text beside them */
.tv-head .tv-clock { display: inline-block; min-width: 6.6em; text-align: right; font-family: 'Inter', sans-serif; font-weight: 800; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: calc(3.4 * var(--vh)); }
.tv-count { display: inline-block; min-width: 3.6ch; text-align: right; font-family: 'Inter', sans-serif; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tv-last { align-self: center; white-space: nowrap; font-size: calc(2 * var(--vh)); opacity: .8; margin-right: calc(.6 * var(--vh)); }

/* Paging: rows outside the current page are hidden; a new page flips in row by row, like an airport departures board */
.tv-bo[hidden], .tv-st[hidden] { display: none; }
.tv-pager { flex: none; text-align: right; font-size: calc(1.9 * var(--vh)); opacity: .7; padding-top: calc(.8 * var(--vh)); font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; min-height: calc(2.6 * var(--vh)); }
@keyframes tvFlip { from { transform: perspective(700px) rotateX(-90deg); opacity: 0; } 60% { opacity: 1; } to { transform: perspective(700px) rotateX(0); opacity: 1; } }
.tv-flip { transform-origin: 50% 0; animation: tvFlip .45s ease-out both; }
@media (prefers-reduced-motion: reduce) { .tv-flip { animation: none; } }
.tbl td small a { color: var(--purple-ink); text-decoration: underline; font-weight: 700; }
.pub-head .upd a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.pub-head .upd a:hover, .pub-head .upd a:focus-visible { opacity: .85; }

/* TV VIEW, recorded games: a big board on the left, the move list on the right, nothing else */
.tv-games { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2vw; }
.tv-gleft { display: flex; flex-direction: column; align-items: center; min-height: 0; min-width: 0; gap: calc(1 * var(--vh)); }
.tv-gname { flex: none; display: flex; align-items: center; gap: calc(1.2 * var(--vh)); font-size: calc(3.6 * var(--vh)); font-weight: 700; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-gname .dot-c { width: calc(2.6 * var(--vh)); height: calc(2.6 * var(--vh)); margin: 0; flex: none; }
.tv-gwrap { flex: 1; min-height: 0; width: 100%; display: flex; justify-content: center; }
.tv-gboard { height: 100%; max-width: 100%; border: calc(.5 * var(--vh)) solid var(--tv-line); border-radius: calc(1.2 * var(--vh)); }
.tv-gboard .sq { cursor: default; }
.tv-gboard .cf, .tv-gboard .cr { font-size: calc(1.6 * var(--vh)); }
.tv-gside { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tv-gside .tv-panel { flex: 1; min-height: 0; }
.tv-gmoves { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--tv-accent) transparent; overscroll-behavior: contain; display: grid; grid-template-columns: 4.2em 1fr 1fr; align-content: start; gap: .35em .4em; font-size: calc(2.7 * var(--vh)); font-weight: 600; font-feature-settings: 'tnum' 1; position: relative; }
.tv-gmoves .mn, .tv-gmoves .mv { font: inherit; background: transparent; border: 0; color: inherit; cursor: pointer; text-align: left; }
.tv-gmoves .mn { color: var(--tv-accent); font-family: 'Fredoka', sans-serif; font-weight: 700; text-align: right; padding: 0 .4em 0 0; }
.tv-gmoves .mv { padding: .05em .45em; border-radius: .4em; }
.tv-gmoves .mv:hover, .tv-gmoves .mn:hover { text-decoration: underline; }
.tv-gmoves .mv.soon:hover { opacity: .7; }
.tv-gmoves .mv.cur { background: var(--tv-accent); color: var(--tv-panel); }
.tv-gmoves .mv.soon { opacity: .6; }
.tv-gboard .pc.w, .tv-gboard .pc.b { font-size: 10cqw; }

/* The result at the end of a replayed game: a big score above the moves, in the right column */
.tv-gresult { flex: none; text-align: center; padding: calc(1 * var(--vh)) 0 calc(1.4 * var(--vh)); margin-bottom: calc(1.2 * var(--vh)); border-bottom: calc(.2 * var(--vh)) solid var(--tv-line); }
.tv-gresult .big { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: calc(9 * var(--vh)); line-height: 1; color: var(--tv-gold); }
.tv-gname .nm { overflow: hidden; text-overflow: ellipsis; }
.tv-gname { width: var(--gw, 100%); max-width: 100%; justify-content: flex-start; text-align: left; }
/* Use the whole height of the screen: no inherited margin under the panels, and tighter gaps between header, panels and progress bar */
.tv-panel, body.tv main.pub-main section { margin: 0; }
.tv-screen { gap: calc(1.4 * var(--vh)); padding-top: calc(1.8 * var(--vh)); }
.tv-bar { margin-top: calc(-.2 * var(--vh)); }

/* TV VIEW on a portrait screen (a TV or monitor turned on its side): sizes follow the screen width instead of its height, and the panels stack */
@media (orientation: portrait) {
  body.tv { --vh: .833vw; }
  .tv-screen { padding-left: 3vw; padding-right: 3vw; }
  .tv-head { flex-wrap: wrap; row-gap: calc(1.2 * var(--vh)); }
  .tv-left { flex: 1 1 60%; }
  /* The pairings take only the height they need (up to 58% of the screen) and the standings get the rest, so neither leaves a large empty space */
  .tv-cols { grid-template-columns: minmax(0, 1fr); grid-template-rows: fit-content(58%) minmax(0, 1fr); gap: calc(2 * var(--vh)); }
  .tv-cols > .tv-panel .tv-scroll { flex: 1 1 auto; }
  .tv-games { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: calc(2 * var(--vh)); }
  .tv-gleft { flex: none; }
  .tv-gwrap { flex: none; height: auto; }
  .tv-gboard { width: min(100%, 56vh); height: auto; aspect-ratio: 1; } /* leaves room under the board for the result and the moves */
  .tv-gmoves { grid-template-columns: repeat(2, 3.6em 1fr 1fr); column-gap: 1.2em; }
  .tv-gresult .big { font-size: calc(7 * var(--vh)); }
}
.tv-gname .rt { flex: none; font-size: .72em; font-weight: 600; opacity: .7; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

/* The pause button sits between "Round" and "Board" in the replay panel header, for a commentator who wants to talk about a position */
.tv-gside .tv-panel h2 { align-items: center; }
.tv-pause { display: inline-flex; align-items: center; justify-content: center; width: calc(5.4 * var(--vh)); height: calc(5.4 * var(--vh)); padding: 0; border-radius: 50%; border: calc(.3 * var(--vh)) solid currentColor; background: transparent; color: var(--tv-text); cursor: pointer; opacity: .75; }
.tv-pause:hover, .tv-pause:focus-visible { opacity: 1; }
.tv-pause svg { width: 52%; height: 52%; fill: currentColor; stroke: currentColor; }
.tv-pause[aria-pressed="true"] { background: var(--tv-accent); color: var(--tv-panel); border-color: var(--tv-accent); opacity: 1; }
.tv-ctl { display: inline-flex; align-items: center; gap: calc(1.4 * var(--vh)); }
.tv-pause.tv-next svg { fill: currentColor; stroke: currentColor; }

/* A clear focus ring on every TV button, for keyboard use from across the room */
body.tv button:focus-visible { outline: calc(.5 * var(--vh)) solid var(--tv-gold); outline-offset: calc(.4 * var(--vh)); opacity: 1; }

/* The Games button after a player's name, and the bar that shows whose games are on and the way back to everyone */
.tv-pgames { flex: none; font: inherit; font-size: .6em; font-weight: 700; padding: .15em .8em; border-radius: 999px; border: calc(.3 * var(--vh)) solid currentColor; background: transparent; color: var(--tv-text); cursor: pointer; opacity: .75; margin-left: .3em; }
.tv-pgames:hover, .tv-pgames:focus-visible { opacity: 1; }
.tv-pgames.on, .tv-pgames[aria-pressed="true"] { background: var(--tv-accent); color: var(--tv-panel); border-color: var(--tv-accent); opacity: 1; }
.tv-follow { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 1em; font-size: calc(2.4 * var(--vh)); padding: calc(1 * var(--vh)) 0 calc(1.2 * var(--vh)); border-bottom: calc(.2 * var(--vh)) solid var(--tv-line); margin-bottom: calc(1 * var(--vh)); }
.tv-follow .tx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-follow .tx b { color: var(--tv-accent); }
.tv-follow .tv-pgames { font-size: 1em; margin-left: 0; }
/* Quieter Games buttons, kept at the right edge of the board so they stay out of the way */
.tv-gname .tv-pgames { margin-left: auto; opacity: .5; font-size: .5em; padding: .1em .7em; }
.tv-gname .tv-pgames:hover, .tv-gname .tv-pgames:focus-visible { opacity: 1; }
.tv-gname .tv-pgames.on { opacity: 1; }
.tv-follow .tx { display: flex; flex-direction: column; line-height: 1.2; }
.tv-follow .tx .ln { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-follow .tx small { font-size: .72em; opacity: .7; }
.tv-gside .tv-panel > .tv-follow { padding-top: 0; margin-bottom: calc(1.4 * var(--vh)); }
.tv-follow .tx b { font-size: 1.15em; }
/* "Powered by" sits at the right edge, under the right-hand column, on both TV views */
.tv-foot { justify-content: flex-end; text-align: right; }
/* The Board PIN button under each pairing is a small, quiet button; the PIN itself is large in its own window */
.recrow .btn { padding: 3px 12px; font-size: 12.5px; line-height: 1.3; border-width: 1.5px; box-shadow: none; border-radius: 999px; }

/* Game replay on the player page. On a tall screen everything stacks in one column, as it always did. On a wide screen the board is on the
   left and the right pane holds the controls (step buttons, Flip Board, Download PGN) with the move list under them. */
.rec-moves-title { display: none; }
@media (orientation: landscape) and (min-width: 640px) {
  /* The window never scrolls: its height is its content, the board is sized (see fitReview in recorder.js) to the height the screen leaves,
     and only the move list scrolls. */
  .rec-panel.rec-rv-panel { max-width: min(1100px, 100%); }
  .rec-rv { display: flex; gap: 24px; align-items: stretch; }
  .rec-rv-main { flex: 0 0 min(56%, calc(100vh - 220px)); min-width: 0; align-self: flex-start; }
  .rec-rv-side { flex: 1; min-width: 260px; min-height: 0; display: flex; flex-direction: column; }
  /* The move list comes first and takes the free height, the controls sit under it. */
  .rec-rv-side .rec-moves-title { order: 1; }
  .rec-rv-side .rec-moves { order: 2; }
  .rec-rv-side .hint { order: 3; }
  .rec-rv-side .rec-nav { order: 4; margin-top: 14px; }
  .rec-rv-side .rec-actions { order: 5; }
  .rec-rv-side .rec-nav button { padding: 12px 0; font-size: 15px; }
  .rec-rv-side .rec-actions { margin-top: 8px; gap: 8px; }
  .rec-rv-side .rec-actions .btn { padding: 7px 14px; font-size: 13.5px; line-height: 1.25; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .rec-rv-side .rec-actions .btn-secondary { box-shadow: 3px 3px 0 var(--purple); }
  /* The close button sits in the window's top right corner, on the same line as the Moves heading */
  .rec-panel.rec-rv-panel { position: relative; }
  .rec-rv-main .rec-top .rec-x { position: absolute; top: 16px; right: 16px; }
  .rec-rv-side .rec-moves-title { display: flex; align-items: center; min-height: 38px; margin: 0 0 8px; padding-right: 48px; font-size: 18px; }
  .rec-rv-side .rec-moves { margin-top: 0; flex: 1 1 0; min-height: 120px; max-height: none; overflow-y: auto; padding: 10px 12px; font-size: 16px; gap: 2px 6px; grid-template-columns: 40px 1fr 1fr; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--border); border-radius: 14px; }
  .rec-rv-side .rec-moves .mn { text-align: right; padding: 4px 6px 4px 0; font-weight: 700; }
  .rec-rv-side .rec-moves button.mv { padding: 4px 10px; border-radius: 8px; }
  .rec-rv-side .rec-moves button.mv:hover { background: #f1ecff; }
  .rec-rv-side .rec-moves button.mv.cur { background: var(--purple); color: #fff; }
  .rec-rv-side .hint { margin: 10px 0 0; flex: none; }
}

/* Player strips beside the board: only on a wide screen (a tall screen uses the names row above the board) */
.rv-strip { display: none; }
@media (orientation: landscape) and (min-width: 640px) {
  .rec-rv-main .rec-names { display: none; }
  .rv-strip { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-weight: 700; font-size: 18px; min-width: 0; }
  .rv-strip .dot-c { flex: none; margin: 0; }
  .rv-strip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rv-strip .rt { flex: none; font-size: .78em; font-weight: 600; opacity: .7; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }
}
/* The replay's Flip Board and Download PGN buttons are compact on every screen, tall or wide */
.rec-rv-panel .rec-actions { gap: 8px; margin-top: 8px; }
.rec-rv-panel .rec-actions .btn { padding: 7px 14px; font-size: 13.5px; line-height: 1.25; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
.rec-rv-panel .rec-actions .btn-secondary { box-shadow: 3px 3px 0 var(--purple); }
/* Every move in the replay list is a button, so each one is at least 26 px tall (touch target size, WCAG 2.2) */
.rec-moves button.mv { min-height: 26px; min-width: 26px; }

/* Accessibility: the quiet TV controls and the dimmed upcoming moves still meet WCAG contrast (4.5:1), the gold in the light theme is
   darker, and every TV button is at least 24 px in both directions however small the screen is */
body.tv .tv-exit { opacity: .8; }
body.tv .tv-gname .tv-pgames { opacity: .8; }
body.tv.tv-light { --tv-gold: #8a5a00; }
body.tv .tv-gmoves .mv.soon { opacity: .62; }
body.tv.tv-light .tv-gmoves .mv.soon { opacity: .7; }
body.tv button { min-width: 24px; min-height: 24px; }
body.tv .tv-count { opacity: 1; }
body.tv .tv-gname .tv-pgames.on, body.tv .tv-gname .tv-pgames:hover, body.tv .tv-gname .tv-pgames:focus-visible, body.tv .tv-exit:hover, body.tv .tv-exit:focus-visible { opacity: 1; }

/* Give Kudos: the player's name takes three quarters of the row and the PIN one quarter */
.kd-id { display: grid; grid-template-columns: 3fr 1fr; gap: 12px; align-items: end; }
.kd-id > div { min-width: 0; }
.kd-id input#kdPin { text-align: center; letter-spacing: .2em; font-weight: 700; padding-left: 6px; padding-right: 6px; }
.kd-id { align-items: start; }
.kd-id label { margin-top: 0; }
.kd-id select, .kd-id input#kdPin { height: 48px; box-sizing: border-box; margin-top: 6px; }

/* Landing page "What You Get": summaries by default, full descriptions on request */
.feature-toggle { text-align: center; margin: -20px 0 26px; }
.features .feature .sum { display: none; }
.features.compact .feature .sum { display: block; }
.features.compact .feature .full { display: none; }
.features.compact { gap: 16px; }
.features.compact .feature { padding: 18px 20px; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; align-items: center; }
.features.compact .feature .swatch { grid-row: 1 / span 2; margin-bottom: 0; width: 46px; height: 46px; font-size: 22px; }
.features.compact .feature h3 { font-size: 18px; margin: 0 0 2px; }
.features.compact .feature .sum { font-size: 14px; line-height: 1.4; }

.features.compact .feature h4 { font-size: 18px; margin: 0 0 2px; }
.feature-group { margin-top: 30px; }
.feature-group:first-of-type { margin-top: 0; }
.group-title { text-align: center; margin: 0 0 4px; font-size: 18px; }
.group-title .chip { font-size: 15px; padding: 6px 18px; }
.group-sub { text-align: center; color: var(--ink-muted); font-weight: 500; margin: 0 0 16px; font-size: 14.5px; }
/* Create club on a phone: the two password fields stack, so the second label gets the same space above it as every other label */
@media (max-width: 480px) { .pw-row > div + div > label:first-child { margin-top: 14px; } }

/* Create club: the link name check ("available", "taken") sits on the Link Name label's line instead of reserving an empty row below the
   field, so the spacing between fields is the same all the way down the form */
.lab-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 14px; }
.lab-row label { margin-top: 0; }
.lab-row .slug-msg { min-height: 0; margin: 0; text-align: right; font-size: 13px; }
.slug-msg.ok { color: #0b6b45; }

/* Support tickets */
.ticket-msg { padding: 12px 16px; border-radius: 12px; margin: 0 0 10px; background: #f4f0fb; }
.ticket-msg.admin { background: #fff0d6; }
.ticket-who { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 4px; }
.ticket-body { white-space: pre-wrap; overflow-wrap: anywhere; }

.support-bar { position: sticky; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 8px 16px; text-align: center; font-size: 14px; }
.support-bar b { color: var(--yellow); margin-right: 8px; }

/* Ticket lists: the row under the pointer (or keyboard focus) is highlighted, and the whole row opens the ticket */
.ticket-tbl tr[data-go] { cursor: pointer; }
.ticket-tbl tr[data-go]:hover td, .ticket-tbl tr[data-go]:focus-within td { background: #f4f0fb; }

.note-link { font-weight: 700; color: var(--purple-ink); text-decoration: underline; }
.section.about-allez { padding-bottom: 36px; }
.about-allez .section-head { margin-bottom: 0; }
.about-allez .section-head h2 { font-size: 34px; }
.allez-say { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px !important; font-size: 15px !important; }
.allez-word { color: var(--purple-ink); background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 90%, transparent 90%); padding: 0 4px; }
.hero h1 .x-out { position: relative; display: inline-block; }
.hero h1 .x-out::after { content: ""; position: absolute; inset: 4px -4px; pointer-events: none; background:
  linear-gradient(to top right, transparent calc(50% - 2.5px), var(--ink) calc(50% - 2.5px), var(--ink) calc(50% + 2.5px), transparent calc(50% + 2.5px)),
  linear-gradient(to bottom right, transparent calc(50% - 2.5px), var(--ink) calc(50% - 2.5px), var(--ink) calc(50% + 2.5px), transparent calc(50% + 2.5px)); }
.hero h1 .hl { background: linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 92%, transparent 92%); padding: 0 4px; margin: 0 -4px; }
.hero h1 .allez-word { color: var(--ink); background: linear-gradient(transparent 58%, var(--teal) 58%, var(--teal) 92%, transparent 92%); padding: 0 4px; margin: 0 -4px; }
.hero .pop { color: #0a7f74; font-weight: 800; font-size: 1.12em; }
.faq-item p a { color: var(--ink); font-weight: 800; text-decoration: none; background: linear-gradient(transparent 55%, var(--yellow) 55%, var(--yellow) 92%, transparent 92%); padding: 0 3px; margin: 0 -3px; }
.faq-item p a:hover { background: var(--yellow); }
.faq-item p a:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.logo .brand-word { font-size: 28px; line-height: 1.2; color: var(--purple-ink); background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 90%, transparent 90%); padding: 0 4px; }
.logo .logo-icons { display: inline-flex; gap: 4px; margin-right: -4px; align-items: center; color: var(--purple-ink); overflow: visible; flex: none; }
.pawn { display: block; object-fit: contain; filter: drop-shadow(3px 3px 0 var(--purple)); }
.logo .logo-icons .pawn { width: 36px; height: 36px; }
@media (max-width: 640px) {
  nav.top:has(.logo-icons) { justify-content: center; row-gap: 10px; }
  nav.top .logo:has(.logo-icons) { width: 100%; justify-content: center; gap: 6px; }
  nav.top .logo .brand-word { font-size: 36px; }
  nav.top .logo .logo-icons .pawn { width: 48px; height: 48px; }
  nav.top:has(.logo-icons) .nav-right { width: 100%; justify-content: center; }
}
.pp-by { font-size: 12px; font-weight: 400; color: var(--ink-muted); }
.pp-mark { display: inline-flex; align-items: center; gap: 4px; }
.pub-powered .pp-mark .pawn { width: 30px; height: 30px; border-radius: 0; filter: drop-shadow(2px 2px 0 var(--purple)); }
.pub-powered .brand-word { font-family: 'Fredoka', sans-serif; font-size: 20px; font-weight: 700; line-height: 1.2; color: var(--purple-ink); background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 90%, transparent 90%); padding: 0 4px; }
.pub-foot a.pub-powered, .pub-foot a.pub-powered:hover { color: var(--ink-muted); text-decoration: none; }
.pub-foot a.pub-powered:hover .brand-word { background: var(--yellow); }
.tv-foot { gap: calc(1.6 * var(--vh)); opacity: .9; }
.tv-foot a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: calc(.6 * var(--vh)); }
.tv-foot .pawn { width: calc(3.8 * var(--vh)); height: calc(3.8 * var(--vh)); border-radius: 0; filter: drop-shadow(calc(.3 * var(--vh)) calc(.3 * var(--vh)) 0 var(--purple)); }
.tv-foot .brand-word { font-family: 'Fredoka', sans-serif; font-size: calc(2.6 * var(--vh)); font-weight: 700; line-height: 1.25; color: var(--tv-accent); background: linear-gradient(transparent 62%, var(--yellow) 62%, var(--yellow) 92%, transparent 92%); padding: 0 calc(.5 * var(--vh)); text-decoration: none; }
/* Dark TV: the deeper brand purple (the one used on the light pages) with a thin white outline */
body.tv:not(.tv-light) .tv-foot .brand-word { color: var(--purple-ink); -webkit-text-stroke: calc(.45 * var(--vh)) #fff; paint-order: stroke fill; }
.tv-foot { flex-wrap: wrap; row-gap: calc(.5 * var(--vh)); }
.tv-foot a, .tv-foot .brand-word { white-space: nowrap; }
.tv-foot .tv-brand { flex: 1 0 100%; justify-content: flex-end; }
.tv-foot .pawn { width: calc(4.4 * var(--vh)); height: calc(4.4 * var(--vh)); }
/* Club portal header: a long club name wraps and scales down instead of being cut off, and the icon keeps its size */
#navLogo { flex: 0 1 auto; max-width: 100%; align-items: center; }
#navLogo > .avatar, #navLogo > img { flex: none; overflow: visible; }
#navLogo #navName { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.15; font-size: clamp(15px, 4.8vw, 20px); }