/* =================================================================
   LULU ISLAND CHESS — SHARED STYLES
   Used by every page (index.html + the pages linked from the nav).
   Edit colors/fonts/spacing here once and every page updates.
   ================================================================= */

/* ============================= TOKENS ============================= */
:root{
  --field:#B7E686;        /* lime land — from the logo */
  --field-deep:#7FBF4D;   /* deeper leaf — hovers/pressed */
  --field-glow:#CFF0A8;   /* soft field tint */
  --ink:#1E3A16;          /* deep forest — main text (river outlines) */
  --ink-soft:#4B6B3C;     /* muted forest — secondary text */
  --river:#58CEF4;        /* sky-blue water — from the logo */
  --river-deep:#2FA9DE;   /* deeper water — links/hover */
  --paper:#F3FBEC;        /* pale mint paper — page background */
  --white:#FFFFFF;
  --card:#FFFFFF;
  --line:#DCE9CC;         /* hairline on paper */
  --shadow:0 18px 40px -22px rgba(30,58,22,.45);
  --shadow-lg:0 30px 70px -30px rgba(30,58,22,.55);
  --radius:22px;
  --radius-sm:14px;
  --maxw:1180px;
  --display:"Bricolage Grotesque",system-ui,sans-serif;
  --body:"Figtree",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--display);line-height:1.04;margin:0;font-weight:800;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--mono);font-weight:600;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--field-deep)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============================= BUTTONS ============================= */
.btn{display:inline-flex;align-items:center;gap:.55em;font-family:var(--body);font-weight:700;
  font-size:1rem;padding:.85em 1.45em;border-radius:100px;border:2px solid transparent;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s;
  line-height:1;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--ink);color:var(--field)}
.btn-primary:hover{background:#16300f;box-shadow:0 14px 26px -14px rgba(30,58,22,.7)}
.btn-river{background:var(--river);color:var(--ink)}
.btn-river:hover{background:var(--river-deep);color:var(--white)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--field)}
.btn-sm{padding:.6em 1.1em;font-size:.9rem}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}

/* ============================= NAV ============================= */
.nav{position:sticky;top:0;z-index:60;transition:padding .25s ease,box-shadow .25s ease,background .25s}
.nav-inner{display:flex;align-items:center;gap:22px;background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);
  border-radius:100px;padding:10px 12px 10px 18px;margin-top:16px;box-shadow:var(--shadow);
  transition:margin-top .25s ease}
.nav.scrolled .nav-inner{margin-top:8px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:800;
  font-size:1.05rem;letter-spacing:-.02em;margin-right:auto}
.brand img{width:40px;height:40px}
.brand span b{color:var(--field-deep)}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-links a{padding:.5em .8em;border-radius:100px;font-weight:600;font-size:.95rem;color:var(--ink-soft);
  transition:color .15s,background .15s}
.nav-links a:hover{color:var(--ink);background:var(--field-glow)}
.nav-links a.active{color:var(--ink);background:var(--field-glow)}
.nav-cta{margin-left:6px}

/* ============================= NAV DROPDOWN ============================= */
.nav-dropdown{position:relative}
.nav-dropdown .caret{display:none;margin-left:2px;font-size:.7em;vertical-align:1px}
.nav-dropdown.has-items .caret{display:inline}
.nav-dropdown-panel{position:absolute;top:calc(100% + 10px);left:0;min-width:230px;
  background:var(--white);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-lg);
  padding:8px;display:none;flex-direction:column;gap:2px;z-index:70}
/* Invisible bridge over the 10px gap above the panel — without it, the
   cursor crosses empty space (no element, so no :hover) on its way down
   from "Tournaments" to a menu item, and the panel can close before the
   click lands. Desktop/hover-only: on mobile the panel is position:static
   inside the hamburger menu (see the max-width:900px override below), so
   this bridge isn't needed there and would just float out of place. */
@media(min-width:901px){
  .nav-dropdown-panel::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
}
.nav-dropdown.has-items:hover .nav-dropdown-panel,
.nav-dropdown.has-items:focus-within .nav-dropdown-panel{display:flex}
.nav-dropdown-panel a{display:flex;flex-direction:column;gap:2px;padding:.6em .9em;border-radius:10px;
  font-weight:600;font-size:.9rem;color:var(--ink-soft);white-space:nowrap}
.nav-dropdown-panel a:hover{background:var(--field-glow);color:var(--ink)}
.nav-tourn-date{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:var(--river-deep)}
.hamburger{display:none;background:var(--ink);color:var(--field);border:none;border-radius:12px;
  width:44px;height:44px;cursor:pointer;align-items:center;justify-content:center}
.hamburger svg{width:22px;height:22px}

/* ============================= HERO ============================= */
.hero{position:relative;padding:56px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(2.7rem,6vw,4.6rem);letter-spacing:-.035em}
.hero h1 .river-word{color:var(--river-deep)}
.hero-lead{font-size:1.2rem;color:var(--ink-soft);max-width:34ch;margin:22px 0 30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.loc-chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:1rem;
  letter-spacing:.08em;text-transform:uppercase;background:var(--white);border:1.5px solid var(--line);
  color:var(--ink-soft);padding:.75em 1.4em;border-radius:100px;margin-bottom:26px;font-weight:700;
  box-shadow:var(--shadow)}
.loc-chip b{color:var(--river-deep)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--field-deep)}
/* hero art — the badge sits on a field with a chessboard + river arc */
.hero-art{position:relative;display:grid;place-items:center;min-height:380px}
.field-blob{position:absolute;inset:6% 4%;background:
  radial-gradient(120% 100% at 30% 20%,var(--field-glow),var(--field) 70%);
  border-radius:46% 54% 58% 42%/50% 46% 54% 50%;box-shadow:var(--shadow-lg)}
.field-blob::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.16;
  background-image:linear-gradient(var(--ink) 1px,transparent 1px),linear-gradient(90deg,var(--ink) 1px,transparent 1px);
  background-size:34px 34px;-webkit-mask:radial-gradient(120% 100% at 30% 20%,#000,transparent 78%);
  mask:radial-gradient(120% 100% at 30% 20%,#000,transparent 78%)}
.hero-logo{position:relative;width:min(78%,320px);filter:drop-shadow(0 22px 30px rgba(30,58,22,.32));
  animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-tags{position:absolute;inset:0;pointer-events:none}
.float-tag{position:absolute;background:var(--white);border:1px solid var(--line);border-radius:100px;
  padding:.5em .9em;font-family:var(--mono);font-size:.72rem;font-weight:600;color:var(--ink);
  box-shadow:var(--shadow);white-space:nowrap;pointer-events:auto}
.float-tag b{color:var(--river-deep)}
.ft1{top:8%;left:-4%;animation:bob 5s ease-in-out infinite}
.ft2{bottom:16%;right:-6%;animation:bob 7s ease-in-out infinite .5s}
.ft3{bottom:2%;left:8%;animation:bob 6.5s ease-in-out infinite .2s}

/* ============================= PAGE HERO (sub-pages) ============================= */
.page-hero{padding:56px 0 10px}
.page-hero .eyebrow{margin-bottom:12px}
.page-hero h1{font-size:clamp(2.2rem,4.4vw,3.4rem);letter-spacing:-.03em}
.page-hero p{color:var(--ink-soft);font-size:1.1rem;max-width:60ch;margin:16px 0 0}
/* Tournament detail hero's Register CTA (site.js renderEventDetail) — extra
   room + a bigger button so it doesn't get lost right under the date/venue
   line. Scoped to .page-hero .hero-cta since no static page combines the
   two classes, only the JS-rendered tournament detail header does. */
.page-hero .hero-cta{margin-top:32px}
.page-hero .hero-cta .btn{font-size:1.1rem;padding:1.05em 2.2em}

/* Event badge (site.js renderEventDetail/tournList) — a small pill call-out
   for anything worth flagging at a glance before the reader gets into the
   Event details section (e.g. "Beginner Friendly"). Shared between the
   tournament card (tournaments.html) and the detail page hero, sitting
   right under the format eyebrow in both. */
.event-badge{display:inline-block;background:var(--field);color:var(--ink);font-family:var(--mono);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45em 1em;
  border-radius:100px;margin:10px 0 4px}
/* Gold variant -- reuses the same gold token already used for the roster
   title chip/coach-feedback highlight elsewhere in the app -- for an
   event the owner wants to read as the flagship/premium one, visually
   distinct from the green "Beginner Friendly" badge. */
.event-badge--gold{background:linear-gradient(135deg,#c9a227,#e6c358);color:#3a2e05}

/* River-blue variant -- for an event whose badge is about official/
   sanctioned STATUS or credibility (e.g. "BC Provincial Championship",
   "FIDE Rated") rather than size/premium framing, which uses the gold
   variant above. Reuses the site's existing river-blue token, same
   "borrow an established accent for a new meaning" pattern. */
.event-badge--river{background:linear-gradient(135deg,var(--river-deep),#5b8fd6);color:#fff}

/* Featured tournament card (tournaments.html) -- a gold top accent bar +
   slightly stronger shadow so the flagship event stands out at a glance
   in the upcoming-events grid, not just on its own detail page. Same
   "colored top accent" language the ChessLab perk cards already use. */
.tcard--featured{border-color:#e6c358;box-shadow:0 0 0 1px #e6c358 inset,var(--shadow-lg)}
.tcard--featured::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,#c9a227,#e6c358,#c9a227)}

/* Event highlight (detail page hero only) — a bolder, harder-to-miss
   call-out box for something a visitor (often a parent) needs to see
   before they register, distinct from the muted small-print `.tcard`
   note used for logistics/fine print elsewhere on the page. */
.event-highlight{max-width:640px;margin-top:22px;padding:18px 22px;
  background:linear-gradient(135deg,var(--field-glow),var(--white));
  border:2px solid var(--field-deep);border-radius:var(--radius-sm);
  font-size:1.02rem;line-height:1.55;color:var(--ink)}
.event-highlight strong{display:block;font-size:1.12rem;margin-bottom:4px;color:var(--ink)}

/* Urgency/social-proof pills (site.js eventUrgencyHtml()) -- sit right
   above the Register button so the "why act now" signal is the last
   thing a visitor reads before the CTA. Plain variant is a quiet
   social-proof note (muted ink); --hot is the attention-grabbing case
   (low capacity, deadline closing) in the same gold token the flagship
   badge/roster title chip already use, so "urgent" reads consistently
   sitewide instead of introducing a new color; --full is neutral/ink,
   deliberately NOT alarming since it's routing someone to a waitlist,
   not pushing them to register. */
.event-urgency{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.event-urgency:empty{margin-top:0}
.urgency-pill{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:600;
  padding:.5em 1em;border-radius:100px;background:var(--field-glow);color:var(--ink)}
.urgency-pill--hot{background:linear-gradient(135deg,#c9a227,#e6c358);color:#3a2e05}
.urgency-pill--full{background:var(--paper);border:1px solid var(--line);color:var(--ink-soft)}
.urgency-pill--full a{color:inherit;font-weight:700}

/* ChessLab hero — the wordmark IS the headline: oversized, tight, two-tone,
   on a soft lime glow, with the pitch broken into short scannable lines +
   a checkmark list instead of a wall of paragraph text. */
.page-hero--chesslab{position:relative;padding:72px 0 30px;overflow:hidden}
.page-hero--chesslab::before{content:"";position:absolute;top:-32%;right:-12%;width:min(560px,70vw);
  height:min(560px,70vw);z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 32% 32%,var(--field-glow),transparent 68%)}
.chesslab-wordmark{font-size:clamp(3.6rem,11.5vw,6.8rem);font-weight:800;letter-spacing:-.05em;line-height:.88;
  margin:6px 0 0}
.chesslab-wordmark span{color:var(--river-deep)}
.page-hero--chesslab .chesslab-hero-lead{color:var(--ink);font-size:clamp(1.18rem,2.3vw,1.45rem);line-height:1.5;
  font-weight:500;max-width:38ch;margin:24px 0 0}
.page-hero--chesslab .chesslab-hero-lead b{font-weight:800;color:var(--ink)}
.page-hero--chesslab .chesslab-hero-lead--sub{font-size:1.05rem;line-height:1.6;font-weight:500;
  color:var(--ink-soft);max-width:46ch;margin-top:14px}
.page-hero--chesslab .chesslab-hero-lead--sub b{color:var(--ink);font-weight:700}
.chesslab-hero-points{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-direction:column;gap:11px}
.chesslab-hero-points li{position:relative;padding-left:32px;font-size:1rem;font-weight:600;color:var(--ink)}
.chesslab-hero-points li::before{content:"";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:7px;
  background:var(--field);box-shadow:0 4px 10px -4px var(--field-deep)}
.chesslab-hero-points li::after{content:"";position:absolute;left:6px;top:6px;width:8px;height:4px;
  border-left:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:rotate(-45deg)}
.page-hero--chesslab .hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
#chesslab-plans{scroll-margin-top:100px}

/* ============================= RIVER DIVIDER ============================= */
.river-divider{display:block;width:100%;height:60px;color:var(--river)}
.river-divider path{fill:none;stroke:currentColor;stroke-width:10;stroke-linecap:round}
.river-divider .bank{stroke:var(--field-deep);stroke-width:14;opacity:.35}

/* ============================= SECTION SHELL ============================= */
.section{padding:74px 0}
.section-head{max-width:640px;margin-bottom:40px}
.section-head h2{font-size:clamp(2rem,4vw,3rem);margin:12px 0 0}
.section-head p{color:var(--ink-soft);font-size:1.1rem;margin:14px 0 0}
/* .eyebrow's default color (--field-deep, a dark green) reads fine on
   white/dark backgrounds but is nearly invisible on .section--field's
   own light-green background -- dark green on light green. Only
   index.html's "Our community" section actually has an .eyebrow inside
   .section--field (confirmed -- shop.html/tournaments.html's own
   .section--field sections have no eyebrow at all), so this is a safe,
   targeted contrast fix, not a guess. */
.section--field .eyebrow{color:var(--ink)}
/* Owner request: make "Our community"'s intro text bigger/more visible --
   bumps just this section's heading/paragraph past the sitewide
   .section-head default rather than changing every section on the site. */
.gallery-head h2{font-size:clamp(2.3rem,5.5vw,3.75rem)}
.gallery-head p{font-size:1.2rem;font-weight:500;color:var(--ink)}
.section--field{background:
  radial-gradient(140% 90% at 100% 0%,var(--field-glow),transparent 60%),var(--field)}
.section--ink{background:var(--ink);color:var(--field-glow)}
.section--ink h2,.section--ink h3{color:var(--white)}
.section--ink .eyebrow{color:var(--field)}

/* ============================= TOURNAMENTS ============================= */
.tourns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:22px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.tcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.tcard-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:6px}
.tcard .date{font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.05em;
  color:var(--river-deep);background:#EAF7FE;border:1px solid #C9ECFB;padding:.4em .7em;border-radius:100px}
.tcard .fmt{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--field-deep);font-weight:700;margin-top:14px}
.tcard h3{font-size:1.55rem;margin:4px 0 0}
.tcard .venue{color:var(--ink-soft);font-size:.95rem;margin:10px 0 16px;display:flex;gap:7px}
.tcard .venue svg{flex:0 0 18px;margin-top:2px;color:var(--field-deep)}
.meta{list-style:none;margin:0 0 18px;padding:16px 0;border-top:1px dashed var(--line);
  border-bottom:1px dashed var(--line);display:grid;gap:9px}
.meta li{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;line-height:1.5}
.meta li span:first-child{color:var(--ink-soft);flex:0 0 auto}
.meta li span:last-child{font-family:var(--body);font-weight:600;text-align:left;flex:1 1 auto;min-width:0}
.prize{color:var(--river-deep) !important}
/* Marks whichever pricing tier (Early bird/Regular, or tiered Blitz) a
   visitor would actually be charged today -- see eventPriceRows(), site.js
   -- so the two rows don't read with identical weight on the Event
   details list. */
.price-active{color:var(--field-deep) !important;font-weight:700}
.price-active-badge{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:.62rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--white);
  background:var(--field-deep);padding:.25em .6em;border-radius:100px;white-space:nowrap;vertical-align:middle}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.chip{font-size:.75rem;font-weight:600;background:var(--field-glow);color:var(--ink);
  padding:.35em .75em;border-radius:100px}
.tcard-actions{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}
.tcard-actions .btn{flex:1;justify-content:center;min-width:130px}
.prereg-link{font-size:.86rem;color:var(--river-deep);font-weight:600;margin-top:14px;
  display:inline-flex;align-items:center;gap:6px}
.prereg-link:hover{text-decoration:underline}

/* ============================= PAST EVENTS ============================= */
.past-events{display:grid;gap:14px}
.past-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.past-card .pe-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
.past-card .pe-name{font-weight:700;font-size:1.05rem}
.past-card .pe-date{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft)}
.pe-links{display:flex;flex-wrap:wrap;gap:8px}
.pe-link{font-size:.82rem;font-weight:600;color:var(--river-deep);background:#EAF7FE;
  border:1px solid #C9ECFB;padding:.4em .8em;border-radius:100px;transition:background .15s,color .15s}
.pe-link:hover{background:var(--river-deep);color:var(--white)}
.placeholder-note{background:var(--card);border:1px dashed var(--line);border-radius:var(--radius-sm);
  padding:24px;color:var(--ink-soft);font-size:.95rem}
.placeholder-note b{color:var(--ink)}

/* Offsets the #preRegistration anchor jump so the sticky nav doesn't
   cover the section heading when the "Pre-register list" hero link
   scrolls the page down to it. */
#preRegistration{scroll-margin-top:100px}

/* ============================= ROSTER FILTERS ============================= */
.roster-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.roster-filter-btn{font-family:var(--body);font-size:.85rem;font-weight:600;color:var(--ink-soft);
  background:var(--white);border:1px solid var(--line);padding:.55em 1.1em;border-radius:100px;
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.roster-filter-btn:hover{color:var(--ink);border-color:var(--field-deep)}
.roster-filter-btn.active{background:var(--ink);color:var(--field);border-color:var(--ink)}
/* Sits in the same filter row but is an action, not a filter, so it's
   styled distinctly (river accent) and pushed to the far right on wider
   screens -- flex-wrap on .roster-filters already drops it to its own
   line on narrow ones. */
.roster-copy-btn{font:inherit;font-size:.85rem;font-weight:600;
  background:var(--white);border:1px solid var(--river);color:var(--river-deep);
  padding:.55em 1.1em;border-radius:100px;cursor:pointer;margin-left:auto;
  transition:background .15s,color .15s}
.roster-copy-btn:hover{background:var(--river);color:var(--white)}

/* ============================= ROSTER TABLE ============================= */
.roster-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow-x:auto}
.roster-table{width:100%;border-collapse:collapse;font-size:.92rem;white-space:nowrap}
.roster-table th{text-align:left;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--field-deep);font-weight:700;padding:14px 18px;
  border-bottom:1px solid var(--line)}
.roster-table td{padding:12px 18px;border-bottom:1px solid var(--line)}
.roster-table th:first-child,.roster-table td:first-child{width:1%;text-align:center;color:var(--ink-soft)}
.roster-table tr:last-child td{border-bottom:none}
.roster-table tbody tr:hover{background:var(--paper)}

/* Below ~820px the real 6-column table (#, Name, CFC ID, CFC Rating,
   Section, Bye Request) no longer fits and turns into a horizontally-
   scrolling mini-widget inside .roster-wrap's overflow-x:auto -- exactly
   the "desktop table that doesn't work on mobile" case. Rather than a
   second mobile-only markup path, the same <table> (rosterRows(), site.js)
   is restyled here into one card per registrant using the site's existing
   card look (--card/--radius-sm/--shadow, same tokens .tcard/.past-card
   already use) -- name stays the prominent header line, the rest becomes
   a label:value stack via each <td>'s own data-label attribute. */
@media(max-width:820px){
  .roster-wrap{background:transparent;border:none;box-shadow:none;overflow-x:visible}
  .roster-table{white-space:normal}
  .roster-table thead{display:none}
  .roster-table,.roster-table tbody{display:block;width:100%}
  /* tr is the flex container so the # and Name cells can sit on the same
     header line (matching the desktop table's own numbered-row look,
     owner request) while every other cell still stacks full-width below
     it -- flex-wrap plus flex:0 0 100% on those cells forces each onto
     its own line without needing any HTML/JS restructuring. */
  .roster-table tr{display:flex;flex-wrap:wrap;column-gap:8px;background:var(--card);
    border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow);
    padding:14px 16px;margin-bottom:12px}
  .roster-table tr:last-child{margin-bottom:0}
  .roster-table td{display:block;padding:3px 0;border-bottom:none;flex:0 0 100%}
  .roster-table td[data-label="#"],.roster-table td[data-label="Name"]{
    padding-bottom:10px;margin-bottom:6px;border-bottom:1px dashed var(--line)}
  /* width:auto/text-align:left override the desktop table's td:first-child{width:1%;text-align:center}, which left this
     cell ~3px wide so two-digit numbers ("41.") spilled onto the name */
  .roster-table td[data-label="#"]{flex:0 0 auto;width:auto;text-align:left;white-space:nowrap;font-family:var(--mono);font-weight:700;
    font-size:1.05rem;color:var(--ink-soft)}
  .roster-table td[data-label="#"]::after{content:"."}
  .roster-table td[data-label="Name"]{flex:1 1 0;min-width:0;font-size:1.05rem;font-weight:700;color:var(--ink)}
  .roster-table td:not([data-label="Name"]):not([data-label="#"])::before{
    content:attr(data-label);display:inline-block;min-width:112px;font-family:var(--mono);
    font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
}
.roster-title-chip{margin-left:8px;background:linear-gradient(135deg,#f2d477,#c9a227);color:#3b2b06;font-weight:700}
.roster-main-chip{margin-left:8px;background:var(--field-deep);color:var(--white)}
.roster-playup-chip{margin-left:8px;background:var(--ink);color:var(--field)}
.roster-blitz-chip{margin-left:8px;background:var(--river);color:var(--white)}

/* ============================= INFO LIST (Schedule / Prizes / Rules) ============================= */
.info-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;max-width:640px}
.info-list li{position:relative;padding-left:22px;color:var(--ink-soft);font-size:1rem;line-height:1.5}
.info-list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;
  border-radius:50%;background:var(--field-deep)}

/* ============================= STATS ============================= */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:20px;margin-top:10px}
.stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);
  padding:24px;transition:transform .22s ease,background .22s ease}
.stat .num{font-family:var(--display);font-weight:800;font-size:2.4rem;color:var(--field);line-height:1}
.stat .lbl{color:var(--field-glow);font-size:.9rem;margin-top:8px;opacity:.85}
.vision-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.vision-grid p{color:var(--field-glow);font-size:1.15rem;opacity:.92}
/* Grid items default to min-width:auto, so the nested .stats grid's own
   minmax() tracks could otherwise force this whole row wider than the
   viewport on mobile (a classic nested-grid overflow trap) -- letting
   both grid children shrink below their content size is what allows the
   single-column mobile layout (below) to actually fit. */
.vision-grid > *{min-width:0}
/* Location emphasis tiles (Vancouver/Richmond) -- .stat-icon sized down
   from the perk/pillar icon tiles elsewhere since these sit as a plain
   glyph on the tile, not inside their own colored square. .num is
   normally a number; a city name is short enough to reuse the same
   bold-display styling, just a touch smaller so "Vancouver"/"Richmond"
   never wrap inside the tile. */
.stat-icon{width:26px;height:26px;color:var(--field);margin-bottom:10px;display:block}
.stat--place .num{font-size:1.7rem;letter-spacing:-.01em}
.stat--place:hover{transform:translateY(-4px);background:rgba(255,255,255,.13)}

/* ============================= CHESSLAB PROMO (homepage) ============================= */
/* Reuses .chesslab-wordmark/.chesslab-hero-points as-is (both already
   page-hero-agnostic in membership.html's own CSS) inside a standalone,
   centered spotlight card -- deliberately visually distinct from every
   other side-by-side card grid on this page, so it reads as a dedicated
   promo rather than "a fourth pillar." */
.chesslab-promo{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:56px clamp(28px,6vw,64px);
  display:grid;gap:18px;max-width:760px;margin:0 auto;text-align:center}
.chesslab-promo::before{content:"";position:absolute;top:-42%;left:50%;transform:translateX(-50%);
  width:min(640px,90vw);height:min(640px,90vw);z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 32%,var(--field-glow),transparent 68%)}
.chesslab-promo>*{position:relative;z-index:1}
.chesslab-promo .chesslab-wordmark{margin:0 auto}
.chesslab-promo-lead{color:var(--ink);font-size:clamp(1.1rem,2.1vw,1.3rem);line-height:1.55;font-weight:500;
  max-width:52ch;margin:0 auto}
.chesslab-promo-lead b{font-weight:800;color:var(--ink)}
.chesslab-promo .chesslab-hero-points{flex-direction:row;flex-wrap:wrap;justify-content:center;
  gap:14px 28px;margin:6px auto 0}
.chesslab-promo .hero-cta{justify-content:center;margin-top:10px}

/* ============================= COMMUNITY GALLERY (homepage) ============================= */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.gallery-card{position:relative;margin:0;border-radius:var(--radius-sm);overflow:hidden;
  aspect-ratio:4/3;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease}
.gallery-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.gallery-card img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px 14px;
  background:linear-gradient(0deg,rgba(20,26,16,.78),rgba(20,26,16,0));
  color:var(--white);font-size:.92rem;font-weight:600;line-height:1.3}

/* ============================= COACHES ============================= */
.coaches{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:24px}
.coach{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);transition:transform .2s}
.coach:hover{transform:translateY(-4px)}
.coach-photo{width:100%;aspect-ratio:4/5;background:var(--field)}
.coach-photo img{width:100%;height:100%;object-fit:cover;display:block}
.coach-body{padding:24px 28px 28px}
.coach-head{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.avatar{width:66px;height:66px;border-radius:20px;background:
  radial-gradient(120% 120% at 30% 20%,var(--field-glow),var(--field));display:grid;place-items:center;
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ink);flex:0 0 66px;
  border:2px solid var(--white);box-shadow:var(--shadow);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.coach-head h3{font-size:1.2rem}
.coach-head .role{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--field-deep);font-weight:700;margin-top:4px}
.rating{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:700;
  font-size:.8rem;background:var(--ink);color:var(--field);padding:.35em .7em;border-radius:100px;margin-bottom:14px}
.coach p{font-size:.95rem;color:var(--ink-soft);margin:0 0 16px}
.ach{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ach li{font-size:.88rem;display:flex;gap:9px;align-items:flex-start}
.ach li::before{content:none}

/* ============================= LESSONS ============================= */
.lessons{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
.lessons-copy{padding:46px}
.lessons-copy h2{font-size:clamp(1.9rem,3.4vw,2.6rem);margin-bottom:16px}
.lessons-copy p{color:var(--ink-soft);margin:0 0 14px}
.lessons-list{list-style:none;padding:0;margin:22px 0 30px;display:grid;gap:12px}
.lessons-list li{display:flex;gap:11px;font-weight:500}
.lessons-list svg{flex:0 0 22px;color:var(--river-deep)}
.lessons-side{background:linear-gradient(160deg,var(--river),var(--river-deep));padding:46px;
  color:var(--white);display:flex;flex-direction:column;justify-content:center}
.lessons-side h3{color:var(--white);font-size:1.5rem;margin-bottom:10px}
.lessons-side p{opacity:.92;margin-bottom:22px}
.lessons-side .btn-primary{background:var(--white);color:var(--river-deep)}
.lessons-side .btn-primary:hover{background:var(--ink);color:var(--field)}

/* ============================= TESTIMONIALS (dormant, kept for later) ============================= */
.twrap{position:relative}
.tviewport{overflow:hidden}
.ttrack{display:flex;gap:22px;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.tquote{flex:0 0 calc(33.333% - 15px);background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.tquote .mark{font-family:var(--display);font-size:3rem;line-height:.6;color:var(--field);height:26px}
.tquote p{font-size:.98rem;color:var(--ink);margin:0 0 18px}
.tquote .who{margin-top:auto;display:flex;align-items:center;gap:11px}
.tquote .who .av{width:40px;height:40px;border-radius:12px;background:var(--field);display:grid;
  place-items:center;font-family:var(--display);font-weight:800;color:var(--ink);flex:0 0 40px}
.tquote .who b{display:block;font-size:.95rem}
.tquote .who span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--field-deep)}
.tnav{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}
.tnav button{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink);background:transparent;
  cursor:pointer;display:grid;place-items:center;transition:background .15s,color .15s;color:var(--ink)}
.tnav button:hover{background:var(--ink);color:var(--field)}

/* Testimonials page: same card as the (dormant) carousel, laid out as a responsive grid */
.testimonial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:22px}
.testimonial-grid .tquote{flex:none;margin:0}
.testimonial-grid .tquote blockquote{margin:0}
.testimonial-group + .testimonial-group{margin-top:56px}
.testimonial-group-head{margin-bottom:22px}
.testimonial-group-head h2{margin:0 0 4px;font-size:clamp(1.5rem,3vw,2rem)}
.testimonial-group-head p{margin:0;color:var(--ink-soft)}

/* ============================= SHOP ============================= */
.products{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.product{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.product:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.p-thumb{aspect-ratio:4/3;background:
  repeating-conic-gradient(var(--field-glow) 0 25%,var(--white) 0 50%) 0/44px 44px;
  display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line)}
.p-thumb .piece{font-size:3.4rem;filter:drop-shadow(0 6px 8px rgba(30,58,22,.25))}
.p-badge{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:.66rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:.35em .6em;border-radius:100px}
.p-badge.sale{background:var(--river);color:var(--ink)}
.p-badge.oos{background:#E9E2DC;color:#8a7f74}
.p-body{padding:20px;display:flex;flex-direction:column;flex:1}
.p-body h3{font-size:1.1rem;margin-bottom:8px}
.p-price{font-family:var(--mono);font-weight:700;margin:2px 0 16px;display:flex;align-items:baseline;gap:8px}
.p-price .was{color:var(--ink-soft);text-decoration:line-through;font-weight:500;font-size:.85em}
.p-price .now{color:var(--river-deep);font-size:1.15rem}
.p-body .btn{margin-top:auto;justify-content:center}

/* ============================= MEMBERSHIP ============================= */
.tier-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:22px;margin-top:8px}
.tier-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:32px;position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s}
.tier-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(30,58,22,.5)}
.tier-card--best{border-color:var(--river-deep);border-width:2px;
  background:linear-gradient(180deg,#F1FAFE,var(--card) 120px);box-shadow:0 24px 48px -24px rgba(47,169,222,.45)}
.tier-badge{position:absolute;top:-13px;right:24px;font-family:var(--mono);font-size:.66rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.45em .8em;border-radius:100px;
  background:var(--river-deep);color:var(--white)}
.tier-card h3{font-size:1.45rem;margin-bottom:4px}
.tier-price{font-family:var(--mono);font-weight:700;font-size:2.3rem;color:var(--river-deep);margin:12px 0 6px}
.tier-price span{font-size:.9rem;color:var(--ink-soft);font-weight:600}
.tier-sub{color:var(--ink-soft);font-size:.9rem;margin:0 0 22px;line-height:1.5}
.tier-card .btn{margin-top:auto;justify-content:center}
.tier-refund-note{text-align:center;color:var(--ink-soft);font-size:.82rem;margin-top:18px}

/* Perk feature cards ("What's included") -- three accent colors (green,
   river blue, gold) cycled across the four cards so the flagship perks
   pitch reads as distinct, colorful features rather than a plain bullet
   list (previously .info-list, identical styling to a tournament's rules
   text -- easy to miss on a page whose whole job is selling membership). */
.perk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:22px;margin-top:8px}
.perk-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:30px 26px 26px;box-shadow:var(--shadow);overflow:hidden;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
/* accent bar keyed to the card's colour — the perks read as distinct at a glance */
.perk-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--field-deep)}
.perk-card--river::before{background:var(--river-deep)}
.perk-card--gold::before{background:#c9a227}
.perk-card--ink::before{background:var(--ink)}
.perk-card:hover{transform:translateY(-6px);box-shadow:0 26px 50px -26px rgba(30,58,22,.5);border-color:transparent}
.perk-icon{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;
  transition:transform .22s ease}
.perk-card:hover .perk-icon{transform:scale(1.08) rotate(-5deg)}
.perk-icon svg{width:28px;height:28px}
.perk-card--field .perk-icon{background:linear-gradient(150deg,var(--field-glow),var(--field));color:var(--ink)}
.perk-card--river .perk-icon{background:linear-gradient(150deg,#E4F3FB,var(--river));color:#0f4c66}
.perk-card--gold .perk-icon{background:linear-gradient(150deg,#FBF1D9,#EBC873);color:#6e5410}
.perk-card--ink .perk-icon{background:linear-gradient(150deg,#2f5024,var(--ink));color:var(--field)}
.perk-card h3{font-family:var(--display);font-size:1.16rem;line-height:1.2;margin:0 0 9px;font-weight:800;
  color:var(--ink)}
.perk-card p{font-size:.98rem;color:var(--ink-soft);margin:0;line-height:1.6}

.member-status-card{background:var(--field-glow);border:1px solid var(--river);border-radius:var(--radius);
  padding:16px 22px;margin:8px 0 0;font-size:.95rem;color:var(--ink)}
.member-status-card--inactive{background:var(--card);border-color:var(--line);color:var(--ink-soft)}
.family-status-list{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:10px}
.family-status-list li{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.9rem;flex-wrap:wrap}
/* One-profile-at-a-time card (Profile tab) -- same content shape .family-status-list
   li used to render, now standalone since only the selected family member's
   card shows at once (switcher above picks who), instead of every member
   stacked in one list. */
.family-status-card{display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-size:.95rem;flex-wrap:wrap;padding:18px 20px;background:var(--paper);
  border:1px solid var(--line);border-radius:12px;margin-top:14px}
.family-status-active{color:var(--river-deep);font-weight:700}
.family-status-inactive{color:var(--ink-soft)}
.family-status-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.family-status-name{display:flex;flex-direction:column;gap:2px}
.family-status-rating{font-size:.78rem;color:var(--ink-soft);font-weight:500}
.family-status-cfcid{font-size:.78rem;color:var(--ink-soft);display:block}
.family-status-cfcid a{color:var(--river-deep);font-weight:600;margin-left:4px}
.family-status-cfcid a:hover{text-decoration:underline}
.family-cfcid-edit-row{display:flex;gap:8px;align-items:center;margin-top:4px}
.family-cfcid-edit-row input{width:140px;font-size:1rem;padding:.4em .6em;border:1px solid var(--line);
  border-radius:8px;font-family:var(--body);color:var(--ink)}
.family-profile-form{display:flex;flex-direction:column;gap:8px;margin-top:8px;width:100%;max-width:340px}
.family-profile-form label{display:flex;flex-direction:column;gap:3px;font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.family-profile-form input{font-size:1rem;padding:.5em .7em;border:1px solid var(--line);
  border-radius:8px;font-family:var(--body);color:var(--ink)}
.family-profile-form .reg-hint{margin:2px 0 0;font-size:.75rem}
.family-profile-form-actions{display:flex;gap:8px;margin-top:2px}
.family-cfcid-warning{font-size:.78rem;margin:4px 0 0;padding:.4em .7em}
.account-password-block{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.account-password-toggle{background:none;border:none;color:var(--river-deep);font-weight:600;font-size:.85rem;
  cursor:pointer;padding:0}
.account-password-toggle:hover{text-decoration:underline}
.account-password-form{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-width:340px}
.account-password-form label{display:flex;flex-direction:column;gap:3px;font-size:.78rem;font-weight:600;color:var(--ink-soft)}
.account-password-form input{font-size:.9rem;padding:.5em .7em;border:1px solid var(--line);
  border-radius:8px;font-family:var(--body);color:var(--ink)}
.account-password-msg{font-size:.78rem;margin:2px 0 0;padding:.4em .7em}
.account-password-msg:not(.reg-form-error){color:var(--field-deep);font-weight:600}
.family-remove-link{background:none;border:none;color:var(--ink-soft);font-size:.78rem;font-weight:600;
  cursor:pointer;padding:2px 4px}
.family-remove-link:hover{color:#b3261e}

/* ============================= MEMBER GAME LOG ============================= */
.game-log-toggle-wrap{width:100%}
.game-log-panel{width:100%;margin-top:10px;padding:16px;background:var(--card);
  border:1px solid var(--line);border-radius:12px}
.game-log-list{display:grid;gap:12px;margin-bottom:16px}
/* Base card is now white with a colored left stripe for status, instead
   of every entry (open, pending, reviewed) being the same flat mint-green
   block -- the stripe/pill colors are the only "loud" accents, so status
   is identifiable at a glance without reading the text. */
.game-log-entry{padding:14px 16px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--field-deep);border-radius:10px;font-size:.88rem;
  box-shadow:0 6px 16px -12px rgba(30,58,22,.35)}
.game-log-entry--pending{border-left-color:#c9a227}
.game-log-entry--reviewed{border-left-color:var(--river-deep)}
/* Inbox-only: an unopened reviewed game gets a soft tint + a small dot
   next to the date, both of which clear the moment it's expanded. */
.game-log-entry--unseen{background:#E4F3FB44}
.game-log-unseen-dot{width:8px;height:8px;border-radius:50%;background:var(--river-deep);flex-shrink:0}
.game-log-entry-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:600;color:var(--ink);flex-wrap:wrap}
/* The title area is the click target that expands/collapses the entry's
   detail block (tournament/notes/moves/feedback) -- entries start
   collapsed to keep the list scannable (owner feedback: too much showing
   at once), the chevron rotates to signal open/closed state. */
.game-log-entry-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;cursor:pointer;flex:1;min-width:0}
.game-log-chevron{width:16px;height:16px;flex-shrink:0;color:var(--ink-soft);transition:transform .15s ease}
.game-log-entry.expanded .game-log-chevron{transform:rotate(90deg)}
.game-log-entry-detail{display:none;margin-top:6px}
.game-log-entry.expanded .game-log-entry-detail{display:block}
.game-log-date{font-family:var(--mono);font-size:.78rem;color:var(--ink-soft);font-weight:600}
.game-log-opponent{font-weight:600}
.game-log-outcome{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.25em .6em;border-radius:100px}
.game-log-outcome--win{background:var(--field-glow);color:var(--field-deep)}
.game-log-outcome--loss{background:#F3E4E1;color:#9E4B3F}
.game-log-outcome--draw{background:#E4F3FB;color:var(--river-deep)}
.game-log-delete{background:none;border:none;color:var(--ink-soft);font-size:1.1rem;line-height:1;cursor:pointer;padding:2px 6px}
.game-log-delete:hover{color:var(--ink)}
.game-log-link{font-size:.82rem;font-weight:600;color:var(--river-deep);display:inline-block;margin-top:4px}
.game-log-notes{font-size:.85rem;color:var(--ink-soft);margin:6px 0 0}
.game-log-meta-line{font-family:var(--mono);font-size:.76rem;color:var(--ink-soft);margin:4px 0 0}
.gl-paste-pgn-row{display:flex;gap:8px;margin:10px 0;align-items:flex-start}
.gl-paste-pgn-row textarea{flex:1;font-family:var(--mono);font-size:.82rem;padding:.5em .7em;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);resize:vertical}
.game-log-pending{font-size:.85rem;color:var(--ink-soft);margin:8px 0 0}
.game-log-status-pill{display:inline-block;font-family:var(--mono);font-size:.68rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:.25em .6em;border-radius:100px;margin-right:6px}
.game-log-status-pill--pending{background:#FBF1D9;color:#8a6a12}
.game-log-status-pill--reviewed{background:#E4F3FB;color:var(--river-deep)}
/* Coach has answered but the owner hasn't approved it yet -- distinct
   from both "nobody's looked at this" (--pending, gold) and "the client
   can see this" (--reviewed, blue), so a neutral ink-soft tone rather
   than inventing a whole new accent color. */
.game-log-status-pill--drafted{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line)}
.game-log-feedback{margin-top:10px;padding:10px 12px;border-radius:8px;
  background:linear-gradient(135deg,#f2d47722,#c9a22722);border:1px solid #c9a22755}
.game-log-feedback b{display:block;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;
  color:#8a6a12;margin-bottom:4px}
.game-log-feedback p{font-size:.88rem;color:var(--ink);margin:0}
.game-log-reviewed-by{font-size:.76rem;color:var(--ink-soft);margin:6px 0 0 !important;font-style:italic}
/* "How do you want to add this game?" step -- shown before the metadata
   form so playing the game out (or pasting a PGN) comes first and
   describing it comes second, matching how Lichess study creation works.
   Owner feedback: the old order (fill in a form, THEN maybe touch the
   board) had it backwards. */
.game-log-start{margin-top:14px;padding:18px 20px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px}
.game-log-start-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.game-log-start-skip{background:none;border:none;color:var(--ink-soft);font-size:.82rem;font-weight:600;
  text-decoration:underline;cursor:pointer;padding:8px 2px;margin-left:auto}
.game-log-start-skip:hover{color:var(--ink)}
.game-log-form{margin-top:14px;padding:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.game-log-form label{display:grid;gap:5px;font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:10px}
.game-log-form input,.game-log-form select,.game-log-form textarea{font-family:var(--body);font-size:1rem;padding:.5em .7em;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);resize:vertical;background:var(--white)}
.game-log-form .reg-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Owner request: this checkbox is the ONLY way a member actually submits
   a game for coach analysis, but it used to render as a tiny, muted
   checkbox line easy to miss between Notes and the Save button -- same
   gold token language (#FBF1D9/#EBC873/#8a6a12) the rest of this page
   already uses for anything coach-related (.game-log-feedback,
   .pillar-card--gold's icon gradient) so it reads as a deliberate,
   can't-miss callout instead of an afterthought. */
.game-log-feedback-callout{display:flex !important;flex-direction:row !important;align-items:flex-start;gap:12px;
  padding:14px 16px;margin:4px 0 14px;background:#FBF1D9;border:1.5px solid #EBC873;border-radius:10px;
  cursor:pointer;font-weight:500 !important}
.game-log-feedback-callout input{width:20px;height:20px;margin-top:2px;flex-shrink:0;accent-color:#c9a227;cursor:pointer}
.game-log-feedback-callout-text{display:flex;flex-direction:column;gap:2px}
.game-log-feedback-callout-text b{font-size:.95rem;color:var(--ink);font-weight:700}
.game-log-feedback-callout-text small{font-size:.8rem;color:#8a6a12;font-weight:500}
.game-log-form .tcard-actions{margin-top:6px}
@media (max-width:600px){.game-log-form .reg-form-row{grid-template-columns:1fr}}

/* Monthly folders */
.game-log-folder{margin-bottom:20px}
.game-log-folder-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;
  padding-bottom:6px;border-bottom:1px solid var(--line)}
.game-log-folder-title{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--ink)}
.game-log-folder-count{font-family:var(--mono);font-size:.76rem;color:var(--ink-soft)}
.game-log-folder .game-log-entry{margin-bottom:10px}

/* Entry actions / edit-lock */
.game-log-entry-actions{display:flex;align-items:center;gap:10px}
.game-log-edit-link{background:none;border:none;color:var(--river-deep);font-size:.8rem;font-weight:600;
  cursor:pointer;padding:2px 4px}
.game-log-edit-link:hover{text-decoration:underline}
.game-log-locked-note{font-size:.78rem;color:var(--ink-soft);font-style:italic;margin:8px 0 0}
.game-log-edit-form{margin:-4px 0 10px;padding:14px;background:var(--card);border:1px solid var(--line);
  border-radius:10px}
.game-log-edit-form label{display:grid;gap:5px;font-size:.85rem;font-weight:600;color:var(--ink-soft);margin-bottom:10px}
.game-log-edit-form input,.game-log-edit-form select,.game-log-edit-form textarea{font-family:var(--body);font-size:1rem;padding:.5em .7em;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);resize:vertical;width:100%;background:var(--white)}
.game-log-edit-form .reg-form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.game-log-board-slot{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 12px;background:var(--field-glow);border-radius:8px;margin-bottom:10px;font-size:.85rem;color:var(--ink-soft)}

/* Registration portal */
.registration-portal-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.registration-portal-row select{flex:1;min-width:200px;font-family:var(--body);font-size:.9rem;
  padding:.6em .8em;border:1px solid var(--line);border-radius:8px;color:var(--ink);background:var(--white)}

/* Coach + Admin dashboards */
.coach-queue-list{display:grid;gap:14px}
.coach-queue-entry{padding:14px 16px;background:var(--field-glow);border-radius:10px;font-size:.88rem}
.coach-feedback-form{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.coach-feedback-form textarea{font-family:var(--body);font-size:.88rem;padding:.6em .8em;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);resize:vertical;width:100%}
.coach-feedback-form .cq-submit{align-self:flex-start}
.admin-feedback-edit{display:block;width:100%;font-family:var(--body);font-size:.88rem;padding:.6em .8em;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);resize:vertical;margin:2px 0 8px}
.admin-stats-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.admin-stat{flex:1;min-width:120px;padding:14px 16px;background:var(--field-glow);border-radius:10px;
  display:flex;flex-direction:column;gap:4px}
.admin-stat-num{font-family:var(--mono);font-weight:700;font-size:1.5rem;color:var(--ink)}
.admin-stat span:last-child{font-size:.76rem;color:var(--ink-soft)}
.admin-cfc-sync{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.admin-cfc-sync b{font-size:.95rem}
.admin-marketing{margin-top:18px;padding:16px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.admin-marketing b{font-size:.95rem}
.admin-marketing label{display:block;font-size:.82rem;font-weight:600;color:var(--ink-soft);margin-bottom:10px}
.admin-marketing-audience{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.admin-marketing-audience .reg-hint{margin:0}
.admin-marketing input,.admin-marketing textarea{display:block;width:100%;margin-top:4px;font-family:var(--body);
  font-size:1rem;padding:.6em .8em;border:1px solid var(--line);border-radius:8px;color:var(--ink);resize:vertical}

/* ============================= CHESSLAB DASHBOARD SHELL ============================= */
.wrap--chesslab{max-width:1440px}
.chesslab-shell{display:flex;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
  min-height:min(78vh,760px)}
.chesslab-sidebar{width:250px;flex-shrink:0;background:var(--ink);color:var(--paper);
  padding:28px 16px;display:flex;flex-direction:column;gap:22px}
.chesslab-nav{display:flex;flex-direction:column;gap:4px}
.chesslab-nav-item{display:flex;align-items:center;gap:12px;background:none;border:none;text-align:left;
  padding:13px 16px;border-radius:12px;color:var(--field-glow);font-family:var(--body);font-weight:700;
  font-size:1rem;cursor:pointer;transition:background .15s ease,color .15s ease}
.chesslab-nav-item svg{width:19px;height:19px;flex-shrink:0}
.chesslab-nav-item:hover{background:rgba(255,255,255,.1)}
.chesslab-nav-item.active{background:var(--field);color:var(--ink);box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}
.chesslab-nav-badge{margin-left:auto;background:#c9a227;color:var(--white);font-family:var(--mono);
  font-size:.7rem;font-weight:700;line-height:1;padding:.35em .55em;border-radius:100px;flex-shrink:0}
.chesslab-nav-item.active .chesslab-nav-badge{background:var(--ink);color:var(--field)}
/* Sits above the shell -- a one-time nudge toward the Inbox tab, not a
   permanent fixture (it and the sidebar badge both disappear once every
   reviewed game has been opened at least once). */
.chesslab-inbox-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:linear-gradient(135deg,#f2d47733,#c9a22733);border:1px solid #c9a22766;border-radius:var(--radius-sm);
  padding:16px 20px;margin-bottom:16px;font-weight:600;color:var(--ink)}
.chesslab-sidebar-foot{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.15);
  display:flex;flex-direction:column;gap:8px}
.chesslab-sidebar-foot .btn{color:var(--field-glow);border-color:rgba(255,255,255,.3);width:100%;justify-content:center}
.chesslab-content{flex:1;padding:38px 42px;min-width:0}
.chesslab-panel{display:none}
.chesslab-panel.active{display:block}
.chesslab-panel-title{font-family:var(--display);font-weight:800;font-size:1.55rem;color:var(--ink);
  letter-spacing:-.01em;margin:0 0 22px}
.gamelog-tab-switcher{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.gamelog-tab-pill{background:none;border:1px solid var(--line);border-radius:100px;padding:.4em 1.1em;
  font-family:var(--body);font-weight:600;font-size:.84rem;color:var(--ink-soft);cursor:pointer}
.gamelog-tab-pill.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
@media (max-width:760px){
  .chesslab-shell{flex-direction:column;min-height:0}
  .chesslab-sidebar{width:100%;flex-direction:row;align-items:center;overflow-x:auto;padding:14px 16px}
  .chesslab-nav{flex-direction:row}
  .chesslab-nav-item{white-space:nowrap}
  .chesslab-sidebar-foot{margin-top:0;padding-top:0;margin-left:auto;padding-left:14px;
    border-top:none;border-left:1px solid rgba(255,255,255,.15);flex-shrink:0;flex-direction:row}
  .chesslab-sidebar-foot .btn{width:auto}
  .chesslab-content{padding:22px 18px}
}

/* ============================= BOARD EDITOR MODAL ============================= */
/* Sized to feel like a real workspace, not a cramped popup, matching the
   app-window treatment the rest of ChessLab got (owner feedback: entering
   a game shouldn't happen in a tiny modal while everything around it is
   big and bold). max-height/overflow-y mirror .modal-card--wide's safety
   net for shorter viewports. */
/* width (not max-width) locks the modal to a definite size from the very
   first render -- with only a max-width, the card had no fixed size of
   its own, so the browser sized it from its CONTENT (the move list
   included), and content growing as moves were logged shifted that
   computed width, which is what read as "the board keeps randomly
   expanding." A fixed width removes the content -> layout feedback loop
   entirely: the board and the move-list column both get a fixed slice
   of a fixed total, no matter how many moves pile up. */
.modal-card.board-editor-card{width:min(1100px,92vw);max-width:none;max-height:88vh;overflow-y:auto}
.board-editor-hint{font-size:.82rem;color:var(--ink-soft);margin:-6px 0 14px}
.board-editor-layout{display:flex;gap:32px}
.board-editor-board-col{flex-shrink:0;display:flex;flex-direction:column;gap:10px}
.board-editor-board{width:480px;height:480px}
/* Prev/Next move navigation -- Left/Right arrow keys drive the same
   stepView(), see chessboard-editor.js. Purely a VIEW change (viewPly),
   never touches the live game state, so it works identically in every
   mode (editing, read-only, coach review). */
.board-editor-nav{display:flex;align-items:center;justify-content:center;gap:14px}
.board-editor-nav-label{font-family:var(--mono);font-size:.8rem;color:var(--ink-soft);min-width:44px;text-align:center}
/* flex-basis:0 (the "0" in 1 1 0) makes the side column's width purely a
   function of available space, never its own content -- same fix as the
   card's width, applied to the flex distribution itself. */
.board-editor-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:12px}
.board-editor-status{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--ink);margin:0}
.board-editor-moves{flex:1;min-height:120px;max-height:420px;overflow-y:auto;overflow-x:hidden;padding:14px;
  background:var(--field-glow);border-radius:10px;font-size:.92rem}
.board-editor-move-tree{line-height:2.1}
.board-editor-move-pair{margin-right:10px;white-space:nowrap}
.board-editor-move-pair b{color:var(--ink-soft);font-weight:600}
.board-editor-move{font-family:var(--mono);font-weight:600;color:var(--ink);background:none;border:1px solid transparent;
  border-radius:6px;padding:1px 5px;cursor:pointer}
.board-editor-move:hover{background:var(--white)}
/* Deliberately NOT colored blue just for having a comment -- that used to
   tint the SAN text itself blue the instant a MEMBER typed their own
   note, and the same thing happened to every move of a freshly pasted
   PGN whose embedded comments (e.g. Lichess's own eval/clock annotations)
   got parsed into moveComments. Blue is reserved for genuinely
   coach-authored content (sidelines, the annotation readout, a coach's
   own note below) -- a plain comment still gets its gold star, just no
   recoloring of the move itself. */
.board-editor-move.selected{background:var(--white);border-color:var(--line)}
.board-editor-move.viewing{border-color:var(--field-deep)}
.board-editor-comment-star{font-size:.75em;vertical-align:middle;color:#c9a227}
.board-editor-coachnote-mark{font-size:.65em;vertical-align:middle;color:var(--river-deep)}
.board-editor-sideline-dot{font-size:.65em;vertical-align:middle;color:var(--river-deep)}
/* "Comment" tab, collapsed state -- clicking a move no longer opens the
   textarea directly; this small button is the explicit second step, and
   Save/Remove both collapse back to it. */
.board-editor-comment-tab-closed{margin-top:10px}
.board-editor-move-empty{color:var(--ink-soft);font-style:italic}
.board-editor-comment-edit,.board-editor-comment-view{margin-top:10px;padding:10px 12px;background:var(--white);
  border:1px solid var(--line);border-radius:8px}
.board-editor-comment-edit textarea{width:100%;font-family:var(--body);font-size:.85rem;font-weight:600;padding:.5em .6em;
  border:1px solid var(--line);border-radius:8px;color:var(--ink);resize:vertical}
.board-editor-comment-view{font-size:.85rem;color:var(--ink);font-style:italic;font-weight:600}
.board-editor-annotation-readout{font-style:normal;font-weight:700;color:var(--river-deep);margin-right:6px}
/* A coach's own right-click note on a mainline move -- same bold-blue
   "coach-authored" treatment as sidelines/the annotation readout, kept
   visually distinct from the member's own (plain-ink) comment text even
   when both appear in the same panel. */
.board-editor-coachnote-view{font-style:normal;font-weight:700;color:var(--river-deep);margin:0 0 6px}
.board-editor-controls{display:flex;gap:8px}
/* Annotation glyph picker -- 3 columns matching the reference sheet the
   owner shared: .board-editor-annotations lays the 3 column groups out
   side by side, each .board-editor-annotation-col stacks its own 8
   symbols vertically, so the reading order matches that image exactly.
   Collapsed behind .board-editor-annotation-toggle by default (same
   pattern as the member's own "Comment" tab) -- the 24-button grid was
   tall enough to push "+ Add sideline" out of view below a scroll a
   coach had to find first before they could use it at all. */
.board-editor-annotation-toggle{margin-bottom:8px}
.board-editor-annotations{display:flex;gap:10px;margin-bottom:10px}
.board-editor-annotation-col{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.board-editor-annotation-btn{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:3px 4px;cursor:pointer;
  text-align:center}
.board-editor-annotation-btn:hover{background:var(--field-glow)}
.board-editor-annotation-btn.selected{background:var(--river);border-color:var(--river-deep);color:var(--ink)}
/* Sidelines -- coach-only alternative continuations, rendered as their
   own indented row directly in the move tree (right after the pair the
   branching ply belongs to), always visible to whoever's looking, not
   tucked behind selecting the move first. Each move inside is its own
   clickable button (.board-editor-sideline-move), same "click a move to
   see that position" interaction the mainline itself has. The remove
   (&times;) is the one piece still gated to canAnnotateMode.
   Bold + river-blue throughout (moves, parens, note) -- owner request:
   anything a coach added (a sideline move or its note) should read as
   visibly coach-authored and easy to pick out from the plain mainline
   text above it, not just italic gray. */
.board-editor-sideline-row{margin:2px 0 2px 18px;font-size:.82rem;color:var(--ink-soft);
  display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.board-editor-sideline-paren{color:var(--river-deep)}
.board-editor-sideline-move{font-family:var(--mono);font-style:italic;font-weight:700;color:var(--river-deep);
  background:none;border:1px solid transparent;border-radius:5px;padding:0 3px;cursor:pointer}
.board-editor-sideline-move:hover{background:var(--white)}
.board-editor-sideline-move.selected{background:var(--white);border-color:var(--line);font-style:normal}
.board-editor-sideline-note{font-style:italic;font-weight:700;color:var(--river-deep);margin-left:2px}
.board-editor-sideline-remove{background:none;border:none;color:var(--ink-soft);font-size:1rem;line-height:1;
  cursor:pointer;padding:0 2px;margin-left:auto}
.board-editor-sideline-remove:hover{color:var(--ink)}
.board-editor-sideline-add{margin-top:8px}
.board-editor-sideline-form{margin-top:8px;padding:10px 12px;background:var(--white);border:1px solid var(--line);
  border-radius:8px;display:flex;flex-direction:column;gap:8px}
.board-editor-sideline-form input{font-family:var(--body);font-size:.85rem;padding:.5em .6em;
  border:1px solid var(--line);border-radius:8px;color:var(--ink)}
@media (max-width:900px){
  .board-editor-layout{flex-direction:column}
  .board-editor-board-col{width:100%}
  .board-editor-board{width:100%;height:auto;aspect-ratio:1;max-width:420px;margin:0 auto}
  .board-editor-nav{max-width:420px;margin:0 auto}
}

/* ============================= HOMEPAGE PILLARS =============================
   The three flagship features (Tournaments / ChessLab / Lessons), styled to
   match membership.html's perk cards -- accent bar, gradient icon tile,
   lift+tilt hover -- so the site's "big three" read the same everywhere. */
.pillar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:26px}
.pillar-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:34px 30px 30px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow);transition:transform .22s ease,box-shadow .22s ease}
.pillar-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:var(--field-deep)}
.pillar-card--river::before{background:var(--river-deep)}
.pillar-card--gold::before{background:#c9a227}
.pillar-card:hover{transform:translateY(-8px);box-shadow:0 30px 60px -28px rgba(30,58,22,.5)}
.pillar-icon{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;margin-bottom:20px;
  transition:transform .22s ease}
.pillar-card:hover .pillar-icon{transform:scale(1.08) rotate(-5deg)}
.pillar-icon svg{width:32px;height:32px}
.pillar-card--field .pillar-icon{background:linear-gradient(150deg,var(--field-glow),var(--field));color:var(--ink)}
.pillar-card--river .pillar-icon{background:linear-gradient(150deg,#E4F3FB,var(--river));color:#0f4c66}
.pillar-card--gold .pillar-icon{background:linear-gradient(150deg,#FBF1D9,#EBC873);color:#6e5410}
.pillar-card h3{font-family:var(--display);font-size:1.5rem;font-weight:800;margin:0 0 10px;color:var(--ink)}
.pillar-card p{color:var(--ink-soft);font-size:1rem;line-height:1.6;margin:0 0 18px}
.pillar-points{list-style:none;padding:0;margin:0 0 26px;display:flex;flex-direction:column;gap:9px}
.pillar-points li{position:relative;padding-left:22px;font-size:.92rem;font-weight:600;color:var(--ink)}
.pillar-points li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;
  background:var(--field-deep)}
.pillar-card--river .pillar-points li::before{background:var(--river-deep)}
.pillar-card--gold .pillar-points li::before{background:#c9a227}
.pillar-card .btn{margin-top:auto;justify-content:center}

/* ============================= HOMEPAGE TEASERS (secondary items) ============================= */
.teaser-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:32px}
.teaser-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;
  display:flex;flex-direction:column}
/* Same top-accent-bar language .pillar-card/.perk-card already use
   elsewhere, so these two secondary cards read as part of the same
   design system instead of a plainer, bolted-on afterthought. */
.teaser-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--field-deep)}
.teaser-card--river::before{background:var(--river-deep)}
.teaser-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.teaser-card h3{font-size:1.3rem;margin:10px 0 10px}
.teaser-card p{color:var(--ink-soft);font-size:.96rem;margin:0 0 18px;flex:1}
.teaser-card .teaser-link{font-weight:700;color:var(--river-deep);display:inline-flex;align-items:center;gap:6px}
.teaser-card .teaser-link:hover{text-decoration:underline}

/* ============================= CONTACT / FOOTER ============================= */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.contact-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px;box-shadow:var(--shadow)}
.contact-card h2{font-size:2rem;margin-bottom:10px}
.contact-card p{color:var(--ink-soft);margin:0 0 22px}
.contact-row{display:flex;align-items:center;gap:12px;padding:14px 0;border-top:1px solid var(--line)}
.contact-row svg{color:var(--river-deep);flex:0 0 22px}
.contact-row a{font-weight:600;overflow-wrap:anywhere}
.contact-grid>*{min-width:0}
.club{background:linear-gradient(160deg,var(--field),var(--field-deep));border-radius:var(--radius);
  padding:40px;color:var(--ink);box-shadow:var(--shadow-lg)}
.club h3{font-size:1.7rem;margin-bottom:10px}
.club p{margin-bottom:22px}
footer{background:var(--ink);color:var(--field-glow);padding:56px 0 30px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px}
.foot-brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:800;
  font-size:1.3rem;color:var(--white)}
.foot-brand img{width:52px;height:52px}
.foot-col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--field);margin-bottom:14px;font-weight:700}
.foot-col a{display:block;padding:5px 0;color:var(--field-glow);opacity:.82;font-size:.95rem}
.foot-col a:hover{opacity:1;color:var(--white)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem;opacity:.7}

/* ============================= MODAL ============================= */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px;
  background:rgba(30,58,22,.55);backdrop-filter:blur(4px)}
.modal.open{display:grid}
.modal-card{background:var(--white);border-radius:var(--radius);max-width:440px;padding:34px;
  box-shadow:var(--shadow-lg);text-align:center}
.modal-card h3{font-size:1.5rem;margin-bottom:12px}
.modal-card p{color:var(--ink-soft);margin-bottom:20px}
.modal-card code{font-family:var(--mono);font-size:.8rem;background:var(--paper);padding:.2em .5em;
  border-radius:6px;color:var(--river-deep)}
.reg-options{display:grid;gap:10px;margin-bottom:20px}
.reg-options .btn{width:100%;justify-content:center}

/* ============================= REGISTRATION PRICE PICKER (checkboxes + live total) ============================= */
.reg-price-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:.7em .2em;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink)}
.reg-price-toggle{cursor:pointer}
.reg-price-toggle span:first-child{display:flex;align-items:center;gap:10px;font-weight:500}
.reg-price-toggle input{width:17px;height:17px;accent-color:var(--river-deep);flex-shrink:0}
.reg-price-total{border-bottom:none;border-top:2px solid var(--ink);margin-top:4px;
  font-weight:700;font-size:1.02rem}
.reg-continue-btn{width:100%;justify-content:center;margin-top:16px}
.reg-blitz-alt{margin-top:14px;text-align:center}

/* ============================= REGISTRATION FORM ============================= */
.modal-card--wide{max-width:560px;text-align:left;max-height:88vh;overflow-y:auto}
.modal-card--wide h3{text-align:center}
.reg-form{display:grid;gap:16px;margin-top:20px;min-width:0}
.reg-form label{display:grid;gap:6px;font-size:.88rem;font-weight:600;color:var(--ink-soft);min-width:0}
.reg-form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.reg-form-row > label{min-width:0}
.reg-form input[type="text"],.reg-form input[type="email"],.reg-form input[type="number"],.reg-form input[type="tel"],
.reg-form select,.reg-form textarea{width:100%;font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:10px;padding:.7em .9em}
.reg-form input:focus,.reg-form select:focus,.reg-form textarea:focus{outline:2px solid var(--river);outline-offset:1px}
.reg-bye-fieldset{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0}
.reg-bye-fieldset legend{font-size:.82rem;font-weight:700;color:var(--ink-soft);padding:0 6px}
.reg-bye-options{display:grid;gap:8px;margin-top:6px}
.reg-bye-options label{display:flex;align-items:center;gap:8px;font-weight:500;color:var(--ink);flex-direction:row}
.reg-checkbox-row{display:flex !important;flex-direction:row;align-items:flex-start;gap:10px;
  font-weight:500 !important;color:var(--ink) !important}
.reg-checkbox-row input{margin-top:3px}
.reg-form-error{background:#FBEAEA;border:1px solid #F0C4C4;color:#A33;border-radius:10px;
  padding:.8em 1em;font-size:.88rem;margin:0}
.reg-hint{font-size:.78rem;font-weight:500;color:var(--ink-soft)}
.reg-hint a{color:var(--river-deep);font-weight:600}
.reg-hint a:hover{text-decoration:underline}
/* Inline link within an event's `note` text (site.js renderEventDetail) that
   needs to read as clearly clickable rather than blend into the sentence --
   the global a{text-decoration:none} otherwise makes it look like plain text. */
.note-link{color:var(--river-deep);font-weight:700;text-decoration:underline}
#registerSuccess h3{text-align:center}
#registerSuccess p{color:var(--ink-soft);text-align:center}

/* ============================= REVEAL ============================= */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
/* If site.js never finishes (old/in-app browser, script error), reveal everything after 4s */
@keyframes revealFallback{to{opacity:1;transform:none}}
html:not(.js-ok) .reveal{animation:revealFallback 0s 4s forwards}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============================= RESPONSIVE ============================= */
@media(max-width:900px){
  .hero-grid,.vision-grid,.lessons,.contact-grid{grid-template-columns:1fr}
  .hero-art{min-height:320px;margin-top:10px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .tquote{flex:0 0 calc(50% - 11px)}
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav.open .nav-links{display:flex;position:absolute;top:74px;left:24px;right:24px;flex-direction:column;
    background:var(--white);border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:var(--shadow-lg)}
  .nav.open .nav-links a{width:100%}
  /* Unlike the old plain "Membership" CTA, this button is now the only
     way to reach login/the portal -- keep it visible on mobile instead
     of hiding it, since there's no equivalent entry inside the
     hamburger's nav-links list. */
  .nav-cta{padding:.5em .8em;font-size:.85rem}
  .nav-dropdown-panel{position:static;box-shadow:none;border:none;padding:2px 0 6px 14px;
    background:transparent;min-width:0;width:100%;box-sizing:border-box}
  .nav-dropdown.has-items .nav-dropdown-panel{display:flex}
  /* The desktop rule sets white-space:nowrap so a short entry never wraps
     inside the hover panel's own auto-sized width -- inside the mobile
     menu the panel is stuck at the menu column's width instead, so nowrap
     just pushed a long entry (or its date) off both edges of the screen.
     Letting it wrap here is the fix; width:100% keeps the panel itself
     from being sized by its longest child in the first place. */
  .nav-dropdown-panel a{white-space:normal;width:100%;box-sizing:border-box}
}
@media(max-width:620px){
  body{font-size:16px}
  .stats{grid-template-columns:1fr 1fr}
  .tquote{flex:0 0 100%}
  .foot-grid{grid-template-columns:1fr}
  .section{padding:56px 0}
  .lessons-copy,.lessons-side{padding:32px}
  /* Registration modal: force First/Last Name (and any other paired
     row) to stack, and hard-cap the card so it can never render wider
     than the viewport regardless of content forcing a grid track wide —
     this is what caused text to get clipped on phones (modal card was
     rendering ~450px wide on a 375px screen). */
  .modal{padding:12px}
  .modal-card,.modal-card--wide{width:100%;max-width:100%}
  .reg-form-row{grid-template-columns:1fr}
  /* .btn-sm (the nav CTA, plus other compact secondary buttons) rendered
     ~31-35px tall -- under the ~44px comfortable touch-target guideline.
     Bumped on mobile only; desktop's compact sizing is untouched. */
  .btn-sm{min-height:44px}
  /* .tcard-actions is the shared "modal action buttons" row used
     everywhere on this site (registration Cancel/Submit, the success
     modal's Close/Continue to payment, login, payment-not-connected,
     etc.) -- side-by-side with only a 130px min-width, a longer button
     label (e.g. "Continue to payment — $90") gets squeezed narrower than
     its own text and clips (confirmed: scrollWidth 144px in a 133px box
     on a 375px phone). Stacking to full-width buttons on mobile removes
     the squeeze entirely and is the more common, more tappable pattern
     for modal actions on a phone anyway. */
  .tcard-actions{flex-direction:column}
  .tcard-actions .btn{width:100%;min-width:0}
}
@media(max-width:480px){
  /* Below ~480px the "Lulu Island Chess" wordmark next to the logo has no
     room and wraps to 2-3 lines, stretching the whole nav pill to 80-100px
     tall and cramping it against the ChessLab/hamburger buttons. The full
     name still appears immediately in every page's own H1 and in the
     footer, so dropping just the nav's text label (icon-only mobile nav,
     the same pattern most premium sites use at this width) keeps the
     brand identity intact while returning the nav to a normal, single-line
     height. */
  .brand span{display:none}
}

/* ============================= CHAT WIDGET (every page) =============================
   A floating "message us" button + panel present on every page (owner
   request). Fixed-position, its own small z-index above normal content
   but below modals (.modal is 100) so a form modal always wins if both
   are somehow open. Deliberately reuses .reg-form/.reg-hint/.reg-form-error
   styling rather than inventing new form classes. */
.chat-widget{position:fixed;right:22px;bottom:22px;z-index:90;display:flex;flex-direction:column;
  align-items:flex-end;gap:14px}
/* Pill-shaped and brand-lime (not a quiet dark circle) so it actually
   catches the eye against the page -- owner feedback: "make the message
   box more visible... something that says chat with us." Collapses back
   to a plain circle showing just the close icon once open, since the
   label reads oddly next to an X and the panel's own header already
   repeats "Message us". */
.chat-widget-toggle{height:56px;min-width:56px;border-radius:100px;background:var(--field);
  color:var(--ink);border:none;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:10px;padding:0 22px 0 16px;box-shadow:var(--shadow-lg);
  transition:transform .2s ease,padding .2s ease,min-width .2s ease;flex-shrink:0}
.chat-widget-toggle:hover{transform:translateY(-3px) scale(1.04)}
.chat-widget-toggle svg{width:26px;height:26px;flex-shrink:0}
.chat-widget-toggle-label{font-family:var(--display);font-weight:800;font-size:.95rem;white-space:nowrap}
.chat-widget-icon-close{display:none}
.chat-widget.open .chat-widget-icon-open{display:none}
.chat-widget.open .chat-widget-icon-close{display:block}
.chat-widget.open .chat-widget-toggle{padding:0;min-width:56px;width:56px}
.chat-widget.open .chat-widget-toggle-label{display:none}
.chat-widget-panel{display:none;width:min(340px,calc(100vw - 44px));background:var(--card);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden}
.chat-widget.open .chat-widget-panel{display:block}
.chat-widget-header{background:var(--ink);color:var(--field);padding:16px 18px;font-family:var(--display);
  font-weight:800;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between}
.chat-widget-close{background:none;border:none;color:var(--field);font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 4px}
.chat-widget-body{padding:18px;max-height:70vh;overflow-y:auto}
.chat-widget-body .reg-form{margin-top:14px;gap:12px}
.chat-widget-body textarea{resize:vertical;font-family:var(--body)}
/* AI Q&A mode -- the widget's default view (see the HTML comment above
   #chatWidget). Bubbles reuse the site's ink/field palette rather than a
   generic chat-app blue, so this still reads as part of the same design
   system as everything else. */
.chat-widget-ai-log{display:flex;flex-direction:column;gap:10px;margin:14px 0;max-height:280px;
  overflow-y:auto}
.chat-widget-ai-msg{max-width:85%;padding:.6em .9em;border-radius:14px;font-size:.92rem;line-height:1.4;
  white-space:pre-line}
.chat-widget-ai-msg--user{align-self:flex-end;background:var(--ink);color:var(--field);
  border-bottom-right-radius:4px}
.chat-widget-ai-msg--bot{align-self:flex-start;background:var(--field-glow);color:var(--ink);
  border-bottom-left-radius:4px}
.chat-widget-ai-msg--error{align-self:flex-start;background:transparent;color:#b3261e;
  border:1px solid #b3261e;font-size:.85rem}
.chat-widget-ai-link{align-self:flex-start;font-size:.85rem;font-weight:700;color:var(--river-deep)}
.chat-widget-ai-feedback{align-self:flex-start;display:flex;align-items:center;gap:8px;
  font-size:.8rem;color:var(--ink-soft);flex-wrap:wrap}
.chat-widget-ai-feedback button{background:none;border:1px solid var(--line);border-radius:100px;
  padding:.2em .8em;font-size:.8rem;font-weight:700;cursor:pointer;color:var(--ink)}
.chat-widget-ai-feedback button:hover{background:var(--field-glow)}
.chat-widget-ai-feedback a{color:var(--river-deep);font-weight:700}
.chat-widget-ai-form{display:flex;gap:8px}
.chat-widget-ai-form input{flex:1;padding:.6em .8em;border:1px solid var(--line);border-radius:10px;
  font-family:var(--body);font-size:1rem}
.chat-widget-ai-form button{flex-shrink:0}
/* Honeypot -- a hidden field real visitors never see or fill; a bot that
   fills every field in the form trips it. No CAPTCHA anywhere in this
   project, so this is the cheap, frictionless alternative. */
.chat-widget-honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:520px){
  .chat-widget{right:14px;bottom:14px}
  .chat-widget-panel{width:calc(100vw - 28px)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto}
}

/* Gold callout above an event's prize list (site.js `prizesCallout`) —
   used when the prizes aren't what a visitor would assume (BCJCC's are
   travel grants to CJCC, not cash), so it can't be missed. Gold matches
   the "important before you register" language used elsewhere
   (.titled boxes, coach highlights). */
.prize-callout{max-width:720px;margin:0 0 22px;padding:18px 22px;
  background:#FBF1D9;border:2px solid #c9a227;border-left-width:8px;border-radius:var(--radius-sm);
  font-size:1.05rem;line-height:1.55;color:var(--ink)}
.prize-callout strong{display:block;font-size:1.15rem;margin-bottom:6px;color:#6b4e00}

/* Prize list when an event uses the travel-grant callout: darker, larger,
   with the section name and dollar amounts bold so they stand out from the
   muted grey of ordinary .info-list items. */
.info-list--prizes li{color:var(--ink);font-size:1.12rem;line-height:1.65}
.info-list--prizes li b{font-weight:800;color:#075a28}
.info-list--prizes li b.ps{color:var(--ink);font-size:1.22rem}

/* Owner-set custom note on a roster row (registrations.roster_note, e.g.
   "FIDE 1763") -- shown after the Main/Play-up/Blitz chips. Ink-on-gold so
   it reads as an annotation, distinct from the colored participation chips. */
.roster-note-chip{background:#FBF1D9;color:#6b4e00;border:1px solid #EBC873;font-weight:700}