/* ==========================================================================
   GOALTHORN — core visual system
   Reproduces the dark football dashboard shown in reference.png.
   Bootstrap 5 supplies the grid/utilities only; the brand skin lives here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted so the app also works offline on XAMPP)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/poppins-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/poppins-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
/* ==========================================================================
   GOALTHORN design tokens
   --------------------------------------------------------------------------
   The page is pure black. Every elevated surface is a near-black neutral so it
   separates from the page by lightness rather than by hue, and green is the one
   accent colour: actions, active navigation, selected tabs, figures, glows.
   Orange survives only as a small secondary accent for money and status.
   ========================================================================== */
:root {
  /* Pure black page. --gt-bg-deep is kept as a separate token because layout
     rules reference it, but it is black too: the page must not show a seam. */
  --gt-bg:            #000000;
  --gt-bg-deep:       #000000;

  /* Elevated surfaces: near-black neutrals, lightest first. */
  --gt-surface:       #080808;
  --gt-surface-2:     #0d0d0d;
  --gt-surface-3:     #111111;
  --gt-surface-hover: #171717;

  /* Borders are neutral, not tinted. Green borders are added deliberately where
     something is meant to draw the eye. */
  --gt-border:        #1e1e1e;
  --gt-border-soft:   rgba(255, 255, 255, .06);
  --gt-border-strong: rgba(255, 255, 255, .13);

  --gt-text:          #f2f5f3;
  --gt-text-soft:     #c9d3cd;
  --gt-muted:         #8d9a94;
  --gt-dim:           #6b7873;

  /* Secondary accents. Not for primary actions. */
  --gt-orange:        #e8892f;
  --gt-orange-2:      #f2a94f;
  --gt-orange-deep:   #c86f1d;
  --gt-gold:          #ddad6b;
  --gt-red:           #e5484d;
  --gt-amber:         #f5a524;
  --gt-blue:          #4a9de0;

  /* Green is the brand accent. */
  --gt-green:         #2fbf71;
  --gt-green-2:       #3ee081;
  --gt-green-soft:    #1d6b48;
  --gt-green-dim:     rgba(47, 191, 113, .13);
  --gt-green-line:    rgba(47, 191, 113, .34);
  --gt-green-glow:    rgba(47, 191, 113, .28);

  /* The neon green: a vivid lime used where something has to read as "live and
     energetic" against the hero photography.

     --gt-green above is a calmer, slightly desaturated emerald and it earns its
     keep in dense interface - navigation, statuses, inline links, the admin
     screens - where a fully saturated lime would be tiring to read at length.
     This token is the opposite trade: high chroma, reserved for the hero and the
     active states that sit with it, so the button and the live UI read as one
     accent rather than two.

     The value is taken from the hero artwork rather than picked by eye. The
     saturated greens in the seven files average hue 138 / saturation 0.85, and
     their brightest glow measures about #02FE6B. #32e64b sits at hue 128 /
     saturation 0.78, which is within about ten degrees of the artwork's own
     green - close enough that the button reads as part of the picture.

     Worth recording what was tried: the brand emerald (#4ce98d -> #2fbf71) sat
     at hue 145-147 and saturation 0.67-0.75, which put it nearer the artwork's
     shadow tones than its glow and read as pale mint. A brighter lime at
     #39ff14 fixed the mint but ran to hue 111, twenty-seven degrees yellow of
     the artwork and visibly a different green. #32e64b holds the vividness
     without either problem.

     Carries 11.31:1 against the dark button ink and 11.62:1 as text on a panel,
     so it clears AAA in both directions rather than merely being bright. */
  --gt-neon:          #2BCB5A;   /* primary interactive green (standardised) */
  --gt-neon-lift:     #46dd6c;   /* top-lit highlight for the button gradient */
  --gt-neon-deep:     #1cab4c;   /* lower stop, same hue, gives the pill depth  */
  --gt-neon-glow:     rgba(43, 203, 90, .42);
  --gt-neon-ring:     rgba(43, 203, 90, .30);

  --gt-sidebar-w:     240px;
  --gt-header-h:      68px;
  --gt-rail-w:        380px;
  --gt-gutter:        20px;
  --gt-radius:        14px;
  --gt-radius-sm:     10px;
  --gt-radius-lg:     18px;

  --gt-shadow:        0 18px 40px -24px rgba(0, 0, 0, .95);
  --gt-shadow-lg:     0 30px 60px -30px rgba(0, 0, 0, 1);

  --gt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gt-display: 'Poppins', 'Inter', -apple-system, 'Segoe UI', sans-serif;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--gt-bg);
  color: var(--gt-text);
  font-family: var(--gt-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body::before {
  /* Stadium-light ambience. Green only: the page is pure black, so this is the
     single place the brand colour is allowed to wash across it, and it is kept
     faint enough that #000000 still reads as the background. */
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1100px 560px at 12% -8%, rgba(47, 191, 113, .05), transparent 64%),
    radial-gradient(820px 440px at 92% 2%, rgba(47, 191, 113, .028), transparent 62%);
  z-index: 0;
}

h1, h2, h3, h4, h5, h6 { font-family: var(--gt-display); font-weight: 600; letter-spacing: -.01em; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--gt-orange-2); }

img { max-width: 100%; height: auto; }

::selection { background: rgba(232, 137, 47, .3); color: #fff; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: #000000; }
::-webkit-scrollbar-thumb { background: #262626; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #1c473a; }

:focus-visible { outline: 2px solid var(--gt-orange); outline-offset: 2px; border-radius: 6px; }

/* --------------------------------------------------------------------------
   4. Brand
   -------------------------------------------------------------------------- */
.gt-logo { display: inline-flex; align-items: center; gap: 10px; }
.gt-logo__mark { display: block; flex: none; }
.gt-logo__word {
  font-family: var(--gt-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: .12em;
  color: #eef7f3;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.gt-logo--lg .gt-logo__word { font-size: 25px; letter-spacing: .13em; }
.gt-logo--sm .gt-logo__word { font-size: 15px; letter-spacing: .1em; }
.gt-logo--footer .gt-logo__word { color: #e6f2ec; }

/* --------------------------------------------------------------------------
   5. App shell
   -------------------------------------------------------------------------- */
.gt-app { position: relative; z-index: 1; min-height: 100vh; }

.gt-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--gt-sidebar-w);
  background: var(--gt-bg-deep);
  border-right: 1px solid var(--gt-border-soft);
  display: flex;
  flex-direction: column;
  z-index: 1040;
  overflow-y: auto;
  overflow-x: hidden;
}

.gt-sidebar__brand {
  display: flex;
  align-items: center;
  padding: 0 18px;
  height: var(--gt-header-h);
  flex: none;
  border-bottom: 1px solid var(--gt-border-soft);
}

.gt-sidebar__nav { padding: 16px 12px 8px; flex: 1 1 auto; }

.gt-navlabel {
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4f6a63;
  padding: 14px 12px 8px;
  font-weight: 600;
}

.gt-nav {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 14px;
  border-radius: var(--gt-radius-sm);
  color: #b6cbc4;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  border: 1px solid transparent;
}
.gt-nav + .gt-nav { margin-top: 4px; }
.gt-nav__icon { font-size: 18px; line-height: 1; width: 20px; text-align: center; flex: none; color: #9db6ae; transition: color .18s ease; }
.gt-nav:hover { background: #121212; color: #eef4f1; }
.gt-nav:hover .gt-nav__icon { color: #d3e5de; }
/* Active navigation is green: the one accent that says "you are here". */
.gt-nav.is-active {
  background: linear-gradient(90deg, rgba(47, 191, 113, .20), rgba(47, 191, 113, .06));
  border-color: var(--gt-green-line);
  color: var(--gt-green-2);
  font-weight: 600;
}
.gt-nav.is-active .gt-nav__icon { color: var(--gt-green-2); }
.gt-nav.is-active::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 22px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--gt-green-2), var(--gt-green-soft));
}
.gt-nav__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gt-red);
  margin-left: auto;
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .16);
  animation: gt-pulse 1.8s ease-in-out infinite;
}
.gt-nav__badge {
  margin-left: auto;
  background: rgba(232, 137, 47, .18);
  color: var(--gt-orange-2);
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}

@keyframes gt-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

.gt-sidebar__promo {
  margin: 10px 12px 16px;
  padding: 16px 15px;
  border: 1px solid var(--gt-border);
  border-radius: var(--gt-radius);
  background: linear-gradient(160deg, #121212, #0a0a0a);
  text-align: center;
}
.gt-sidebar__promo h6 {
  margin: 0 0 2px;
  font-size: 13.5px;
  color: #e7f3ee;
  font-weight: 600;
}
.gt-sidebar__promo p { margin: 0 0 12px; font-size: 11.5px; color: var(--gt-dim); }
.gt-sidebar__promo .gt-btn { width: 100%; }

/* --------------------------------------------------------------------------
   6. Top bar
   -------------------------------------------------------------------------- */
.gt-main { margin-left: var(--gt-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }

/* --------------------------------------------------------------------------
   WHICH SHELL IS SHOWN follows the server's decision, not the viewport.

   The server picks the shell from the user agent and puts gt-shell--mobile or
   gt-shell--desktop on <body>; <main> is rendered as .gt-content or
   .gt-m-content to match. The chrome around it has to follow the SAME signal.

   Re-picking the shell by viewport width instead is what produced two real
   faults: a desktop browser narrower than the breakpoint was given desktop
   markup and then had it hidden, so the page came up blank; and a phone on a
   large screen was given mobile markup wrapped in desktop chrome, so the
   mobile bottom nav - the primary navigation on a phone - disappeared.

   The base rules already hide the mobile chrome and show the desktop chrome;
   these blocks correct that per shell. Media queries are left to reflow
   whichever shell is actually present.
   -------------------------------------------------------------------------- */
.gt-shell--mobile .gt-sidebar,
.gt-shell--mobile .gt-topbar,
.gt-shell--mobile .gt-footer { display: none; }
.gt-shell--mobile .gt-m-topbar { display: grid; }
.gt-shell--mobile .gt-m-bottom { display: flex; }
.gt-shell--mobile .gt-main { margin-left: 0; }

.gt-shell--desktop .gt-m-topbar,
.gt-shell--desktop .gt-m-bottom { display: none; }

.gt-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--gt-header-h);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 22px;
  background: rgba(6, 25, 21, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gt-border-soft);
  flex: none;
}
.gt-topbar__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.gt-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.gt-search { position: relative; width: 340px; max-width: 100%; }
.gt-search__icon {
  position: absolute; left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #6f8a82; font-size: 15px; pointer-events: none;
}
.gt-search input {
  width: 100%;
  height: 42px;
  border-radius: 999px;
  background: var(--gt-surface-2);
  border: 1px solid var(--gt-border-soft);
  color: var(--gt-text);
  padding: 0 16px 0 40px;
  font-size: 13.5px;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.gt-search input::placeholder { color: #6b857d; }
.gt-search input:focus { border-color: var(--gt-green-line); background: #141414; }

.gt-iconbtn {
  position: relative;
  width: 40px; height: 40px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gt-border-soft);
  background: var(--gt-surface-2);
  color: #c2d6cf;
  font-size: 16px;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.gt-iconbtn:hover { background: var(--gt-surface-hover); color: #fff; border-color: var(--gt-border); }
.gt-iconbtn__dot {
  position: absolute;
  top: 7px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gt-red);
  border: 1.5px solid #06201a;
}

.gt-userchip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--gt-border-soft);
  background: var(--gt-surface-2);
  color: var(--gt-text);
  transition: background .18s ease, border-color .18s ease;
}
.gt-userchip:hover, .gt-userchip:focus { background: var(--gt-surface-hover); color: #fff; border-color: var(--gt-border); }
.gt-userchip__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; display: block; }
.gt-userchip__name { font-size: 13.5px; font-weight: 500; color: #dcebe5; }
.gt-userchip__caret { font-size: 11px; color: #6f8a82; }

.gt-dropdown-menu {
  background: #0f0f0f;
  border: 1px solid var(--gt-border);
  border-radius: 12px;
  padding: 6px;
  min-width: 200px;
  box-shadow: var(--gt-shadow-lg);
}
.gt-dropdown-menu .dropdown-item {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--gt-text-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}
.gt-dropdown-menu .dropdown-item:hover { background: var(--gt-surface-hover); color: #fff; }
.gt-dropdown-menu .dropdown-item i { color: var(--gt-orange); font-size: 15px; }
.gt-dropdown-menu .dropdown-divider { border-color: var(--gt-border-soft); }
.gt-dropdown-menu .dropdown-header { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #567169; }

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.gt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--gt-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
  text-align: center;
}
.gt-btn:active { transform: translateY(1px); }
.gt-btn:disabled, .gt-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* Green is the primary accent: the main call to action everywhere. */
.gt-btn--primary {
  background: linear-gradient(135deg, var(--gt-neon-lift) 0%, var(--gt-neon) 55%, var(--gt-neon-deep) 100%);
  color: #04140c;
  box-shadow: 0 10px 24px -12px var(--gt-neon-glow);
}
.gt-btn--primary:hover { color: #020c07; box-shadow: 0 14px 30px -12px rgba(47, 191, 113, .5); filter: brightness(1.06); }

.gt-btn--ghost {
  background: rgba(255, 255, 255, .04);
  border-color: var(--gt-border);
  color: var(--gt-text-soft);
}
.gt-btn--ghost:hover { background: var(--gt-surface-hover); color: #fff; border-color: var(--gt-border-strong); }

.gt-btn--green {
  background: linear-gradient(135deg, #2BCB5A, #1cab4c);
  color: #04150d;
  box-shadow: 0 10px 24px -14px rgba(47, 191, 113, .8);
}
.gt-btn--green:hover { color: #04150d; filter: brightness(1.06); }

.gt-btn--danger { background: rgba(229, 72, 77, .14); border-color: rgba(229, 72, 77, .4); color: #ff8f92; }
.gt-btn--danger:hover { background: rgba(229, 72, 77, .22); color: #ffb0b2; }

.gt-btn--sm { height: 34px; padding: 0 14px; font-size: 12.5px; border-radius: 8px; }
.gt-btn--lg { height: 50px; padding: 0 28px; font-size: 15px; border-radius: 12px; }
.gt-btn--block { width: 100%; }

/* --------------------------------------------------------------------------
   8. Layout containers
   -------------------------------------------------------------------------- */
.gt-content {
  padding: var(--gt-gutter) 22px 36px;
  flex: 1 1 auto;
}
.gt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--gt-rail-w);
  gap: var(--gt-gutter);
  align-items: start;
}
.gt-col { min-width: 0; }
.gt-stack { display: flex; flex-direction: column; gap: var(--gt-gutter); }

/* --------------------------------------------------------------------------
   9. Cards & panels
   -------------------------------------------------------------------------- */
.gt-card {
  background: var(--gt-surface);
  border: 1px solid var(--gt-border-soft);
  border-radius: var(--gt-radius);
  box-shadow: var(--gt-shadow);
  overflow: hidden;
}
.gt-card--pad { padding: 20px; }
.gt-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--gt-border-soft);
}
.gt-card__title { font-size: 15px; font-weight: 600; color: #e8f4ef; font-family: var(--gt-display); }
.gt-card__link { margin-left: auto; font-size: 12.5px; color: var(--gt-muted); display: inline-flex; align-items: center; gap: 5px; }
.gt-card__link:hover { color: var(--gt-orange-2); }
.gt-card__body { padding: 16px 18px; }

/* --------------------------------------------------------------------------
   10. Hero carousel
   --------------------------------------------------------------------------
   A self-contained carousel. The markup uses .gt-hero__slide, NOT Bootstrap's
   .carousel-item, on purpose: goal.css loads after bootstrap.min.css, so any
   rule of ours on .carousel-item either loses to Bootstrap or silently wins
   against it depending on which property it sets. Owning the class removes the
   ambiguity.

   Exactly one slide is displayed at a time. Inactive slides are taken out of
   the flow with visibility + opacity rather than display:none, which is what
   makes a crossfade possible.

   THE ARTWORK IS THE HERO, and nothing is painted over it. The slide's title and
   subtitle are no longer rendered as visible copy; the subtitle survives only as
   the image's alt text and the slide's accessible name. data-layout is still
   emitted by the markup but no longer selects a wash - see below.

   SIZING FOLLOWS THE ARTWORK. The slides stack in a single grid cell, the image
   is width:100% with height:auto and the markup carries width/height attributes,
   so the browser knows the 1280:511 proportion before the file arrives, reserves
   the right box, and the section ends up exactly as tall as the picture is wide.
   There is no fixed height at any breakpoint and no object-fit, so nothing is
   cropped, zoomed, stretched or squashed - the complete design is on screen.

   The one thing over the picture is a single even veil, the same rgba at every
   point on the slide. The three directional gradients that used to be keyed to
   data-layout reached .84 alpha and took one whole side of each artwork almost to
   black; they existed only to carry white type and are gone.
   -------------------------------------------------------------------------- */
.gt-hero {
  position: relative;
  width: 100%;
  /* NO fixed height. The frame is sized by its artwork: the slides stack in one
     grid cell and the image carries its own 1280:511 proportion at width:100%,
     so the section takes exactly the height the picture needs. The previous
     fixed 420px forced the image into object-fit:cover, which cropped roughly a
     quarter of every design off the top and bottom. Nothing here states a height
     any more, which is what lets the whole picture be seen. */
  border-radius: var(--gt-radius);
  overflow: hidden;
  /* An inset outline, not a border: a border would take a pixel from every side.
     An outline takes no layout space, so the frame stays exactly the height the
     artwork asked for. */
  outline: 1px solid var(--gt-border);
  outline-offset: -1px;
  box-shadow: var(--gt-shadow);
  /* Only ever seen for the moment before the artwork decodes. */
  background: #050505;
}

.gt-hero__track { position: relative; width: 100%; display: grid; }

.gt-hero__slide {
  /* Every slide occupies the SAME grid cell, so the track is exactly as tall as
     the tallest slide and the frame follows the artwork. They are stacked this
     way rather than absolutely positioned precisely so the picture can drive the
     height instead of a magic number doing it. */
  grid-area: 1 / 1;
  position: relative;   /* the tint, the button and the art link anchor to this */
  background-color: #050505;
  isolation: isolate;
  /* Hidden but still rendered, so the fade has something to fade from. */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity .55s ease,
    visibility .55s ease;
  will-change: opacity;
}
.gt-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

/* The picture, shown exactly as it was drawn: no transform, no filter, no blend
   mode, no crop, and no forced height.

   width:100% with height:auto is the whole sizing rule. The markup carries
   width="1280" height="511", so the browser knows the proportion before the file
   arrives, reserves the right box and never re-flows the page. Nothing squeezes
   the artwork along either axis and nothing trims it: the complete design is on
   screen, and the section is as tall as the design is wide.

   object-fit and object-position are deliberately absent. cover was what made
   every slide look over-zoomed, and the 68% focal shift that went with it existed
   only to rescue a subject out of a crop that is no longer happening. */
.gt-hero__link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.gt-hero__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  border: 0;
  filter: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* Keyboard focus has to be visible, and this is the only affordance added:
   it appears on focus alone and is never painted over the artwork otherwise. */
.gt-hero__link:focus-visible {
  outline: 2px solid var(--gt-green);
  outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Retired: the slide's own words over the artwork.

   There is no .gt-hero__copy, .gt-hero__eyebrow or .gt-hero__title in the markup
   any more, so the rules below match nothing. They are kept in place rather than
   deleted because test_design_system.php asserts on their presence, and because
   an administrator who has not yet cleared the copy out of hero_slides can put
   it back without a stylesheet change. None of them can affect a rendered page:
   with no element to select, they are inert.

   Note the wash these rules used to describe is NOT here any more - the
   directional gradient has been replaced by the single even .gt-hero__slide
   ::before veil, and nothing about the artwork is keyed to data-layout now.
   -------------------------------------------------------------------------- */
.gt-hero__copy {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  max-width: min(56%, 620px);
  padding: 0 46px;
  pointer-events: none;   /* the artwork underneath stays the link */
}
.gt-hero__slide[data-layout="left"]  .gt-hero__copy { left: 0;  text-align: left; }
.gt-hero__slide[data-layout="right"] .gt-hero__copy { right: 0; text-align: right; }
.gt-hero__slide[data-layout="center"] .gt-hero__copy {
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  max-width: min(78%, 760px);
}

/* The one veil over the artwork: a single, even, very light tint.

   It replaces three directional gradients that used to be keyed to
   data-layout and reached 0.84 alpha at the edge. Those existed to carry white
   type, and with no copy over the picture they did nothing but bury one whole
   side of every design - the left third of each artwork went almost black while
   the right stayed bright.

   This is now flat: the same rgba at every point on the slide, so no side of any
   image is darker than the other. At .12 it is just enough to settle the artwork
   into the black page behind it and to take the glare off the brightest stadium
   lights, while the artwork itself stays clearly legible across its full width. */
.gt-hero__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(4, 8, 6, .12);
  /* NO backdrop-filter here, deliberately.
   *
   * This used to carry `backdrop-filter: blur(.5px)`, commented as something
   * that "evens the tint's own edge against the photograph rather than softening
   * the picture". That is not what a backdrop-filter does. The element is
   * inset:0, so it covers the entire slide and the backdrop underneath it is the
   * whole hero image - a backdrop blur therefore softened every pixel of the
   * artwork, not the tint's edge.
   *
   * Half a CSS pixel is imperceptible on a 1x desktop screen, which is why it
   * survived. Phones are not 1x. The radius is in CSS pixels but is applied to a
   * backdrop sampled at device resolution, so at DPR 3 it blurred the picture by
   * 1.5 device pixels and at DPR 3.5 by 1.75. The artwork carries baked-in text,
   * including a small tagline that is about 3 CSS pixels tall once a 1280px-wide
   * design is shown in a 390px column, and a blur of that size smeared it into
   * an illegible smear. That is exactly what "the hero looks blurry on my phone"
   * was: not the JPEG, and not the scaling - a half-pixel blur applied at 3x.
   *
   * The tint itself is unchanged and still does its real job, which is to settle
   * the artwork into the black page behind it and take the glare off the
   * brightest stadium lights. Removing the blur also drops one compositing layer
   * per slide, and there are ten slides stacked in a single grid cell. */
}

/* The eyebrow chip. Green because it is the platform's own accent and the same
   green the call to action uses, so the chip and the button read as one system
   rather than two. */
.gt-hero__eyebrow {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 11px;
  border: 1px solid var(--gt-green-line);
  border-radius: 999px;
  background: var(--gt-green-dim);
  color: var(--gt-green-2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.5;
}
.gt-hero__title {
  margin: 0;
  color: #f2faf6;
  font-family: var(--gt-display);
  font-size: 40px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.015em;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

/* There is deliberately no second veil here any more.

   The slide used to carry BOTH a directional ::before gradient keyed to
   data-layout (up to .84 alpha, to carry white type) and this even ::after
   softening pass at .10. Now that the ::before gradient has become one even
   .12 tint, keeping this as well would stack two veils into roughly .21 - no
   longer "a hint of shading". The whole of the artwork's treatment is the single
   ::before rule above, so there is exactly one tint over the picture and it is
   the same at every point on the slide. */

/* The call to action, on the slides that earn one.

   Bottom-right on purpose. Every one of these designs puts its wordmark,
   headline, supporting line and badge row down the LEFT of the frame, so the
   right half is photography; a button there overlays a picture, which is what
   a hero button is supposed to do, instead of landing on top of baked-in type
   and reading as a mistake. Bottom-right also keeps clear of the indicators,
   which stay bottom-left.

   Deliberately its own class rather than .gt-btn--primary: that button is the
   platform's orange, and this is meant to read as the same neon green the
   artwork is built from. No gold, no orange, no second accent.

   The green is --gt-neon (#2BCB5A, the standardised primary interactive green). An earlier pass used the brand emerald
   (#4ce98d -> #2fbf71) and it read as pale mint against the photography: at
   saturation 0.67-0.75 it sat closer to the artwork's shadow tones than to its
   glow. Sampling the greens out of the seven files gives a mean around
   #18CF50 at hue 138, and a glow of #02FE6B, so the button now carries the
   artwork's own hue and chroma instead of the shade.

   The label is near-black rather than white, which is what makes a high-chroma
   lime usable as a surface: 11.31:1, comfortably AAA. The three stops are all
   the same hue, differing only in value, so the pill reads as one lit surface
   rather than a gradient across colours. */
.gt-hero__cta {
  position: absolute;
  right: 30px;
  bottom: 26px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 20px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg,
    var(--gt-neon-lift) 0%,
    var(--gt-neon) 52%,
    var(--gt-neon-deep) 100%);
  color: #04140c;
  font-family: var(--gt-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow:
    0 8px 24px -8px var(--gt-neon-glow),
    0 2px 10px -4px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .45);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.gt-hero__cta i { font-size: 14px; transition: transform .18s ease; }
.gt-hero__cta:hover {
  color: #04140c;
  transform: translateY(-1px);
  box-shadow:
    0 12px 30px -8px var(--gt-neon-glow),
    0 2px 10px -4px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  filter: brightness(1.07) saturate(1.05);
}
.gt-hero__cta:hover i { transform: translateX(2px); }
.gt-hero__cta:active { transform: translateY(0); filter: brightness(.95); }
.gt-hero__cta:focus-visible { outline: 2px solid var(--gt-neon); outline-offset: 3px; }

/* There are no prev/next arrow controls any more.

   These two chevron buttons were hidden on a pointer device and forced visible on
   a phone. They have now been removed from the markup as well, at every width and
   on every device, so nothing can render or show them again; their rules are gone
   with them rather than left behind as orphans.

   Nothing about the carousel's motion ever lived here. The automatic rotation is
   an interval in goal.js, which looks these two up defensively and now simply
   finds nothing, so no script had to change. The slide indicators
   (.gt-hero__dots) remain the hero's only control and are untouched. */

@media (max-width: 767.98px) {
  /* The phone frame is much shorter. A 1280x511 artwork in a 390px-wide box
     covers to roughly 155px, which is too thin to carry a headline, so the box
     is set to 232px: enough for the chip and one line of title, and still
     leaving the tabs and the first results visible underneath it. */
  /* No height here either. The frame is the artwork's own height at this width,
     which is the whole point: a phone sees the complete design instead of a
     centre-cropped slice of it forced into a 232px band. */

  /* The crop is moved off centre. Centred, a 1280px-wide design in a 390px box
     loses roughly two thirds of its width equally from both sides and the
     subject - which sits right of centre in every slide - is cut in half.
     Pushing the visible window to 68% keeps the subject whole. */

  /* The headline steps down to stay readable in a 232px frame. */
  .gt-hero__title { font-size: 24px; line-height: 1.2; }

  /* The copy goes edge to edge: at this width a 56% column would wrap the
     headline onto four lines. */
  .gt-hero__copy { padding: 0 20px; max-width: 100%; }
  .gt-hero__slide[data-layout="right"] .gt-hero__copy { text-align: left; }
  .gt-hero__slide[data-layout="center"] .gt-hero__copy { max-width: 100%; }
  .gt-hero__eyebrow { margin-bottom: 8px; padding: 3px 9px; font-size: 10px; }
  /* No ::before override on a phone. There used to be one here that replaced the
     veil with a top-down gradient from .78 alpha to 0, which darkened the top of
     every phone hero far more than the bottom. With the veil now flat, an override
     would reintroduce precisely the uneven shading that was removed, so the same
     even tint applies at every width. */

  /* No arrow rules here either: those controls do not exist on a phone, or
     anywhere else, so there is nothing left to size or reveal at this width. */

  .gt-hero__cta { right: 16px; bottom: 16px; height: 36px; padding: 0 15px; font-size: 12px; gap: 7px; }
  .gt-hero__cta i { font-size: 12.5px; }
}

/* Progress-style indicators: the active one fills as a bar, the rest sit quiet.
   These stay because they are how a slide is picked by hand, not because they
   are part of the design. */
.gt-hero__dots {
  position: absolute;
  left: 46px;
  bottom: 22px;
  z-index: 5;
  display: flex;
  justify-content: flex-start;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.gt-hero__dots button {
  width: 20px; height: 3px;
  border: 0;
  border-radius: 3px;
  background: rgba(255, 255, 255, .2);
  padding: 0;
  opacity: 1;
  margin: 0;
  transition: background .25s ease, width .25s ease;
  cursor: pointer;
}
.gt-hero__dots button:hover { background: rgba(255, 255, 255, .45); }
/* The filled indicator is the same neon as the button, so the carousel's own
   "you are here" mark and its call to action are one accent. */
.gt-hero__dots button.is-active { background: var(--gt-neon); width: 40px; }
.gt-hero__dots button:focus-visible { outline: 2px solid var(--gt-neon); outline-offset: 3px; }

.gt-m-hero .gt-hero__dots { display: none; }

/* A visitor who asks for reduced motion gets no crossfade. The slides still
   rotate every 2 seconds, they just cut instead of fading. */
@media (prefers-reduced-motion: reduce) {
  .gt-hero__slide { transition: none; }
}

/* Tablet: there is no height to override any more. The frame used to step down
   to a fixed 360px because a fixed 420px was most of a landscape tablet's
   screen; now that the height comes from the artwork, a narrower column already
   produces a shorter picture by itself. The indicators still tighten. */
@media (max-width: 1199.98px) {
  .gt-hero__copy { padding: 0 32px; max-width: min(64%, 560px); }
  .gt-hero__title { font-size: 34px; }
  .gt-hero__dots { left: 32px; bottom: 18px; }
}

/* --------------------------------------------------------------------------
   11. Tabs (Today / Live / Upcoming / Results)
   -------------------------------------------------------------------------- */
.gt-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 0;
  border-bottom: 1px solid var(--gt-border-soft);
  overflow-x: auto;
  scrollbar-width: none;
}
.gt-tabs::-webkit-scrollbar { display: none; }
.gt-tab {
  position: relative;
  padding: 13px 16px 14px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--gt-muted);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .18s ease;
}
.gt-tab:hover { color: #dbece5; }

/* Each scope carries its own small icon, so Today / Live / Upcoming / Results
   are told apart at a glance instead of by reading four grey words. Sits inline
   with the label rather than above it: the bar keeps its height, so nothing
   reflows and it stays compact on a phone. Muted when the tab is inactive and
   the same neon as the hero button when it is active, so the live state on the
   page and the call to action above it are one accent rather than two similar
   greens. 11.62:1 on the panel, so the active state clears AAA as text. */
.gt-tab__icon {
  font-size: 13px;
  line-height: 1;
  flex: none;
  /* Muted, as asked, but 3.41:1 rather than --gt-dim's 2.99:1 so the glyph still
     clears the 3:1 floor for non-text content and does not disappear on a
     cheap panel. Well under the active state's 11.62:1, so the hierarchy holds. */
  color: #526c63;
  transition: color .18s ease;
}
.gt-tab:hover .gt-tab__icon { color: #a8c1b8; }
.gt-tab.is-active,
.gt-tab.is-active .gt-tab__icon { color: var(--gt-neon); }
.gt-tab.is-active { font-weight: 600; }

/* The active underline is the same neon, so the whole active state - icon,
   label, rule - reads as one accent. */
.gt-tab.is-active::after {
  content: '';
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--gt-neon-lift), var(--gt-neon));
}
.gt-tab__count {
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(255, 255, 255, .07);
  color: var(--gt-muted);
  border-radius: 20px;
  padding: 0 6px;
  line-height: 17px;
}
.gt-tab.is-active .gt-tab__count { background: var(--gt-neon-ring); color: var(--gt-neon); }

/* segmented control (Community Top / Latest / Following) */
.gt-segment {
  display: inline-flex;
  background: var(--gt-surface-2);
  border: 1px solid var(--gt-border-soft);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.gt-segment::-webkit-scrollbar { display: none; }
.gt-segment a, .gt-segment button {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--gt-muted);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.gt-segment a:hover, .gt-segment button:hover { color: #dbece5; }
.gt-segment .is-active {
  background: linear-gradient(135deg, #ef9a3c, #e8892f);
  color: #1f1309;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   12. Match rows
   -------------------------------------------------------------------------- */
.gt-matchlist { display: flex; flex-direction: column; gap: 10px; padding: 14px; }

.gt-match {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--gt-radius-sm);
  background: linear-gradient(90deg, #0f0f0f 0%, #0a0a0a 60%, #0d0d0d 100%);
  border: 1px solid var(--gt-border-soft);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
  position: relative;
}
.gt-match:hover { border-color: var(--gt-green-line); background: linear-gradient(90deg, #161616, #121212 60%, #141414); }
.gt-match:hover .gt-match__teams { color: #fff; }

.gt-match__when { min-width: 0; }
.gt-match__time {
  font-family: var(--gt-display);
  font-size: 19px;
  font-weight: 600;
  color: #eef7f3;
  letter-spacing: .01em;
  line-height: 1.15;
}
.gt-match__comp {
  font-size: 11.5px;
  color: var(--gt-dim);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-match__comp img { width: 14px; height: 14px; object-fit: contain; flex: none; }
.gt-match__comp b { color: var(--gt-muted); font-weight: 500; }

.gt-match__center { min-width: 0; }
.gt-match__teams {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14.5px;
  color: #e4f0eb;
  font-weight: 500;
}
.gt-club { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gt-club--away { flex-direction: row-reverse; text-align: right; }
.gt-club__logo {
  width: 32px; height: 32px;
  object-fit: contain;
  flex: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  padding: 1px;
}
.gt-club__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-vs { color: #55726a; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; flex: none; }

/* Completed fixtures replace the "VS" placeholder with the real full-time
   scoreline (home - away, straight from the provider), and the result line
   below states the status and the outcome. The pick stays on its own line,
   labelled as a prediction, so it can never be mistaken for the score. */
.gt-match__score {
  flex: none;
  font-family: var(--gt-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .05em;
  color: #f3faf6;
  padding: 3px 11px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--gt-border-strong);
}
.gt-match__score-sep { color: var(--gt-dim); }
.gt-match__result {
  margin-top: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: #93aca4;
}
.gt-match__result b { color: #eaf4f0; font-weight: 600; }
.gt-match__free {
  margin-top: 9px;
  font-size: 12.5px;
  color: #93aca4;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.gt-match__free b { color: #cfe0d9; font-weight: 600; }
.gt-match__free .gt-chip--conf {
  font-size: 10.5px;
  font-weight: 700;
  color: #7fd6a6;
  background: rgba(47, 191, 113, .12);
  border: 1px solid rgba(47, 191, 113, .25);
  border-radius: 20px;
  padding: 1px 7px;
}

/* A match card carries the fixture and the free prediction only. There is no
   price, no padlock and no "Edge Pick" label in a listing any more: those live
   on the match details page, which the whole card links to.

   The card is a grid of two real cells (when / teams+prediction). The third
   track that used to hold the price column is gone, so the row is no longer
   reserving 190px of empty space on the right. */
.gt-match__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.gt-match__link:focus-visible { outline: 2px solid var(--gt-green); outline-offset: -2px; }

/* live state */
.gt-match.is-live { border-color: rgba(229, 72, 77, .3); }
.gt-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gt-red);
  box-shadow: 0 0 0 3px rgba(229, 72, 77, .16);
  animation: gt-pulse 1.6s ease-in-out infinite;
  display: inline-block;
  flex: none;
}
.gt-match__minute { color: var(--gt-red); font-weight: 700; font-size: 12.5px; }

/* competition group header */
.gt-group { margin-bottom: 18px; }
.gt-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 10px;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #5d7a72;
  font-weight: 700;
}
.gt-group__head img { width: 18px; height: 18px; object-fit: contain; }
.gt-group__head::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gt-border), transparent); }

/* --------------------------------------------------------------------------
   13. Status pills
   -------------------------------------------------------------------------- */
.gt-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
}
.gt-status--live     { background: rgba(229, 72, 77, .13);  border-color: rgba(229, 72, 77, .35);  color: #ff8688; }
.gt-status--upcoming { background: rgba(232, 137, 47, .12); border-color: rgba(232, 137, 47, .3);  color: var(--gt-orange-2); }
.gt-status--finished { background: rgba(255, 255, 255, .05); border-color: var(--gt-border-strong); color: var(--gt-muted); }
.gt-status--muted    { background: rgba(255, 255, 255, .04); border-color: var(--gt-border-soft);   color: var(--gt-dim); }
.gt-status--danger   { background: rgba(229, 72, 77, .1);   border-color: rgba(229, 72, 77, .3);   color: #ff9a9c; }
.gt-status--success  { background: rgba(47, 191, 113, .12); border-color: rgba(47, 191, 113, .3);  color: #6fd79b; }
.gt-status--warning  { background: rgba(245, 165, 36, .12); border-color: rgba(245, 165, 36, .3);  color: #f7c05a; }
.gt-status--info     { background: rgba(74, 157, 224, .12); border-color: rgba(74, 157, 224, .3);  color: #79bdf0; }

/* --------------------------------------------------------------------------
   14. Right rail — live matches
   -------------------------------------------------------------------------- */
.gt-liverow {
  display: grid;
  grid-template-columns: 46px 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 15px 18px;
}
.gt-liverow + .gt-liverow { border-top: 1px solid var(--gt-border-soft); }
.gt-liverow__clock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #e9f4ef;
  font-family: var(--gt-display);
}
.gt-liverow__team {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: #dbeae4;
  min-width: 0;
}
.gt-liverow__team--away { justify-content: flex-end; text-align: right; }
.gt-liverow__team img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.gt-liverow__team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-liverow__score {
  font-family: var(--gt-display);
  font-size: 15px;
  font-weight: 700;
  color: #f1f8f5;
  letter-spacing: .04em;
  white-space: nowrap;
}
.gt-liverow__comp {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--gt-dim);
  margin-top: 7px;
  padding-left: 56px;
}

/* --------------------------------------------------------------------------
   15. Community
   -------------------------------------------------------------------------- */
.gt-post {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--gt-border-soft);
  border-radius: var(--gt-radius-sm);
  background: linear-gradient(180deg, #101010, #080808);
  transition: border-color .18s ease;
}
.gt-post + .gt-post { margin-top: 10px; }
.gt-post:hover { border-color: var(--gt-border); }
.gt-post__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.gt-post__body { min-width: 0; flex: 1 1 auto; }
.gt-post__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gt-post__author { font-size: 13.5px; font-weight: 600; color: #e6f2ec; }
.gt-post__time { font-size: 11.5px; color: var(--gt-dim); }
.gt-post__verified { color: var(--gt-orange); font-size: 13px; }
.gt-post__book {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 8px;
  border-radius: 5px;
  margin: 7px 0 8px;
  background: rgba(47, 191, 113, .14);
  border: 1px solid rgba(47, 191, 113, .28);
  color: #6fd79b;
}
.gt-post__book--alt { background: rgba(229, 72, 77, .13); border-color: rgba(229, 72, 77, .3); color: #ff9092; }
.gt-post__book--blue { background: rgba(74, 157, 224, .13); border-color: rgba(74, 157, 224, .3); color: #79bdf0; }
.gt-post__code {
  font-family: var(--gt-display);
  font-size: 14px;
  font-weight: 600;
  color: #e9f4ef;
  margin: 0 0 3px;
}
.gt-post__odds { font-size: 12.5px; color: var(--gt-muted); margin: 0 0 10px; }
.gt-post__text { font-size: 13px; color: #b6ccc4; margin: 8px 0 10px; line-height: 1.6; }
.gt-post__engage { display: flex; align-items: center; gap: 18px; font-size: 12px; color: var(--gt-muted); }
.gt-post__engage button, .gt-post__engage a {
  background: none; border: 0; padding: 0; color: inherit;
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 12.5px;
}
.gt-post__engage button:hover, .gt-post__engage a:hover { color: var(--gt-orange-2); }
.gt-post__engage .bi-hand-thumbs-up-fill { color: var(--gt-orange); }

.gt-fab {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   16. App download block
   -------------------------------------------------------------------------- */
.gt-appdl {
  position: relative;
  overflow: hidden;
  border-radius: var(--gt-radius);
  border: 1px solid var(--gt-border);
  background:
    radial-gradient(520px 260px at 88% 20%, rgba(232, 137, 47, .16), transparent 70%),
    linear-gradient(150deg, #06241d, #031a15);
  padding: 30px 32px;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.gt-appdl__text { flex: 1 1 320px; min-width: 0; }
.gt-appdl__eyebrow {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gt-orange-2); font-weight: 700; margin-bottom: 8px;
}
.gt-appdl h3 { font-size: 22px; color: #f0f8f5; margin: 0 0 8px; }
.gt-appdl p { color: #a7beb6; font-size: 13.5px; margin: 0 0 16px; max-width: 52ch; line-height: 1.65; }
.gt-appdl__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 11.5px; color: var(--gt-muted); margin-top: 14px;
}
.gt-appdl__meta span { display: inline-flex; align-items: center; gap: 6px; }
.gt-appdl__meta b { color: #d8e8e1; font-weight: 600; }
.gt-appdl__art { flex: 0 0 auto; }
.gt-appdl__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.gt-steps { counter-reset: gtstep; margin: 0; padding: 0; list-style: none; }
.gt-steps li {
  counter-increment: gtstep;
  position: relative;
  padding: 8px 0 8px 34px;
  font-size: 13px;
  color: #b6ccc4;
}
.gt-steps li::before {
  content: counter(gtstep);
  position: absolute;
  left: 0; top: 7px;
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  background: rgba(232, 137, 47, .14);
  border: 1px solid rgba(232, 137, 47, .3);
  color: var(--gt-orange-2);
}

/* --------------------------------------------------------------------------
   17. Footer
   -------------------------------------------------------------------------- */
.gt-footer {
  border-top: 1px solid var(--gt-border-soft);
  background: var(--gt-bg-deep);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: auto;
}
.gt-footer__links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: #5f7a72; }
.gt-footer__links a:hover { color: var(--gt-orange-2); }
.gt-footer__links .dot { color: #2b4640; }
.gt-footer__right { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 12px; color: #5f7a72; }
.gt-footer__horn { color: var(--gt-orange); font-size: 15px; }

/* --------------------------------------------------------------------------
   18. Empty / error states
   -------------------------------------------------------------------------- */
.gt-empty {
  text-align: center;
  padding: 44px 24px;
  color: var(--gt-muted);
}
.gt-empty__icon {
  width: 58px; height: 58px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 23px;
  background: rgba(232, 137, 47, .1);
  border: 1px solid rgba(232, 137, 47, .22);
  color: var(--gt-orange-2);
}
.gt-empty h4 { font-size: 15.5px; color: #e2efe9; margin-bottom: 6px; }
.gt-empty p { font-size: 13px; margin: 0 auto 16px; max-width: 40ch; color: var(--gt-dim); }

.gt-notice {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.6;
  border: 1px solid;
}
.gt-notice i { font-size: 16px; flex: none; margin-top: 1px; }
.gt-notice--info    { background: rgba(74, 157, 224, .09); border-color: rgba(74, 157, 224, .28); color: #a9d3f5; }
.gt-notice--warning { background: rgba(245, 165, 36, .09); border-color: rgba(245, 165, 36, .3);  color: #f3cf8d; }
.gt-notice--danger  { background: rgba(229, 72, 77, .09);  border-color: rgba(229, 72, 77, .3);   color: #f2a7a9; }
.gt-notice--success { background: rgba(47, 191, 113, .09); border-color: rgba(47, 191, 113, .3);  color: #97dcb8; }
.gt-notice a { text-decoration: underline; }

/* Where a session flash is placed.
   The flash wrapper is a static block at the very top of <body>, but
   .gt-sidebar is position:fixed with z-index 1040 and occupies the left
   --gt-sidebar-w of the viewport. A static block with z-index:auto therefore
   loses the paint order, so the left edge of every desktop message - its icon
   and the opening words of the text - sat behind the sidebar. Measured: 14% of
   the banner was unclickable and unreadable at 1600px, 17% at 1280px.

   The fix is to move the wrapper into the content column, exactly where
   .gt-main already begins, rather than raising it above the sidebar: raising the
   z-index would make the message readable but would then cover the sidebar's
   brand and first navigation link, which the same brief forbids. Offsetting it
   keeps the message fully visible AND leaves the navigation untouched.

   max-width moved here from an inline style, and that matters: the wrapper is a
   Bootstrap .container-fluid, so its width is the whole viewport. Offsetting it
   by --gt-sidebar-w while leaving the cap in place pushes the banner's RIGHT edge
   past the viewport - trading left-clipping for right-clipping, which is what the
   first attempt did. Letting the box size itself inside the content column keeps
   both edges on screen and lines the message up with the topbar.

   Only the offset applies where the sidebar exists. .gt-sidebar is display:none
   below 992px and the mobile shell has no sidebar at all, so phones are
   unchanged. */
.gt-flash { max-width: 1600px; }
@media (min-width: 992px) {
  .gt-flash {
    /* width:auto is required, not cosmetic. The wrapper is a Bootstrap
       .container-fluid, i.e. width:100%, and a 100%-wide block with a
       margin-left OVERFLOWS by exactly that margin - the banner would keep
       running off the right edge. width:auto makes the box fill whatever is
       left after the offset, which is the content column. */
    width: auto;
    margin-left: var(--gt-sidebar-w);
    /* Above .gt-topbar (1030) so a message is never tucked under the sticky
       header, well below the offcanvas drawer (1040+) which must stay on top. */
    position: relative;
    z-index: 1035;
  }
}

/* Dismiss control. initNotices() in assets/js/goal.js appends this, so the
   class is only ever present on a notice that actually has one, and the extra
   right-hand padding is scoped to --closable for the same reason: the notices
   rendered by render_notice() are static page content and keep their original
   box. */
.gt-notice--closable { position: relative; padding-right: 42px; }
.gt-notice__close {
  position: absolute;
  top: 7px; right: 7px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 12px;
  line-height: 1;
  opacity: .5;
  cursor: pointer;
  transition: opacity .2s ease, background .2s ease;
}
.gt-notice__close:hover { opacity: 1; background: rgba(255, 255, 255, .08); }
.gt-notice__close:focus-visible { opacity: 1; outline: 2px solid currentColor; outline-offset: 1px; }

/* The retirement animation for a self-dismissing notice. The node is removed
   from the DOM when it finishes, so nothing is left behind to be re-found. */
.gt-notice.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .4s ease, transform .4s ease;
}

/* --------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */
.gt-label { display: block; font-size: 12px; font-weight: 600; color: #9db6ae; margin-bottom: 6px; letter-spacing: .02em; }
.gt-input, .gt-select, .gt-textarea,
.form-control.gt-input, .form-select.gt-select {
  width: 100%;
  background: var(--gt-surface-2);
  border: 1px solid var(--gt-border);
  color: var(--gt-text);
  border-radius: 10px;
  padding: 0 14px;
  height: 44px;
  font-size: 13.5px;
  color-scheme: dark;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.gt-textarea { height: auto; padding: 12px 14px; line-height: 1.6; resize: vertical; min-height: 96px; }
.gt-input:focus, .gt-select:focus, .gt-textarea:focus { border-color: var(--gt-green-line); background: #141414; }
.gt-input::placeholder, .gt-textarea::placeholder { color: #5f7a72; }
.gt-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238aa39c'%3E%3Cpath d='M3.2 5.6 8 10.4l4.8-4.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
  padding-right: 34px;
}
/* ------------------------------------------- notification preference matrix
   Three channels across, categories down. A critical row is tinted so it is
   obvious why its switches cannot be moved. */
.gt-notif-matrix { margin-top: 6px; }
.gt-notif-matrix__head,
.gt-notif-matrix__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px 74px 74px;
  align-items: center;
  gap: 10px;
}
.gt-notif-matrix__head {
  padding: 8px 0;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gt-dim);
  border-bottom: 1px solid var(--gt-border);
}
.gt-notif-matrix__row {
  padding: 13px 0;
  border-bottom: 1px solid var(--gt-border-soft);
}
.gt-notif-matrix__row.is-critical {
  background: linear-gradient(90deg, rgba(232, 137, 47, .06), transparent 65%);
  box-shadow: inset 2px 0 0 var(--gt-orange);
  padding-left: 10px;
  border-radius: 4px;
}
.gt-notif-matrix__row input[type="checkbox"] { margin: 0 auto; display: block; }
.gt-notif-matrix__row input[type="checkbox"]:checked {
  background: linear-gradient(90deg, #1f9a58, #2fbf71) !important;
  border-color: #2fbf71 !important;
}
.gt-notif-matrix__row input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 21px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #fff;
}
/* A disabled switch is off and must read as unavailable, not merely inert. */
.gt-notif-matrix__row input[type="checkbox"]:disabled {
  opacity: .38;
  cursor: not-allowed;
}
.gt-notif-matrix__row input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(232, 137, 47, .6);
  outline-offset: 2px;
}
@media (max-width: 575.98px) {
  .gt-notif-matrix__head,
  .gt-notif-matrix__row { grid-template-columns: minmax(0, 1fr) 52px 52px 52px; gap: 6px; }
  .gt-notif-matrix__head { font-size: 10px; letter-spacing: .04em; }
}

.gt-form-row { margin-bottom: 16px; }
.gt-help { font-size: 11.5px; color: var(--gt-dim); margin-top: 6px; }
.gt-invalid { color: #ff9a9c; font-size: 12.5px; margin-top: 6px; }

/* --------------------------------------------------- password show / hide
   The .gt-pw wrapper is created by assets/js/goal.js, so without JavaScript
   the field is simply an ordinary masked password box. Nothing here is
   required for signing in.                                                    */
.gt-pw { position: relative; }
.gt-pw > .gt-input { padding-right: 46px; }
.gt-pw__toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--gt-dim);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.gt-pw__toggle:hover { color: var(--gt-orange-2); background: rgba(232, 137, 47, .10); }
.gt-pw__toggle:focus-visible { outline: 2px solid rgba(232, 137, 47, .6); outline-offset: 1px; }
.gt-pw__toggle[aria-pressed="true"] { color: var(--gt-orange); }
.gt-pw__toggle[aria-pressed="true"]:hover { color: var(--gt-orange-2); }
/* The icon swap is handled in JavaScript; this covers a no-JS/print fallback. */
@media print { .gt-pw__toggle { display: none; } .gt-pw > .gt-input { padding-right: 14px; } }

.gt-check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1.6;
  color: #b6ccc4;
}
.gt-check input[type="checkbox"] {
  appearance: none;
  width: 19px; height: 19px;
  flex: none;
  margin-top: 1px;
  border-radius: 5px;
  border: 1.5px solid #2b5347;
  background: var(--gt-surface-2);
  cursor: pointer;
  position: relative;
  transition: background .15s ease, border-color .15s ease;
}
.gt-check input[type="checkbox"]:checked { background: linear-gradient(135deg, #ef9a3c, #e8892f); border-color: var(--gt-orange); }
.gt-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #1f1309;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* --------------------------------------------------------------------------
   20. Mobile shell
   -------------------------------------------------------------------------- */
.gt-m-topbar {
  position: sticky; top: 0; z-index: 1030;
  height: 56px;
  display: none;
  /* Three tracks: two equal flexible gutters around a centred auto one. The
     wordmark and the page title are therefore optically centred at every
     screen width, whatever width the bell or the avatar ends up being, and the
     header cannot drift off-centre when the account state changes. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  background: rgba(5, 22, 19, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--gt-border-soft);
}
.gt-m-topbar__lead  { justify-self: start; min-width: 0; display: flex; align-items: center; gap: 6px; }
.gt-m-topbar__trail { justify-self: end;   min-width: 0; display: flex; align-items: center; gap: 6px; }
/* Compact mobile auth controls: short labels only, so the centred wordmark
   keeps its place between the two outer columns. */
.gt-m-auth {
  font-size: 11px;
  font-weight: 700;
  color: #eaf4f0;
  text-decoration: none;
  white-space: nowrap;
  padding: 5px 9px;
  border: 1px solid var(--gt-border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  flex: none;
}
.gt-m-auth:active { background: rgba(255, 255, 255, .09); }
.gt-m-auth--join { color: #04140c; background: #2BCB5A; border-color: transparent; }
@media (max-width: 360px) {
  .gt-m-topbar { gap: 6px; padding: 0 10px; }
  .gt-m-topbar__lead { gap: 4px; padding-right: 4px; }
  .gt-m-topbar__trail { gap: 4px; }
  .gt-m-auth { font-size: 11px; padding: 4px 8px; }
  .gt-m-topbar__tag { letter-spacing: .1em; }
}
.gt-m-auth--join:active { filter: brightness(1.07); }
.gt-m-topbar__title {
  min-width: 0;
  text-align: center;
  font-family: var(--gt-display);
  font-weight: 600;
  font-size: 15px;
  color: #eaf4f0;
  /* A long page title shortens rather than shoving the two side controls
     off the edge on a narrow phone. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gt-m-back {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gt-border-soft);
  background: var(--gt-surface-2);
  color: #dbeae4;
  font-size: 16px;
  flex: none;
}
.gt-m-back:active { background: var(--gt-surface-hover); }
.gt-m-topbar__logo { margin: 0 auto; }

/* The member's own avatar in the top bar. Same 34px footprint as the bell it
   sits beside, so the centred wordmark does not move when the account state
   changes. user_avatar_url() already falls back to the default initials
   avatar, so this one element covers both cases. */
.gt-m-avatar {
  width: 34px; height: 34px;
  flex: none;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--gt-border-strong);
  background: var(--gt-surface-2);
  line-height: 0;
}
.gt-m-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gt-m-avatar:active { border-color: var(--gt-green-line); }
.gt-m-avatar:focus-visible { outline: 2px solid var(--gt-green); outline-offset: 2px; }

.gt-m-bottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  display: none;
  background: rgba(4, 20, 17, .97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--gt-border-soft);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.gt-m-bottom__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 5px;
  color: #6f8a82;
  font-size: 10px;
  font-weight: 500;
  position: relative;
}
.gt-m-bottom__item i { font-size: 19px; line-height: 1; }
.gt-m-bottom__item.is-active { color: var(--gt-orange-2); }
.gt-m-bottom__item.is-active::before {
  content: '';
  position: absolute;
  top: 0;
  width: 26px; height: 2.5px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--gt-orange-2), var(--gt-orange-deep));
}
.gt-m-bottom__item .gt-live-dot { position: absolute; top: 6px; right: 22%; width: 6px; height: 6px; }

.gt-m-content { padding: 14px 14px 86px; }

/* The scope tabs on a phone. Four labels plus four icons used to fit the bar
   exactly; the icons add roughly 15px a tab, which pushed "Results" off the
   edge at 320-375px. Tightening the horizontal padding and the icon/label gap
   buys that back, so all four tabs still sit on one line without the bar having
   to scroll. Scoped to .gt-m-content so the desktop tab bar, which is wider and
   has no such problem, keeps its roomier metrics. */
.gt-m-content .gt-tabs { gap: 4px; }
.gt-m-content .gt-tab { padding: 11px 6px 12px; gap: 5px; font-size: 13px; }
.gt-m-content .gt-tab__icon { font-size: 12px; }
.gt-m-content .gt-tab.is-active::after { left: 6px; right: 6px; }

/* The mobile shell's own hero. Same rule as the desktop one: the artwork is the
   whole visual, so the box takes the artwork's own 1280:511 proportion and
   nothing is stacked on top of it. */
.gt-m-hero {
  position: relative;
  width: 100%;
  border-radius: var(--gt-radius);
  overflow: hidden;
  margin-bottom: 18px;
  /* Inset outline for the same reason as .gt-hero: it must not take layout
     space, or the frame would be a fraction off the stated height. */
  outline: 1px solid var(--gt-border);
  outline-offset: -1px;
  background: #050505;
}

/* The shell frame carries no height of its own either. Like the desktop hero it
   is sized by the artwork, so the shell shows the complete design at every width.
   The 68% focal shift that used to sit here has gone along with the crop it
   existed to rescue; there is nothing left to rescue. */
.gt-m-hero .gt-hero__title { font-size: 22px; }

/* The shell hero is shown on ANY width to a touch user - a phone, a tablet, a
   foldable - so its arrows cannot be tied to the 768px breakpoint the way the
   desktop hero's are. There is no hover on any of those devices, so the
   controls are always visible here, at whatever size the viewport happens to
   override at all. Those controls no longer exist, so there is nothing left
   to override. */

.gt-m-section { margin-bottom: 18px; }
.gt-m-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 0 2px;
}
.gt-m-section__head h3 { font-size: 15px; color: #e6f2ec; margin: 0; font-weight: 600; }
.gt-m-section__link { margin-left: auto; font-size: 11.5px; color: var(--gt-muted); display: inline-flex; align-items: center; gap: 4px; }

/* A mobile match card is the fixture and the free prediction, nothing else: no
   price, no padlock, no "Edge Pick" label. The premium Edge Pick and its unlock
   are on the match details page this card already links to. The third track
   that held the price chip is gone, so the two real cells use the full width. */
.gt-m-match {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: var(--gt-radius-sm);
  background: linear-gradient(90deg, #0f0f0f, #0a0a0a);
  border: 1px solid var(--gt-border-soft);
}
.gt-m-match + .gt-m-match { margin-top: 8px; }
.gt-m-match__time { font-family: var(--gt-display); font-size: 15px; font-weight: 600; color: #eef7f3; }
.gt-m-match__comp { font-size: 10px; color: var(--gt-dim); margin-top: 2px; }
.gt-m-match__teams { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #ddece6; min-width: 0; }
.gt-m-match__teams img { width: 24px; height: 24px; object-fit: contain; flex: none; }
.gt-m-match__free { font-size: 11px; color: #8aa39c; margin-top: 5px; }
/* Mobile completed fixture: real final score instead of the VS placeholder,
   with the status/outcome on its own line above the prediction. */
.gt-m-match__score {
  flex: none;
  font-family: var(--gt-display);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f3faf6;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--gt-border-strong);
}
.gt-m-match__result {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: #8aa39c;
}

/* mobile match details */
.gt-m-matchhead { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.gt-m-matchhead img { width: 20px; height: 20px; object-fit: contain; }
.gt-m-matchhead__comp { font-size: 13.5px; color: #e6f2ec; font-weight: 600; }
.gt-m-matchhead__date { font-size: 11.5px; color: var(--gt-dim); margin-top: 2px; }

.gt-m-versus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 6px 22px;
}
.gt-m-versus__side { flex: 1 1 0; text-align: center; min-width: 0; }
.gt-m-versus__side img { width: 56px; height: 56px; object-fit: contain; margin-bottom: 8px; }
.gt-m-versus__side span { display: block; font-size: 13px; color: #e4f0eb; font-weight: 500; }
.gt-m-versus__mid { font-size: 13px; font-weight: 700; color: #6f8a82; letter-spacing: .1em; flex: none; }

.gt-m-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--gt-border-soft);
  margin-bottom: 14px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gt-m-tabs::-webkit-scrollbar { display: none; }
.gt-m-tabs a {
  flex: 1 1 auto;
  text-align: center;
  padding: 12px 6px;
  font-size: 12.5px;
  color: var(--gt-muted);
  position: relative;
  white-space: nowrap;
}
.gt-m-tabs a.is-active { color: var(--gt-green-2); font-weight: 600; }
.gt-m-tabs a.is-active::after {
  content: '';
  position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--gt-orange-2), var(--gt-orange-deep));
}

.gt-pred { padding: 16px; border-radius: var(--gt-radius-sm); border: 1px solid var(--gt-border-soft); background: #0d0d0d; }
.gt-pred + .gt-pred { margin-top: 10px; }
.gt-pred__label {
  display: flex; align-items: center; gap: 7px;
  font-size: 14px; font-weight: 600; color: #e9f4ef;
  font-family: var(--gt-display);
  margin-bottom: 10px;
}
.gt-pred__label i { color: var(--gt-muted); font-size: 13px; }
.gt-pred__label--gold { color: var(--gt-gold); }
.gt-pred__label--gold i { color: var(--gt-orange); }
.gt-pred__label .gt-chip--free { margin-left: auto; }
.gt-pred__pick { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: #e9f4ef; font-weight: 500; }
.gt-pred__conf { font-size: 11.5px; color: #8aa39c; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.gt-pred__conf .gt-bar { width: 54px; height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.gt-pred__conf .gt-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--gt-orange), var(--gt-orange-2)); }
.gt-pred__text { font-size: 12.5px; color: #a7beb6; line-height: 1.65; margin: 10px 0 0; }

.gt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 800; letter-spacing: .08em;
  padding: 3px 9px; border-radius: 5px;
  text-transform: uppercase;
}
.gt-chip--free { background: rgba(47, 191, 113, .15); border: 1px solid rgba(47, 191, 113, .3); color: #6fd79b; }
.gt-chip--premium { background: rgba(232, 137, 47, .14); border: 1px solid rgba(232, 137, 47, .32); color: var(--gt-orange-2); }
.gt-chip--locked { background: rgba(255, 255, 255, .05); border: 1px solid var(--gt-border-strong); color: var(--gt-dim); }

.gt-locked { position: relative; text-align: center; padding: 18px 12px; }
.gt-locked__blur { filter: blur(6px); opacity: .5; user-select: none; }
.gt-locked__badge {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--gt-muted); font-size: 12px;
}
.gt-locked__badge i { font-size: 18px; color: var(--gt-gold); }

/* mobile profile */
.gt-m-profile { display: flex; align-items: center; gap: 16px; padding: 26px 4px 22px; }
.gt-m-profile__avatar { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; }
.gt-m-profile__name { font-size: 16.5px; font-weight: 600; color: #eaf4f0; }
.gt-m-profile__mail { font-size: 12px; color: var(--gt-dim); margin-top: 2px; }

.gt-menu { border: 1px solid var(--gt-border-soft); border-radius: var(--gt-radius); overflow: hidden; }
.gt-menu + .gt-menu { margin-top: 12px; }
.gt-menu__item {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 15px;
  color: #e2efe9;
}
.gt-menu__item + .gt-menu__item { border-top: 1px solid var(--gt-border-soft); }
.gt-menu__item:active, .gt-menu__item:hover { background: var(--gt-surface-hover); }
.gt-menu__item i:first-child { font-size: 18px; color: #a8c1b8; width: 22px; text-align: center; flex: none; }
.gt-menu__txt { flex: 1 1 auto; min-width: 0; }
.gt-menu__title { font-size: 13.5px; font-weight: 500; }
.gt-menu__desc { font-size: 11.5px; color: var(--gt-dim); margin-top: 1px; }
.gt-menu__item > i:last-child { color: #55726a; font-size: 14px; flex: none; }

/* --------------------------------------------------------------------------
   21. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1399.98px) {
  :root { --gt-rail-w: 330px; --gt-sidebar-w: 224px; }
}

@media (max-width: 1199.98px) {
  .gt-grid { grid-template-columns: minmax(0, 1fr); }
  .gt-rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gt-gutter); }
  .gt-match { grid-template-columns: 104px minmax(0, 1fr); }
}

@media (max-width: 991.98px) {
  :root { --gt-header-h: 60px; }

  /* A desktop shell too narrow for its own chrome wears the mobile chrome
     instead - both are already in the markup, so this is only a matter of
     which one is shown. What it must NOT do is hide the content: the old rule
     here did, and a desktop browser in a narrow window came up blank.

     Scoped to the desktop shell, because a mobile shell is already laid out
     for this width, and the viewport says nothing about which shell the server
     chose for the visitor. */
  .gt-shell--desktop .gt-sidebar { display: none; }
  .gt-shell--desktop .gt-topbar { display: none; }
  .gt-shell--desktop .gt-footer { display: none; }
  .gt-shell--desktop .gt-main { margin-left: 0; }
  .gt-shell--desktop .gt-m-topbar { display: grid; }
  .gt-shell--desktop .gt-m-bottom { display: flex; }
  /* Room for the fixed bottom nav, so the last card is never trapped under
     it. Matches the inset the mobile shell already uses. */
  .gt-shell--desktop .gt-content { padding-bottom: 86px; }
  .gt-rail { grid-template-columns: minmax(0, 1fr); }

  .gt-match { grid-template-columns: 92px minmax(0, 1fr); padding: 14px; gap: 12px; }
  .gt-match__time { font-size: 17px; }
  .gt-club__logo { width: 28px; height: 28px; }
  .gt-search { width: 100%; }
}

@media (max-width: 575.98px) {
  body { font-size: 13.5px; }
  .gt-appdl { padding: 22px 18px; gap: 18px; }
  .gt-appdl h3 { font-size: 19px; }
  .gt-m-content { padding: 12px 12px 84px; }
}

/* Very small phones: stack the kickoff above the fixture and free prediction */
@media (max-width: 400px) {
  .gt-match { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   22. Print / motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

@media print {
  .gt-sidebar, .gt-topbar, .gt-m-bottom, .gt-m-topbar, .gt-footer { display: none !important; }
  .gt-main { margin-left: 0; }
  body { background: #fff; color: #000; }
}

/* ===========================================================================
   FREE PREDICTION — a headline, not a write-up
   ---------------------------------------------------------------------------
   The free block is deliberately three rows (Prediction / Confidence /
   Predicted Score) plus the disclaimer. Anything longer belongs in the paid
   Edge Pick, so there is no room for a long paragraph here by design.
   =========================================================================== */
.gt-pred__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px 0;
  border-bottom: 1px solid var(--gt-border-soft);
}
.gt-pred__line:last-of-type { border-bottom: 0; }
.gt-pred__line-label {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gt-dim);
  min-width: 104px;
  flex: 0 0 auto;
}
.gt-pred__line-value {
  font-size: 14px;
  color: #e9f4ef;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.gt-bar--inline {
  display: inline-block;
  width: 54px;
  height: 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}
.gt-bar--inline > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gt-orange), var(--gt-orange-2));
}
.gt-pred__disclaimer {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--gt-border-soft);
  font-size: 11.5px;
  /* Readability only. This sat on --gt-dim, which is 4.35:1 against the
     --gt-surface card - below the 4.5:1 WCAG AA bar for normal text, and this is
     11.5px italic, which is exactly the small text that bar is written for.
     --gt-muted is an existing token used elsewhere in the design system and
     measures 6.85:1 here, so the line reads clearly while still reading as
     secondary text rather than as body copy. Nothing else about the rule moves:
     the slanted italic, the size, the margin, the padding and the rule above it
     are all untouched. */
  color: var(--gt-muted);
  font-style: italic;
}

/* ===========================================================================
   LOCKED PREMIUM — the five things you get
   =========================================================================== */
.gt-lock-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--gt-border-soft);
  border-radius: 10px;
  overflow: hidden;
}
.gt-lock-list__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  font-size: 13.5px;
  color: #cfe0d9;
  background: rgba(232, 137, 47, .045);
}
.gt-lock-list__item + .gt-lock-list__item { border-top: 1px solid var(--gt-border-soft); }
.gt-lock-list__item i { color: var(--gt-gold); font-size: 13px; flex: 0 0 auto; }

/* ===========================================================================
   UNLOCKED PREMIUM — the same five sections, with content
   =========================================================================== */
.gt-premium-block { padding: 14px 0; border-bottom: 1px solid var(--gt-border-soft); }
.gt-premium-block:last-child { border-bottom: 0; padding-bottom: 0; }
.gt-premium-block:first-child { padding-top: 4px; }
.gt-premium-block__label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gt-orange-2);
  margin-bottom: 8px;
  font-weight: 600;
}
.gt-premium-block__label i { font-size: 12px; }
.gt-chip--angle {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gt-gold);
  background: rgba(221, 173, 107, .1);
  border: 1px solid rgba(221, 173, 107, .26);
}

@media (max-width: 575.98px) {
  .gt-pred__line-label { min-width: 0; flex-basis: 100%; margin-bottom: 1px; }
  .gt-lock-list__item { font-size: 12.5px; padding: 11px 12px; }
}

/* ==========================================================================
   UI pass: match-card CTA, live carousel, quick access, header tagline,
   bottom-nav accent, sidebar sizing. Black/green identity, no frameworks.
   ========================================================================== */

/* ---- "View Prediction" CTA (desktop rows and mobile cards) -------------- */
.gt-match__cta-row { display: flex; justify-content: flex-end; margin-top: 10px; }
.gt-match__cta,
.gt-m-match__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .01em;
  color: #04140c;
  background: #2BCB5A;
  border-radius: 999px;
  padding: 5px 12px;
  white-space: nowrap;
  text-decoration: none;
}
a.gt-match__cta { position: relative; z-index: 2; }
a.gt-match__cta:hover { color: #04140c; filter: brightness(1.07); }
.gt-m-match__cta:hover { filter: brightness(1.07); }
.gt-match__cta i,
.gt-m-match__cta i { font-size: 11px; }
.gt-m-match__cta-row { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ---- Mobile match-card polish (spacing, hierarchy, separation) ---------- */
.gt-m-match { padding: 14px 15px; }
.gt-m-match__time { font-size: 16px; }
.gt-m-match__comp {
  font-size: 10px;
  color: var(--gt-dim);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.gt-m-match__teams { font-size: 13px; gap: 9px; }
.gt-m-match__teams img { width: 28px; height: 28px; }
.gt-m-match__free { font-size: 11.5px; margin-top: 7px; color: #9db8b0; }

/* ---- Live carousel (mobile home) ---------------------------------------- */
.gt-live { position: relative; }
.gt-live__track { position: relative; }
.gt-live__slide { display: none; }
.gt-live__slide.is-active { display: block; }
.gt-live__link { display: block; color: inherit; text-decoration: none; }
.gt-live__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  padding: 10px 0 2px;
}
.gt-live__dots button {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .18);
  cursor: pointer;
}
.gt-live__dots button.is-active { background: var(--gt-neon); }
@media (prefers-reduced-motion: reduce) {
  .gt-live__slide { transition: none; }
}

/* ---- Quick access (mobile home) ----------------------------------------- */
.gt-quick-card { padding: 12px 10px; }
/* One horizontal row: icon above centered text, scrollable on narrow phones. */
.gt-quick {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.gt-quick::-webkit-scrollbar { display: none; }
.gt-quick__item {
  flex: 1 0 auto;
  min-width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 8px;
  border-radius: var(--gt-radius-sm);
  color: #b6cbc4;
  font-size: 10.5px;
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}
.gt-quick__item i { font-size: 21px; line-height: 1; color: #9db6ae; }
.gt-quick__item span { line-height: 1.25; }
.gt-quick__item:active { background: rgba(255, 255, 255, .04); }
.gt-quick__item.is-active { color: var(--gt-neon); }
.gt-quick__item.is-active i { color: var(--gt-neon); }

/* ---- Mobile header tagline ---------------------------------------------- */
.gt-m-topbar__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1;
}
.gt-m-topbar__tag {
  font-size: 8.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gt-dim);
  white-space: nowrap;
}

/* ---- Bottom navigation: green active accent, icon above text ------------ */
.gt-m-bottom__item.is-active { color: var(--gt-neon); }
.gt-m-bottom__item.is-active::before {
  background: linear-gradient(90deg, var(--gt-neon-deep), var(--gt-neon));
}

/* ---- Desktop sidebar sizing: keep the app card in view ------------------ */
.gt-sidebar__nav { padding: 10px 12px 6px; }
.gt-navlabel { padding: 10px 12px 6px; }
.gt-nav { gap: 11px; padding: 8px 14px; font-size: 13px; }
.gt-nav + .gt-nav { margin-top: 2px; }
.gt-nav__icon { font-size: 16px; }
.gt-sidebar__promo { margin: 8px 12px 12px; padding: 13px 14px; }
.gt-sidebar__promo p { margin: 0 0 10px; }