nav{position:relative;}

#bci-ball-wrap{position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:9992;
  opacity:0;transition:opacity 0.25s ease;}
#bci-ball-wrap svg{display:block;margin:-9px 0 0 -9px;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.25));}

#bci-flag-cursor{position:fixed;top:0;left:0;width:0;height:0;pointer-events:none;z-index:9993;
  opacity:0;transition:opacity 0.25s ease;}
#bci-flag-cursor svg{display:block;margin:-31px 0 0 -11px;filter:drop-shadow(0 2px 3px rgba(0,0,0,0.3));}

body.bci-custom-cursor,body.bci-custom-cursor *{cursor:none !important;}
body.bci-custom-cursor input,body.bci-custom-cursor textarea{cursor:text !important;}

.bci-trail-dot{position:fixed;top:0;left:0;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  border-radius:50%;background:var(--gold,#B0532B);pointer-events:none;z-index:9991;
  opacity:0.55;animation:bci-trail-fade 0.45s ease forwards;}
@keyframes bci-trail-fade{to{opacity:0;transform:scale(0.2);}}

.bci-divot{position:absolute;width:10px;height:6px;margin:-3px 0 0 -5px;border-radius:50%;
  background:rgba(32,48,59,0.18);pointer-events:none;transform:scale(0.3);opacity:0.9;
  animation:bci-divot-pop 0.5s ease forwards;}
@keyframes bci-divot-pop{0%{transform:scale(0.3);opacity:0.9;}70%{transform:scale(1.6);opacity:0.35;}100%{transform:scale(2.2);opacity:0;}}

.bci-flag-plant{position:fixed;top:90px;left:50%;transform:translate(-50%,-30px);opacity:0;
  z-index:9996;background:var(--cream,#EDE6D6);border:1px solid var(--border,#D9CFB8);
  border-radius:6px;padding:10px 16px;display:flex;align-items:center;gap:8px;
  box-shadow:0 6px 20px rgba(0,0,0,0.18);
  transition:transform 0.5s cubic-bezier(.34,1.56,.64,1),opacity 0.3s ease;}
.bci-flag-plant.show{opacity:1;transform:translate(-50%,0);}
.bci-flag-label{font-family:var(--serif-display,serif);font-size:0.82rem;letter-spacing:1px;
  color:var(--text-dark,#20303B);text-transform:uppercase;}

#bci-pull-refresh{position:fixed;top:66px;left:50%;transform:translateX(-50%) translateY(-10px);
  opacity:0;z-index:9994;pointer-events:none;perspective:300px;}
.bci-pull-card{background:var(--cream,#EDE6D6);border:1px solid var(--border,#D9CFB8);
  border-radius:6px;padding:6px 14px;font-family:var(--serif-display,serif);font-size:0.72rem;
  letter-spacing:1px;color:var(--text-dark,#20303B);text-transform:uppercase;
  box-shadow:0 4px 14px rgba(0,0,0,0.14);}

#bci-bottomnav{display:none;left:0;right:0;z-index:9993;height:56px;
  background:var(--green-dark,#20303b);border-top:1px solid rgba(217,139,95,0.25);
  align-items:stretch;justify-content:space-around;}
#bci-bottomnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:rgba(255,255,255,0.55);text-decoration:none;font-family:var(--serif-display,serif);
  font-size:0.58rem;letter-spacing:1px;text-transform:uppercase;}
#bci-bottomnav a svg{width:20px;height:20px;}
#bci-bottomnav a.active{color:var(--gold,#d98b5f);}
@media (max-width:640px){
  #bci-bottomnav{display:flex;}
}

@media (prefers-reduced-motion:reduce){
  #bci-ball-wrap,.bci-trail-dot,.bci-divot,.bci-flag-plant,#bci-pull-refresh{display:none !important;}
}

#bci-notify-banner{position:fixed;left:0.75rem;right:0.75rem;bottom:0.75rem;z-index:9995;
  background:var(--green-dark,#20303b);border-radius:8px;padding:0.75rem 0.85rem;
  display:flex;align-items:center;gap:0.75rem;box-shadow:0 6px 20px rgba(0,0,0,0.25);}
#bci-notify-banner span{flex:1;color:white;font-family:var(--serif-body,Arial,sans-serif);font-size:0.82rem;line-height:1.3;}
#bci-notify-banner #bci-notify-btn{flex-shrink:0;background:var(--gold,#d98b5f);color:var(--green-dark,#20303b);
  border:none;border-radius:4px;padding:0.5rem 0.9rem;font-family:var(--serif-display,serif);
  font-size:0.68rem;letter-spacing:1px;text-transform:uppercase;font-weight:700;cursor:pointer;white-space:nowrap;}
#bci-notify-banner #bci-notify-close{flex-shrink:0;background:none;border:none;color:rgba(255,255,255,0.5);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:0 0.15rem;}

#bci-account-wrap{position:relative;display:inline-flex;align-items:center;margin-right:0.6rem;}
#bci-account-btn{background:none;border:1px solid rgba(217,139,95,0.4);border-radius:4px;padding:6px 12px;
  font-family:var(--serif-body,Arial,sans-serif);font-size:0.78rem;color:rgba(255,255,255,0.85);
  cursor:pointer;white-space:nowrap;transition:border-color 0.2s;}
#bci-account-btn:hover{border-color:var(--gold,#d98b5f);}
#bci-account-panel{position:absolute;top:calc(100% + 10px);left:0;width:270px;max-width:82vw;
  background:white;border:1px solid var(--border,#d9cfb8);border-radius:8px;padding:1.1rem;
  box-shadow:0 10px 28px rgba(0,0,0,0.22);z-index:500;}
#bci-account-panel.hidden{display:none;}
.bci-ap-note{font-family:var(--serif-body,Arial,sans-serif);font-size:0.8rem;color:var(--text-muted,#6f6558);
  line-height:1.5;margin-bottom:0.9rem;}
.bci-ap-label{display:block;font-family:var(--serif-display,serif);font-size:0.58rem;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-muted,#6f6558);margin-bottom:0.4rem;}
#bci-account-panel input{width:100%;padding:0.65rem 0.75rem;border:1px solid var(--border,#d9cfb8);
  border-radius:5px;font-family:var(--serif-body,Arial,sans-serif);font-size:0.88rem;
  background:#fafaf7;margin-bottom:0.75rem;color:var(--text-dark,#20303b);}
#bci-account-panel input:focus{outline:none;border-color:var(--gold,#d98b5f);background:white;}
.bci-ap-btn{width:100%;padding:0.65rem;background:var(--green-dark,#20303b);color:var(--gold,#d98b5f);
  border:none;border-radius:5px;font-family:var(--serif-display,serif);font-size:0.66rem;
  letter-spacing:1.5px;text-transform:uppercase;font-weight:700;cursor:pointer;}
.bci-ap-btn:disabled{opacity:0.6;cursor:default;}
.bci-ap-status{margin-top:0.6rem;text-align:center;font-family:var(--serif-body,Arial,sans-serif);
  font-size:0.78rem;color:var(--text-muted,#6f6558);line-height:1.4;min-height:1.1em;}
.bci-ap-status.success{color:var(--green-mid,#4c7a82);}
.bci-ap-status.error{color:#b0532b;}
#bci-account-panel .hidden{display:none;}
#bci-account-panel #bci-ap-code-row{margin-top:0.9rem;padding-top:0.9rem;border-top:1px solid var(--border,#d9cfb8);}
.bci-ap-signedin{font-family:var(--serif-body,Arial,sans-serif);font-size:0.85rem;color:var(--text-muted,#6f6558);
  margin-bottom:0.9rem;padding-bottom:0.9rem;border-bottom:1px solid var(--border,#d9cfb8);}
.bci-ap-signedin strong{color:var(--text-dark,#20303b);}
.bci-ap-links{display:flex;flex-direction:column;gap:0.45rem;margin-bottom:0.9rem;}
.bci-ap-links a{display:block;padding:0.6rem 0.7rem;border:1px solid var(--border,#d9cfb8);border-radius:5px;
  text-align:center;text-decoration:none;font-family:var(--serif-display,serif);font-size:0.66rem;
  letter-spacing:1px;text-transform:uppercase;color:var(--text-dark,#20303b);}
.bci-ap-links a:hover{border-color:var(--gold,#d98b5f);}
.bci-ap-signout{width:100%;background:none;border:1px solid var(--border,#d9cfb8);border-radius:5px;
  padding:0.55rem;font-family:var(--serif-body,Arial,sans-serif);font-size:0.78rem;
  color:var(--text-muted,#6f6558);cursor:pointer;}
.bci-ap-signout:hover{border-color:#b0532b;color:#b0532b;}
@media(max-width:400px){
  #bci-account-panel{position:fixed;top:auto;right:0.75rem;left:0.75rem;width:auto;max-width:none;}
}

/* ============================================================
   Site-wide motion polish. Auto-applied via JS in bci-features.js
   to common card/list-row elements across every page — nothing
   here needs a class added by hand in any page's own HTML.
   ============================================================ */
.bci-reveal{opacity:0;transform:translateY(18px);
  transition:opacity 0.55s ease,transform 0.55s ease;}
.bci-reveal.bci-revealed{opacity:1;transform:translateY(0);}
@media(prefers-reduced-motion:reduce){
  .bci-reveal{opacity:1;transform:none;transition:none;}
}

/* Subtle, consistent hover/tap feedback everywhere — doesn't change
   what happens on hover, just makes whatever a page's own CSS already
   does (colour, background, border, position shifts) ease in rather
   than snap, and gives cards/buttons a small, quiet lift and tap-down. */
a,button,.link-row,.player-card,.kit-card,.result-team,.comp-card,
.entry-card,.history-item,.prizes-card{
  transition:transform 0.18s ease,box-shadow 0.18s ease,
    background-color 0.18s ease,border-color 0.18s ease,
    color 0.18s ease,opacity 0.18s ease,padding 0.18s ease;
}
.link-row:hover,.comp-card:hover,.prizes-card:hover{
  box-shadow:0 4px 16px rgba(0,0,0,0.06);
}
.player-card:active,.kit-card:active,button:active,
.link-row:active,.comp-card:active{
  transform:scale(0.98);
}
@media(prefers-reduced-motion:reduce){
  a,button,.link-row,.player-card,.kit-card,.result-team,.comp-card,
  .entry-card,.history-item,.prizes-card{transition:none;}
}

/* Smooth slide/fade for the nav dropdown menu, overriding each page's own
   instant display:none/block toggle — one shared rule rather than editing
   the same pattern 12 times. */
.dropdown{
  display:block !important;
  visibility:hidden;opacity:0;max-height:0;overflow:hidden;pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 0.22s ease,transform 0.22s ease,max-height 0.22s ease,
    visibility 0s linear 0.22s;
}
.dropdown.open{
  visibility:visible;opacity:1;max-height:600px;pointer-events:auto;
  transform:translateY(0);
  transition:opacity 0.22s ease,transform 0.22s ease,max-height 0.22s ease,
    visibility 0s linear 0s;
}
@media(prefers-reduced-motion:reduce){
  .dropdown{transition:none;}
}

/* Add-to-home-screen nudge — built in bci-features.js */
#bci-a2hs-banner{
  position:fixed;left:0.75rem;right:0.75rem;bottom:12px;z-index:9990;
  background:var(--green-dark,#16291d);color:white;border-radius:8px;
  padding:0.8rem 0.9rem;display:flex;align-items:center;gap:0.75rem;
  box-shadow:0 6px 20px rgba(0,0,0,0.25);
  transform:translateY(calc(100% + 20px));opacity:0;
  transition:transform 0.3s cubic-bezier(0.32,0.72,0,1),opacity 0.3s ease;
}
#bci-a2hs-banner.visible{transform:translateY(0);opacity:1;}
.bci-a2hs-text{flex:1;font-family:var(--serif-body,inherit);font-size:0.82rem;line-height:1.4;}
.bci-a2hs-btn{flex-shrink:0;background:var(--gold,#c9a84c);color:var(--green-dark,#16291d);border:none;
  border-radius:5px;padding:0.5rem 0.9rem;font-family:var(--serif-display,inherit);font-size:0.7rem;
  letter-spacing:1px;text-transform:uppercase;font-weight:700;cursor:pointer;}
.bci-a2hs-close{flex-shrink:0;background:none;border:none;color:rgba(255,255,255,0.6);
  font-size:1.3rem;line-height:1;cursor:pointer;padding:0 0.2rem;}
.bci-a2hs-close:hover{color:white;}
@media(prefers-reduced-motion:reduce){
  #bci-a2hs-banner{transition:none;}
}