/* ============================================================
   SENNA PUNNAYUR — styles.css
   MatchBrain-inspired dark navy design
   ============================================================ */

:root {
  /* SENNA brand theme — blue & white, matching the official SENNA logo
     (black "S" mark on white) and the community's blue name-board identity. */
  --bg:        #f3f6fb;
  --bg2:       #ffffff;
  --card:      #ffffff;
  --card2:     #f5f8fd;
  --card3:     #e8eef9;
  --text:      #111a31;
  --text2:     #3e4d68;
  --muted:     #5a6a86; /* darkened from #6e7d96 — old value was ~4.17:1 against
                            white cards, just under WCAG AA's 4.5:1 for the small
                            labels/captions it's used on everywhere; this is ~5.5:1 */
  --navy:      #131f49;
  --gold:      #3156ad;
  --gold-soft: rgba(49,86,173,.10);
  --gold-glow: rgba(49,86,173,.24);
  --cyan:      #55d2e3;
  --cyan-soft: rgba(85,210,227,.16);
  --purple:    #3156ad;
  --green:     #11875d;
  --red:       #d83b50;
  --border:    rgba(19,31,73,.11);
  --radius:    18px;
  --shadow:    0 14px 40px rgba(19,31,73,.09);
  --maxw:      880px;
  --predict-h: 70px;
  --bnav-h:    70px;
  /* Primary brand blue — used for hero banners, links, and primary accents */
  --blue:      #3156ad;
  --blue-dark: #131f49;
  --blue-soft: rgba(29,78,216,.10);
  --blue-glow: rgba(29,78,216,.22);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

h1,h2,h3,.display { font-family:"Bebas Neue",sans-serif; letter-spacing:.5px; line-height:1.05; font-weight:400; }
.mono { font-family:"Space Mono",monospace; }
a { color:inherit; text-decoration:none; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 16px; }
.wide { max-width:1100px; margin:0 auto; padding:0 20px; }

/* colours */
.gold  { color:var(--gold); }
.green { color:var(--green); }
.red   { color:var(--red); }
.purple{ color:var(--purple); }
.muted { color:var(--muted); }
.center{ text-align:center; }
.hidden{ display:none !important; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display:inline-flex; align-items:center; gap:8px; border:1px solid transparent;
  border-radius:999px; padding:11px 20px; font-weight:600; font-size:14px;
  cursor:pointer; transition:transform .15s,background .2s,box-shadow .2s;
  background:var(--card2); color:var(--text); font-family:"Inter",sans-serif;
}
.btn:hover { transform:translateY(-2px); }
.btn:active { transform:none; }
.btn-gold   { background:var(--gold); color:#1a1a1a; box-shadow:0 4px 16px var(--gold-soft); }
.btn-gold:hover { box-shadow:0 8px 24px var(--gold-glow); }
.btn-outline { background:transparent; border-color:var(--gold); color:var(--gold); }
.btn-outline:hover { background:var(--gold-soft); }
.btn-ghost  { background:transparent; border-color:var(--border); }
.btn-green  { background:var(--green); color:#1a2a1a; }
.btn-red    { background:var(--red); color:#fff; }
.btn-block  { width:100%; justify-content:center; }
.btn-sm     { padding:8px 14px; font-size:13px; }
.btn-icon   { width:34px; height:34px; padding:0; border-radius:10px; justify-content:center; background:var(--bg2); border:1px solid var(--border); color:var(--muted); }

/* ============================================================
   PREDICT HEADER (sticky, mobile-width)
   ============================================================ */
.predict-header {
  position:sticky; top:0; z-index:90;
  background:var(--card);
  border-bottom:1px solid var(--border);
  height:var(--predict-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  max-width:100%;
}
.predict-left { display:flex; align-items:center; gap:8px; position:relative; }
.predict-header .brand {
  display:flex; align-items:center; gap:10px; cursor:pointer;
}
.predict-header .brand-logo {
  width:36px; height:36px; border-radius:10px; object-fit:cover;
}
.predict-header .brand-name {
  font-family:"Bebas Neue",sans-serif; font-size:22px; letter-spacing:2px;
  white-space:nowrap;
}
.predict-header .brand-name span { color:var(--gold); }
.brand-name-sub { font-size:.62em; letter-spacing:1px; }
.predict-header .hdr-icons { display:flex; gap:8px; }

/* Community menu dropdown — anchored under the hamburger icon at top-left.
   Lets every visitor reach Home/About/Activities/Gallery/Events/Members/
   Contact from the predict-game screens; editing those pages stays
   admin-only via the separate gated Admin icon. */
.predict-community-menu {
  display:none; flex-direction:column; gap:2px;
  position:absolute; top:calc(var(--predict-h) - 4px); left:0;
  background:var(--card2); border:1px solid var(--border); border-radius:12px;
  padding:8px; min-width:190px; box-shadow:var(--shadow); z-index:95;
}
.predict-community-menu.open { display:flex; }
.predict-community-menu a {
  padding:10px 12px; border-radius:8px; font-size:14px; color:var(--text2);
  cursor:pointer; transition:background .15s,color .15s;
}
.predict-community-menu a:hover { background:var(--card3); color:var(--text); }
.predict-community-menu a.active { color:var(--gold); background:var(--gold-soft); }

/* ============================================================
   COMMUNITY NAV (top, wider pages)
   ============================================================ */
header.comm-nav {
  position:sticky; top:0; z-index:90;
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
  display:none; /* shown only on community pages */
}
header.comm-nav.visible { display:block; }
.comm-nav-inner {
  display:flex; align-items:center; justify-content:space-between;
  height:62px; max-width:1100px; margin:0 auto; padding:0 20px;
}
.comm-brand { display:flex; align-items:center; gap:10px; cursor:pointer; }
.comm-brand img { height:36px; width:36px; border-radius:8px; }
.comm-brand .cname { font-family:"Bebas Neue",sans-serif; font-size:22px; letter-spacing:2px; }
.comm-brand .cname span { color:var(--gold); }
.comm-links { display:flex; align-items:center; gap:2px; }
.comm-links a {
  padding:7px 12px; border-radius:8px; font-size:13px; font-weight:500;
  color:var(--muted); transition:color .2s,background .2s;
}
.comm-links a:hover { color:var(--text); }
.comm-links a.active { color:var(--gold); background:var(--gold-soft); }
.comm-actions { display:flex; align-items:center; gap:8px; }
.hamburger { display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.hamburger span { width:22px; height:2px; background:var(--text); border-radius:2px; }
.mobile-comm-links {
  display:none; flex-direction:column; background:var(--card); border-bottom:1px solid var(--border); padding:12px 16px; gap:4px;
}
.mobile-comm-links.open { display:flex; }
.mobile-comm-links a { padding:10px 14px; border-radius:8px; color:var(--muted); font-size:15px; }
.mobile-comm-links a.active { color:var(--gold); background:var(--gold-soft); }

/* ============================================================
   BOTTOM NAVIGATION
   ============================================================ */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; height:var(--bnav-h);
  background:var(--card); border-top:1px solid var(--border);
  display:flex; align-items:stretch; z-index:100;
  padding-bottom:env(safe-area-inset-bottom,0px);
  display:none; /* shown only on predict pages */
}
.bottom-nav.visible { display:flex; }
.bnav-item {
  flex:1; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:4px; cursor:pointer;
  color:var(--muted); font-size:11px; font-weight:500;
  transition:color .2s; border:0; background:none; font-family:"Inter",sans-serif;
}
.bnav-item.active { color:var(--gold); }
.bnav-icon { font-size:22px; line-height:1; display:flex; }
.bnav-svg { width:23px; height:23px; transition:transform .2s var(--cinematic-ease); }
.bnav-item.active .bnav-svg { transform:translateY(-1px) scale(1.06); }
.bnav-item:hover .bnav-svg { transform:translateY(-1px); }

/* ============================================================
   PAGES + TRANSITIONS
   ============================================================ */
.page { display:none; animation:fade .35s ease; }
.page.active { display:block; }
@keyframes fade { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:none;} }

/* predict pages have bottom-nav spacer */
.predict-page { padding-bottom:calc(var(--bnav-h) + 16px); }
/* community pages have no bottom nav */
.comm-page { padding-bottom:40px; }

/* ============================================================
   OVERLAPPING FLAG CIRCLES  ← key MatchBrain visual
   ============================================================ */
.flag-pair {
  position:relative; width:68px; height:46px; flex-shrink:0;
}
.flag-pair img {
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  position:absolute; top:1px; border:2px solid var(--card);
  background:var(--bg2);
}
.flag-pair img.flag-home { left:0;  z-index:2; }
.flag-pair img.flag-away { left:22px; z-index:1; }
/* emoji fallback inside a circle */
.flag-emoji { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; font-size:24px; background:var(--bg2); border:2px solid var(--card); }
.flag-pair .flag-emoji:first-child { position:absolute; left:0; z-index:2; }
.flag-pair .flag-emoji:last-child  { position:absolute; left:22px; z-index:1; }

/* ============================================================
   MATCH CARDS  ← MatchBrain style
   ============================================================ */
.mb-card {
  background:var(--card); border-radius:var(--radius);
  padding:14px 16px; display:flex; align-items:center; gap:12px;
  margin-bottom:10px; cursor:pointer; transition:background .2s;
}
.mb-card:hover { background:var(--card2); }
.mb-card .card-left { display:flex; align-items:center; gap:12px; flex:1; min-width:0; }
.mb-card .card-info { flex:1; min-width:0; }
.mb-card .teams { font-weight:700; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mb-card .meta { font-size:12px; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; }
.mb-card .card-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex-shrink:0; }
.mb-card .pred-score { font-family:"Bebas Neue",sans-serif; font-size:26px; letter-spacing:1px; color:var(--gold); line-height:1; }
.mb-card .pred-score.no-pred { font-size:14px; color:var(--muted); font-family:"Inter",sans-serif; }
.mb-card .card-actions { display:flex; gap:6px; }
.mb-card .act-btn { width:30px; height:30px; border-radius:8px; background:var(--bg2); border:1px solid var(--border); display:grid; place-items:center; cursor:pointer; color:var(--muted); font-size:14px; transition:background .15s,color .15s; }
.mb-card .act-btn:hover { background:var(--card3); color:var(--text); }

/* actual result below the card */
.mb-card-result {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:10px; padding-top:10px; border-top:1px solid var(--border);
}
.mb-card-result .actual { font-size:13px; color:var(--muted); }
.mb-card-result .actual b { color:var(--text2); }
.mb-card-result .earned { font-size:15px; font-weight:700; color:var(--gold); }
.mb-card-result .earned.zero { color:var(--red); }

/* expandable prediction input */
.pred-input-area {
  margin-top:12px; padding-top:12px; border-top:1px solid var(--border);
  display:flex; align-items:center; gap:10px;
}
.pred-score-box {
  display:flex; align-items:center; gap:8px; flex:1;
}
.pred-score-box input {
  width:56px; height:56px; text-align:center; font-size:24px; font-family:"Space Mono",monospace;
  background:var(--bg2); border:2px solid var(--border); color:var(--text);
  border-radius:12px; transition:border-color .2s;
}
.pred-score-box input:focus { outline:none; border-color:var(--gold); }
.pred-score-box .sep { color:var(--muted); font-size:18px; }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  font-family:"Space Mono",monospace; font-size:11px; padding:3px 9px;
  border-radius:999px; letter-spacing:.5px; font-weight:700;
}
.badge-live      { background:rgba(248,113,113,.15); color:var(--red); }
.badge-finished  { background:rgba(74,222,128,.1);   color:var(--green); }
.badge-upcoming  { background:var(--bg2);             color:var(--muted); }
.badge-locked    { background:var(--gold-soft);       color:var(--gold); }
.badge-group     { background:var(--gold-soft);       color:var(--gold); }
.badge-correct   { background:rgba(74,222,128,.1);   color:var(--green); }
.badge-wrong     { background:rgba(248,113,113,.1);  color:var(--red); }

/* ============================================================
   SECTION HEADERS (Dashboard style)
   ============================================================ */
.section-hdr {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:14px;
}
.section-hdr h2 { font-size:20px; font-weight:700; display:flex; align-items:center; gap:8px; }
.section-hdr a  { font-size:13px; color:var(--gold); display:flex; align-items:center; gap:4px; }

/* ============================================================
   DASHBOARD
   ============================================================ */
#page-dashboard .hero-block {
  background:linear-gradient(135deg,var(--blue) 0%,var(--blue-dark) 100%);
  border-radius:var(--radius); padding:24px 20px; margin-bottom:20px;
  text-align:center; position:relative; overflow:hidden;
  box-shadow:0 8px 28px var(--blue-glow);
}
#page-dashboard .hero-block::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(600px circle at 50% 0%,rgba(255,255,255,.14),transparent 60%);
}
#page-dashboard .hero-logo {
  height:72px; width:72px; border-radius:18px; object-fit:cover; margin-bottom:12px; position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.25);
}
#page-dashboard .hero-title { font-family:"Bebas Neue",sans-serif; font-size:34px; letter-spacing:2px; position:relative; color:#fff; }
#page-dashboard .hero-sub { color:rgba(255,255,255,.78); font-size:14px; margin-top:2px; position:relative; }
#page-dashboard .stats-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:18px; position:relative;
}
#page-dashboard .stat-box { background:var(--bg2); border-radius:12px; padding:12px 8px; text-align:center; }
#page-dashboard .stat-val { font-family:"Space Mono",monospace; font-size:22px; font-weight:700; }
#page-dashboard .stat-lbl { font-size:11px; color:var(--muted); margin-top:2px; text-transform:uppercase; letter-spacing:.5px; }
#page-dashboard .stat-val.rank   { color:var(--purple); }
#page-dashboard .stat-val.preds  { color:var(--text); }
#page-dashboard .stat-val.pts    { color:var(--green); }

/* ============================================================
   MY PREDICTIONS (filter tabs + results)
   ============================================================ */
.pred-filter-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px;
}
.pred-filter-btn {
  background:var(--card); border:2px solid transparent; border-radius:12px;
  padding:10px 6px; text-align:center; cursor:pointer; transition:border-color .2s;
}
.pred-filter-btn.active { border-color:var(--green); }
.pred-filter-btn .f-num { font-family:"Space Mono",monospace; font-size:22px; font-weight:700; }
.pred-filter-btn.active .f-num { color:var(--green); }
.pred-filter-btn .f-lbl { font-size:11px; color:var(--muted); }

.pred-summary { text-align:center; margin-bottom:18px; font-size:14px; color:var(--muted); }
.pred-summary b { color:var(--gold); }

/* ============================================================
   STANDINGS
   ============================================================ */
.standing-row {
  display:flex; align-items:center; gap:14px;
  padding:14px 16px; border-bottom:1px solid var(--border);
  background:var(--card); transition:background .15s;
}
.standing-row:first-child { border-radius:var(--radius) var(--radius) 0 0; }
.standing-row:last-child  { border-bottom:none; border-radius:0 0 var(--radius) var(--radius); }
.standing-row:hover { background:var(--card2); }
.standing-row.top3 { background:var(--card2); }
.standing-row.me   { background:rgba(240,180,41,.08); }

.s-rank { font-family:"Space Mono",monospace; font-size:15px; font-weight:700; min-width:34px; text-align:center; color:var(--muted); }
.s-rank.gold   { color:#ffd700; font-size:22px; }
.s-rank.silver { color:#c0c0c0; font-size:22px; }
.s-rank.bronze { color:#cd7f32; font-size:22px; }

.s-info { flex:1; min-width:0; }
.s-name { font-weight:700; font-size:15px; }
.s-team { font-size:13px; color:var(--gold); font-weight:600; margin-top:1px; }
.s-preds{ font-size:12px; color:var(--muted); margin-top:1px; }

.s-pts-wrap { text-align:right; }
.s-pts { font-family:"Space Mono",monospace; font-size:22px; font-weight:700; color:var(--gold); }
.s-pts-lbl { font-size:11px; color:var(--muted); }

/* ============================================================
   MY LINEUP (goal scorers)
   ============================================================ */
.lineup-match {
  background:var(--card); border-radius:var(--radius); padding:14px 16px; margin-bottom:12px;
}
.lineup-match-hdr { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.lineup-match-name { font-weight:700; font-size:15px; flex:1; }
.scorer-input {
  display:flex; gap:8px; align-items:center; margin-bottom:10px;
}
.scorer-input input {
  flex:1; padding:10px 14px; background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-size:14px;
}
.scorer-input input:focus { outline:none; border-color:var(--gold); }
.scorer-tag {
  display:inline-flex; align-items:center; gap:6px; background:var(--gold-soft);
  color:var(--gold); padding:5px 10px; border-radius:8px; font-size:13px; font-weight:600; margin:4px;
}
.scorer-tag .rm { cursor:pointer; opacity:.7; }
.scorer-tag .rm:hover { opacity:1; }

/* ============================================================
   HOW TO PLAY
   ============================================================ */
.htp-card {
  background:var(--card); border-radius:var(--radius); padding:16px 18px; margin-bottom:12px;
}
.htp-title { font-weight:700; font-size:16px; margin-bottom:4px; }
.htp-sub   { color:var(--muted); font-size:13px; margin-bottom:14px; }
.htp-rule {
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg2); border-radius:12px; padding:12px 14px; margin-bottom:8px;
}
.htp-rule.highlight { background:var(--gold-soft); border:1px solid var(--gold); }
.htp-rule-desc .rt { font-weight:600; font-size:14px; }
.htp-rule-desc .rd { font-size:12px; color:var(--muted); margin-top:2px; }
.htp-pts { background:var(--card3); color:var(--gold); font-family:"Space Mono",monospace; font-weight:700; padding:6px 12px; border-radius:8px; font-size:14px; }
.htp-rule.highlight .htp-pts { background:var(--gold); color:#1a1a1a; }
.htp-examples { background:var(--bg2); border-radius:12px; padding:14px; margin-top:8px; }
.htp-ex-row { display:flex; justify-content:space-between; font-size:13px; padding:4px 0; color:var(--muted); border-bottom:1px solid var(--border); }
.htp-ex-row:last-child { border-bottom:none; }
.htp-ex-row .ep-green { color:var(--green); font-weight:700; }
.htp-ex-row .ep-red   { color:var(--red);   font-weight:700; }

/* ============================================================
   AUTH MODAL
   ============================================================ */
.modal { position:fixed; inset:0; background:rgba(7,17,39,.72); backdrop-filter:blur(3px); display:none; place-items:center; z-index:300; padding:20px; }
.modal.open { display:grid; }
.modal .box {
  background:var(--card); border:1px solid rgba(85,210,227,.25); border-radius:20px;
  padding:30px 28px; width:100%; max-width:400px; position:relative;
  box-shadow:0 30px 80px rgba(7,17,39,.35),0 0 0 1px rgba(255,255,255,.6) inset;
  animation:authModalIn .35s var(--cinematic-ease) both;
}
.modal .box::before {
  content:""; position:absolute; top:0; left:18px; right:18px; height:3px; border-radius:0 0 99px 99px;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
}
@keyframes authModalIn { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }
.modal .m-close {
  position:absolute; top:14px; right:16px; width:30px; height:30px; display:grid; place-items:center;
  cursor:pointer; font-size:22px; color:var(--muted); background:var(--card2); border:1px solid var(--border);
  border-radius:50%; transition:color .15s,border-color .15s,transform .15s;
}
.modal .m-close:hover { color:var(--blue); border-color:var(--cyan); transform:rotate(90deg); }
/* Same mark used in the header — kept small/centered/premium, with its own
   ring + shadow since the mark itself is plain navy strokes on white and
   would otherwise blend into the modal's white card. */
.auth-modal-mark {
  height:52px; width:52px; object-fit:contain; padding:8px; margin-bottom:8px;
  background:#fff; border:1px solid rgba(85,210,227,.5); border-radius:14px;
  box-shadow:0 8px 20px rgba(49,86,173,.18);
}
@media (prefers-reduced-motion:reduce) {
  .modal .box { animation:none !important; }
  .modal .m-close:hover { transform:none; }
}

/* ============================================================
   FORMS
   ============================================================ */
.field { margin-bottom:12px; }
.field label { display:block; font-family:"Space Mono",monospace; font-size:11px; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.8px; }
.field input, .field select, .field textarea {
  width:100%; padding:12px 14px; background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; color:var(--text); font-size:14px; font-family:"Inter",sans-serif;
  transition:border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--gold); }
.field textarea { min-height:90px; resize:vertical; }
.field select option { background:var(--card); }

/* Password show/hide toggle — icon button sits inside the input's own box so
   it doesn't shift layout; input gets right padding so typed text never runs
   under the icon. */
.password-field-row { position:relative; }
.password-field-row input { padding-right:42px; }
.password-toggle-btn {
  position:absolute; top:50%; right:4px; transform:translateY(-50%);
  width:34px; height:34px; display:grid; place-items:center;
  background:none; border:none; border-radius:8px; color:var(--muted); cursor:pointer;
  transition:color .15s,background .15s;
}
.password-toggle-btn:hover,.password-toggle-btn:focus-visible { color:var(--blue); background:var(--card2); }
.password-toggle-btn svg { width:19px; height:19px; }

/* ============================================================
   TOAST
   ============================================================ */
#toasts { position:fixed; bottom:80px; right:16px; z-index:400; display:flex; flex-direction:column; gap:8px; }
.toast {
  background:var(--card2); border:1px solid var(--gold); border-left:4px solid var(--gold);
  padding:12px 16px; border-radius:12px; box-shadow:var(--shadow); min-width:220px; max-width:310px;
  animation:slide-in .3s ease;
}
.toast.success { border-color:var(--green); border-left-color:var(--green); }
.toast.error   { border-color:var(--red);   border-left-color:var(--red); }
.toast .tt { font-weight:700; font-size:13px; }
.toast .tm { font-size:12px; color:var(--muted); margin-top:2px; }
@keyframes slide-in { from{transform:translateX(120%);} to{transform:none;} }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox { position:fixed; inset:0; background:rgba(0,0,0,.93); display:none; place-items:center; z-index:200; padding:30px; }
.lightbox.open { display:grid; }
.lightbox img { max-width:92vw; max-height:84vh; border-radius:12px; }
.lightbox .lb-cap { position:absolute; bottom:20px; left:0; right:0; text-align:center; color:var(--text2); font-family:"Space Mono",monospace; font-size:13px; }
.lightbox .lb-close { position:absolute; top:16px; right:20px; font-size:32px; cursor:pointer; color:#fff; background:none; border:none; }

/* ============================================================
   COMMUNITY PAGES
   ============================================================ */
.block { padding:60px 0; }
.section-title { font-size:clamp(36px,8vw,56px); margin-bottom:8px; }
.section-sub { color:var(--muted); margin-bottom:32px; max-width:640px; }

/* hero — solid brand-blue banner, matching the official SENNA logo's home page */
.comm-hero {
  padding:80px 0 60px; text-align:center;
  background:linear-gradient(160deg,var(--blue) 0%,var(--blue-dark) 100%);
  position:relative; overflow:hidden;
}
.comm-hero::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(700px 360px at 50% -10%,rgba(255,255,255,.14),transparent 70%);
}
.comm-hero .wide { position:relative; }
.comm-hero h1 { font-size:clamp(48px,10vw,96px); color:#fff; }
.comm-hero img.logo-img { box-shadow:0 4px 16px rgba(0,0,0,.25); }

/* stat counters */
.counter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.counter-box { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; text-align:center; }
.counter-num { font-family:"Bebas Neue",sans-serif; font-size:52px; color:var(--gold); }
.counter-lbl { font-family:"Space Mono",monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }

/* activity cards */
.activity-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.activity-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  transition:transform .2s, border-color .2s;
}
.activity-card:hover { transform:translateY(-4px); border-color:var(--gold); }
.activity-card .ac-icon { font-size:36px; }
.activity-card h3 { font-size:24px; margin:12px 0 6px; }
.activity-card p { color:var(--muted); font-size:14px; }

/* timeline */
.timeline { position:relative; padding-left:28px; }
.timeline::before { content:""; position:absolute; left:6px; top:0; bottom:0; width:2px; background:var(--border); }
.tl-item { position:relative; margin-bottom:28px; }
.tl-item::before { content:""; position:absolute; left:-24px; top:6px; width:14px; height:14px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 4px var(--bg); }
.tl-year { font-family:"Space Mono",monospace; color:var(--gold); font-size:13px; }
.tl-title { font-size:22px; margin:4px 0; }
.tl-desc { color:var(--muted); font-size:14px; }

/* members */
.members-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.member-card { text-align:center; }
.member-photo { width:100px; height:100px; border-radius:50%; object-fit:cover; margin:0 auto 12px; border:3px solid var(--gold); background:var(--card2); display:grid; place-items:center; font-family:"Bebas Neue",sans-serif; font-size:36px; color:var(--gold); }
.member-name { font-weight:600; }
.member-role { font-family:"Space Mono",monospace; font-size:11px; color:var(--gold); }
.member-cat  { font-size:12px; color:var(--muted); }

/* gallery */
.filters { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.chip { background:var(--card); border:1px solid var(--border); color:var(--muted); padding:7px 14px; border-radius:999px; cursor:pointer; font-size:13px; font-family:"Space Mono",monospace; }
.chip.active { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }
.masonry { columns:4; column-gap:12px; }
.masonry img { width:100%; margin-bottom:12px; border-radius:10px; break-inside:avoid; display:block; cursor:pointer; border:1px solid var(--border); }

/* events */
.event-card { display:flex; gap:16px; align-items:flex-start; }
.date-box { background:var(--gold); color:#1a1a1a; border-radius:12px; padding:10px 12px; text-align:center; min-width:64px; }
.date-box .d { font-family:"Bebas Neue",sans-serif; font-size:28px; line-height:1; }
.date-box .m { font-family:"Space Mono",monospace; font-size:11px; }
.ev-meta { font-family:"Space Mono",monospace; font-size:12px; color:var(--muted); margin:6px 0; }

/* ============================================================
   ADMIN
   ============================================================ */
.tabs { display:flex; gap:6px; border-bottom:1px solid var(--border); margin-bottom:24px; flex-wrap:wrap; }
.tab { background:none; border:0; color:var(--muted); font-weight:600; cursor:pointer; padding:10px 16px; border-bottom:2px solid transparent; font-size:14px; font-family:"Inter",sans-serif; }
.tab.active { color:var(--gold); border-color:var(--gold); }

/* ============================================================
   UTILS
   ============================================================ */
.card  { background:var(--card);  border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.card2 { background:var(--card2); border:1px solid var(--border); border-radius:var(--radius); padding:20px; }
.grid { display:grid; gap:16px; }
.g2 { grid-template-columns:repeat(2,1fr); }
.g3 { grid-template-columns:repeat(3,1fr); }
.g4 { grid-template-columns:repeat(4,1fr); }
.empty { text-align:center; color:var(--muted); padding:40px 20px; font-family:"Space Mono",monospace; font-size:13px; }
.spinner { width:26px; height:26px; border:3px solid var(--border); border-top-color:var(--gold); border-radius:50%; animation:spin 1s linear infinite; margin:30px auto; }
@keyframes spin { to{transform:rotate(360deg);} }
.divider { height:1px; background:var(--border); margin:20px 0; }
.badge-spirit { display:inline-flex; gap:8px; align-items:center; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold); padding:8px 16px; border-radius:999px; font-family:"Space Mono",monospace; font-size:13px; letter-spacing:1px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer { border-top:1px solid var(--border); padding:32px 0; text-align:center; color:var(--muted); }
footer .f-brand { font-family:"Bebas Neue",sans-serif; font-size:24px; letter-spacing:2px; margin:8px 0 4px; }
footer .f-social { display:flex; gap:10px; justify-content:center; margin:14px 0; }

/* user chip in header */
.user-chip { display:flex; align-items:center; gap:8px; font-size:13px; }
.avatar { width:32px; height:32px; border-radius:50%; background:var(--gold); color:#1a1a1a; display:grid; place-items:center; font-weight:700; font-family:"Space Mono",monospace; font-size:14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px) {
  .counter-grid { grid-template-columns:repeat(2,1fr); }
  .activity-grid { grid-template-columns:repeat(2,1fr); }
  .members-grid  { grid-template-columns:repeat(2,1fr); }
  .masonry { columns:2; }
  .g4 { grid-template-columns:repeat(2,1fr); }
  .g3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .comm-links,.desktop-signin { display:none; }
  .hamburger { display:flex; }
  .counter-grid { grid-template-columns:repeat(2,1fr); }
  .activity-grid,.members-grid,.g2,.g3,.g4 { grid-template-columns:1fr; }
  .masonry { columns:1; }
  .block { padding:40px 0; }
  .section-title { font-size:34px; }
  .event-card { flex-direction:column; }
  #toasts { bottom:76px; left:16px; right:16px; }
}

/* ============================================================
   AUTH MODAL — 3-tab redesign (Google / Phone / Email)
   ============================================================ */
.auth-method-tabs {
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-bottom:18px;
}
.req { color:var(--red); }
.auth-method-tab {
  background:var(--card2); border:1px solid var(--border); color:var(--muted);
  padding:10px 6px; border-radius:10px; cursor:pointer; font-size:13px;
  font-family:"Inter",sans-serif; font-weight:600; transition:all .15s;
}
.auth-method-tab.active {
  background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:#fff; border-color:var(--blue);
  box-shadow:0 6px 16px rgba(49,86,173,.28);
}
.auth-tab-panel { animation:fadeIn .2s ease; }
.phone-input-row { display:flex; gap:8px; }
.phone-input-row select {
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:0 8px; font-size:13px; flex-shrink:0;
}
.phone-input-row input { flex:1; }
#otpCode { font-size:22px; letter-spacing:8px; text-align:center; font-family:"Space Mono",monospace; }

/* ============================================================
   3-QUESTION PREDICTION CARD
   ============================================================ */
.pred-badge-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.pred-badge {
  background:var(--card2); border:1px solid var(--border); color:var(--text2);
  font-size:11px; padding:3px 9px; border-radius:999px; font-weight:600;
}
.pred-badge.no-pred { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); }

.pred-input-area {
  background:var(--bg2); border-radius:12px; padding:14px; margin-top:10px;
  border:1px solid var(--border); display:flex; flex-direction:column; gap:12px;
}
.pred-q { display:flex; flex-direction:column; gap:8px; }
.pred-q-label {
  font-size:12px; color:var(--muted); font-family:"Space Mono",monospace;
  letter-spacing:.5px; display:flex; align-items:center; gap:8px;
}
.pred-q-pts {
  background:var(--gold-soft); color:var(--gold); padding:2px 8px;
  border-radius:999px; font-size:10px; font-weight:700; white-space:nowrap;
}
.pred-choice-row { display:flex; gap:6px; }
.pred-choice {
  flex:1; padding:9px 4px; border-radius:10px; background:var(--card);
  border:1px solid var(--border); color:var(--text2); font-size:12px;
  font-weight:600; cursor:pointer; transition:all .15s; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pred-choice:hover  { border-color:var(--gold); color:var(--gold); }
.pred-choice.active { background:var(--gold); color:#1a1a1a; border-color:var(--gold); }

.pred-score-box {
  display:flex; align-items:center; gap:8px;
}
.penalty-pick { margin-top:8px; }
.score-team {
  font-size:11px; color:var(--muted); font-weight:600; flex:1; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.score-input {
  width:52px; height:44px; text-align:center; font-size:22px; font-weight:700;
  font-family:"Bebas Neue",sans-serif; border-radius:10px; border:1px solid var(--border);
  background:var(--card); color:var(--gold); flex-shrink:0;
}
.score-input:focus { border-color:var(--gold); outline:none; }
.admin-ai-response {
  min-height:220px; padding:14px; border-radius:16px; border:1px solid var(--border);
  background:rgba(7,17,39,.78); color:#dfe8ff; white-space:pre-wrap;
  font:12px/1.6 "Space Mono", monospace; overflow:auto;
}
.check input { accent-color: var(--blue); }

/* Live score highlight */
.live-score .actual { color:var(--red) !important; }
.badge-live { background:rgba(248,113,113,.15); color:var(--red); animation:pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.6;} }

/* ============================================================
   HOW TO PLAY — updated design
   ============================================================ */
.htp-banner {
  display:flex; align-items:center; justify-content:space-around;
  background:var(--card); border-radius:var(--radius); padding:18px 12px;
  margin-bottom:16px; border:1px solid var(--border);
}
.htp-banner-item { text-align:center; }
.htp-big-pts { font-family:"Bebas Neue",sans-serif; font-size:40px; color:var(--text); line-height:1; }
.htp-big-pts.gold { color:var(--gold); }
.htp-banner-lbl { font-size:10px; color:var(--muted); font-family:"Space Mono",monospace; letter-spacing:1px; margin-top:4px; }
.htp-banner-total .htp-banner-lbl.gold { color:var(--gold); }
.htp-banner-sep { font-size:24px; color:var(--muted); font-weight:700; }
.htp-q-badge {
  width:44px; height:44px; border-radius:12px; background:var(--gold);
  color:#1a1a1a; font-family:"Bebas Neue",sans-serif; font-size:24px;
  display:grid; place-items:center; flex-shrink:0;
}
.htp-note {
  background:var(--card2); border-radius:10px; padding:10px 12px; margin-top:10px;
  font-size:12px; color:var(--muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

/* ============================================================
   ADMIN PANEL ENHANCEMENTS
   ============================================================ */
.admin-result-row {
  padding:8px 0; border-bottom:1px solid var(--border); font-size:13px;
}
#admUserList table th, #admUserList table td { padding:8px 6px; }
#admUserList table tr:hover { background:var(--card2); }
.msg-row { padding:12px; border:1px solid var(--border); border-radius:12px; margin-bottom:10px; background:var(--card2); }
.msg-row.msg-new { border-color:var(--gold); }

/* ============================================================
   PHONE INPUT (signup) — typeable on all devices
   ============================================================ */
.phone-input-row {
  display:flex; align-items:stretch; gap:8px; width:100%;
}
.country-code-select {
  flex:0 0 115px; min-width:100px; max-width:130px; height:48px;
  position:relative; z-index:2;
  background:var(--bg2); border:1px solid var(--border); color:var(--text);
  border-radius:10px; padding:0 8px; font-size:14px;
}
.phone-number-input {
  flex:1 1 auto; min-width:0; width:100%; height:48px;
  position:relative; z-index:2;
}
.phone-number-input, .country-code-select { pointer-events:auto; }
.phone-number-input:disabled, .country-code-select:disabled { opacity:.6; cursor:not-allowed; }
.field-error { color:var(--red); font-size:12px; margin-top:6px; }

/* Footer links */
.footer-links { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0 4px; font-size:13px; }
.footer-links a { color:var(--gold); cursor:pointer; }
.footer-links span { color:var(--muted); }

/* Rules / privacy lists */
.rules-list { margin:8px 0 0 18px; }
.rules-list li { margin-bottom:8px; color:var(--text2); font-size:14px; line-height:1.5; }

/* ============================================================
   GLOBAL MOBILE IMPROVEMENTS
   ============================================================ */
/* 16px minimum prevents iOS zoom-on-focus */
input, select, textarea { font-size:16px; }

.modal .box { max-height:calc(100vh - 32px); overflow-y:auto; }
.bottom-nav { padding-bottom:env(safe-area-inset-bottom); }

.score-input { min-height:52px; }
.score-input-row { display:flex; align-items:center; gap:12px; }
.team-score-box { flex:1; min-width:0; }
.score-separator { font-size:24px; font-weight:800; }

@media (max-width:420px) {
  .phone-input-row { gap:6px; }
  .country-code-select { flex-basis:98px; font-size:13px; }
  .phone-number-input { font-size:16px; }
  .pred-choice { font-size:11px; padding:9px 2px; }
  .score-input { width:46px; }
  .htp-big-pts { font-size:32px; }
  .auth-method-tab { font-size:12px; padding:9px 4px; }
}

/* Tappable toast */
.toast.clickable { cursor:pointer; border:1px solid var(--green); }

/* ============================================================
   GOAL CELEBRATION ANIMATION (Dashboard hero)
   Plays once when the page loads — player kicks, ball arcs into the
   net, net ripples, "GOAL!" + confetti, then the whole layer fades out
   and removes itself (see app.js init() for the cleanup listener).

   TIMING CHEAT-SHEET (adjust the numbers below to retime):
     .gc-kick-leg   animation-delay .15s, duration .35s  → leg swings
     .gc-ball       animation-delay .25s, duration 1.1s  → ball flight
     .gc-net        animation-delay 1.35s, duration .55s → net ripple
     .gc-goal-text  animation-delay 1.3s,  duration 1s   → "GOAL!" pop
     .gc-confetti   animation-delay ~1.3s–1.5s, duration .8s → burst
     .goal-celebration (gcFadeOut) delay 2.1s, duration .6s → fade out
     Total runtime ≈ 2.7s, matching the 2–3s spec.
   ============================================================ */
.goal-celebration {
  position:absolute; top:4px; left:0; width:100%; height:90px;
  z-index:0; pointer-events:none; overflow:hidden;
  animation: gcFadeOut .6s ease-in 2.1s forwards;
}
.goal-celebration svg { width:100%; height:100%; display:block; }

.gc-kick-leg { transform-box:fill-box; transform-origin:38px 72px; animation:gcKick .35s ease-out .15s both; }
@keyframes gcKick {
  0%   { transform:rotate(-12deg); }
  60%  { transform:rotate(38deg); }
  100% { transform:rotate(10deg); }
}

.gc-ball { transform-box:fill-box; transform-origin:center; animation:gcBallArc 1.1s cubic-bezier(.33,.7,.4,1) .25s both; }
@keyframes gcBallArc {
  0%   { transform:translate(0,0) rotate(0deg); }
  30%  { transform:translate(95px,-58px) rotate(260deg); }
  65%  { transform:translate(195px,-78px) rotate(560deg); }
  100% { transform:translate(278px,-3px) rotate(900deg); }
}

.gc-net { transform-box:fill-box; transform-origin:left center; animation:gcNetRipple .55s ease-out 1.35s; }
@keyframes gcNetRipple {
  0%   { transform:skewX(0deg) scaleX(1); }
  25%  { transform:skewX(-6deg) scaleX(1.04); }
  50%  { transform:skewX(5deg) scaleX(.97); }
  75%  { transform:skewX(-2deg) scaleX(1.02); }
  100% { transform:skewX(0deg) scaleX(1); }
}

.gc-goal-text {
  font-family:"Bebas Neue",sans-serif; font-size:20px; fill:var(--gold);
  opacity:0; animation:gcGoalText 1s ease-out 1.3s both;
}
@keyframes gcGoalText {
  0%   { opacity:0; transform:scale(.5); }
  25%  { opacity:1; transform:scale(1.15); }
  45%  { opacity:1; transform:scale(1); }
  100% { opacity:0; transform:scale(1); }
}

.gc-confetti { opacity:0; transform-box:fill-box; transform-origin:center; }
.gc-confetti.c1 { fill:var(--gold); animation:gcConf1 .8s ease-out 1.32s both; }
.gc-confetti.c2 { fill:#fff;        animation:gcConf2 .8s ease-out 1.38s both; }
.gc-confetti.c3 { fill:var(--green);animation:gcConf3 .8s ease-out 1.40s both; }
.gc-confetti.c4 { fill:var(--gold); animation:gcConf4 .8s ease-out 1.46s both; }
.gc-confetti.c5 { fill:#fff;        animation:gcConf5 .8s ease-out 1.50s both; }
@keyframes gcConf1 { 0%{opacity:0;transform:translate(0,0) scale(.4);} 20%{opacity:1;} 100%{opacity:0;transform:translate(18px,-26px) scale(1);} }
@keyframes gcConf2 { 0%{opacity:0;transform:translate(0,0) scale(.4);} 20%{opacity:1;} 100%{opacity:0;transform:translate(-22px,-18px) scale(1);} }
@keyframes gcConf3 { 0%{opacity:0;transform:translate(0,0) scale(.4);} 20%{opacity:1;} 100%{opacity:0;transform:translate(10px,-30px) scale(1);} }
@keyframes gcConf4 { 0%{opacity:0;transform:translate(0,0) scale(.4);} 20%{opacity:1;} 100%{opacity:0;transform:translate(24px,-10px) scale(1);} }
@keyframes gcConf5 { 0%{opacity:0;transform:translate(0,0) scale(.4);} 20%{opacity:1;} 100%{opacity:0;transform:translate(-14px,-28px) scale(1);} }

@keyframes gcFadeOut {
  from { opacity:1; }
  to   { opacity:0; visibility:hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .goal-celebration { display:none; }
}

/* ============================================================
   SENNA FIFA 2026 — PREMIUM BRAND SYSTEM
   Official name-board palette: royal blue, navy, white and cyan.
   ============================================================ */
body {
  background:
    radial-gradient(circle at 8% 2%, rgba(85,210,227,.10), transparent 28rem),
    radial-gradient(circle at 94% 28%, rgba(49,86,173,.08), transparent 32rem),
    var(--bg);
}

button, input, select, textarea { font:inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:3px solid rgba(85,210,227,.55);
  outline-offset:2px;
}

/* Header uses the cropped icon-only mark (no wordmark baked in — the real
   logo bundles two lines of small text that would be illegible at header
   height), paired with the already-existing .brand-name/.cname text labels. */
.brand-lockup { width:42px; height:38px; object-fit:contain; display:block; }
.brand-name,.comm-brand .cname { color:var(--navy); }

.predict-header {
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
  padding:0 clamp(14px,3vw,28px);
  box-shadow:0 8px 30px rgba(19,31,73,.06);
}
.predict-header::after, header.comm-nav::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--blue),transparent);
}
.predict-header .btn-icon, .btn-icon {
  width:40px; height:40px; color:var(--navy); background:#fff;
  border-color:rgba(49,86,173,.14); box-shadow:0 4px 14px rgba(19,31,73,.05);
}
.predict-header .btn-icon:hover { color:var(--blue); border-color:var(--cyan); }
.hdr-icons { align-items:center; }

header.comm-nav { background:rgba(255,255,255,.95); box-shadow:0 8px 30px rgba(19,31,73,.05); position:sticky; }
.comm-nav-inner { height:70px; }
.comm-links a { font-weight:700; color:var(--text2); }
.comm-links a.active, .mobile-comm-links a.active {
  color:var(--blue); background:var(--cyan-soft);
}
.mobile-comm-links { box-shadow:0 18px 30px rgba(19,31,73,.12); }

.btn { min-height:44px; justify-content:center; letter-spacing:.01em; }
.btn-gold {
  background:linear-gradient(135deg,var(--blue),#25458f);
  color:#fff; box-shadow:0 9px 22px rgba(49,86,173,.22);
}
.btn-gold:hover { box-shadow:0 12px 28px rgba(49,86,173,.32); }
.btn-outline { color:var(--blue); border-color:rgba(49,86,173,.35); background:#fff; }
.btn-outline:hover { background:var(--cyan-soft); border-color:var(--cyan); }
.btn-ghost:hover { border-color:rgba(49,86,173,.28); background:var(--card2); }
.gold { color:var(--blue); }

#page-dashboard .hero-block {
  background:
    radial-gradient(circle at 88% 0%,rgba(85,210,227,.34),transparent 15rem),
    linear-gradient(140deg,#3156ad 0%,#1f3b86 52%,#131f49 100%);
  border:1px solid rgba(255,255,255,.15);
  padding:30px clamp(18px,4vw,34px) 26px;
  box-shadow:0 24px 55px rgba(19,31,73,.22);
}
#page-dashboard .hero-block::before {
  background:
    linear-gradient(110deg,transparent 0 46%,rgba(255,255,255,.035) 46% 47%,transparent 47% 100%),
    radial-gradient(650px circle at 50% 0%,rgba(255,255,255,.13),transparent 62%);
}
#page-dashboard .hero-block::after {
  content:""; position:absolute; width:420px; height:420px; border:1px solid rgba(255,255,255,.09);
  border-radius:50%; right:-230px; bottom:-310px;
}
.predict-brand-panel {
  /* Width here is overridden by the more specific .cinematic-hero
     .predict-brand-panel rule further down for the dashboard hero — this
     base rule only sets the box look (bg/border/shadow), not the size. */
  margin:0 auto 14px; padding:8px 12px;
  background:#fff; border:1px solid rgba(85,210,227,.65); border-radius:13px;
  position:relative; z-index:2; box-shadow:0 10px 30px rgba(6,14,38,.22);
}
.predict-brand-panel img { width:100%; display:block; }
#page-dashboard .hero-kicker {
  position:relative; z-index:2; color:var(--cyan); font:700 10px/1.4 "Space Mono",monospace;
  letter-spacing:1.8px; margin-bottom:7px;
}
#page-dashboard .hero-title { font-size:clamp(34px,6vw,48px); letter-spacing:1.6px; }
#page-dashboard .hero-title span { color:var(--cyan); }
#page-dashboard .hero-sub { max-width:510px; margin:5px auto 0; }
#page-dashboard .stats-row { z-index:2; }
#page-dashboard .stat-box {
  background:rgba(255,255,255,.96); border:1px solid rgba(85,210,227,.28);
  box-shadow:0 8px 22px rgba(6,14,38,.10);
}
#page-dashboard .stat-val.rank, #page-dashboard .stat-val.pts { color:var(--blue); }

.card, .card2, .htp-card, .mb-card, .pred-filter-btn {
  box-shadow:0 8px 28px rgba(19,31,73,.055);
}
.card, .mb-card, .htp-card { border:1px solid rgba(49,86,173,.10); }
.mb-card { cursor:default; position:relative; overflow:hidden; }
.mb-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(var(--cyan),var(--blue)); }
.mb-card:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(19,31,73,.10); }
.pred-input-area { background:#f7f9fd; border-color:rgba(49,86,173,.12); }
.pred-choice:hover { border-color:var(--cyan); color:var(--blue); }
.pred-choice.active { background:var(--blue); color:#fff; border-color:var(--blue); }
.score-input { color:var(--blue); border-width:2px; }
.score-input:focus { border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-soft); }
.pred-q-pts { background:var(--cyan-soft); color:var(--blue); }

.bottom-nav {
  left:50%; right:auto; width:min(720px,100%); transform:translateX(-50%);
  border:1px solid var(--border); border-bottom:0;
  border-radius:20px 20px 0 0; box-shadow:0 -12px 36px rgba(19,31,73,.09);
  background:rgba(255,255,255,.96); backdrop-filter:blur(18px);
}
.bnav-item { position:relative; font-weight:700; }
.bnav-item.active { color:var(--blue); }
.bnav-item.active::before { content:""; position:absolute; top:0; width:30px; height:3px; border-radius:0 0 4px 4px; background:var(--cyan); }
.bnav-icon { font-size:20px; }

.leaderboard-shell { overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); }
.leaderboard-live {
  display:flex; align-items:center; justify-content:center; gap:8px; padding:12px;
  background:linear-gradient(135deg,var(--navy),var(--blue-dark)); color:#fff;
  font:700 11px/1 "Space Mono",monospace; letter-spacing:1.5px;
}
.leaderboard-live span { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 5px rgba(85,210,227,.22); animation:heroFloat 2.4s ease-in-out infinite; }
.standing-row { padding:14px 18px; gap:12px; }
.standing-row.top3 { background:linear-gradient(90deg,rgba(49,86,173,.07),#fff 60%); }
.standing-row.me { background:linear-gradient(90deg,var(--cyan-soft),#fff 72%); box-shadow:inset 3px 0 var(--cyan); }
.s-team { color:var(--blue); }

/* Display-only uppercase — purely visual via CSS, stored user data (Firestore
   `name` field) is untouched, so nothing downstream that reads names breaks. */
.s-name { text-transform:uppercase; letter-spacing:.4px; }

/* Medal badges for top 3 — a filled circular chip rather than just colored
   text, so rank #1/#2/#3 read as a trophy-shelf rather than a plain number. */
.s-rank {
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
}
.s-rank.gold   { background:linear-gradient(145deg,#ffe9ad,#ffc94d); color:#5c3a00; box-shadow:0 4px 14px rgba(255,201,77,.5); }
.s-rank.silver { background:linear-gradient(145deg,#f1f4fa,#cfd8e6); color:#3a4659; box-shadow:0 4px 14px rgba(160,176,200,.45); }
.s-rank.bronze { background:linear-gradient(145deg,#e7b287,#c97f43); color:#46260a; box-shadow:0 4px 14px rgba(201,127,67,.4); }

/* Points pill — a filled badge instead of bare numerals, consistent with a
   premium sports-leaderboard look. */
.s-pts-wrap {
  display:flex; flex-direction:column; align-items:flex-end; gap:1px;
}
.s-pts {
  color:#fff; background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  padding:4px 12px; border-radius:999px; box-shadow:0 6px 16px rgba(49,86,173,.28);
}
.standing-row.top3 .s-pts { background:linear-gradient(135deg,var(--victory-gold,#f4c95d),#c98f1f); box-shadow:0 6px 16px rgba(244,201,93,.4); }
.you-pill { font:800 9px/1 "Space Mono",monospace; color:var(--navy); background:var(--cyan); padding:3px 6px; border-radius:99px; vertical-align:2px; }

.comm-hero {
  min-height:560px; display:grid; place-items:center; padding:90px 0;
  background:
    radial-gradient(circle at 18% 12%,rgba(85,210,227,.35),transparent 15rem),
    radial-gradient(circle at 84% 78%,rgba(49,86,173,.55),transparent 24rem),
    linear-gradient(145deg,#172858,#131f49 68%,#0c1533);
}
.comm-hero::before {
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,#000,transparent 90%);
}
.community-brand-panel {
  /* Capped narrower than before — the real logo is a square lockup, and at
     the old 690px width a square image would be nearly as tall as the
     whole hero, pushing the heading far down the page. */
  width:min(320px,70vw); margin:0 auto 24px; padding:clamp(10px,2vw,18px);
  border-radius:20px; background:#fff; border:2px solid var(--cyan);
  box-shadow:0 24px 65px rgba(0,0,0,.30);
}
.community-brand-panel img { width:100%; display:block; }
.community-kicker { color:var(--cyan); font:700 11px/1.5 "Space Mono",monospace; letter-spacing:3px; margin-bottom:12px; }
.comm-hero h1 { font-size:clamp(42px,7vw,72px); margin-bottom:20px; }
.badge-spirit { color:#fff; background:rgba(85,210,227,.12); border-color:rgba(85,210,227,.55); }

.section-eyebrow, .admin-card-kicker {
  color:var(--blue); font:800 10px/1.2 "Space Mono",monospace; letter-spacing:2px; margin-bottom:8px;
}
.section-title { color:var(--navy); letter-spacing:1px; }
.section-mini-title { color:var(--navy); font-size:24px; margin-bottom:14px; display:flex; align-items:center; gap:10px; }
.section-mini-title::before { content:""; width:24px; height:4px; border-radius:99px; background:var(--cyan); }
.counter-box { box-shadow:0 8px 28px rgba(19,31,73,.055); }
.counter-num { color:var(--blue); }
.activity-card:hover { border-color:var(--cyan); }
.member-photo { border-color:var(--cyan); color:var(--blue); }
.member-role, .tl-year { color:var(--blue); }
.tl-item::before { background:var(--cyan); }

.filters { margin-bottom:14px; }
.chip { color:var(--text2); font-weight:700; }
.chip.active { color:#fff; background:var(--blue); border-color:var(--blue); box-shadow:0 6px 16px rgba(49,86,173,.20); }
.masonry { columns:3; column-gap:14px; }
.gallery-item {
  display:block; width:100%; padding:0; margin:0 0 14px; break-inside:avoid;
  border:0; border-radius:14px; overflow:hidden; background:#fff; cursor:pointer;
  position:relative; box-shadow:0 8px 24px rgba(19,31,73,.10);
}
.masonry .gallery-item img { margin:0; border:0; border-radius:0; transition:transform .35s ease; }
.gallery-item:hover img { transform:scale(1.035); }
.gallery-item span {
  display:block; padding:10px 12px; color:var(--text); font-size:12px; text-align:left;
  border-top:1px solid var(--border);
}
.activity-masonry { columns:3; margin-top:14px; }

.event-card { padding:0; display:block; overflow:hidden; }
.event-photo { width:100%; height:230px; object-fit:cover; display:block; }
.event-card-body { display:flex; gap:16px; align-items:flex-start; padding:20px; }
.event-copy { flex:1; min-width:0; }
.event-copy h3 { color:var(--navy); font-size:25px; margin-bottom:5px; }
.date-box { background:var(--navy); color:#fff; border:1px solid rgba(85,210,227,.55); }
.date-box .m { color:var(--cyan); }

.tabs { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:thin; }
.tab { white-space:nowrap; min-height:46px; }
.tab.active { color:var(--blue); border-color:var(--cyan); }
.field label { color:var(--text2); font-weight:700; }
.field input, .field select, .field textarea { min-height:48px; background:#f8faff; border-color:rgba(49,86,173,.14); }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--cyan); box-shadow:0 0 0 3px var(--cyan-soft); }
.upload-dropzone {
  position:relative; padding:14px; border:1.5px dashed rgba(49,86,173,.35);
  border-radius:12px; background:linear-gradient(135deg,#f8fbff,#f2f7fd);
}
.upload-dropzone input { padding:8px; background:#fff; }
.upload-dropzone span { display:block; color:var(--muted); font-size:11px; margin-top:7px; }
.upload-preview {
  display:grid; grid-template-columns:100px 1fr; gap:12px; align-items:center;
  padding:10px; margin:-2px 0 14px; border:1px solid rgba(85,210,227,.5);
  border-radius:12px; background:var(--cyan-soft);
}
.upload-preview img { width:100px; height:76px; object-fit:cover; border-radius:9px; background:#fff; }
.upload-preview-meta { color:var(--text2); font-size:12px; overflow-wrap:anywhere; }
.form-status { min-height:18px; color:var(--red); font-size:12px; margin:-4px 0 8px; }
.admin-media-row { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.admin-media-row img, .admin-media-placeholder { width:56px; height:48px; object-fit:cover; border-radius:9px; flex:0 0 auto; }
.admin-media-placeholder { display:grid; place-items:center; background:var(--card2); }
.admin-media-copy { min-width:0; flex:1; display:flex; flex-direction:column; }
.admin-media-copy strong { font-size:13px; color:var(--navy); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.admin-media-copy span { font-size:11px; color:var(--muted); }

.toast { background:#fff; border-color:var(--blue); border-left-color:var(--blue); box-shadow:0 18px 50px rgba(19,31,73,.20); }
.lightbox .lb-cap { color:#fff; }
.footer-lockup { width:min(170px,55vw); display:block; margin:0 auto; border-radius:10px; }
footer { background:#fff; }
.footer-links a { color:var(--blue); font-weight:700; }
.avatar { background:var(--cyan); color:var(--navy); }

@media (max-width:900px) {
  .comm-links { gap:0; }
  .comm-links a { padding-inline:8px; }
  .masonry { columns:2; }
}

@media (max-width:640px) {
  :root { --predict-h:64px; --bnav-h:68px; }
  .container { padding-inline:12px; }
  .wide { padding-inline:16px; }
  .brand-lockup { width:34px; height:30px; }
  .brand-name,.comm-brand .cname { font-size:19px; }
  .predict-header { padding-inline:10px; }
  .predict-left { gap:5px; }
  .predict-header .hdr-icons { gap:5px; }
  .predict-header .btn-icon { width:36px; height:36px; }
  .predict-header .btn-sm { min-height:38px; padding:8px 12px; }
  #page-dashboard .hero-block { padding:24px 14px 20px; margin-bottom:14px; border-radius:16px; }
  #page-dashboard .hero-kicker { font-size:8px; letter-spacing:1.2px; }
  #page-dashboard .hero-title { font-size:34px; }
  #page-dashboard .hero-sub { font-size:12px; }
  #page-dashboard .stats-row { gap:7px; margin-top:15px; }
  #page-dashboard .stat-box { padding:10px 4px; }
  #page-dashboard .stat-val { font-size:19px; }
  .bottom-nav { width:100%; border-radius:16px 16px 0 0; }
  .bnav-item { font-size:10px; }
  .comm-hero { min-height:500px; padding:65px 0; }
  .community-brand-panel { width:min(220px,70%); border-radius:14px; }
  .community-kicker { font-size:9px; }
  .comm-hero h1 { font-size:42px; }
  .block { padding:44px 0; }
  .section-sub { margin-bottom:24px; }
  .masonry { columns:2; column-gap:10px; }
  .gallery-item { margin-bottom:10px; border-radius:11px; }
  .activity-masonry { columns:2; }
  .event-card-body { padding:16px; gap:12px; }
  .event-photo { height:200px; }
  .date-box { min-width:58px; padding:9px; }
  .event-copy h3 { font-size:22px; }
  .standing-row { padding:13px 10px; gap:9px; }
  .s-rank { width:28px; height:28px; font-size:13px; }
  .s-rank.gold,.s-rank.silver,.s-rank.bronze { font-size:18px; }
  .s-name { font-size:13px; }
  .s-pts { padding:3px 9px; font-size:18px; }
  .s-preds { font-size:10px; }
  .s-pts { font-size:19px; }
  .upload-preview { grid-template-columns:78px 1fr; }
  .upload-preview img { width:78px; height:64px; }
}

@media (max-width:390px) {
  .brand-lockup { width:30px; height:27px; }
  .brand-name,.comm-brand .cname { font-size:17px; }
  /* On the narrowest phones, drop "PUNNAYUR" to guarantee the brand block
     never wraps/overflows into the sign-in button — "SENNA" alone still
     reads fine at this width, full "SENNA PUNNAYUR" shows from 391px up. */
  .brand-name-sub { display:none; }
  .predict-header .btn-icon { width:34px; height:34px; }
  .predict-header .btn-sm { padding-inline:9px; font-size:12px; }
  .pred-score-box { gap:5px; }
  .score-input { width:44px; }
  .pred-choice-row { flex-wrap:wrap; }
  .pred-choice { min-width:calc(50% - 4px); }
  .pred-score-box { justify-content:center; flex-wrap:wrap; }
  .score-team { width:100%; }
  .masonry { columns:1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* ============================================================
   CINEMATIC FIFA 2026 EXPERIENCE
   Lightweight CSS-only motion; JavaScript only controls state.
   ============================================================ */
:root {
  --victory-gold:#f4c95d;
  --stadium-navy:#071127;
  --stadium-blue:#0d2d6f;
  --cinematic-ease:cubic-bezier(.22,1,.36,1);
}

body.intro-active { overflow:hidden; }
.senna-intro {
  position:fixed; inset:0; z-index:9999; display:grid; place-items:center;
  overflow:hidden; background:
    radial-gradient(circle at 50% 115%,rgba(49,86,173,.55),transparent 46%),
    linear-gradient(145deg,#030817 0%,#07152f 48%,#0b2354 100%);
  color:#fff; transition:opacity .55s var(--cinematic-ease),visibility .55s;
}
.senna-intro.is-leaving { opacity:0; visibility:hidden; pointer-events:none; }
.intro-pitch {
  position:absolute; width:min(1050px,135vw); height:min(640px,72vh); left:50%; bottom:-36%;
  transform:translateX(-50%) perspective(600px) rotateX(64deg);
  border:1px solid rgba(85,210,227,.24); border-radius:50%;
  background:
    linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.15) 50%,transparent 50.2%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 70px,transparent 70px 140px);
  box-shadow:0 0 90px rgba(49,86,173,.25) inset;
}
.intro-light {
  position:absolute; top:-18%; width:46vw; height:90vh; opacity:.48; filter:blur(7px);
  background:linear-gradient(to bottom,rgba(255,255,255,.72),rgba(85,210,227,.20) 28%,transparent 75%);
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%); transform-origin:top;
  animation:introSweep 2.2s ease-in-out both;
}
.intro-light-left { left:-8%; transform:rotate(16deg); }
.intro-light-right { right:-8%; transform:rotate(-16deg); animation-delay:.12s; }
.intro-content { position:relative; z-index:3; width:min(680px,88vw); text-align:center; animation:introContent 1.2s var(--cinematic-ease) .12s both; }
.intro-content img {
  width:min(620px,88vw); display:block; margin:0 auto; padding:clamp(10px,2vw,18px);
  border-radius:20px; background:#fff; border:1px solid rgba(85,210,227,.8);
  box-shadow:0 0 42px rgba(85,210,227,.35),0 30px 85px rgba(0,0,0,.4);
}
.intro-rule { width:80px; height:3px; margin:24px auto 18px; border-radius:99px; background:linear-gradient(90deg,var(--blue),var(--cyan)); box-shadow:0 0 20px var(--cyan); }

/* Controlled energy streak across the hero brand mark — one pass, blue/cyan
   with a small gold highlight. Intro no longer uses this: the intro now has
   only ONE shine effect (on the live SENNA text below), so it doesn't
   double up with the logo's own sweep and read as visual noise/"rainbow". */
.predict-brand-panel {
  position:relative; overflow:hidden; border-radius:18px;
}
.predict-brand-panel::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(100deg,transparent 38%,rgba(85,210,227,.5) 47%,rgba(255,255,255,.92) 50%,rgba(244,201,93,.55) 53%,transparent 62%);
  transform:translateX(-130%); mix-blend-mode:screen;
  animation:brandShine 1.3s ease-in-out .95s 1;
}
@keyframes brandShine { to { transform:translateX(130%); } }

/* Official uploaded logo in the intro — calm fade-in/hold/fade-out only
   (no shine streak here, see note above). Sits below the SENNA writing
   reveal, in the spot that used to have the duplicate/overlapping streaks. */
.intro-logo-reveal {
  width:min(230px,52vw); margin:16px auto 0;
  opacity:0; animation:introLogoReveal 1.7s var(--cinematic-ease) .85s both;
}
.intro-logo-reveal img { width:100%; }
@keyframes introLogoReveal {
  0%   { opacity:0; transform:translateY(10px) scale(.94); }
  22%  { opacity:1; transform:translateY(0) scale(1); }
  78%  { opacity:1; transform:none; }
  100% { opacity:0; transform:translateY(-6px) scale(.97); }
}
.intro-content strong { display:block; font:400 clamp(25px,5vw,48px)/1 "Bebas Neue",sans-serif; letter-spacing:.08em; }
.intro-content span { display:block; margin-top:10px; color:var(--cyan); font:700 clamp(8px,1.4vw,11px)/1.5 "Space Mono",monospace; letter-spacing:.2em; }

/* ============================================================
   SENNA LIVE-TEXT WRITING REVEAL
   A real (non-image) "SENNA" heading used only for the cinematic
   letter-by-letter reveal + shine streak — the brand-mark logo above it
   stays untouched and is still the canonical logo everywhere else.
   Each letter is its own span, revealed left-to-right via clip-path
   (no JS — pure staggered CSS animation using --i as the per-letter index).
   ============================================================ */
.senna-live-text {
  position:relative; margin:6px 0 2px; display:inline-flex; isolation:isolate;
  font:400 clamp(40px,9vw,84px)/1 "Bebas Neue",sans-serif; letter-spacing:.05em;
  background:linear-gradient(180deg,#fff 0%,#cdeffa 45%,var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 18px rgba(2,8,24,.45));
  animation:sennaGlowPulse 1.1s ease-out var(--glow-delay,.85s) 1;
}
.senna-live-text .sl {
  display:inline-block;
  clip-path:inset(0 100% 0 0);
  animation:sennaLetterReveal .55s var(--cinematic-ease) calc(var(--i) * .09s) both;
}
.senna-live-text::after {
  content:""; position:absolute; inset:-12% -6%; z-index:2; pointer-events:none;
  mix-blend-mode:screen;
  background:linear-gradient(100deg,transparent 40%,rgba(85,210,227,.65) 48%,rgba(255,255,255,.95) 50%,rgba(244,201,93,.6) 52%,transparent 60%);
  transform:translateX(-140%);
  animation:brandShine 1.1s ease-in-out var(--shine-delay,1.1s) 1;
}
@keyframes sennaLetterReveal { to { clip-path:inset(0 0 0 0); } }
@keyframes sennaGlowPulse {
  0%,100% { text-shadow:0 0 30px rgba(85,210,227,.35); }
  50%     { text-shadow:0 0 55px rgba(85,210,227,.85),0 0 26px rgba(244,201,93,.5); }
}

/* Staggered supporting taglines under the intro's SENNA reveal */
.intro-content .il-line {
  opacity:0; transform:translateY(14px);
  animation:introLineIn .6s var(--cinematic-ease) calc(1.05s + var(--d,0) * .18s) both;
}
.intro-content strong.il-line { margin-top:10px; }
@keyframes introLineIn { to { opacity:1; transform:none; } }

/* Premium gold "FIFA WC 2026 PREDICTION CHALLENGE" — gradient gold text with a
   moving shine sweep. High-specificity selector so it wins over premium.css.
   Keeps the line's slide-in entrance, then loops a subtle shimmer. */
.senna-intro .intro-content .il-line.fifa-gold-shine,
.intro-content strong.il-line.fifa-gold-shine {
  background:linear-gradient(95deg,#9a6a23 0%,#f4c95d 24%,#fff6cf 44%,#f4c95d 62%,#9a6a23 100%);
  background-size:220% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  font-weight:800; letter-spacing:.07em;
  filter:drop-shadow(0 0 14px rgba(244,201,93,.35));
  animation:introLineIn .6s var(--cinematic-ease) calc(1.05s + var(--d,0) * .18s) both,
            fifaGoldShine 3s linear 1.6s infinite;
}
@keyframes fifaGoldShine { to { background-position:220% center; } }
@media (prefers-reduced-motion:reduce) {
  .il-line.fifa-gold-shine { animation:none !important; }
}

.intro-skip {
  position:absolute; z-index:4; right:max(20px,env(safe-area-inset-right)); bottom:max(22px,env(safe-area-inset-bottom));
  border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:9px 15px;
  background:rgba(5,16,40,.55); color:#fff; font:700 11px "Inter",sans-serif; cursor:pointer;
  backdrop-filter:blur(10px); transition:background .2s,border-color .2s,transform .2s;
}
.intro-skip:hover { background:rgba(49,86,173,.7); border-color:var(--cyan); transform:translateY(-2px); }
.intro-particles i,.hero-particle { position:absolute; display:block; border-radius:50%; background:var(--cyan); box-shadow:0 0 14px var(--cyan); }
.intro-particles i { width:4px; height:4px; animation:introParticle 2.6s ease-in-out infinite; }
.intro-particles i:nth-child(1){left:12%;top:64%;animation-delay:-.4s}.intro-particles i:nth-child(2){left:27%;top:25%;animation-delay:-1.2s}
.intro-particles i:nth-child(3){left:44%;top:76%;animation-delay:-2s}.intro-particles i:nth-child(4){left:65%;top:20%;animation-delay:-.8s}
.intro-particles i:nth-child(5){left:79%;top:68%;animation-delay:-1.7s}.intro-particles i:nth-child(6){left:91%;top:36%;animation-delay:-2.3s}

@keyframes introContent { from{opacity:0;transform:scale(.9) translateY(24px);filter:blur(8px)} to{opacity:1;transform:none;filter:none} }
@keyframes introSweep { 0%{opacity:0} 30%{opacity:.55} 100%{opacity:.16} }
@keyframes introParticle { 0%,100%{opacity:.15;transform:translate3d(0,12px,0) scale(.7)} 50%{opacity:.9;transform:translate3d(12px,-18px,0) scale(1.25)} }

.dashboard-container { max-width:1120px; }
#page-dashboard .cinematic-hero {
  min-height:570px; display:grid; place-items:center; isolation:isolate;
  padding:42px clamp(18px,4vw,48px) 30px; border-radius:26px;
  background:
    radial-gradient(circle at 50% 4%,rgba(85,210,227,.24),transparent 28%),
    linear-gradient(145deg,#071127 0%,#0d2d6f 50%,#132f68 72%,#071127 100%);
  border:1px solid rgba(85,210,227,.28); box-shadow:0 32px 80px rgba(7,17,39,.32);
}
#page-dashboard .cinematic-hero::before {
  z-index:-1; background:
    linear-gradient(110deg,transparent 35%,rgba(255,255,255,.08) 46%,transparent 57%),
    radial-gradient(700px circle at 50% -8%,rgba(255,255,255,.14),transparent 62%);
  animation:heroSweep 7s ease-in-out infinite;
}
#page-dashboard .cinematic-hero::after { z-index:-1; border-color:rgba(85,210,227,.12); }
.hero-content { position:relative; z-index:4; width:min(640px,78%); text-align:center; }
/* Soft dark pool directly behind the text column — protects contrast now
   that the center player slot is more visible (it sits right behind this
   text). z-index:-1 keeps it inside .hero-content's own stacking context,
   so it still composites above .hero-athletes (z-index:0) but below the
   text itself. */
.hero-content::before {
  content:""; position:absolute; inset:-8% -25%; z-index:-1; pointer-events:none;
  background:radial-gradient(ellipse 70% 62% at 50% 38%,rgba(5,13,32,.5),transparent 72%);
}
.cinematic-hero .predict-brand-panel { width:min(430px,86%); margin-bottom:17px; animation:heroReveal .9s var(--cinematic-ease) .05s both; }
#page-dashboard .cinematic-hero .hero-title { font-size:clamp(48px,6.2vw,76px); line-height:.93; text-shadow:0 8px 30px rgba(0,0,0,.35); animation:heroReveal .9s var(--cinematic-ease) .18s both; }
#page-dashboard .cinematic-hero .hero-title span { display:block; color:var(--cyan); }
.hero-command { margin-top:10px; color:var(--victory-gold); font:400 clamp(25px,3.5vw,40px)/1 "Bebas Neue",sans-serif; letter-spacing:.13em; text-shadow:0 0 26px rgba(244,201,93,.28); animation:heroReveal .9s var(--cinematic-ease) .28s both; }
#page-dashboard .cinematic-hero .hero-sub { max-width:540px; margin:10px auto 0; font-size:14px; color:rgba(255,255,255,.78); animation:heroReveal .9s var(--cinematic-ease) .35s both; }
.hero-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:20px auto 0; animation:heroReveal .9s var(--cinematic-ease) .45s both; }
.hero-cta-primary,.hero-cta-secondary { min-width:150px; position:relative; overflow:hidden; }
.hero-cta-primary { background:linear-gradient(135deg,#ffe48b,var(--victory-gold)); color:#09132c; box-shadow:0 12px 32px rgba(244,201,93,.27); }
.hero-cta-primary::after { content:""; position:absolute; top:-80%; left:-30%; width:30%; height:260%; transform:rotate(24deg); background:rgba(255,255,255,.55); animation:ctaShine 4s ease-in-out infinite; }
.hero-cta-primary b { font-size:18px; transition:transform .2s; }
.hero-cta-primary:hover b { transform:translateX(4px); }
.hero-cta-secondary { color:#fff; border-color:rgba(85,210,227,.6); background:rgba(7,17,39,.42); backdrop-filter:blur(9px); }
.hero-cta-secondary:hover { background:rgba(85,210,227,.14); }
#page-dashboard .cinematic-hero .stats-row { width:min(500px,100%); margin:22px auto 0; animation:heroReveal .9s var(--cinematic-ease) .55s both; }
#page-dashboard .cinematic-hero .stat-box { background:rgba(255,255,255,.92); backdrop-filter:blur(8px); }

.hero-stadium,.hero-athletes { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.stadium-light { position:absolute; top:-45%; width:26%; height:110%; opacity:.22; background:linear-gradient(to bottom,#fff,rgba(85,210,227,.38),transparent 72%); clip-path:polygon(44% 0,56% 0,100% 100%,0 100%); filter:blur(3px); transform-origin:top; }
.light-one { left:4%; transform:rotate(22deg); animation:stadiumLight 7s ease-in-out infinite; }
.light-two { left:38%; transform:rotate(-2deg); animation:stadiumLight 8s ease-in-out -3s infinite; }
.light-three { right:3%; transform:rotate(-22deg); animation:stadiumLight 7.5s ease-in-out -1.5s infinite; }
.stadium-pitch { position:absolute; left:50%; bottom:-49%; width:115%; height:68%; transform:translateX(-50%) perspective(420px) rotateX(62deg); border:1px solid rgba(255,255,255,.12); border-radius:50%; background:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.11) 50%,transparent 50.2%); }
.hero-particle { width:3px; height:3px; animation:heroFloat 4s ease-in-out infinite; opacity:.4; }
.hero-particle.p1{left:8%;top:33%}.hero-particle.p2{left:20%;top:75%;animation-delay:-1.4s}.hero-particle.p3{left:36%;top:16%;animation-delay:-2.2s}
.hero-particle.p4{right:34%;top:73%;animation-delay:-.7s}.hero-particle.p5{right:17%;top:25%;animation-delay:-2.8s}.hero-particle.p6{right:7%;top:68%;animation-delay:-1.8s}
.hero-athletes { z-index:0; }
.hero-athlete-frame {
  position:absolute;
  bottom:0;
  aspect-ratio:19 / 28;
  transform-origin:50% 100%;
  will-change:transform,opacity;
  contain:layout paint;
  transition:opacity .5s ease;
}
.hero-athlete-frame::before,
.hero-athlete-frame::after {
  content:"";
  position:absolute;
  inset:auto 12% 6%;
  height:18%;
  border-radius:50%;
  pointer-events:none;
}
.hero-athlete-frame::before {
  background:radial-gradient(circle,rgba(85,210,227,.42),rgba(85,210,227,0) 68%);
  filter:blur(18px);
}
.hero-athlete-frame::after {
  inset:12% 8% 14%;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 20%,rgba(244,201,93,.16),transparent 36%),
    linear-gradient(180deg,rgba(85,210,227,.08),rgba(7,17,39,0));
  mask:linear-gradient(180deg,transparent 0,rgba(0,0,0,.82) 20%,#000 66%,transparent 100%);
}
.hero-athlete-image {
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  translate:var(--hero-parallax-x,0px) var(--hero-parallax-y,0px);
  object-fit:contain;
  object-position:center bottom;
  filter:drop-shadow(0 26px 60px rgba(2,8,24,.62)) drop-shadow(0 0 34px rgba(85,210,227,.18));
  transition:translate .35s ease;
  animation:heroImagePulse 8s ease-in-out infinite;
}
.hero-athlete-frame.is-fallback::before {
  inset:16% 14% 8%;
  height:auto;
  border-radius:44% 44% 18% 18% / 28% 28% 16% 16%;
  background:
    radial-gradient(circle at 50% 20%,rgba(244,201,93,.42),transparent 18%),
    linear-gradient(180deg,rgba(122,234,255,.45),rgba(13,45,111,.06) 40%,rgba(0,0,0,0) 100%);
  filter:blur(0);
  opacity:.5;
}
.hero-athlete-frame.is-fallback::after {
  inset:auto 20% 10%;
  height:34px;
  border:none;
  background:radial-gradient(circle,rgba(85,210,227,.34),rgba(85,210,227,0) 70%);
  mask:none;
}
/* Position + idle-float only — the one-time slide-in entrance lives in the
   separate .athlete-enter-* classes below so that swapping WHICH frame has
   which slot class (done by the rotation JS) only changes static geometry +
   restarts the gentle float loop, instead of replaying a slide-in transform
   every rotation. */
.athlete-left {
  width:min(30vw,340px);
  left:max(-28px,calc(7% - 60px));
  animation:athleteFloat 7s ease-in-out 1.4s infinite;
}
.athlete-right {
  width:min(31vw,350px);
  right:max(-30px,calc(7% - 62px));
  animation:athleteFloat 7.4s ease-in-out 1.55s infinite;
}
.athlete-center {
  width:min(26vw,300px);
  left:50%;
  bottom:8px;
  opacity:.46;
  transform:translateX(-50%) scale(.92);
  animation:athleteCenter 8s ease-in-out 1.6s infinite;
}
.athlete-enter-left   { animation:athleteEntranceLeft 1.25s var(--cinematic-ease) .14s both; }
.athlete-enter-right  { animation:athleteEntranceRight 1.25s var(--cinematic-ease) .2s both; }
.athlete-enter-center { animation:athleteEntranceCenter 1.45s var(--cinematic-ease) .08s both; }

/* Player rotation crossfade: while .is-swapping, every frame fades to 0 (via
   the .5s opacity transition on .hero-athlete-frame); the slot left/right swap
   happens during this invisible window, then frames fade back in to their slot
   opacity. .athlete-rotating kept as a legacy alias. */
.athlete-rotating,
.hero-athletes.is-swapping .hero-athlete-frame { opacity:0 !important; }
.athlete-center .hero-athlete-image {
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.45)) drop-shadow(0 0 30px rgba(85,210,227,.22));
}

/* Per-player scale correction — the three source photos have very different
   amounts of transparent padding around the player, so identical frame sizes
   render visually unequal under object-fit:contain (Messi's source canvas is
   near-square, leaving a lot of empty top/bottom space inside the tall frame,
   so it renders far smaller than Cristiano/Neymar unless boosted back up).
   Uses the standalone `scale` property (not the `transform` shorthand) so it
   composes with, rather than getting overwritten by, the heroImagePulse
   keyframe animation already running on .hero-athlete-image's `transform`. */
.player-img { transform-origin:50% 100%; }
.player-messi .player-img { scale:1.58; }
.player-cristiano .player-img { scale:1.04; }
.player-neymar .player-img { scale:.97; }
.hero-content { position:relative; z-index:2; }
.goal-celebration { display:none; }

@keyframes heroReveal { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:none} }
@keyframes heroSweep { 0%,100%{transform:translateX(-10%);opacity:.65} 50%{transform:translateX(10%);opacity:1} }
@keyframes stadiumLight { 0%,100%{opacity:.11;filter:blur(5px)} 50%{opacity:.28;filter:blur(2px)} }
@keyframes heroFloat { 0%,100%{transform:translateY(8px);opacity:.2} 50%{transform:translateY(-16px);opacity:.9} }
@keyframes athleteEntranceLeft { from{opacity:0;transform:translate3d(-48px,24px,0) scale(.9)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} }
@keyframes athleteEntranceRight { from{opacity:0;transform:translate3d(48px,24px,0) scale(.9)} to{opacity:1;transform:translate3d(0,0,0) scale(1)} }
@keyframes athleteEntranceCenter { from{opacity:0;transform:translateX(-50%) translateY(28px) scale(.82)} to{opacity:.46;transform:translateX(-50%) translateY(0) scale(.92)} }
@keyframes athleteFloat { 0%,100%{transform:translateY(0) rotate(-1deg) scale(1)} 50%{transform:translateY(-10px) rotate(1.2deg) scale(1.015)} }
@keyframes athleteCenter { 0%,100%{transform:translateX(-50%) translateY(0) scale(.92)} 50%{transform:translateX(-50%) translateY(-12px) scale(.96)} }
@keyframes heroImagePulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.018)} }
@keyframes ctaShine { 0%,68%{left:-35%;opacity:0} 74%{opacity:1} 88%,100%{left:125%;opacity:0} }

/* Dynamic reveal, media polish and micro-interactions */
.reveal-item { opacity:0; transform:translateY(24px); transition:opacity .65s var(--cinematic-ease),transform .65s var(--cinematic-ease); transition-delay:var(--reveal-delay,0ms); }
.reveal-item.is-visible { opacity:1; transform:none; }
.gallery-item img,.event-photo { transition:filter .55s ease,opacity .55s ease,transform .5s var(--cinematic-ease); }
.media-loading { filter:blur(10px); opacity:.55; transform:scale(1.025); }
.media-loaded { filter:none; opacity:1; }
.event-card { transition:transform .32s var(--cinematic-ease),box-shadow .32s,border-color .32s; }
.event-card:hover { transform:translateY(-5px); border-color:rgba(85,210,227,.55); box-shadow:0 20px 48px rgba(19,31,73,.14); }
.event-card:hover .event-photo { transform:scale(1.025); }
.card,.mb-card,.activity-card,.member-card { transition:transform .28s var(--cinematic-ease),box-shadow .28s,border-color .28s; }
.btn { position:relative; overflow:hidden; }
.btn:focus-visible,.act-btn:focus-visible,.chip:focus-visible,.bnav-item:focus-visible { outline:3px solid rgba(85,210,227,.45); outline-offset:3px; }
.tabs .tab { transition:color .25s,border-color .25s,background .25s,transform .25s; }
.tabs .tab:active,.btn:active { transform:translateY(1px) scale(.985); }
.spinner { border-color:rgba(49,86,173,.15); border-top-color:var(--cyan); box-shadow:0 0 18px rgba(85,210,227,.16); }

/* Prediction save ceremony */
.mb-card.prediction-locked { animation:lockCard 1.65s var(--cinematic-ease); border-color:rgba(85,210,227,.72); box-shadow:0 0 0 2px rgba(85,210,227,.16),0 18px 48px rgba(49,86,173,.22); }
.prediction-lock-overlay { position:absolute; inset:0; z-index:12; display:grid; place-items:center; pointer-events:none; background:linear-gradient(135deg,rgba(7,17,39,.94),rgba(13,45,111,.93)); color:#fff; animation:lockOverlay 1.75s var(--cinematic-ease) both; }
.prediction-lock-inner { text-align:center; }
.prediction-lock-shield { width:54px; height:62px; margin:0 auto 10px; display:grid; place-items:center; font-size:27px; color:var(--stadium-navy); background:linear-gradient(145deg,#fff,var(--cyan)); clip-path:polygon(50% 0,94% 18%,85% 72%,50% 100%,15% 72%,6% 18%); filter:drop-shadow(0 0 18px rgba(85,210,227,.55)); }
.prediction-lock-title { font:400 28px/1 "Bebas Neue",sans-serif; letter-spacing:.09em; }
.prediction-lock-sub { margin-top:6px; color:var(--cyan); font:700 9px "Space Mono",monospace; letter-spacing:.15em; }
@keyframes lockCard { 0%{transform:scale(1)} 28%{transform:scale(.985)} 55%{transform:scale(1.012)} 100%{transform:none} }
@keyframes lockOverlay { 0%{opacity:0;clip-path:circle(0 at 50% 50%)} 24%,70%{opacity:1;clip-path:circle(78% at 50% 50%)} 100%{opacity:0;clip-path:circle(90% at 50% 50%)} }

/* Tiered points celebration; created only for a new points increase. */
.points-celebration { position:fixed; inset:0; z-index:900; display:grid; place-items:center; pointer-events:none; background:rgba(3,8,23,.42); backdrop-filter:blur(3px); animation:celebrationBackdrop 2.45s ease both; }
.points-celebration::before,.points-celebration::after { content:""; position:absolute; width:min(70vw,560px); aspect-ratio:1; border-radius:50%; border:2px solid var(--celebration-color,var(--cyan)); box-shadow:0 0 65px var(--celebration-color,var(--cyan)),inset 0 0 55px var(--celebration-color,var(--cyan)); animation:celebrationRing 1.35s var(--cinematic-ease) both; }
.points-celebration::after { animation-delay:.16s; opacity:.45; }
.celebration-card { position:relative; z-index:2; min-width:min(420px,86vw); padding:35px 28px; border:1px solid rgba(255,255,255,.25); border-radius:24px; text-align:center; color:#fff; background:linear-gradient(145deg,rgba(7,17,39,.96),rgba(13,45,111,.94)); box-shadow:0 30px 100px rgba(0,0,0,.42); animation:celebrationCard 2.2s var(--cinematic-ease) both; }
.celebration-score { color:var(--celebration-color,var(--cyan)); font:400 clamp(58px,15vw,100px)/.9 "Bebas Neue",sans-serif; text-shadow:0 0 30px var(--celebration-color,var(--cyan)); }
.celebration-title { margin-top:10px; font:400 clamp(25px,7vw,42px)/1 "Bebas Neue",sans-serif; letter-spacing:.07em; }
.celebration-sub { margin-top:8px; color:rgba(255,255,255,.7); font:700 9px "Space Mono",monospace; letter-spacing:.16em; }
.points-celebration.level-small { --celebration-color:var(--cyan); }
.points-celebration.level-medium { --celebration-color:#63a4ff; }
.points-celebration.level-exact,.points-celebration.level-perfect { --celebration-color:var(--victory-gold); }
.points-celebration.level-perfect .celebration-card { background:radial-gradient(circle at 50% 0%,rgba(244,201,93,.24),transparent 48%),linear-gradient(145deg,#071127,#163879); }
@keyframes celebrationBackdrop { 0%,100%{opacity:0} 12%,78%{opacity:1} }
@keyframes celebrationRing { from{opacity:0;transform:scale(.1)} 55%{opacity:.8} to{opacity:0;transform:scale(1.22)} }
@keyframes celebrationCard { 0%{opacity:0;transform:scale(.65) translateY(30px)} 16%,78%{opacity:1;transform:scale(1) translateY(0)} 100%{opacity:0;transform:scale(1.06) translateY(-12px)} }

/* Live rank movement */
.standing-row.rank-up { position:relative; z-index:2; animation:rankRise 1.4s var(--cinematic-ease); box-shadow:inset 4px 0 var(--victory-gold),0 0 30px rgba(244,201,93,.2); }
.rank-up-pill { display:inline-flex; align-items:center; margin-left:7px; padding:3px 6px; border-radius:999px; color:#0c1834; background:var(--victory-gold); font:800 8px/1 "Space Mono",monospace; letter-spacing:.08em; animation:rankPill 1.2s ease both; }
@keyframes rankRise { 0%{opacity:.45;transform:translateY(18px)} 42%{opacity:1;transform:translateY(-5px)} 100%{transform:none} }
@keyframes rankPill { 0%{opacity:0;transform:translateY(8px)} 35%,75%{opacity:1;transform:translateY(0)} 100%{opacity:.75} }

/* Premium FIFA prediction match cards */
.match-premium {
  display:block;
  padding:16px;
  border-radius:22px;
  border:1px solid rgba(85,210,227,.24);
  background:
    radial-gradient(circle at 12% 0,rgba(85,210,227,.16),transparent 34%),
    linear-gradient(145deg,rgba(7,17,39,.96),rgba(13,45,111,.94));
  color:#fff;
  box-shadow:0 18px 48px rgba(7,17,39,.22);
}
.match-premium::before { background:linear-gradient(var(--victory-gold),var(--cyan)); }
.match-topline,.match-card-footer,.result-footer {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:space-between;
}
.round-badge,.kickoff-pill {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  color:rgba(255,255,255,.86);
  font:800 10px/1 "Space Mono",monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.round-badge { color:var(--victory-gold); border-color:rgba(244,201,93,.35); background:rgba(244,201,93,.12); }
.match-teams {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  margin:16px 0 12px;
}
.team-line {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.12);
}
.team-line.away { justify-content:flex-end; text-align:right; }
.team-line.away .team-flag { order:2; }
.team-flag { font-size:28px; line-height:1; flex:0 0 auto; }
.team-name { min-width:0; overflow-wrap:anywhere; font-weight:900; font-size:clamp(15px,2.6vw,20px); line-height:1.1; color:#fff; }
.vs-pill {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  color:#071127;
  background:linear-gradient(135deg,var(--victory-gold),#ffe39a);
  font:900 12px/1 "Space Mono",monospace;
  box-shadow:0 0 24px rgba(244,201,93,.32);
}
.match-premium .pred-badge {
  color:#dff8ff;
  background:rgba(85,210,227,.13);
  border-color:rgba(85,210,227,.28);
}
.premium-edit {
  width:auto !important;
  min-width:82px;
  padding:8px 12px;
  border-radius:999px !important;
  color:#071127 !important;
  background:linear-gradient(135deg,var(--cyan),#aef6ff) !important;
  border:0 !important;
  font-weight:900;
}
.result-premium {
  margin-top:12px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
}
.result-score-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.result-team {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  color:#fff;
}
.result-team b { overflow-wrap:anywhere; }
.result-team strong {
  min-width:36px;
  padding:5px 8px;
  border-radius:12px;
  text-align:center;
  color:#071127;
  background:var(--victory-gold);
  font:900 18px/1 "Space Mono",monospace;
}
.result-footer { margin-top:10px; color:rgba(255,255,255,.82); }
.result-footer .earned { color:var(--victory-gold); font-weight:900; }
.result-footer .earned.zero { color:#ff9b9b; }
.premium-pred-form {
  margin-top:14px;
  color:#fff;
  background:linear-gradient(145deg,rgba(5,13,32,.94),rgba(11,31,76,.92));
  border-color:rgba(85,210,227,.28);
}
.pred-matchline {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
  color:#dff8ff;
  font-weight:900;
}
/* Two-row stacked layout: one team per row with its own full-width stepper,
   VS between them. Mobile-first — never cramps, never wraps names oddly. */
.premium-score-box {
  display:flex; flex-direction:column; gap:8px;
  padding:14px 12px;
  border-radius:20px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.score-side {
  display:flex; flex-direction:row; align-items:center; justify-content:space-between;
  gap:12px; width:100%;
}
.score-team-label {
  display:flex; flex-direction:row; align-items:center; gap:10px;
  min-width:0; flex:1 1 auto; text-align:left; font-weight:800; color:#fff;
}
.score-team-label.away { text-align:left; }
.score-team-label .team-flag {
  width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; font-size:26px; line-height:1;
  border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(85,210,227,.32);
  box-shadow:0 6px 18px rgba(7,17,39,.4);
}
/* Wrap between words only — never break a country name letter-by-letter */
.score-team-label b { min-width:0; overflow-wrap:normal; word-break:normal; hyphens:none; font-size:15px; line-height:1.2; }
.score-stepper { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.step-btn {
  width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:50%; cursor:pointer; color:#dff8ff;
  font:900 22px/1 "Inter",sans-serif;
  background:rgba(85,210,227,.14); border:1px solid rgba(85,210,227,.4);
  transition:transform .12s var(--cinematic-ease),background .15s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.step-btn:hover { background:rgba(85,210,227,.24); }
.step-btn:active { transform:scale(.85); background:rgba(85,210,227,.34); box-shadow:0 0 18px rgba(85,210,227,.4); }
.premium-score-box input {
  width:60px; height:58px; text-align:center;
  border-radius:16px; color:#fff;
  background:rgba(255,255,255,.09); border:1px solid rgba(85,210,227,.34);
  font:900 26px/1 "Space Mono",monospace;
}
.premium-score-box input:focus { outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(85,210,227,.25); }
.premium-score-box .sep {
  align-self:center; color:var(--victory-gold);
  font:900 13px/1 "Space Mono",monospace; letter-spacing:.1em;
}
@keyframes scoreBump { 0%{transform:scale(1)} 35%{transform:scale(1.18)} 100%{transform:scale(1)} }
.score-bump { animation:scoreBump .28s var(--cinematic-ease); }

/* ── Shared Edit-Prediction modal (dark premium, mobile-first) ── */
body.modal-open { overflow:hidden; }
.edit-pred-box {
  background:linear-gradient(150deg,#071127 0%,#0d2d6f 100%) !important;
  border:1px solid rgba(85,210,227,.3) !important;
  color:#fff; max-width:460px; width:100%;
}
.edit-pred-box .m-close {
  color:#fff; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
}
.edit-pred-box .m-close:hover { color:#fff; background:rgba(85,210,227,.3); border-color:var(--cyan); }
.edit-pred-head { text-align:center; margin-bottom:14px; padding:0 28px; }
.edit-pred-head h2 { color:#fff; }
.edit-pred-head .muted { color:#bcd7ff; }
#editPredBody { max-height:68vh; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:2px; }
#editPredBody .pred-q-label { color:#eaf6ff; }
#editPredBody .pred-q-pts { color:var(--cyan); }
@media (max-width:480px) {
  .edit-pred-box { border-radius:20px 20px 0 0 !important; }
  #editPredBody { max-height:62vh; }
}
.auto-winner {
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(85,210,227,.13);
  border:1px solid rgba(85,210,227,.28);
  color:#dff8ff;
  font-weight:900;
}
.auto-winner.needs-penalty {
  background:rgba(244,201,93,.14);
  border-color:rgba(244,201,93,.34);
  color:#ffe39a;
}

/* ============================================================
   PREMIUM PREDICTION-CARD POLISH (dark glass + motion)
   Pure CSS — no animation library (this is a vanilla-JS app, so the
   "Framer Motion" feel is delivered with spring-eased transitions +
   keyframes, which is also lighter for Samsung Internet / Android).
   ============================================================ */
/* True glassmorphism + a soft colour bloom behind each card */
.match-premium { position:relative; overflow:hidden; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.match-premium::after {
  content:""; position:absolute; z-index:0; width:55%; aspect-ratio:1; right:-12%; top:-30%;
  border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(85,210,227,.22),transparent 68%);
  filter:blur(26px);
}
.match-premium > * { position:relative; z-index:1; }
.team-line { backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); transition:border-color .25s,background .25s; }

/* When a winner is implied by the score, the prompt glows (steady ring) */
.auto-winner:not(.needs-penalty):not(:empty) {
  box-shadow:0 0 0 1px rgba(85,210,227,.4),0 0 24px rgba(85,210,227,.22);
}

/* Smooth, elegant penalty reveal (replaces the instant display toggle) */
.penalty-pick:not(.hidden) { animation:penaltyReveal .4s var(--cinematic-ease) both; }
@keyframes penaltyReveal {
  from { opacity:0; transform:translateY(-8px) scale(.98); }
  to   { opacity:1; transform:none; }
}

/* Desktop hover lift / mobile press feedback on the card action button */
.premium-edit { transition:transform .15s var(--cinematic-ease),box-shadow .15s; }
.premium-edit:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(85,210,227,.35); }
.premium-edit:active { transform:scale(.95); }
.hero-cta-primary:active,.btn-gold:active { transform:scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .score-bump,.penalty-pick:not(.hidden) { animation:none !important; }
  .step-btn:active,.premium-edit:active,.premium-edit:hover { transform:none !important; }
}

@media (max-width:760px) {
  /* Compacted significantly from the old 590px — that ate almost a full
     phone screen before any scrolling, which is exactly what made mobile
     visitors have to scroll just to see "FIFA 2026" and the players. */
  #page-dashboard .cinematic-hero { min-height:480px; padding:22px 12px 16px; border-radius:18px; }
  .hero-content { width:100%; }
  .cinematic-hero .predict-brand-panel { width:min(300px,80%); margin-bottom:8px; }
  #page-dashboard .cinematic-hero .hero-kicker { margin-bottom:4px; }
  #page-dashboard .cinematic-hero .hero-title { font-size:clamp(38px,11vw,52px); line-height:.9; }
  .hero-command { font-size:26px; margin-top:5px; }
  #page-dashboard .cinematic-hero .hero-sub { max-width:300px; font-size:12px; margin-top:4px; }
  .hero-actions { margin-top:12px; }
  .hero-actions .btn { min-width:132px; padding-inline:15px; }
  #page-dashboard .cinematic-hero .stats-row { width:94%; margin-top:14px; }
  .intro-content img { border-radius:14px; }
  /* Players kept at FULL opacity here (no fade-down) and mostly on-screen
     (small -10px bleed, not the old -60/-64px that clipped most of the
     image off the viewport) — that combination was the real reason Messi/
     Cristiano read as "basically invisible" on phones. Neymar's center slot
     also stays visible at .5 instead of being display:none, since hiding it
     entirely is what made the rotation look "broken" whenever a player
     rotated into that slot and vanished. */
  .athlete-left,.athlete-right { width:min(34vw,165px); bottom:0; }
  .athlete-left { left:-10px; }
  .athlete-right { right:-10px; }
  .athlete-center { width:min(32vw,170px); bottom:16px; opacity:.5; }
}

@media (max-width:560px) {
  .match-premium { padding:13px; border-radius:18px; }
  .match-topline { justify-content:flex-start; gap:6px; }
  .round-badge,.kickoff-pill { font-size:9px; padding:6px 8px; min-height:25px; }
  .match-teams { grid-template-columns:1fr; gap:8px; margin:12px 0; }
  .team-line,.team-line.away { justify-content:flex-start; text-align:left; padding:11px; }
  .team-line.away .team-flag { order:0; }
  .vs-pill { width:34px; height:28px; justify-self:center; font-size:10px; }
  .match-card-footer { align-items:flex-start; }
  .premium-edit { width:100% !important; min-height:42px; }
  .result-score-grid { grid-template-columns:1fr; }
  .premium-score-box {
    grid-template-columns:1fr 58px 18px 58px 1fr;
    gap:7px;
    padding:8px;
  }
  .premium-score-box input { width:58px; height:52px; font-size:22px; }
  .score-team-label { font-size:12px; gap:5px; }
  .pred-choice-row { display:grid; grid-template-columns:1fr 1fr; }
}

@media (max-width:390px) {
  .premium-score-box {
    grid-template-columns:1fr 52px 14px 52px 1fr;
    gap:5px;
  }
  .premium-score-box input { width:52px; height:48px; }
  .score-team-label { font-size:11px; }
  .team-flag { font-size:24px; }
}

@media (max-width:560px) {
  #page-dashboard .cinematic-hero { min-height:450px; padding:20px 10px 14px; }
  .athlete-left,.athlete-right { width:122px; bottom:-50px; }
  .athlete-left { left:-12px; }
  .athlete-right { right:-12px; }
  .athlete-center { width:130px; bottom:-48px; opacity:.46; }
}

@media (max-width:430px) {
  #page-dashboard .cinematic-hero { min-height:440px; }
  .cinematic-hero .predict-brand-panel { width:80%; margin-bottom:6px; }
  .hero-actions { gap:8px; margin-top:10px; }
  .hero-actions .btn { min-width:124px; font-size:12px; }
  #page-dashboard .cinematic-hero .stats-row { margin-top:12px; }
  .athlete-left,.athlete-right { width:104px; bottom:-64px; }
  .athlete-left { left:-14px; }
  .athlete-right { right:-14px; }
  .athlete-center { width:112px; bottom:-70px; opacity:.42; }
}

@media (prefers-reduced-motion:reduce) {
.senna-intro.reduced-motion-static { opacity:1 !important; visibility:visible !important; }
  .reveal-item { opacity:1 !important; transform:none !important; }
  .hero-stadium,.hero-athletes,.intro-particles,.hero-athlete-frame,.hero-athlete-image { animation:none !important; }
  .predict-brand-panel::after { display:none !important; }
  .prediction-lock-overlay,.points-celebration { display:none !important; }
  .senna-live-text,.senna-live-text .sl { animation:none !important; }
  .senna-live-text .sl { clip-path:none !important; }
  .senna-live-text::after { display:none !important; }
  .intro-content .il-line { opacity:1 !important; transform:none !important; animation:none !important; }
}

/* ============================================================
   FINAL MOBILE-FIRST CINEMATIC POLISH
   Header, intro, hero typography and compact phone layout.
   ============================================================ */
.brand-name,
.comm-brand .cname {
  display:grid;
  gap:1px;
  line-height:.9;
  letter-spacing:1.9px;
}
.brand-main { display:block; color:var(--navy); }
.brand-name-sub {
  display:block;
  margin-top:2px;
  color:var(--blue) !important;
  font:800 9px/1 "Space Mono",monospace;
  letter-spacing:.22em;
  position:relative;
}
.brand-name-sub::after {
  content:"";
  display:block;
  width:72%;
  height:2px;
  margin-top:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),transparent);
}
.header-home-btn svg { width:20px; height:20px; }
.predict-left { gap:6px; min-width:0; }
.predict-left #communityMenuBtn { order:1; }
.predict-left .brand { order:2; }
.predict-left .header-home-btn { order:3; margin-left:-2px; }
.predict-header .brand { min-width:0; }
.predict-header .brand-name { font-size:22px; }
.comm-brand .cname { font-size:23px; }

.senna-intro {
  background:
    radial-gradient(circle at 50% 35%,rgba(85,210,227,.20),transparent 24%),
    radial-gradient(circle at 50% 120%,rgba(49,86,173,.58),transparent 46%),
    linear-gradient(145deg,#071127 0%,#0b1d46 48%,#123878 100%);
}
.senna-intro::before,
.senna-intro::after {
  content:"";
  position:absolute;
  inset:-18%;
  pointer-events:none;
}
.senna-intro::before {
  background:
    radial-gradient(circle at 30% 45%,rgba(85,210,227,.16),transparent 18%),
    radial-gradient(circle at 70% 38%,rgba(244,201,93,.08),transparent 20%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,transparent 1px 18px);
  filter:blur(1px);
  animation:introAtmosphere 5s ease-in-out infinite;
}
.senna-intro::after {
  background:radial-gradient(ellipse at 50% 58%,transparent 0 30%,rgba(7,17,39,.28) 68%,rgba(7,17,39,.58) 100%);
}
.intro-content { width:min(720px,92vw); }
.senna-live-text {
  font-size:clamp(66px,18vw,150px);
  letter-spacing:.07em;
  background:
    linear-gradient(180deg,#fff 0%,#c9fbff 32%,#55d2e3 58%,#3156ad 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(85,210,227,.55)) drop-shadow(0 18px 38px rgba(2,8,24,.52));
}
.senna-live-text .sl {
  transform-origin:0 50%;
  animation:
    sennaLetterReveal .62s var(--cinematic-ease) calc(.12s + var(--i) * .105s) both,
    blueFireFlicker 1.55s ease-in-out calc(.6s + var(--i) * .08s) 2;
}
.senna-live-text::before {
  content:"";
  position:absolute;
  inset:-18% -6% -8%;
  z-index:-1;
  background:radial-gradient(ellipse at 50% 66%,rgba(85,210,227,.26),transparent 66%);
  filter:blur(18px);
}
.senna-live-text::after {
  background:
    linear-gradient(100deg,transparent 38%,rgba(85,210,227,.72) 47%,rgba(255,255,255,.98) 50%,rgba(244,201,93,.7) 53%,transparent 62%);
}
.intro-punnayur {
  margin:8px auto 0;
  color:rgba(255,255,255,.94);
  font:800 clamp(17px,4.5vw,32px)/1 "Space Mono",monospace;
  letter-spacing:.42em;
  text-indent:.42em;
  opacity:0;
  filter:blur(16px);
  transform:translateY(16px);
  animation:
    punnayurSmokeReveal 1.15s var(--cinematic-ease) 1.1s both,
    punnayurSmokeFloat 4.4s ease-in-out 2.1s infinite;
}
.intro-punnayur::before,
.intro-punnayur::after {
  content:"";
  display:block;
  width:min(360px,74vw);
  height:1px;
  margin:12px auto;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),rgba(85,210,227,.45),transparent);
  filter:blur(.2px);
  animation:punnayurSmokeBand 4.6s ease-in-out 1.7s infinite;
}
.intro-rule { margin-top:18px; background:linear-gradient(90deg,transparent,var(--cyan),var(--victory-gold),transparent); }
.intro-content .il-line {
  animation:introLineIn .7s var(--cinematic-ease) calc(1.75s + var(--d,0) * .2s) both;
}
@keyframes introAtmosphere { 0%,100%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(2%, -1%,0) scale(1.03)} }
@keyframes blueFireFlicker { 0%,100%{filter:drop-shadow(0 0 12px rgba(85,210,227,.25))} 44%{filter:drop-shadow(0 0 28px rgba(85,210,227,.85)) drop-shadow(0 0 12px rgba(244,201,93,.35))} }
@keyframes punnayurSmokeReveal {
  0% { opacity:0; filter:blur(18px); transform:translateY(18px) scale(.98); }
  58% { opacity:1; filter:blur(2px); }
  100% { opacity:1; filter:none; transform:none; }
}
@keyframes punnayurSmokeFloat {
  0%,100% { transform:translate3d(0,0,0) rotate(0deg); }
  50% { transform:translate3d(0,-4px,0) rotate(-.75deg); }
}
@keyframes punnayurSmokeBand {
  0%,100% { opacity:.45; transform:translateX(0) scaleX(1); }
  50% { opacity:.72; transform:translateX(10px) scaleX(1.02); }
}

#page-dashboard .dashboard-container { padding-top:10px !important; }
#page-dashboard .cinematic-hero {
  min-height:540px;
  padding-top:34px;
  padding-bottom:24px;
}
.cinematic-hero .predict-brand-panel {
  padding:7px 12px 9px;
  border-radius:18px;
}
#page-dashboard .cinematic-hero .hero-title {
  letter-spacing:.045em;
  text-transform:uppercase;
}
.fifa-write {
  position:relative;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  gap:.02em;
  color:#fff !important;
  min-height:.95em;
  text-shadow:0 0 24px rgba(85,210,227,.38),0 14px 34px rgba(0,0,0,.38);
}
.fw-char,.fw-gap {
  display:inline-block !important;
  opacity:0;
  transform:translateY(10px) scale(.94);
  animation:fifaWriteCycle 4.25s ease-in-out calc(var(--i) * .045s) infinite;
}
.fw-gap { width:.28em; }
.football-cursor {
  position:absolute;
  left:-.52em;
  top:.1em;
  font-size:.28em;
  filter:drop-shadow(0 0 10px rgba(244,201,93,.55));
  animation:footballCursorCycle 4.25s ease-in-out infinite;
}
#page-dashboard .cinematic-hero .hero-title > span:last-child {
  margin-top:4px;
  color:var(--cyan);
  letter-spacing:.055em;
}
.hero-command {
  letter-spacing:.18em;
  color:#ffe38f;
}
#page-dashboard .cinematic-hero .hero-sub {
  font-weight:600;
  letter-spacing:.01em;
}
@keyframes fifaWriteCycle {
  0%,6% { opacity:0; transform:translateY(10px) scale(.94); filter:blur(4px); }
  14%,76% { opacity:1; transform:none; filter:none; }
  84%,100% { opacity:0; transform:translateY(-5px) scale(.98); filter:blur(2px); }
}
@keyframes footballCursorCycle {
  0% { opacity:0; transform:translateX(0) rotate(-18deg) scale(.8); }
  8% { opacity:1; }
  34% { opacity:1; transform:translateX(8.95em) rotate(340deg) scale(1); }
  44%,74% { opacity:.72; transform:translateX(8.95em) rotate(360deg) scale(.9); }
  84%,100% { opacity:0; transform:translateX(8.95em) rotate(390deg) scale(.75); }
}

.section-hdr {
  margin-top:6px;
  margin-bottom:10px;
  padding:2px 2px 0;
}
.section-hdr h2 {
  color:var(--navy);
  font:400 clamp(22px,6vw,30px)/1 "Bebas Neue",sans-serif;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.section-hdr h2::after {
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin-top:6px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--victory-gold));
}
.section-hdr a {
  font-weight:800;
  color:var(--blue);
}
.pred-badge,
.result-footer,
.score-team-label,
.pred-matchline,
.team-name,
.result-team b,
.round-badge,
.kickoff-pill {
  font-family:"Inter",system-ui,sans-serif;
  letter-spacing:.015em;
}
.team-name,
.result-team b,
.pred-matchline,
.score-team-label b {
  font-weight:800;
}
.pred-badge {
  font-weight:700;
}
.result-footer {
  font-weight:700;
}
.match-premium .vs-pill,
.match-premium .round-badge,
.match-premium .kickoff-pill {
  text-transform:uppercase;
}

@media (max-width:760px) {
  :root { --predict-h:58px; }
  .container { padding-inline:12px; }
  #page-dashboard .dashboard-container {
    width:100%;
    padding-inline:6px;
    padding-top:6px !important;
  }
  .predict-header {
    padding-inline:8px;
    gap:6px;
  }
  .predict-header .brand-lockup { width:32px; height:30px; }
  .predict-header .brand-name { font-size:18px; letter-spacing:1.45px; }
  .brand-name-sub { font-size:7.5px; letter-spacing:.16em; }
  .brand-name-sub::after { margin-top:3px; width:64%; }
  .predict-header .btn-icon { width:35px; height:35px; border-radius:12px; }
  .header-home-btn svg { width:18px; height:18px; }
  #communityMenuBtn { order:1; }
  .predict-header .brand { order:2; }
  .header-home-btn { order:3; margin-left:-3px; }
  .predict-header .brand-name { margin-right:1px; }
  #page-dashboard .cinematic-hero {
    min-height:424px;
    width:calc(100vw - 8px);
    margin-left:calc(50% - 50vw + 4px);
    border-radius:18px;
    padding:16px 9px 12px;
  }
  .hero-content { width:100%; }
  .hero-content::before { inset:-4% -4%; background:radial-gradient(ellipse 68% 58% at 50% 38%,rgba(5,13,32,.42),transparent 74%); }
  .cinematic-hero .predict-brand-panel { width:min(278px,78vw); margin-bottom:6px; }
  #page-dashboard .cinematic-hero .hero-kicker { font-size:8.5px; letter-spacing:1.35px; margin-bottom:3px; }
  #page-dashboard .cinematic-hero .hero-title { font-size:clamp(36px,10.8vw,48px); line-height:.88; }
  .football-cursor { left:-.44em; }
  .hero-command { font-size:24px; margin-top:4px; letter-spacing:.16em; }
  #page-dashboard .cinematic-hero .hero-sub { max-width:292px; font-size:11.5px; line-height:1.35; margin-top:4px; }
  .hero-actions { margin-top:9px; gap:7px; }
  .hero-actions .btn { min-width:124px; min-height:44px; padding-inline:13px; font-size:12px; }
  #page-dashboard .cinematic-hero .stats-row { width:min(350px,96%); margin-top:10px; gap:6px; }
  #dashMyPreds,
  #page-dashboard .dashboard-container > div[style*="margin-bottom:24px"] { margin-bottom:14px !important; }
  .section-hdr { margin-bottom:8px; }
  .athlete-left,.athlete-right { width:min(38vw,172px); bottom:-16px; }
  .athlete-left { left:-2px; }
  .athlete-right { right:-2px; }
  .athlete-center { width:min(36vw,164px); bottom:-24px; opacity:.48; }
}

@media (max-width:430px) {
  #page-dashboard .cinematic-hero {
    min-height:414px;
    padding-top:14px;
    padding-bottom:10px;
  }
  .cinematic-hero .predict-brand-panel { width:min(252px,76vw); }
  #page-dashboard .cinematic-hero .hero-title { font-size:clamp(34px,10.4vw,44px); }
  .hero-actions .btn { min-width:118px; padding-inline:11px; }
  .athlete-left,.athlete-right { width:128px; bottom:-48px; }
  .athlete-left { left:-8px; }
  .athlete-right { right:-8px; }
  .athlete-center { width:136px; bottom:-54px; opacity:.44; }
}

@media (max-width:375px) {
  .predict-header .brand-name { font-size:16px; }
  .brand-name-sub { display:block; font-size:7px; letter-spacing:.13em; }
  .predict-header .btn-icon { width:32px; height:32px; }
  .predict-left { gap:3px; }
  .header-home-btn { margin-left:-4px; }
  #page-dashboard .cinematic-hero { min-height:404px; }
  .cinematic-hero .predict-brand-panel { width:min(232px,74vw); }
  .hero-actions .btn { min-width:112px; font-size:11px; }
  .athlete-left,.athlete-right { width:118px; bottom:-52px; }
  .athlete-center { width:124px; bottom:-58px; }
}

@media (prefers-reduced-motion:reduce) {
  .fw-char,.fw-gap,.football-cursor,.intro-punnayur,.senna-intro::before {
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
  .intro-punnayur::before,
  .intro-punnayur::after {
    animation:none !important;
  }
}