/* ===========================================================================
   SQUARES4U V2 — shared stylesheet for the new public frontend.
   Design tokens/components are carried over verbatim from the approved
   Concept A mockups (design-concepts-v2/a-home.html, a-board.html) so V2
   IS that structure, not a re-theme of it. Grid readability and the
   home/side team-identity treatment are intentionally strengthened beyond
   the mockup per the explicit product requirements (bigger digits/initials,
   no rotated axis text).
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Sora:wght@600;700;800&display=swap");

:root{
  --primary:#2554ea; --primary-dark:#173aad; --primary-tint:#e8edfd;
  --navy:#0f1729; --muted:#5b6478;
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f4f7fc; --line:#e6ebf5;
  --green:#0f9d58; --green-tint:#e4f7ea;
  --amber:#d97706; --amber-tint:#fdf1de;
  --gold:#c8860d; --gold-tint:#fbeed1;
  --red:#e11d48;
  --shadow:0 1px 2px rgba(16,23,42,.04), 0 10px 28px -16px rgba(16,23,42,.16);
  --hdr-color:#334155;
  --cell-avail:#ffffff; --cell-border:#e6ebf5; --cell-hover-border:var(--primary);
  --cell-pending:var(--amber-tint); --cell-pending-border:#f3d9a8; --cell-pending-text:#8a5a00;
  --cell-paid:var(--green-tint); --cell-paid-border:#bfe8cd; --cell-paid-text:#0a6b3c;
  --cell-donated:#efe6fb; --cell-donated-border:#c9aef0; --cell-donated-text:#5b2a9e;
  --cell-mine-outline:var(--primary); --cell-win:var(--red);
  --cell-selected-bg:var(--primary); --cell-owner-hover:#dbe6ff;
  /* Board State/Legend Consistency pass: House needs its own distinct
     visual primitive - deliberately NOT yellow/pending, green/paid,
     purple/donated, or blue/mine (a House square is none of those - it
     was never bought, by anyone, ever). Neutral gray/slate reads as
     "administratively covered," not as a product/ownership state.
     House Cell Cleanup pass (3 revisions): a floating "H" badge (v1) was
     too cluttered; a flat solid fill with no content text (v2) read as
     too close to Available - a completed board's House squares showed
     literally nothing where an owned square shows a name, the exact
     ambiguity a buyer complained about. v3 matches what the printable
     Game-Day Board actually does (see .gdb-cell.house in
     v2/game-day-board.html, not shared code but the deliberate visual
     reference): a subtle two-tone diagonal stripe PLUS the word "House"
     printed in the cell's own name/initials slot - two quiet, mutually-
     reinforcing signals, so House reads as "this is House" on sight
     without a tooltip, while still receding behind a real owner's bold
     initials. (A v3.1 also added a small ⌂ corner glyph, matching the
     print board's own ::after treatment more literally, but that read
     as redundant once the stripe + centered label were both in place -
     removed again. The ⌂ still appears inside a House-WINNER's strip
     segment - see .win-seg-house below - a different, still-useful
     signal.) */
  --cell-house:#e7eaf0; --cell-house-stripe:#d7dce4; --cell-house-border:#aab2c2; --cell-house-text:#4b5566;
}
*{box-sizing:border-box;}
.hidden{display:none !important;}
body{margin:0;background:var(--bg);color:var(--navy);font-family:'Inter',system-ui,sans-serif;line-height:1.5;}
h1,h2,h3{font-family:'Sora',sans-serif;margin:0;letter-spacing:-.01em;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px;}
button{font-family:inherit;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:10px;font-weight:700;font-size:15px;border:1px solid transparent;cursor:pointer;}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 6px 16px -6px rgba(37,84,234,.5);}
.btn-primary:hover{background:var(--primary-dark);}
.btn-primary:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);}
.btn-ghost:disabled{opacity:.4;cursor:not-allowed;}
.btn-sm{padding:9px 15px;font-size:13.5px;border-radius:8px;}

/* ---------------- Forms (account/organizer pages) ---------------- */
label{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:5px;}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=tel],input[type=datetime-local],input[type=date],select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:14px;font-family:inherit;color:var(--navy);background:#fff;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:var(--primary);}
.field{margin-bottom:14px;flex:1;min-width:200px;}
.form-row{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:4px;}
.hint-text{font-size:12.5px;color:var(--muted);margin-top:6px;}
/* ---------------- Nav ---------------- */
header.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:16px;}
.brand{display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-weight:800;font-size:18px;flex:none;}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(155deg,var(--primary),#5b8bff);display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;flex:none;}
.nav-links{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:600;color:var(--muted);}
.nav-links a{cursor:pointer;}
.nav-links a:hover{color:var(--navy);}
.nav-actions{display:flex;align-items:center;gap:10px;flex:none;}
.crumb-sep{color:var(--line);}
.crumb-title{font-size:13.5px;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.meBox{font-size:13px;font-weight:700;color:var(--navy);background:var(--surface-2);border:1px solid var(--line);border-radius:100px;padding:8px 14px;cursor:pointer;}

/* ---------------- Hero ----------------
   Ported directly from the approved hero_with_assets.html mockup
   (squares4u_hero_package) - proportions/spacing/structure match that
   reference, not a re-derivation. `data-sport` on .hero is the only hook
   kept for a later sport swap (a different background-image rule + a
   different /v2/assets/*.png - nothing else changes). All featured-card
   internals stay under the pre-existing hc- prefix (never bare .card/
   .stat/.title/.next/.view etc.) because those bare names collide with
   real rules already used elsewhere in this shared stylesheet (.stat is
   the board page's own stat-tile class, .trust is this same homepage's
   own footer trust strip a few sections down) - reusing the mockup's bare
   names verbatim would have silently corrupted both. */
.hero{position:relative;min-height:660px;overflow:hidden;
  background-image:url("/v2/assets/hbg_football.png");
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
}
.hero[data-sport]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.13),rgba(255,255,255,.03));
}
.hero-inner{position:relative;z-index:1;max-width:1280px;margin:0 auto;min-height:660px;
  padding:46px 34px 42px;display:grid;
  grid-template-columns:minmax(360px,.78fr) minmax(610px,1.22fr);
  gap:52px;align-items:center;
}
.hero-copy{padding:10px 0 10px 4px;}
.hero h1{font-size:58px;line-height:.97;margin:0 0 24px;font-weight:900;letter-spacing:-2.2px;max-width:480px;}
.hero h1 .accent{color:var(--primary);}
.hero p.lead{font-size:17px;line-height:1.55;color:#475569;max-width:500px;margin:0 0 24px;}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:24px;}
/* Scoped to the hero's own CTA row only (never the global .btn-ghost used
   everywhere else on the site) - the plain white ghost button read as
   invisible against the bright hero background, so it gets a bit more
   definition here without becoming a second primary/blue button. */
.hero-cta .btn-ghost{
  background:#f6f9ff;border:2px solid #8b98b3;color:var(--navy);
  box-shadow:0 10px 22px -10px rgba(15,23,42,.32), 0 2px 6px -1px rgba(15,23,42,.12);
}
.hero-cta .btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:#fff;}
.trust-strip{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;font-weight:750;color:#334155;}
.trust-item{display:flex;align-items:center;gap:9px;}
.trust-ic{font-size:24px;line-height:1;width:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;}

.hero-card{
  --team-accent:var(--primary);
  background:rgba(255,255,255,.95);border:1px solid rgba(148,163,184,.35);
  border-radius:20px;box-shadow:0 24px 65px rgba(15,23,42,.2);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  padding:22px 22px 18px;overflow:hidden;
}
.hc-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:start;border-bottom:1px solid #edf2f7;padding-bottom:15px;}
/* Team branding, not a small UI icon - fills its reserved corner instead
   of floating small and centered inside it. Anchored top-right; free to
   run alongside the title/subtitle/fundraiser-row height next to it. */
.hc-logo-wrap{display:flex;align-items:flex-start;justify-content:flex-end;padding:0;}
.hc-team-logo{width:250px;height:125px;object-fit:contain;}
.hc-badge{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:#e9f0ff;color:#1f5ee7;padding:7px 11px;border-radius:100px;margin-bottom:8px;}
.hc-title{font-size:24px;font-weight:900;letter-spacing:-.5px;}
.hc-sub{color:#64748b;font-size:13px;margin-top:4px;}
/* Which fundraiser/cause owns this board - real board.fundraiser_name/
   fundraiser_logo_url (see the LEFT JOIN in GET /boards), omitted
   entirely when a board has no fundraiser_id. Squares4U is a fundraising
   product first, so this reads as its own compact identity banner (warm
   gold tint - same --gold/--gold-tint tokens the rest of v2.css already
   defines - deliberately NOT blue, so it doesn't just blend into the
   card's Lions-blue accents/CTA/badge) rather than a line of metadata
   under the campaign title. Still sits before .hc-stats, still doesn't
   touch the team logo/branding beside it. */
.hc-fundraiser-banner{
  display:flex;align-items:flex-start;gap:10px;
  margin-top:10px;padding:8px 12px;
  background:linear-gradient(120deg,var(--gold-tint),#fffdf6);
  border:1px solid #ecd9a8;border-radius:12px;
  min-width:0;
}
/* Clickable variant only (real fundraiser_slug on file) - stays the same
   warm-gold card, just obviously interactive instead of turning into a
   generic blue link (color:inherit/no underline come from the global
   a{} reset already). */
a.hc-fundraiser-banner-link{
  cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
a.hc-fundraiser-banner-link:hover,
a.hc-fundraiser-banner-link:focus-visible{
  border-color:#c9a44e;
  box-shadow:0 0 0 2px rgba(163,118,42,.18);
}
a.hc-fundraiser-banner-link:focus-visible{outline:2px solid #a3762a;outline-offset:2px;}
.hc-fundraiser-logo{height:34px;width:auto;max-width:64px;object-fit:contain;flex:none;}
.hc-fundraiser-icon{font-size:24px;line-height:1;flex:none;}
.hc-fundraiser-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.hc-fundraiser-eyebrow{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#a3762a;}
/* Real fundraiser identity, not disposable metadata - wraps up to 2 lines
   instead of single-line-ellipsis truncating. -webkit-line-clamp is
   supported by every current browser (Chrome/Edge/Firefox/Safari)
   despite the vendor prefix in its name; overflow/text-overflow stay as a
   safety net only for the rare name that would still exceed 2 lines. */
.hc-fundraiser-name{
  font-size:15px;font-weight:800;color:var(--navy);line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;white-space:normal;
}
.hc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:15px 0 18px;border-bottom:1px solid #edf2f7;padding-bottom:15px;}
.hc-stat{text-align:center;padding:4px 8px;border-right:1px solid #edf2f7;}
.hc-stat:last-child{border-right:none;}
.hc-stat b{display:block;font-family:'Sora',sans-serif;font-size:24px;}
.hc-stat small{display:block;margin-top:3px;text-transform:uppercase;font-size:10px;color:#64748b;font-weight:800;letter-spacing:.03em;}
.hc-visual-row{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;align-items:stretch;}
.hc-board-frame{background:#fff;border:1px solid #dce6f2;border-radius:11px;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:245px;}
.hc-board-frame img{display:block;width:100%;height:auto;object-fit:contain;}
.hc-next-game{border-radius:12px;background:#0d1831;color:#fff;padding:16px 12px;display:flex;flex-direction:column;justify-content:center;text-align:center;}
.hc-ng-label{text-transform:uppercase;color:#a9b7d0;font-size:9.5px;font-weight:800;letter-spacing:.04em;}
.hc-ng-matchup{display:flex;flex-direction:column;align-items:center;gap:5px;margin:8px 0;}
.hc-ng-team{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;}
/* Real logo: rendered directly, no white circle/border - just a consistent
   height so Lions/Bears/whoever-is-featured all read at the same scale. */
.hc-ng-team-logo{height:40px;width:auto;max-width:72px;object-fit:contain;flex:none;}
/* No-logo-on-file fallback only (initials need a contained shape to read
   as a badge at all - the "no white circle" note in this pass is about
   the real logos, not this fallback). */
.hc-ng-team-fallback{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;background:#1c2c50;color:#cfd9f0;font-size:11px;font-weight:800;}
.hc-ng-team-name{font-size:13px;font-weight:800;letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:110px;}
.hc-ng-vs{font-size:9.5px;font-weight:800;color:#66739a;letter-spacing:.06em;}
.hc-ng-date{font-size:16px;font-weight:900;margin-top:2px;font-family:'Sora',sans-serif;}
.hc-ng-time{font-size:12px;margin-top:2px;color:#c4cde3;}
.hc-ng-divider{height:1px;background:#2a3856;margin:12px 0;}
.hc-ng-countdown{font-size:27px;line-height:1;font-weight:900;color:#3e8cff;margin-top:2px;font-family:'Sora',sans-serif;}
.hc-ng-countdown-label{font-size:9.5px;color:#91a3c0;margin-top:5px;text-transform:uppercase;letter-spacing:.03em;}
.hc-cta{margin-top:15px;}
.hc-cta .btn{width:100%;padding:13px 16px;font-size:14px;}
.hc-empty{padding:28px 20px;color:var(--muted);font-size:13.5px;line-height:1.6;}

/* ---------------- Sections ---------------- */
.section{padding:52px 0;}
/* Tighter rhythm for just the hero->campaignFeature->boards run (the part
   that read as too sparse) - every other .section (How it Works, the
   trust strip, footer) keeps the normal 52px so nothing else on the page
   shifts. */
#campaignFeature{padding:36px 0;}
#boards{padding-top:36px;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px;flex-wrap:wrap;}
.section-head h2{font-size:27px;}
.section-head p{color:var(--muted);margin-top:6px;font-size:14.5px;}

/* Horizontal "Claim once..." feature band - icon+title / copy / chips in
   one compact row instead of a heading block stacked above a second card
   repeating the same message (that duplication was the "sparse/
   documentation" feel - same existing copy, tighter composition). */
.mg-band{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;background:linear-gradient(120deg,var(--primary-tint),#fbfcff);border:1px solid var(--line);border-radius:20px;padding:22px 28px;}
.mg-band-head{display:flex;align-items:center;gap:14px;}
.mg-band-icon{width:46px;height:46px;border-radius:12px;background:#fff;display:grid;place-items:center;font-size:20px;flex:none;box-shadow:var(--shadow);}
.mg-band-head h2{font-size:21px;max-width:230px;line-height:1.15;}
.mg-band-copy{color:var(--muted);font-size:14px;line-height:1.55;margin:0;max-width:420px;}
.mg-band .mg-chip-row{max-width:270px;justify-content:flex-end;}
.mg-chip-row{display:flex;flex-wrap:wrap;gap:8px;}
.mg-chip{background:#fff;border:1px solid var(--line);font-size:12px;font-weight:700;padding:6px 12px;border-radius:100px;}

.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;}
.type-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:var(--shadow);}
.type-card h3{font-size:18px;margin-bottom:8px;}
.type-card p{color:var(--muted);font-size:14px;margin:0 0 12px;}
.type-card ul{margin:0;padding-left:18px;color:var(--muted);font-size:13.5px;display:flex;flex-direction:column;gap:5px;}

.filter-bar{display:flex;gap:8px;margin-bottom:20px;}
.filter-bar button{border:1px solid var(--line);background:#fff;padding:8px 15px;border-radius:100px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;}
.filter-bar button.active{background:var(--navy);border-color:var(--navy);color:#fff;}

.board-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.bcard{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;transition:transform .15s ease, box-shadow .15s ease;}
.bcard:hover{transform:translateY(-3px);box-shadow:0 16px 34px -18px rgba(16,23,42,.28);border-color:#c9d6f7;}
.bcard-type{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:4px 9px;border-radius:100px;align-self:flex-start;}
.bcard-type.multi{background:var(--primary-tint);color:var(--primary-dark);}
.bcard-type.single{background:var(--green-tint);color:var(--green);}
.bcard h4{font-size:16px;}
.bcard .meta{font-size:12.5px;color:var(--muted);}
.bcard .bar{height:6px;border-radius:100px;background:var(--surface-2);overflow:hidden;}
.bcard .bar i{display:block;height:100%;background:var(--primary);}
.bcard .bar-row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);}
.bcard-foot{display:flex;justify-content:space-between;align-items:center;margin-top:4px;}
.bcard-price{font-family:'Sora',sans-serif;font-weight:700;}
.empty-note{color:var(--muted);font-size:14px;}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;}
.step-num{font-family:'Sora',sans-serif;font-weight:700;font-size:21px;color:var(--primary);margin-bottom:8px;}
.step h4{font-size:14.5px;margin-bottom:6px;}
.step p{font-size:12.5px;color:var(--muted);margin:0;}

.trust{background:var(--surface-2);border-radius:20px;padding:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.trust b{font-family:'Sora',sans-serif;}
.trust-cats{display:flex;gap:22px;flex-wrap:wrap;font-size:13px;color:var(--muted);font-weight:600;}

footer{border-top:1px solid var(--line);padding:30px 0;margin-top:10px;}
.foot-row{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:13px;flex-wrap:wrap;gap:12px;}

/* ---------------- Board context row (page-level, not global header) ---------------- */
.board-context-row{display:flex;align-items:center;gap:8px;padding:14px 0 0;font-size:13.5px;color:var(--muted);font-weight:600;}
.board-context-row .crumb-sep{flex:none;}
.board-context-row .crumb-title{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto;min-width:0;}
.board-context-row #btnShare{flex:none;}

/* ---------------- Board head ---------------- */
.board-head{padding:22px 0 4px;}
.bh-tags{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap;}
.tag{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:5px 10px;border-radius:100px;}
.tag.multi{background:var(--primary-tint);color:var(--primary-dark);}
.tag.single{background:var(--green-tint);color:var(--green);}
.tag.status{background:var(--green-tint);color:var(--green);}
.tag.status.locked{background:var(--amber-tint);color:var(--amber);}
.tag.status.draft{background:var(--surface-2);color:var(--muted);}
.tag.status.paused{background:var(--primary-tint);color:var(--primary-dark);}
.tag.status.gamesales{background:var(--surface-2);color:var(--muted);}

/* Game-Day Board promotion (item 5) - deliberately louder and more
   prominent than any .status-banner variant below: a real supporter
   watching the game should never miss this. Reuses the site's own navy/
   primary palette (same family as .buyer-preview-banner) rather than
   inventing a new color, but keeps its own layout with a real CTA button,
   never a plain text link. Never shown via a hard-coded clock - see
   renderGameDayPromo in board.js, gated on the server's own
   sales.reason==='game_in_progress' / isGameFinal signals. */
.gameday-promo{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin:6px 0 16px;padding:16px 18px;border-radius:14px;
  background:var(--navy, #173aad);color:#fff;
}
.gameday-promo.hidden{display:none;}
.gameday-promo .gdp-eyebrow{font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;opacity:.85;margin-bottom:2px;}
.gameday-promo .gdp-title{font-size:17px;font-weight:800;margin-bottom:2px;}
.gameday-promo .gdp-sub{font-size:13px;opacity:.9;max-width:520px;}
.gameday-promo .btn.btn-primary{background:#fff;color:var(--navy, #173aad);font-weight:800;white-space:nowrap;}
.gameday-promo.recap{background:var(--surface-2);color:var(--navy);border:1px solid var(--line);}
.gameday-promo.recap .btn.btn-primary{background:var(--navy, #173aad);color:#fff;}

.status-banner-stack{display:flex;flex-direction:column;gap:8px;margin:6px 0 16px;}
.status-banner{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.4;}
.status-banner b{font-weight:800;}
.status-banner .sb-detail{display:block;font-weight:500;margin-top:2px;}
.status-banner.paused{background:var(--primary-tint);color:var(--primary-dark);border:1px solid var(--primary);}
.status-banner.locked{background:var(--amber-tint);color:#7a4a00;border:1px solid var(--amber);}
/* Season-game sales state (in progress / season complete / admin-closed) -
   deliberately its own neutral, non-alarming tone, distinct from both the
   blue "paused" notice and the amber "locked" notice - these are three
   different facts about the board and must never be visually merged. */
.status-banner.gamesales{background:var(--surface-2);color:var(--navy);border:1px solid var(--line);}

/* Phase 5D2H: persistent "buyer preview" banner - see #buyerPreviewBanner
   in board.html. Deliberately a strong, unmistakable color (distinct from
   every .status-banner variant above, none of which mean "this is not
   your real admin view") pinned full-width above the page content. */
.buyer-preview-banner{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  padding:10px 16px;font-size:13.5px;font-weight:700;
  background:var(--navy, #173aad);color:#fff;
}
.buyer-preview-banner .btn{background:#fff;color:var(--navy, #173aad);}

/* Board-local unpaid-squares notice - same amber "pending" language as
   .status-banner.locked/.lifecycle-status.locked elsewhere in v2.css, just
   with room for a Pay now button and a secondary link. */
.unpaid-pay-banner{margin:6px 0 16px;padding:14px 16px;background:var(--amber-tint);border:1px solid var(--amber);border-radius:12px;}
.upb-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.upb-title{font-weight:800;font-size:14.5px;color:#7a4a00;}
.upb-squares{font-size:12.5px;color:#8a5a00;margin-top:2px;}
.upb-link{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:var(--primary);}

.bh-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.bh-title-row h1{font-size:25px;}
.bh-meta{color:var(--muted);font-size:14px;margin-top:4px;}
.bh-fundraiser{font-size:13px;color:var(--muted);margin-top:6px;}
.bh-fundraiser b{color:var(--navy);}

.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0 20px;}
.stat{background:var(--surface-2);border-radius:12px;padding:12px 10px;text-align:center;}
.stat b{display:block;font-family:'Sora',sans-serif;font-size:18px;}
.stat span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;}

/* ---------------- Organizer Tools (collapsible - see Launch Blocker
   handoff "organizer board UX cleanup") ----------------
   Collapsed by default so the board stays the primary surface; the whole
   admin-bar/season-panel/reminders trio this replaces used to sit
   permanently expanded above the board, pushing it far down the page. */
.organizer-tools{
  border-color: var(--navy);
  background: var(--surface-2);
  padding: 0;
  margin-bottom: 20px;
  overflow: hidden;
}
.ot-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.ot-toggle-left{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ot-flag{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  background: var(--navy);
  color: #fff;
  padding: 5px 10px;
  border-radius: 100px;
  flex: none;
}
.ot-summary{ font-size:13px; font-weight:600; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap; }
.ot-summary b{ color:var(--navy); }
.ot-chevron{ color:var(--muted); font-size:11px; transition:transform .15s ease; flex:none; }
.ot-toggle[aria-expanded="true"] .ot-chevron{ transform:rotate(180deg); }
.ot-body{ padding:0 18px 18px; border-top:1px solid var(--line); }
.ot-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin:14px 0 16px; }
.ot-tab{
  border:1px solid var(--line); background:#fff; padding:7px 14px;
  border-radius:100px; font-size:12.5px; font-weight:700; color:var(--muted);
  cursor:pointer; font-family:inherit;
}
.ot-tab.active{ background:var(--navy); border-color:var(--navy); color:#fff; }
.ot-panel h5{ font-size:13px; margin:0 0 10px; color:var(--navy); }
.ot-field-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; }
.ot-field{ display:flex; flex-direction:column; gap:4px; min-width:140px; }
.ot-field label{ margin:0; }
.ot-note{ font-size:12.5px; color:var(--muted); margin:2px 0 12px; }
.admin-note{
  font-size: 12.5px;
  color: var(--muted);
}
.admin-error{
  margin-top: 10px;
  font-size: 13px;
  color: var(--red);
  background: #fdecee;
  border: 1px solid #f6c6cc;
  border-radius: 8px;
  padding: 8px 12px;
}

/* Compact score-entry table (Scores tab) - one screen for all four
   periods instead of switching period chips and scrolling repeatedly. */
.score-table{ width:100%; border-collapse:collapse; margin-bottom:14px; }
.score-table th,.score-table td{ padding:8px 6px; text-align:center; border-bottom:1px solid var(--line); }
.score-table th{ font-size:10.5px; text-transform:uppercase; letter-spacing:.02em; color:var(--muted); font-weight:700; }
.score-table td:first-child,.score-table th:first-child{ text-align:left; font-weight:700; color:var(--navy); }
.score-table input{ width:64px; padding:7px; border:1px solid var(--line); border-radius:8px; text-align:center; font-family:inherit; }
.winner-list{ margin-bottom:6px; }
.winner-row{ display:flex; justify-content:space-between; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); font-size:13px; }
.winner-row:last-child{ border-bottom:none; }

/* ---------------- Payment reminders (Milestone 4A) ---------------- */
.reminders-summary-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:13.5px; font-weight:800; color:var(--navy); cursor:pointer;
  padding:2px 0 10px;
}
.reminders-summary-state{ font-size:12.5px; font-weight:700; color:var(--muted); }
.reminders-body{ padding-top:6px; border-top:1px solid var(--line); }
.toggle-row{
  display:flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color:var(--navy);
  margin-bottom:10px; cursor:pointer;
}
.toggle-row input{ flex:none; width:16px; height:16px; margin:0; }
.reminders-hours-row{
  display:flex; align-items:center; gap:10px;
  margin: 0 0 14px 24px;
}
.reminders-hours-row label{ font-size:12.5px; color:var(--muted); }
.reminders-hours-row input{
  width:80px; border:1px solid var(--line); border-radius:8px;
  padding:6px 8px; font-size:13px; font-family:inherit;
}
/* Auto-unclaim can release an unpaid square with no further admin action -
   styled as a distinct warning block (not just another checkbox row) so
   its consequence is visible before it's ever turned on. */
.reminders-danger{
  border:1px solid #f6c6cc;
  background:#fdecee;
  border-radius:10px;
  padding:12px 14px;
  margin: 4px 0 16px;
}
.reminders-danger .toggle-row{ color:var(--red); margin-bottom:6px; }
.reminders-danger-copy{ font-size:12px; color:#8a2a37; line-height:1.5; margin:0 0 10px; }
.reminders-danger .reminders-hours-row{ margin-left:24px; margin-bottom:0; }
.reminders-actions{ display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.reminders-status{ font-size:12.5px; color:var(--muted); }
.reminders-help{ font-size:12px; color:var(--muted); margin:2px 0 0; }

/* ---------------- Payment modal (V2-native, app/v2/app/pay_modal.js) ----------------
   pay_modal.js builds its content into #paySummary and toggles this
   element's `hidden` class directly (not V2's usual .modal-overlay/.open
   pattern - kept for drop-in compatibility with the legacy behavioral
   contract it copies). Presentation only - see pay_modal.js for the
   preserved claim/donate/redirect behavior. */
#payModal{
  position:fixed;inset:0;z-index:130;
  background:rgba(15,23,41,.55);
  display:flex;align-items:flex-start;justify-content:center;
  padding:20px;overflow-y:auto;
}
#payModal.hidden{display:none !important;}
#payModal .pay-card{
  position:relative;
  width:min(520px,96vw);
  margin:auto;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 30px 60px -20px rgba(16,23,42,.35);
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  padding:26px;
}
#payModal .pay-close{
  position:absolute;top:14px;right:14px;
  background:transparent;border:none;color:var(--muted);font-size:20px;line-height:1;
  cursor:pointer;padding:8px;border-radius:8px;
}
#payModal .pay-close:hover{background:var(--surface-2);color:var(--navy);}

.pay-header h3{margin:0 0 18px;font-size:19px;text-align:center;color:var(--navy);}

.pay-summary-card{background:var(--surface-2);border-radius:12px;padding:14px 16px;margin-bottom:16px;}
.pay-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);padding:4px 0;}
.pay-row b{color:var(--navy);font-weight:600;}
.pay-total-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:10px;border-top:1px solid var(--line);font-size:16.5px;font-weight:800;color:var(--navy);}
.pay-total-row b{font-family:'Sora',sans-serif;color:var(--primary);}

.pay-donate-callout{display:flex;gap:10px;align-items:flex-start;background:var(--primary-tint);border:1px solid #cfdcfb;border-radius:10px;padding:12px 14px;margin-bottom:16px;cursor:pointer;}
.pay-donate-callout input{margin-top:2px;flex:none;}
.pay-donate-title{font-weight:700;font-size:13px;color:var(--primary-dark);}
.pay-donate-sub{font-size:11.5px;color:var(--muted);margin-top:2px;}

.pay-intro{font-size:12.5px;color:var(--muted);text-align:center;line-height:1.6;margin:0 0 16px;}
.pay-intro strong{color:var(--navy);}

.pay-methods-head{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:10px;text-align:center;}
.pay-methods{display:grid;gap:14px;margin-bottom:18px;}
.pay-methods-2{grid-template-columns:1fr 1fr;}
.pay-methods-1{grid-template-columns:minmax(0,240px);justify-content:center;}
.pay-method{border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;min-width:0;}
.pay-method-name{font-weight:700;font-size:13px;margin-bottom:8px;color:var(--navy);}
.pay-qr{width:100%;max-width:160px;height:auto;border-radius:8px;margin:0 auto 8px;display:block;background:var(--surface-2);aspect-ratio:1;}
.pay-method-handle{font-size:11.5px;color:var(--muted);margin-bottom:10px;word-break:break-all;}
.pay-method-btn{width:100%;border:none;font-weight:700;}
.pay-method-btn.venmo{background:var(--green);color:#fff;}
.pay-method-btn.venmo:hover{opacity:.9;}
.pay-method-btn.paypal{background:var(--primary);color:#fff;}
.pay-method-btn.paypal:hover{background:var(--primary-dark);}

.pay-no-methods{font-size:12.5px;color:var(--muted);text-align:center;background:var(--surface-2);border-radius:10px;padding:14px;margin-bottom:16px;line-height:1.6;}
.pay-no-methods strong{color:var(--navy);}

.pay-note{margin-bottom:18px;}
.pay-note-label{font-size:11.5px;font-weight:700;color:var(--muted);margin-bottom:6px;}
.pay-note-box{display:flex;align-items:center;gap:8px;background:var(--surface-2);border-radius:9px;padding:9px 12px;font-size:12px;color:var(--navy);}
.pay-note-box span{flex:1;word-break:break-word;}
.pay-note-copy{flex:none;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px 10px;font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;}
.pay-note-copy:hover{border-color:var(--primary);color:var(--primary);}

.pay-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

@media (max-width:520px){
  #payModal .pay-card{padding:20px 16px;}
  .pay-methods-2{grid-template-columns:1fr;}
}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;padding-bottom:110px;align-items:start;}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:20px;min-width:0;}

.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:14px;min-width:0;}
.chip-row:empty{display:none;margin:0;}
.chip{flex:none;border:none;padding:9px 14px;border-radius:9px;background:var(--surface-2);font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;}
.chip.active{background:var(--primary);color:#fff;}
.chip.period-chip.active{background:var(--navy);}
.chip-status{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:100px;font-size:10px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:rgba(255,255,255,.55);color:var(--muted);}
.chip.active .chip-status{background:rgba(255,255,255,.28);color:#fff;}
.chip-status-current{background:var(--primary-tint);color:var(--primary-dark);}
.chip.active .chip-status-current{background:rgba(255,255,255,.9);color:var(--primary-dark);}
.chip-status-final{background:var(--green-tint);color:var(--green);}
.chip-status-numbers-ready{background:var(--amber-tint);color:var(--amber);}

.grid-meta-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12.5px;color:var(--muted);gap:10px;flex-wrap:wrap;}
.grid-meta-row b{color:var(--navy);}

/* ---------------- Game lifecycle status (Claimed/Paid, Claimed/Unpaid, Available inventory + countdown) ---------------- */
/* Renamed from .ls-confirmed (Lions board ghost-confirmed-count
   investigation, 2026-09-11) - this line no longer shows the old
   lock-trigger "confirmed" number, so the class name shouldn't say
   "confirmed" either. See board.js's renderGameLifecycleStatus. */
.lifecycle-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 14px;margin-bottom:12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:12.5px;color:var(--muted);}
.lifecycle-status.hidden{display:none;}
.lifecycle-status .ls-inventory{font-weight:600;color:var(--navy);}
.lifecycle-status .ls-inventory b{font-weight:800;}
.lifecycle-status .ls-inventory .ls-sep{margin:0 6px;opacity:.5;font-weight:400;}
.lifecycle-status .ls-state{font-weight:800;letter-spacing:.02em;color:var(--navy);}
.lifecycle-status .ls-countdown-row b{color:var(--navy);font-weight:800;}
.lifecycle-status.pending{border-color:var(--primary);background:var(--primary-tint);color:var(--primary-dark);}
.lifecycle-status.pending .ls-inventory,.lifecycle-status.pending .ls-countdown-row b{color:var(--primary-dark);}
.lifecycle-status.locked{border-color:var(--amber);background:var(--amber-tint);color:#7a4a00;}
.lifecycle-status.locked .ls-inventory,.lifecycle-status.locked .ls-state{color:#7a4a00;}
.lifecycle-status.final{border-color:var(--green);background:var(--green-tint);color:var(--green);}
.lifecycle-status.final .ls-inventory,.lifecycle-status.final .ls-state{color:var(--green);}

/* ---------------- Grid ---------------- */
.grid-wrap{display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto 1fr;gap:8px;}

/* Away/top axis: horizontal, strong, team-colored - stays instantly readable */
.axis-label.away{
  grid-column:2;grid-row:1;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:15px;color:#fff;
  background:linear-gradient(90deg, var(--away-primary, #475569), var(--away-secondary, #1e293b));
  border-radius:10px;padding:10px 14px;
}
/* Home/side axis: NO rotated text - a compact non-rotated stacked block
   (monogram badge + short wrapped name) so it stays readable at a glance,
   per the explicit requirement to avoid tiny sideways text. */
.axis-label.home{
  grid-column:1;grid-row:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#fff;
  background:linear-gradient(180deg, var(--home-primary, #475569), var(--home-secondary, #1e293b));
  border-radius:10px;padding:10px 4px;height:100%;
}
.axis-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;
  background:rgba(0,0,0,.22);border:2px solid rgba(255,255,255,.6);
  font-weight:900;font-size:12px;flex:none;
}
.axis-mark.has-logo{background:transparent;border:none;}
.axis-label.away .axis-mark{width:40px;height:40px;font-size:11px;}
.team-logo-img{width:100%;height:100%;object-fit:contain;}
.axis-label.home .axis-name{
  font-size:10.5px;font-weight:800;line-height:1.15;text-align:center;
  word-break:break-word;max-width:100%;
}
.axis-label.away .axis-name{font-size:14px;font-weight:800;}

#grid10{grid-column:2;grid-row:2;min-width:0;}

.s4u-grid{
  display:grid;
  gap:5px;
  width:100%;
}
.s4u-grid .hdr{
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:900;color:var(--hdr-color, #334155);
  background:var(--hdr-bg, var(--surface-2));
  border-radius:6px;
}
.s4u-grid .hdr.away-axis{ background:color-mix(in srgb, var(--away-primary, #94a3b8) 18%, var(--surface-2)); }
.s4u-grid .hdr.home-axis{ background:color-mix(in srgb, var(--home-primary, #94a3b8) 18%, var(--surface-2)); }
.s4u-grid .hdr.corner{ background:transparent; }
.s4u-grid .cell{
  position:relative;
  aspect-ratio:1;
  border-radius:8px;
  border:1px solid var(--cell-border, #e5e7eb);
  background:var(--cell-avail, #fff);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;
  cursor:pointer;
  font-family:inherit;
  padding:0;
  transition:transform .1s ease, box-shadow .12s ease, background .12s ease;
  /* Lets the House label/icon and the winning-cell strip (below) size
     themselves in cqw (% of THIS cell's own width) so they stay
     reasonably scaled across the real range of cell sizes this board
     renders at, without depending on the viewport. aspect-ratio:1 keeps
     height in step with width, so cqw alone covers both dimensions.
     Owner initials/the square number are NOT sized this way - they stay
     the plain fixed sizes below in every state, winning or not. */
  container-type:inline-size;
}
/* Square number: secondary. Owner initials: the dominant thing on the cell. */
.s4u-grid .cell .n{ font-size:9.5px; opacity:.55; line-height:1; font-weight:600; }
.s4u-grid .cell .init{ font-size:15px; font-weight:900; line-height:1.1; margin-top:1px; }
.s4u-grid .cell.avail:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.25);
  border-color:var(--cell-hover-border, var(--primary, #2554ea));
}
/* Sales closed: available squares stay visible but read as unselectable */
.s4u-grid.sales-closed .cell.avail{ cursor:default; opacity:.55; }
.s4u-grid.sales-closed .cell.avail:hover{ transform:none; box-shadow:none; border-color:var(--cell-border, #e5e7eb); }
.s4u-grid .cell.pending{
  background:var(--cell-pending, #fdf1de);
  border-color:var(--cell-pending-border, #f3d9a8);
  color:var(--cell-pending-text, #8a5a00);
}
.s4u-grid .cell.paid{
  background:var(--cell-paid, #e4f7ea);
  border-color:var(--cell-paid-border, #bfe8cd);
  color:var(--cell-paid-text, #0a6b3c);
}
/* Board State/Legend Consistency pass: donation is a SOURCE/type, not a
   payment-status replacement (see squareStatusClass in board.js). A
   pending/unpaid donation now keeps the SAME yellow fill an ordinary
   unpaid claim gets - base fill always reflects PAYMENT STATUS; the
   DONATED badge (below) is what distinguishes it, not a different color.
   Only PAID + donated gets its own distinct purple fill via this compound
   selector (2-class specificity always wins over the plain .paid rule,
   regardless of source order) - an intentional, narrow exception
   signaling "this was a donation, no further payment is ever expected,"
   never used for the pending case. The old bare `.cell.donated` rule that
   forced purple even while still pending is gone; `.donated` alone
   (paired with `.pending`, never with `.paid`) sets no background/
   border/color of its own - it exists only as a marker class for
   admin-mode cursor/hover (below) and for badge logic to key off of. */
.s4u-grid .cell.paid.donated{
  background:var(--cell-donated, #efe6fb);
  border-color:var(--cell-donated-border, #c9aef0);
  color:var(--cell-donated-text, #5b2a9e);
}
.s4u-grid .cell.house{
  background:repeating-linear-gradient(
    45deg,
    var(--cell-house, #e7eaf0) 0 8px,
    var(--cell-house-stripe, #d7dce4) 8px 16px
  );
  border-color:var(--cell-house-border, #aab2c2);
  color:var(--cell-house-text, #4b5566);
  cursor:default;
}
.s4u-grid .cell.house:hover{
  transform:none; box-shadow:none; border-color:var(--cell-house-border, #aab2c2);
}
/* The word "House" in the SAME slot a real owner's initials occupy -
   matching the printable Game-Day Board's own .gdb-cell.house .nm
   ("House" as the cell's displayed name, not a corner badge). Slightly
   smaller than .init's 15px (a 5-letter word needs more of the cell's
   width than 2-3 initials) and italic - reads as a label/placeholder,
   not a real buyer's name, while still being the dominant text in the
   cell exactly like a real name would be. */
.s4u-grid .cell.house .house-label{
  font-size:clamp(8px, 24cqw, 12px);
  font-weight:800;
  font-style:italic;
  color:var(--cell-house-text, #4b5566);
  line-height:1.1;
  margin-top:1px;
}
.s4u-grid .cell.mine{
  outline:3px solid var(--cell-mine-outline, var(--primary, #2554ea));
  outline-offset:-1px;
}
.s4u-grid .cell.selected{
  background:var(--cell-selected-bg, var(--primary, #2554ea)) !important;
  border-color:var(--cell-selected-bg, var(--primary, #2554ea)) !important;
  color:#fff !important;
}
.s4u-grid .cell.selected .n{ opacity:.75; color:#fff; }
/* Winner ring: --cell-win is set inline per cell (see renderGrid() in
   board.js) to that square's own winning period's color - Q1 green, Q2
   blue, Q3 orange, Q4/Final purple, matching the payout card exactly. The
   #e11d48 fallback only ever shows if a caller forgets to set it. A square
   winning the currently-selected period gets the full-strength ring below;
   .win-other is the reduced-weight ring for a square whose win belongs to
   a period OTHER than the one currently selected - still clearly visible,
   just not competing with the active period's emphasis (req: previous/
   other period winners must remain identifiable, not just the active one). */
.s4u-grid .cell.win{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--cell-win, #e11d48);
}
.s4u-grid .cell.win-other{
  box-shadow:0 0 0 2px #fff, 0 0 0 3px var(--cell-win, #e11d48);
}
/* Winning-Cell Readability pass: the previous "Winner Badge Containment"
   fix technically stopped a corner badge from crossing the cell edge by
   shrinking it - font-size down to ~5-6.5px and a winning cell's own
   initials down to ~10-13px - which solved overlap by making the winner
   indicator (and the initials fighting it for space) too small to read
   on the real production board. A winning cell is explicitly allowed its
   own internal layout instead of fighting a floating corner badge for
   the same centered space: number on top (unchanged size), owner
   initials or "House" in the middle (COMPLETELY UNCHANGED from an
   ordinary cell's size - no shrinking), and a full-width colored winner
   strip along the bottom, in its own horizontal band with the cell's
   whole width to work with - so the period label can be sized for
   reading, not merely for not-overlapping. */
.s4u-grid .cell.win,
.s4u-grid .cell.win-other{
  justify-content:space-between;
  padding-top:3px;
}
/* Multiple periods can win the same square (rare but real - see
   winnersByCell in board.js) - the strip splits into one segment per
   win, each in that period's own color, instead of wrapping badges into
   a shrinking stack. A NORMAL FLOW row (not position:absolute) at the
   end of the cell's own flex column, so it structurally cannot cross
   the cell's edge - containment comes from layout, not from shrinking
   text below a legible floor. cqw keeps the label size responsive to
   the cell's actual rendered size (a season board's own fixed-width
   axis column can still produce ~40px cells at ordinary desktop
   widths) with a MUCH higher floor than the previous pass - 8px
   minimum, never the ~5px that read as illegible.
   3-4 simultaneous wins on one square wrap to a second row (flex-basis
   40% means at most 2 segments fit per row) rather than staying in one
   row and squeezing each label past the point of being readable - a
   real "Q1" fits comfortably at 2-per-row width where it would
   truncate at 4-per-row. This is one of the stacked/wrapped multi-win
   layouts the correction explicitly asked to evaluate, chosen because
   it keeps every segment at the SAME readable font-size regardless of
   how many periods a square won, rather than a single unbroken line
   that must shrink text as more periods are added. */
.win-strip{
  display:flex;flex-wrap:wrap;
  width:100%;
  gap:1px;
  border-radius:0 0 6px 6px;
  overflow:hidden;
}
.win-seg{
  flex:1 1 40%;
  min-width:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--cell-win, #e11d48);color:#fff;
  font-weight:800;
  font-size:clamp(8px, 26cqw, 10.5px);
  padding:clamp(1.5px, 6cqw, 3px) 1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.01em;
}
.win-seg.win-seg-active{
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);
}
/* A "House"/kickoff-house win (source:"kickoff_fill" - the square was
   unsold at that game's kickoff and was automatically covered) stays the
   period's own color but reads as visually distinct from a real buyer's
   win - a dashed border, same spirit as .cell.donated's own distinct
   treatment elsewhere on this page, never the same look as a real win or
   a donation. The segment's own "⌂ " text prefix (set in board.js,
   unchanged) is the primary signal; this border reinforces it. */
.win-seg.win-seg-house{
  border:1.5px dashed rgba(255,255,255,.9);
}
/* "House" label in the admin Scores tab's winner list - a distinct,
   muted treatment (not the donated-square purple, not a plain name) so a
   kickoff-house win is never visually confused with a real buyer or an
   intentional donation. */
.winner-house{
  font-weight:800;color:var(--muted);border-bottom:1px dashed var(--muted);
  cursor:help;
}

/* Admin View: claimed squares become tappable to toggle paid/unpaid - the
   existing pending/paid colors already carry the state, this just makes
   the affordance discoverable without adding a permanent icon everywhere. */
.s4u-grid.admin-mode .cell.pending,
.s4u-grid.admin-mode .cell.paid,
.s4u-grid.admin-mode .cell.donated{
  cursor:pointer;
}
.s4u-grid.admin-mode .cell.pending:hover,
.s4u-grid.admin-mode .cell.paid:hover,
.s4u-grid.admin-mode .cell.donated:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 10px -4px rgba(0,0,0,.35);
}
.paid-badge{
  position:absolute;bottom:-6px;left:-6px;
  width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  background:var(--green);color:#fff;
  font-size:10px;font-weight:900;border-radius:50%;
  border:2px solid #fff;
  line-height:1;
}
.s4u-grid .cell.owner-hover:not(.selected){
  background:var(--cell-owner-hover, rgba(37,84,234,.16)) !important;
  border-color:var(--primary, #2554ea);
}

/* Phase 4D: single-game personalized states. .sg-held (a hold, not a
   claim - no payment/fill state to represent) keeps its own dashed-
   outline visual language. Buyer-consistency pass (Phase 2): the old
   .sg-owned solid-blue fill was removed - an owned_by_me SG square now
   renders through the SAME .pending/.paid fill + .mine outline as every
   other claim type (see board.js), so it no longer needs a class here. */
.s4u-grid .cell.sg-held{
  outline:2px dashed var(--amber, #d97706);
  outline-offset:-1px;
}
.sg-badge{
  position:absolute;top:-6px;left:-6px;
  background:var(--primary, #2554ea);color:#fff;
  font-size:7.5px;font-weight:800;letter-spacing:.03em;
  padding:2px 5px;border-radius:6px;line-height:1.3;
  white-space:nowrap;
  box-shadow:0 0 0 2px #fff;
}
.sg-badge.sg-badge-hold{
  background:var(--amber, #d97706);
}
/* Board State/Legend Consistency pass: same corner-badge visual pattern
   .sg-badge already uses (position/size/padding/shadow), reused so the
   grid has ONE consistent "scope/type marker" language rather than a
   second invented style. Only ever shown on a PENDING donated square -
   a paid one is already visually distinct via its own purple fill (see
   .cell.paid.donated above), so no badge is needed there. Campaign-only
   (a donation is never SG), so this can never collide with .sg-badge on
   the same cell. */
.donated-badge{
  position:absolute;top:-6px;left:-6px;
  background:var(--muted, #5b6478);color:#fff;
  font-size:7.5px;font-weight:800;letter-spacing:.03em;
  padding:2px 5px;border-radius:6px;line-height:1.3;
  white-space:nowrap;
  box-shadow:0 0 0 2px #fff;
}
/* Buyer-consistency pass (Phase 2): the organizer's admin-only view of
   ANOTHER buyer's SG claim (see activeSgClaimAt/resolveEffectiveClaim in
   board.js) now reuses the same .pending/.paid fill AND the same .sg-badge
   "GAME" tag a buyer's own square uses, instead of a separate .sg-scope-badge
   "SG" tag - one common visual language for scope regardless of whose
   square it is. */
/* UX pass (2026-09-10, item 6): offline-claim purchase-type selector -
   two always-visible cards (never a dropdown - there are only ever two
   meaningful choices), selected state unmistakable via border+background+
   a filled radio dot, not just a color-weight difference like the old
   btn-primary/btn-ghost pair. */
.of-mode-selector{
  display:flex; gap:8px; margin-bottom:10px;
}
.of-mode-card{
  flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  padding:10px 30px 10px 12px; border:2px solid var(--line, #e5e7eb); border-radius:10px;
  background:#fff; cursor:pointer; text-align:left; position:relative;
  font-family:inherit;
}
.of-mode-card:hover{ border-color:var(--cell-hover-border, var(--primary, #2554ea)); }
.of-mode-check{
  position:absolute; top:10px; right:10px; width:16px; height:16px;
  border-radius:50%; border:2px solid var(--line, #cbd5e1); background:#fff;
}
.of-mode-card.selected{
  border-color:var(--primary, #2554ea);
  background:var(--primary-tint, #e8edfd);
}
.of-mode-card.selected .of-mode-check{
  border-color:var(--primary, #2554ea);
  background:var(--primary, #2554ea);
  box-shadow:inset 0 0 0 3px #fff;
}
.of-mode-label{ font-weight:800; font-size:12px; color:var(--navy, #1a2b4a); letter-spacing:.01em; }
.of-mode-price{ font-weight:700; font-size:14px; color:var(--primary, #2554ea); }
/* Phase 4E: the one case an owned_by_me badge is itself clickable (an
   eligible upgrade-to-full-season opportunity) - a thin light ring is the
   only visual difference from a plain, inert owned_by_me badge. */
.sg-badge.sg-badge-upgradeable{
  box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--primary, #2554ea);
}

/* Phase 5D2H: restrained "Two ways to play" discoverability band - a
   small, read-only comparison shown between the primary stat row and the
   Choose Your Square button (see #sgBand in board.html, renderSgBand in
   board.js). Deliberately NOT a second call to action - the actual choice
   still happens in the #singleGameChoiceModal below when a buyer clicks
   an eligible square. Only ever shown when single-game sales are enabled
   and a current SG game exists. */
.sg-band{
  display:flex;gap:10px;align-items:stretch;
  margin:0 0 16px;padding:12px 14px;
  border:1.5px dashed var(--line, #e5e7eb);border-radius:12px;
  background:var(--surface-2, #f6f7fb);
}
.sg-band-title{
  font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);margin-bottom:8px;
}
.sg-band-options{display:flex;gap:10px;flex:1;}
.sg-band-option{flex:1;min-width:0;}
.sg-band-option-label{font-size:12px;font-weight:800;color:var(--navy, #173aad);}
.sg-band-option-price{font-family:'Sora',sans-serif;font-size:15px;font-weight:800;margin:2px 0;}
.sg-band-option-detail{font-size:11.5px;color:var(--muted);line-height:1.35;}

@media (max-width:600px){
  .sg-band{flex-direction:column;}
  .sg-band-options{flex-direction:column;gap:10px;}
}

/* Phase 4D: full-season vs this-game-only purchase choice, shown inside
   #singleGameChoiceModal (same .modal-overlay/.modal-card shell every
   other board modal already uses - see v2.css's own .modal-* rules
   above). Two large, unambiguous tap targets - never a dropdown or
   radio group, to stay thumb-friendly on mobile (Phase 4D section 16). */
.sg-choice-options{display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.sg-choice-option{
  display:flex;flex-direction:column;align-items:stretch;gap:4px;
  width:100%;text-align:left;
  padding:14px 16px;border-radius:12px;
  border:1.5px solid var(--line, #e5e7eb);background:var(--surface-2, #f6f7fb);
  font-family:inherit;cursor:pointer;
  transition:border-color .12s ease, background .12s ease;
}
.sg-choice-option:hover{
  border-color:var(--primary, #2554ea);
  background:var(--primary-tint, #e8edfd);
}
.sg-choice-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sg-choice-label{font-size:14px;font-weight:700;}
.sg-choice-price{font-family:'Sora',sans-serif;font-size:16px;font-weight:800;color:var(--primary-dark, #173aad);white-space:nowrap;}
/* Phase 5D2H: the "same square for all games / N chances" bullets under
   each option's label+price, and the retention/credit explanatory note
   below both options - see openSingleGameChoiceModal in board.js. */
.sg-choice-details{margin:2px 0 0;padding:0;list-style:none;font-size:12px;color:var(--muted);line-height:1.5;}
.sg-choice-note{font-size:12px;color:var(--muted);line-height:1.5;margin-bottom:18px;}
.sg-choice-note b{color:var(--navy, #173aad);}

@media (max-width:520px){
  .sg-choice-option{padding:12px 14px;}
  .sg-choice-label{font-size:13px;}
  .sg-choice-price{font-size:14px;}
  .sg-choice-details{font-size:11.5px;}
  .grid-wrap{grid-template-columns:44px minmax(0,1fr);}
  .s4u-grid .cell .n{ display:none; }
  .s4u-grid .cell .init{ font-size:12px; }
  .s4u-grid .hdr{ font-size:12px; }
  .axis-mark{width:26px;height:26px;font-size:10px;}
  /* nav-actions (Share/name/Log out) and claim-actions (Clear/Donate/
     Continue - N squares) are both flex:none rows sized to their content;
     the dynamic "Continue — N squares" label and the added Log out button
     can together be wider than a narrow viewport, which forces the whole
     page wider instead of wrapping. Let both wrap here instead. */
  .nav-row{flex-wrap:wrap; row-gap:8px;}
  /* flex:none (base rule) sets flex-shrink:0, so without an explicit
     flex-basis here nav-actions keeps its unwrapped content width even
     once it's alone on its own wrapped nav-row line - flex-wrap on itself
     never gets a narrower box to wrap its buttons into. flex:1 1 100%
     forces it to take (and shrink to) the full line width instead. */
  .nav-actions{flex:1 1 100%; flex-wrap:wrap; justify-content:flex-end; row-gap:8px;}
  .claim-actions{flex-wrap:wrap; justify-content:flex-end; row-gap:8px;}
}

.legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);font-size:12px;color:var(--muted);}
.legend span{display:flex;align-items:center;gap:6px;}
.sw{width:12px;height:12px;border-radius:4px;border:1px solid var(--line);flex:none;}
/* Board State/Legend Consistency pass: a swatch standing in for a BADGE
   (GAME/KEEP/DONATED) rather than a fill color - same 12x12 footprint as
   .sw, but a solid color with a single centered letter so it reads as
   "this is a marker, not a fill" at a glance. */
.legend-marker-sw{
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:8px;font-weight:800;border:none;
}
/* Winner legend entry: 4 small period-color dots read as one compact
   "winner" icon instead of 4 separate legend rows. */
.legend-winner .sw-period{width:9px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.6);margin-right:-3px;}
.legend-winner .sw-period:last-of-type{margin-right:6px;}

.info-drawer summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--primary);margin-top:14px;}
.info-drawer summary::-webkit-details-marker{display:none;}
.info-drawer[open] summary{margin-bottom:8px;}
.info-drawer p{font-size:12.5px;color:var(--muted);margin:0;line-height:1.6;}
.info-drawer p + p{margin-top:6px;}

.side-block{margin-bottom:16px;}
.side-block h4{font-size:13.5px;margin-bottom:10px;}
.fact-row{display:flex;justify-content:space-between;font-size:13px;padding:7px 0;border-bottom:1px dashed var(--line);color:var(--muted);}
.fact-row b{color:var(--navy);}
.payout-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;padding:8px 10px;background:var(--surface-2);border-radius:8px;margin-bottom:6px;border-left:3px solid var(--payout-color, var(--primary));}
.payout-row b{font-family:'Sora',sans-serif;}
.payout-total{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.6;}
.payout-total b{color:var(--navy);}

.claim-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);box-shadow:0 -8px 24px -14px rgba(16,23,42,.2);padding:14px 0;}
.claim-bar-row{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;}
.claim-info{font-size:13.5px;color:var(--muted);}
.claim-info b{font-family:'Sora',sans-serif;font-size:17px;color:var(--navy);}
.claim-actions{display:flex;gap:10px;}

/* ---------------- Modals ---------------- */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,41,.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
.modal-overlay.open{display:flex;}
/* Defensive: keep confirmation dialogs above any other modal that might be
   open behind them, regardless of DOM order. */
#adminConfirmModal{z-index:110;}
.modal-card{background:#fff;border-radius:16px;max-width:420px;width:100%;padding:26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
.modal-card h3{font-size:19px;margin-bottom:10px;}
.modal-card p{color:var(--muted);font-size:14px;margin:0 0 18px;line-height:1.6;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;align-items:center;}
.share-links{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.share-link-row{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);border-radius:9px;padding:9px 12px;font-size:12.5px;color:var(--muted);gap:10px;}
.share-link-row code{color:var(--navy);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.form{display:flex;flex-direction:column;gap:10px;}
.form label{font-size:12.5px;font-weight:700;color:var(--muted);}
.form input{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:14px;font-family:inherit;}
.form-error{color:var(--red);font-size:12.5px;}

@media (max-width:980px){
  .hero-inner{grid-template-columns:1fr;gap:28px;padding-top:36px;}
  .hero{background-position:62% bottom;}
  .hero-card{max-width:760px;}
  .hc-visual-row{grid-template-columns:1fr 175px;}
  .mg-band{grid-template-columns:1fr;text-align:left;}
  .mg-band .mg-chip-row{max-width:none;justify-content:flex-start;}
  .type-grid{grid-template-columns:1fr;}
  .board-cards{grid-template-columns:1fr 1fr;}
  .steps{grid-template-columns:1fr 1fr;}
  .layout{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:600px){
  .hero h1{font-size:32px;}
  .hero-inner{padding:30px 16px 28px;}
  .hero p.lead{font-size:15px;}
  .trust-strip{gap:12px;}
  .hero-card{padding:15px;}
  .hc-team-logo{width:130px;height:65px;}
  .hc-stats{grid-template-columns:1fr 1fr;row-gap:10px;}
  .hc-stat:nth-child(2){border-right:none;}
  .hc-visual-row{grid-template-columns:1fr;}
  .hc-next-game{min-height:150px;}
  .hc-board-frame{min-height:auto;}
  .hero-cta{flex-wrap:wrap;}
  .nav-links{display:none;}
  .board-cards{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .stat-row{grid-template-columns:repeat(2,1fr);}
  .bh-title-row h1{font-size:21px;}
  .crumb-title{display:none;}
}