@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,800;1,900&family=Inter:wght@400;500;600;700;800&family=Share+Tech+Mono&display=swap');

:root {
  --bg: #020306;
  --bg-soft: #06090e;
  --panel: #0a0f16;
  --panel-2: #0d131d;
  --line: rgba(144, 178, 226, .18);
  --line-strong: rgba(22, 216, 255, .34);
  --text: #f7f9fc;
  --muted: #8e9bad;
  --muted-2: #647185;
  --blue: #126cff;
  --cyan: #16d8ff;
  --red: #ff2737;
  --display: 'Barlow Condensed', Impact, 'Arial Narrow', sans-serif;
  --body: Inter, ui-sans-serif, system-ui, sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --max: 760px;
  --tabbar-h: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 88% 5%, rgba(18,108,255,.13), transparent 23%),
    var(--bg);
  color: var(--text);
  font-family: var(--body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .12;
  background-image:
    linear-gradient(rgba(92,142,211,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,142,211,.14) 1px, transparent 1px);
  background-size: 100% 140px, 170px 100%;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img, svg { display: block; max-width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link { position: fixed; left: 10px; top: 10px; transform: translateY(-160%); z-index: 999; }
.skip-link:focus { transform: none; }

.shell { width: min(calc(100% - 28px), var(--max)); margin-inline: auto; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  background: linear-gradient(180deg, rgba(2,3,6,.98), rgba(2,3,6,.86));
  border-bottom: 1px solid rgba(110,156,218,.14);
  backdrop-filter: blur(18px);
}
.app-header {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand {
  display: block;
  width: 152px;
  height: 44px;
  background: url('assets/real-play-brand.webp') left center / contain no-repeat;
  text-decoration: none;
  filter: drop-shadow(0 0 10px rgba(18,108,255,.18));
}
.brand-main,.brand-sub { position: absolute!important; width:1px!important; height:1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; }
.account-button {
  min-height: 40px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(22,216,255,.28);
  background: rgba(8,13,20,.9);
  color: #dce7f4;
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .08em;
  border-radius: 999px;
}
.account-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.menu-button,.site-nav { display: none; }

.mobile-home {
  position: relative;
  min-height: 100svh;
  padding: 104px 0 36px;
  overflow: hidden;
}
.mobile-home::before {
  content: '';
  position: absolute;
  right: -110px;
  bottom: 8%;
  width: 280px;
  height: 640px;
  transform: rotate(27deg);
  background: linear-gradient(90deg, transparent, rgba(18,108,255,.1), transparent 48%, rgba(22,216,255,.05), transparent);
}
.court-lines { position:absolute; inset:0; pointer-events:none; opacity:.1; }
.court-lines::before { content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background:#76a9ee; }
.court-circle { position:absolute; width:460px; height:460px; border:1px solid #76a9ee; border-radius:50%; left:50%; top:54%; transform:translate(-50%,-50%); }
.court-key { position:absolute; width:260px; height:430px; border:1px solid #76a9ee; right:-135px; top:48%; transform:translateY(-50%); }
.home-shell { position: relative; z-index: 2; }
.home-intro { padding: 14px 0 22px; }
.eyebrow {
  margin: 0 0 12px;
  color: var(--cyan);
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .17em;
  text-transform: uppercase;
}
.eyebrow::before { content:''; display:inline-block; width:22px; height:3px; margin-right:10px; vertical-align:middle; background:linear-gradient(90deg,var(--cyan),var(--blue)); }
.home-intro h1 {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(4.25rem, 20vw, 6.7rem);
  line-height: .77;
  letter-spacing: -.045em;
  text-transform: uppercase;
}
.home-intro h1 span { display:block; margin-top:17px; font-size:.24em; letter-spacing:.23em; font-style:normal; }
.tagline { margin: 28px 0 0; font-family: var(--display); font-size: clamp(1.5rem, 7vw, 2.15rem); font-weight:900; font-style:italic; letter-spacing:.01em; }
.tagline strong::after { content:''; display:inline-block; width:38px; height:6px; margin-left:10px; background:var(--red); transform:skewX(-18deg); }
.home-lede { margin: 22px 0 0; max-width: 620px; color:#adb8c8; font-size:1rem; line-height:1.65; }

.next-play-card {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid rgba(74,131,219,.35);
  border-top: 2px solid var(--cyan);
  background: linear-gradient(145deg, rgba(15,23,34,.97), rgba(5,8,13,.98));
  box-shadow: 0 22px 50px rgba(0,0,0,.35), 0 0 30px rgba(18,108,255,.08);
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.card-kicker-row { display:flex; align-items:center; gap:9px; padding:15px 17px 12px; border-bottom:1px solid var(--line); }
.card-kicker-row p { margin:0; color:#8493a8; font-family:var(--display); font-size:.72rem; font-weight:900; letter-spacing:.14em; }
.live-pip { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 12px rgba(22,216,255,.8); }
.next-play-empty { padding: 22px 17px 20px; }
.next-play-label { color:#647185; font-family:var(--display); font-size:.72rem; font-weight:900; letter-spacing:.13em; }
.next-play-empty h2 { margin:4px 0 8px; font-family:var(--display); font-size:clamp(2.2rem,11vw,3.3rem); font-weight:900; font-style:italic; line-height:.92; }
.next-play-empty p { margin:0; color:#7f8b9c; font-size:.86rem; }
.primary-action,.secondary-action {
  border: 0;
  text-decoration: none;
  min-height: 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 20px;
  font-family:var(--display);
  font-size:1.15rem;
  font-style:italic;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
}
.primary-action { color:white; background:linear-gradient(100deg,#0f55ff 0%,#0876ff 52%,#17d8ea 100%); }
.secondary-action { width:100%; color:white; border:1px solid rgba(125,164,217,.35); background:#0b1017; }

.quick-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.quick-stats article { min-width:0; padding:13px 10px; border:1px solid var(--line); background:rgba(7,11,17,.82); }
.quick-stats span { display:block; color:#667489; font-family:var(--display); font-size:.62rem; font-weight:800; letter-spacing:.09em; }
.quick-stats strong { display:block; margin-top:4px; overflow:hidden; text-overflow:ellipsis; color:#e7edf5; font-family:var(--display); font-size:.95rem; font-weight:900; white-space:nowrap; }
.profile-entry { width:100%; margin-top:10px; min-height:68px; display:flex; justify-content:space-between; align-items:center; gap:18px; padding:12px 16px; color:white; text-align:left; border:1px solid var(--line); background:rgba(7,11,17,.9); cursor:pointer; }
.profile-entry small { display:block; color:#637187; font-family:var(--display); font-size:.62rem; font-weight:800; letter-spacing:.1em; }
.profile-entry strong { display:block; margin-top:3px; font-family:var(--display); font-size:1.08rem; letter-spacing:.04em; }
.profile-entry b { color:var(--cyan); font-size:1.5rem; }

.app-section,.section { position:relative; padding:72px 0; border-top:1px solid rgba(116,157,217,.13); }
.section-top { margin-bottom:28px; }
.section-top h2,.mission-mobile h2,.support-mobile h2 {
  margin:0;
  max-width:650px;
  font-family:var(--display);
  font-size:clamp(2.8rem,13vw,4.8rem);
  font-style:italic;
  font-weight:900;
  line-height:.88;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.section-top > p:last-child,.mission-mobile > p,.support-mobile > p { margin:18px 0 0; color:#8f9bad; max-width:650px; }
.section-top.compact { margin-bottom:20px; }
.section-top.compact h2 { font-size:clamp(2.5rem,11vw,4rem); }

.play-section { background:linear-gradient(180deg,#05080d,#020306); }
.mode-grid { display:grid; gap:10px; }
.mode-card { position:relative; overflow:hidden; padding:18px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(12,18,27,.94),rgba(5,8,13,.96)); }
.mode-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--cyan),var(--blue)); }
.mode-card.featured { border-color:rgba(22,216,255,.35); background:linear-gradient(140deg,rgba(16,64,142,.26),rgba(6,10,16,.98) 52%); box-shadow:0 0 28px rgba(18,108,255,.08); }
.mode-number { position:absolute; right:13px; top:5px; color:rgba(83,137,219,.12); font-family:var(--mono); font-size:4rem; line-height:1; font-weight:700; }
.mode-copy { position:relative; z-index:1; padding-right:42px; }
.mode-copy > span { color:var(--cyan); font-family:var(--display); font-size:.72rem; font-weight:900; letter-spacing:.13em; }
.mode-copy h3 { margin:5px 0 7px; font-family:var(--display); font-size:1.9rem; font-style:italic; font-weight:900; line-height:.94; }
.mode-copy p { margin:0; color:#8e9aac; font-size:.88rem; }
.mode-meta { position:relative; z-index:1; margin-top:17px; padding-top:11px; border-top:1px solid var(--line); color:#6d7b90; font-family:var(--display); font-size:.67rem; font-weight:800; letter-spacing:.08em; }
.play-rule { margin-top:22px; padding:18px; border-left:3px solid var(--cyan); background:rgba(18,108,255,.07); }
.play-rule span { display:block; color:var(--cyan); font-family:var(--display); font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.play-rule strong { display:block; margin-top:6px; font-family:var(--display); font-size:1.2rem; line-height:1.1; }

.career-section { background:radial-gradient(circle at 100% 10%,rgba(18,108,255,.13),transparent 28%); }
.career-preview { overflow:hidden; border:1px solid rgba(92,142,211,.26); background:linear-gradient(145deg,#0c121b,#05080c); }
.career-player { display:flex; align-items:center; gap:15px; padding:18px; border-bottom:1px solid var(--line); }
.career-number { min-width:72px; color:white; font-family:var(--display); font-size:3.4rem; font-weight:900; font-style:italic; line-height:1; }
.career-player small { display:block; color:#6c798d; font-family:var(--display); font-size:.65rem; font-weight:800; letter-spacing:.1em; }
.career-player strong { display:block; margin-top:4px; font-family:var(--display); font-size:1.06rem; line-height:1.1; }
.career-stat-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.career-stat-grid article { min-height:86px; padding:13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.career-stat-grid article:nth-child(3n) { border-right:0; }
.career-stat-grid span { display:block; color:#647185; font-family:var(--display); font-size:.65rem; font-weight:800; }
.career-stat-grid strong { display:block; margin-top:6px; font-family:var(--mono); font-size:1.45rem; }

.mission-section { background:linear-gradient(145deg,#08111f,#020306 65%); }
.mission-mobile blockquote { margin:30px 0 0; padding:18px 0 18px 17px; border-left:3px solid var(--cyan); }
.mission-mobile blockquote strong,.mission-mobile blockquote span { display:block; font-family:var(--display); font-size:clamp(1.55rem,7vw,2.4rem); font-style:italic; font-weight:900; line-height:1; }
.mission-mobile blockquote span { margin-top:5px; color:#9fb2cb; }
.mission-note { color:#5f6e82!important; font-size:.82rem; font-weight:700; }

.impact-grid { display:grid; grid-template-columns:repeat(2,1fr); border:1px solid var(--line); }
.metric-card { min-height:118px; display:flex; flex-direction:column; justify-content:space-between; padding:16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:rgba(8,12,18,.78); }
.metric-card:nth-child(2n) { border-right:0; }
.metric-card:nth-last-child(-n+2) { border-bottom:0; }
.metric-card strong { font-family:var(--mono); font-size:2rem; }
.metric-card span { color:#6c798c; font-family:var(--display); font-size:.72rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.data-status { color:#59677b; font-size:.75rem; }

.fund-section { background:#04070b; }
.fund-board { border:1px solid var(--line); border-top:2px solid var(--cyan); background:#080d14; }
.fund-board-head { display:flex; flex-direction:column; gap:4px; padding:13px 15px; border-bottom:1px solid var(--line); color:#6d7a8e; font-family:var(--display); font-size:.67rem; font-weight:800; letter-spacing:.1em; }
.fund-board-head span:last-child { color:var(--cyan); }
.fund-totals { display:grid; }
.fund-totals article { min-height:108px; padding:15px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.fund-totals article:last-child { border-bottom:0; }
.fund-totals span { color:#738095; font-family:var(--display); font-size:.75rem; font-weight:800; text-transform:uppercase; }
.fund-totals strong { font-family:var(--mono); font-size:1.75rem; }
.fund-totals .highlight { background:linear-gradient(100deg,#0d52df,#0a8de9); }
.fund-totals .highlight span { color:rgba(255,255,255,.7); }
.ledger-list { margin-top:12px; }
.ledger-entry { display:grid; grid-template-columns:1fr auto; gap:10px; padding:15px 0; border-bottom:1px solid var(--line); }
.ledger-entry time { grid-column:1/-1; color:#647185; font-size:.7rem; }
.ledger-entry-type { color:#657286; font-size:.67rem; font-weight:800; }
.ledger-entry h4 { margin:3px 0 0; font-size:.9rem; }
.ledger-entry p { margin:4px 0 0; color:#687588; font-size:.78rem; }
.ledger-amount { font-family:var(--mono); font-size:1rem; }
.ledger-amount.in { color:var(--cyan); }
.ledger-amount.out { color:#ff5560; }
.empty-state { padding:30px 0; }
.empty-state > span { color:#172236; font-family:var(--mono); font-size:4rem; }
.empty-state h4 { margin:8px 0 5px; font-family:var(--display); font-size:1.35rem; font-style:italic; }
.empty-state p { margin:0; color:#647185; font-size:.83rem; }

.support-section { background:radial-gradient(circle at 15% 25%,rgba(18,108,255,.18),transparent 30%),#020306; }
.support-mobile .secondary-action { margin-top:26px; }
.site-footer { padding:40px 0 34px; border-top:1px solid var(--line); background:#010205; }
.footer-brand { width:205px; height:58px; }
.site-footer p { margin:10px 0 0; color:#667489; font-family:var(--display); font-weight:800; }
.site-footer span { display:inline-block; margin-top:13px; color:var(--cyan); font-family:var(--display); font-weight:900; font-style:italic; }

.mobile-tabbar {
  position:fixed;
  z-index:120;
  left:0; right:0; bottom:0;
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding:6px 8px env(safe-area-inset-bottom);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  align-items:center;
  border-top:1px solid rgba(114,159,219,.24);
  background:rgba(3,6,10,.96);
  backdrop-filter:blur(18px);
  box-shadow:0 -14px 40px rgba(0,0,0,.32);
}
.mobile-tab { min-width:0; height:58px; border:0; background:transparent; color:#667489; text-decoration:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer; }
.tab-icon { font-size:1.18rem; line-height:1; }
.mobile-tab small { font-family:var(--display); font-size:.58rem; font-weight:800; letter-spacing:.05em; }
.mobile-tab.active,.mobile-tab:focus-visible { color:#eaf2ff; }
.play-tab { color:var(--cyan); }
.play-tab .tab-icon { width:35px; height:35px; margin-top:-18px; display:grid; place-items:center; border-radius:50%; color:#fff; background:linear-gradient(145deg,var(--blue),var(--cyan)); box-shadow:0 0 20px rgba(18,108,255,.42); border:3px solid #07101b; }

.reveal { opacity:1; transform:none; }
.js .reveal { opacity:0; transform:translateY(14px); transition:opacity .5s ease,transform .5s ease; }
.js .reveal.visible { opacity:1; transform:none; }

/* Dynamic culture section inserted by app.js */
.culture-section { padding:72px 0; }
.culture-grid { width:min(calc(100% - 28px),var(--max)); margin:auto; display:grid!important; grid-template-columns:1fr!important; gap:28px!important; }
.culture-heading h2 { font-size:clamp(2.8rem,13vw,4.8rem)!important; }

@media (min-width: 820px) {
  :root { --max: 1180px; }
  body { padding-bottom:0; }
  .shell { width:min(calc(100% - 48px),var(--max)); }
  .site-header { position:sticky; top:0; }
  .app-header { min-height:80px; }
  .brand { width:210px; height:56px; }
  .account-button { display:none; }
  .site-nav { display:flex; align-items:center; gap:24px; }
  .site-nav a { color:#aab5c4; text-decoration:none; font-family:var(--display); font-size:.92rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .site-nav .auth-nav-link { padding:8px 16px; border:1px solid rgba(22,216,255,.35); color:white; }
  .mobile-tabbar { display:none; }
  .mobile-home { min-height:760px; padding:90px 0; display:grid; align-items:center; }
  .home-shell { display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; }
  .home-intro { padding-right:20px; }
  .next-play-card { margin-top:0; }
  .quick-stats,.profile-entry { grid-column:2; }
  .mode-grid { grid-template-columns:repeat(2,1fr); }
  .career-preview { max-width:760px; }
  .impact-grid { grid-template-columns:repeat(4,1fr); }
  .metric-card { border-bottom:0; }
  .metric-card:nth-child(2n) { border-right:1px solid var(--line); }
  .metric-card:last-child { border-right:0; }
  .fund-totals { grid-template-columns:repeat(3,1fr); }
  .fund-totals article { border-right:1px solid var(--line); border-bottom:0; }
  .fund-totals article:last-child { border-right:0; }
}

@media (max-width: 390px) {
  .shell { width:min(calc(100% - 22px),var(--max)); }
  .brand { width:138px; }
  .account-button { padding:0 10px; }
  .home-intro h1 { font-size:4rem; }
  .quick-stats article { padding-inline:8px; }
  .quick-stats strong { font-size:.82rem; }
  .career-stat-grid article { padding:11px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; animation:none!important; }
  .js .reveal { opacity:1; transform:none; }
}