/* ============================================================
   FOOTBALL CHAMPION — Navigation & UX enhancements
   Purely additive. Loaded after style.css. No existing rule is
   removed; page structure and markup are unchanged.
   ============================================================ */

/* ---------- Accessibility ---------- */
.skip-link{
  position:fixed; left:12px; top:-60px; z-index:100000;
  background:var(--gold); color:var(--ink); font-weight:800;
  padding:10px 16px; border-radius:8px; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; outline:3px solid var(--chalk); }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:3px solid var(--gold-bright);
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- Reading / scroll progress ---------- */
#fc-progress{
  position:fixed; top:0; left:0; height:3px; width:0;
  background:linear-gradient(90deg,var(--gold),var(--gold-bright),var(--electric));
  z-index:100001; pointer-events:none;
  transition:width .08s linear, opacity .3s ease;
  box-shadow:0 0 10px rgba(240,192,92,.6);
}

/* ---------- Sticky public navbar ---------- */
.container.navbar{
  position:sticky; top:0; z-index:60;
  transition:background .25s ease, box-shadow .25s ease, padding .25s ease;
}
.container.navbar.is-stuck{
  background:rgba(4,20,13,.88);
  box-shadow:0 8px 28px rgba(0,0,0,.45);
}
.navbar .nav-quick{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.navbar .nav-quick a.nav-chip{
  color:var(--chalk-dim); text-decoration:none; font-size:.82rem; font-weight:600;
  padding:6px 10px; border-radius:999px; border:1px solid transparent;
  transition:var(--transition-smooth);
}
.navbar .nav-quick a.nav-chip:hover,
.navbar .nav-quick a.nav-chip[aria-current="page"]{
  color:var(--gold-bright); border-color:rgba(217,164,65,.35); background:rgba(217,164,65,.08);
}
@media(max-width:640px){
  .navbar .nav-quick a.nav-chip.hide-sm{ display:none; }
}

/* ---------- Search / command palette trigger ---------- */
.fc-search-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); color:var(--chalk-dim);
  border:1px solid var(--line); border-radius:999px;
  padding:7px 12px; font:600 .78rem var(--font-body); cursor:pointer;
  transition:var(--transition-smooth);
}
.fc-search-btn:hover{ color:var(--gold-bright); border-color:rgba(217,164,65,.4); }
.fc-search-btn kbd{
  font:700 .65rem var(--font-data); padding:2px 6px; border-radius:4px;
  background:rgba(0,0,0,.35); border:1px solid var(--line); color:var(--chalk);
}
.sidebar .fc-search-btn{ width:100%; justify-content:flex-start; margin:0 0 12px; border-radius:10px; }
/* Mobile: icon-only round button that sits in the top bar */
.fc-search-icon{ display:none; }
@media(max-width:767px){
  .sidebar .fc-search-btn{ display:none; }
  .fc-search-icon{
    display:inline-grid; place-items:center; width:40px; height:40px; flex:0 0 40px;
    border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.06);
    color:var(--chalk); font-size:1.05rem; cursor:pointer; padding:0;
  }
  .fc-search-icon:active{ background:rgba(217,164,65,.2); }
  .navbar .fc-search-btn{ padding:0; width:40px; height:40px; justify-content:center; border-radius:50%; }
  .navbar .fc-search-btn .lbl, .navbar .fc-search-btn kbd{ display:none; }
}

/* ---------- Command palette ---------- */
.fc-cmd{
  position:fixed; inset:0; z-index:100002; display:none;
  align-items:flex-start; justify-content:center; padding:12vh 16px 16px;
  background:rgba(2,12,8,.72); backdrop-filter:blur(6px);
}
.fc-cmd.open{ display:flex; animation:fcFade .15s ease; }
.fc-cmd-box{
  width:100%; max-width:540px; background:linear-gradient(180deg,#0C2B1E,#07231A);
  border:1px solid rgba(217,164,65,.35); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.6); overflow:hidden;
}
.fc-cmd-box input{
  width:100%; border:0; border-bottom:1px solid var(--line); background:transparent;
  color:var(--chalk); font:500 1rem var(--font-body); padding:16px 18px; outline:none;
}
.fc-cmd-list{ list-style:none; margin:0; padding:6px; max-height:46vh; overflow:auto; }
.fc-cmd-list li a{
  display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:9px;
  color:var(--chalk); text-decoration:none; font-weight:600;
}
.fc-cmd-list li a small{ margin-left:auto; color:var(--chalk-dim); font:400 .72rem var(--font-data); }
.fc-cmd-list li.sel a, .fc-cmd-list li a:hover{ background:rgba(217,164,65,.14); color:var(--gold-bright); }
.fc-cmd-empty{ padding:18px; color:var(--chalk-dim); text-align:center; font-size:.9rem; }
.fc-cmd-foot{
  display:flex; gap:14px; padding:9px 14px; border-top:1px solid var(--line);
  font:400 .68rem var(--font-data); color:var(--chalk-dim);
}
@keyframes fcFade{ from{opacity:0} to{opacity:1} }

/* ---------- Breadcrumbs (member pages) ---------- */
.fc-crumbs{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:.8rem; color:var(--chalk-dim); margin:0 0 16px;
}
.fc-crumbs a{ color:var(--chalk-dim); text-decoration:none; font-weight:600; }
.fc-crumbs a:hover{ color:var(--gold-bright); }
.fc-crumbs .sep{ opacity:.5; }
.fc-crumbs [aria-current]{ color:var(--chalk); font-weight:700; }

/* ---------- Sidebar user chip ---------- */
.fc-userchip{
  display:flex; align-items:center; gap:10px; padding:10px 12px; margin:0 0 12px;
  background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:12px;
}
.fc-userchip .av{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--gold),var(--gold-bright)); color:var(--ink); font-weight:800;
}
.fc-userchip .av{ flex:0 0 34px; font-size:1rem; }
.fc-userchip .who{ line-height:1.25; min-width:0; flex:1; display:flex; flex-direction:column; }
.fc-userchip .who b{ display:block; font-size:.85rem; color:var(--chalk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fc-userchip .who span{ display:block; font-size:.72rem; color:var(--chalk-dim); }
.fc-userchip .who span.warn{ color:var(--electric); font-weight:700; }
#app-navlinks .fc-userchip{ margin:0 0 6px; }

/* ---------- Mobile bottom tab bar ---------- */
.fc-bottomnav{ display:none; }
@media(max-width:767px){
  body.has-bottomnav{ padding-bottom:calc(68px + env(safe-area-inset-bottom)); }
  .fc-bottomnav{
    display:grid; grid-template-columns:repeat(5,1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:9000;
    background:rgba(4,20,13,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-top:2px solid var(--gold); padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .fc-bottomnav a{
    display:flex; flex-direction:column; align-items:center; gap:2px;
    color:var(--chalk-dim); text-decoration:none; font-size:.66rem; font-weight:700;
    padding:6px 2px; border-radius:10px; position:relative;
  }
  .fc-bottomnav a .ic{ font-size:1.25rem; line-height:1; transition:transform .2s ease; }
  .fc-bottomnav a.active{ color:var(--gold-bright); background:rgba(217,164,65,.1); }
  .fc-bottomnav a.active .ic{ transform:translateY(-2px) scale(1.12); }
  .fc-bottomnav a.cta .ic{
    background:linear-gradient(135deg,var(--gold),var(--gold-bright)); border-radius:50%;
    width:38px; height:38px; display:grid; place-items:center; margin-top:-16px;
    box-shadow:0 6px 16px rgba(217,164,65,.45); font-size:1.15rem;
  }
}
/* Hide during an active quiz so it can't be tapped by accident */
body.quiz-live .fc-bottomnav{ display:none; }
body.quiz-live.has-bottomnav{ padding-bottom:0; }

/* ---------- Back to top ---------- */
#fc-top{
  position:fixed; right:16px; bottom:16px; z-index:8999;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(217,164,65,.5);
  background:rgba(4,20,13,.9); color:var(--gold-bright); font-size:1.15rem; cursor:pointer;
  opacity:0; transform:translateY(12px); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
}
#fc-top.show{ opacity:1; transform:none; pointer-events:auto; }
#fc-top:hover{ background:var(--gold); color:var(--ink); }
@media(max-width:767px){ body.has-bottomnav #fc-top{ bottom:calc(80px + env(safe-area-inset-bottom)); } }

/* ---------- Toasts ---------- */
#fc-toasts{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%); z-index:100003;
  display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
}
.fc-toast{
  background:#0C2B1E; color:var(--chalk); border:1px solid rgba(217,164,65,.45);
  padding:10px 16px; border-radius:999px; font-size:.85rem; font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.5); animation:fcToast .25s ease;
}
.fc-toast.err{ border-color:var(--electric); }
@keyframes fcToast{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }

/* ---------- Scroll reveal (only when JS is active) ---------- */
.fc-js .fc-reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.fc-js .fc-reveal.in{ opacity:1; transform:none; }

/* ---------- Modals ---------- */
.modal-overlay{ backdrop-filter:blur(4px); }
.modal-box{ position:relative; }
.modal-close{
  position:absolute; top:10px; right:10px; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,.06); color:var(--chalk);
  font-size:1.1rem; cursor:pointer; line-height:1;
}
.modal-close:hover{ background:var(--electric); border-color:var(--electric); }
.modal-steps{ display:flex; gap:6px; justify-content:center; margin:0 0 14px; }
.modal-steps i{ width:26px; height:4px; border-radius:4px; background:rgba(255,255,255,.15); }
.modal-steps i.on{ background:var(--gold); }

/* ---------- Password reveal ---------- */
.pw-wrap{ position:relative; }
.pw-wrap input{ padding-right:46px; }
.pw-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:0; color:var(--chalk-dim); cursor:pointer; font-size:1.05rem; padding:6px 8px;
}
.pw-toggle:hover{ color:var(--gold-bright); }

/* ---------- Buttons: busy state ---------- */
.btn.is-busy{ pointer-events:none; opacity:.75; position:relative; }
.btn.is-busy::after{
  content:""; display:inline-block; width:14px; height:14px; margin-left:10px; vertical-align:-2px;
  border:2px solid currentColor; border-right-color:transparent; border-radius:50%;
  animation:fcSpin .7s linear infinite;
}
@keyframes fcSpin{ to{ transform:rotate(360deg) } }

/* ---------- Tables on small screens ---------- */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap table{ min-width:480px; }
.lb-table tbody tr{ transition:background .2s ease; }
.lb-table tbody tr:hover{ background:rgba(217,164,65,.07); }

/* ---------- FAQ accordion + search ---------- */
.faq-tools{ display:flex; gap:10px; margin:0 0 18px; flex-wrap:wrap; }
.faq-tools input{
  flex:1; min-width:200px; padding:12px 14px; border-radius:10px; border:1px solid var(--line);
  background:rgba(0,0,0,.3); color:var(--chalk); font:500 .95rem var(--font-body);
}
.faq-tools button{ white-space:nowrap; }
details.faq-item{ padding:0; overflow:hidden; }
details.faq-item summary{
  list-style:none; cursor:pointer; padding:16px 18px; display:flex; gap:12px; align-items:center;
  font-weight:800; justify-content:space-between;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{
  content:"+"; font:700 1.3rem var(--font-data); color:var(--gold-bright); transition:transform .25s ease;
}
details.faq-item[open] summary::after{ transform:rotate(45deg); }
details.faq-item .ans{ padding:0 18px 16px; color:var(--chalk-dim); }
details.faq-item.hidden{ display:none; }

/* ---------- On-this-page chips (legal pages) ---------- */
.fc-toc{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.fc-toc a{
  font-size:.78rem; font-weight:700; text-decoration:none; color:var(--chalk-dim);
  padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04);
}
.fc-toc a:hover{ color:var(--gold-bright); border-color:rgba(217,164,65,.45); }
[data-toc-target]{ scroll-margin-top:90px; }

/* ---------- Quiz helpers ---------- */
.option-btn[data-letter]{ position:relative; }
.fc-kbd-hint{ text-align:center; margin-top:14px; font-size:.72rem; color:var(--chalk-dim); }
.fc-kbd-hint kbd{ font:700 .68rem var(--font-data); padding:2px 6px; border:1px solid var(--line); border-radius:4px; background:rgba(0,0,0,.3); }
@media(hover:none){ .fc-kbd-hint{ display:none; } }

/* ---------- Public footer links ---------- */
footer .footer-links{ flex-wrap:wrap; }
.footer-lang{ text-align:center; margin:10px 0; }

/* ---------- Offline banner ---------- */
#fc-offline{
  position:fixed; top:0; left:0; right:0; z-index:100004; text-align:center;
  background:var(--electric); color:#fff; font-weight:700; font-size:.82rem; padding:6px;
  transform:translateY(-100%); transition:transform .25s ease;
}
#fc-offline.show{ transform:none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .ticker-track, .particle, body::before{ animation:none !important; }
  .fc-js .fc-reveal{ opacity:1; transform:none; transition:none; }
}
@media print{
  .sidebar,.fc-bottomnav,#fc-top,.ticker-bar,.navbar,#fc-progress{ display:none !important; }
}

/* ---------- Landing header: one tidy row on phones ---------- */
@media(max-width:767px){
  .container.navbar.nav-landing{
    flex-wrap:nowrap; gap:8px; margin:0; padding:8px 12px;
    border-radius:0 0 16px 16px;
  }
  .nav-landing .brand{ order:1; flex:0 1 auto; min-width:0; }
  .nav-landing .brand img{ width:100px !important; max-width:30vw !important; height:auto; }
  .nav-landing > div:last-child{ order:2; margin-left:auto; gap:8px !important; flex:0 0 auto; align-items:center; }
  .nav-landing .hamburger{ order:3; min-width:40px !important; min-height:40px !important; padding:6px 2px !important; }
  .nav-landing .hamburger span{ width:24px !important; }
  .nav-landing .navlinks{ order:4; }
  .nav-landing .btn.btn-primary{
    padding:9px 14px; font-size:.82rem; line-height:1.1; white-space:nowrap; border-radius:10px;
  }
  .nav-landing .fc-search-btn{ flex:0 0 40px; }
}
@media(max-width:360px){
  .nav-landing .brand img{ width:84px !important; }
  .nav-landing .btn.btn-primary{ padding:8px 10px; font-size:.76rem; }
}

/* ---------- Telegram help button ---------- */
.fc-help{
  position:fixed; left:16px; bottom:16px; z-index:8998;
  display:inline-flex; align-items:center; gap:8px; padding:11px 16px;
  background:#229ED9; color:#fff; border-radius:999px; text-decoration:none;
  font:700 .85rem var(--font-body); box-shadow:0 8px 22px rgba(0,0,0,.4);
  transition:transform .2s ease, box-shadow .2s ease;
}
.fc-help:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(34,158,217,.45); }
@media(max-width:767px){
  .fc-help{ padding:12px; bottom:16px; }
  .fc-help .lbl{ display:none; }
  body.has-bottomnav .fc-help{ bottom:calc(80px + env(safe-area-inset-bottom)); }
}
@media print{ .fc-help{ display:none !important; } }