@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap");

:root {
  --cream: #f1ede6;
  --cream-2: #e6e0d4;
  --ink: #121212;
  --ed: #151515;
  --ed-2: #1d1d1d;
  --ed-3: #262626;
  --ed-line: #2e2e2e;
  --tx: #f2f0ec;
  --tx-2: #a8a6a1;
  --tx-3: #6f6e6a;
  --red: #e8381f;
  --red-soft: rgba(232, 56, 31, .16);
  --yel: #f5c518;
  --blue: #3b6fd8;
  --ok: #5cc27a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Barlow, system-ui, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; padding-bottom: 44px; }
body.dark { background: var(--ed); color: var(--tx); }
body.light { background: var(--cream); color: var(--ink); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.cond { font-family: "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .01em; }
.mono { font-family: "DM Mono", monospace; }
svg.lucide { width: 15px; height: 15px; stroke-width: 2; vertical-align: -2px; }
img { display: block; }

.logo { display: flex; align-items: center; gap: 8px; font: 800 21px "Barlow Condensed"; text-transform: uppercase; letter-spacing: .02em; }
.logo i { width: 24px; height: 24px; border-radius: 5px; background: var(--red); display: grid; place-items: center; font-style: normal; }
.logo i::after { content: ""; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-left: 2px; }

.topbar { display: flex; align-items: center; gap: 18px; height: 50px; padding: 0 16px; border-bottom: 1px solid var(--ed-line); background: #101010; }
.topbar nav { display: flex; gap: 2px; margin-left: 10px; }
.topbar nav a { padding: 6px 11px; border-radius: 6px; color: var(--tx-2); font-weight: 500; }
.topbar nav a.on { color: var(--tx); background: var(--ed-3); }
.topbar .sp { flex: 1; }
.club { display: flex; align-items: center; gap: 8px; color: var(--tx-2); font-weight: 500; }
.crest { width: 22px; height: 22px; border-radius: 50%; background: var(--yel); color: var(--ink); display: grid; place-items: center; font: 800 10px "Barlow Condensed"; }
.crest.b { background: var(--blue); color: #fff; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 7px; font-weight: 600; font-size: 14px; border: 1px solid var(--ed-line); background: var(--ed-2); }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; }
body.light .btn { background: #fff; border-color: var(--cream-2); }
body.light .btn.red { background: var(--red); border-color: var(--red); color: #fff; }
body.light .btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.tag { display: inline-block; font: 700 12px "Barlow Condensed"; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; background: var(--ed-3); color: var(--tx-2); }
.tag.goal { background: var(--red); color: #fff; }
.tag.save { background: var(--blue); color: #fff; }
.tag.chance { background: #3a3a3a; color: var(--tx); }

.proto { position: fixed; left: 0; right: 0; bottom: 0; height: 40px; z-index: 50; display: flex; align-items: center; gap: 2px; padding: 0 12px; background: #0a0a0a; color: #8d8b86; font-size: 13.5px; font-weight: 500; }
.proto b { font: 800 14px "Barlow Condensed"; letter-spacing: .1em; color: var(--red); margin-right: 12px; }
.proto a { padding: 4px 10px; border-radius: 5px; }
.proto a:hover { background: #1d1d1d; }
.proto a.on { background: var(--red); color: #fff; }
.proto .sp { flex: 1; }
@media (max-width: 900px) { .proto { overflow-x: auto; white-space: nowrap; } .topbar nav, .club { display: none; } }