/* United FC Beacon: the one stylesheet every page of the app shares (served at /assets/ufcb.css).
   Black is the ground, colour is the individual (philosophy.md). One set of tokens, one type scale,
   one set of components, so the staff app, the player app and the public pages can't drift apart. */
@font-face { font-family:'Inter'; src:url(/assets/inter.woff2) format('woff2-variations'), url(/assets/inter.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap; }
:root {
  --bg:#080808; --panel:#121212; --raise:#1a1a1a;
  --ink:#fff; --mid:rgba(255,255,255,.74); --dim:rgba(255,255,255,.58);
  --line:rgba(255,255,255,.12); --field:rgba(255,255,255,.28);
  --ok:#57cc99; --warn:#f5c842; --err:#ff8a8a;
  --gold:#F0C24B; --silver:#CBD1D8; --bronze:#D98E45;
  --rainbow:linear-gradient(90deg,#e63946 0%,#f4a261 14%,#f5c842 28%,#57cc99 42%,#4895ef 57%,#7b2d8b 71%,#e63946 85%,#f4a261 100%);
  --radius:10px;
  --safe-b:env(safe-area-inset-bottom, 0px);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { background:var(--bg); color:var(--ink); font:400 16px/1.5 'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; }
a { color:inherit; }
:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:4px; }
.sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* type scale: Display, Title, Label, Body, Meta */
.t-display { font-size:clamp(30px,8.5vw,52px); font-weight:800; letter-spacing:-1px; line-height:1.04; }
.t-title { font-size:22px; font-weight:800; line-height:1.2; letter-spacing:-.3px; }
.t-label { font-size:12px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--dim); }
.t-meta { font-size:14px; color:var(--mid); }
.rb { height:5px; border-radius:3px; background:var(--rainbow); }

/* components */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px;
  border-radius:var(--radius); border:1px solid var(--field); background:var(--panel); color:#fff; cursor:pointer;
  font:800 13px 'Inter',sans-serif; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; }
.btn.go { background:#fff; color:#080808; border-color:#fff; }
.btn.danger { border-color:rgba(255,138,138,.5); color:var(--err); }
.btn.small { min-height:36px; padding:0 12px; font-size:12px; }
.btn:disabled { opacity:.45; cursor:default; }
.linkbtn { background:none; border:0; color:var(--mid); font:600 15px 'Inter',sans-serif; text-decoration:underline; cursor:pointer;
  padding:10px 0; min-height:44px; }
.field, input[type=text], input[type=email], input[type=number], input[type=search], select, textarea {
  font:500 16px 'Inter',sans-serif; color:#fff; background:var(--panel); border:1px solid var(--field); border-radius:var(--radius);
  padding:11px 12px; min-height:44px; width:100%; }
textarea { min-height:90px; resize:vertical; line-height:1.4; }
label.f { display:block; margin-top:14px; font-size:13px; font-weight:700; }
label.f > span.h { font-weight:500; color:var(--dim); }
label.f > input, label.f > select, label.f > textarea { margin-top:6px; }
.tag { display:inline-block; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:3px 7px;
  border-radius:5px; border:1px solid var(--field); color:var(--mid); }
.pill { display:inline-block; margin:6px 6px 0 0; font-size:13px; font-weight:700; padding:6px 10px; border-radius:8px; border:1px solid var(--line); }
.msg { margin-top:10px; font-size:14px; color:var(--mid); min-height:20px; }
.msg.err, .err { color:var(--err); }
.msg.ok, .ok { color:var(--ok); }
.card-box { border:1px solid var(--line); border-radius:12px; padding:16px; margin-top:16px; background:var(--panel); }
.spin { display:inline-block; width:12px; height:12px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%;
  animation:spin .8s linear infinite; vertical-align:-1px; margin-right:6px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}