/* Same JetBrains Mono file already used by HYVE Card Collection. No new font asset. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/card-collection/jetbrains-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

/* ==========================================================================
   HYVE TOURNAMENTS — visual tokens + base components (public pages only)
   Source of truth for the look of /tournaments/, tournament pages,
   registration, check-in and bracket. Scoped under .hyve-tournaments so
   nothing leaks into NEWS, Playtest, or other pages of play-hyve.com.

   Fonts: replace the three --hv-font-* fallbacks with the site's real
   fonts (Elementor Global Fonts / hyve-ui CSS). Do not add new fonts.
   ========================================================================== */

.hyve-tournaments {
  /* Colors */
  --hv-bg:            #0A0E17;  /* page ground */
  --hv-bg-deep:       #070A11;  /* footer */
  --hv-surface:       #0F1522;  /* panels, cards, inputs */
  --hv-surface-2:     #0D121D;  /* header bars, match card header */
  --hv-line:          #1A2232;  /* section separators */
  --hv-border:        #2A3346;  /* card / input borders */
  --hv-border-soft:   #1F2738;
  --hv-text:          #FFFFFF;
  --hv-text-muted:    #B6BFCC;  /* body copy on dark */
  --hv-text-dim:      #8A94A6;  /* labels, meta */
  --hv-text-loser:    #7C8696;  /* eliminated team in bracket */

  --hv-accent:        #2BF5A0;  /* CTA, OPEN, links, highlight line */
  --hv-accent-hover:  #7CFFC6;
  --hv-on-accent:     #06120C;  /* text on accent buttons */
  --hv-info:          #5AB8FF;  /* UPCOMING, WAITLIST, Discord */
  --hv-live:          #FF6B78;  /* LIVE, errors, closed */
  --hv-error-text:    #FF8A94;
  --hv-warn:          #FFB547;  /* PENDING, FULL, check-in */
  --hv-gold:          #F2C94C;  /* champion, match time */
  --hv-gold-soft:     #E8B33A;
  --hv-done:          #A3ACBA;  /* COMPLETED, BYE */

  /* Typography — swap for the site's real families */
  --hv-font-display: "Roboto", sans-serif; /* heavy, uppercase */
  --hv-font-body:    "Roboto", sans-serif;
  --hv-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;            /* labels, meta, times */

  --hv-fs-hero:    clamp(44px, 6vw, 76px);   /* tagline / page title */
  --hv-fs-h1:      clamp(36px, 4.5vw, 56px);
  --hv-fs-h2:      clamp(22px, 2.4vw, 28px);
  --hv-fs-h3:      18px;
  --hv-fs-body:    15px;
  --hv-fs-small:   13px;
  --hv-fs-label:   11px;                     /* mono, letter-spaced */
  --hv-fs-micro:   10px;

  /* Additional P2 layout values. Fonts reuse existing HYVE assets. */
  --hv-field-label: #D5DBE4;
  --hv-flag-bg: #1A1608;
  --hv-champion-bg: #120F06;
  --hv-gold-light: #FFE08A;
  --hv-space-1: 4px;
  --hv-space-2: 8px;
  --hv-space-3: 12px;
  --hv-space-4: 16px;
  --hv-space-5: 20px;
  --hv-space-6: 24px;
  --hv-space-7: 32px;
  --hv-space-8: 40px;
  --hv-space-9: 48px;
  --hv-space-10: 64px;
  --hv-space-11: 80px;
  --hv-stroke: 1px;
  --hv-focus-stroke: 2px;
  --hv-hero-gap: clamp(48px, 7vw, 112px);
  --hv-hero-top: 56px;
  --hv-hero-bottom: 64px;
  --hv-content-gap: 48px;
  --hv-hero-intro-max: 480px;
  --hv-team-title: 14px;
  --hv-meta-value: 16px;
  --hv-mobile-title: 30px;
  --hv-theme-mobile-gutter: 10px;
  --hv-empty-height: 380px;
  --hv-mobile-empty-height: 140px;
  --hv-countdown-number: 28px;
  --hv-mono-weight: 500;
  --hv-track-label: .2em;
  --hv-track-eyebrow: .3em;
  --hv-overlay-bg: rgb(10 14 23 / .94);
  --hv-mobile-action-height: 80px;
  --hv-grid-hero: minmax(0, 1.05fr) minmax(0, 1fr);
  --hv-grid-info: minmax(0, 1.8fr) minmax(0, 1fr);
  --hv-grid-form: minmax(0, 2.2fr) minmax(0, 1fr);
  --hv-private-max: 640px;
  --hv-drawer-width: 390px;
  --hv-round-width: 200px;
  --hv-input-mobile: 16px;
  --hv-backdrop-opacity: .65;
  --hv-dialog-radius: 16px;
  --hv-motion-duration: 180ms;

  /* Spacing & shape */
  --hv-gutter:     32px;                     /* 16px on mobile */
  --hv-max:        1180px;
  --hv-section-y:  64px;                     /* 40px on mobile */
  --hv-radius:     0;                        /* square corners everywhere, except logo tile */
  --hv-touch:      48px;                     /* min button / input height (44 absolute min) */

  background: var(--hv-bg);
  color: var(--hv-text);
  font-family: var(--hv-font-body);
  font-size: var(--hv-fs-body);
  line-height: 1.5;
}
@media (max-width: 767px) {
  .hyve-tournaments { --hv-gutter: 16px; --hv-section-y: 40px; }
}

/* ---------- Layout ---------- */
.hyve-tournaments .hv-wrap    { max-width: var(--hv-max); margin: 0 auto; padding: 0 var(--hv-gutter); box-sizing: border-box; }
.hyve-tournaments .hv-section { padding: var(--hv-section-y) 0; border-top: 1px solid var(--hv-line); }
.hyve-tournaments .hv-section--alt { background: var(--hv-surface-2); }
.hyve-tournaments a           { color: var(--hv-accent); }
.hyve-tournaments a:hover     { color: var(--hv-accent-hover); }

/* ---------- Type ---------- */
.hyve-tournaments .hv-display { font-family: var(--hv-font-display); font-weight: 900; font-size: var(--hv-fs-hero); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; margin: 0; }
.hyve-tournaments .hv-display .hv-accent { color: var(--hv-accent); }   /* tagline line 3 */
.hyve-tournaments .hv-h1      { font-family: var(--hv-font-display); font-weight: 900; font-size: var(--hv-fs-h1); line-height: .95; text-transform: uppercase; margin: 0; }
.hyve-tournaments .hv-h2      { font-family: var(--hv-font-display); font-weight: 700; font-size: var(--hv-fs-h2); text-transform: uppercase; margin: 0; }
.hyve-tournaments .hv-h3      { font-family: var(--hv-font-display); font-weight: 700; font-size: var(--hv-fs-h3); margin: 0; }
.hyve-tournaments .hv-eyebrow { font-family: var(--hv-font-mono); font-size: var(--hv-fs-label); letter-spacing: .3em; text-transform: uppercase; color: var(--hv-accent); }
.hyve-tournaments .hv-eyebrow::before { content: "■ "; }
.hyve-tournaments .hv-label   { font-family: var(--hv-font-mono); font-size: var(--hv-fs-micro); letter-spacing: .2em; text-transform: uppercase; color: var(--hv-text-dim); }
.hyve-tournaments .hv-mono    { font-family: var(--hv-font-mono); }
.hyve-tournaments .hv-muted   { color: var(--hv-text-muted); }
.hyve-tournaments .hv-dim     { color: var(--hv-text-dim); }

/* ---------- Buttons ---------- */
.hyve-tournaments .hv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--hv-touch); padding: 0 22px; box-sizing: border-box;
  background: var(--hv-accent); color: var(--hv-on-accent); border: 1px solid var(--hv-accent); border-radius: var(--hv-radius);
  font-family: var(--hv-font-display); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.hyve-tournaments .hv-btn:hover        { background: var(--hv-accent-hover); color: var(--hv-on-accent); }
.hyve-tournaments .hv-btn:focus-visible { outline: 2px solid var(--hv-text); outline-offset: 3px; }
.hyve-tournaments .hv-btn--lg          { min-height: 52px; padding: 0 28px; font-size: 14px; }
.hyve-tournaments .hv-btn--outline     { background: transparent; color: var(--hv-accent); }
.hyve-tournaments .hv-btn--outline:hover { background: transparent; color: var(--hv-accent-hover); border-color: var(--hv-accent-hover); }
.hyve-tournaments .hv-btn[disabled],
.hyve-tournaments .hv-btn.is-disabled  { background: var(--hv-line); border-color: var(--hv-border); color: var(--hv-text-dim); cursor: not-allowed; }
.hyve-tournaments .hv-btn.is-loading   { opacity: .8; pointer-events: none; }
@media (max-width: 767px) { .hyve-tournaments .hv-btn--block-mobile { width: 100%; } }

/* ---------- Status chips ---------- */
.hyve-tournaments .hv-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px;
  font-family: var(--hv-font-mono); font-size: var(--hv-fs-micro); letter-spacing: .15em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid currentColor; color: var(--hv-done);
}
.hyve-tournaments .hv-chip__dot  { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hyve-tournaments .hv-chip--open     { color: var(--hv-accent); }   /* OPEN, APPROVED, CHECKED IN, COMPLETED match */
.hyve-tournaments .hv-chip--upcoming { color: var(--hv-info); }     /* UPCOMING, WAITLISTED */
.hyve-tournaments .hv-chip--live     { color: var(--hv-live); }     /* LIVE, REJECTED, NO-SHOW, CLOSED, INVALID */
.hyve-tournaments .hv-chip--warn     { color: var(--hv-warn); }     /* PENDING, FULL, FORFEIT, CHECK-IN */
.hyve-tournaments .hv-chip--done     { color: var(--hv-done); }     /* COMPLETED tournament, BYE, WITHDRAWN */
.hyve-tournaments .hv-chip--gold     { color: var(--hv-gold); }     /* CHAMPION */
.hyve-tournaments .hv-chip--pending  { color: var(--hv-done); border-style: dashed; }

/* ---------- Panels & cards ---------- */
.hyve-tournaments .hv-panel        { background: var(--hv-surface); border: 1px solid var(--hv-border-soft); border-radius: var(--hv-radius); }
.hyve-tournaments .hv-panel--focus { border-color: var(--hv-accent); }                 /* featured event */
.hyve-tournaments .hv-card         { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--hv-surface); border: 1px solid var(--hv-border-soft); }
.hyve-tournaments .hv-card__title  { font-family: var(--hv-font-display); font-weight: 700; font-size: 22px; margin: 0; }
.hyve-tournaments .hv-card__meta   { font-family: var(--hv-font-mono); font-size: 12px; color: var(--hv-text-muted); }
.hyve-tournaments .hv-card__actions { display: flex; gap: 8px; margin-top: auto; }
.hyve-tournaments .hv-grid-cards   { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
@media (max-width: 1199px) { .hyve-tournaments .hv-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .hyve-tournaments .hv-grid-cards { grid-template-columns: 1fr; } }

/* ---------- Capacity meter ---------- */
.hyve-tournaments .hv-meter        { height: 4px; background: var(--hv-line); }
.hyve-tournaments .hv-meter__bar   { display: block; height: 4px; background: var(--hv-accent); }
.hyve-tournaments .hv-meter--warn .hv-meter__bar { background: var(--hv-warn); }   /* >= 80% or full */
.hyve-tournaments .hv-meter--live .hv-meter__bar { background: var(--hv-live); }
.hyve-tournaments .hv-meter-label  { display: flex; justify-content: space-between; font-family: var(--hv-font-mono); font-size: 12px; }

/* ---------- Section tabs (index) ---------- */
.hyve-tournaments .hv-tabs  { display: flex; gap: 8px; overflow-x: auto; }
.hyve-tournaments .hv-tab   { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--hv-border); color: var(--hv-text-muted); font-family: var(--hv-font-mono); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.hyve-tournaments .hv-tab.is-active { background: var(--hv-accent); border-color: var(--hv-accent); color: var(--hv-on-accent); }

/* ---------- Hero time block + countdown ---------- */
.hyve-tournaments .hv-time-label { font-family: var(--hv-font-mono); font-size: var(--hv-fs-label); letter-spacing: .25em; color: var(--hv-gold-soft); }
.hyve-tournaments .hv-time-date  { font-family: var(--hv-font-display); font-weight: 900; font-size: 44px; line-height: 1; text-transform: uppercase; }
.hyve-tournaments .hv-time-main  { font-family: var(--hv-font-display); font-weight: 700; font-size: 28px; color: var(--hv-gold-soft); }
.hyve-tournaments .hv-time-conv  { font-family: var(--hv-font-mono); font-size: 12px; color: var(--hv-text-dim); }
.hyve-tournaments .hv-countdown  { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hyve-tournaments .hv-countdown__cell { display: flex; flex-direction: column; align-items: center; padding: 12px 0; border: 1px solid var(--hv-border-soft); }
.hyve-tournaments .hv-countdown__num  { font-family: var(--hv-font-display); font-weight: 900; font-size: 28px; }
.hyve-tournaments .hv-countdown__unit { font-family: var(--hv-font-mono); font-size: var(--hv-fs-micro); color: var(--hv-text-dim); }
.hyve-tournaments .hv-prize { display: flex; align-items: center; gap: 18px; padding-top: 20px; border-top: 1px solid var(--hv-border-soft); }
.hyve-tournaments .hv-prize__kicker { font-family: var(--hv-font-mono); font-size: var(--hv-fs-label); letter-spacing: .25em; color: var(--hv-accent); }
.hyve-tournaments .hv-prize__title  { font-family: var(--hv-font-display); font-weight: 900; font-size: 26px; line-height: 1.1; text-transform: uppercase; }

/* ---------- Meta strip (key / values) ---------- */
.hyve-tournaments .hv-meta  { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; padding: 24px; background: var(--hv-surface); border: 1px solid var(--hv-border-soft); }
.hyve-tournaments .hv-meta b { display: block; font-family: var(--hv-font-display); font-size: 18px; }
@media (max-width: 767px) { .hyve-tournaments .hv-meta { grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; background: none; border: 0; } .hyve-tournaments .hv-meta > * { padding: 12px; border: 1px solid var(--hv-border-soft); } }

/* ---------- Forms ---------- */
.hyve-tournaments .hv-field       { display: flex; flex-direction: column; gap: 8px; }
.hyve-tournaments .hv-field label { font-family: var(--hv-font-mono); font-size: var(--hv-fs-label); letter-spacing: .15em; text-transform: uppercase; color: var(--hv-field-label); }
.hyve-tournaments .hv-field .hv-req { color: var(--hv-accent); }
.hyve-tournaments .hv-input {
  width: 100%; box-sizing: border-box; min-height: var(--hv-touch); padding: 0 14px;
  background: var(--hv-surface); border: 1px solid var(--hv-border); border-radius: var(--hv-radius);
  color: var(--hv-text); font-family: var(--hv-font-body); font-size: 15px;
}
.hyve-tournaments .hv-input::placeholder { color: var(--hv-text-dim); }
.hyve-tournaments .hv-input:focus { outline: none; border-color: var(--hv-accent); box-shadow: 0 0 0 1px var(--hv-accent); }
.hyve-tournaments .hv-input[aria-invalid="true"], .hyve-tournaments .hv-input.is-error { border-color: var(--hv-live); }
.hyve-tournaments .hv-help  { font-size: 12px; color: var(--hv-text-dim); }
.hyve-tournaments .hv-error { font-size: 12px; color: var(--hv-error-text); }
.hyve-tournaments .hv-form-group { display: flex; align-items: center; gap: 12px; font-family: var(--hv-font-display); font-weight: 700; font-size: 16px; }
.hyve-tournaments .hv-form-group::after { content: ""; flex: 1; height: 1px; background: var(--hv-border-soft); }
.hyve-tournaments .hv-consent { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--hv-border); font-size: 14px; line-height: 1.6; }
.hyve-tournaments .hv-consent input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--hv-accent); }
@media (max-width: 767px) { .hyve-tournaments .hv-input { font-size: 16px; } }  /* no iOS zoom */

/* ---------- Notices / state cards ---------- */
.hyve-tournaments .hv-notice        { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--hv-surface); border: 1px solid var(--hv-border); }
.hyve-tournaments .hv-notice--ok    { border-color: var(--hv-accent); }
.hyve-tournaments .hv-notice--info  { border-color: var(--hv-info); }
.hyve-tournaments .hv-notice--warn  { border-color: var(--hv-warn); }
.hyve-tournaments .hv-notice--error { border-color: var(--hv-live); }

/* ---------- Bracket ---------- */
.hyve-tournaments .hv-bracket         { overflow-x: auto; }
.hyve-tournaments .hv-bracket__rounds { display: flex; gap: 32px; min-width: 980px; }
.hyve-tournaments .hv-bracket__round  { flex: 1 1 0; display: flex; flex-direction: column; gap: 10px; }
.hyve-tournaments .hv-bracket__head   { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--hv-line); font-family: var(--hv-font-display); font-weight: 700; font-size: 14px; }
.hyve-tournaments .hv-bracket__list   { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
@media (max-width: 1199px) { .hyve-tournaments .hv-bracket { scroll-snap-type: x mandatory; } .hyve-tournaments .hv-bracket__round { scroll-snap-align: start; } }

.hyve-tournaments .hv-match         { display: flex; flex-direction: column; background: var(--hv-surface); border: 1px solid var(--hv-border); color: var(--hv-text); text-decoration: none; }
.hyve-tournaments .hv-match:hover   { border-color: var(--hv-accent); }
.hyve-tournaments .hv-match__top    { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 5px 10px; background: var(--hv-surface-2); font-family: var(--hv-font-mono); font-size: 10px; color: var(--hv-text-dim); }
.hyve-tournaments .hv-match__row    { display: flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--hv-line); font-size: 13px; }
.hyve-tournaments .hv-match__name   { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hyve-tournaments .hv-match__score  { font-family: var(--hv-font-mono); font-weight: 600; }
.hyve-tournaments .hv-match__row.is-winner { font-weight: 700; color: var(--hv-text); }
.hyve-tournaments .hv-match__row.is-loser  { color: var(--hv-text-loser); }
.hyve-tournaments .hv-match--live    { border-color: var(--hv-live); }
.hyve-tournaments .hv-match--pending { border-style: dashed; }
.hyve-tournaments .hv-match--final   { border-color: var(--hv-gold); }
.hyve-tournaments .hv-match.is-selected { border-color: var(--hv-live); outline: 1px solid var(--hv-live); }
.hyve-tournaments .hv-match__flag   { padding: 4px 10px; font-family: var(--hv-font-mono); font-size: 10px; color: var(--hv-warn); background: var(--hv-flag-bg); }  /* SCORE CORRECTED */
@media (max-width: 767px) { .hyve-tournaments .hv-match__row { padding: 10px 12px; font-size: 15px; } .hyve-tournaments .hv-match__name { white-space: normal; overflow-wrap: anywhere; } }

/* Mobile round tabs */
.hyve-tournaments .hv-roundtabs        { display: flex; gap: 6px; }
.hyve-tournaments .hv-roundtab         { flex: 1 1 0; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--hv-border); color: var(--hv-text-muted); font-family: var(--hv-font-mono); font-size: 11px; }
.hyve-tournaments .hv-roundtab[aria-selected="true"] { background: var(--hv-accent); border-color: var(--hv-accent); color: var(--hv-on-accent); }

/* Match detail: drawer (desktop) / bottom sheet (mobile) */
.hyve-tournaments .hv-drawer { display: flex; flex-direction: column; gap: 18px; padding: 24px; background: var(--hv-surface); border: 1px solid var(--hv-live); }
@media (max-width: 767px) { .hyve-tournaments .hv-drawer { position: fixed; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; border: 0; border-top: 2px solid var(--hv-live); border-radius: 16px 16px 0 0; z-index: 50; } }

/* ---------- Champion ---------- */
@keyframes hyve-tournaments-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
.hyve-tournaments .hv-champion        { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; padding: 48px; background: var(--hv-champion-bg); border: 1px solid var(--hv-gold); }
.hyve-tournaments .hv-champion__label { font-family: var(--hv-font-mono); font-size: 12px; letter-spacing: .2em; color: var(--hv-gold); }
.hyve-tournaments .hv-champion__team  { font-family: var(--hv-font-display); font-weight: 900; font-size: clamp(40px, 5vw, 64px); line-height: .95; color: var(--hv-gold-light); text-transform: uppercase; margin: 0; }

/* ---------- Mobile sticky CTA (tournament page) ---------- */
.hyve-tournaments .hv-sticky-cta { display: none; }
@media (max-width: 767px) {
  .hyve-tournaments .hv-sticky-cta { display: flex; position: sticky; bottom: 0; z-index: 40; padding: 12px 16px; background: var(--hv-surface-2); border-top: 1px solid var(--hv-accent); }
  .hyve-tournaments .hv-sticky-cta .hv-btn { width: 100%; }
}
