/* ════════════════════════════════════════════════════════════════════════
   Copa Murayama — brand re-skin for the Taikai registration funnel.
   Scoped entirely under .brand-copa (set on <html>), so the default Taikai
   dark theme is untouched for every other tournament. We mostly remap the
   register.html / tournament.html CSS variables from the dark glass theme to
   the Copa light editorial palette, then patch the few hard-coded dark bits.
   ════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Geist';src:url('/assets/fonts/geist.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'ArchivoExp';src:url('/assets/fonts/archivo-expanded.woff2') format('woff2');font-weight:900;font-stretch:125%;font-style:normal;font-display:swap}

/* ── Variable remap: dark glass → Copa light editorial ─────────────────── */
.brand-copa{
  --bg-primary:#ffffff;
  --bg-secondary:#faf8f3;          /* warm washi */
  --bg-surface:rgba(22,20,15,.035);
  --bg-surface-hover:rgba(22,20,15,.06);
  --bg-surface-active:rgba(214,31,43,.07);
  --text-primary:#16140f;          /* sumi ink */
  --text-secondary:#5d574c;
  --text-muted:#a39c8e;
  --accent:#d61f2b;
  --accent-hover:#b3141f;
  --accent-glow:rgba(214,31,43,.18);
  --accent-subtle:rgba(214,31,43,.07);
  --border-color:rgba(22,20,15,.12);
  --border-active:rgba(214,31,43,.45);
  --danger:#c0392b;
  --danger-bg:rgba(192,57,43,.08);
  --success:#2e7d4f;
  --success-bg:rgba(46,125,79,.08);
  --shadow:0 2px 10px rgba(22,20,15,.06);
  --shadow-lg:0 18px 50px rgba(22,20,15,.12);
  --glass:#ffffff;
  --glass-border:rgba(22,20,15,.12);
  /* tournament.html uses a slightly different variable vocabulary; map those too */
  --bg:#ffffff;
  --text:#16140f;
  --text-dim:#8a8276;
  --border:rgba(22,20,15,.12);
  --glass-hover:rgba(22,20,15,.05);
  --font-stack:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.brand-copa body{background:#ffffff;color:#16140f;font-family:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.brand-copa ::selection{background:rgba(214,31,43,.16)}

/* Display typography → Archivo Expanded, like the marketing site */
.brand-copa .reg-section-title,
.brand-copa #info-title,
.brand-copa .auth-title,
.brand-copa h1,.brand-copa h2{
  font-family:'ArchivoExp','Geist',sans-serif;font-weight:900;font-stretch:125%;
  text-transform:uppercase;letter-spacing:-.01em;color:#16140f;
}

/* ── Top bar ───────────────────────────────────────────────────────────── */
.brand-copa .reg-topbar{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(22,20,15,.12);
}
/* Replace the topbar wordmark TEXT with the Copa Murayama logo. The text is set
   by JS (textContent = tournament name), so we hide it via font-size:0 and paint
   the logo as a background — the JS overwrite can't disturb an image this way. */
.brand-copa #topbar-brand,.brand-copa .reg-topbar-brand{
  display:inline-block;width:148px;height:38px;font-size:0;line-height:0;color:transparent;
  background:url('/assets/img/copamurayama-logo.png') left center/contain no-repeat;
}
@media(max-width:768px){
  .brand-copa #topbar-brand,.brand-copa .reg-topbar-brand{width:118px;height:30px}
}

/* ── Cards / surfaces (drop the dark glassmorphism) ────────────────────── */
.brand-copa .glass-card,
.brand-copa .reg-card,
.brand-copa .auth-card{
  background:#ffffff;
  border:1px solid rgba(22,20,15,.12);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 10px 40px rgba(22,20,15,.07);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.brand-copa .btn-accent{
  background:#d61f2b;color:#fff;border:none;font-weight:600;letter-spacing:.01em;
  box-shadow:0 6px 20px rgba(214,31,43,.22);
}
.brand-copa .btn-accent:hover{background:#b3141f}
.brand-copa .btn-ghost{
  background:transparent;color:#16140f;border:1px solid rgba(22,20,15,.22);font-weight:600;
}
.brand-copa .btn-ghost:hover{border-color:#16140f;background:rgba(22,20,15,.03)}

/* ── Form fields ───────────────────────────────────────────────────────── */
.brand-copa .form-group input,
.brand-copa .form-group select,
.brand-copa .form-group textarea,
.brand-copa input[type=text],
.brand-copa input[type=email],
.brand-copa input[type=password],
.brand-copa input[type=number],
.brand-copa input[type=date],
.brand-copa select,.brand-copa textarea{
  background:#fff;color:#16140f;border:1px solid rgba(22,20,15,.18);
}
.brand-copa .form-group input::placeholder,
.brand-copa textarea::placeholder{color:#a39c8e}
.brand-copa .form-group input:focus,
.brand-copa .form-group select:focus,
.brand-copa .form-group textarea:focus,
.brand-copa input:focus,.brand-copa select:focus,.brand-copa textarea:focus{
  border-color:#d61f2b;outline:none;box-shadow:0 0 0 3px rgba(214,31,43,.12);
}
.brand-copa .form-group label{color:#5d574c}

/* ── Auth modal ────────────────────────────────────────────────────────── */
.brand-copa .auth-modal{background:rgba(22,20,15,.45);backdrop-filter:blur(4px)}
.brand-copa .auth-modal .auth-box,
.brand-copa .auth-modal-content{
  background:#fff;border:1px solid rgba(22,20,15,.12);box-shadow:0 30px 80px rgba(22,20,15,.25);
}
.brand-copa .auth-tab.active{color:#d61f2b;border-color:#d61f2b}

/* ── Selected / active states (events, roles, profile cards) ───────────── */
.brand-copa .selected,
.brand-copa .active-card,
.brand-copa [class*="selected"]{border-color:#d61f2b}

/* ── Strip the Taikai app references ───────────────────────────────────── */
/* No big Taikai logo in the topbar — the brand text stands on its own. */
.brand-copa .topbar-logo,
.brand-copa img[data-taikai-logo]{display:none!important}
/* Hide the Taikai support chat widget on the branded flow. */
.brand-copa #taikai-chat-root{display:none!important}

/* Small, allowed attribution. */
.brand-copa .brand-powered{
  text-align:center;padding:40px 20px 28px;font-size:.74rem;letter-spacing:.04em;
  color:#a39c8e;
}
.brand-copa .brand-powered a{color:#5d574c;text-decoration:none;border-bottom:1px solid rgba(22,20,15,.18)}

/* ── Copa Murayama branding inside the auth card (above the tabs) ──────── */
.brand-copa .auth-card-left::before{
  content:'';display:block;width:100%;height:88px;margin:2px 0 20px;
  background:url('/assets/img/copamurayama-logo.png') center/contain no-repeat;
}

/* ── Mobile: center the auth modal instead of bottom-sheet ─────────────── */
@media(max-width:768px){
  .brand-copa .auth-modal{align-items:center;padding:18px}
  .brand-copa .auth-card{border-radius:16px;max-height:90vh;overflow-y:auto}
}

/* No emojis in the Copa experience: hide the role-card / guidance emoji glyphs
   in the register funnel (the account + badge pages are emoji-stripped server-side). */
.brand-copa .role-card-icon,
.brand-copa .auth-role-icon{display:none!important}
.brand-copa .role-card{padding-top:18px}

/* Light navbar + Copa wordmark in place of the Taikai logo (account/badge pages
   share register.html's chrome conventions but use .navbar, not .reg-topbar). */
.brand-copa .navbar{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(22,20,15,.12);
}
.brand-copa .navbar-brand{
  display:inline-block;width:152px;height:36px;font-size:0;line-height:0;color:transparent;
  background:url('/assets/img/copamurayama-logo.png') left center/contain no-repeat;
}
.brand-copa .navbar-brand img{display:none!important}
@media(max-width:768px){
  .brand-copa .navbar-brand{width:120px;height:28px}
}

/* ════════════════════════════════════════════════════════════════════════
   Branded account panel (/copamurayama/cuenta) — page class .brand-copa-account.
   account.html reuses some variable names (notably --glass as a subtle overlay)
   with different semantics than the register funnel, so its remap is scoped to
   the page class and never touches the funnel.
   ════════════════════════════════════════════════════════════════════════ */
.brand-copa-account{
  --bg:#ffffff;
  --bg-secondary:#faf8f3;
  --text:#16140f;
  --text-muted:#5d574c;
  --text-dim:#8a8276;
  --glass:rgba(22,20,15,.045);
  --glass-border:rgba(22,20,15,.12);
  --glass-hover:rgba(22,20,15,.08);
  --green:#1f7a44;
  --red:#c0392b;
}
.brand-copa-account body{background:#ffffff;color:#16140f}
/* Drop account.html's hard-coded dark navbar/sidebar surfaces. */
.brand-copa-account .sidebar{background:#faf8f3;border-right:1px solid rgba(22,20,15,.10)}
.brand-copa-account .sidebar-link.active{color:var(--accent)}
@media (max-width:768px){.brand-copa-account .sidebar-link{border-color:rgba(22,20,15,.14);background:#ffffff}.brand-copa-account .sidebar-link.active{border-color:var(--accent);background:rgba(214,31,43,.06)}}
.brand-copa-account .main-content{background:#ffffff}
.brand-copa-account .stat-card,
.brand-copa-account .card,
.brand-copa-account .empty-state{background:#ffffff;border:1px solid rgba(22,20,15,.10)}
/* Hide the Taikai support chat on the branded panel. */
.brand-copa-account #taikai-chat-root{display:none!important}

/* ════ Branded badge / QR page (/copamurayama/credencial) ════ */
.brand-copa-badge{
  --bg:#ffffff;
  --text:#16140f;
  --text-muted:#5d574c;
  --accent:#d61f2b;
}
.brand-copa-badge body{background:#ffffff;color:#16140f}