/* Saints & Aces Clubhouse — shared look.
   Palette lifted from the league-night flyers so the app, the flyers and the
   printed materials read as one program. */
:root{
  --green-900:#0a2415; --green-800:#113c24; --green-700:#1d5c38; --green-600:#1d7a46;

  /* The mark itself. NEVER changes — the badge, the wordmark and the "SAINTS &
     ACES" kicker are the brand and stay gold in every module. */
  --brand-gold:#e3c96b;

  /* The MODULE accent. Everything else that used to be gold follows this, so
     one attribute on <body> recolors a whole page:
        <body data-module="holdem|pickem|trivia">
     A page with no data-module keeps the gold below, which is why the
     commissioner console and the public front door are unchanged.
     --accent-rgb carries the same color as raw channels, for the rgba()
     washes (rules, table borders, the "this is you" row highlight).
     Every value here is contrast-checked against --green-800: the accent and
     soft tones clear AA for body text, and --gold-deep clears it too, which
     matters because that token is used on small uppercase labels. */
  --gold:#e3c96b; --gold-deep:#c9a94e; --gold-soft:#d9c47a;
  --accent-rgb:227,201,107;

  --cream:#f5efdc; --cream-dim:#c9c2ac; --paper:#faf7ee;
  --red:#c0392b; --ink:#0b1a11;
  --line:rgba(var(--accent-rgb),.22);
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--green-900); color:var(--cream);
  font-family:var(--sans); font-size:16px; line-height:1.45;
  -webkit-text-size-adjust:100%;
}
a{color:var(--gold)}
h1,h2,h3{font-family:var(--serif); font-weight:700; margin:0}

.wrap{max-width:760px;margin:0 auto;padding:0 14px 96px}
.wide{max-width:1180px}


/* ---- module accents ----------------------------------------------------
   Deep green, cream and the type never move, so it always reads as one
   program; the accent and the emblem are what tell you which module you are
   standing in. Set data-module on <body> and the whole page follows.
   Contrast vs the card ground (--green-800): accent >= 4.5, deep >= 4.6,
   soft >= 6.0 — all AA for body text. The rust and teal "deep" tones were
   lightened from the obvious choices, which only reached 3.2 and would have
   failed on the small uppercase labels that use them. */
body[data-module="holdem"]{
  --gold:#e3c96b; --gold-deep:#c9a94e; --gold-soft:#d9c47a;
  --accent-rgb:227,201,107;
}
body[data-module="pickem"]{
  --gold:#d98b4a; --gold-deep:#cf9366; --gold-soft:#e8a877;
  --accent-rgb:217,139,74;
}
body[data-module="trivia"]{
  --gold:#5fb3a1; --gold-deep:#58ad9b; --gold-soft:#86ccbc;
  --accent-rgb:95,179,161;
}
/* The module emblem sits beside the module name in the header. */
.mod-emblem{font-size:17px;line-height:1;margin-right:6px}


/* ---- module switcher ----
   Lives in the header of every module page. Without it the only way between
   Hold 'Em and Pick 'Em was a footer link, which nobody found. Each pill wears
   its own module's accent so the colors are learnable from anywhere; the one
   you are standing in is filled. */
.modbar{display:flex;gap:6px;align-items:center;margin-top:9px;flex-wrap:wrap}
.modbar a{
  display:inline-flex;align-items:center;gap:5px;text-decoration:none;
  font-size:12.5px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line);color:var(--cream-dim);white-space:nowrap;
}
.modbar a.on{background:var(--pill);border-color:var(--pill);color:var(--green-900);font-weight:700}
.modbar a.hub{color:var(--brand-gold);border-color:rgba(227,201,107,.3)}


/* ---- hub profile card ----
   The hub opens with the member, not with a list. His name, where his charity
   share goes, and what he has actually done — across every module at once. */
.me-card{
  background:var(--green-800);border:1px solid var(--line);border-radius:12px;
  padding:16px;margin:14px 0 4px;
}
.me-card .nm{font-family:var(--serif);font-size:25px;line-height:1.15}
.me-card .sub2{font-size:12.5px;color:var(--cream-dim);margin-top:3px}
.me-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border-radius:10px;overflow:hidden;margin-top:14px}
.me-stats div{background:var(--green-800);padding:11px 10px;text-align:center}
.me-stats .n{font-family:var(--serif);font-size:21px;color:var(--brand-gold);line-height:1.1}
.me-stats .l{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cream-dim);margin-top:3px}

/* ---- header ---- */
.top{
  position:sticky;top:0;z-index:40;background:var(--green-900);
  border-bottom:1px solid var(--line);padding:12px 14px 10px;
}
.top-in{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px}
.wide .top-in,.top-in.wide{max-width:1180px}
/* The badge mark (sa_badge.svg): cream spade under a gold halo, transparent
   background, so it sits straight on the deep green. No circle behind it —
   the halo is the shape that carries the identity. */
.crest{
  width:36px;height:36px;flex:0 0 36px;
  object-fit:contain;display:block;
}
.brand{font-family:var(--serif);font-size:19px;letter-spacing:.01em}
.kicker{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-gold);opacity:.85}
.who{margin-left:auto;text-align:right;font-size:12.5px;color:var(--cream-dim)}
/* Header Refresh button's glyph while a reload is in flight. */
@keyframes sa-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* The player app's header Refresh. `button.` in the selector is needed to beat
   button.btn's padding. On a narrow phone the word goes and the arrow stays, so
   a long name in .who still fits beside it; the aria-label keeps it readable. */
button.refresh-btn{flex:0 0 auto;margin-left:10px;padding:8px 12px;font-size:13px;
  display:flex;align-items:center;gap:6px;min-height:36px}
.refresh-glyph{display:inline-block;font-size:16px;line-height:1}
@media (max-width:430px){
  .refresh-txt{display:none}
  button.refresh-btn{padding:8px 10px}
}

/* ---- tabs ---- */
.tabs{display:flex;gap:4px;overflow-x:auto;margin-top:10px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;padding:7px 13px;border-radius:999px;border:1px solid var(--line);
  background:transparent;color:var(--cream-dim);font-size:13.5px;cursor:pointer;
  font-family:inherit;white-space:nowrap;
}
.tab.on{background:var(--gold);color:var(--green-900);border-color:var(--gold);font-weight:700}

/* ---- cards ---- */
.card{
  background:var(--green-800);border:1px solid var(--line);border-radius:12px;
  padding:14px;margin:12px 0;
}
.card h2{font-size:17px;margin-bottom:2px}
.sub{font-size:12.5px;color:var(--cream-dim)}

/* ---- game rows ---- */
.game{
  border:1px solid var(--line);border-radius:11px;margin:9px 0;overflow:hidden;
  background:rgba(0,0,0,.14);
}
.game.locked{opacity:.62}
.game-meta{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:6px 11px;font-size:11.5px;color:var(--cream-dim);
  border-bottom:1px solid rgba(var(--accent-rgb),.12);
}
.pill{
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--gold-deep);
}
.pill.live{border-color:var(--red);color:#ff9a8f}
.pill.tb{border-color:var(--gold);color:var(--gold);background:rgba(var(--accent-rgb),.1)}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(var(--accent-rgb),.14)}
.side{
  background:var(--green-800);border:0;padding:12px 10px;text-align:left;
  color:var(--cream);font-family:inherit;font-size:15px;cursor:pointer;
  display:flex;align-items:center;gap:8px;min-height:56px;
}
.side:disabled{cursor:default}
.side .abbr{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--gold-soft);min-width:38px}
.side .nm{flex:1;line-height:1.2}
.side .sc{font-family:var(--serif);font-size:19px;font-weight:700}
.side.picked{background:var(--green-600);color:#fff}
.side.picked .abbr{color:var(--gold)}
.side.win{box-shadow:inset 3px 0 0 var(--gold)}
.side.miss{opacity:.5}
.conf{
  margin-left:auto;background:var(--green-900);border:1px solid var(--line);
  color:var(--gold);border-radius:7px;padding:5px 7px;font-family:inherit;font-size:14px;
}

/* ---- forms + buttons ---- */
input,select,textarea{
  background:var(--green-900);border:1px solid var(--line);color:var(--cream);
  border-radius:8px;padding:9px 10px;font-family:inherit;font-size:15px;width:100%;
}
label{display:block;font-size:12px;color:var(--cream-dim);margin:9px 0 3px}
.row{display:flex;gap:10px}
.row>*{flex:1}
button.btn{
  background:var(--gold);color:var(--green-900);border:0;border-radius:9px;
  padding:12px 16px;font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
}
button.btn:disabled{opacity:.45;cursor:default}
button.ghost{background:transparent;color:var(--gold);border:1px solid var(--line)}
button.danger{background:var(--red);color:#fff}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ---- sticky save bar ----
   Netlify injects a fixed "Powered by Netlify" badge in the bottom-right, and
   on a phone it sits directly on top of the Save button -- the one control the
   whole page exists for. z-index does not help: the badge is a sibling in the
   body with its own stacking. So the bar lifts itself clear of it and keeps
   its right edge free, and iOS home-indicator inset is honored too. */
.savebar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--green-800);
  border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:10px;
}
@media (max-width:700px){
  /* clear the badge: it is roughly 150x36 in the bottom-right corner */
  .savebar{ padding-bottom:calc(46px + env(safe-area-inset-bottom)); }
}
/* If the badge is ever removable in Netlify's site settings, that is the
   cleaner fix and this padding can come back down. */
.savebar .inner{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:10px;width:100%}
.savebar .count{font-size:12.5px;color:var(--cream-dim);flex:1}

/* ---- tables ---- */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:7px 8px;text-align:left;border-bottom:1px solid rgba(var(--accent-rgb),.13)}
th{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-deep);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.me td{background:rgba(var(--accent-rgb),.09)}
tr.me td:first-child{box-shadow:inset 3px 0 0 var(--gold)}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ---- misc ---- */
.msg{padding:10px 12px;border-radius:9px;margin:10px 0;font-size:14px}
.msg.ok{background:rgba(29,122,70,.25);border:1px solid var(--green-600)}
.msg.err{background:rgba(192,57,43,.2);border:1px solid var(--red);color:#ffd6d0}
.msg.warn{background:rgba(var(--accent-rgb),.13);border:1px solid var(--gold-deep)}
.empty{text-align:center;color:var(--cream-dim);padding:26px 10px;font-size:14px}
.big{font-family:var(--serif);font-size:27px;font-weight:700;color:var(--gold)}
.stat{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px}
.stat>div{min-width:88px}
.stat .lbl{font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-deep)}
.medal{font-family:var(--serif);font-weight:700;color:var(--gold)}
.divtag{
  font-size:10.5px;padding:1px 6px;border-radius:999px;
  border:1px solid var(--line);color:var(--gold-soft);white-space:nowrap;
}
.gate{max-width:360px;margin:14vh auto;padding:0 18px;text-align:center}
.gate .crest{width:64px;height:64px;flex:none;margin:0 auto 14px}
.foot{text-align:center;color:var(--cream-dim);font-size:11.5px;padding:22px 0 8px}
@media print{body{background:#fff;color:#000}.top,.tabs,.savebar{display:none}}