/* Betcomm family foundation. Provenance and usage: docs/design-system.md. */
@font-face{font-family:'Russo One';src:url('/russo-one.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('/dm-sans.woff2') format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
:root{
 --font-display:'Russo One',system-ui,sans-serif;
 --font-body:'DM Sans',system-ui,sans-serif;
 --color-bg-base:#e8dcc8;--color-bg-card:#4a7c3f;--color-bg-card-light:#f5edd8;--color-bg-elevated:#f0e6d0;--color-bg-input:#f8f2e4;
 --color-primary:#4a7c3f;--color-primary-dark:#2d5a27;--color-primary-light:#6ba35e;--color-primary-border:#3d6b34;
 --color-accent:#c8a84e;--color-accent-bright:#dabb5c;--color-accent-dark:#8b7333;
 --color-text-primary:#2c1810;--color-text-secondary:#5a4a3a;--color-border-light:#c8b898;
 --brand-radius:14px;--brand-control-radius:12px;--brand-motion:150ms;
}
body,button,input,select,textarea{font-family:var(--font-body)}
h1,h2,h3,h4,.brand,.brandName,.cupRound h4,#profilePanel .playerHeader h2,.clubIdentity h3,.rankHero strong,.nextFixture .personalMatch strong{font-family:var(--font-display);font-weight:400;letter-spacing:0;line-height:1.2}
.primary,.secondary,.fixtureActions [data-fixture]{font-family:var(--font-display);font-weight:400;letter-spacing:.25px;line-height:1.4}
.publicLanding h1,.home h1{font-size:clamp(36px,6vw,66px);line-height:1.14;letter-spacing:-.8px;text-transform:none}
.publicLanding h1 em,.home h1 em{font-style:normal}
.viewHeading h2{font-size:clamp(26px,4.7vw,36px);overflow-wrap:anywhere}
.personalStats strong,.personalStats b,.scoreboard strong,.timer,.shotTarget strong,.shotBar .sbHead b,.onlineCountdown,.heroClock strong,.landingScore,.rankBoard article>b,.referralCounters strong{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-weight:700}
.primary{border:1px solid var(--color-accent-dark);border-radius:var(--brand-control-radius);color:var(--color-text-primary);background:linear-gradient(180deg,#e4ca77,var(--color-accent-bright));box-shadow:0 3px 0 var(--color-accent-dark),inset 0 1px 0 #ffffff66;transition:transform var(--brand-motion),box-shadow var(--brand-motion),filter var(--brand-motion)}
.secondary,.fixtureActions [data-fixture]{border:1px solid var(--color-primary-dark);border-radius:var(--brand-control-radius);color:#f5edd8;background:linear-gradient(180deg,var(--color-primary),var(--color-primary-dark));box-shadow:0 3px 0 #193d20,inset 0 1px 0 #ffffff33;transition:transform var(--brand-motion),box-shadow var(--brand-motion)}
.primary:active:not(:disabled),.secondary:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--color-accent-dark)}
.textbtn{border-radius:10px;transition:background var(--brand-motion),border-color var(--brand-motion)}
.formSurface,.setup,.nextFixture,.personalLeague{border-radius:var(--brand-radius);border:2px solid var(--color-border-light);box-shadow:0 2px 8px #00000014,0 1px 2px #0000000a,inset 0 1px 0 #ffffff80}
.nextFixture{border-color:var(--color-accent)}
.playerHeader,.clubIdentity,.rankHero{border-radius:16px;box-shadow:0 4px 12px #00000020,inset 0 1px 0 #ffffff24}
.emptyState{border-radius:var(--brand-radius);border:1px dashed var(--color-border-light);background:var(--color-bg-card-light)}
input,select,textarea{border-radius:10px}
.brandIcon{display:inline-block;vertical-align:middle;width:20px;height:20px;flex-shrink:0;pointer-events:none}
.brandCrestArt{width:40px;height:40px;flex-shrink:0;vertical-align:middle}
.drawerNav button,.drawerBottom>button{display:flex;align-items:center;gap:12px}
.drawerNav .brandIcon,.drawerBottom .brandIcon{width:19px;height:19px}
.topTabs button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0}
.topTabs .brandIcon{width:16px;height:16px}
header{background:var(--color-primary-dark);border-color:var(--color-primary-border)}
header #menuBtn,header #notificationsBtn{color:#f5edd8;background:#ffffff0d;border:1px solid #ffffff26;box-shadow:none}
.brand-icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.brandActionArt{display:inline-flex;align-items:center;gap:8px}
#referralDialog{border:2px solid var(--color-border-light);border-radius:20px;background:var(--color-bg-elevated)}
#referralTitle{font-size:27px;line-height:1.25}
#referralShare{min-height:48px}
.referralCounters>div{border-radius:12px;background:var(--color-bg-card-light);border-color:var(--color-border-light)}
.loadingDot{background:var(--color-primary);box-shadow:0 0 0 4px #4a7c3f18}
@media(max-width:600px){.publicLanding h1,.home h1{font-size:clamp(34px,9vw,48px)}.topTabs button{font-size:11px;gap:5px;padding-inline:7px}.viewHeading h2,#profilePanel .playerHeader h2{font-size:28px}.referralSurface{padding:20px}.topTabs .brandIcon{width:15px;height:15px}}
@media(prefers-reduced-motion:reduce){.primary,.secondary,.textbtn{transition:none}.primary:active,.secondary:active{transform:none}}