/* ==========================================================================
   The Monthly Nine — /9holemonthlytournament (BC-1733)

   Ported from the approved prototype
   (Marketing/pages/monthly-tournament/monthly-nine-leaderboard-v1.html).
   Every rule is scoped under .mn so nothing here reaches the site chrome.
   Loaded only by 9holemonthlytournament.php.

   Dark clubhouse single theme: ticker, split-flap board, month progression
   (calendar + score-to-beat chart + season strip), player dialog with round
   scorecards. The board sizes everything in container query units (cqw) so
   it scales with its box, phone to TV.
   ========================================================================== */

.mn{
  --graphite:#2A2A2A; --ink:#181818; --panel:#222121; --cell:#2c2c2c; --cell2:#252525; --line:#383634;
  --copper:#C84F36; --copperText:#E0694F; --sun:#F7B32B; --grey:#9A9A9A; --off:#EEF0F2; --beige:#F5F0EA;
  --font:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:dark;
  background:var(--ink);color:var(--off);font-family:var(--font);font-size:15px;line-height:1.5;
  overflow-x:clip;
}
.mn *{box-sizing:border-box}
.mn .tnum{font-variant-numeric:tabular-nums}
.mn .wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.mn .eyebrow{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--sun)}
.mn h1,.mn h2,.mn h3{margin:0;line-height:1.1;text-wrap:balance}
.mn button{font-family:var(--font)}
.mn :focus-visible{outline:2px solid var(--sun);outline-offset:2px;border-radius:0}
.mn .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* demo-mode label (staging + ?demo=1 only) */
.mn .proto{background:var(--sun);color:var(--graphite);font-size:12.5px;font-weight:700;text-align:center;padding:8px 16px}

/* ticker */
.mn .ticker{background:var(--copper);color:#fff;overflow:hidden;white-space:nowrap;font-size:13px;font-weight:800;letter-spacing:.06em}
.mn .ticker .track{display:inline-flex;gap:48px;padding:9px 0;animation:mn-tick 40s linear infinite;padding-left:100%}
.mn .ticker span b{color:var(--graphite);background:var(--sun);padding:1px 6px;border-radius:3px;margin-right:6px;font-size:11px}
@keyframes mn-tick{to{transform:translateX(-100%)}}

/* in-page section links (the prototype's mini-header nav; the site header replaces its brand) */
.mn .secnav{display:flex;justify-content:flex-end;gap:18px;font-size:13px;font-weight:600;color:var(--grey);flex-wrap:wrap;padding-block:18px}
.mn .secnav a{color:inherit;text-decoration:none}
.mn .secnav a:hover{color:var(--off)}
/* in-page links land below the sticky site header, not under it */
.mn section{scroll-margin-top:110px}

/* hero */
.mn .hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;padding-block:18px 22px}
.mn .hero h1{font-size:clamp(34px,6vw,64px);font-weight:900;letter-spacing:-.03em;margin-top:8px;color:var(--off)}
.mn .hero h1 span{color:var(--copperText)}
.mn .hero p{color:var(--grey);margin:10px 0 0;max-width:58ch}
.mn .hero p strong{color:var(--off)}
.mn .facts{display:flex;gap:22px;flex-wrap:wrap}
.mn .facts div{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--grey);text-transform:uppercase}
.mn .facts b{display:block;font-size:22px;color:var(--off);letter-spacing:-.01em;text-transform:none}

/* board */
.mn .board{container-type:inline-size;background:#121212;border-radius:14px;padding:clamp(14px,3cqw,28px);border:1px solid #2a2a2a;box-shadow:inset 0 0 0 6px #1a1a1a}
.mn .boardbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mn .boardbar .hint{font-size:12px;color:var(--grey);font-weight:600}
.mn .boardbar .hint b{color:var(--sun)}
/* no rounds yet: the column labels sit over nothing, so hide them */
.mn .board.empty .cols{display:none}
.mn .cols,.mn .frow{display:grid;grid-template-columns:9.6cqw 46cqw 14.4cqw 1fr;gap:1.6cqw;align-items:center}
.mn .cols{font-size:max(10px,1.3cqw);font-weight:800;letter-spacing:.16em;color:var(--grey);padding:0 1cqw 8px}
.mn .frow{width:100%;background:none;border:1px solid transparent;border-radius:.8cqw;padding:.55cqw 1cqw;cursor:pointer;color:var(--off);text-align:left}
.mn .frow:hover,.mn .frow:focus-visible{border-color:var(--copper);background:rgba(200,79,54,.07)}
/* px floors: on a phone 2.4cqw is ~7px, less than the 9px label needs */
.mn .frow.cutafter{margin-bottom:max(16px,2.4cqw);position:relative}
.mn .frow.cutafter::after{content:"IN THE MONEY";position:absolute;left:1cqw;right:1cqw;bottom:min(-12px,-1.9cqw);border-top:2px dashed var(--copper);font-size:max(9px,1.1cqw);font-weight:800;letter-spacing:.18em;color:var(--copperText);text-align:right;padding-top:2px;line-height:1}
/* empty board: a message spelled out in flaps, not a clickable row */
.mn .frow.msg{display:flex;justify-content:center;cursor:default}
.mn .frow.msg:hover{border-color:transparent;background:none}
.mn .cells{display:flex;gap:.45cqw}
.mn .f{position:relative;width:4.2cqw;height:6cqw;background:linear-gradient(var(--cell) 50%,var(--cell2) 50%);border-radius:.45cqw;display:grid;place-items:center;font-size:3.6cqw;font-weight:800;line-height:1}
.mn .f::after{content:"";position:absolute;left:0;right:0;top:50%;height:max(1px,.18cqw);background:#0d0d0d}
.mn .f.c{color:var(--copperText)}.mn .f.y{color:var(--sun)}
.mn .boardfoot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--grey);font-weight:600}
.mn .boardfoot b{color:var(--off)}

/* sections */
.mn section.block{padding-block:56px 8px}
.mn .sechead{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.mn .sechead h2{font-size:clamp(26px,3.6vw,38px);font-weight:900;letter-spacing:-.02em;margin-top:6px;color:var(--off)}
.mn .sechead p{margin:6px 0 0;color:var(--grey);max-width:60ch}

.mn .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:22px}
.mn .stats div{background:var(--panel);padding:14px 16px}
.mn .stats b{display:block;font-size:28px;font-weight:900;letter-spacing:-.02em}
.mn .stats span{font-size:12px;color:var(--grey);font-weight:600}

.mn .prog{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px}
.mn .card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;min-width:0}
.mn .card h3{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey);margin-bottom:12px;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.mn .card h3 small{font-size:11px;letter-spacing:.06em;text-transform:none;font-weight:600}
.mn .cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.mn .cal .dow{font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--grey);text-align:center;padding-bottom:2px}
.mn .cal button,.mn .cal .d{aspect-ratio:1/1;border-radius:8px;border:1px solid transparent;background:#2b2a29;color:var(--grey);font-size:11px;font-weight:700;padding:5px 6px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;min-width:0;line-height:1.5}
.mn .cal button{cursor:pointer}
.mn .cal button b{align-self:flex-end;font-size:clamp(12px,1.6vw,17px);color:var(--off);font-weight:900}
.mn .cal button.ch{background:var(--copper);color:#fff}
.mn .cal button.ch b{color:#fff}
.mn .cal button[aria-pressed="true"]{border-color:var(--sun)}
.mn .cal .pre{background:#1f1f1f;color:#555}
.mn .cal .fut{background:transparent;border:1px dashed #3a3a3a;color:#666}
.mn .cal .today{box-shadow:inset 0 0 0 2px var(--sun)}
.mn .cal .x{visibility:hidden}
.mn .daynote{margin-top:12px;font-size:13.5px;min-height:3em;color:var(--off)}
.mn .daynote span{color:var(--grey)}
.mn .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11.5px;color:var(--grey);font-weight:600}
.mn .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

.mn .chart svg{width:100%;height:auto;display:block}
.mn .season{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.mn .stop{border-top:3px solid #3a3a3a;padding-top:10px}
.mn .stop.now{border-color:var(--copper)}
.mn .stop small{font-size:11px;font-weight:800;letter-spacing:.16em;color:var(--grey)}
.mn .stop b{display:block;font-size:17px;font-weight:900;margin:2px 0}
.mn .stop span{font-size:12.5px;color:var(--grey)}
.mn .stop.now small{color:var(--copperText)}

.mn .how{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.mn .how div{border-top:1px solid var(--line);padding-top:14px}
.mn .how b{display:block;font-size:15px;font-weight:800;margin-bottom:4px}
.mn .how p{margin:0;color:var(--grey);font-size:13.5px}
.mn .how a{color:var(--off)}

.mn .consent{padding-block:56px 40px;color:#777;font-size:12px;margin:0}

/* player dialog */
.mn dialog{border:0;padding:0;background:transparent;color:var(--off);width:min(760px,100%);max-width:100%;max-height:92vh;margin:auto;font-family:var(--font);font-size:15px;line-height:1.5}
.mn dialog::backdrop{background:rgba(0,0,0,.72)}
.mn .pl{background:#1d1c1b;border:1px solid var(--line);border-radius:16px;overflow:hidden;max-height:92vh;display:flex;flex-direction:column}
.mn .plhead{padding:20px 20px 16px;background:linear-gradient(135deg,#2e2a27,#1d1c1b);border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:16px;align-items:center}
.mn .rank{width:56px;height:56px;border-radius:50%;background:var(--copper);display:grid;place-items:center;font-size:20px;font-weight:900}
.mn .rank.out{background:#3a3a3a}
.mn .plhead h3{font-size:26px;font-weight:900;letter-spacing:-.02em}
.mn .plhead .sub{font-size:12.5px;color:var(--grey);font-weight:600;margin-top:2px}
.mn .x{background:#2e2e2e;border:0;color:var(--off);width:36px;height:36px;border-radius:50%;font-size:18px;cursor:pointer;align-self:start}
.mn .plstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}
.mn .plstats div{padding:12px 16px;border-right:1px solid var(--line)}
.mn .plstats div:last-child{border-right:0}
.mn .plstats b{display:block;font-size:22px;font-weight:900}
.mn .plstats span{font-size:11px;letter-spacing:.12em;font-weight:700;color:var(--grey);text-transform:uppercase}
.mn .plbody{overflow:auto;padding:16px 20px 22px}
.mn .spark{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-size:12px;color:var(--grey);font-weight:600}
.mn .spark svg{flex:1;height:48px;min-width:0;display:block}
.mn .round{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.mn .round summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:14px;align-items:center;padding:12px 14px;background:#232221}
.mn .round summary::-webkit-details-marker{display:none}
.mn .round summary .att{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--grey);width:58px}
.mn .round summary .when{font-size:13.5px;font-weight:700}
.mn .round summary .when .wh{display:block;font-size:11.5px;color:var(--grey);font-weight:600}
.mn .round summary .g{font-size:12px;color:var(--grey);font-weight:700;text-align:right}
.mn .round summary .n{font-size:20px;font-weight:900;min-width:48px;text-align:right}
.mn .round.best{border-color:var(--copper)}
.mn .round.best summary .att{color:var(--copperText)}
.mn .badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;padding:2px 7px;border-radius:4px;background:rgba(247,179,43,.14);color:var(--sun);margin-left:6px;vertical-align:1px}
.mn .sc{padding:14px;background:var(--beige);color:var(--graphite);overflow-x:auto}
.mn .sc table{width:100%;min-width:520px;table-layout:fixed;border-collapse:collapse;font-size:14px;font-weight:600}
.mn .sc th,.mn .sc td{border:1px solid #d7cdbd;text-align:center;padding:7px 0}
.mn .sc th{background:var(--graphite);color:var(--off);font-size:11px;letter-spacing:.1em}
.mn .sc td.l,.mn .sc th:first-child{width:64px}
.mn .sc td.l{text-align:left;padding-left:8px;font-weight:800;font-size:11px;letter-spacing:.1em;color:#6F6A64}
.mn .sc tr.par td{background:#ebe3d6;color:#6F6A64}
.mn .sc .tot{background:var(--graphite);color:var(--off);font-weight:800}
.mn .mk{display:inline-grid;place-items:center;width:28px;height:28px}
.mn .mk.b{border:2px solid var(--copper);border-radius:50%;color:var(--copper)}
.mn .mk.e{border:4px double var(--copper);border-radius:50%;color:var(--copper)}
.mn .mk.bo{border:2px solid #9A9A9A}
.mn .mk.db{border:4px double #9A9A9A}
.mn .scfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11.5px;color:#6F6A64;font-weight:600;margin-top:10px}

@media (max-width:860px){
  .mn .hero{grid-template-columns:1fr}
  .mn .prog{grid-template-columns:1fr}
  .mn .stats,.mn .how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mn .plstats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mn .plstats div:nth-child(2){border-right:0}
  .mn .plstats div:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:560px){
  .mn .round summary{grid-template-columns:minmax(0,1fr) auto}
  .mn .round summary .att,.mn .round summary .g{display:none}
  .mn .season{grid-template-columns:1fr}
}
/* reduced motion: no scroll, so let every item wrap into view instead */
@media (prefers-reduced-motion:reduce){.mn .ticker{white-space:normal}.mn .ticker .track{animation:none;padding:9px 16px;flex-wrap:wrap;gap:6px 32px}}