/* ============ CREW Sports Camp — shared styles ============ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Baloo+2:wght@500;600;700;800&display=swap');

:root{
  --bg-1:#161228;
  --bg-2:#1f1740;
  --card:#241b46;
  --card-2:#2c2158;
  --line:rgba(255,255,255,.10);
  --text:#F4F1FF;
  --muted:#B6ADD9;

  --pink:#FF3D8A;
  --orange:#FF8A3D;
  --yellow:#FFD23F;
  --teal:#22E0C0;
  --blue:#4D7CFE;
  --purple:#9B5CFF;

  --grad-hero: linear-gradient(135deg, #FF3D8A 0%, #9B5CFF 45%, #4D7CFE 100%);
  --grad-accent: linear-gradient(135deg, var(--teal), var(--blue));

  --team-A:#FF3D8A;
  --team-B:#22E0C0;
  --team-C:#FFD23F;
  --team-D:#4D7CFE;

  --radius:20px;
  --display: "Baloo 2", system-ui, sans-serif;
  --body: "Fredoka", system-ui, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; min-height:100dvh;
  font-family:var(--body); color:var(--text);
  background:
    radial-gradient(60vw 60vw at 90% -10%, rgba(255,61,138,.25), transparent 60%),
    radial-gradient(70vw 70vw at -10% 110%, rgba(77,124,254,.25), transparent 60%),
    var(--bg-1);
  padding-bottom:5.5rem;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--yellow); outline-offset:2px; }

h1,h2,h3{ font-family:var(--display); font-weight:700; margin:0 0 .4rem; line-height:1.1; }
h1{ font-size:clamp(2rem,7vw,3rem); }
h2{ font-size:clamp(1.4rem,5vw,1.9rem); }
h3{ font-size:1.1rem; }
p{ margin:0 0 .75rem; color:var(--muted); }

.wrap{ max-width:920px; margin-inline:auto; padding-inline:1.25rem; }

/* ---- top bar ---- */
.topbar{
  display:flex; align-items:center; gap:.6rem;
  padding:1rem 1.25rem; max-width:920px; margin-inline:auto;
}
.topbar img.logo{ width:36px; height:36px; border-radius:10px; object-fit:cover; }
.topbar .brand{ font-family:var(--display); font-weight:700; font-size:1.05rem; }
.topbar .brand small{ display:block; font-family:var(--body); font-weight:400; font-size:.68rem; color:var(--muted); }

/* ---- bottom nav (mobile-first, works on desktop too) ---- */
.navbar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; justify-content:space-around;
  background:rgba(22,18,40,.9); backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
}
.navbar a{
  flex:1; text-align:center; text-decoration:none; color:var(--muted);
  font-size:.68rem; font-weight:600; letter-spacing:.02em;
  padding:.35rem .2rem; border-radius:14px; transition:color .2s ease, background .2s ease;
}
.navbar a .ic{ display:block; font-size:1.35rem; margin-bottom:.1rem; }
.navbar a.active{ color:var(--yellow); background:rgba(255,210,63,.1); }

/* ---- cards / buttons ---- */
.card{
  background:linear-gradient(180deg, var(--card), var(--card-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:1.25rem; margin-bottom:1rem;
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-family:var(--display); font-weight:700; font-size:.95rem;
  padding:.9rem 1.5rem; border-radius:999px; border:0; cursor:pointer;
  color:#161228; background:var(--grad-hero); background-size:180% 180%;
  text-decoration:none; box-shadow:0 10px 25px -8px rgba(255,61,138,.55);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn.ghost{
  background:transparent; color:var(--text); box-shadow:none;
  border:1.5px solid var(--line);
}
.pill{
  display:inline-block; padding:.25rem .7rem; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.03em;
  background:rgba(255,255,255,.08); color:var(--muted);
}

/* ---- inputs ---- */
.field label{ display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:.4rem; letter-spacing:.02em; }
.input{
  width:100%; background:rgba(255,255,255,.06); border:1.5px solid var(--line);
  color:var(--text); font-family:var(--body); font-size:1rem;
  padding:.85rem 1rem; border-radius:14px;
}
.input::placeholder{ color:rgba(182,173,217,.6); }
.input:focus{ border-color:var(--teal); }

/* ---- page hero strip (non-landing pages) ---- */
.hero-strip{
  border-radius:var(--radius); padding:1.5rem 1.25rem; margin-bottom:1.25rem;
  background:var(--grad-hero); color:#161228; position:relative; overflow:hidden;
}
.hero-strip h1{ color:#161228; }
.hero-strip p{ color:rgba(22,18,40,.75); }

/* ---- tabs ---- */
.tabs{ display:flex; gap:.5rem; overflow-x:auto; padding-bottom:.25rem; margin-bottom:1rem; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab-btn{
  flex:0 0 auto; font-family:var(--display); font-weight:600; font-size:.85rem;
  padding:.6rem 1.1rem; border-radius:999px; border:1.5px solid var(--line);
  background:rgba(255,255,255,.04); color:var(--muted); cursor:pointer; white-space:nowrap;
}
.tab-btn.active{ background:var(--grad-accent); color:#161228; border-color:transparent; }

/* ---- schedule ---- */
.slot{ display:flex; gap:1rem; position:relative; padding-left:1.5rem; margin-bottom:1rem; }
.slot::before{
  content:""; position:absolute; left:5px; top:6px; bottom:-1rem; width:2px;
  background:var(--line);
}
.slot:last-child::before{ display:none; }
.slot::after{
  content:""; position:absolute; left:0; top:5px; width:12px; height:12px;
  border-radius:50%; background:var(--teal); box-shadow:0 0 0 4px rgba(34,224,192,.18);
}
.slot .time{ flex:0 0 92px; font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--yellow); padding-top:.05rem; }
.slot .body{ flex:1; }
.slot .title{ font-weight:600; margin-bottom:.35rem; }
.match-row{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem .5rem; font-size:.85rem; padding:.4rem 0; border-top:1px dashed var(--line); }
.match-row:first-of-type{ border-top:none; }
.match-row .sport{ flex:1 1 auto; min-width:110px; color:var(--muted); }
.vs{ display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; font-weight:700; font-family:var(--display); font-size:.8rem; }
.team-chip{ display:inline-flex; align-items:center; gap:.3rem; padding:.15rem .5rem; border-radius:999px; font-size:.72rem; white-space:nowrap; }
.team-chip .dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; }

/* ---- rooms ---- */
.result-card{ display:flex; align-items:center; gap:1rem; }
.result-card .avatar{
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-family:var(--display); font-weight:700; font-size:1.2rem; color:#161228;
  background:var(--grad-accent); flex:0 0 auto;
}
.result-card .meta{ flex:1; }
.result-card .meta .name{ font-family:var(--display); font-weight:700; font-size:1.05rem; }
.result-card .meta .row2{ display:flex; gap:.5rem; margin-top:.35rem; flex-wrap:wrap; }

/* ---- league ---- */
table.standings{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.standings th,table.standings td{ padding:.6rem .5rem; text-align:center; }
table.standings th{ color:var(--muted); font-weight:600; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; }
table.standings td:first-child, table.standings th:first-child{ text-align:left; }
table.standings tbody tr{ border-top:1px solid var(--line); }
table.standings tbody tr:first-child td{ font-weight:700; }
.rank-badge{ display:inline-grid; place-items:center; width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);font-size:.72rem;font-weight:700;margin-right:.4rem; }

.fixture{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 0; border-top:1px dashed var(--line); }
.fixture:first-child{ border-top:none; }
.fixture .info{ font-size:.72rem; color:var(--muted); }
.score-input{ width:44px; text-align:center; background:rgba(255,255,255,.08); border:1.5px solid var(--line); border-radius:10px; color:var(--text); padding:.4rem 0; font-size:1rem; font-family:var(--display); font-weight:700; }
.score-input:disabled{ opacity:.55; }

.lock-banner{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }

.empty-state{ text-align:center; padding:2rem 1rem; color:var(--muted); }
.empty-state .big{ font-size:2.4rem; margin-bottom:.5rem; }

@media (min-width:720px){
  body{ padding-bottom:0; }
  .navbar{ position:static; background:transparent; border:0; backdrop-filter:none; justify-content:flex-start; gap:.5rem; max-width:920px; margin-inline:auto; padding:0 1.25rem 1rem; }
  .navbar a{ flex:0 0 auto; display:flex; align-items:center; gap:.4rem; padding:.55rem 1rem; }
  .navbar a .ic{ margin:0; font-size:1.1rem; }
}