/* =========================================
   TRIPLE SENSE GAMING -- NEW HOMEPAGE PREVIEW
   Visual prototype only (/home-preview). Scoped entirely under .tsg-home so it can never leak
   into any other page's styling. Color tokens match the live site's brand (see base.html's
   Tailwind config: primary #E70000, secondary #5BB9C3, dark #121212, darker #000000) rather than
   the mockup's own placeholder reds.
========================================= */

:root {
  --tsg-bg: #000000;
  --tsg-surface: #121212;
  --tsg-surface-2: #1a1a1a;

  --tsg-red: #E70000;
  --tsg-red-dark: #a30000;
  --tsg-teal: #5BB9C3;

  --tsg-white: #ffffff;
  --tsg-muted: #999999;
  --tsg-border: rgba(255,255,255,0.14);

  /* redesign-homepage-ux: added for the .badge status system below -- same values as
     static/css/style.css's own --tsg-success/--tsg-warning (Phase 1 design system), duplicated
     here rather than shared since this file has no build step to import across stylesheets. */
  --tsg-success: #22C55E;
  --tsg-warning: #FFB020;
}

/* RESET (scoped) */

.tsg-home, .tsg-home * {
  box-sizing: border-box;
}

/* fix-full-width-page-layout: .tsg-home is the page's full-bleed canvas -- it must NOT be
   width-constrained, since every section's background (hero, dividers, footer) is a direct
   child of this box and inherits whatever width it's given. Section CONTENT gets its own
   max-width via .tsg-container (added further down), kept separate from this backdrop. */
.tsg-home {
  width: 100%;
  background: var(--tsg-bg);
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--tsg-white);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  padding-bottom: 62px;
}

/* Centered max-width content column, used inside full-width sections/header so their
   BACKGROUND stays edge-to-edge while their content stays readable on very wide screens. */
.tsg-home .tsg-container {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 14px;
  padding-right: 14px;
}

.tsg-home img {
  display: block;
  width: 100%;
}

.tsg-home a {
  color: inherit;
  text-decoration: none;
}

.tsg-home h1, .tsg-home h2, .tsg-home h3 {
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
}


/* =========================================
   PLACEHOLDER TILES
   Design-direction change: no photos anywhere on this preview, only CSS-generated placeholder
   panels (gradient + centered icon + faint diagonal texture). .ph is the base tile; ph-tint-a..d
   rotate the accent angle/hue mix so repeated tiles (gallery grid, explore cards) don't look
   identical. Real imagery can replace any .ph element later without touching layout.
========================================= */

.tsg-home .ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(150deg, var(--tsg-surface-2) 0%, var(--tsg-surface) 55%, var(--tsg-bg) 100%);
}

.tsg-home .ph::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 10px
  );
}

.tsg-home .ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(231,0,0,0.22), transparent 60%);
}

.tsg-home .ph .ph-icon {
  position: relative;
  z-index: 2;
  color: var(--tsg-red);
  opacity: 0.55;
  font-size: 34px;
}

.tsg-home .ph-tint-b::after {
  background: radial-gradient(circle at 70% 30%, rgba(91,185,195,0.20), transparent 60%);
}
.tsg-home .ph-tint-b .ph-icon {
  color: var(--tsg-teal);
}

.tsg-home .ph-tint-c::after {
  background: radial-gradient(circle at 50% 80%, rgba(231,0,0,0.25), transparent 60%);
}

.tsg-home .ph-tint-d::after {
  background: radial-gradient(circle at 80% 70%, rgba(91,185,195,0.16), rgba(231,0,0,0.14), transparent 65%);
}

/* Hero + Final CTA: full-bleed placeholder panels */
.tsg-home .ph-hero {
  position: absolute;
  inset: 0;
}
.tsg-home .ph-hero .ph-icon,
.tsg-home .final-image.ph .ph-icon {
  font-size: 96px;
  opacity: 0.16;
}

/* Explore Our World: right-side panel, same box the old photo occupied */
.tsg-home .ph-panel {
  position: absolute;
  right: 0;
  top: 0;
  width: 62%;
  height: 100%;
}
.tsg-home .ph-panel .ph-icon {
  font-size: 26px;
}

/* Gallery grid tile */
.tsg-home .gallery-tile {
  border: 1px solid var(--tsg-border);
  border-radius: 8px;
  aspect-ratio: 1.3;
  overflow: hidden;
}
.tsg-home .gallery-tile .ph-icon {
  font-size: 22px;
}
.tsg-home .gallery-tile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* =========================================
   HEADER
========================================= */

/* fix-full-width-page-layout: the bar spans the full viewport now (no max-width/centering) --
   left:0;right:0 replaces the old left:50%+translateX(-50%) centering trick, which is no longer
   needed once the bar's own width is always 100%. */
.tsg-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
}

/* fix-full-width-page-layout: the bar's actual background/blur/divider now live here (already
   full-width, unconstrained) instead of on .tsg-header, so the backdrop reaches both edges even
   though .tsg-header itself is capped to a centered max-width content row below. */
.tsg-header-wrap {
  position: relative;
  background: rgba(5,6,6,0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.2s ease;
}

.tsg-top-bar--scrolled .tsg-header-wrap {
  background: rgba(5,6,6,0.98);
}

/* add-redesign-global-navbar: flexbox instead of the old 3-column grid -- the center zone
   (.tsg-desktop-nav) is display:none below 1024px, and flexbox naturally collapses a display:none
   item out of the space-between calculation so logo/right-zone stay correctly pinned to the edges
   at every width, without a stale empty grid track the old grid approach would have left behind.
   fix-full-width-page-layout: max-width/margin keep the actual nav content (logo/links/actions)
   centered in a readable column even though the bar behind it (.tsg-header-wrap) now spans edge
   to edge -- the same full-width-backdrop/max-width-content split used everywhere else. */
.tsg-header {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: padding 0.2s ease;
}

/* Compact-on-scroll (static/js/tsg-nav.js toggles this on .tsg-top-bar past a small scroll
   threshold) -- the existing ResizeObserver body-padding compensation reacts automatically to the
   resulting height change, no extra JS needed for that part. */
.tsg-top-bar--scrolled .tsg-header {
  padding: 4px 14px;
}

.tsg-home .menu-btn,
.tsg-home .profile-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: white;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tsg-home .profile-btn img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--tsg-border);
}

.tsg-home .tsg-logo {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .5px;
  white-space: nowrap;
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
  flex-shrink: 0;
}

.tsg-home .tsg-logo-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
  margin: 0 1px 2px;
}

.tsg-home .tsg-logo span {
  color: var(--tsg-red);
}

.tsg-home .tsg-logo small {
  display: block;
  margin-top: 2px;
  color: var(--tsg-red);
  font-size: 8px;
  letter-spacing: 3px;
}

/* Primary nav (Games/Community/Tournaments/Food/More) -- desktop-only, shown at 1024px (see the
   DESKTOP NAV media block near the end of this file). Hidden below that, where .menu-panel (the
   mobile slide-down) carries the same links instead. */
.tsg-home .tsg-desktop-nav {
  display: none;
  align-items: center;
  gap: 26px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.tsg-home .tsg-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 2px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
}

.tsg-home .tsg-nav-link i {
  font-size: 11px;
  transition: transform 0.15s ease;
}

.tsg-home .tsg-nav-link:hover {
  color: var(--tsg-white);
}

.tsg-home .tsg-nav-link.is-active {
  color: var(--tsg-teal);
}

.tsg-home .tsg-nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--tsg-teal);
}

.tsg-home .tsg-dropdown-trigger[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Community / More / Account dropdowns -- vanilla-JS-toggled .is-open on the wrapper, same
   pattern as .menu-panel below. Positioned absolutely so opening one never shifts layout. */
.tsg-home .tsg-dropdown {
  position: relative;
}

.tsg-home .tsg-dropdown-panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  background: var(--tsg-surface);
  border: 1px solid var(--tsg-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 70;
  display: none;
}

.tsg-home .tsg-dropdown.is-open .tsg-dropdown-panel {
  display: block;
}

.tsg-home .tsg-dropdown-panel a {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}

.tsg-home .tsg-dropdown-panel a:hover,
.tsg-home .tsg-dropdown-panel a:focus-visible {
  background: rgba(91, 185, 195, 0.12);
  color: var(--tsg-teal);
}

/* Account dropdown: right-aligned (not centered like Community/More, since it's the last item in
   the row) and wider to comfortably fit the longest role-based labels; Logout gets a divider and
   red tint to read as a distinct, deliberate action from the rest of the list. */
.tsg-home .tsg-account-panel {
  left: auto;
  right: 0;
  transform: none;
  min-width: 220px;
  max-height: 70vh;
  overflow-y: auto;
}

.tsg-home .tsg-account-panel .tsg-dropdown-danger {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--tsg-border);
  color: var(--tsg-red);
}

.tsg-home .tsg-account-panel .tsg-dropdown-danger:hover,
.tsg-home .tsg-account-panel .tsg-dropdown-danger:focus-visible {
  background: rgba(231, 0, 0, 0.12);
  color: var(--tsg-red);
}

.tsg-home .tsg-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Book Now: the strongest visual weight in the header by design -- solid red, glows and lifts on
   hover, presses on click. Every other nav element stays a plain link/icon so this is the one
   thing that reads as "click me." */
.tsg-home .tsg-book-now {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--tsg-red);
  color: var(--tsg-white);
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.tsg-home .tsg-book-now:hover {
  background: var(--tsg-red-dark);
  box-shadow: 0 0 18px rgba(231, 0, 0, 0.5);
}

.tsg-home .tsg-book-now:active {
  transform: scale(0.97);
}

.tsg-home .tsg-signup-link {
  padding: 6px 10px;
  border: 1px solid var(--tsg-border);
  border-radius: 8px;
}

/* Below 1024px, Book Now / Login+Sign Up / the Account dropdown live inside the mobile hamburger
   panel instead -- only the credits chip, staff icon, notification bell, and hamburger stay in
   the persistent mobile header (per the confirmed decision to keep those glanceable). Shown again
   once the desktop primary nav takes over -- see the DESKTOP NAV media block below. */
.tsg-home .tsg-header-right > .tsg-book-now,
.tsg-home .tsg-header-right > .tsg-nav-link,
.tsg-home .tsg-account-dropdown {
  display: none;
}

/* Header actions: credits chip + notification bell + staff icon, next to Book Now / the account
   cluster (add-navbar-credits-notifications, extended by add-redesign-global-navbar) */

.tsg-home .tsg-credits-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--tsg-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--tsg-teal);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.tsg-home .tsg-credits-chip i {
  font-size: 12px;
}

.tsg-home .tsg-staff-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
}

/* add-i18n-foundation: compact language switcher. Reuses .tsg-credits-chip's own pill look
   (border/background/font-size) rather than inventing a new control style for one dropdown.
   Hidden by default and only shown at the 1024px desktop breakpoint (matching Book Now/Login's
   own show/hide pattern above) -- the mobile instance lives inside .menu-panel instead, which is
   already fully hidden at that same breakpoint, so no separate hiding rule is needed for it. */
.tsg-home .tsg-lang-form-desktop {
  display: none;
}

.tsg-home .tsg-lang-select {
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid var(--tsg-border);
  background: rgba(255, 255, 255, 0.04);
  color: white;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* fix-language-selector-invisible-options: the select's own `color: white` above cascades into
   its <option> elements, but the native dropdown *popup* renders on a browser/OS-controlled
   white background that ignores the <select>'s own background -- so an unselected option (white
   text on that white popup) is invisible, while the selected option stays visible only because
   its highlight color provides contrast. Options need their own explicit dark-on-light color,
   independent of the closed control's white-on-dark styling. */
.tsg-home .tsg-lang-select option {
  color: #111;
  background: #fff;
}

.tsg-home .tsg-lang-select:focus-visible {
  outline: 2px solid var(--tsg-teal);
  outline-offset: 2px;
}

.tsg-home .tsg-mobile-lang-row {
  padding: 10px 2px 0;
}

.tsg-home .tsg-mobile-lang-row .tsg-lang-select {
  width: 100%;
  height: 38px;
  border-radius: 8px;
}

.tsg-home .tsg-notif-wrap {
  position: relative;
  flex-shrink: 0;
}

.tsg-home .tsg-notif-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: white;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Visible keyboard focus -- the dark theme's default browser outline is barely visible against
   this background, so every interactive nav element gets an explicit ring. */
.tsg-home .tsg-nav-link:focus-visible,
.tsg-home .tsg-dropdown-panel a:focus-visible,
.tsg-home .menu-btn:focus-visible,
.tsg-home .profile-btn:focus-visible,
.tsg-home .tsg-notif-btn:focus-visible,
.tsg-home .tsg-staff-btn:focus-visible,
.tsg-home .tsg-credits-chip:focus-visible,
.tsg-home .tsg-book-now:focus-visible,
.tsg-home .tsg-mobile-group-trigger:focus-visible,
.tsg-home .menu-panel > a:focus-visible {
  outline: 2px solid var(--tsg-teal);
  outline-offset: 2px;
}

.tsg-home .tsg-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--tsg-red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--tsg-bg);
}

.tsg-home .tsg-notif-badge.is-hidden {
  display: none;
}

.tsg-home .tsg-notif-panel {
  position: fixed;
  width: min(88vw, 320px);
  background: var(--tsg-surface);
  border: 1px solid var(--tsg-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 60;
}

.tsg-home .tsg-notif-panel.is-hidden {
  display: none;
}

.tsg-home .tsg-notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--tsg-border);
}

.tsg-home .tsg-notif-panel-head h3 {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tsg-white);
}

.tsg-home .tsg-notif-mark-all {
  background: none;
  border: 0;
  color: var(--tsg-teal);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.tsg-home .tsg-notif-list {
  max-height: 320px;
  overflow-y: auto;
}

.tsg-home .tsg-notif-empty {
  padding: 28px 14px;
  text-align: center;
  color: var(--tsg-muted);
  font-size: 11px;
}

.tsg-home .tsg-notif-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
}

.tsg-home .tsg-notif-row:last-child {
  border-bottom: 0;
}

.tsg-home .tsg-notif-row.is-unread {
  background: rgba(91, 185, 195, 0.06);
}

.tsg-home .tsg-notif-row-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.tsg-home .tsg-notif-row-body {
  flex: 1;
  min-width: 0;
}

.tsg-home .tsg-notif-row-msg {
  font-size: 11px;
  color: #ccc;
  word-break: break-word;
}

.tsg-home .tsg-notif-row-link {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  color: var(--tsg-teal);
}

.tsg-home .tsg-notif-row-time {
  margin-top: 3px;
  font-size: 9px;
  color: #666;
}

.tsg-home .tsg-notif-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tsg-teal);
  flex-shrink: 0;
  margin-top: 5px;
}

.tsg-home .tsg-notif-footer {
  padding: 8px 14px;
  text-align: center;
  border-top: 1px solid var(--tsg-border);
}

.tsg-home .tsg-notif-footer a {
  font-size: 11px;
  font-weight: 700;
  color: var(--tsg-teal);
}

/* Mobile slide-down panel (scoped, vanilla JS toggles .is-open on #tsg-menu-panel). Below
   1024px only -- see the DESKTOP NAV media block near the end of this file, which hides this
   entirely and shows .tsg-desktop-nav instead. */

.tsg-home .menu-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 25;
  background: rgba(5,6,6,.98);
  border-bottom: 1px solid var(--tsg-border);
  padding: 14px 18px 18px;
  display: none;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

.tsg-home .menu-panel.is-open {
  display: block;
}

.tsg-home .menu-panel > a {
  display: block;
  padding: 12px 2px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tsg-home .menu-panel > a:last-child {
  border-bottom: none;
}

.tsg-home .menu-panel > a.is-active {
  color: var(--tsg-teal);
}

/* Book Now inside the mobile panel: prominent, near the top, not buried at the bottom of the
   list -- a full-width solid-red button rather than the compact pill used in the desktop header. */
.tsg-home .tsg-mobile-book-now {
  display: block;
  text-align: center;
  padding: 13px 0;
  margin-bottom: 8px;
  border-radius: 8px;
  background: var(--tsg-red);
  color: var(--tsg-white);
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: none !important;
}

.tsg-home .tsg-mobile-book-now:active {
  transform: scale(0.98);
}

/* Community / More accordion groups inside the mobile panel -- independent, not mutually
   exclusive (no need to force-close one when opening the other in a vertical scrolling list,
   unlike the compact desktop dropdowns). */
.tsg-home .tsg-mobile-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.tsg-home .tsg-mobile-group-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 2px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .tsg-mobile-group-trigger.is-active {
  color: var(--tsg-teal);
}

.tsg-home .tsg-mobile-group-trigger i {
  font-size: 12px;
  transition: transform 0.15s ease;
}

.tsg-home .tsg-mobile-group.is-open .tsg-mobile-group-trigger i {
  transform: rotate(180deg);
}

.tsg-home .tsg-mobile-group-panel {
  display: none;
  padding: 0 0 8px 12px;
}

.tsg-home .tsg-mobile-group.is-open .tsg-mobile-group-panel {
  display: block;
}

.tsg-home .tsg-mobile-group-panel a {
  display: block;
  padding: 9px 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}

.tsg-home .tsg-mobile-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}


/* =========================================
   HERO
========================================= */

.tsg-home .hero {
  position: relative;
  min-height: calc(100vh - 62px);
  min-height: calc(100dvh - 62px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.tsg-home .hero-image {
  position: absolute;
  inset: 0;
}

.tsg-home .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* redesign-homepage-ux: looping background GIF, replacing the background-video attempt per direct
   feedback. Stacks on top of the .ph-hero gradient below it (same architecture the video/photo
   carousel both used). Visible by default (no JS-gated fade-in, same reasoning as the video
   version had -- don't depend on JS for something to be visible). A GIF can't be paused via JS
   the way a <video> can, so reduced-motion is handled the same way the video's *visibility* was
   (display:none, revealing the gradient underneath) -- it doesn't stop the browser decoding the
   GIF in the background, just hides it, which is the best available option for an animated GIF
   specifically. */
/* add-admin-hero-media: .hero-bg-video shares the GIF's rules -- admin picks one of the two per
   templates/home.html's {% if hero_media_type == "video" %} branch, only one is ever in the DOM.
   Same visibility approach (visible by default, no JS-gated opacity); the bottom-of-page inline
   script's .pause() call on the video is a bandwidth optimization only, never load-bearing. */
.tsg-home .hero-bg-gif,
.tsg-home .hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (prefers-reduced-motion: reduce) {
  .tsg-home .hero-bg-gif,
  .tsg-home .hero-bg-video,
  .tsg-home .hero-youtube-wrap {
    display: none;
  }
}

/* add-hero-youtube: a YouTube URL pasted into the same Video field renders as an iframe embed
   instead of a <video> tag (see routes/main.py's _youtube_video_id() + templates/home.html's
   {% elif hero_youtube_id %} branch) -- iframes have no object-fit, so this is the standard
   oversize-and-center trick to make a 16:9 embed cover an arbitrary box the same way
   object-fit:cover does for the video/GIF paths. pointer-events:none keeps it a pure background
   (no accidental clicks reaching YouTube's own overlay controls) since hero-content already sits
   above it with its own real links. No .pause() equivalent is available for a cross-origin
   iframe without loading the full YouTube IFrame Player API, so reduced-motion above just hides
   it like the video/GIF paths, rather than freezing it like the carousel does. */
.tsg-home .hero-youtube-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.tsg-home .hero-youtube-wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw; /* 16:9 */
  min-height: 100%;
  min-width: 177.78vh; /* 16:9 */
  transform: translate(-50%, -50%);
  border: 0;
}

/* add-hero-carousel: ported from static/css/style.css's .hero-carousel-slide (home_legacy.html),
   which this page can't reach directly since home.html loads home-preview.css only. Slides are
   absolutely stacked and cross-fade via opacity, toggled by the bottom-of-page inline script's
   .is-active class. No reduced-motion display:none here -- see that script's comment for why a
   frozen first slide is left visible instead of hidden. */
.tsg-home .hero-carousel {
  position: absolute;
  inset: 0;
}
.tsg-home .hero-carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.tsg-home .hero-carousel-slide.is-active {
  opacity: 1;
}

/* Enhanced no-photo fallback: a richer red/teal composition instead of a bare centered icon, so
   the hero still feels premium with no media set. This is the actual default now (add-admin-hero-
   media) -- only covered up when an admin sets a hero_media_url from /admin/hero-media. .ph-hero's
   own ::before/::after (inherited from the shared .ph placeholder-tile pattern) still provide the
   base gradient/texture; this adds a second, hero-specific glow layer on top. */
.tsg-home .hero-image.ph-hero::before {
  background-image:
    radial-gradient(ellipse 900px 600px at 15% 0%, rgba(231,0,0,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 85% 100%, rgba(91,185,195,0.14), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 10px);
}
.tsg-home .hero-image.ph-hero .ph-icon {
  font-size: 120px;
  opacity: 0.1;
}

.tsg-home .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.95) 100%);
}

.tsg-home .hero-content {
  position: relative;
  width: 100%;
  padding: 0 20px 32px;
  z-index: 2;
}

.tsg-home .eyebrow {
  margin: 0 0 8px;
  color: var(--tsg-red);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
}

.tsg-home .hero h1 {
  margin: 0;
  font-size: clamp(36px, 11vw, 52px);
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -1px;
}

.tsg-home .hero h1 span {
  display: block;
  color: var(--tsg-red);
}

.tsg-home .hero-description {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #ddd;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .hero-signup-link {
  display: inline-block;
  margin: 10px 0 0;
  color: var(--tsg-teal);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-transform: uppercase;
}

.tsg-home .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.tsg-home .hero-play {
  position: absolute;
  top: 125px;
  left: 50%;
  transform: translateX(-50%);
  width: 58px;
  height: 58px;
  border: 2px solid white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 5;
  background: transparent;
  cursor: pointer;
  color: white;
}


/* =========================================
   BUTTONS
========================================= */

.tsg-home .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 22px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  border: 0;
}

.tsg-home .btn-primary {
  background: var(--tsg-red);
  color: white;
  box-shadow: 0 8px 20px rgba(231,0,0,0.25);
}

.tsg-home .btn-outline {
  border: 1px solid white;
  background: transparent;
  color: white;
}

.tsg-home .btn-outline-teal {
  border: 1px solid var(--tsg-teal);
  background: transparent;
  color: var(--tsg-teal);
}


/* =========================================
   GENERAL SECTIONS
========================================= */

/* fix-full-width-page-layout: horizontal padding moved to .tsg-container (wrapping each
   section's actual content, added in the markup) so this border-top divider spans the full
   viewport width -- .section itself now only carries vertical spacing. */
.tsg-home .section {
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.tsg-home .section-heading h2,
.tsg-home .section-title-row h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
}

.tsg-home .section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.tsg-home .section-title-row a {
  color: var(--tsg-red);
  font-size: 8px;
  font-weight: 700;
}


/* =========================================
   EXPERIENCE ("Explore Our World")
========================================= */

/* redesign-homepage-ux: 2x2 grid at every width (was a single-column stacked list) -- each card
   becomes a square-ish tile with a full-bleed background panel instead of a wide horizontal strip
   with a 62%-right image bleed, since that composition doesn't survive a narrow grid cell. */
.tsg-home .experience-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.tsg-home .experience-card {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid var(--tsg-border);
  border-radius: 10px;
  background: var(--tsg-surface);
}

.tsg-home .experience-card .ph-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tsg-home .experience-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.5) contrast(1.1) saturate(1.2);
}

.tsg-home .experience-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.1) 100%);
}

.tsg-home .experience-icon,
.tsg-home .experience-text,
.tsg-home .experience-card .arrow {
  position: relative;
  z-index: 2;
}

.tsg-home .experience-icon {
  position: absolute;
  top: 10px;
  left: 10px;
  color: var(--tsg-red);
  font-size: 16px;
}

.tsg-home .experience-text {
  padding: 0 12px 12px;
}

.tsg-home .experience-text h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: .5px;
}

.tsg-home .experience-text p {
  margin: 3px 0 0;
  color: #ccc;
  font-size: 9px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .experience-card .arrow {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 16px;
  color: #fff;
}


/* =========================================
   FEATURED GAMES
========================================= */

.tsg-home .games-title-row {
  align-items: flex-end;
}

.tsg-home .games-title-row .eyebrow {
  margin: 0 0 3px;
}

.tsg-home .games-title-row h2 {
  font-size: 15px;
}

.tsg-home .games-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.tsg-home .games-scroll::-webkit-scrollbar {
  display: none;
}

.tsg-home .game-card {
  flex: 0 0 calc((100% - 10px) / 2);
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  background: var(--tsg-surface);
}

.tsg-home .game-card-media {
  display: block;
  position: relative;
}

/* redesign-homepage-ux: status badge system (ported from static/css/style.css's Phase 1 design
   system -- home.html doesn't load that file, so the classes are duplicated here under .tsg-home
   rather than left unusable). Same colors/shape, .tsg-home-scoped like everything else here. */
.tsg-home .badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: capitalize;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.tsg-home .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.tsg-home .badge-open {
  background: rgba(34, 197, 94, .12);
  color: var(--tsg-success);
  border-color: rgba(34, 197, 94, .4);
}
.tsg-home .badge-upcoming {
  background: rgba(255, 176, 32, .12);
  color: var(--tsg-warning);
  border-color: rgba(255, 176, 32, .4);
}
.tsg-home .game-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
}

.tsg-home .game-card .game-cover {
  aspect-ratio: 1;
  object-fit: cover;
}

.tsg-home .game-card .game-cover-fallback {
  aspect-ratio: 1;
  flex-direction: column;
  gap: 8px;
}

.tsg-home .game-card .game-cover-fallback span {
  position: relative;
  z-index: 2;
  color: var(--tsg-red);
  font-size: 26px;
  font-weight: 900;
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
}

.tsg-home .game-info {
  padding: 12px;
}

.tsg-home .game-title-link {
  display: block;
}

.tsg-home .game-info h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
}

.tsg-home .game-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.tsg-home .game-genre-pill {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255,255,255,0.08);
  color: #ccc;
  font-size: 9.5px;
  font-weight: 600;
  padding: 5px 8px;
  border-radius: 999px;
}

.tsg-home .btn-view-game {
  flex-shrink: 0;
  display: inline-block;
  text-align: center;
  padding: 7px 12px;
  border: none;
  border-radius: 8px;
  background: var(--tsg-red);
  color: var(--tsg-white);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .2px;
  transition: background .15s ease;
}

.tsg-home .btn-view-game:hover {
  background: var(--tsg-red-dark);
}

.tsg-home .games-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
}

.tsg-home .games-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background .15s ease, width .15s ease;
  cursor: pointer;
}

.tsg-home .games-dots .dot.active {
  width: 16px;
  border-radius: 3px;
  background: var(--tsg-red);
}


/* =========================================
   HOW IT WORKS
========================================= */

.tsg-home .steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 18px;
}

.tsg-home .step {
  text-align: center;
}

.tsg-home .step-number {
  width: 36px;
  height: 36px;
  margin: 0 auto 7px;
  border: 1px solid var(--tsg-red);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tsg-red);
  font-size: 9px;
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
}

.tsg-home .step h3 {
  margin: 0;
  font-size: 8px;
}

.tsg-home .step span {
  display: block;
  margin-top: 4px;
  color: #777;
  font-size: 7px;
}


/* =========================================
   CREDITS BANNER
========================================= */

/* fix-full-width-page-layout: width:calc(...) guarantees a 14px gutter from the viewport edge
   below max-width (matching the original margin:10px 14px look); margin:auto only starts adding
   extra space once the viewport is wide enough for the calc'd width to hit 1400px. */
.tsg-home .credits-banner {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  width: calc(100% - 28px);
  max-width: 1400px;
  margin: 10px auto;
  padding: 16px;
  border: 1px solid var(--tsg-border);
  border-radius: 10px;
  background: radial-gradient(circle at 80% 50%, rgba(231,0,0,.18), transparent 55%), #0a0a0a;
}

.tsg-home .credits-banner .gift-icon {
  flex-shrink: 0;
  font-size: 40px;
  color: var(--tsg-red);
  filter: drop-shadow(0 4px 10px rgba(231,0,0,0.35));
}

.tsg-home .credits-content {
  flex: 1 1 150px;
  min-width: 0;
  padding: 0;
}

.tsg-home .credits-content p {
  margin: 0 0 3px;
  color: var(--tsg-red);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .4px;
}

.tsg-home .credits-content h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.1;
  white-space: nowrap;
}

.tsg-home .credits-content span {
  display: block;
  margin: 3px 0 0;
  color: #aaa;
  font-size: 8px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .credits-cta {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 10px;
  white-space: nowrap;
}


/* =========================================
   GALLERY
========================================= */

.tsg-home .gallery-title-row h2 {
  font-size: 24px;
  font-weight: 900;
}

.tsg-home .gallery-title-row a {
  color: var(--tsg-red);
  font-size: 11px;
  font-weight: 700;
}

/* redesign-homepage-ux: horizontal swipeable carousel on mobile (was a static 2-column grid) --
   becomes a real grid again at desktop via the min-width:768px override below. */
.tsg-home .gallery-grid {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.tsg-home .gallery-grid::-webkit-scrollbar {
  display: none;
}
.tsg-home .gallery-tile {
  flex: 0 0 68%;
  scroll-snap-align: start;
}


/* =========================================
   TOURNAMENTS
========================================= */

.tsg-home .tournament-heading {
  margin-bottom: 14px;
}

.tsg-home .tournament-heading .eyebrow {
  margin-bottom: 4px;
}

.tsg-home .tournament-heading h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
}

.tsg-home .tournament-view-all {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tsg-red);
  font-size: 11px;
  font-weight: 700;
}

.tsg-home .tournaments-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}

.tsg-home .tournaments-scroll::-webkit-scrollbar {
  display: none;
}

.tsg-home .tournament-card {
  flex: 0 0 92%;
  scroll-snap-align: start;
  display: flex;
  gap: 12px;
  padding: 12px;
  overflow: hidden;
  border: 1px solid rgba(231,0,0,0.4);
  border-radius: 10px;
  background: var(--tsg-surface);
}

.tsg-home .tournament-cover {
  flex: 0 0 100px;
  width: 100px;
  aspect-ratio: 0.72;
  border-radius: 6px;
  object-fit: cover;
}

.tsg-home .tournament-info {
  flex: 1 1 0;
  min-width: 0;
  padding: 2px 0;
}

.tsg-home .tournament-info h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
  overflow-wrap: break-word;
}

.tsg-home .tournament-info p {
  margin: 3px 0 12px;
  color: #999;
  font-size: 9px;
  letter-spacing: .3px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .tournament-meta {
  display: flex;
  gap: 14px;
  color: #ccc;
  font-size: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.tsg-home .tournament-location {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ccc;
  font-size: 10px;
}

.tsg-home .tournament-card-empty {
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 14px;
}

.tsg-home .tournament-empty-sub {
  margin-bottom: 0 !important;
}

/* redesign-homepage-ux: single prominent "Upcoming Tournament" card, replacing the horizontal
   carousel above (kept intact for reference/reuse elsewhere -- this reuses its visual language:
   same border/radius/surface treatment, just a bigger single card instead of a scroll-snap row). */
.tsg-home .tournament-feature-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(231, 0, 0, 0.4);
  border-radius: 14px;
  overflow: hidden;
  background: var(--tsg-surface);
}

.tsg-home .tournament-feature-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.tsg-home .tournament-feature-info {
  padding: 16px;
}

.tsg-home .tournament-feature-info h3 {
  margin: 10px 0 2px;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.15;
}

.tsg-home .tournament-feature-type {
  margin: 0 0 14px;
  color: #999;
  font-size: 10px;
  letter-spacing: .3px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .tournament-feature-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #ccc;
  font-size: 11px;
  margin-bottom: 16px;
}

.tsg-home .tournament-feature-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tsg-home .tournament-feature-meta i {
  color: var(--tsg-teal);
}

.tsg-home .tournament-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tsg-red);
  font-size: 12px;
  font-weight: 800;
}


/* =========================================
   TESTIMONIALS
========================================= */

.tsg-home .testimonials-scroll {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
  margin-top: 12px;
}

.tsg-home .testimonials-scroll::-webkit-scrollbar {
  display: none;
}

.tsg-home .testimonial-card {
  flex: 0 0 85%;
  scroll-snap-align: start;
  padding: 18px;
  border: 1px solid var(--tsg-border);
  border-radius: 10px;
  background: var(--tsg-surface);
}

.tsg-home .testimonial-stars {
  color: var(--tsg-red);
  font-size: 13px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.tsg-home .testimonial-comment {
  margin: 0 0 12px;
  color: #ccc;
  font-size: 11px;
  line-height: 1.6;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .testimonial-name {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: white;
}


/* =========================================
   MEET THE GAMERS / COMMUNITY
========================================= */

.tsg-home .community-heading .eyebrow {
  margin-bottom: 6px;
}

.tsg-home .community-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tsg-home .community-heading-row h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 900;
}

.tsg-home .community-view-all {
  flex-shrink: 0;
  color: var(--tsg-red);
  font-size: 11px;
  font-weight: 700;
}

.tsg-home .community-subtitle {
  margin: 6px 0 0;
  color: #999;
  font-size: 10px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .gamers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 16px;
}

.tsg-home .gamer-card {
  border: 1px solid var(--tsg-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--tsg-surface);
}

.tsg-home .gamer-photo-wrap {
  position: relative;
  aspect-ratio: 0.85;
}

.tsg-home .gamer-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsg-home .gamer-rank-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: white;
  background: var(--tsg-red);
  border: 2px solid rgba(0,0,0,0.5);
}

.tsg-home .gamer-rank-badge.tint-b {
  background: var(--tsg-teal);
}

.tsg-home .gamer-rank-badge.tint-c {
  background: #3b82f6;
}

.tsg-home .gamer-rank-badge.tint-d {
  background: #f59e0b;
}

.tsg-home .gamer-online-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.65);
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 800;
  color: #4ade80;
  letter-spacing: .3px;
}

.tsg-home .gamer-online-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 4px #4ade80;
}

/* add-discord-live-now-homepage: same shape/position as .gamer-online-badge above, red instead of
   green -- "live-streaming" and "browsing the site" are different signals, so this section shows
   only the live badge, not both at once. */
.tsg-home .gamer-live-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.65);
  padding: 3px 7px;
  border-radius: 999px;
  font-size: 7px;
  font-weight: 800;
  color: var(--tsg-red);
  letter-spacing: .3px;
  animation: pulse 2s ease-in-out infinite;
}

.tsg-home .gamer-live-badge .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tsg-red);
  box-shadow: 0 0 4px var(--tsg-red);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .tsg-home .gamer-live-badge {
    animation: none;
  }
}

.tsg-home .gamer-wins-badge {
  position: absolute;
  bottom: -14px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--tsg-surface-2);
  border: 1px solid var(--tsg-border);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}

.tsg-home .gamer-wins-badge strong {
  font-size: 13px;
  color: white;
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
  line-height: 1;
}

.tsg-home .gamer-wins-badge em {
  margin-top: 2px;
  font-style: normal;
  font-size: 6px;
  font-weight: 700;
  color: #999;
  letter-spacing: .3px;
}

.tsg-home .gamer-details {
  padding: 18px 10px 10px;
}

.tsg-home .gamer-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tsg-home .gamer-name-row h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
}

.tsg-home .verified-badge {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--tsg-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tsg-home .verified-badge i {
  font-size: 8px;
  color: white;
}

.tsg-home .gamer-handle {
  margin: 2px 0 8px;
  color: #888;
  font-size: 9px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .gamer-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.tsg-home .gamer-game-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: rgba(255,255,255,0.06);
  color: #ccc;
  font-size: 7.5px;
  font-weight: 700;
  padding: 4px 7px;
  border-radius: 6px;
}

.tsg-home .gamer-game-pill i {
  flex-shrink: 0;
  font-size: 9px;
  color: var(--tsg-red);
}

.tsg-home .gamer-rating {
  flex-shrink: 0;
  color: var(--tsg-red);
  font-size: 11px;
  font-weight: 800;
}

.tsg-home .community-rooms {
  margin-top: 26px;
}

.tsg-home .community-rooms-label {
  margin: 0;
  color: var(--tsg-red);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .4px;
}

.tsg-home .rooms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.tsg-home .room-card {
  border: 1px solid var(--tsg-border);
  border-radius: 10px;
  padding: 10px 6px;
  background: var(--tsg-surface);
  text-align: center;
}

.tsg-home .room-card-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tsg-home .room-card-top i {
  color: var(--tsg-red);
  font-size: 16px;
}

.tsg-home .room-name {
  font-size: 7.5px;
  font-weight: 800;
  color: white;
  letter-spacing: .2px;
}

.tsg-home .room-online {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 6px 0;
  font-size: 7px;
  color: #4ade80;
}

.tsg-home .room-online .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
}

.tsg-home .room-avatars {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.tsg-home .room-avatars img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--tsg-surface);
  margin-left: -6px;
}

.tsg-home .room-avatars img:first-child {
  margin-left: 0;
}

.tsg-home .room-join {
  display: block;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 6px;
  padding: 6px 0;
  font-size: 7.5px;
  font-weight: 800;
  color: white;
}

.tsg-home .community-cta {
  position: relative;
  margin-top: 26px;
  border-radius: 14px;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--tsg-border);
}

.tsg-home .community-cta-bg {
  position: absolute;
  inset: 0;
}

.tsg-home .community-cta-bg .ph-icon {
  font-size: 90px;
  opacity: .15;
}

.tsg-home .community-cta-content {
  position: relative;
  z-index: 2;
  padding: 20px;
}

.tsg-home .community-cta-content .eyebrow {
  margin-bottom: 6px;
}

.tsg-home .community-cta-content h2 {
  margin: 0 0 8px;
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
}

.tsg-home .community-cta-content p {
  margin: 0 0 14px;
  color: #bbb;
  font-size: 10px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}


/* =========================================
   LOCATION
========================================= */

.tsg-home .location-card {
  position: relative;
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid var(--tsg-border);
  border-radius: 7px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.9), rgba(0,0,0,.6)),
    radial-gradient(circle at 70% 30%, rgba(231,0,0,.18), transparent 55%),
    var(--tsg-surface-2);
}

.tsg-home .location-details {
  display: flex;
  gap: 10px;
  padding: 18px 18px 14px;
}

.tsg-home .location-icon {
  color: var(--tsg-red);
  font-size: 26px;
  line-height: 1;
}

.tsg-home .location-details h3 {
  margin: 0 0 7px;
  font-size: 11px;
}

.tsg-home .location-details p {
  margin: 0 0 15px;
  color: #aaa;
  font-size: 8px;
  line-height: 1.5;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}


/* =========================================
   FINAL CTA
========================================= */

.tsg-home .final-cta {
  position: relative;
  min-height: 150px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}

.tsg-home .final-image {
  position: absolute;
  inset: 0;
}

.tsg-home .final-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tsg-home .final-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.95), rgba(0,0,0,.15));
}

.tsg-home .final-content {
  position: relative;
  z-index: 2;
  padding: 18px 20px 20px;
}

.tsg-home .final-content h2 {
  margin: 0;
  font-size: 25px;
}

.tsg-home .final-content p {
  margin: 5px 0 15px;
  font-size: 9px;
  color: #bbb;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}


/* =========================================
   FOOTER
========================================= */

/* fix-full-width-page-layout: border-top/padding stay on .tsg-footer itself (full-width, so the
   divider reaches both edges); the flex/grid layout moves to .tsg-footer .tsg-container so the
   actual columns stay centered and readable on very wide screens. */
.tsg-home .tsg-footer {
  padding: 30px 0 20px;
  border-top: 1px solid var(--tsg-border);
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-home .tsg-footer .tsg-container {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tsg-home .footer-col h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 800;
  font-family: 'Rajdhani', Arial, Helvetica, sans-serif;
}

.tsg-home .footer-col h3 img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.tsg-home .footer-brand p {
  margin: 0;
  color: #999;
  font-size: 11px;
}

.tsg-home .footer-col h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--tsg-white);
}

.tsg-home .footer-col p {
  margin: 0 0 6px;
  font-size: 11px;
  color: #aaa;
}

.tsg-home .footer-col a {
  color: #aaa;
}

.tsg-home .footer-col a:hover {
  color: var(--tsg-red);
}

.tsg-home .footer-address {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.tsg-home .footer-address i {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--tsg-red);
  font-size: 13px;
}

.tsg-home .footer-social {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.tsg-home .footer-social a {
  width: 32px;
  height: 32px;
  border: 1px solid var(--tsg-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #ccc;
}

.tsg-home .footer-social a:hover {
  border-color: var(--tsg-red);
  color: var(--tsg-red);
}

.tsg-home .footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  font-size: 11px;
}

.tsg-home .footer-copyright {
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid var(--tsg-border);
  text-align: center;
  font-size: 10px;
  color: #777;
}


/* =========================================
   MOBILE NAVIGATION
========================================= */

.tsg-home .mobile-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 480px);
  z-index: 50;
  height: 62px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--tsg-border);
  background: rgba(0,0,0,.97);
  backdrop-filter: blur(10px);
}

.tsg-home .mobile-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #777;
  font-size: 7px;
  font-weight: 700;
}

.tsg-home .mobile-nav a i {
  font-size: 16px;
}

.tsg-home .mobile-nav a.active {
  color: var(--tsg-red);
}


/* =========================================
   DESKTOP
========================================= */

@media (min-width: 768px) {
  .tsg-home .hero {
    min-height: 720px;
  }

  .tsg-home .hero-content {
    max-width: 700px;
    padding: 0 60px 70px;
  }

  .tsg-home .hero h1 {
    font-size: 72px;
  }

  .tsg-home .section {
    padding: 50px 0;
  }

  .tsg-home .tsg-container {
    padding-left: 60px;
    padding-right: 60px;
  }

  .tsg-home .experience-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .tsg-home .game-card {
    flex-basis: 220px;
  }

  .tsg-home .gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow-x: visible;
  }

  .tsg-home .gallery-tile {
    flex: none;
  }

  /* Upcoming Tournament: horizontal layout at desktop (image left, info right) instead of the
     mobile stacked card, so the section stays compact rather than excessively tall on wide
     screens. */
  .tsg-home .tournament-feature-card {
    flex-direction: row;
    align-items: stretch;
  }

  .tsg-home .tournament-feature-cover {
    width: 340px;
    flex-shrink: 0;
    aspect-ratio: auto;
  }

  .tsg-home .tournament-feature-info {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .tsg-home {
    padding-bottom: 0;
  }

  .tsg-home .mobile-nav {
    display: none;
  }

  .tsg-home .credits-banner {
    width: calc(100% - 120px);
    margin-top: 30px;
    margin-bottom: 30px;
  }

  /* Tournament carousel: 92% width is a mobile-only card size, left untouched by the original
     desktop pass -- fix it the same way Featured Games' card already was, a fixed card width
     instead of a percentage of the (now much wider) container. */
  .tsg-home .tournament-card {
    flex: 0 0 360px;
  }

  .tsg-home .testimonial-card {
    flex: 0 0 360px;
  }

  /* Meet the Gamers: 2 columns of ~535px cards on a 1200px container is the same oversized-card
     problem -- 4 columns matches the 4 cards routes/main.py's home_preview() actually queries. */
  .tsg-home .gamers-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Footer: was still a single stacked column at full width. Grid (not flex) so the standalone
     .footer-copyright div can span the full row below the 3 real columns via grid-column. */
  .tsg-home .tsg-footer .tsg-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .tsg-home .footer-copyright {
    grid-column: 1 / -1;
  }
}


/* =========================================
   DESKTOP NAV
   Deliberately a wider breakpoint (1024px) than the 768px used everywhere else in this file --
   logo + 5 primary items (2 dropdowns) + Book Now + credits/staff/notif/account cluster doesn't
   comfortably fit in one row at 768px tablet-portrait widths. Below 1024px (including 768-1023px)
   the mobile hamburger panel (.menu-panel) is used instead, same as narrower phone widths. Every
   other rule in this file keeps the original 768px breakpoint untouched -- only the nav switches
   later.
========================================= */

@media (min-width: 1024px) {
  .tsg-home .tsg-desktop-nav {
    display: flex;
  }

  .tsg-home .menu-btn {
    display: none;
  }

  .tsg-home .menu-panel {
    display: none !important;
  }

  .tsg-home .tsg-header-right > .tsg-book-now,
  .tsg-home .tsg-header-right > .tsg-nav-link {
    display: inline-flex;
  }

  .tsg-home .tsg-account-dropdown {
    display: block;
  }

  .tsg-home .tsg-lang-form-desktop {
    display: inline-flex;
  }
}


/* Site-wide admin-configurable promo banner (SystemSetting.promo_banner_*), shown when enabled --
   same real feature/context variable _promo_banner.html renders elsewhere, styled to match this
   page's own design system instead of reusing that Tailwind-based partial (this page loads no
   Tailwind runtime). */
.tsg-promo-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: rgba(231,0,0,0.14);
  border-bottom: 1px solid rgba(231,0,0,0.35);
  color: white;
  font-size: 11px;
  font-family: 'Inter', Arial, Helvetica, sans-serif;
}

.tsg-promo-banner i {
  flex-shrink: 0;
  color: var(--tsg-red);
  font-size: 14px;
}

.tsg-promo-banner a {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--tsg-red);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

/* add-i18n-foundation: Rajdhani/Inter (used throughout this file, ~20+ individual selectors
   above) have zero Devanagari or Gujarati glyph coverage -- without this, Hindi/Gujarati text on
   the homepage (the one page that loads this file instead of static/css/style.css) would silently
   fall back to the visitor's OS default font. A blanket descendant override is deliberate here
   rather than editing every one of those ~20 selectors individually: this rule only ever fires
   when <html lang="hi|gu"> is set (from g.locale, see home.html's <html> tag), so it changes
   nothing for English visitors, and !important is scoped to exactly this narrow, correctly-timed
   condition rather than fighting the page's own cascade in general -- same class of justified
   exception as static/css/style.css's .cosmetic-name-shimmer color override. */
html[lang="hi"] .tsg-home *:not(.ti),
html[lang="gu"] .tsg-home *:not(.ti) {
  font-family: 'Noto Sans Devanagari', 'Noto Sans Gujarati', 'Inter', Arial, Helvetica, sans-serif !important;
}