/* ============================================================
   EVENT NAME / CLASSIC NEON TUBE TREATMENT
   Live text only. Designed to resemble bent glass neon tubing,
   not a blurred gradient banner.
   ============================================================ */

#page-score .score-event {
  position: relative;
  margin: 0 0 18px;
}

#page-score .score-event-kick {
  position: relative;
  z-index: 3;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 8px;
}

#page-score .score-event h2#score-event-name {
  position: relative;
  z-index: 2;
  display: inline-block;
  margin: 0;
  padding: 6px 4px 10px;
  font-family: 'Quicksand', sans-serif;
  font-size: 38px;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
  isolation: isolate;

  /* The dark center + bright tube edge is what makes this read
     as neon tubing rather than a filled, blurry gradient. */
  color: #dffcff;
  background: linear-gradient(
    100deg,
    #3DFFA0 0%,
    #22C9FF 50%,
    #1E6FFF 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  /* text-stroke can't be a gradient - it's always one flat color. That
     was fine at the old bold weight, where the gradient fill made up
     most of each letter's visible ink. At this thinner weight the
     stroke is a much bigger share of the total color, so a bright
     fixed-color stroke was winning the visual fight against the
     gradient underneath it and reading as flat cyan. Dimmed way down
     so it just defines the tube's edge without competing for color. */
  -webkit-text-stroke: 0.7px rgba(202, 255, 255, .35);
  text-shadow:
    0 0 1px rgba(255,255,255,.95),
    0 0 3px rgba(126,245,255,.88),
    0 0 8px rgba(53,207,255,.75),
    0 0 18px rgba(37,184,255,.55),
    0 0 32px rgba(38,242,176,.36);
  filter: none;
}

/* A subtle halo behind the actual letters, not a full-width rectangle. */
#page-score .score-event h2#score-event-name::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 22% -4% 12%;
  border-radius: 999px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(46,134,255,.20),
    rgba(53,214,255,.18) 45%,
    rgba(92,255,176,.20)
  );
  filter: blur(26px);
  opacity: .6;
}

/* Tiny glass highlight. It adds a lit-tube feel without washing out
   the letterforms or creating a giant cyan blob. */
#page-score .score-event h2#score-event-name::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 3%;
  pointer-events: none;
  border-radius: 4px;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,.17),
    rgba(255,255,255,.04) 45%,
    rgba(221,255,238,.14)
  );
  filter: blur(12px);
  opacity: .5;
}

#page-score .score-event p {
  position: relative;
  z-index: 3;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-muted);
  margin: 8px 0 0;
}

/* Light mode: keep the neon-tube edge, but use a darker blue/green
   interior and a very small halo so the name remains crisp. Unlike dark
   mode, there's no bright bloom to lean on against a white background -
   legibility here has to come from a solid, well-defined stroke and a
   touch more weight, not from glow. */
:root[data-theme="light"] #page-score .score-event h2#score-event-name {
  background: linear-gradient(
    100deg,
    #067a41 0%,
    #067f96 50%,
    #0851a3 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 600 !important;
  -webkit-text-stroke: 0.9px rgba(6, 74, 99, .88) !important;
  text-shadow:
    0 0 1px rgba(255,255,255,.9),
    0 0 2px rgba(14,142,183,.3),
    0 0 5px rgba(23,185,151,.15) !important;
  filter: none !important;
}

:root[data-theme="light"] #page-score .score-event h2#score-event-name::before {
  opacity: .1;
  filter: blur(20px);
}

:root[data-theme="light"] #page-score .score-event h2#score-event-name::after {
  opacity: .08;
  filter: blur(9px);
}

:root[data-theme="light"] #page-score .score-event-kick {
  color: #55728b !important;
}

:root[data-theme="light"] #page-score .score-event p {
  color: #52718d !important;
}

/* Mobile sizing and spacing. */
@media (max-width: 720px) {
  #page-score .score-event h2#score-event-name {
    display: inline-block;
    font-size: clamp(25px, 8.2vw, 36px);
    line-height: 1.08;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    text-align: center;
    overflow: visible;
    text-overflow: clip;
  }

  #page-score .score-event-kick,
  #page-score .score-event p {
    text-align: center;
  }

  #page-score .score-event h2#score-event-name::before {
    inset: 24% -3% 12%;
  }

  /* Scan counter + GREG: one tidy, centered pair right under the tagline
     (they used to scatter - counter hard left, GREG floating via auto margins). */
  #page-score .score-event-row {
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  #page-score .score-event-row .score-event {
    margin-bottom: 4px;
  }
  #page-score .score-event-row .my-scan-count,
  #page-score .score-event-row .greg-entry-btn {
    margin: 0;
    height: 38px;
    box-sizing: border-box;
    padding: 0 16px;
    justify-content: center;
  }
  #page-score .score-event-row .my-scan-count-lbl { display: inline; }
}