/* ═══════════════════════════════
   THEME SYSTEM
   All components use CSS vars — flipping :root vars switches everything.
   Smooth interpolation via CSS transition.
═══════════════════════════════ */

/* Smooth theme transitions — applied only to specific themed properties, NOT via * selector */
body, nav, footer, .footer-bottom,
.member-card, .event-card, .prod-card, .step, .ach-row,
.modal-box, .mp-box, .modal-hdr, .mp-hdr, .modal-footer, .mp-footer,
.modal-overlay, .mp-overlay,
.f-input, .f-select, .f-textarea,
.adm-item, #admin-panel, .adm-header,
.fact-item, .hero-bg, .hero-stats,
.btn-save, .btn-cancel, .btn-cart, .btn-reg, .nav-login-btn,
.nav-admin-btn, .nav-edit-btn, .nup-logout,
.adm-add-btn, .adm-btn, .adm-btn-edit, .adm-btn-del,
.roster-grid, .store-grid, .steps-grid,
#home, .hero-orb-wrap, .about-text,
.footer-links a, .soc-btn, .share-option,
.cart-panel, .cart-footer,
.adm-body, .adm-pane,
#spb{
  transition:
    background-color 1.5s ease,
    border-color     1.5s ease,
    color            1.2s ease,
    box-shadow       1.5s ease;
}

/* ── LIGHT MODE — Tactical Command Interface ── */
body, nav, footer, .footer-bottom,
.member-card, .event-card, .prod-card, .step, .ach-row,
.modal-box, .mp-box, .modal-hdr, .mp-hdr, .modal-footer, .mp-footer,
.modal-overlay, .mp-overlay,
.f-input, .f-select, .f-textarea,
.adm-item, #admin-panel, .adm-header,
.fact-item, .hero-bg, .hero-stats,
.btn-save, .btn-cancel, .btn-cart, .btn-reg, .nav-login-btn,
.nav-admin-btn, .nav-edit-btn, .nup-logout,
.adm-add-btn, .adm-btn, .adm-btn-edit, .adm-btn-del,
.roster-grid, .store-grid, .steps-grid,
#home, .hero-orb-wrap, .about-text,
.footer-links a, .soc-btn, .share-option,
.cart-panel, .cart-footer,
.adm-body, .adm-pane,
#spb {
  transition:
    background-color 1.5s ease,
    border-color     1.5s ease,
    color            1.2s ease,
    box-shadow       1.5s ease;
}

body.light-mode {
  --lm-base:    #e2e6ea;
  --lm-section: #eceff2;
  --lm-card:    #f5f7f9;
  --lm-raised:  #ffffff;
  --lm-input:   #eceff3;
  --lm-sunken:  #d7dce1;
  --lm-shadow-xs: 0 1px 3px rgba(10,20,30,.10), 0 1px 2px rgba(10,20,30,.08);
  --lm-shadow-sm: 0 2px 8px rgba(10,20,30,.10), 0 1px 4px rgba(10,20,30,.08);
  --lm-shadow-md: 0 4px 16px rgba(10,20,30,.12), 0 2px 6px rgba(10,20,30,.09);
  --lm-shadow-lg: 0 8px 32px rgba(10,20,30,.14), 0 4px 10px rgba(10,20,30,.10);
  --lm-ember-glow: 0 0 0 1px rgba(11,135,166,.14), 0 4px 16px rgba(11,135,166,.09);
  --iron:      var(--lm-section);
  --iron-mid:  var(--lm-card);
  --iron-light:var(--lm-raised);
  --iron-deep: var(--lm-input);
  --ember:     #0b87a6;
  --ember-dim: #086a84;
  --gold:      #8a5f00;
  --steel:     #4b545e;
  --white:     #12161a;
  --off-white: #262c32;
  --success:   #167a3e;
  --danger:    #a8271c;
  background: var(--lm-base);
  color: var(--white);
  background-image:
    repeating-linear-gradient(
      0deg, transparent, transparent 40px,
      rgba(150,170,185,.10) 40px, rgba(150,170,185,.10) 41px
    );
}

/* NAV */
body.light-mode nav {
  background: rgba(246,248,250,.95) !important;
  border-bottom: 1px solid rgba(11,135,166,.28);
  box-shadow: 0 1px 0 rgba(11,135,166,.25), 0 4px 24px rgba(0,0,0,.10), 0 0 40px rgba(11,135,166,.06);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
body.light-mode nav::before{ opacity:.5; }
body.light-mode .nav-logo { color: var(--white); }
body.light-mode .nav-links a { color: var(--steel); }
body.light-mode .nav-links a:hover { color: var(--ember); }
body.light-mode .hamburger span { background: var(--white); }
body.light-mode .mobile-menu { background: rgba(246,248,250,.99); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
body.light-mode .mobile-menu a { color: var(--white); }

/* SECTION BACKGROUNDS */
body.light-mode #roster, body.light-mode #achievements, body.light-mode #about { background: rgba(246,248,250,.75); }
body.light-mode #events, body.light-mode #merch { background: var(--lm-section); }
body.light-mode #join {
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(11,135,166,.12), transparent 60%),
    radial-gradient(ellipse 40% 40% at 85% 100%, rgba(232,160,32,.08), transparent 60%),
    #dee3e8;
}
body.light-mode .ember-divider {
  background: linear-gradient(to right, transparent, rgba(11,135,166,.5), rgba(232,160,32,.4), transparent);
  opacity: 1; height: 1.5px;
}

/* CARDS */
body.light-mode .member-card { background: var(--lm-section); border: 1px solid rgba(0,0,0,.09); }
body.light-mode .member-card:hover { background: rgba(246,248,250,.75); border-color: rgba(11,135,166,.35); box-shadow: 0 0 0 1px rgba(11,135,166,.15), 0 8px 28px rgba(11,135,166,.14); }
body.light-mode .member-card::before { border-top-color: var(--ember); border-right-color: var(--ember); }
body.light-mode .member-card::after  { border-bottom-color: var(--ember); border-left-color: var(--ember); }
body.light-mode .event-card { background: var(--lm-card); border: 1px solid rgba(0,0,0,.07); }
body.light-mode .event-card:hover { background: var(--lm-section); border-color: rgba(11,135,166,.32); box-shadow: 0 0 0 1px rgba(11,135,166,.12), 0 6px 22px rgba(11,135,166,.12); }
body.light-mode .prod-card { background: var(--lm-card); border: 1px solid rgba(0,0,0,.08); }
body.light-mode .prod-card:hover { background: var(--lm-section); border-color: rgba(11,135,166,.32); box-shadow: 0 0 0 1px rgba(11,135,166,.12), 0 6px 22px rgba(11,135,166,.12); }
body.light-mode #merch { background: radial-gradient(ellipse 80% 60% at 50% 0%,rgba(11,135,166,.1),transparent 65%), var(--lm-section); }
body.light-mode .step { background: var(--lm-section); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border: 1px solid rgba(0,0,0,.08); box-shadow: none; }
body.light-mode .step:hover { background: var(--lm-card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-color: rgba(11,135,166,.3); box-shadow: 0 0 0 1px rgba(11,135,166,.12), 0 6px 20px rgba(11,135,166,.12); }
body.light-mode .step::before { border-top-color:var(--ember); border-right-color:var(--ember); }
body.light-mode .step::after  { border-bottom-color:var(--ember); border-left-color:var(--ember); }
/* GRID CONTAINERS */
body.light-mode .roster-grid { background: transparent; border: none; box-shadow: none; gap: 1.2rem; }
body.light-mode .store-grid  { background: transparent; border: none; box-shadow: none; gap: 1.2rem; }
body.light-mode .ach-row { background: var(--lm-section); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border: 1px solid rgba(0,0,0,.08); box-shadow: none; }
body.light-mode .ach-row:hover { background: var(--lm-card); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-color: rgba(11,135,166,.3); box-shadow: 0 0 0 1px rgba(11,135,166,.1), 0 4px 18px rgba(11,135,166,.1); }
body.light-mode .ach-list { border: none; box-shadow: none; overflow: visible; }
body.light-mode .ach-icon { background: rgba(11,135,166,.08); border-color: rgba(11,135,166,.15); }
body.light-mode .steps-grid  { background: transparent; border: none; box-shadow: none; gap: 1.2rem; }

/* MODALS & ADMIN PANEL */
body.light-mode .modal-overlay { background: rgba(20,20,24,.45); backdrop-filter: blur(4px); }
body.light-mode .mp-overlay    { background: rgba(20,20,24,.45); backdrop-filter: blur(4px); }
body.light-mode .modal-hdr, body.light-mode .mp-hdr { background: linear-gradient(135deg,rgba(11,135,166,.06),rgba(138,95,0,.04)); border-bottom: 1px solid rgba(0,0,0,.09); }
body.light-mode .modal-footer, body.light-mode .mp-footer { background: rgba(0,0,0,.025); border-top: 1px solid rgba(0,0,0,.09); }
body.light-mode #admin-panel { background: var(--lm-raised); border-left: 2px solid rgba(11,135,166,.2); box-shadow: none; }
body.light-mode .adm-header  { background: linear-gradient(135deg,rgba(158,98,0,.16),rgba(11,135,166,.1)); border-bottom: 1px solid rgba(11,135,166,.22); }
body.light-mode .adm-tabs    { background: rgba(0,0,0,.03); border-bottom: 1px solid rgba(0,0,0,.09); }
body.light-mode .adm-tab     { color: var(--steel); }
body.light-mode .adm-tab.active { color: var(--ember); border-bottom-color: var(--ember); }
body.light-mode .adm-body    { background: var(--lm-raised); }
body.light-mode .adm-item-name { color: var(--white); }
body.light-mode .adm-item-sub  { color: var(--steel); }
body.light-mode .adm-close { color: var(--steel); }
body.light-mode .adm-close:hover { color: var(--ember); }
body.light-mode .adm-btn-edit    { background: rgba(158,98,0,.12); color: var(--gold); border-color: rgba(158,98,0,.22); }
body.light-mode .adm-btn-del     { background: rgba(168,39,28,.1); color: var(--danger); border-color: rgba(168,39,28,.18); }
body.light-mode .adm-btn-approve { background: rgba(22,122,62,.12); color: var(--success); border-color: rgba(22,122,62,.22); }
body.light-mode .adm-add-btn     { background: var(--ember); color: #fff; box-shadow: var(--lm-shadow-sm); }

/* FORMS */
body.light-mode .f-input, body.light-mode .f-select, body.light-mode .f-textarea {
  background: var(--lm-input); border: 1px solid rgba(0,0,0,.14); color: var(--white);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
}
body.light-mode .f-select {
  background-color: var(--lm-input);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234e4e5a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - .8rem) 50%;
  color: var(--white);
}
body.light-mode .f-input:focus, body.light-mode .f-select:focus, body.light-mode .f-textarea:focus {
  border-color: var(--ember); box-shadow: inset 0 1px 3px rgba(0,0,0,.05), 0 0 0 3px rgba(11,135,166,.18), 0 0 12px rgba(11,135,166,.1);
}
body.light-mode .f-label { color: var(--steel); }

/* HERO */
body.light-mode #home { background: var(--lm-base); }
body.light-mode .hero-bg {
  background:
    radial-gradient(ellipse 60% 70% at 72% 50%, rgba(11,135,166,.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 15% 80%, rgba(232,160,32,.13) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(11,135,166,.06) 0%, transparent 70%),
    linear-gradient(145deg, #d7dce1 0%, #e2e6ea 40%, #eceff2 70%, #dee3e8 100%);
}
body.light-mode .hero-stripes::before {
  background: repeating-linear-gradient(-55deg, transparent, transparent 28px, rgba(11,135,166,.07) 28px, rgba(11,135,166,.07) 30px);
}
body.light-mode .hero-orb { background: radial-gradient(circle, rgba(11,135,166,.28) 0%, rgba(11,135,166,.10) 40%, transparent 70%); }
body.light-mode .hero-stats { border-top: 1px solid rgba(0,0,0,.10); }
body.light-mode .stat-num { color: var(--white); }
body.light-mode .stat-label, body.light-mode .hero-sub { color: var(--steel); }

/* ABOUT */
body.light-mode .about-glow { background: radial-gradient(circle, rgba(11,135,166,.32), transparent 70%); }
body.light-mode .about-text p { color: var(--steel); }
body.light-mode .about-text p strong { color: var(--white); }
body.light-mode .fact-item { background: var(--lm-section); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border: 1px solid rgba(11,135,166,.15); border-left: 3px solid var(--ember); box-shadow: 0 3px 12px rgba(0,0,0,.08), 0 0 0 1px rgba(11,135,166,.08), 0 0 20px rgba(11,135,166,.07); }
body.light-mode .adm-item  { background: var(--lm-card); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border: 1px solid rgba(0,0,0,.09); box-shadow: 0 3px 10px rgba(0,0,0,.07); }
body.light-mode .adm-item::before { border-top-color:var(--ember); border-right-color:var(--ember); }
body.light-mode .adm-item::after  { border-bottom-color:var(--ember); border-left-color:var(--ember); }
body.light-mode .modal-box, body.light-mode .mp-box { background: var(--lm-card); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border: 1px solid rgba(11,135,166,.28); box-shadow: 0 16px 48px rgba(0,0,0,.15), 0 0 0 1px rgba(11,135,166,.1), 0 0 40px rgba(11,135,166,.08); }
body.light-mode .confirm-box { background: var(--lm-card); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border: 1px solid rgba(168,39,28,.3); box-shadow: 0 16px 40px rgba(0,0,0,.14); }
body.light-mode .toast { background: rgba(255,255,255,.94); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-color: rgba(11,135,166,.4); color: var(--white); box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 0 0 1px rgba(11,135,166,.12), 0 0 20px rgba(11,135,166,.1); }
body.light-mode .fact-lbl { color: var(--steel); }
body.light-mode .fact-val { color: var(--white); }

/* SOCIAL */
body.light-mode .soc-btn { background: var(--lm-card); border-color: rgba(0,0,0,.10); color: var(--steel); box-shadow: var(--lm-shadow-xs); }
body.light-mode .soc-btn:hover { color: var(--ember); border-color: rgba(11,135,166,.3); box-shadow: var(--lm-shadow-sm); }

/* BUTTONS */
body.light-mode .btn-save   { background: var(--ember); color: #fff; box-shadow: var(--lm-shadow-sm); }
body.light-mode .btn-save:hover { background: #a02800; box-shadow: var(--lm-shadow-md); }
body.light-mode .btn-cancel { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.14); color: var(--steel); }
body.light-mode .btn-primary { box-shadow: 0 4px 14px rgba(11,135,166,.35), 0 0 0 1px rgba(11,135,166,.15); }
body.light-mode .btn-primary:hover { box-shadow: 0 6px 22px rgba(11,135,166,.45), 0 0 0 1px rgba(11,135,166,.22); }
body.light-mode .btn-reg { background: var(--ember); color: #fff; }
/* Filled treatment, matching .btn-reg's light-mode override above —
   .btn-cart is no longer an outline-style button in dark mode either. */
body.light-mode .btn-cart { background: var(--ember); color: #fff; }
body.light-mode .btn-cart:hover { background: #a02800; }
body.light-mode .nav-login-btn { background: var(--ember); color: #fff; box-shadow: var(--lm-shadow-sm); }
body.light-mode .nav-admin-btn { background: rgba(158,98,0,.12); border-color: rgba(158,98,0,.3); color: var(--gold); }
body.light-mode .nav-edit-btn  { background: rgba(77,160,220,.1); border-color: rgba(77,160,220,.25); }

/* FOOTER */
body.light-mode footer { background: linear-gradient(180deg,#ccc8be 0%,#c4c0b6 100%); border-top: 2px solid rgba(11,135,166,.35); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 -4px 20px rgba(11,135,166,.08); }
body.light-mode .footer-bottom { background: #bab6ac; border-top: 1px solid rgba(0,0,0,.07); }
body.light-mode .footer-col-ttl { color: var(--ember); }
body.light-mode .footer-links a { color: var(--steel); }
body.light-mode .footer-links a:hover { color: var(--white); }

/* EVENT / PRODUCT DETAILS */
body.light-mode .e-br { background: rgba(11,135,166,.12); color: var(--ember); }
body.light-mode .e-mp { background: rgba(30,120,210,.12); color: #1a6abe; }
body.light-mode .e-name { color: var(--white); }
body.light-mode .e-date, body.light-mode .e-prize-lbl { color: var(--steel); }
body.light-mode .e-prize { color: var(--gold); }
body.light-mode .prod-icon { background: var(--lm-input); border-color: rgba(0,0,0,.09); }
body.light-mode .prod-cat, body.light-mode .prod-desc { color: var(--steel); }
body.light-mode .prod-name { color: var(--white); }
body.light-mode .prod-footer { border-top-color: rgba(0,0,0,.08); }
body.light-mode .prod-price { color: var(--white); }

/* ACHIEVEMENT SECTION */
body.light-mode .ach-icon { background: rgba(11,135,166,.1); border-color: rgba(11,135,166,.28); box-shadow: 0 0 14px rgba(11,135,166,.18); }
body.light-mode .ach-title { color: var(--white); }
body.light-mode .ach-holder { color: var(--ember); }
body.light-mode .ach-desc, body.light-mode .ach-date { color: var(--steel); }

/* MEMBER PREVIEW */
body.light-mode .mp-stat-box  { background: var(--lm-input); border: 1px solid rgba(0,0,0,.08); box-shadow: none; }
body.light-mode .mp-stat-num  { color: var(--white); }
body.light-mode .mp-stat-lbl  { color: var(--steel); }
body.light-mode .mp-section   { color: var(--ember); border-bottom-color: rgba(11,135,166,.15); }
body.light-mode .mp-lbl       { color: var(--steel); }
body.light-mode .mp-val       { color: var(--white); }
body.light-mode .mp-hdr-ign   { color: var(--white); }
body.light-mode .mp-loadout-card { background: transparent; border: none; }
body.light-mode .mp-loadout-lbl  { background: transparent; color: var(--steel); }
body.light-mode .mp-loadout-empty { color: var(--steel); background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.12); }
body.light-mode .mp-close     { color: var(--steel); }
body.light-mode .mp-close:hover { color: var(--ember); }
body.light-mode .modal-close  { color: var(--steel); }
body.light-mode .modal-close:hover { color: var(--ember); }
body.light-mode .mp-row       { border-bottom-color: rgba(0,0,0,.06); }
/* Dynamically-injected content inside mp-body (achievement rows, bio, registered player tags) */
body.light-mode .mp-body [style*="rgba(255,255,255,.04)"] { border-bottom-color: rgba(0,0,0,.06) !important; }
body.light-mode .mp-body [style*="rgba(255,255,255,.06)"] { background: var(--lm-input) !important; border-color: rgba(0,0,0,.1) !important; color: var(--white) !important; }

/* Match Results standings table (_mrStandingsHtml) — row/header dividers and
   the "Cut"/Penalty badges are hardcoded white-based rgba borders that
   disappear against the light-mode card background. */
body.light-mode #mr-standings-wrap [style*="border-bottom:1px solid rgba(255,255,255,.1)"],
body.light-mode #mr-standings-wrap [style*="border-bottom:1px solid rgba(255,255,255,.05)"] { border-bottom-color: rgba(0,0,0,.12) !important; }
body.light-mode #mr-standings-wrap [style*="rgba(255,255,255,.15)"] { border-color: rgba(0,0,0,.18) !important; }
body.light-mode #mr-standings-wrap [style*="rgba(255,255,255,.06)"] { background: rgba(0,0,0,.05) !important; }

/* Admin surfaces — #admin-panel, its popped-out full-page twin
   (#adminFullPageOverlay — Match Centre/Match Results content gets
   reparented there via openAdminFullPage, same markup either way), the
   generic Edit modal (#modalOverlay, openModal()), and the Rule Set
   editor overlay ([data-rule-set-overlay]) — all become light surfaces
   in light mode (see each one's own body.light-mode background rule),
   but dozens of section dividers, toggle/tab buttons, empty-state boxes,
   badges, color pickers, and pool/slot rows across static index.php
   markup and script.js-generated fragments hardcode white-based rgba
   borders assuming a dark surface. Scoped with :is() to these four
   containers specifically — NOT global — because a few genuinely
   always-dark widgets (e.g. #loginOverlay, the #14141c autocomplete
   dropdown) reuse these exact same opacity values on purpose against
   their own permanently-dark background and must stay untouched. Covers
   every opacity step actually used in this codebase for "subtle divider"
   (.04–.09) and "subtle outline" (.1–.2), not just the specific
   instances first found via an automated contrast sweep, so newly-added
   fragments using the same idiom don't silently reopen this bug. */
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-top:1px solid rgba(255,255,255,.04)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-top:1px solid rgba(255,255,255,.06)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-top:1px solid rgba(255,255,255,.07)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-top:1px solid rgba(255,255,255,.08)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-top:1px solid rgba(255,255,255,.1)"] { border-top-color: rgba(0,0,0,.12) !important; }
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-bottom:1px solid rgba(255,255,255,.04)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-bottom:1px solid rgba(255,255,255,.06)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-bottom:1px solid rgba(255,255,255,.07)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border-bottom:1px solid rgba(255,255,255,.08)"] { border-bottom-color: rgba(0,0,0,.12) !important; }
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px solid rgba(255,255,255,.08)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px solid rgba(255,255,255,.09)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px solid rgba(255,255,255,.1)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px solid rgba(255,255,255,.12)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px solid rgba(255,255,255,.15)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px solid rgba(255,255,255,.18)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px solid rgba(255,255,255,.2)"] { border-color: rgba(0,0,0,.2) !important; }
/* Match Centre → Group Rotation section (Group Management + Rotation
   Phases cards) — real CSS classes, not inline styles, so none of the
   attribute-selector fixes above ever reached them. */
body.light-mode :is(#admin-panel, #adminFullPageOverlay) .mc-grp-card,
body.light-mode :is(#admin-panel, #adminFullPageOverlay) .mc-phase-pool,
body.light-mode :is(#admin-panel, #adminFullPageOverlay) .mc-phase-card { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.14) !important; }
body.light-mode :is(#admin-panel, #adminFullPageOverlay) .mc-phase-card:hover { background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.28) !important; }
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px dashed rgba(255,255,255,.08)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px dashed rgba(255,255,255,.15)"],
body.light-mode :is(#admin-panel, #adminFullPageOverlay, #modalOverlay, [data-rule-set-overlay]) [style*="border:1px dashed rgba(255,255,255,.2)"] { border-color: rgba(0,0,0,.16) !important; }
body.light-mode #log-search { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.16) !important; color: var(--white) !important; }
body.light-mode #admin-panel button[onclick="renderAdminLogs()"] { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.16) !important; }

/* Ad-hoc overlay shells (document.createElement popups scattered across
   script.js — Rule Set editor, Penalty Category/Escalation/Bonus Objective
   modals, Withdraw/Update Request popups, Scan Scoreboard review, etc.)
   all copy-paste the same two inline-style fragments rather than a shared
   class: a card with background:var(--iron-mid) + a white-based border,
   and a ghost Cancel/Close button with the same white-based
   background+border. Global (not container-scoped) since these overlays
   have no shared wrapper id — found ~33 and ~38 occurrences respectively
   via an automated contrast sweep across admin modals. */
body.light-mode [style*="background:var(--iron-mid);border:1px solid rgba(255,255,255,.1)"] { border-color: rgba(0,0,0,.12) !important; }
body.light-mode [style*="background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)"] { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.16) !important; }

/* "Preview My Team" popup (_mhOpenTeamPreview) — starter/sub row dividers. */
body.light-mode [data-team-preview-overlay] [style*="border-bottom:1px solid rgba(255,255,255,.05)"] { border-bottom-color: rgba(0,0,0,.1) !important; }
/* Penalty popup (_mrOpenPenaltyPopup) — the Manual Adjustment mode-toggle
   button's inactive state (border-color is also toggled live via JS
   between this and an ember/danger-colored active state — the attribute
   selector re-evaluates automatically either way, no extra JS needed). */
body.light-mode [data-penalty-overlay] [style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)"] { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.16) !important; }
/* Scoring Matrix modal (openScoringModal) — section dividers between
   Placement/Kill Points/BR Kill Bonus/Series/Elimination sub-sections. */
body.light-mode [data-scoring-overlay] [style*="border-top:1px solid rgba(255,255,255,.07)"] { border-top-color: rgba(0,0,0,.12) !important; }
/* Registered List modal (_showRegisteredList) — per-team cards. */
body.light-mode [data-registered-list-overlay] [style*="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)"] { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.14) !important; }
/* Tournament Winners modal (_tournWinnersHtml) — winner/bonus rows. */
body.light-mode [data-winners-overlay] [style*="background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)"] { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.14) !important; }
/* Check-in Status modal (_mcOpenCheckinStatusModal) — per-team row dividers. */
body.light-mode [data-checkin-status-overlay] [style*="border-bottom:1px solid rgba(255,255,255,.06)"] { border-bottom-color: rgba(0,0,0,.12) !important; }
/* Round Replay modal (_mrOpenReplayModal) — Normal/Bonus Round type-toggle
   buttons' inactive state (same live-toggled border-color pattern as the
   Penalty popup above). */
body.light-mode [data-replay-match-overlay] [style*="background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)"] { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.16) !important; }
/* Tournament Registration (#tournRegOverlay), Store Checkout
   (#checkoutOverlay), and Tournament Preview (.mp-body) — info/notice
   boxes and the Order Summary/Total divider all copy-paste the same
   white-based "subtle box" pattern. */
body.light-mode :is(#tournRegOverlay, #checkoutOverlay, .mp-body) [style*="background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)"],
body.light-mode :is(#tournRegOverlay, #checkoutOverlay, .mp-body) [style*="background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)"] { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.14) !important; }
body.light-mode :is(#tournRegOverlay, #checkoutOverlay, .mp-body) [style*="border-top:1px solid rgba(255,255,255,.08)"] { border-top-color: rgba(0,0,0,.14) !important; }
/* Match Centre "Edit Phase" popup (_mcOpenPhasePopup) — appended directly
   to <body> rather than nested inside #admin-panel like every other admin
   overlay (so none of the #admin-panel-scoped fixes above ever reached
   it), and its card used var(--iron-dark,#1a1a1f) — a CSS variable that's
   never actually defined anywhere, so it always fell back to the
   hardcoded dark grey in both themes. Card itself switched to the normal
   var(--iron-mid) alongside this edit; these cover its remaining
   white-based border/input styling now that the surface is genuinely
   light in light mode. */
body.light-mode [data-phase-popup-overlay] [style*="border:1px solid rgba(255,255,255,.15)"] { border-color: rgba(0,0,0,.2) !important; }
/* The pp-label/pp-from/pp-to text inputs specifically — a flat
   background:rgba(0,0,0,.04) + 1px border here measured as technically
   present but visually imperceptible against the card (confirmed: a
   forced high-contrast border rendered fine, so this isn't a paint bug,
   just too-subtle a combination). Matched to the real .f-input light-mode
   treatment instead (solid --lm-input fill + inset shadow for a "recessed
   field" cue), which already reads clearly everywhere else in the app. */
body.light-mode [data-phase-popup-overlay] [style*="background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15)"] { background: var(--lm-input) !important; border-color: rgba(0,0,0,.16) !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.07) !important; }
body.light-mode [data-phase-popup-overlay] [style*="border:1px solid rgba(255,255,255,.2)"] { border-color: rgba(0,0,0,.24) !important; }

/* MISC */
body.light-mode ::-webkit-scrollbar-track { background: var(--lm-sunken); }
body.light-mode ::-webkit-scrollbar-thumb { background: rgba(11,135,166,.5); border-radius: 2px; }
body.light-mode #spb { background: linear-gradient(to right,var(--ember),var(--gold)); box-shadow: 0 1px 6px rgba(11,135,166,.5), 0 0 12px rgba(11,135,166,.25); }
body.light-mode .eyebrow { color: var(--ember); text-shadow: 0 0 14px rgba(11,135,166,.35); }
body.light-mode .eyebrow::before { background: var(--ember); box-shadow: 0 0 6px rgba(11,135,166,.4); }
body.light-mode h2.sec-title { color: var(--white); text-shadow: 0 0 40px rgba(11,135,166,.1); }
body.light-mode .sec-desc { color: var(--steel); }
body.light-mode .join-title { color: var(--white); }  /* var(--white) = #141418 in light mode = near black */
body.light-mode .join-title .jt-forge,
body.light-mode .join-title .jt-forge span { color: var(--ember); }
/* Dark mode explicit — white text, ember FORGE */
body:not(.light-mode) .join-title { color: #eaf0f4; }
body:not(.light-mode) .join-title .jt-forge,
body:not(.light-mode) .join-title .jt-forge span { color: var(--ember); }
body.light-mode .join-desc { color: var(--steel); }
body.light-mode .step-num { color: rgba(11,135,166,.14); }
body.light-mode .step-title { color: var(--white); }
body.light-mode .step-desc { color: var(--steel); }
body.light-mode .share-dropdown { background: var(--lm-raised); border-color: rgba(11,135,166,.18); box-shadow: var(--lm-shadow-md); }
body.light-mode .share-option { color: var(--steel); }
body.light-mode .share-option:hover { color: var(--white); background: rgba(11,135,166,.08); }
body.light-mode #cartPanel { background: var(--lm-raised); border-left: 2px solid rgba(11,135,166,.18); box-shadow: -6px 0 32px rgba(0,0,0,.14); }
body.light-mode #guestTip  { background: var(--lm-raised); border-color: rgba(11,135,166,.4); color: var(--white); box-shadow: var(--lm-shadow-md); }
body.light-mode .m-loc, body.light-mode .ms-lbl { color: var(--steel); }
body.light-mode .ms-num { color: var(--white); }
body.light-mode .pending-badge { background: rgba(158,98,0,.12); color: var(--gold); border: 1px solid rgba(158,98,0,.22); }

.no-border-anim::before,
.no-border-anim::after {
  display: none !important;
}

/* ── Nav chat icon — icon-only, logged-in only; sits before the theme
   toggle in both the desktop nav and the compact mobile top bar (moved
   out of the account popup/drawer on each so it's a single tap away
   regardless of screen size). Bare icon, no circle/background — same
   plain-icon-button treatment as #navCartBtn right next to it. ── */
.nav-chat-btn{
  position:relative;width:32px;height:32px;flex-shrink:0;
  background:none;border:none;
  color:var(--steel);font-size:1.1rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:color .2s;
}
.nav-chat-btn:hover{color:var(--ember)}
.nav-chat-btn .nup-alert-count{
  position:absolute;top:-2px;right:-2px;margin-left:0;
  background:var(--ember);color:var(--iron);border-color:var(--ember);
}

/* ── Theme toggle pill ── */
.theme-toggle {
  position: relative; width: 46px; height: 24px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(53,204,236,.3);
  border-radius: 12px; cursor: pointer; flex-shrink: 0; outline: none; padding: 0;
}
.theme-toggle::after {
  content: '🌙';
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--ember);
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; line-height: 18px; text-align: center;
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .3s !important;
}
body.light-mode .theme-toggle { background: rgba(11,135,166,.1); border-color: rgba(11,135,166,.4); }
body.light-mode .theme-toggle::after { content: '☀️'; transform: translateX(22px); background: var(--gold); }

/* ═══════════════════════════════
   CODM TRANSITION LAYERS
═══════════════════════════════ */

/* 1. Full-screen translucent overlay flash */
#codm-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:99989;
  opacity:0; background:rgba(53,204,236,0);
}
#codm-overlay.active{
  animation:codmOverlay 1.2s ease forwards;
}
@keyframes codmOverlay{
  0%  { background:rgba(53,204,236,0);   opacity:0; }
  15% { background:rgba(53,204,236,.07); opacity:1; }
  50% { background:rgba(18,18,20,.14);  opacity:.85; }
  100%{ background:rgba(53,204,236,0);   opacity:0; }
}

/* 2. Diagonal scan sweep */
#codm-scan{
  position:fixed; inset:0; pointer-events:none; z-index:99990; overflow:hidden;
}
#codm-scan .sweep{
  position:absolute; top:0; left:-100%; width:55%; height:100%;
  background:linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,140,40,.05) 35%,
    rgba(255,200,100,.22) 50%,
    rgba(255,140,40,.05) 65%,
    transparent 100%
  );
  pointer-events:none;
}
#codm-scan .sweep.active{
  transition:left 1.2s cubic-bezier(.2,0,.4,1);
  left:160%;
}

/* 3. HUD border + corner brackets */
#codm-hud{
  position:fixed; inset:0; pointer-events:none; z-index:99991;
  border:2px solid transparent; opacity:0;
}
#codm-hud.active{
  animation:hudPulse 1.2s ease forwards;
  box-shadow:inset 0 0 40px rgba(53,204,236,.06);
}
@keyframes hudPulse{
  0%  { border-color:rgba(53,204,236,.65); opacity:1; }
  50% { border-color:rgba(255,200,50,.45); opacity:.8; }
  100%{ border-color:transparent;          opacity:0; }
}
#codm-hud::before,#codm-hud::after{
  content:''; position:absolute;
  width:28px; height:28px;
  border-style:solid; border-color:var(--ember);
  opacity:0;
}
#codm-hud.active::before{
  top:10px; left:10px; border-width:2px 0 0 2px;
  animation:bracketFade 1.2s ease forwards;
}
#codm-hud.active::after{
  bottom:10px; right:10px; border-width:0 2px 2px 0;
  animation:bracketFade 1.2s ease forwards;
}
@keyframes bracketFade{
  0%  { opacity:1; }
  70% { opacity:.5; }
  100%{ opacity:0; }
}

/* 4. Digital grid overlay */
#codm-grid{
  position:fixed; inset:0; pointer-events:none; z-index:99988; opacity:0;
  background-image:
    linear-gradient(rgba(53,204,236,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,204,236,.045) 1px, transparent 1px);
  background-size:40px 40px;
}
#codm-grid.active{ animation:gridPulse 1.2s ease forwards; }
@keyframes gridPulse{
  0%  { opacity:0; }
  20% { opacity:.9; }
  70% { opacity:.35; }
  100%{ opacity:0; }
}

/* 5. Spark particles */
#codm-particles{
  position:fixed; inset:0; pointer-events:none; z-index:99992; overflow:hidden;
}
.codm-spark{
  position:absolute; border-radius:50%; pointer-events:none;
  animation:sparkFly .9s ease-out forwards;
}
@keyframes sparkFly{
  0%  { transform:translate(0,0) scale(1); opacity:.85; }
  100%{ transform:translate(var(--dx),var(--dy)) scale(0); opacity:0; }
}

/* ═══════════════════════════════
   ROOT & RESET
═══════════════════════════════ */
:root {
  --iron:        #0b0e13;
  --iron-mid:    #131822;
  --iron-light:  #1c2330;
  --iron-deep:   #060810;
  --ember:       #35ccec;
  --ember-dim:   #1b8fb0;
  --gold:        #ffb020;
  --steel:       #7e8a99;
  --white:       #eaf0f4;
  --off-white:   #b4bfc9;
  --success:     #2ecc71;
  --danger:      #e74c3c;
  /* Utility — no name conflicts with existing vars */
  --glass-bg:    rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.09);
  --ember-glow:  rgba(53,204,236,.15);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--iron);
  color:var(--white);
  font-family:'Saira',sans-serif;
  font-weight:400;
  overflow-x:hidden;
  cursor:none;
}
/* scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--iron-deep)}
::-webkit-scrollbar-thumb{background:var(--ember-dim);border-radius:2px}

/* ═══════════════════════════════
   CUSTOM CURSOR
═══════════════════════════════ */
#cur-dot,#cur-ring{
  position:fixed;border-radius:50%;
  pointer-events:none;z-index:99999;
  transition:opacity .3s;
}
#cur-dot{
  width:6px;height:6px;
  background:var(--ember);
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px var(--ember);
}
#cur-ring{
  width:32px;height:32px;
  border:1.5px solid rgba(53,204,236,.6);
  transform:translate(-50%,-50%);
  transition:width .2s,height .2s,border-color .2s,background .2s;
}
/* Crosshair arms — hidden by default, shown on hover */
#cur-ring::before,#cur-ring::after{
  content:'';position:absolute;
  opacity:0;
  transition:opacity .18s,transform .18s;
  border-radius:1px;
}
/* Horizontal arm */
#cur-ring::before{
  width:10px;height:1.5px;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scaleX(0);
  background:#ff453a;
  box-shadow:22px 0 0 var(--ember), -22px 0 0 var(--ember);
}
/* Vertical arm */
#cur-ring::after{
  width:1.5px;height:10px;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scaleY(0);
  background:#ff453a;
  box-shadow:0 22px 0 var(--ember), 0 -22px 0 var(--ember);
}
body.cur-hover #cur-ring{
  width:44px;height:44px;
  border-color:var(--ember);
  background:rgba(53,204,236,.08);
}
body.cur-hover #cur-ring::before{
  opacity:1;
  transform:translate(-50%,-50%) scaleX(1);
}
body.cur-hover #cur-ring::after{
  opacity:1;
  transform:translate(-50%,-50%) scaleY(1);
}
body.cur-click #cur-ring{
  width:22px;height:22px;
  background:rgba(53,204,236,.2);
}
@media(hover:none){#cur-dot,#cur-ring{display:none}body{cursor:auto}}

/* ═══════════════════════════════
   NOISE OVERLAY
═══════════════════════════════ */
body::before{
  content:'';position:fixed;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:9998;opacity:.3;
}
/* HUD scanlines — dark mode only (light mode has its own paper-grid texture) */
body::after{
  content:'';position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(120,200,220,.014) 3px 4px);
  pointer-events:none;z-index:9997;
}
body.light-mode::after{display:none}

/* ═══════════════════════════════
   NAV
═══════════════════════════════ */
nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 5vw;height:64px;
  background:rgba(9,9,16,.88);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid rgba(53,204,236,.15);
  box-shadow:0 1px 0 rgba(53,204,236,.08),0 4px 24px rgba(0,0,0,.4);
}
/* ember stripe across very top of nav */
nav::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(to right,transparent 0%,var(--ember) 30%,var(--gold) 70%,transparent 100%);
  opacity:.7;
}
.nav-logo{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.2rem;
  letter-spacing:.1em;color:var(--white);text-decoration:none;
  z-index:1001;position:relative;
  display:flex;align-items:center;
  text-shadow:0 0 24px rgba(53,204,236,.3);
}
.nav-logo-img{
  height:46px;
  width:auto;
  display:block;
  object-fit:contain;
}
.nav-logo-text{ color:var(--white); }
.nav-logo-text span{color:var(--ember)}
.nav-logo span{color:var(--ember)}
.nav-links{
  display:flex;gap:2.2rem;list-style:none;
  transition:all .3s;
}
.nav-links a{
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);text-decoration:none;
  position:relative;padding-bottom:2px;
  transition:color .2s;
}
/* underline slides outward from center on hover. Full-width box at rest,
   scaled to zero via transform (not left:50%/right:50% collapsing to a
   0-width box) — the old left/right approach rounds each side's percentage
   to a device pixel independently, and on an odd-width parent the two
   roundings don't perfectly cancel, leaving a hairline sliver of the
   ember background visible at rest (seen as a small persistent amber dot
   centered under the link, most visible on "About"). transform:scaleX is
   a single GPU operation with no such independent-rounding step. */
.nav-links a::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:1.5px;background:var(--ember);
  transform:scaleX(0);
  transition:transform .22s ease;
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.nav-active{color:var(--ember)}
.nav-links a.nav-active::after{transform:scaleX(1)}
body.light-mode .nav-links a.nav-active{color:var(--ember)}
.nav-right{display:flex;align-items:center;gap:1rem;z-index:1001}
.nav-cta{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iron);background:var(--ember);padding:.48rem 1.3rem;
  text-decoration:none;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:background .2s,transform .15s;
}
.nav-cta:hover{background:var(--gold);transform:translateY(-1px)}

/* Admin badge */
.nav-admin-btn{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);background:rgba(255,176,32,.12);
  border:1px solid rgba(255,176,32,.3);
  padding:.4rem .9rem;cursor:pointer;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  transition:all .2s;
}
.nav-admin-btn:hover{background:rgba(255,176,32,.22);color:#fff}
.nav-admin-btn.active{background:var(--gold);color:var(--iron)}
/* Edit Profile nav button */
.nav-edit-btn{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--info,#8f9bff);background:rgba(77,184,255,.1);
  border:1px solid rgba(77,184,255,.28);
  padding:.4rem .9rem;cursor:pointer;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  transition:all .2s;
}
.nav-edit-btn:hover{background:rgba(77,184,255,.22);color:#fff}
/* Pending approval note inside edit profile */
.pending-note{
  font-size:.75rem;color:var(--gold);
  background:rgba(255,176,32,.07);
  border:1px solid rgba(255,176,32,.2);
  padding:.55rem .85rem;margin-top:.8rem;line-height:1.5;
}
:root{--info:#8f9bff}
/* Loadout section inside Edit Profile */
.loadout-section-ttl{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.65rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--ember);margin:1.4rem 0 .8rem;
  padding-bottom:.35rem;border-bottom:1px solid rgba(53,204,236,.18);
}
.loadout-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.6rem}
.loadout-card{background:var(--iron-deep);border:1px solid rgba(255,255,255,.08);padding:.9rem;}
.loadout-card-lbl{
  font-family:'Saira Condensed',sans-serif;font-size:.65rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-bottom:.6rem;
}
.loadout-drop{
  width:100%;height:80px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.14);background:rgba(255,255,255,.02);
  cursor:pointer;transition:border-color .2s,background .2s;
  font-size:.72rem;color:var(--steel);gap:.35rem;overflow:hidden;
  position:relative;
}
.loadout-drop:hover{border-color:rgba(53,204,236,.45);background:rgba(53,204,236,.04)}
.loadout-drop.has-img{border-style:solid;border-color:rgba(53,204,236,.3);padding:0;}
.loadout-drop.has-img img{width:100%;height:100%;object-fit:cover;display:block;}
.loadout-drop input[type=file]{display:none}
.loadout-pending{font-size:.7rem;margin-top:.4rem;color:var(--gold);display:none;}
.loadout-pending.show{display:block}
/* Nav user pill — role badge */
.nup-role{
  font-family:'Saira Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.1rem .4rem;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
}
.nup-role.r-admin {background:rgba(255,176,32,.25);color:var(--gold)}
.nup-role.r-cm    {background:rgba(77,184,255,.2); color:#8f9bff}
.nup-role.r-elite {background:rgba(53,204,236,.18); color:var(--ember)}
.nup-role.r-mod   {background:rgba(139,92,246,.22);color:#a78bfa}
.nup-role.r-member{background:rgba(255,255,255,.1);color:var(--off-white)}
.nup-role.r-blank {background:rgba(255,255,255,.06);color:var(--steel)}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;justify-content:center;
  gap:5px;width:36px;height:36px;background:none;
  border:none;cursor:pointer;padding:4px;z-index:1001;
}
.hamburger span{
  display:block;height:2px;background:var(--off-white);
  border-radius:1px;transition:all .3s;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile menu overlay */
.mobile-menu{
  position:fixed;inset:0;z-index:999;
  background:rgba(13,13,15,.97);
  display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;
  padding:5rem 2rem 3rem;
  gap:2.2rem;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  opacity:0;pointer-events:none;
  transition:opacity .3s;
}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.4rem;
  letter-spacing:.1em;color:var(--white);text-decoration:none;
  transition:color .2s;
}
.mobile-menu a:hover{color:var(--ember)}
/* Amber CTA keeps white text on hover — shifts to gold bg like all other
   ember buttons. Not anchor-scoped (unlike the old a.mm-cta:hover) since
   this slot now also holds a <button> (#mmLoginBtn/#mmLogoutBtn). */
.mobile-menu .mm-cta:hover{color:var(--iron)!important;background:var(--gold)}
.mobile-menu .mm-cta{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iron);background:var(--ember);
  padding:.8rem 2.5rem;margin-top:1rem;
  border:none;cursor:pointer;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
}
/* Edit Profile + Admin entries in mobile menu */
.mm-action{
  font-family:'Saira Condensed',sans-serif !important;
  font-size:.95rem !important;font-weight:700 !important;
  letter-spacing:.2em !important;text-transform:uppercase !important;
  color:var(--steel) !important;
}
.mm-action.mm-edit  { color:#8f9bff !important; }
.mm-action.mm-admin { color:var(--gold) !important; }
.mm-action.mm-logout{ color:var(--danger) !important; }
/* User identity strip inside mobile menu — outer div is the rotating neon
   glow frame (same padding+conic-gradient+@property technique as the login
   modal's .login-glow-frame); inner div holds the actual flex row content.
   Uses the site's own theme accent colours (--ember/--gold, auto-flips with
   light/dark mode) rather than a standalone hardcoded neon palette, same as
   #loginOverlay's --cyan/--pink remap. Kept as a narrow rectangular bar —
   avatar/name/role on the left, a single "Options" button on the right that
   opens the account actions as a slide-in drawer (#mmUserPopup) rather than
   cramming every action into the strip itself. */
.mm-user-block{
  width:100%;max-width:340px;
  padding:2px;
  border-radius:10px;
  margin-bottom:.4rem;
  background:conic-gradient(from var(--im-login-angle,0deg),
    var(--ember) 0deg,
    var(--gold) 90deg,
    var(--ember) 180deg,
    var(--gold) 270deg,
    var(--ember) 360deg);
  animation:im-login-spin 6s linear infinite;
}
.mm-user-block-inner{
  display:flex;align-items:center;gap:.65rem;
  width:100%;
  padding:.55rem .75rem;
  background:linear-gradient(180deg,#0d1119,#10141d);
  border-radius:8px;
}
body.light-mode .mm-user-block-inner{
  background:linear-gradient(180deg,#eaf0f4,#dde4e9);
}
.mm-user-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--ember-dim),var(--iron-light));
  display:flex;align-items:center;justify-content:center;
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:.78rem;color:#fff;
  border:2px solid rgba(53,204,236,.35);
}
.mm-user-info{ display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1; }
.mm-user-name{
  font-family:'Saira Condensed',sans-serif;font-size:.85rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
body.light-mode .mm-user-name { color:var(--white); }
.mm-user-role{
  font-family:'Saira Condensed',sans-serif;font-size:.55rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;padding:.1rem .4rem;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
  display:inline-block;align-self:flex-start;
}
.mm-user-role.r-admin { background:rgba(255,176,32,.25);color:var(--gold); }
.mm-user-role.r-cm    { background:rgba(77,184,255,.2); color:#8f9bff; }
.mm-user-role.r-elite { background:rgba(53,204,236,.18); color:var(--ember); }
.mm-user-role.r-mod   { background:rgba(139,92,246,.22);color:#a78bfa; }
.mm-user-role.r-member{ background:rgba(255,255,255,.1);color:var(--off-white); }
.mm-user-role.r-blank { background:rgba(255,255,255,.06);color:var(--steel); }
/* Edit Profile — right side of card, exact same font as Admin Panel */
.mm-inline-edit{
  display:inline-flex !important;align-items:center;gap:.35rem;
  margin-left:auto;flex-shrink:0;
  font-family:'Saira Condensed',sans-serif !important;
  font-size:.95rem !important;font-weight:700 !important;
  letter-spacing:.2em !important;text-transform:uppercase !important;
  color:var(--ember) !important;
  text-decoration:none;
  transition:color .2s;
}
.mm-inline-edit:hover,.mm-inline-edit:active{ color:var(--gold) !important; }

@media(max-width:860px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .nav-cta{display:none}
  /* Admin + Edit Profile + full user pill move into hamburger on mobile */
  .nav-admin-btn,
  .nav-edit-btn,
  .nav-user-pill{ display:none !important; }
  /* Alerts icon hidden on mobile — lives in hamburger menu instead */
  .nav-alerts-btn{ display:none !important; }
  /* Login/Logout move into the hamburger menu itself (replacing the old
     "Enlist Now" CTA slot, #mmLoginBtn/#mmLogoutBtn) — the top-bar
     version is only for desktop. The nav chat icon and theme toggle stay
     visible here; only login/logout moves. */
  .nav-login-btn{ display:none !important; }
}

/* ═══════════════════════════════
   HERO
═══════════════════════════════ */
#home{
  position:relative;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;padding:0 8vw;padding-top:64px;
}
.hero-bg{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(53,204,236,.03) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(53,204,236,.025) 0 1px,transparent 1px 64px),
    radial-gradient(ellipse 55% 60% at 15% 90%,rgba(53,204,236,.12) 0%,transparent 60%),
    radial-gradient(ellipse 45% 50% at 85% 10%,rgba(255,176,32,.07) 0%,transparent 55%),
    radial-gradient(ellipse 80% 70% at 50% 50%,rgba(53,204,236,.06) 0%,transparent 70%),
    linear-gradient(160deg,#05070b 0%,#0b0e13 50%,#080b10 100%);
  -webkit-mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000 55%,transparent 100%);
          mask-image:radial-gradient(ellipse 90% 90% at 50% 50%,#000 55%,transparent 100%);
}
.hero-stripes{
  position:absolute;top:0;left:0;width:100%;height:100%;
  overflow:hidden;pointer-events:none;
}
.hero-stripes::before{
  content:'';position:absolute;top:-20%;left:0;width:100%;height:140%;
  background:repeating-linear-gradient(-55deg,transparent,transparent 28px,rgba(53,204,236,.025) 28px,rgba(53,204,236,.025) 30px);
}
.hero-orb{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:600px;height:600px;border-radius:50%;
  background:
    repeating-radial-gradient(circle,transparent 0 99px,rgba(53,204,236,.06) 99px 100px),
    radial-gradient(circle,rgba(53,204,236,.10) 0%,rgba(53,204,236,.035) 40%,transparent 70%);
  border:1px solid rgba(53,204,236,.08);
  animation:pulse 4s ease-in-out infinite;pointer-events:none;
}
/* UAV radar sweep — the brand signature */
.hero-orb::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(53,204,236,.14) 0deg,rgba(53,204,236,.05) 26deg,transparent 58deg,transparent 360deg);
  animation:radarSweep 7s linear infinite;
}
.hero-orb::after{
  content:'';position:absolute;left:50%;top:0;width:1px;height:100%;
  background:linear-gradient(rgba(53,204,236,.10),transparent 45%,transparent 55%,rgba(53,204,236,.10));
  box-shadow:0 0 0 0 transparent;
}
@keyframes radarSweep{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .hero-orb,.hero-orb::before{animation:none}
}
@keyframes pulse{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}
.hero-content{position:relative;z-index:2;max-width:780px;text-align:center}
.hero-eyebrow{
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:.72rem;letter-spacing:.35em;text-transform:uppercase;
  color:var(--ember);margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;gap:.7rem;
}
.hero-eyebrow::before{content:'';display:block;width:30px;height:2px;background:var(--ember)}
.hero-eyebrow::after{content:'';display:block;width:30px;height:2px;background:var(--ember)}
/* "Oceania Region" drops to its own line only on mobile — this <br> is
   inert (not rendered) above the breakpoint, so desktop stays one line.
   The "·" separator only makes sense inline on one line, so it's hidden
   once the text wraps, and text-align:center re-centers "Oceania Region"
   under "Call of Duty Mobile" instead of left-aligning to match line 1
   (the default for wrapped inline content otherwise). */
.hero-eyebrow-break{display:none}
@media(max-width:860px){
  .hero-eyebrow-break{display:block}
  .hero-eyebrow-sep{display:none}
  .hero-eyebrow{text-align:center}
}
h1.hero-title{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(4rem,10vw,8.5rem);
  line-height:.9;color:var(--white);letter-spacing:-.02em;margin-bottom:.2em;
}
h1.hero-title .accent{color:var(--ember)}
.hero-sub{
  font-family:'Saira Condensed',sans-serif;font-weight:300;
  font-size:clamp(.95rem,2vw,1.3rem);letter-spacing:.25em;
  text-transform:uppercase;color:var(--steel);margin-bottom:2.5rem;
}
.hero-stats{
  display:flex;gap:0;margin-bottom:3rem;justify-content:center;
  border-top:1px solid rgba(53,204,236,.15);padding-top:2rem;
}
.hero-stat{
  padding:0 2.5rem;
  position:relative;
}
/* vertical divider between stats */
.hero-stat + .hero-stat::before{
  content:'';position:absolute;left:0;top:10%;height:80%;
  width:1px;background:rgba(53,204,236,.2);
}
.stat-num{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:2.2rem;color:var(--white);line-height:1}
.stat-label{font-family:'Saira Condensed',sans-serif;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-top:.3rem}
.hero-actions{display:flex;gap:1rem;align-items:center;justify-content:center}
.btn-primary{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iron);background:var(--ember);padding:.9rem 2.2rem;
  text-decoration:none;
  clip-path:polygon(8px 0%,100% 0%,calc(100% - 8px) 100%,0% 100%);
  transition:background .2s,transform .15s,box-shadow .2s;display:inline-block;
  box-shadow:0 4px 20px rgba(53,204,236,.3);
}
.btn-primary:hover{
  background:var(--gold);transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(255,176,32,.35);
}
.btn-ghost{
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--off-white);text-decoration:none;
  display:flex;align-items:center;gap:.5rem;transition:color .2s;
}
.btn-ghost:hover{color:var(--ember)}
.btn-ghost::after{content:'→';font-size:1rem;transition:transform .2s}
.btn-ghost:hover::after{transform:translateX(4px)}

/* ═══════════════════════════════
   SECTIONS COMMON
═══════════════════════════════ */
section{padding:6rem 8vw;position:relative}
.section-header{margin-bottom:3.5rem}
.eyebrow{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.68rem;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ember);margin-bottom:.9rem;
  display:flex;align-items:center;gap:.7rem;
}
/* lines flanking the eyebrow label */
.eyebrow::before,.eyebrow::after{
  content:'';display:block;flex:0 0 24px;height:2px;background:var(--ember);
}
h2.sec-title{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:clamp(2.2rem,5vw,4rem);
  line-height:.93;color:var(--white);letter-spacing:-.01em;
}
.sec-desc{margin-top:1.1rem;font-size:.92rem;color:var(--steel);max-width:480px;line-height:1.7}
.ember-divider{
  height:1px;
  background:linear-gradient(to right,transparent 0%,var(--ember) 40%,var(--gold) 60%,transparent 100%);
  opacity:.35;
}

/* ═══════════════════════════════
   ROSTER
═══════════════════════════════ */
#roster{background:var(--iron)}

/* ── Roster carousel ── */
.roster-carousel{
  position:relative;
  display:flex;
  align-items:center;
  gap:0;
}
/* Track that clips to one row */
.roster-track-wrap{
  flex:1;
  overflow:hidden;
  /* Negative margin + padding trick: lets box-shadows render outside
     the clip boundary without showing section background bleed */
  
}
.roster-grid{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:1.2rem;
  background:transparent;
  border:none;
  /* padding so box-shadows on all sides are never clipped */
  padding:4px 4px 12px;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
/* Each card: fixed width so we know exactly how wide a row is */
.roster-grid .member-card,
.roster-grid .guest-card{
  flex:0 0 calc(25% - .9rem); /* 4 cards per row on desktop */
  min-width:260px; /* standardized across every card carousel on the site */
}
/* Carousel nav buttons */
.roster-nav{
  flex-shrink:0;
  width:44px;height:44px;
  border-radius:50%;
  background:rgba(26,26,30,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(53,204,236,.35);
  color:var(--ember);
  font-size:1.1rem;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background .2s,transform .15s,box-shadow .2s;
  z-index:2;
  margin:0 .4rem;
  flex-shrink:0;
}
.roster-nav:hover{
  background:var(--ember);color:var(--iron);
  transform:scale(1.08);
  box-shadow:none;
}
.roster-nav:active{ transform:scale(.96); }
.roster-nav:disabled{
  opacity:.28;cursor:default;
  border-color:rgba(255,255,255,.12);color:var(--steel);
  background:rgba(26,26,30,.4);
}
/* Dot indicators */
.roster-dots{
  display:flex;align-items:center;justify-content:center;
  gap:.5rem;margin-top:1.2rem;
}
.roster-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(53,204,236,.25);
  cursor:pointer;
  transition:background .25s,transform .25s,border-color .25s;
}
.roster-dot.active{
  background:var(--ember);
  border-color:var(--ember);
  transform:scale(1.3);
}
/* Responsive: 2 cards per row on tablet, 1 on mobile */
@media(max-width:860px){
  .roster-grid .member-card,
  .roster-grid .guest-card{ flex:0 0 calc(50% - .6rem); min-width:240px; }
}
@media(max-width:540px){
  .roster-grid .member-card,
  .roster-grid .guest-card{ flex:0 0 calc(100% - .2rem); min-width:0; }
  .roster-nav{ width:36px;height:36px;font-size:.95rem;margin:0 .2rem; }
}
/* Light mode carousel nav */
body.light-mode .roster-nav{
  background:rgba(246,248,250,.85);border-color:rgba(53,204,236,.4);color:var(--ember);
}
body.light-mode .roster-nav:hover{ background:var(--ember);color:#fff; }
body.light-mode .roster-dot{ background:rgba(0,0,0,.14);border-color:rgba(11,135,166,.3); }
body.light-mode .roster-dot.active{ background:var(--ember);border-color:var(--ember); }
/* ── Roster card — border draw animation ── */
.member-card{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:20px;
  padding:1.8rem;
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;
  border:1px solid var(--glass-border);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
  cursor:default;
}
/* Animated border — four pseudo-segments drawn on hover */
.member-card::before,
.member-card::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:20px;
  pointer-events:none;
}
/* Top + right edge — ember sweep */
.member-card::before{
  border-top:2px solid var(--ember);
  border-right:2px solid var(--ember);
  clip-path:inset(0 100% 100% 0 round 20px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1);
}
/* Bottom + left edge — ember sweep from opposite corner */
.member-card::after{
  border-bottom:2px solid var(--ember);
  border-left:2px solid var(--ember);
  clip-path:inset(100% 0 0 100% round 20px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1) .05s;
}
/* ── Border-draw .bd-active — JS-controlled, persists for full animation on touch ── */
.member-card.bd-active::before,.event-card.bd-active::before,
.prod-card.bd-active::before,.step.bd-active::before{
  clip-path:inset(0 0% 0% 0 round 20px);
}
.member-card.bd-active::after,.event-card.bd-active::after,
.prod-card.bd-active::after,.step.bd-active::after{
  clip-path:inset(0% 0 0 0% round 20px);
}
.ach-row.bd-active::before{ clip-path:inset(0 0% 0% 0 round 16px); }
.ach-row.bd-active::after { clip-path:inset(0% 0 0 0% round 16px); }
.adm-item.bd-active::before{ clip-path:inset(0 0% 0% 0 round 12px); }
.adm-item.bd-active::after { clip-path:inset(0% 0 0 0% round 12px); }
.member-card.bd-active,.event-card.bd-active,.prod-card.bd-active,.step.bd-active{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,.14);
}
.ach-row.bd-active{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.12);
}
.adm-item.bd-active{ transform:translateY(-1px); }

/* Border-draw hover — only on devices that support true hover (not touch) */
@media(hover:hover){
  .member-card:hover::before,.event-card:hover::before,.prod-card:hover::before,
  .ach-row:hover::before,.step:hover::before,.adm-item:hover::before{
    clip-path:inset(0 0% 0% 0 round 20px);
  }
  .member-card:hover::after,.event-card:hover::after,.prod-card:hover::after,
  .step:hover::after,.adm-item:hover::after{
    clip-path:inset(0% 0 0 0% round 20px);
  }
  .ach-row:hover::before{ clip-path:inset(0 0% 0% 0 round 16px); }
  .ach-row:hover::after { clip-path:inset(0% 0 0 0% round 16px); }
  .adm-item:hover::before{ clip-path:inset(0 0% 0% 0 round 12px); }
  .adm-item:hover::after { clip-path:inset(0% 0 0 0% round 12px); }
  .member-card:hover,.event-card:hover,.prod-card:hover,.step:hover{
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 28px var(--ember-glow);
    border-color:rgba(53,204,236,.22);
  }
  .ach-row:hover{
    transform:translateY(-2px);
    box-shadow:none;
    border-color:rgba(255,255,255,.12);
  }
  .adm-item:hover{
    transform:translateY(-1px);
    box-shadow:none;
    border-color:rgba(255,255,255,.1);
  }
}
.member-card.clickable{cursor:pointer}
.member-card.clickable:hover .m-name{color:var(--ember);transition:color .2s}
.m-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--ember) 0%,var(--ember-dim) 50%,#8a2000 100%);
  display:flex;align-items:center;justify-content:center;
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.1rem;color:#fff;
  margin-bottom:1.2rem;border:2px solid rgba(53,204,236,.45);
  flex-shrink:0;
  box-shadow:0 0 16px rgba(53,204,236,.2);
}
.m-role{font-family:'Saira Condensed',sans-serif;font-size:.63rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);margin-bottom:.25rem}
.m-role.elite{color:var(--gold)}
.m-role.cm{color:#8f9bff}
.m-name{font-family:'Saira Condensed',sans-serif;font-size:1.35rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;color:var(--white);margin-bottom:.25rem}
.m-clan{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-bottom:.3rem}
.m-loc{font-size:.78rem;color:var(--steel);margin-bottom:1.1rem;flex:1}
.m-stats{display:flex;gap:1.5rem}
.ms-num{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.2rem;color:var(--white)}
.ms-lbl{font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;color:var(--steel)}
/* ── Online/offline presence dot ──
   Base position (top-right) is for .member-card and .ach-row.rc-row
   (Roster, both full-card and Compact Mobile View shapes) — logged-in
   viewers only, see the `loggedIn` gate in renderRoster(). Grey/offline
   by default; _presencePollTick() in script.js toggles .presence-online
   once a poll confirms the user is active. .member-card has
   overflow:hidden, so the dot sits well inside the card's padding box
   (top/right: 1.4rem), never at the literal edge where it'd get clipped. */
.presence-dot{
  position:absolute;top:1.4rem;right:1.4rem;
  width:10px;height:10px;border-radius:50%;
  background:#6b7280;border:2px solid var(--iron-mid);
  box-shadow:0 0 6px rgba(0,0,0,.3);
  z-index:2;
}
.presence-dot.presence-online{background:#2ecc71;box-shadow:0 0 8px rgba(46,204,113,.6)}
/* Compact-row (Roster's .ach-row.rc-row) has smaller padding than a full
   .member-card, so the inset needs to shrink to match. */
.ach-row.rc-row .presence-dot{top:1.1rem;right:1.1rem}
/* Chat conversation-list avatar dot — bottom-right per the near-universal
   chat-presence convention (WhatsApp/Discord/Slack), distinct from
   Roster's top-right placement. */
.presence-dot.br{top:auto;right:-1px;bottom:-1px;width:9px;height:9px}
/* ── Member preview modal ── */
.mp-overlay{
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,.72);backdrop-filter:blur(7px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;padding:1rem;
}
.mp-overlay.open{opacity:1;pointer-events:all}
.mp-box{
  background:var(--iron-mid);border:1px solid rgba(53,204,236,.2);
  width:100%;max-width:460px;max-height:90vh;
  display:flex;flex-direction:column;
  animation:slideUp .25s ease;
}
.mp-hdr{
  padding:1.1rem 1.4rem;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.mp-hdr-left{display:flex;align-items:center;gap:.9rem}
.mp-avatar-lg{
  width:48px;height:48px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--ember-dim),var(--iron-light));
  display:flex;align-items:center;justify-content:center;
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.1rem;color:var(--white);
  border:2px solid rgba(53,204,236,.35);
}
.mp-hdr-ign{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1rem;letter-spacing:.06em;color:var(--white)}
.mp-hdr-role{font-family:'Saira Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-top:.15rem}
.mp-hdr-role.elite{color:var(--gold)}.mp-hdr-role.cm{color:#8f9bff}
.mp-close{background:none;border:none;color:var(--steel);font-size:1.3rem;cursor:pointer;padding:.2rem .4rem;transition:color .2s}
.mp-close:hover{color:var(--ember)}
.mp-body{padding:1.4rem;overflow-y:auto;flex:1}
.mp-body::-webkit-scrollbar{width:3px}.mp-body::-webkit-scrollbar-thumb{background:var(--ember-dim)}
.mp-section{font-family:'Saira Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.25em;text-transform:uppercase;color:var(--ember);margin:1.1rem 0 .6rem;padding-bottom:.3rem;border-bottom:1px solid rgba(53,204,236,.15);}
.mp-row{display:flex;justify-content:space-between;align-items:flex-start;padding:.4rem 0;border-bottom:1px solid rgba(255,255,255,.04);}
.mp-row:last-child{border-bottom:none}
.mp-lbl{font-family:'Saira Condensed',sans-serif;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.mp-val{font-size:.82rem;color:var(--off-white);text-align:right;max-width:60%}
.mp-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.2rem}
.mp-stat-box{background:var(--iron-deep);border:1px solid rgba(255,255,255,.07);padding:.8rem;text-align:center}
.mp-stat-num{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.5rem;color:var(--white);line-height:1}
.mp-stat-lbl{font-family:'Saira Condensed',sans-serif;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-top:.2rem}
.mp-loadouts{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.mp-loadout-card{background:transparent;border:none;padding:.7rem}
.mp-loadout-lbl{font-family:'Saira Condensed',sans-serif;font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:.5rem}
.mp-loadout-img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border:1px solid rgba(53,204,236,.2)}
.mp-loadout-empty{width:100%;aspect-ratio:16/9;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:.72rem;color:var(--steel)}
.mp-footer{padding:.9rem 1.4rem;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:.6rem;justify-content:flex-end;flex-shrink:0}
/* Make roster cards clickable when logged in — also defined inside .member-card block above */

body:not(.light-mode) .member-card:hover {background: var(--iron);}

/* ═══════════════════════════════
   EVENTS
═══════════════════════════════ */
#events{background:var(--iron-mid)}
.events-grid{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:1.2rem;
  background:transparent;
  padding:4px 4px 12px;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.events-grid .event-card{
  flex:0 0 calc(25% - .9rem);
  min-width:260px;
}
.event-card{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:20px;
  border:1px solid var(--glass-border);
  padding:2rem;position:relative;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
.event-card::before,.event-card::after{
  content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
}
.event-card::before{
  border-top:2px solid var(--ember);border-right:2px solid var(--ember);
  clip-path:inset(0 100% 100% 0 round 20px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1);
}
.event-card::after{
  border-bottom:2px solid var(--ember);border-left:2px solid var(--ember);
  clip-path:inset(100% 0 0 100% round 20px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1) .05s;
}
.e-mode{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Saira Condensed',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  padding:.28rem .75rem;margin-bottom:1.1rem;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  align-self:flex-start;
}
.e-br{background:rgba(53,204,236,.13);color:var(--ember)}
.e-mp{background:rgba(77,184,255,.13);color:#8f9bff}
.e-name{font-family:'Saira Condensed',sans-serif;font-size:1.3rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin-bottom:.4rem;flex:1}
.e-date{font-size:.78rem;color:var(--steel);margin-bottom:1.4rem}
.e-prize{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:2.2rem;color:var(--gold);line-height:1;text-shadow:0 0 20px rgba(255,176,32,.25)}
.e-prize-lbl{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-top:.15rem;margin-bottom:1.4rem}
.btn-reg{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iron);background:var(--ember);padding:.6rem 1.4rem;
  border:none;cursor:pointer;
  clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
  transition:background .2s;text-decoration:none;display:inline-block;
}
.btn-reg:hover{background:var(--gold)}

body:not(.light-mode) .event-card:hover {background: var(--iron-mid);}

/* ═══════════════════════════════
   ACHIEVEMENTS
═══════════════════════════════ */
#achievements{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(53,204,236,.06),transparent 65%),var(--iron)}
.ach-list{display:flex;flex-direction:column;gap:.7rem;}
/* Compact Mobile View's homepage lists (not the "View All" full-page
   overlay, which should still show everything) are capped to roughly 3
   rows and internally scrollable, so a large roster/tournament/product
   list doesn't stretch the whole page — same idea as the carousel it
   replaces only ever showing one page's worth at a time. ~19rem fits 3
   full .ach-row rows (48px icon + 1.4rem top/bottom padding each, .7rem
   gap between) with the top of a 4th peeking in as a scroll affordance. */
.ach-list-capped{max-height:19rem;overflow-y:auto;padding-right:.3rem}
.ach-row{
  display:grid;grid-template-columns:56px 1fr auto;
  align-items:center;gap:1.4rem;padding:1.4rem 1.8rem;
  background:var(--iron-mid);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  position:relative;
  overflow:visible;
  isolation:isolate;
  cursor:pointer;
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.ach-row:last-child{border-bottom:none}
.ach-row::before,.ach-row::after{
  content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
}
.ach-row::before{
  border-top:2px solid var(--ember);border-right:2px solid var(--ember);
  clip-path:inset(0 100% 100% 0 round 16px);
  transition:clip-path .4s cubic-bezier(.4,0,.2,1);
}
.ach-row::after{
  border-bottom:2px solid var(--ember);border-left:2px solid var(--ember);
  clip-path:inset(100% 0 0 100% round 16px);
  transition:clip-path .4s cubic-bezier(.4,0,.2,1) .05s;
}
/* Click/tap animation — works on all devices including touch */
.ach-row:active::before{ clip-path:inset(0 0% 0% 0 round 16px); }
.ach-row:active::after { clip-path:inset(0% 0 0 0% round 16px); }
.ach-row:active{
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 16px rgba(53,204,236,.15);
}
.ach-icon{
  width:48px;height:48px;font-size:1.7rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(53,204,236,.08);
  border:1px solid rgba(53,204,236,.22);
  border-radius:12px;flex-shrink:0;
  box-shadow:0 0 12px rgba(53,204,236,.1);
}
/* Compact Mobile View reuses .ach-row/.ach-list directly for Roster,
   Events, Store (see renderRoster/renderEvents/renderStore in script.js)
   instead of forking a parallel set of classes — .rc-row is Roster's own
   modifier for a round avatar circle in the icon slot; Events/Store keep
   the default square icon box (mode badge text / product emoji both fit
   it fine). */
.ach-row.rc-row .ach-icon{border-radius:50%;font-family:'Saira Condensed',sans-serif;font-weight:700;color:var(--ember)}
.ach-title{font-family:'Saira Condensed',sans-serif;font-size:1.08rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--white);margin-bottom:.2rem}
.ach-holder{font-family:'Saira Condensed',sans-serif;font-size:.78rem;font-weight:700;letter-spacing:.08em;color:var(--ember);text-transform:uppercase}
.ach-desc{font-size:.78rem;color:var(--steel);line-height:1.4;margin-top:.18rem}
.ach-date{font-family:'Saira Condensed',sans-serif;font-size:.72rem;letter-spacing:.08em;color:var(--steel);white-space:nowrap;text-align:right}

body:not(.light-mode) .ach-row:hover {
  background:var(--iron);
  box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 20px var(--ember-glow);
}

/* ═══════════════════════════════
   RESULTS
═══════════════════════════════ */
#results{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(255,176,32,.06),transparent 65%),var(--iron-mid)}

/* Grid of result snapshot cards — 1 col mobile, auto-fill on wider screens */
.results-grid{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:1.2rem;
  background:transparent;
  padding:4px 4px 12px;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.results-grid .result-card{
  flex:0 0 calc(25% - .9rem);
  min-width:260px; /* standardized across every card carousel on the site */
}
/* Was missing tablet/mobile overrides entirely, unlike every other
   carousel — _rscGetPerPage() already assumed 2-per-page/1-per-page at
   these widths, but the card itself never actually shrank to match,
   so the JS's slide-offset math and the real rendered width disagreed. */
@media(max-width:860px){
  .results-grid .result-card{ flex:0 0 calc(50% - .6rem); min-width:240px; }
}
@media(max-width:540px){
  .results-grid .result-card{ flex:0 0 calc(100% - .2rem); min-width:0; }
}
/* Individual result snapshot card */
.result-card{
  background:rgba(15,15,20,.85);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  overflow:hidden;
  position:relative;
  transition:transform .2s,border-color .2s,box-shadow .2s;
}
.result-card:hover{
  transform:translateY(-3px);
  border-color:rgba(255,176,32,.35);
  box-shadow:0 10px 36px rgba(0,0,0,.5),0 0 20px rgba(255,176,32,.1);
}
.result-card-header{
  padding:1rem 1.2rem .7rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(135deg,rgba(255,176,32,.06),rgba(53,204,236,.02));
}
.result-card-tourn{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.06em;
  color:var(--gold);margin-bottom:.25rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.result-card-meta{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.result-card-round{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.65rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--off-white);
}
.result-card-mode{
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember);background:rgba(53,204,236,.1);
  border:1px solid rgba(53,204,236,.25);border-radius:4px;
  padding:.1rem .5rem;
}
.result-card-time{
  font-size:.6rem;color:var(--steel);margin-left:auto;
}
/* Pool block inside a result card */
.result-pool{
  padding:.7rem 1.2rem;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.result-pool:last-child{border-bottom:none}
.result-pool-name{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);margin-bottom:.45rem;
}
/* Individual row in a pool standings table */
.result-row{
  display:flex;align-items:center;gap:.55rem;
  padding:.3rem 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:.78rem;
}
.result-row:last-child{border-bottom:none}
.result-row-rank{
  flex-shrink:0;width:22px;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:.58rem;
  border-radius:5px;
  border:1px solid rgba(255,255,255,.1);color:var(--steel);
}
.result-row-rank.top1{background:rgba(255,215,0,.18);border-color:rgba(255,215,0,.55);color:#ffd700;box-shadow:0 0 8px rgba(255,215,0,.15)}
.result-row-rank.top2{background:rgba(192,192,192,.15);border-color:rgba(192,192,192,.45);color:#d4d4d4}
.result-row-rank.top3{background:rgba(205,127,50,.15);border-color:rgba(205,127,50,.45);color:#e09050}
.result-row-name{flex:1;color:var(--off-white);font-weight:600;font-size:.78rem;letter-spacing:.02em}
.result-row-name.top1,.result-row-name.top2,.result-row-name.top3{color:var(--gold)}
.result-row-kills{font-size:.7rem;color:var(--steel);min-width:52px;text-align:right}
.result-row-pts{font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.8rem;color:var(--ember);min-width:44px;text-align:right}
/* Empty state */
.results-empty{
  text-align:center;padding:4rem 6vw;
}
.results-empty-icon{font-size:2.4rem;margin-bottom:.8rem;opacity:.35}
.results-empty-text{
  font-family:'Saira Condensed',sans-serif;font-size:.9rem;
  letter-spacing:.06em;color:var(--steel);text-transform:uppercase;
}
/* Admin delete button on result card */
.result-card-del{
  position:absolute;top:.6rem;right:.6rem;
  width:26px;height:26px;border-radius:50%;
  background:rgba(231,76,60,.1);border:1px solid rgba(231,76,60,.3);
  color:var(--danger);font-size:.7rem;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .2s;
}
.result-card:hover .result-card-del{opacity:1}
body.light-mode .result-card{background:var(--lm-card,#fff);border-color:rgba(0,0,0,.08)}
body.light-mode .result-card-header{background:rgba(138,95,0,.05);border-bottom-color:rgba(0,0,0,.08)}
body.light-mode .result-pool{border-bottom-color:rgba(0,0,0,.08)}
body.light-mode .result-row{border-bottom-color:rgba(0,0,0,.08)}
body.light-mode .result-row-rank{border-color:rgba(0,0,0,.15)}
body.light-mode .faq-item{border-bottom-color:rgba(0,0,0,.08)}
/* Was color:var(--iron) — a background/surface variable, not a text
   color. In light mode --iron resolves to a light cream, so this made
   team names nearly invisible against the (also light) card, and being
   more specific than .result-row-name.top1/.top2/.top3, it silently
   overrode the gold rank highlight too. var(--off-white) already
   inverts correctly on its own (the base rule below), so no override
   is actually needed here at all. */

/* ═══════════════════════════════
   STORE
═══════════════════════════════ */
#merch{background:radial-gradient(ellipse 80% 60% at 50% 0%,rgba(53,204,236,.06),transparent 65%),var(--iron-mid)}
.store-grid{
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  gap:1.2rem;
  background:transparent;
  padding:4px 4px 12px;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.store-grid .prod-card{
  flex:0 0 calc(25% - .9rem);
  min-width:260px; /* standardized across every card carousel on the site */
}
/* Tablet: 2 per page */
@media(max-width:860px){
  .events-grid .event-card{ flex:0 0 calc(50% - .6rem); min-width:240px; }
  .store-grid .prod-card  { flex:0 0 calc(50% - .6rem); min-width:240px; }
}
/* Mobile: 1 per page */
@media(max-width:540px){
  .events-grid .event-card{ flex:0 0 calc(100% - .2rem); min-width:0; }
  .store-grid .prod-card  { flex:0 0 calc(100% - .2rem); min-width:0; }
}
.prod-card{
  background:var(--glass-bg);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:20px;
  border:1px solid var(--glass-border);
  padding:1.8rem;
  position:relative;
  overflow:visible;
  isolation:isolate;
  display:flex;flex-direction:column;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease;
}
/* Clip badge inside card without overflow:hidden on the card itself */
.prod-card>.prod-badge{
  position:absolute;top:.9rem;right:.9rem;z-index:2;
}
.prod-card::before,.prod-card::after{
  content:'';position:absolute;inset:0;border-radius:20px;pointer-events:none;
}
.prod-card::before{
  border-top:2px solid var(--ember);border-right:2px solid var(--ember);
  clip-path:inset(0 100% 100% 0 round 20px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1);
}
.prod-card::after{
  border-bottom:2px solid var(--ember);border-left:2px solid var(--ember);
  clip-path:inset(100% 0 0 100% round 20px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1) .05s;
}
.prod-badge{
  position:absolute;top:.9rem;right:.9rem;
  font-family:'Saira Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  padding:.22rem .55rem;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
}
.b-hot{background:var(--ember);color:var(--iron)}
.b-new{background:var(--gold);color:var(--iron)}
.prod-icon{
  width:54px;height:54px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.7rem;margin-bottom:1.1rem;
  flex-shrink:0;
}
.prod-cat{font-family:'Saira Condensed',sans-serif;font-size:.63rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--steel);margin-bottom:.28rem}
.prod-name{font-family:'Saira Condensed',sans-serif;font-size:1.15rem;font-weight:900;text-transform:uppercase;letter-spacing:.04em;color:var(--white);margin-bottom:.4rem}
.prod-desc{font-size:.8rem;color:var(--steel);line-height:1.5;margin-bottom:1.4rem;flex:1}
.prod-footer{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.06);padding-top:.9rem;margin-top:auto}
.prod-price{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.2rem;color:var(--white)}
.prod-price-lbl{font-size:.62rem;letter-spacing:.1em;color:var(--steel)}
/* Filled ember, same treatment as every other card's primary CTA
   (.btn-reg, .btn-primary) — was previously an outline/transparent style,
   the one card button on the site that didn't match the rest. */
.btn-cart{
  font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--iron);background:var(--ember);border:none;
  padding:.45rem .9rem;cursor:pointer;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
  transition:all .2s;
}
.btn-cart:hover{background:var(--gold)}

body:not(.light-mode) .prod-card:hover {background: var(--iron-mid);}

/* ═══════════════════════════════
   ABOUT
═══════════════════════════════ */
#about{background:var(--iron);overflow:hidden}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:6rem;align-items:center}
.about-graphic{position:relative;height:460px;display:flex;align-items:center;justify-content:center}
.about-glow{position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(53,204,236,.22),transparent 70%);z-index:0}
/* Absolute + top:50%/left:50%/translate(-50%,-50%) rather than relying on
   each element's own box size for centering — every ring here is a
   different diameter, so anchoring them all to their shared parent's exact
   center point (a single coordinate, not a box) is what makes them stay
   truly concentric with each other and with the emblem at any viewport
   size, instead of just sharing a top-left corner and drifting apart as
   size increases. */
.emblem{width:120px;height:120px;object-fit:contain;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 0 14px rgba(53,204,236,.3))}
.e-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid;animation:spin 20s linear infinite}
.r1{width:190px;height:190px;border-color:rgba(53,204,236,.3)}
.r2{width:270px;height:270px;border-color:rgba(53,204,236,.12);animation-direction:reverse;animation-duration:32s}
.r3{width:350px;height:350px;border-color:rgba(53,204,236,.05);animation-duration:48s}
.ring-dot{position:absolute;width:6px;height:6px;background:var(--ember);border-radius:50%;box-shadow:0 0 8px var(--ember)}
/* translate(-50%,-50%) has to be baked into both keyframe states too —
   a CSS animation's transform replaces the property wholesale each frame,
   so without repeating it here the centering translate would get wiped
   out by the rotation the instant this animation starts. */
@keyframes spin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
/* Click the badge once: pause the rings and reveal a sniper-scope crosshair
   using the exact same trick as the custom cursor (#cur-ring::before/::after
   in the CUSTOM CURSOR block above) — a single small bar whose own
   box-shadow duplicates it on both sides, so what's visible is two short
   tick marks flanking the center rather than one continuous line through it.
   Double-click instead spins .emblem itself; that's driven by JS (see
   "ABOUT BADGE INTERACTIONS" in script.js), which sets an inline transform
   each frame, so it deliberately isn't touched by anything here. */
.about-emblem-wrap{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}
/* grab-and-spin: the wrap itself has no box (every child is absolutely
   positioned), so touch-action has to live on the actual hit-tested
   elements — otherwise iOS/Android treat a drag-down here as a page-scroll
   gesture and our pointermove rotation never gets a clean stream of events. */
.about-emblem-wrap .e-ring,.about-emblem-wrap .emblem{touch-action:none;-webkit-user-drag:none}

/* Mystery bot — pops up near the badge to tease the crosshair/spin easter
   egg. Positioned clear of the ring assembly (top-right of .about-graphic)
   so it never overlaps the interactive area itself. Hidden/shown by JS
   toggling .show; see "ABOUT BOT" in script.js. */
.about-bot{
  position:absolute;top:6px;right:2px;z-index:5;
  display:flex;align-items:flex-start;gap:.55rem;
  opacity:0;transform:translateY(-10px) scale(.9);
  pointer-events:none;
  transition:opacity .45s ease,transform .45s cubic-bezier(.34,1.56,.64,1);
}
.about-bot.show{opacity:1;transform:translateY(0) scale(1)}
.about-bot-core{
  flex-shrink:0;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(53,204,236,.9),rgba(53,204,236,.15) 60%,transparent 75%),var(--iron-mid);
  border:1px solid rgba(53,204,236,.5);
  box-shadow:0 0 14px rgba(53,204,236,.45);
  display:flex;align-items:center;justify-content:center;
  animation:aboutBotFloat 3.2s ease-in-out infinite;
}
.about-bot-eye{
  width:8px;height:8px;border-radius:50%;
  background:#ff453a;box-shadow:0 0 7px #ff453a;
  animation:aboutBotBlink 2.6s ease-in-out infinite;
}
@keyframes aboutBotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes aboutBotBlink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}
.about-bot-bubble{
  position:relative;max-width:165px;margin-top:.3rem;
  padding:.5rem .7rem;border-radius:8px;
  background:var(--iron-mid);border:1px solid rgba(53,204,236,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  font-size:.72rem;line-height:1.4;color:var(--off-white);
  font-style:italic;
}
.about-bot-bubble::before{
  content:'';position:absolute;top:9px;left:-5px;
  width:8px;height:8px;background:var(--iron-mid);
  border-left:1px solid rgba(53,204,236,.35);border-bottom:1px solid rgba(53,204,236,.35);
  transform:rotate(45deg);
}
/* Badge spin mini-game top-3, mirrored top-left opposite .about-bot's
   top-right so neither overlaps the other in the thin gap above the ring. */
.about-leaderboard{
  position:absolute;top:6px;left:2px;z-index:5;
  min-width:118px;max-width:150px;
  padding:.45rem .6rem;border-radius:8px;
  background:var(--iron-mid);border:1px solid rgba(53,204,236,.35);
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.ablb-title{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ember);margin-bottom:.3rem;
}
.ablb-list{list-style:none;display:flex;flex-direction:column;gap:.2rem}
.ablb-list li{display:flex;align-items:center;gap:.35rem;font-size:.68rem;color:var(--off-white)}
.ablb-medal{flex-shrink:0}
.ablb-ign{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ablb-pts{flex-shrink:0;color:var(--gold);font-weight:700}
.ablb-empty{color:var(--steel);font-style:italic}
.about-emblem-wrap.crosshair-active .e-ring{animation-play-state:paused}
/* Manual single-tap "aim mode" — anchored just outside r3, the outer ring.
   Toggled by a plain tap while the badge is idle (see ABOUT BADGE
   INTERACTIONS in script.js); untouched by the spinning-tap behavior below. */
.about-emblem-wrap::before,.about-emblem-wrap::after{
  content:'';position:absolute;top:50%;left:50%;
  opacity:0;pointer-events:none;border-radius:1px;
  transition:opacity .3s ease,transform .3s cubic-bezier(.34,1.56,.64,1);
}
.about-emblem-wrap::before{
  width:26px;height:2px;
  transform:translate(-50%,-50%) scaleX(0);
  background:#ff453a;
  box-shadow:180px 0 0 var(--ember),-180px 0 0 var(--ember);
}
.about-emblem-wrap::after{
  width:2px;height:26px;
  transform:translate(-50%,-50%) scaleY(0);
  background:#ff453a;
  box-shadow:0 180px 0 var(--ember),0 -180px 0 var(--ember);
}
.about-emblem-wrap.crosshair-active::before{opacity:1;transform:translate(-50%,-50%) scaleX(1)}
.about-emblem-wrap.crosshair-active::after{opacity:1;transform:translate(-50%,-50%) scaleY(1)}

/* Tapping the badge WHILE it's spinning is a different gesture entirely —
   it triggers deceleration (see _showDecelHint in script.js) and shows this
   thinner reference hugging r1 instead of the r3 aim-toggle above: thin
   top/bottom ticks plus two small inward-pointing arrowheads on the
   horizontal axis, tips nearly touching the badge, pointing at exactly
   where "0deg" sits so the user can watch the gap close as it slows. */
.about-emblem-wrap.decel-hint .e-ring{animation-play-state:paused}
/* One continuous "+" through dead center — 210px tip-to-tip, so each arm
   reaches 105px out (10px past r1's 95px radius, crossing it) on both
   sides. No z-index needed: .emblem already has z-index:2 and paints over
   these (they're plain auto-stacking siblings), so the badge visually
   sits in front, occluding the middle of the cross. */
.decel-cross{
  position:absolute;top:50%;left:50%;
  background:var(--ember);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.decel-cross-h{ width:210px;height:1.5px;transform:translate(-50%,-50%) scaleX(0); }
.decel-cross-v{ width:1.5px;height:210px;transform:translate(-50%,-50%) scaleY(0); }
.about-emblem-wrap.decel-hint .decel-cross-h{opacity:1;transform:translate(-50%,-50%) scaleX(1)}
.about-emblem-wrap.decel-hint .decel-cross-v{opacity:1;transform:translate(-50%,-50%) scaleY(1)}

/* Gunshot-flare burst on a win (see _triggerBurst in "ABOUT BADGE GAME",
   script.js) — a bright starburst pop in the first ~700ms of its 5s run,
   settling into a slowly rotating, fading afterglow for the rest of it.
   z-index above .emblem(2) so the flare reads clearly over the badge. */
.badge-burst{
  position:absolute;top:50%;left:50%;
  width:420px;height:420px;z-index:6;
  border-radius:50%;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.2) rotate(0deg);
  background:
    repeating-conic-gradient(from 0deg, rgba(255,209,102,.85) 0deg 4deg, transparent 4deg 18deg),
    radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,209,102,.55) 28%, transparent 68%);
}
.badge-burst.show{ animation:badgeBurstPop 5s ease-out forwards; }
@keyframes badgeBurstPop{
  0%   { opacity:0;   transform:translate(-50%,-50%) scale(.2)  rotate(0deg); }
  6%   { opacity:1;   transform:translate(-50%,-50%) scale(1.05) rotate(15deg); }
  14%  { opacity:.9;  transform:translate(-50%,-50%) scale(.92) rotate(28deg); }
  60%  { opacity:.32; transform:translate(-50%,-50%) scale(1)   rotate(75deg); }
  100% { opacity:0;   transform:translate(-50%,-50%) scale(1.15) rotate(115deg); }
}
.about-facts{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.8rem}
.about-banner{display:block;width:100%;max-width:380px;height:auto;margin:1.6rem auto 0}
.fact-item{
  padding:.9rem 1rem;
  background:var(--iron-mid);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.07);
  border-left:3px solid var(--ember);
  box-shadow:0 3px 14px rgba(0,0,0,.28);
  transition:transform .25s ease,box-shadow .25s ease;
}
.fact-lbl{font-family:'Saira Condensed',sans-serif;font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--steel);margin-bottom:.2rem}
.fact-val{font-family:'Saira Condensed',sans-serif;font-size:.95rem;font-weight:700;color:var(--white);text-transform:uppercase}
.about-text p{font-size:.95rem;color:var(--steel);line-height:1.8;margin-bottom:.9rem}
.about-text p strong{color:var(--off-white)}
.social-row{display:flex;gap:.6rem;margin-top:1.8rem;flex-wrap:wrap}
.about-social{justify-content:center;}

/* Footer icon buttons — uniform fixed square, icon or text fallback */
.footer-social{
  margin-top:1.2rem;
  width:100%;
  max-width:215px;
  justify-content:space-between;
  gap:0;
}
.soc-icon-btn{
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  background:none;
  border:none;
  padding:0;
  text-decoration:none;
  transition:transform .2s, filter .2s;
}
.soc-icon-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.15) drop-shadow(0 2px 6px rgba(0,0,0,.3));
}
.soc-icon-img{
  width:26px; height:26px;
  object-fit:contain;
  display:block;
}
.soc-icon-fallback{ display:none; }
.about-social .soc-icon-btn{ padding:4px; }
.about-social .soc-icon-img{ width:32px; height:32px; }
.soc-btn{
  font-family:'Saira Condensed',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);padding:.45rem .9rem;
  border:1px solid rgba(255,255,255,.1);text-decoration:none;transition:all .2s;
  clip-path:polygon(4px 0%,100% 0%,calc(100% - 4px) 100%,0% 100%);
}
.soc-btn:hover{color:var(--ember);border-color:rgba(53,204,236,.4)}

/* ═══════════════════════════════
   FAQ — opened as a footer-triggered overlay (openFaqOverlay() in
   script.js), not a persistent page section, so no #faq section
   background rule is needed here anymore.
═══════════════════════════════ */
#faqList{max-width:760px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(255,255,255,.08);padding:.9rem 0}
.faq-question{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:none;border:none;cursor:pointer;text-align:left;
  color:var(--off-white);font-family:'Chakra Petch','Saira Condensed',sans-serif;
  font-weight:600;font-size:.95rem;
}
.faq-answer{display:none;color:var(--steel);padding-top:.6rem;line-height:1.6;font-size:.85rem}
.faq-item.open .faq-answer{display:block}
.faq-chevron{transition:transform .2s ease;flex-shrink:0;color:var(--ember)}
.faq-item.open .faq-chevron{transform:rotate(180deg)}

/* ═══════════════════════════════
   JOIN
═══════════════════════════════ */
#join{
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%,rgba(53,204,236,.14),transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 100%,rgba(255,176,32,.05),transparent 60%),
    var(--iron-mid);
  text-align:center;padding:8rem 8vw;
}
.join-title{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(2.5rem,6vw,5rem);line-height:.95;margin-bottom:1.4rem;color:var(--white)}
.join-title .jt-forge,.join-title .jt-forge span{color:var(--ember)}
.join-desc{font-size:.95rem;color:var(--steel);max-width:500px;margin:0 auto 3rem;line-height:1.7}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;background:transparent;margin:4rem 0;text-align:left}
.step{
  background:rgba(26,26,30,.65);
  border-radius:16px;
  border:1px solid rgba(255,255,255,.07);
  padding:1.8rem;position:relative;overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  transition:transform .3s ease,box-shadow .3s ease;
}
.step::before,.step::after{
  content:'';position:absolute;inset:0;border-radius:16px;pointer-events:none;
}
.step::before{
  border-top:2px solid var(--ember);border-right:2px solid var(--ember);
  clip-path:inset(0 100% 100% 0 round 16px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1);
}
.step::after{
  border-bottom:2px solid var(--ember);border-left:2px solid var(--ember);
  clip-path:inset(100% 0 0 100% round 16px);
  transition:clip-path .45s cubic-bezier(.4,0,.2,1) .05s;
}
.step-num{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:4.5rem;color:rgba(53,204,236,.08);line-height:1;margin-bottom:.9rem}
.step-title{font-family:'Saira Condensed',sans-serif;font-size:.95rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--white);margin-bottom:.4rem}
.step-desc{font-size:.82rem;color:var(--steel);line-height:1.6}
/* Compact Mobile View — Join section's 4 steps become a row-list on
   mobile, matching Roster/Events/Store's own switch to .ach-row (see
   _compactMobileActive()/_applyCompactModeBodyClass() in script.js).
   This content is static (never DB-driven), so it's pure CSS — no
   render-function change needed, just restyling the existing markup. */
@media(max-width:860px){
  body.compact-mobile .steps-grid{display:flex;flex-direction:column;gap:.7rem;margin:2rem 0}
  /* .step has 3 flat children (num/title/desc), not a 2-child icon+text-
     wrapper shape like .ach-row — grid-auto-flow would otherwise wrap
     .step-desc into the 56px icon column on the implicit second row.
     Explicit row/column placement keeps the icon vertically centered
     alongside a 2-line title+desc text stack. */
  body.compact-mobile .step{
    display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;
    align-items:start;gap:.15rem 1.4rem;padding:1.4rem 1.8rem;
  }
  body.compact-mobile .step-num{
    grid-column:1;grid-row:1 / 3;align-self:center;
    font-size:1.3rem;color:var(--ember);margin-bottom:0;
    width:56px;height:56px;display:flex;align-items:center;justify-content:center;
    background:rgba(53,204,236,.08);border:1px solid rgba(53,204,236,.22);border-radius:12px;
  }
  body.compact-mobile .step-title{grid-column:2;grid-row:1;margin-bottom:0}
  body.compact-mobile .step-desc{grid-column:2;grid-row:2}
}
/* Compact Mobile View — hide carousel nav arrows/dots for Roster/Events/
   Store (belt-and-suspenders alongside initRosterCarousel() etc.'s own
   early-return, which is what actually stops them from being needed —
   this just avoids a flash of arrows before that JS runs). Nested inside
   the same breakpoint so desktop never hides carousel nav even if the
   setting is on (compact mode is viewport-gated, not just setting-gated). */
@media(max-width:860px){
  body.compact-mobile #rosterPrev, body.compact-mobile #rosterNext, body.compact-mobile #rosterDots,
  body.compact-mobile #eventsPrev, body.compact-mobile #eventsNext, body.compact-mobile #eventsDots,
  body.compact-mobile #storePrev, body.compact-mobile #storeNext, body.compact-mobile #storeDots{
    display:none;
  }
}

/* ═══════════════════════════════
   FOOTER
═══════════════════════════════ */
footer{
  background:#08080c;padding:3rem 8vw;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem;
  border-top:1px solid rgba(53,204,236,.2);
  box-shadow:inset 0 1px 0 rgba(53,204,236,.08);
}
.footer-logo{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.6rem;letter-spacing:.1em;color:var(--white);margin-bottom:.5rem;display:block;text-decoration:none;text-shadow:0 0 20px rgba(53,204,236,.2)}
.footer-logo span{color:var(--ember)}
.footer-tag{font-size:.8rem;color:var(--steel);line-height:1.65;margin-bottom:1.4rem;max-width:240px}
.footer-col-ttl{
  font-family:'Saira Condensed',sans-serif;font-size:.68rem;font-weight:700;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ember);margin-bottom:.9rem;
  position:relative;padding-bottom:.55rem;
}
.footer-col-ttl::after{
  content:'';position:absolute;bottom:0;left:0;
  width:28px;height:2px;background:var(--ember);opacity:.6;
}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.footer-links a{font-size:.82rem;color:var(--steel);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:var(--off-white)}
.footer-bottom{
  background:#0a0a0c;padding:1.2rem 8vw;
  display:flex;justify-content:space-between;align-items:flex-start;
  border-top:1px solid rgba(255,255,255,.04);
}
.footer-copy{font-size:.72rem;color:var(--steel);letter-spacing:.04em}
.footer-copy span{color:var(--ember)}
.footer-copy-left,
.footer-copy-right{
  display:flex;gap:.2rem;
}
.footer-copy-right{align-items:flex-end;text-align:right;}
.footer-powered{
  background:#0a0a0c;padding:.55rem 8vw;
  text-align:center;font-size:.65rem;color:rgba(255,255,255,.2);
  letter-spacing:.08em;
}
.footer-powered-brand{color:var(--gold);font-weight:600;letter-spacing:.06em;}
body.light-mode .footer-powered{background:#bab6ac;color:rgba(0,0,0,.3);}
body.light-mode .footer-powered-brand{color:var(--gold);}
/* Desktop: one line each side */
.footer-copy-break{display:inline;}
/* Mobile: stack into two lines within each side, both sides stay on same row */
@media(max-width:600px){
  .footer-copy-left,
  .footer-copy-right{flex-direction:column;gap:.1rem;}
  .footer-copy-right{align-items:flex-end;}
}

/* ═══════════════════════════════
   FADE-IN SCROLL
═══════════════════════════════ */
.fade-in{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.fade-in.vis{opacity:1;transform:none}

/* ═══════════════════════════════
   ADMIN PANEL SIDEBAR
═══════════════════════════════ */
#admin-backdrop{position:fixed;inset:0;z-index:1999;cursor:default}
#admin-panel{
  position:fixed;top:0;right:0;width:500px;height:100vh;height:100dvh;
  background:var(--iron-deep);
  border-left:1px solid rgba(53,204,236,.2);
  z-index:2000;
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  overflow:hidden;
}
#admin-panel.open{transform:translateX(0)}
#adm-resize-handle{
  position:absolute;top:0;left:0;width:5px;height:100%;
  cursor:col-resize;z-index:10;
  background:transparent;
  transition:background .15s;
}
#adm-resize-handle:hover,
#adm-resize-handle.dragging{
  background:rgba(255,176,32,.35);
}
.adm-header{
  padding:1.2rem 1.5rem;
  border-bottom:1px solid rgba(53,204,236,.3);
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,rgba(255,176,32,.1),rgba(53,204,236,.06));
  flex-shrink:0;
}
.adm-header h3{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1rem;
  letter-spacing:.1em;color:var(--gold);
  text-shadow:0 0 16px rgba(255,176,32,.3);
}
.adm-close{
  background:none;border:none;color:var(--steel);
  font-size:1.3rem;cursor:pointer;transition:color .2s;padding:.2rem .4rem;
}
.adm-close:hover{color:var(--ember)}
/* tabs */
.adm-tabs{
  display:flex;align-items:center;gap:.4rem;
  flex-shrink:0;flex-wrap:wrap;
  overflow:visible;
  padding:.6rem .9rem;
  background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(53,204,236,.15);
}
body.light-mode .adm-tabs{background:rgba(0,0,0,.025)}

/* Icon-only tabs — each stays exactly 38px wide in the flex layout so
   wrapping is determined purely by panel width, never by hover state.
   The label appears as a floating tooltip below the icon on hover,
   positioned absolute so it never causes layout reflow or row-jumping. */
.adm-tab{
  flex-shrink:0;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border-radius:999px;
  background:none;border:none;
  color:var(--steel);cursor:pointer;
  overflow:visible;
  transition:background .3s ease,box-shadow .3s ease,color .2s ease;
}
.adm-tab-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:18px;height:18px;position:relative}
.adm-tab-label{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.63rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
  position:absolute;
  top:calc(100% + 5px);
  left:50%;transform:translateX(-50%);
  background:var(--iron-deep);
  border:1px solid rgba(53,204,236,.35);
  border-radius:5px;
  padding:.2rem .5rem;
  color:var(--off-white);
  opacity:0;
  pointer-events:none;
  z-index:50;
  transition:opacity .15s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.adm-tab:hover,
.adm-tab.active{
  background:rgba(53,204,236,.12);
  box-shadow:0 0 22px rgba(53,204,236,.18);
  color:var(--off-white);
}
.adm-tab.active{
  background:rgba(53,204,236,.18);
  color:var(--gold);
  box-shadow:0 0 22px rgba(53,204,236,.18),0 0 0 1px rgba(53,204,236,.3);
}
.adm-tab:hover .adm-tab-label{opacity:1;}
/* body */
.adm-body{flex:1;overflow-y:auto;overflow-x:hidden;padding:1.2rem 1.5rem}
.adm-body::-webkit-scrollbar{width:3px}
.adm-body::-webkit-scrollbar-thumb{background:var(--ember-dim)}
/* tab panes */
.adm-pane{display:none}
.adm-pane.active{display:block}
/* When a pane is popped out into the admin full-page overlay, it's
   the overlay's only content rather than one of several sibling tab
   panes — so it must render regardless of whether its .active class
   happens to be set, since that class reflects Admin Panel tab state,
   not full-page overlay state. */
.adm-pane.afp-active-pane{display:block}

/* Pool cards lay out as a responsive dashboard grid rather than a
   single stacked column — auto-fill with a sensible minimum card
   width means this naturally collapses to one column in the
   600px Admin Panel sidebar, but spreads into 2-4 columns once
   there's real width to work with (i.e. popped out via the expand
   button into the full-page overlay), without needing two separate
   markup paths for the two contexts. */
.mc-pools-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:.7rem;
  align-items:start;
}
.mc-grp-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:.55rem .7rem}
.mc-grp-card-edit{border-color:rgba(53,204,236,.3);background:rgba(53,204,236,.04)}
.mc-phase-row{display:flex;align-items:flex-start;gap:.5rem;margin-bottom:.6rem;flex-wrap:wrap}
.mc-phase-pool{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:.3rem .5rem;border-radius:4px;font-size:.68rem}
.mc-phase-card{display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:.38rem .65rem;cursor:pointer;margin-bottom:.38rem;transition:border-color .15s,background .15s}
.mc-phase-card:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}
.mc-pools-grid .adm-item{margin-bottom:0}
/* In the popped-out full-page view, the right column is wide enough
   to show two pool cards per row (Lobby A/B side by side, C/D below) */
#adminFullPageOverlay .adm-two-col-right .mc-pools-grid{
  grid-template-columns:repeat(2, 1fr);
}

/* Two-column layout for Match Centre and Match Results expanded view.
   Single column by default (covers the 600px Admin Panel sidebar).
   Switches to two columns only when inside the popped-out full-page
   overlay, which always has full viewport width — targeted directly
   rather than using a container query, which can't query an element
   against itself in most browsers. */
.adm-two-col{
  display:block;
}
#adminFullPageOverlay .adm-two-col{
  display:grid;
  grid-template-columns:300px 1fr;
  gap:1.4rem;
  align-items:start;
}
#adminFullPageOverlay .adm-two-col-left{
  position:sticky;
  top:0;
  max-height:calc(100vh - 64px - 3rem);
  overflow-y:auto;
  border-right:1px solid rgba(255,255,255,.06);
  padding-right:1rem;
}
/* item rows in admin */
.adm-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 1rem .9rem 1.1rem;
  background:rgba(15,15,20,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  border-left:2px solid transparent;
  margin-bottom:.6rem;gap:.8rem;
  box-shadow:0 3px 12px rgba(0,0,0,.3);
  position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s,border-left-color .25s;
}
.adm-item:hover{border-left-color:rgba(53,204,236,.5)}
.adm-item::before,.adm-item::after{
  content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;
}
.adm-item::before{
  border-top:1.5px solid var(--ember);border-right:1.5px solid var(--ember);
  clip-path:inset(0 100% 100% 0 round 12px);
  transition:clip-path .35s cubic-bezier(.4,0,.2,1);
}
.adm-item::after{
  border-bottom:1.5px solid var(--ember);border-left:1.5px solid var(--ember);
  clip-path:inset(100% 0 0 100% round 12px);
  transition:clip-path .35s cubic-bezier(.4,0,.2,1) .04s;
}
.adm-item-info{flex:1;min-width:0}
.adm-item-name{font-family:'Saira Condensed',sans-serif;font-size:.95rem;font-weight:700;text-transform:uppercase;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-item-sub{font-size:.75rem;color:var(--steel);margin-top:.15rem}
.adm-btns{display:flex;gap:.4rem;flex-shrink:0}
/* Reusable button-row layout for admin action groups (Create Pools /
   Auto-Assign / Reshuffle, Push to Winners / Cut to Top N / Publish,
   etc). Spacing comes entirely from flex gap rather than manual
   margin-left hacks on individual buttons, so any button can be
   conditionally shown/hidden without leaving stray gaps or a
   lopsided margin on whichever button happens to render first. When
   exactly one button remains in the row (every other one hidden by
   its condition), :only-child centers it instead of leaving it
   stranded flush-left. */
.adm-btn-row{
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
}
.adm-btn-row > button:only-child{margin:0 auto}
.adm-btn{
  font-family:'Saira Condensed',sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;padding:.3rem .65rem;
  border:none;cursor:pointer;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
  transition:all .2s;
}
.adm-btn-edit{background:rgba(255,176,32,.15);color:var(--gold);border:1px solid rgba(255,176,32,.3);border-radius:6px}
.adm-btn-edit:hover{background:var(--gold);color:var(--iron);box-shadow:0 2px 10px rgba(255,176,32,.25)}
.adm-btn-del{background:rgba(231,76,60,.12);color:var(--danger);border:1px solid rgba(231,76,60,.25);border-radius:6px}
.adm-btn-del:hover{background:var(--danger);color:#fff;box-shadow:0 2px 10px rgba(231,76,60,.25)}
/* Approval centre action buttons */
.adm-btn-approve{background:rgba(46,204,113,.12);color:var(--success,#2ecc71);border:1px solid rgba(46,204,113,.22)}
.adm-btn-approve:hover{background:var(--success,#2ecc71);color:#fff}
.adm-btn-reject{background:rgba(231,76,60,.1);color:var(--danger);border:1px solid rgba(231,76,60,.18)}
.adm-btn-reject:hover{background:var(--danger);color:#fff}
/* Pending-count badge on Approvals tab — anchored to the icon's
   corner via absolute positioning rather than sitting inline in flex
   flow, so it stays visible whether the tab is collapsed (icon-only,
   38px wide) or expanded with its label on hover. An inline badge
   would have been clipped out of view in the collapsed state by the
   tab's overflow:hidden, which defeats the point of a pending-count
   indicator — admin should see there's something pending before
   they even hover, not only after. */
.adm-tab-badge{
  position:absolute;top:-5px;right:-7px;
  display:inline-flex;align-items:center;justify-content:center;
  min-width:14px;height:14px;border-radius:7px;
  background:var(--ember);color:#fff;
  font-size:.5rem;font-weight:900;padding:0 3px;
  line-height:1;
  box-shadow:0 0 0 2px var(--iron-deep,var(--iron));
}
body.light-mode .adm-tab-badge{box-shadow:0 0 0 2px var(--lm-bg,#eaf0f4)}
/* Role-change pill inside user adm-item */
.role-pill{
  font-family:'Saira Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.1rem .45rem;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);display:inline-block;
}
.rp-admin {background:rgba(255,176,32,.25);color:var(--gold)}
.rp-cm    {background:rgba(77,184,255,.2); color:#8f9bff}
.rp-vcm   {background:rgba(77,184,255,.15);color:#7ac9ff}
.rp-elite {background:rgba(53,204,236,.18); color:var(--ember)}
.rp-mod   {background:rgba(139,92,246,.22);color:#a78bfa}
.rp-member{background:rgba(255,255,255,.1);color:var(--off-white)}
.rp-blank {background:rgba(255,255,255,.06);color:var(--steel)}
/* Per-match check-in status badges — Tournament Preview */
.ci-window-badge,.ci-checked-badge{
  font-family:'Saira Condensed',sans-serif;font-size:.6rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;padding:.18rem .55rem;
  border-radius:4px;display:inline-block;
}
.ci-open        {background:rgba(46,213,115,.12);color:#2ed573;border:1px solid rgba(46,213,115,.3)}
.ci-upcoming    {background:rgba(255,176,32,.1); color:var(--gold);border:1px solid rgba(255,176,32,.28)}
.ci-closed      {background:rgba(231,76,60,.1);  color:var(--danger);border:1px solid rgba(231,76,60,.28)}
.ci-checked-badge{background:rgba(46,213,115,.15);color:#2ed573;border:1px solid rgba(46,213,115,.35)}
/* ── Panel Access tab ── */
.acc-user-card { gap: 0; overflow: hidden; }
.acc-body { display: none; }
.acc-user-card.acc-expanded .acc-body { display: block; }
.acc-user-card.acc-expanded .acc-edit-btn { display: none; }
.acc-perm-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
}
.acc-perm-check {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .72rem;
  color: var(--off-white);
  cursor: pointer;
  user-select: none;
  padding: .2rem .5rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  transition: background .15s, border-color .15s;
}
.acc-perm-check:hover { background: rgba(255,255,255,.08); }
.acc-perm-check input[type=checkbox] { accent-color: var(--ember); width: 13px; height: 13px; flex-shrink: 0; }
.acc-perm-check:has(input:checked) { background: rgba(53,204,236,.12); border-color: rgba(53,204,236,.4); color: #fff; }
body.light-mode .acc-perm-check { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.12); color: var(--iron-text); }
body.light-mode .acc-perm-check:has(input:checked) { background: rgba(11,135,166,.08); border-color: rgba(11,135,166,.35); }
/* Save button inside access cards — matches adm-add-btn but smaller */
.adm-save-btn {
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .28rem .9rem;
  background: rgba(53,204,236,.15); border: 1px solid rgba(53,204,236,.4); color: var(--ember);
  border-radius: 4px; cursor: pointer; transition: background .2s;
}
.adm-save-btn:hover { background: rgba(53,204,236,.28); }
.adm-save-btn:disabled { opacity: .5; cursor: default; }

/* Share buttons on event/product cards */
.share-wrap{position:relative;display:inline-block}
.btn-share{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  padding:.38rem .75rem;cursor:pointer;
  clip-path:polygon(3px 0%,100% 0%,calc(100% - 3px) 100%,0% 100%);
  transition:all .2s;
}
.btn-share:hover{color:var(--white);border-color:rgba(255,255,255,.22)}
.share-dropdown{
  position:absolute;bottom:calc(100% + 6px);right:0;
  background:var(--iron-deep);border:1px solid rgba(53,204,236,.22);
  min-width:148px;z-index:500;
  display:none;flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
}
.share-dropdown.open{display:flex}
.share-option{
  font-family:'Saira Condensed',sans-serif;font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel);padding:.52rem 1rem;
  background:none;border:none;text-align:left;cursor:pointer;
  transition:all .18s;width:100%;
  display:flex;align-items:center;gap:.6rem;
}
.share-option:hover{color:var(--white);background:rgba(53,204,236,.1)}
.share-opt-icon{
  width:16px;height:16px;flex-shrink:0;
  object-fit:contain;display:block;
}
svg.share-opt-icon{overflow:visible}
.share-opt-divider{
  border-top:1px solid rgba(255,255,255,.08);
  margin:.25rem 0;
}
body.light-mode .share-opt-divider{border-top-color:rgba(0,0,0,.08);}
/* Share pills — icon-only circle, widens on hover to reveal the platform label */
.share-pill{
  flex-shrink:0;
  display:flex;align-items:center;gap:.5rem;
  width:34px;height:34px;
  padding:0 .5rem;
  border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  color:var(--off-white);cursor:pointer;
  overflow:hidden;
  transition:width .45s cubic-bezier(.22,1,.36,1),background .3s ease,border-color .3s ease,color .2s ease;
}
.share-pill-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:18px;height:18px;line-height:1}
.share-pill-label{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;flex-shrink:0;
  opacity:0;max-width:0;
  transform:translateX(-6px);
  transition:opacity .25s ease,max-width .45s ease,transform .35s ease;
}
.share-pill:hover{
  width:var(--share-pill-w,120px);
  background:rgba(53,204,236,.15);border-color:rgba(53,204,236,.35);color:var(--ember);
}
.share-pill:hover .share-pill-label{opacity:1;max-width:100px;transform:translateX(0)}
body.light-mode .share-pill{background:var(--lm-card);border:1px solid rgba(0,0,0,.12);color:var(--steel);box-shadow:var(--lm-shadow-xs)}
body.light-mode .share-pill:hover{background:rgba(53,204,236,.08);border-color:rgba(53,204,236,.3);color:var(--ember);box-shadow:var(--lm-shadow-sm)}
/* Add new btn */
.adm-add-btn{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--iron);background:var(--ember);padding:.55rem 1.2rem;
  border:none;cursor:pointer;margin-bottom:1.2rem;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:background .2s;
}
.adm-add-btn:hover{background:var(--gold)}

/* ═══════════════════════════════
   MODAL / FORM OVERLAY
═══════════════════════════════ */
.modal-overlay{
  position:fixed;inset:0;z-index:3000;
  background:rgba(0,0,0,.7);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
  padding:1rem;
}
/* Chat can be opened from on top of another already-open modal/preview at
   the standard 3000 tier (e.g. Tournament Preview's "Tournament Chat"
   button, .mp-overlay) — same z-index alone would leave stacking to DOM
   order, and #chatOverlay's markup sits earlier in index.php than
   #tournPreviewOverlay, so it would render BEHIND it. An explicit higher
   z-index (same fix pattern as #adminFullPageOverlay over #admin-panel)
   guarantees Chat always wins regardless of DOM order. */
#chatOverlay{
  z-index:3100;
}
/* Chat's entire surface (list rows, bubbles, headers, the long-press
   action menu) is unselectable on touch devices — press-and-hold is a
   gesture there (long-press menu, swipe-to-reply), not text selection,
   and a native selection highlight/callout fighting that gesture looks
   broken. Editable fields (the message composer, the user-search box)
   are explicitly excluded so typing/selecting/cutting-and-pasting your
   own draft still works normally. Desktop/mouse users have no such
   gesture conflict (long-press there is only ever a deliberate 500ms
   hold, and the hover "⋮" buttons are the discoverable alternative — see
   .chat-conv-menu-btn/.chat-bubble-menu-btn above), so normal text
   selection stays on for them entirely; gated to the same
   touch/no-hover condition those buttons' media query inverts. */
@media (hover:none), (pointer:coarse){
  #chatOverlay, #chatOverlay *, .chat-longpress-menu, .chat-longpress-menu *{
    -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
    -webkit-touch-callout:none;
  }
  #chatOverlay input, #chatOverlay textarea{
    -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;
    -webkit-touch-callout:default;
  }
}
/* Conversation-list row menu button — long-press already opens this same
   menu everywhere, but press-and-hold has no visual affordance with a
   mouse, so mouse/trackpad ("desktop") users get an explicit clickable
   trigger instead. Hidden entirely on touch devices (pointer:coarse or no
   hover) since long-press is the discoverable, expected gesture there and
   a persistent button would just be clutter. On hover-capable devices the
   button's layout slot is always reserved (display:block at rest, just
   invisible/non-interactive via opacity+pointer-events) rather than
   toggled with display:none — a display toggle changes the row's own
   width, which reflows/truncates the sibling flex:1 title+preview text
   the instant you hover, i.e. the exact "things move on hover" bug this
   is fixing. Reserving the space up front means only opacity changes. */
.chat-conv-menu-btn{
  display:none;
  background:none;border:none;color:var(--steel);
  font-size:1.1rem;line-height:1;padding:.2rem .4rem;
  cursor:pointer;flex-shrink:0;border-radius:6px;
  transition:color .2s,background .2s;
}
@media(hover:hover) and (pointer:fine){
  .chat-conv-menu-btn{
    display:block;
    opacity:0;pointer-events:none;
    transition:opacity .15s,color .2s,background .2s;
  }
  .adm-item:hover .chat-conv-menu-btn{opacity:1;pointer-events:auto}
  .chat-conv-menu-btn:hover{color:var(--off-white);background:rgba(255,255,255,.08)}
}
/* DM/Match Chat/System Notification message bubble hover menu button —
   the mouse equivalent of the bubble's long-press/swipe-to-reply
   gestures (see _chatBindBubbleGestures in script.js), same rationale as
   .chat-conv-menu-btn above, including the same "reserve the space, only
   toggle opacity" fix: the button lives in the bubble's own flex row
   alongside .chat-bubble-inner (see _chatBubblesHtml's row-reverse-when-
   mine wrapper / _chatSystemBubblesHtml), and that row has no fixed
   width — a display:none/block toggle changes the row's total content
   width, which on a long message (already near the bubble's max-width
   cap) forces .chat-bubble-inner to shrink and its text to rewrap the
   instant you hover it. Reserving the button's width at rest (as an
   invisible, non-interactive element) means hovering only ever changes
   opacity, never layout. */
.chat-bubble-menu-btn{
  display:none;
  background:none;border:none;color:var(--steel);
  font-size:1rem;line-height:1;padding:.15rem .3rem;
  cursor:pointer;flex-shrink:0;border-radius:6px;
  align-self:center;
  transition:color .2s,background .2s;
}
@media(hover:hover) and (pointer:fine){
  .chat-bubble-menu-btn{
    display:block;
    opacity:0;pointer-events:none;
    transition:opacity .15s,color .2s,background .2s;
  }
  [data-msg-id]:hover .chat-bubble-menu-btn{opacity:1;pointer-events:auto}
  .chat-bubble-menu-btn:hover{color:var(--off-white);background:rgba(255,255,255,.08)}
}
/* Long-press menu backdrop (see _chatShowMenuBackdrop in script.js) — the
   dark screen-dim only makes sense as a "long-press engaged" cue on
   touch; a desktop mouse click opening the same menu (via the hover "⋮"
   buttons above, or an actual long-press) doesn't need the whole page to
   visibly dim, so it stays transparent there. */
.chat-menu-backdrop{background:transparent}
@media (hover:none), (pointer:coarse){
  .chat-menu-backdrop{background:rgba(0,0,0,.55)}
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{
  background:rgba(15,15,20,.92);
  backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);
  border:1px solid rgba(53,204,236,.22);
  border-radius:20px;
  width:100%;max-width:500px;max-height:90vh;
  display:flex;flex-direction:column;
  animation:slideUp .25s ease;
  box-shadow:0 20px 60px rgba(0,0,0,.7),0 0 32px rgba(53,204,236,.1);
  overflow:hidden;
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
/* Guest roster card — hover shows sign-in tooltip (desktop) */
.guest-card{cursor:default;position:relative}
/* Tooltip shown via JS for both hover (desktop) and tap (mobile) */
#guestTip{
  position:fixed;
  background:var(--iron-deep);
  border:1px solid rgba(53,204,236,.45);
  color:var(--off-white);
  font-family:'Saira Condensed',sans-serif;
  font-size:.75rem;font-weight:600;letter-spacing:.08em;
  padding:.5rem 1rem;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  box-shadow:0 4px 20px rgba(0,0,0,.55);
  pointer-events:none;
  white-space:nowrap;
  z-index:9500;
  opacity:0;
  transition:opacity .18s ease;
}
.modal-hdr{
  padding:1.2rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.07);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
  background:linear-gradient(135deg,rgba(53,204,236,.06),rgba(255,176,32,.03));
}
.modal-hdr h4{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:.95rem;letter-spacing:.1em;color:var(--white);
  border-left:3px solid var(--ember);padding-left:.7rem;
}
.modal-close{background:none;border:none;color:var(--steel);font-size:1.3rem;cursor:pointer;padding:.2rem .4rem;transition:color .2s}
.modal-close:hover{color:var(--ember)}
.modal-body{padding:1.5rem;overflow-y:auto;flex:1}
.modal-body::-webkit-scrollbar{width:3px}
.modal-body::-webkit-scrollbar-thumb{background:var(--ember-dim)}
/* form fields */
.f-group{margin-bottom:1rem}
.f-label{
  display:block;font-family:'Saira Condensed',sans-serif;
  font-size:.68rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--steel);margin-bottom:.4rem;
}
.f-input,.f-select,.f-textarea{
  width:100%;background:var(--iron-deep);
  border:1px solid rgba(255,255,255,.12);color:var(--white);
  font-family:'Saira',sans-serif;font-size:.8rem;
  padding:.5rem .75rem;border-radius:6px;
  transition:border-color .2s,box-shadow .2s;outline:none;
}
.f-input:focus,.f-select:focus,.f-textarea:focus{
  border-color:var(--ember);
  box-shadow:0 0 0 3px rgba(53,204,236,.12);
}
.f-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237e8a99'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - .8rem) 50%}

/* ── THEMED CUSTOM DROPDOWN ──
   A native <select>'s OPEN list is rendered by the OS/browser chrome,
   not the page — no CSS reaches it, in any browser, which is why the
   open dropdown always looks unstyled regardless of how the closed
   <select> itself is themed. This wrapper keeps the real <select>
   functional but visually hidden, and renders a themed trigger +
   list on top that mirrors its state — so every existing onchange
   handler and .value read elsewhere in the code keeps working
   completely untouched; only the visual layer changes. */
.cdd-wrap{position:relative}
.cdd-wrap select{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;pointer-events:none;
}
.cdd-trigger{
  width:100%;height:100%;min-height:2.2rem;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--iron-deep);color:var(--off-white);
  border:1px solid rgba(255,255,255,.12);border-radius:8px;
  padding:.5rem .75rem;font-size:.8rem;
  cursor:pointer;text-align:left;
  font-family:inherit;
}
.cdd-trigger:hover{border-color:rgba(53,204,236,.35)}
.cdd-wrap.open .cdd-trigger{border-color:var(--ember)}
.cdd-trigger-label{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cdd-trigger-label.placeholder{color:var(--steel)}
.cdd-trigger-arrow{
  flex-shrink:0;width:10px;height:6px;
  transition:transform .2s;
}
.cdd-wrap.open .cdd-trigger-arrow{transform:rotate(180deg)}
.cdd-list{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:var(--iron-deep);
  border:1px solid rgba(53,204,236,.25);border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  max-height:280px;overflow-y:auto;
  padding:.3rem;
  display:none;
}
.cdd-wrap.open .cdd-list{display:block}
.cdd-option{
  padding:.45rem .65rem;border-radius:6px;
  font-size:.8rem;color:var(--off-white);
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
}
.cdd-option:hover,.cdd-option.highlighted{background:rgba(53,204,236,.12)}
.cdd-option.selected{color:var(--gold);font-weight:600}
.cdd-option.selected::after{content:'✓';color:var(--gold);flex-shrink:0}
/* Was color:var(--iron) on both rules — same mistake as the Results
   team-name bug: --iron is a background/surface variable, not a text
   color, so in light mode it rendered light-on-light and made every
   themed dropdown's selected value and option list nearly invisible.
   var(--white) is the correct text-color counterpart, same as
   .f-select uses above. */
body.light-mode .cdd-trigger{background:var(--lm-card,#fff);border-color:rgba(0,0,0,.15);color:var(--white)}
body.light-mode .cdd-list{background:var(--lm-card,#fff);border-color:rgba(11,135,166,.3);box-shadow:0 12px 32px rgba(0,0,0,.18)}
body.light-mode .cdd-option{color:var(--white)}
body.light-mode .cdd-option:hover,body.light-mode .cdd-option.highlighted{background:rgba(11,135,166,.08)}
.f-textarea{resize:vertical;min-height:80px}
/* Date/time inputs: strip Safari/iOS native chrome and lock to same height as other inputs */
input[type="date"].f-input,
input[type="time"].f-input{
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: 2.2rem;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 2.2rem;
}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}

/* Compact form variant — admin modals where vertical density matters.
   All interactive field types are locked to 1.5625rem (25px at 16px root)
   to match the + Add Place / + Add Bonus button height throughout. */
.f-compact .f-group{margin-bottom:.55rem}
.f-compact .f-label{font-size:.6rem;margin-bottom:.2rem}
.f-compact .f-input,.f-compact .f-select{font-size:.73rem;padding:0 .55rem;height:1.5625rem;box-sizing:border-box}
.f-compact .f-textarea{font-size:.73rem;padding:.3rem .55rem}
.f-compact .f-row{gap:.5rem}
/* Date/time: locked to the same 25px compact height */
.f-compact input[type="date"].f-input,
.f-compact input[type="time"].f-input{
  height: 1.5625rem;
  line-height: 1.5625rem;
  padding: 0 .55rem;
  font-size: .73rem;
  box-sizing: border-box;
}
/* Themed dropdown trigger: same 25px height; flex centres content */
.f-compact .cdd-trigger{
  min-height: 0;
  height: 1.5625rem;
  padding: 0 .75rem;
  font-size: .73rem;
  box-sizing: border-box;
}
/* Shrink Save/Cancel in the admin edit modal only — does not affect
   Sign-In or Edit Profile buttons which live outside #modalOverlay */
#modalOverlay .btn-save,#modalOverlay .btn-cancel{font-size:.65rem;padding:.42rem 1rem}

/* Mobile no-zoom-on-focus: iOS Safari auto-zooms the page in whenever a
   focused input's font-size is under 16px, REGARDLESS of the viewport
   meta tag's user-scalable=no — the two are separate mechanisms, and
   both need addressing to actually keep mobile unzoomable. .f-input's
   base .8rem (12.8px) triggers this everywhere except .f-compact, which
   keeps its own tighter 25px-height sizing below since the Admin Panel
   is a desktop-oriented interface never really used on a phone. */
@media(max-width:860px){
  .f-input,.f-select,.f-textarea{font-size:16px}
  .f-compact .f-input,.f-compact .f-select{font-size:.73rem}
  .f-compact .f-textarea{font-size:.73rem}
  /* #chatInput (Match Chat/DM composer) is styled inline in script.js,
     not via .f-input, and inline font-size otherwise wins over any
     class-based rule above — this is the one text entry point on the
     whole site heavily used on mobile that isn't already an .f-input,
     so it needs its own !important override to actually stop iOS
     auto-zoom when it's focused. */
  #chatInput{font-size:16px!important}
}

.upload-progress{
  display:none;align-items:center;gap:.6rem;
  padding:.7rem 1.5rem 0;flex-shrink:0;
}
.upload-progress.show{display:flex}
.upload-progress-track{
  flex:1;height:6px;border-radius:3px;
  background:var(--iron-deep);overflow:hidden;
}
.upload-progress-fill{
  height:100%;width:0%;background:var(--ember);border-radius:3px;
  transition:width .15s ease;
}
.upload-progress-pct{
  min-width:3em;text-align:right;font-size:.72rem;font-weight:700;color:var(--ember);
}
.btn-save:disabled{opacity:.6;cursor:default;box-shadow:none}

.modal-footer{
  padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,.07);
  display:flex;gap:.6rem;justify-content:flex-end;flex-shrink:0;
}
.btn-save{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--iron);background:var(--ember);padding:.6rem 1.5rem;
  border:none;cursor:pointer;
  clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
  transition:background .2s,box-shadow .2s;
  box-shadow:0 2px 12px rgba(53,204,236,.25);
}
.btn-save:hover{background:var(--gold);box-shadow:0 4px 18px rgba(255,176,32,.35)}
.btn-cancel{
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);padding:.6rem 1.2rem;
  cursor:pointer;transition:all .2s;
}
.btn-cancel:hover{color:var(--white);border-color:rgba(255,255,255,.25)}

/* toast */
.toast{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(80px);
  background:rgba(12,12,18,.92);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(53,204,236,.35);
  border-radius:50px;
  color:var(--white);font-family:'Saira Condensed',sans-serif;
  font-size:.8rem;font-weight:600;letter-spacing:.1em;
  padding:.75rem 2rem;z-index:10002;
  transition:transform .3s cubic-bezier(.22,1,.36,1);white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 20px rgba(53,204,236,.12);
}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(46,204,113,.45);color:var(--success);box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 20px rgba(46,204,113,.15)}

/* delete confirm */
.confirm-box{
  background:rgba(26,26,30,.9);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(231,76,60,.3);
  border-radius:20px;
  padding:2rem;max-width:360px;width:100%;text-align:center;
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  animation:slideUp .25s ease;
}
.confirm-box h4{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1rem;color:var(--white);margin-bottom:.7rem}
.confirm-box p{font-size:.85rem;color:var(--steel);margin-bottom:1.5rem;line-height:1.6}
.confirm-btns{display:flex;gap:.8rem;justify-content:center}
.btn-confirm-del{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:#fff;background:var(--danger);padding:.6rem 1.5rem;
  border:none;cursor:pointer;
  clip-path:polygon(5px 0%,100% 0%,calc(100% - 5px) 100%,0% 100%);
}

/* Login button */
.nav-login-btn{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--iron);background:var(--ember);padding:.48rem 1.3rem;
  border:none;cursor:pointer;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:background .2s,transform .15s;
}
.nav-login-btn:hover{background:var(--gold);transform:translateY(-1px)}
/* User pill */
.nav-user-pill{
  display:flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(53,204,236,.2);
  padding:.3rem .8rem .3rem .4rem;
}
.nup-avatar{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--ember-dim),var(--iron-light));
  display:flex;align-items:center;justify-content:center;
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:.6rem;color:var(--white);
  flex-shrink:0;
}
.nup-name{
  font-family:'Saira Condensed',sans-serif;font-size:.75rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--off-white);
}
.nup-logout{
  font-family:'Saira Condensed',sans-serif;font-size:.62rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  background:none;border:none;cursor:pointer;padding-left:.4rem;
  border-left:1px solid rgba(255,255,255,.1);transition:color .2s;
}
.nup-logout:hover{color:var(--ember)}
/* User popup — slides in from the right edge of the screen (same
   technique/behavior as the mobile Account drawer, #mmUserPopup) rather
   than a small anchored dropdown, so Edit Profile/Settings/Match Hub can
   stack on top of it and reveal it again on close instead of dumping the
   user back on the home page. */
.nav-user-pill{cursor:pointer;user-select:none}
.nav-user-pill:hover{border-color:rgba(53,204,236,.5);background:rgba(255,255,255,.09)}
#navUserPopup{
  /* z-index 500, not 1100 — must sit BELOW #fullPageOverlay (999) so
     Match Hub renders on top of this drawer (not the other way around)
     when opened without closing the drawer first, same stacking need as
     the mobile Account drawer vs .mobile-menu. .modal-overlay (Edit
     Profile/Settings, 3000) is unaffected either way. */
  position:fixed;top:64px;right:0;bottom:0;z-index:500;
  width:min(340px,92vw);
  background:var(--iron-mid);
  border-left:1px solid rgba(255,255,255,.1);
  box-shadow:-16px 0 40px rgba(0,0,0,.5);
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#navUserPopup.open{transform:translateX(0)}
.nup-popup-info{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:1.1rem 1.1rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nup-popup-close{
  background:none;border:none;color:var(--steel);font-size:1.1rem;
  cursor:pointer;line-height:1;padding:.2rem .3rem;flex-shrink:0;
}
.nup-popup-close:hover{color:var(--ember)}
.nup-popup-username{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:.85rem;
  letter-spacing:.05em;color:var(--white);
}
.nup-popup-role{
  font-family:'Saira Condensed',sans-serif;font-size:.62rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);margin-top:.15rem;
}
.nup-popup-item{
  display:flex;align-items:center;gap:.55rem;
  width:100%;padding:.62rem 1rem;
  font-family:'Saira Condensed',sans-serif;font-size:.7rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);
  background:rgba(255,255,255,.04);
  border:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;
  transition:color .16s,background .16s;text-decoration:none;
}
.nup-popup-item:last-child{border-bottom:none}
.nup-popup-item:hover{color:var(--ember);background:rgba(53,204,236,.08)}
.nup-popup-item.danger{color:var(--steel)}
.nup-popup-item.danger:hover{color:var(--danger);background:rgba(231,76,60,.08)}
/* Admin Panel entry in popup — gold accent */
.nup-popup-item.admin-item{color:var(--gold);}
.nup-popup-item.admin-item:hover{color:var(--gold);background:rgba(255,176,32,.1);}
body.light-mode .nup-popup-item.admin-item{color:var(--gold);}
body.light-mode .nup-popup-item.admin-item:hover{color:var(--gold);background:rgba(158,98,0,.09);}
/* Badge inline next to alerts label */
.nup-alert-count{
  margin-left:auto;
  min-width:18px;height:18px;border-radius:9px;
  background:transparent;color:var(--ember);
  border:1px solid var(--ember);
  font-family:'Saira Condensed',sans-serif;font-size:.58rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;vertical-align:middle;
}
/* Same pill shape as .nup-alert-count, gold instead of ember — a running
   balance (Bullseye Points), not an unread count. */
.nup-bullseye-count{
  margin-left:auto;
  min-width:18px;height:18px;border-radius:9px;
  background:transparent;color:var(--gold);
  border:1px solid var(--gold);
  font-family:'Saira Condensed',sans-serif;font-size:.58rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 4px;line-height:1;vertical-align:middle;
}
/* Make mm-user-block full width in mobile menu */
#mm-user-block{width:100%;}
/* "Options" button — sits on the right of the identity strip, opens the
   slide-in account drawer (#mmUserPopup) below. */
.mm-options-btn{
  margin-left:auto;flex-shrink:0;
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ember);background:rgba(53,204,236,.08);
  border:1px solid rgba(53,204,236,.35);border-radius:6px;
  padding:.4rem .65rem;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.3rem;
  transition:color .18s,border-color .18s,background .18s;
}
.mm-options-btn:hover,.mm-user-block.active .mm-options-btn{color:var(--iron);background:var(--ember);border-color:var(--ember)}
body.light-mode .mm-options-btn{color:var(--ember);background:rgba(53,204,236,.08);border-color:rgba(53,204,236,.35)}
body.light-mode .mm-options-btn:hover,body.light-mode .mm-user-block.active .mm-options-btn{color:#fff;background:var(--ember);border-color:var(--ember)}

/* Account actions drawer — slides in from the right when "Options" is
   tapped. Nested inside #mobileMenu so it fades out with the rest of the
   hamburger menu; its own transform slides it independently of that fade. */
#mmUserPopup{
  /* top:64px, not 0 — the site nav is a fixed, opaque bar at z-index:1000,
     higher than .mobile-menu's own 999 stacking context this drawer lives
     in, so starting at the very top would paint the drawer's header
     underneath the nav instead of below it. */
  position:fixed;top:64px;right:0;bottom:0;
  width:min(78vw,300px);
  background:var(--iron-mid);
  border-left:1px solid rgba(255,255,255,.1);
  box-shadow:-16px 0 40px rgba(0,0,0,.5);
  z-index:5;
  display:flex;flex-direction:column;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  transform:translateX(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#mmUserPopup.open{transform:translateX(0)}
body.light-mode #mmUserPopup{background:#f6f8fa;border-left-color:rgba(0,0,0,.08)}
.mmu-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 1.1rem .9rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.mmu-title{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.85rem;color:var(--white);
}
.mmu-close{
  background:none;border:none;color:var(--steel);font-size:1.1rem;
  cursor:pointer;line-height:1;padding:.2rem .3rem;
}
.mmu-close:hover{color:var(--ember)}
.mmu-item{
  display:flex;align-items:center;gap:.6rem;
  width:100%;padding:.85rem 1.1rem;
  font-family:'Saira Condensed',sans-serif;font-size:.75rem;
  font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);
  background:transparent;border:none;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:pointer;text-align:left;
  transition:color .16s,background .16s;
}
.mmu-item:last-child{border-bottom:none}
.mmu-item:hover,.mmu-item:active{color:var(--ember);background:rgba(53,204,236,.08)}
.mmu-item.admin-item{color:var(--gold)}
.mmu-item.admin-item:hover{color:var(--gold);background:rgba(255,176,32,.1)}
body.light-mode .mmu-header{border-bottom-color:rgba(0,0,0,.09)}
body.light-mode .mmu-item{border-bottom-color:rgba(0,0,0,.07)}
body.light-mode .mmu-item:hover{background:rgba(53,204,236,.06)}
body.light-mode .mmu-item.admin-item:hover{background:rgba(158,98,0,.09)}
/* Mobile menu login link */
.mm-login{
  font-family:'Saira Condensed',sans-serif!important;font-weight:700!important;
  font-size:1rem!important;letter-spacing:.25em!important;
  color:var(--ember)!important;
}
/* .login-tabs only ever appears inside #loginOverlay — its panel (.mp-box)
   DOES flip to a light gradient in light mode (see
   body.light-mode #loginOverlay .mp-box further down), it's not
   permanently dark as first assumed. So this divider genuinely does need
   a dark-based border in light mode. */
body.light-mode .login-tabs { border-bottom-color: rgba(0,0,0,.12); }
body.light-mode .login-tab  { color: var(--steel); }
body.light-mode .login-tab.active { color: var(--ember); border-bottom-color: var(--ember); }
/* Login modal specific — width now just falls back to .mp-box's default
   460px (was 380px, an outlier among the other form/preview modals). */
.login-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:1.4rem}
.login-tab{
  flex:1;font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.7rem;color:var(--steel);background:none;border:none;
  cursor:pointer;transition:all .2s;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.login-tab.active{color:var(--ember);border-bottom-color:var(--ember)}
.login-pane{display:none}
.login-pane.active{display:block}
.login-divider{text-align:center;font-size:.72rem;color:var(--steel);margin:.8rem 0;letter-spacing:.1em}
.login-error{
  font-size:.8rem;color:var(--danger);background:rgba(231,76,60,.08);
  border:1px solid rgba(231,76,60,.2);padding:.6rem .9rem;
  margin-bottom:1rem;display:none;
}
.login-error.show{display:block}
.logged-in-banner{
  text-align:center;padding:1rem;
}
.lib-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--ember-dim),var(--iron-light));
  display:flex;align-items:center;justify-content:center;
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.4rem;color:var(--white);
  margin:0 auto 1rem;border:2px solid rgba(53,204,236,.4);
}
.lib-name{font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.1rem;color:var(--white);margin-bottom:.3rem}
.lib-role{font-family:'Saira Condensed',sans-serif;font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);margin-bottom:1.2rem}
.lib-msg{font-size:.82rem;color:var(--steel);line-height:1.6;margin-bottom:1.4rem}
.btn-full{width:100%;margin-top:.4rem}

/* ═══════════════════════════════
   SECTION TITLE LETTER ANIMATION
═══════════════════════════════ */

/* Each letter is wrapped in a span — must be inline-block for transforms */
.sec-letter {
  display: inline-block;
  will-change: transform;
}

/* Space characters need a min-width or they collapse */
.sec-letter.is-space {
  min-width: .32em;
}

/* Line-break spans just force a new line without animation */
.sec-letter.is-br {
  display: block;
  height: 0;
  min-width: 0;
  line-height: 0;
}

/* Six distinct drift keyframes — letters get one assigned randomly */
@keyframes letterDrift1 {
  0%   { transform: translate(0, 0)          rotate(0deg); }
  20%  { transform: translate(1.4px, -2.8px) rotate(.4deg); }
  45%  { transform: translate(-1.8px, 1.2px) rotate(-.5deg); }
  70%  { transform: translate(2.2px, 2.0px)  rotate(.3deg); }
  100% { transform: translate(0, 0)          rotate(0deg); }
}
@keyframes letterDrift2 {
  0%   { transform: translate(0, 0)           rotate(0deg); }
  25%  { transform: translate(-2.0px, -1.6px) rotate(-.6deg); }
  55%  { transform: translate(1.5px, 2.4px)   rotate(.45deg); }
  80%  { transform: translate(-1.0px, .8px)   rotate(-.3deg); }
  100% { transform: translate(0, 0)           rotate(0deg); }
}
@keyframes letterDrift3 {
  0%   { transform: translate(0, 0)           rotate(0deg); }
  30%  { transform: translate(2.4px, 1.0px)   rotate(.55deg); }
  60%  { transform: translate(-1.2px, -2.5px) rotate(-.4deg); }
  85%  { transform: translate(.8px, 1.8px)    rotate(.25deg); }
  100% { transform: translate(0, 0)           rotate(0deg); }
}
@keyframes letterDrift4 {
  0%   { transform: translate(0, 0)           rotate(0deg); }
  18%  { transform: translate(-1.6px, 2.2px)  rotate(-.5deg); }
  48%  { transform: translate(2.0px, -1.4px)  rotate(.4deg); }
  75%  { transform: translate(-2.3px, .6px)   rotate(-.35deg); }
  100% { transform: translate(0, 0)           rotate(0deg); }
}
@keyframes letterDrift5 {
  0%   { transform: translate(0, 0)          rotate(0deg); }
  35%  { transform: translate(1.8px, 2.6px)  rotate(.6deg); }
  65%  { transform: translate(-2.2px, -.8px) rotate(-.45deg); }
  90%  { transform: translate(.9px, -1.9px)  rotate(.3deg); }
  100% { transform: translate(0, 0)          rotate(0deg); }
}
@keyframes letterDrift6 {
  0%   { transform: translate(0, 0)            rotate(0deg); }
  22%  { transform: translate(-2.5px, -1.0px)  rotate(-.55deg); }
  52%  { transform: translate(1.2px, 2.8px)    rotate(.5deg); }
  78%  { transform: translate(2.1px, -1.5px)   rotate(-.4deg); }
  100% { transform: translate(0, 0)            rotate(0deg); }
}

/* ─────────────────────────────── */
@media(max-width:900px){
  .about-inner{grid-template-columns:1fr}
  .about-graphic{height:250px}
  .steps-grid{grid-template-columns:1fr 1fr}
  footer{grid-template-columns:1fr 1fr}
  #admin-panel{width:100%;max-width:none}
}
@media(max-width:600px){
  section{padding:4rem 5vw}
  .hero-stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:0;
    width:100%;padding-top:1.4rem;margin-bottom:2rem;
  }
  .hero-stat{padding:0 .3rem}
  .stat-num{font-size:1.3rem;white-space:nowrap}
  .stat-label{font-size:.52rem;letter-spacing:.1em;margin-top:.2rem}
  .steps-grid{grid-template-columns:1fr}
  footer{grid-template-columns:1fr}
  /* Scoped to #achList specifically — .ach-row/.ach-date are also reused
     by Compact Mobile View for Roster/Events/Store (see renderRoster()
     etc. in script.js), and those need their trailing column (BR/MP
     stats, prize, price) to stay visible at every width, unlike
     Achievements' own date column which is deliberately the least
     essential info to drop on a tiny phone. */
  #achList .ach-row{grid-template-columns:44px 1fr}
  #achList .ach-date{display:none}
  /* Collapse f-row only outside modals — keep modal form rows as 2-col */
  .f-row{grid-template-columns:1fr}
}
/* Modal f-rows always stay 2-col regardless of screen width */
.modal-body .f-row,
.mp-body .f-row{
  grid-template-columns:1fr 1fr;
}

/* ── TOURNAMENT STATUS PULSE DOT ── */
@keyframes pulse-grey  { 0%,100%{box-shadow:0 0 0 0 rgba(160,160,170,.5)}  60%{box-shadow:0 0 0 5px rgba(160,160,170,0)} }
@keyframes pulse-green { 0%,100%{box-shadow:0 0 0 0 rgba(46,204,113,.6)}   60%{box-shadow:0 0 0 5px rgba(46,204,113,0)} }
@keyframes pulse-black { 0%,100%{box-shadow:0 0 0 0 rgba(80,80,90,.5)}     60%{box-shadow:0 0 0 5px rgba(80,80,90,0)} }
@keyframes pulse-red   { 0%,100%{box-shadow:0 0 0 0 rgba(231,76,60,.6)}    60%{box-shadow:0 0 0 5px rgba(231,76,60,0)} }
.e-status-row{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:.5rem;margin-bottom:1.1rem;
}
.e-status-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:'Saira Condensed',sans-serif;font-size:.6rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  white-space:nowrap;padding-top:.18rem;
}
.e-status-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  animation-duration:1.8s;animation-iteration-count:infinite;animation-timing-function:ease-out;
}
.e-status-dot.dot-upcoming  {background:#a0a0aa;animation-name:pulse-grey}
.e-status-dot.dot-open      {background:#2ecc71;animation-name:pulse-green}
.e-status-dot.dot-closed    {background:#50505a;animation-name:pulse-black}
.e-status-dot.dot-cancelled {background:var(--danger);animation-name:pulse-red}
.view-all-wrap{
  display:flex;justify-content:center;
  margin-top:1.6rem;
}
.view-all-btn{
  display:inline-flex;align-items:center;gap:.45rem;
  border:1px solid rgba(255,255,255,.14);
  border-radius:50px;
  overflow:hidden;
  background:rgba(255,255,255,.04);
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);
  padding:.6rem 1.8rem;cursor:pointer;
  white-space:nowrap;
  transition:color .18s,background .2s,border-color .2s,box-shadow .2s;
}
/* Smaller inline variant when used in the tournament preview header */
.mp-hdr .view-all-btn{
  font-size:.6rem;letter-spacing:.1em;
  padding:.28rem .85rem;
  overflow:visible;
}
.view-all-btn:hover{
  color:var(--ember);
  background:rgba(53,204,236,.08);
  border-color:rgba(53,204,236,.4);
  box-shadow:0 4px 16px rgba(53,204,236,.1);
}
body.light-mode .view-all-btn{
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.03);
}

/* ── Light mode: navUserPopup panel ── */
body.light-mode #navUserPopup{
  background:var(--lm-raised);
  border-color:rgba(0,0,0,.12);
  box-shadow:-16px 0 40px rgba(0,0,0,.14);
}
body.light-mode .nup-popup-info{
  border-bottom-color:rgba(0,0,0,.09);
}
body.light-mode .nup-popup-username{ color:var(--white); }
body.light-mode .nup-popup-role    { color:var(--steel); }

/* ── Light mode: popup action items — visible + consistent hover ── */
body.light-mode .nup-popup-item{
  color:var(--steel);
  background:rgba(0,0,0,.02);
  border-bottom-color:rgba(0,0,0,.07);
}
body.light-mode .nup-popup-item:hover{
  color:var(--ember);
  background:rgba(53,204,236,.06);
}
body.light-mode .nup-popup-item.danger{ color:var(--steel); }
body.light-mode .nup-popup-item.danger:hover{
  color:var(--danger);
  background:rgba(168,39,28,.07);
}


/* ── FULL-PAGE OVERLAY ── */
#fullPageOverlay{
  position:fixed;top:64px;left:0;right:0;bottom:0;z-index:999;
  background:var(--iron);
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
#fullPageOverlay.open{transform:translateY(0)}

/* ── ADMIN FULL-PAGE OVERLAY — same nav-respecting top:64px frame as
   #fullPageOverlay above, but layered above the Admin Panel sidebar
   (which sits at z-index:2000) so popping out Match Centre / Match
   Results doesn't get hidden behind it. ── */
#adminFullPageOverlay{
  position:fixed;top:64px;left:0;right:0;bottom:0;z-index:2100;
  background:var(--iron);
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
#adminFullPageOverlay.open{transform:translateY(0)}
body.light-mode #adminFullPageOverlay{background:var(--lm-bg,#eaf0f4)}
.fp-header{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;gap:1rem;
  padding:1rem 6vw;
  background:var(--iron);
  border-bottom:1px solid rgba(255,255,255,.07);
}
body.light-mode .fp-header{background:var(--lm-bg,#eaf0f4);border-bottom-color:rgba(0,0,0,.1)}

/* ── Full-page filter bar ── */
.fp-filter-wrap{
  margin-left:auto;display:flex;align-items:center;gap:.55rem;position:relative;
}
.fp-filter-icon{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:var(--steel);cursor:pointer;
  transition:color .18s,border-color .18s,background .18s;flex-shrink:0;
}
.fp-filter-icon:hover,.fp-filter-icon.active{
  color:var(--ember);border-color:rgba(53,204,236,.4);background:rgba(53,204,236,.07);
}
body.light-mode .fp-filter-icon{
  background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.14);color:var(--steel);
}
body.light-mode .fp-filter-icon:hover,
body.light-mode .fp-filter-icon.active{
  color:var(--ember);border-color:rgba(53,204,236,.35);background:rgba(53,204,236,.06);
}
.fp-filter-badge{
  position:absolute;top:-3px;right:-3px;
  min-width:14px;height:14px;border-radius:7px;
  background:transparent;color:var(--ember);border:1px solid var(--ember);
  font-family:'Saira Condensed',sans-serif;font-size:.5rem;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 3px;line-height:1;
}
.fp-filter-panel{
  position:absolute;top:calc(100% + .5rem);right:0;z-index:20;
  background:var(--iron-mid);border:1px solid rgba(255,255,255,.1);
  border-radius:12px;padding:.7rem .8rem;
  display:flex;flex-direction:column;align-items:stretch;gap:.35rem;
  min-width:160px;
  box-shadow:0 8px 28px rgba(0,0,0,.45);
  animation:slideUp .18s ease;
}
body.light-mode .fp-filter-panel{
  background:var(--lm-raised);border-color:rgba(0,0,0,.12);
  box-shadow:0 8px 28px rgba(0,0,0,.14);
}
body.light-mode #fpFilterChips [style*="rgba(255,255,255,.07)"]{
  background:rgba(0,0,0,.08) !important;
}
body.light-mode #fpFilterChips [style*="rgba(255,255,255,.07)"] + div {
  color:var(--steel);
}
.fp-chip{
  font-family:'Saira Condensed',sans-serif;font-size:.62rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);border-radius:6px;
  padding:.38rem .75rem;cursor:pointer;white-space:nowrap;
  width:100%;text-align:left;
  transition:color .15s,background .15s,border-color .15s;
}
.fp-chip:hover{color:var(--off-white);border-color:rgba(255,255,255,.28)}
.fp-chip.active{
  color:var(--ember);background:rgba(53,204,236,.1);border-color:rgba(53,204,236,.4);
}
body.light-mode .fp-chip{
  color:var(--steel);background:rgba(0,0,0,.03);border-color:rgba(0,0,0,.13);
}
body.light-mode .fp-chip:hover{color:var(--white);border-color:rgba(0,0,0,.28)}
body.light-mode .fp-chip.active{
  color:var(--ember);background:rgba(53,204,236,.07);border-color:rgba(53,204,236,.3);
}
.fp-filter-clear{
  font-family:'Saira Condensed',sans-serif;font-size:.58rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--danger);background:rgba(231,76,60,.07);
  border:1px solid rgba(231,76,60,.25);border-radius:6px;
  padding:.35rem .7rem;cursor:pointer;white-space:nowrap;
  width:100%;text-align:left;
  margin-top:.2rem;border-top:1px solid rgba(255,255,255,.07);
  padding-top:.5rem;background:none;border-left:none;border-right:none;border-bottom:none;
  border-radius:0;
  transition:color .15s;
}
.fp-filter-clear:hover{color:var(--white)}
.fp-back-btn{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);background:transparent;
  border:1px solid rgba(53,204,236,.3);
  padding:.4rem .9rem;cursor:pointer;
  clip-path:polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
  transition:background .2s,border-color .2s;
  flex-shrink:0;
}
.fp-back-btn:hover{background:rgba(53,204,236,.08);border-color:rgba(53,204,236,.6)}
.fp-title{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.1rem;
  color:var(--white);letter-spacing:.04em;
}
/* Match Centre / Match Results tab buttons inside the admin pop-out
   header — same visual language as .adm-tab in the sidebar (active
   tab gets the gold underline) so switching here feels like the same
   control, just relocated to the full-page view. */
.afp-tabs{display:flex;gap:.2rem}
/* Expand-to-full-screen button — hidden on mobile/tablet where the
   pop-out adds no value, and hidden inside the pop-out overlay itself
   since you're already expanded. Only visible on desktop. */
.afp-expand-btn{display:none !important}
@media(min-width:1024px){
  .afp-expand-btn{display:flex !important}
  #adminFullPageOverlay .afp-expand-btn{display:none !important}
}

.afp-tab{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:.92rem;
  letter-spacing:.04em;color:var(--steel);background:none;border:none;
  cursor:pointer;transition:color .2s,border-color .2s;
  padding:.3rem .2rem;border-bottom:2px solid transparent;
}
.afp-tab.active{color:var(--white);border-bottom-color:var(--gold)}
.afp-tab:hover{color:var(--off-white)}
.fp-body{padding:2.5rem 6vw 4rem}
/* Roster/store inside full-page — wrap instead of carousel */
.fp-body .roster-grid,
.fp-body .events-grid,
.fp-body .store-grid{
  flex-wrap:wrap !important;transform:none !important;
  gap:1.2rem;padding:0;
}
.fp-body .member-card{width:220px;flex-shrink:0}
.fp-body .event-card{width:280px;flex-shrink:0}
.fp-body .prod-card{width:220px;flex-shrink:0}

/* ── ALERTS ── */
.nav-alerts-btn{
  position:relative;background:none;border:none;cursor:pointer;
  color:var(--steel);font-size:1.1rem;padding:.3rem .35rem;
  transition:color .2s;z-index:1001;line-height:1;
}
.nav-alerts-btn:hover{color:var(--ember)}
.nav-alerts-badge{
  position:absolute;top:0;right:0;
  min-width:16px;height:16px;border-radius:8px;
  background:transparent;color:var(--ember);
  border:1px solid var(--ember);
  font-family:'Saira Condensed',sans-serif;font-size:.55rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;padding:0 3px;
  line-height:1;pointer-events:none;
}
/* ── ACHIEVEMENT PAGINATION ── */
.ach-pagination{
  display:flex;justify-content:center;
  margin-top:1.6rem;
}
.ach-pg-bar{
  display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.12);
  border-radius:50px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
body.light-mode .ach-pg-bar{
  border-color:rgba(0,0,0,.14);
  background:rgba(0,0,0,.03);
}
.ach-pg-item{
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--steel);background:transparent;border:none;
  padding:.55rem 1.1rem;cursor:pointer;
  position:relative;white-space:nowrap;
  transition:color .18s,background .18s;
}
.ach-pg-item:not(:last-child)::after{
  content:'';position:absolute;right:0;top:20%;height:60%;
  width:1px;background:rgba(255,255,255,.1);
}
body.light-mode .ach-pg-item:not(:last-child)::after{background:rgba(0,0,0,.1)}
.ach-pg-item:hover{color:var(--ember);background:rgba(53,204,236,.06)}
.ach-pg-item.active{
  color:var(--white);
  background:rgba(53,204,236,.15);
  box-shadow:inset 0 0 0 1.5px var(--ember),0 0 12px rgba(53,204,236,.1);
}
.ach-pg-item.dots{cursor:default;letter-spacing:.05em;color:var(--steel)}
.ach-pg-item.dots:hover{background:transparent;color:var(--steel)}
.ach-pg-item:disabled,.ach-pg-item[disabled]{opacity:.3;cursor:not-allowed}
.ach-pg-item:disabled:hover,.ach-pg-item[disabled]:hover{background:transparent;color:var(--steel)}

/* ═══════════════════════════════════════════════════
   LOGIN / REGISTER MODAL  —  Glow Frame Edition
   Technique: a padding-only wrapper (.login-glow-frame)
   whose background IS a conic-gradient, animated by
   natively interpolating a registered custom property
   (@property --im-login-angle). No clip tricks, no
   container queries, no fixed height — the card inside
   is auto-height, so there's no content/box mismatch to
   go wrong on any viewport.
════════════════════════════════════════════════════ */

#loginOverlay{
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  /* Theme's own accent colours (auto-flips with light/dark mode) rather
     than a standalone hardcoded neon palette — --cyan/--pink names kept
     so every rule below didn't need touching individually. */
  --cyan:var(--ember);
  --pink:var(--gold);
  --panel:#0d1119;
  --panel-2:#10141d;
  --muted:#7d8896;
}

@property --im-login-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
@keyframes im-login-spin{ to{ --im-login-angle:360deg; } }

/* ── Glow frame — the rotating border itself ── */
#loginOverlay .login-glow-frame{
  position:relative;
  width:min(92vw,420px);
  border-radius:22px;
  padding:2px;
  background:conic-gradient(from var(--im-login-angle,0deg),
    var(--cyan) 0deg,
    var(--pink) 90deg,
    var(--cyan) 180deg,
    var(--pink) 270deg,
    var(--cyan) 360deg);
  animation:im-login-spin 6s linear infinite;
  box-shadow:0 0 40px -8px color-mix(in srgb,var(--cyan) 35%,transparent),0 8px 32px rgba(0,0,0,.6);
}

/* ── Card — sits inside the 2px glow gap; fully auto-height ── */
#loginOverlay .mp-box{
  position:relative;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:none;
  border-radius:20px;
  max-height:calc(100vh - 3rem);
  overflow:hidden;
  animation:none;
  width:100%;
  box-shadow:none;
}

/* ── Header ── */
#loginOverlay .modal-hdr{
  background:transparent;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:1rem 1.4rem;
  flex-shrink:0;
}
#loginOverlay .modal-hdr h4{
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;
  font-size:.85rem;letter-spacing:.14em;
  color:#e8edf3;
  border-left:none;padding-left:0;
  text-shadow:none;
}
#loginOverlay .modal-close{
  width:26px;height:26px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);
  background:rgba(255,255,255,.05);border:none;cursor:pointer;font-size:1rem;
  opacity:1;pointer-events:all;
  transition:color .2s;
}
#loginOverlay .modal-close:hover{color:#e8edf3}

/* ── Modal body ── */
#loginOverlay .modal-body{
  padding:1rem 1.4rem 1.4rem;
  overflow-y:auto;flex:1;
}

/* ── Tabs + sliding underline ──────────────────────
   The bar's position is driven purely by CSS: :has()
   detects which tab carries .active (JS already toggles
   this in switchLoginTab()) and slides the shared bar
   under whichever one is active. No JS changes needed.
─────────────────────────────────────────────────── */
#loginOverlay .login-tabs{
  display:flex;gap:0;
  margin-bottom:0;
}
#loginOverlay .login-tab{
  flex:1;
  font-family:'Saira Condensed',sans-serif;font-weight:700;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.75rem;
  color:var(--muted);background:none;border:none;cursor:pointer;
  transition:color .2s;
}
#loginOverlay .login-tab:hover{color:#b4bfc9}
#loginOverlay .login-tab.active{color:var(--cyan)}

#loginOverlay .login-tab-underline{
  position:relative;
  height:2px;
  background:rgba(255,255,255,.08);
  margin-bottom:1.2rem;
}
#loginOverlay .login-tab-underline::after{
  content:'';
  position:absolute;left:0;top:0;
  height:2px;width:50%;
  background:var(--cyan);
  box-shadow:0 0 10px var(--cyan);
  transition:transform .25s ease;
  transform:translateX(0%);
}
#loginOverlay .login-tabs:has(.login-tab:nth-child(2).active) + .login-tab-underline::after{
  transform:translateX(100%);
}

/* ── Form fields — pill shape matching reference ── */
#loginOverlay .f-label{
  display:block;
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.3rem;
}
#loginOverlay .f-group{margin-bottom:.7rem}
#loginOverlay .f-input{
  width:100%;
  padding:10px 18px;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:#e8edf3;
  font-family:'Saira',sans-serif;font-size:.85rem;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  box-sizing:border-box;
}
#loginOverlay .f-input::placeholder{color:#4d5866}
#loginOverlay .f-input:focus{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--cyan) 15%,transparent);
}
#loginOverlay .f-input[readonly]{
  opacity:.55;cursor:default;
}

/* ── First + Last name side by side ── */
#loginOverlay .f-row{
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
}

/* ── Action button — pill + cyan gradient fill, matching reference's .submit-btn ── */
#loginOverlay .btn-save{
  width:100%;margin-top:.4rem;
  padding:14px 20px;
  border:none;
  border-radius:999px;
  clip-path:none;
  background:linear-gradient(180deg,var(--ember),var(--ember-dim));
  color:#04141a;
  font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 0 25px -4px color-mix(in srgb,var(--cyan) 60%,transparent);
}
#loginOverlay .btn-save:hover{
  transform:translateY(-1px);
  box-shadow:0 0 32px -2px color-mix(in srgb,var(--cyan) 75%,transparent);
}
#loginOverlay .btn-save:active{transform:translateY(0)}

/* ── Continue with Discord — same pill/font/glow treatment as .btn-save
   above so it reads as part of this modal rather than a bare unstyled
   <button>, but keeps Discord's own blurple (not the org's --ember accent)
   since that brand color is the actual recognition cue for this action. */
#loginOverlay .btn-discord{
  width:100%;margin:.75rem 0;
  padding:14px 20px;
  border:none;
  border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:.55rem;
  background:linear-gradient(180deg,#5865F2,#4752C4);
  color:#fff;
  font-family:'Saira Condensed',sans-serif;font-weight:800;
  font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease;
  box-shadow:0 0 25px -4px rgba(88,101,242,.55);
}
#loginOverlay .btn-discord:hover{
  transform:translateY(-1px);
  box-shadow:0 0 32px -2px rgba(88,101,242,.7);
}
#loginOverlay .btn-discord:active{transform:translateY(0)}
#loginOverlay .login-or-divider{
  display:flex;align-items:center;gap:.6rem;
  margin:.2rem 0 .9rem;
  font-family:'Saira Condensed',sans-serif;font-size:.65rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
#loginOverlay .login-or-divider::before,
#loginOverlay .login-or-divider::after{
  content:'';flex:1;height:1px;background:rgba(255,255,255,.1);
}

/* ── Logout button ── */
#loginOverlay .btn-cancel{
  width:100%;margin-top:.35rem;
  padding:10px 20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  clip-path:none;
  background:rgba(255,255,255,.04);
  color:var(--muted);
  font-family:'Saira Condensed',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  cursor:pointer;
  transition:color .18s,border-color .18s;
}
#loginOverlay .btn-cancel:hover{
  color:#e74c3c;border-color:rgba(231,76,60,.4);
}

/* ── Error banner ── */
#loginOverlay .login-error{
  border-radius:12px;
  border:1px solid rgba(231,76,60,.3);
  background:rgba(231,76,60,.08);
  font-size:.78rem;padding:.6rem .9rem;margin-bottom:.8rem;
}

/* ── Logged-in view ── */
#loginOverlay .logged-in-banner{text-align:center;padding:1.2rem .8rem}
#loginOverlay .lib-avatar{
  width:64px;height:64px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--ember-dim));
  display:flex;align-items:center;justify-content:center;
  font-family:'Chakra Petch','Saira Condensed',sans-serif;font-weight:700;text-transform:uppercase;font-size:1.3rem;color:#04141a;
  margin:0 auto .9rem;
  border:2px solid color-mix(in srgb,var(--cyan) 45%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--cyan) 22%,transparent);
}

/* ── Light mode ── (accent colours need no override here — --cyan/--pink
   already resolve through var(--ember)/var(--gold), which flip automatically.
   Only the non-accent surface colours below need an explicit light variant.) */
body.light-mode #loginOverlay .mp-box{background:linear-gradient(180deg,#eaf0f4,#dde4e9)}
body.light-mode #loginOverlay .f-input{background:#e4e8ec;border-color:#c4ccd3;color:#171b20}
body.light-mode #loginOverlay .f-input::placeholder{color:#7e8a99}
body.light-mode #loginOverlay .modal-hdr h4{color:#171b20}
body.light-mode #loginOverlay .modal-hdr{border-bottom-color:rgba(0,0,0,.1)}
body.light-mode #loginOverlay .modal-close{background:rgba(0,0,0,.05)}
body.light-mode #loginOverlay .login-tab-underline{background:rgba(0,0,0,.12)}
body.light-mode #loginOverlay .login-or-divider::before,
body.light-mode #loginOverlay .login-or-divider::after{background:rgba(0,0,0,.14)}
body.light-mode #loginOverlay .btn-cancel{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.16);color:var(--steel)}
body.light-mode #loginOverlay .btn-cancel:hover{color:#e74c3c;border-color:rgba(231,76,60,.4)}

/* ── Mobile ── */
@media(max-width:480px){
  #loginOverlay .login-glow-frame{width:min(94vw,420px)}
  #loginOverlay .mp-box{max-height:calc(100vh - 2rem)}
  #loginOverlay .f-row{grid-template-columns:1fr}
  #loginOverlay .modal-body{padding:.8rem 1rem 1rem}
}

/* ═══════════════════════════════════════════════════════════
   COOKIE CONSENT POPUP — floats in front of the page (full-screen
   backdrop, no click-outside/Escape dismiss) until the visitor picks
   Accept or Reject. Same overlay tier as themedConfirm (10000+) so it
   always wins over any other modal that happens to be open underneath.
═══════════════════════════════════════════════════════════ */
#cookieBanner{
  position:fixed;inset:0;z-index:10003;
  display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:1.25rem;
}
#cookieBanner.show{display:flex}
.cookie-modal{
  width:100%;max-width:440px;
  background:var(--iron-mid);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  padding:1.8rem;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
}
.cookie-banner-text{
  color:var(--off-white);font-size:.82rem;line-height:1.6;
}
.cookie-banner-text strong{color:var(--white);font-family:'Chakra Petch','Saira Condensed',sans-serif;text-transform:uppercase;letter-spacing:.04em;font-size:1rem;display:block;margin-bottom:.5rem}
.cookie-banner-actions{display:flex;gap:.6rem;margin-top:1.3rem}
.cookie-banner-btn{
  flex:1;text-align:center;
  font-family:'Saira Condensed',sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  border-radius:50px;padding:.65rem 1rem;cursor:pointer;white-space:nowrap;border:1px solid transparent;
}
.cookie-banner-btn.accept{color:var(--iron);background:var(--gold);}
.cookie-banner-btn.reject{color:var(--steel);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);}
.cookie-banner-btn.accept:hover{filter:brightness(1.08)}
.cookie-banner-btn.reject:hover{color:var(--off-white);border-color:rgba(255,255,255,.24)}

body.light-mode .cookie-modal{background:var(--iron-mid);border-color:rgba(0,0,0,.1);box-shadow:0 20px 60px rgba(0,0,0,.25)}
body.light-mode .cookie-banner-btn.reject{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.16);}
body.light-mode .cookie-banner-btn.reject:hover{color:var(--white);border-color:rgba(0,0,0,.28)}

/* Privacy Policy / Terms & Conditions overlay shell (_openLegalOverlay in script.js) */
.legal-card{border:1px solid rgba(255,255,255,.1)}
.legal-close-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
body.light-mode .legal-card{border-color:rgba(0,0,0,.12)}
body.light-mode .legal-close-btn{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.16)}
body.light-mode .legal-close-btn:hover{color:var(--white);border-color:rgba(0,0,0,.28)}

/* "Scores" popup (_mhOpenMatchScores) — per-item breakdown row dividers */
body.light-mode [data-match-scores-overlay] [style*="border-bottom:1px solid rgba(255,255,255,.05)"] { border-bottom-color: rgba(0,0,0,.1) !important; }

@media(max-width:480px){
  .cookie-modal{padding:1.4rem}
  .cookie-banner-actions{gap:.4rem}
  .cookie-banner-btn{padding:.6rem .4rem;font-size:.62rem;letter-spacing:.06em;white-space:normal}
}