* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --amber: #f5a623;
  --amber-lt: #ffc966;
  --red: #e63946;
  --bg: #0f0c0a;
  --card: #1a1512;
  --line: #2e2620;
  --ink: #f5f0e8;
  --mut: #a89880;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245, 166, 35, .1), transparent);
}

/* Header styled by federalgaming.org HeaderTile CSS */
/* Site header - matches test-rewrite structure */
.site-header {
  --header-height: 90;
  --background-header-color: rgba(0, 0, 0, 0.33);
  position: relative;
  z-index: 100;
  background: transparent;
}

.header-row {
  align-items: center;
  width: 100%;
  display: flex;
  min-height: calc(var(--header-height) * 1px);
  padding: 0 16px;
  box-sizing: border-box;
  position: relative;
}

.header-left,
.header-right {
  flex: 1;
  display: flex;
  align-items: center;
  z-index: 2;
}

.header-right {
  justify-content: flex-end;
}

.header-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.header-center a {
  pointer-events: auto !important;
  position: relative;
  z-index: 2;
}

.header-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  position: relative;
  z-index: 11;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.header-logo img {
  max-height: 60px;
  max-width: min(400px, 55vw);
  width: auto;
  height: auto;
  aspect-ratio: 1434/370;
  display: block;
  opacity: 0;
  transition: opacity .8s ease;
}

.header-logo img.logo-loaded {
  opacity: 1;
}

#back-to-top {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card) 75%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .2s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
  user-select: none;
  -webkit-user-select: none;
}

#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
}

#back-to-top:hover {
  transform: translateY(-2px);
}

.burger-link {
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  padding: 8px;
  text-decoration: none;
}

.burger-link:hover {
  color: #f5a623;
}

.burger-link svg {
  display: block;
}

[data-theme='dark'] #fgi-theme-toggle::before {
  content: '☀';
}

[data-theme='light'] #fgi-theme-toggle::before {
  content: '☾';
}

[data-theme='dark'] #fgi-theme-toggle {
  color: #ffd700 !important;
}

#fgi-theme-toggle {
  width: 28px !important;
  color: #fff !important;
  height: 28px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html[data-theme='dark'] #fgi-theme-toggle:hover {
  transform: scale(1.07);
}

/* Sidebar - dropdown from header like test page */
.sidebar {
  display: none;
}

.site-header.menu-open .sidebar {
  display: flex;
  animation: sidebar-drop 0.3s ease-out;
  flex: 1;
  min-height: calc(100vh - 90px);
  min-height: calc(100dvh - 90px);
  flex-direction: column;
  background: #1f1f1f;
  padding: 16px 16px 24px;
}

.site-header.menu-open {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #1f1f1f;
}

.site-header.menu-open .header-row {
  flex-shrink: 0;
}

@keyframes sidebar-drop {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar nav a {
  color: #fff;
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 8px 0;
  line-height: 1.4em;
  letter-spacing: 0;
  display: block;
  -webkit-font-smoothing: antialiased;
}

.sidebar nav a:hover {
  background: rgba(245, 166, 35, .08);
  color: #f5a623;
}

.terms-pill {
  display: block;
  text-align: center;
  margin-top: 24px;
  padding: 14px 20px;
  border: none;
  border-radius: 999px;
  color: #1a1512;
  background: linear-gradient(135deg, #f5a623, #e8941a);
  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.terms-pill:hover {
  filter: brightness(1.05);
}

.hdr-left {
  flex: 1;
  display: flex;
  align-items: center;
}

.hdr-center {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hdr-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.logo {
  max-height: 70px;
  max-width: 400px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, .6));
}

/* Burger menu button (matches home) */
.burger {
  background: none;
  border: none;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  padding: 8px;
}

.burger:hover {
  color: var(--amber-lt);
}

.burger svg {
  width: 24px;
  height: 24px;
}

/* Theme toggle (matches home #fgi-theme-toggle) */
#fgi-theme-toggle {
  width: 28px;
  height: 28px;
  border: none !important;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

html[data-theme='dark'] #fgi-theme-toggle:hover {
  transform: scale(1.07);
}

#fgi-theme-toggle:active {
  transform: scale(.93);
}

#fgi-theme-toggle:focus-visible {
  outline: 2px solid #4d9fff !important;
  outline-offset: 2px;
}

/* Slide-in menu */
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .6);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.menu-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.side-menu {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(420px, 88vw);
  background: #1a1512;
  border-right: 1px solid var(--line);
  z-index: 201;
  transform: translateX(-102%);
  transition: transform .3s cubic-bezier(.32, .72, .35, 1);
  display: flex;
  flex-direction: column;
  padding: 24px;
  overflow-y: auto;
}

.side-menu.open {
  transform: none;
}

.side-menu .menu-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--mut);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 8px;
}

.side-menu .menu-close:hover {
  color: var(--amber);
}

.side-menu nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 16px;
}

.side-menu nav a {
  color: var(--ink);
  text-decoration: none;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 14px 12px;
  border-radius: 10px;
  transition: background .15s;
}

.side-menu nav a:hover {
  background: rgba(245, 166, 35, .08);
  color: var(--amber-lt);
}

.side-menu .menu-logo {
  max-height: 50px;
  width: auto;
  margin: 8px auto 0;
  display: block;
}

/* Light theme */
html[data-theme='light'] {
  --bg: #f7f3ec;
  --card: #fbf7f5;
  --line: #e2d9c8;
  --ink: #2a2118;
  --mut: #8a7a63;
  /* Matt 2026-11-03: one light-theme gold at the variable level — the
     bright dark-theme golds (#f5a623 / #ffc966) wash out on cream, so
     both amber steps take the podium gradient's deep end, #b87409.
     Every var(--amber) / var(--amber-lt) consumer (Recent link, hovers,
     the active location pill, focus ring) inherits the light shade. */
  --amber: #b87409;
  --amber-lt: #b87409;
}

html[data-theme='dark'] {
  --bg: #0f0c0a;
  --card: #1a1512;
  --line: #2e2620;
  --ink: #f5f0e8;
  --mut: #a89880;
}

html[data-theme='light'] body::before {
  background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(245, 166, 35, .12), transparent);
}

html[data-theme='light'] .logo {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .15));
}

html[data-theme='light'] h1 {
  color: #1a1512;
}

html[data-theme='light'] .side-menu {
  background: #ffffff;
}

html[data-theme='light'] #fgi-theme-toggle {
  color: #2a2118 !important;
}

html[data-theme='light'] .burger-link,
html[data-theme='light'] #burgerBtn {
  color: #2a2118 !important;
}

.pagetitle {
  text-align: center;
  padding: 28px 24px 0;
  position: relative;
}

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 900;
  letter-spacing: -.5px;
  color: #fff;
}

h1 .cherry {
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.sub {
  color: var(--mut);
  margin-top: 10px;
  font-size: 1.05rem;
  font-style: italic;
}

.stats {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 26px auto 0;
  flex-wrap: wrap;
  max-width: 700px;
}

.stat {
  background: rgba(245, 166, 35, .06);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 26px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .35);
  flex: 1 1 0;
}

html[data-theme=light] .stat {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}

.stat b {
  display: block;
  font-size: 1.5rem;
  color: #f9bd55;
  font-variant-numeric: tabular-nums;
}

.stat span {
  font-size: .72rem;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 34px 24px 40px;
  position: relative;
}

.games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 22px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  transition: transform .2s, box-shadow .2s;
}

/* Dice jump lands at the TOP of a card (block:'start'): keep the card clear
   of the sticky .topbar — 73px bar (12+12 padding around the 49px search
   button) + its 8px top margin when stuck = 81px — plus 12px of air. */
.games .card {
  scroll-margin-top: 93px;
}

/* Scroll-triggered reveal: cards are hidden only while JS is running,
           and fade in as they enter the viewport. Nothing ever sits invisible
           on a timer, so the list always survives a refresh. */
.js .games .card {
  opacity: 0;
}

.js .games .card.reveal {
  animation: rise .5s ease both;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.card h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 800;
}

.card .plat {
  font-size: .75rem;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 5px 0 16px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  padding: 11px 6px;
  border-top: 1px solid var(--line);
  font-size: .95rem;
}

tr:first-child td {
  border-top: none;
}

.medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-weight: 800;
  font-size: .85rem;
  background: #362b20;
  color: #c2b4a2;
  box-shadow: inset 0 0 0 1px #54432f;
}

/* Light theme only (Matt, 2026-11-02): ranks below the podium lose the
   dark-mode near-black fill for warm sand with a deep amber-brown
   number. Placed before the tr:nth-child podium rules so gold, silver
   and bronze keep winning there; .card .medal.r1/r2/r3 outrank this
   rule on specificity everywhere. Dark theme is untouched. */
html[data-theme='light'] .medal {
  background: #e9dec6;
  color: #8a5a00;
  box-shadow: inset 0 0 0 1px #ddd0b2;
}

/* Light-theme gold (Matt, 2026-11-03, one system both themes): text set
   in the dark theme's bright golds washes out on cream, so in the light
   theme every piece of readable gold text takes #b87409 — the deep end
   of the site's own gold medal gradient (135deg, #ffc966, #b87409).
   The same gold, in its light-theme shade. Dates (.mode-under) keep
   var(--mut) and are untouched, per Matt. */
html[data-theme='light'] .score {
  color: #b87409;
}

html[data-theme='light'] .card tr.mode-head td {
  color: #b87409;
}

html[data-theme='light'] .stat b {
  color: #b87409;
}

html[data-theme='light'] .card .score-stack .champ-name {
  color: #b87409;
  text-shadow: none;
}

html[data-theme='light'] footer a {
  color: #b87409;
}

tr:nth-child(1) .medal {
  background: linear-gradient(135deg, #ffc966, #b87409);
  color: #3a2500;
  box-shadow: 0 0 12px rgba(245, 166, 35, .5);
}

tr:nth-child(2) .medal {
  background: linear-gradient(135deg, #e8e8e8, #9a9aa5);
  color: #333;
}

tr:nth-child(3) .medal {
  background: linear-gradient(135deg, #e0a060, #8b5a2b);
  color: #2d1a08;
}

tr:nth-child(1) .medal {
  position: relative;
}

tr:nth-child(1) .medal::after {
  content: "👑";
  position: absolute;
  top: -16.5px;
  left: 50%;
  margin-left: -4px;
  transform: translateX(-50%) rotate(-12deg);
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, .8));
}

.name {
  font-weight: 600;
  padding-left: 8px;
}

.score {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--amber-lt);
}

.when {
  font-size: .75rem;
  color: #665c4e;
  text-align: right;
  white-space: nowrap;
}

.empty {
  text-align: center;
  color: var(--mut);
  padding: 80px 20px;
  font-size: 1.15rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
}

.empty .big {
  font-size: 3rem;
  display: block;
  margin-bottom: 16px;
}

footer {
  text-align: center;
  margin: 44px 0 12px;
  color: var(--mut);
  font-size: .9rem;
}

footer a {
  color: var(--amber);
  font-weight: 600;
  text-decoration: none;
}

.cherries {
  font-size: 1.1rem;
  letter-spacing: 6px;
  margin-top: 14px;
  opacity: .8;
}

[data-theme='light'] .topbar {
  background: transparent !important;
  box-shadow: none !important;
}

.topbar {
  --stick: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin: 8px -20px;
  flex-wrap: wrap;
  border-radius: 0 0 24px 24px;
  padding: 12px 20px;
  width: calc(100% + 40px);
  max-width: calc(100% + 40px);
  box-sizing: border-box;
  padding: 12px 20px;
  position: sticky;
  top: 0;
  z-index: 1005;
  background: transparent;
}

.topbar .search-open {
  transform: scale(calc(1 + var(--stick) * .10));
  transform-origin: center;
  transition: transform .18s ease-out;
}

.topbar .submit-btn {
  display: none !important;
  transform: scale(calc(1 + var(--stick) * .10));
  transform-origin: center;
}

.topbar .searchwrap {
  margin: 0;
  flex: 1;
  min-width: 200px;
  max-width: 420px;
}

.searchwrap button.search-open {
  width: 100%;
  padding: 14px 20px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: rgba(15, 12, 10, .5) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--mut);
  font-size: 1rem;
  cursor: pointer;
  text-align: left;
  transition: border .15s;
}

[data-theme=light] .searchwrap button.search-open {
  background: rgba(247, 243, 236, .5) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

}

.searchwrap button.search-open:hover {
  border-color: var(--amber);
  color: var(--ink);
}

/* --- Search overlay --- */
html[data-theme=light] .search-overlay {
  background: rgba(247, 243, 236, .97);
}

#burgerBtn {
  display: none !important;
}

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 1010;
  background: rgba(15, 12, 10, .97);
  display: none;
  flex-direction: column;
  opacity: 0;
  transition: opacity .8s ease;
}

.search-overlay.open {
  display: flex;
  opacity: 1;
}

.search-overlay-head {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

html[data-theme=light] .search-overlay-head input {
  background: #fbf7f5;
}

.search-overlay-head input {
  flex: 1;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #0f0c0a;
  color: var(--ink);
  font-size: 1.1rem;
  outline: none;
}

.search-overlay-head input:focus {
  border-color: var(--amber);
}

.search-overlay-close {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 1rem;
  cursor: pointer;
  white-space: nowrap;
}

.search-overlay-close:hover {
  border-color: var(--amber);
}

.search-overlay-results {
  flex: 1;
  overflow-y: auto;
  padding: 12px 20px 40px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: linear-gradient(180deg, #241d16 0%, #1c1712 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  color: var(--ink);
  font-size: 1rem;
  transition: border .15s, transform .1s;
  content-visibility: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
}

.search-result.enter {
  animation: rise .22s ease both;
}

.search-result:hover {
  border-color: var(--amber);
}

.search-result:active {
  transform: scale(.98);
}

.search-result .r-game {
  font-weight: 700;
  flex: 1;
}

.search-result .r-game mark {
  background: rgba(245, 166, 35, .35);
  color: var(--amber-lt);
  border-radius: 4px;
  padding: 0 2px;
}

.search-result .r-score {
  font-variant-numeric: tabular-nums;
  color: var(--amber-lt);
  font-weight: 700;
}

.search-result .r-plat {
  font-size: .75rem;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.search-overlay-empty {
  text-align: center;
  color: var(--mut);
  padding: 60px 20px;
  font-size: 1.05rem;
  display: none;
}

.submit-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 99px;
  font-weight: 700;
  font-size: 1rem;
  background: linear-gradient(135deg, #f5a623, #d17f0a);
  color: #241500;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s, transform .1s;
}

.submit-btn:hover {
  filter: brightness(1.1);
}

.submit-btn:active {
  transform: scale(.97);
}

.auto-note {
  text-align: center;
  color: var(--mut);
  font-size: .9rem;
  font-style: italic;
  margin: -8px 0 28px;
}

.no-results {
  display: none;
  text-align: center;
  color: var(--mut);
  padding: 40px;
  font-size: 1.1rem;
}

@media(min-width:1600px) {
  h1 {
    font-size: 3.6rem;
  }

  .games {
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  }
}

/* === HERO EXACT === */
/* ================= HERO ================= */
/* Text shadow on "Welcome. Step right up!" (production, both modes) */
#hero .fgi-hero-zoom-welcome,
#hero .fgi-hero-zoom {
  text-shadow: none;
}

/* --- hero entrance / star / shine / pixie-dust CSS (production, verbatim) --- Pure CSS: the entrance zoom runs on its own. The shine passes, pixie flight and dust motes additionally need the production JS driver (see notes). */
/* --- keyframes ------------------------------------------------ */
/* "Step right up!": grows from 82%, eases past full size to 108%, lands at 100% */
@keyframes fgi-hero-desc-zoom {
  0% {
    transform: scale(0.82);
    opacity: 0;
  }

  60% {
    transform: scale(1.08);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* "Welcome.": same entrance, but no overshoot -- just fades and grows into place */
@keyframes fgi-hero-welcome-zoom {
  from {
    transform: scale(0.82);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Center spread: the two halves drift apart symmetrically, then settle back. Uses the `translate` property (not `transform`) so it never fights the zoom, and never triggers page layout -- everything stays on the smooth path. */
@keyframes fgi-hero-spread-r {
  from {
    translate: 0.3em 0;
  }

  to {
    translate: 0 0;
  }
}

@keyframes fgi-hero-spread-l {
  from {
    translate: -0.3em 0;
  }

  to {
    translate: 0 0;
  }
}

/* Shine sweep, two directions: the band parks off-screen, fades in, exits. JS picks one per pass and randomizes speed, peak brightness, and pause. */
@keyframes fgi-hero-shine-ltr {
  0% {
    opacity: 0;
    background-position: calc(140% - 5px) center;
  }

  12% {
    opacity: var(--shine-peak, 0.8);
  }

  55% {
    opacity: var(--shine-peak, 0.8);
  }

  100% {
    opacity: 0;
    background-position: calc(-40% - 5px) center;
  }
}

@keyframes fgi-hero-shine-rtl {
  0% {
    opacity: 0;
    background-position: calc(-40% + 5px) center;
  }

  12% {
    opacity: var(--shine-peak, 0.8);
  }

  55% {
    opacity: var(--shine-peak, 0.8);
  }

  100% {
    opacity: 0;
    background-position: calc(140% + 5px) center;
  }
}

/* --- the two halves -------------------------------------------- */
#hero .fgi-hero-zoom-welcome {
  display: inline-block;
  transform-origin: center;
  animation: fgi-hero-welcome-zoom 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s both, fgi-hero-spread-l 2.2s ease-in-out 1.25s both;
}

#hero .fgi-hero-zoom {
  display: inline-block;
  position: relative;
  /* anchors the shine overlay below */
  transform-origin: center;
  animation: fgi-hero-fade-in 0.8s ease-out 0.2s both;
}

/* --- shine overlay ----------------------------------------------- A copy of the text (from data-text) painted with a diagonal gold gradient, clipped to the letterforms. It sits exactly on top of the base text and carries only the moving highlight -- the words underneath stay solid the whole time. */
#hero .fgi-hero-zoom::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  background-image: linear-gradient(in oklch 105deg, #b89a0000 10%, #d9b800 32%, #ffee00 50%, #d9b800 68%, #b89a0000 90%);
  background-size: 200% auto;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  pointer-events: none;
}

/* Halo that follows the band: the same sweep, blurred, tucked behind the text. Its own smoother gradient -- blended in oklch (no banding) and melting to transparent at the edges so the glow fades in and out. */
#hero .fgi-hero-zoom::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(in oklch 105deg, #b89a0000 10%, #d9b800 36%, #ffee00 50%, #d9b800 64%, #b89a0000 90%);
  background-size: 200% auto;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: none;
  /* removed */
  opacity: 0;
  pointer-events: none;
}

/* A sweep pass runs only while this class is on;
  JS re-adds it every pass with fresh random settings, so no two passes look alike. */
#hero .fgi-hero-zoom.fgi-shine-run::after,
#hero .fgi-hero-zoom.fgi-shine-run::before {
  animation-name: var(--shine-kf, fgi-hero-shine-ltr);
  animation-duration: var(--shine-dur, 2.8s);
  animation-delay: var(--shine-delay, 0s);
  /* star leads, shine trails */
  animation-timing-function: linear;
  animation-iteration-count: 1;
}

#hero .fgi-hero-zoom.fgi-shine-run .fgi-hero-star {
  animation-name: fgi-hero-star-hop, fgi-hero-star-squash, fgi-hero-star-twinkle, fgi-hero-star-wiggle;
  animation-duration: 0.9s, 0.9s, 1.1s, 1.5s;
  animation-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
  animation-iteration-count: infinite, infinite, infinite, infinite;
}

/* The pixie's airspace: the "Step right up!" text plus the sky above it. It never drifts over empty space or the "Welcome." half. */
#hero .fgi-hero-star-clip {
  position: absolute;
  top: -65%;
  right: 0;
  bottom: -5%;
  left: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* The flight runs on the compositor-friendly transform property (driven per pass by JS) so it glides instead of hitching;
  the hop, squash, sparkle and wiggle stay in CSS on the star itself. */
#hero .fgi-hero-star-travel {
  position: absolute;
  top: 38%;
  left: 0;
  opacity: 0;
  /* the WAAPI flight fades this in/out;
  hidden between passes */
  will-change: transform, opacity;
}

#hero .fgi-hero-star {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  font-size: 0.42em;
  line-height: 1;
  color: #ffee00;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.95), 0 0 14px rgba(255, 238, 0, 1), 0 0 32px rgba(255, 220, 0, 0.85);
  opacity: 1;
  /* visibility is gated by the traveler wrapper's fade */
  pointer-events: none;
}

/* Star character animation: hop, squash & stretch, sparkle flash, wiggle. (The flight across the text is driven by JS -- see flyStar -- on the traveler wrapper above.) */
@keyframes fgi-hero-star-twinkle {

  0%,
  100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.8);
  }
}

/* Bouncy hop + playful wiggle, each on its own period so it feels alive. */
@keyframes fgi-hero-star-hop {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -0.55em;
  }
}

/* Disney squash & stretch, locked to the hop's rhythm: the star stretches as it springs up and squashes as it lands. */
@keyframes fgi-hero-star-squash {

  0%,
  100% {
    scale: 1.28 0.72;
  }

  25% {
    scale: 1 1;
  }

  50% {
    scale: 0.84 1.16;
  }

  75% {
    scale: 1 1;
  }
}

@keyframes fgi-hero-star-wiggle {

  0%,
  100% {
    rotate: -10deg;
  }

  50% {
    rotate: 10deg;
  }
}

/* Pixie dust: tiny glowing motes the star sprinkles as it flies. Each mote gets a random gravity flight from JS;
  some bounce off the letters. */
#hero .fgi-hero-dust {
  position: absolute;
  top: -70%;
  right: -8%;
  bottom: -55%;
  left: -8%;
  z-index: 1;
  pointer-events: none;
}

#hero .fgi-dust {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff9a8 0%, #ffee00 45%, rgba(255, 238, 0, 0) 72%);
  box-shadow: 0 0 8px 2px rgba(255, 238, 0, 0.7);
  pointer-events: none;
}

/* --- accessibility ---------------------------------------------- */
/* reduced-motion block removed */



@keyframes fgi-hero-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

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

.top3-card {
  min-width: 220px;
  flex-basis: 100%;
}

.top3-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.top3-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 0.5rem;
}

.top3-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top3-spot.rank-1 {
  order: 2;
}

.top3-spot.rank-2 {
  order: 1;
}

.top3-spot.rank-3 {
  order: 3;
}

.top3-spot.rank-1 .top3-medal {
  font-size: 2rem;
}

.top3-spot.rank-1 .top3-name {
  font-size: 1.3rem;
  font-weight: 800;
  position: relative;
  background: linear-gradient(135deg, #8b4513 0%, #d4af37 20%, #ffec8b 35%, #fff8dc 50%, #ffec8b 65%, #ff8c00 80%, #8b4513 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-shine 4s ease-in-out infinite alternate, flame-flicker 3.5s ease-in-out infinite;
}

@keyframes gold-shine {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 100% 50%;
  }
}

@keyframes flame-flicker {

  0%,
  100% {
    filter: drop-shadow(0 0 6px rgba(255, 140, 0, 0.5)) drop-shadow(0 0 12px rgba(255, 200, 0, 0.3));
  }

  20% {
    filter: drop-shadow(0 0 10px rgba(255, 180, 0, 0.7)) drop-shadow(0 0 18px rgba(255, 220, 50, 0.4));
  }

  40% {
    filter: drop-shadow(0 0 7px rgba(255, 150, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 190, 0, 0.35));
  }

  60% {
    filter: drop-shadow(0 0 12px rgba(255, 170, 0, 0.75)) drop-shadow(0 0 20px rgba(255, 210, 40, 0.45));
  }

  80% {
    filter: drop-shadow(0 0 8px rgba(255, 160, 0, 0.6)) drop-shadow(0 0 16px rgba(255, 200, 30, 0.4));
  }
}

html[data-theme='light'] .top3-spot.rank-1 .top3-name {
  background: linear-gradient(135deg, #6a350d 0%, #a77c1b 20%, #cfaa45 35%, #e3c47b 50%, #cfaa45 65%, #bc6b00 80%, #6a350d 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-shine 4s ease-in-out infinite alternate, flame-flicker 3.5s ease-in-out infinite;
}

.top3-spot.rank-2 .top3-name {
  color: #c0c0c0;
}

.top3-spot.rank-3 .top3-name {
  color: #cd7f32;
}

.top3-sparkle {
  position: absolute;
  color: #d4af37;
  font-size: 0.4rem;
  pointer-events: none;
  opacity: 0.7;
  animation: float-sparkle 5s ease-in-out infinite;
  text-shadow: 0 0 3px rgba(212, 175, 55, 0.5);
}

.top3-sparkle.s1 {
  left: -8px;
  top: 2px;
  animation-delay: 0s;
}

.top3-sparkle.s2 {
  right: -8px;
  top: 6px;
  animation-delay: 0.8s;
}

.top3-sparkle.s3 {
  left: 30%;
  top: -7px;
  animation-delay: 1.6s;
}

.top3-sparkle.s4 {
  right: 30%;
  top: -5px;
  animation-delay: 2.4s;
}

.top3-sparkle.s5 {
  left: -4px;
  top: 12px;
  animation-delay: 3.2s;
}

.top3-sparkle.s6 {
  right: -4px;
  top: 14px;
  animation-delay: 4s;
}

@keyframes float-sparkle {

  0%,
  100% {
    transform: translate(0, 0);
    opacity: 0.7;
  }

  25% {
    transform: translate(2px, -4px);
    opacity: 0.9;
  }

  50% {
    transform: translate(0, -7px);
    opacity: 1;
  }

  75% {
    transform: translate(-2px, -4px);
    opacity: 0.9;
  }
}

.top3-count {
  font-size: 0.75rem;
  color: var(--mut);
  margin-top: 0.2rem;
}

.top3-spot.rank-2 .top3-medal,
.top3-spot.rank-3 .top3-medal {
  font-size: 1.4rem;
}

.top3-spot.rank-2 .top3-name,
.top3-spot.rank-3 .top3-name {
  font-size: 1rem;
  font-weight: 600;
}

.top3-spot .top3-name {
  text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

html[data-theme=light] .top3-spot .top3-name {
  text-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}


/* Hide theme toggle in menu */
body.sidebar-open #fgi-theme-toggle,
.site-header.menu-open #fgi-theme-toggle {
  display: none !important;
}


/* When menu is open: buttons stay white */
body.sidebar-open #fgi-theme-toggle,
body.sidebar-open .burger-link,
body.sidebar-open #burgerBtn,
.site-header.menu-open #fgi-theme-toggle,
.site-header.menu-open .burger-link {
  color: #ffffff !important;
}

body.sidebar-open #fgi-theme-toggle::before {
  color: #ffffff !important;
}

/* Header (menu closed) in light mode: dark buttons */
html[data-theme=light] body:not(.sidebar-open) #fgi-theme-toggle,
html[data-theme=light] body:not(.sidebar-open) .burger-link,
html[data-theme=light] body:not(.sidebar-open) #burgerBtn {
  color: #2a2118 !important;
}


/* Light mode: 50% more translucent shine */
html[data-theme='light'] #hero .fgi-hero-zoom {
  --shine-peak: calc(var(--shine-peak, 0.8) * 0.5);
}


/* Light mode: smooth gradient with no visible edge */
html[data-theme='light'] #hero .fgi-hero-zoom::before {
  display: none !important;
}

html[data-theme='light'] #hero .fgi-hero-zoom::after {
  background-image: linear-gradient(105deg,
      transparent 10%,
      rgba(218, 165, 32, 0) 15%,
      rgba(218, 165, 32, 0.35) 32%,
      rgba(255, 215, 0, 0.5) 50%,
      rgba(218, 165, 32, 0.35) 68%,
      rgba(218, 165, 32, 0) 85%,
      transparent 90%) !important;
  background-size: 200% auto !important;
  background-repeat: no-repeat !important;
}





/* Light mode: darker gold for visibility */
html[data-theme='light'] #hero .fgi-hero-zoom::after {
  background-image: linear-gradient(105deg,
      transparent 10%,
      rgba(218, 165, 32, 0) 15%,
      rgba(218, 165, 32, 0.35) 32%,
      rgba(255, 215, 0, 0.5) 50%,
      rgba(218, 165, 32, 0.35) 68%,
      rgba(218, 165, 32, 0) 85%,
      transparent 90%) !important;
  background-size: 200% auto !important;
  background-repeat: no-repeat !important;
}

html[data-theme='light'] #hero .fgi-hero-star {
  color: #8b6914 !important;
}

html[data-theme='light'] #hero .fgi-dust {
  background: radial-gradient(circle, #fffef2 0%, #d4a017 45%, rgba(212, 160, 23, 0) 72%) !important;
  box-shadow: 0 0 8px 2px rgba(212, 160, 23, 0.6) !important;
}

/* Mobile: game cards spill over edges to match location toggle spill-over */
@media (max-width:600px) {
  .card {
    margin: 0 -8px
  }
}

.search-result:active {
  transform: scale(0.98) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) !important
}

@keyframes resultIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.search-overlay-head input:focus {
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.25) !important;
  border-color: #f5a623 !important;
  outline: none !important
}

.search-overlay-empty {
  padding: 16px 20px 24px !important;
  text-align: center !important;
  color: var(--mut, #a89880) !important;
  font-size: 0.95rem !important;
  display: block !important;
  margin: 0 !important
}

.search-overlay-empty[hidden] {
  display: none !important
}




.search-overlay-results {
  display: block !important;
  align-content: flex-start !important
}

.search-overlay-empty {
  margin-top: 0 !important
}

.search-overlay {
  overscroll-behavior-y: none !important;
  overscroll-behavior: none !important
}

html[data-theme='light'] .search-overlay {
  background: rgba(250, 246, 240, .98) !important
}

html[data-theme='light'] .search-result {
  background: linear-gradient(180deg, #ffffff 0%, #f5efe4 100%) !important;
  border-color: #e0d5c0 !important;
  box-shadow: 0 2px 8px rgba(138, 90, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .6) !important
}

html[data-theme='light'] .search-result .r-game {
  color: #1a1208 !important
}

html[data-theme='light'] .search-result .r-score {
  color: #8a5a00 !important
}

html[data-theme='light'] .search-result .r-plat {
  color: #8a7a60 !important
}

html[data-theme='light'] .search-result mark {
  background: rgba(245, 166, 35, .35) !important;
  color: #1a1208 !important
}

html[data-theme='light'] .search-overlay-empty {
  color: #6a5a40 !important
}

html[data-theme='light'] .search-overlay-close {
  color: #1a1208 !important;
  border-color: #d0c0a0 !important
}

.search-result {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important
}

button,
a,
.loc-pill,
.search-open {
  -webkit-tap-highlight-color: transparent !important;
  tap-highlight-color: transparent !important
}

.search-result {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important
}

/* mode sub-table headers on game cards (modes build 2026-10-24) */
.card td.score .mode-under {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
  margin-bottom: 3px;
  line-height: 1.25;
}

.card .medal.r1 {
  background: linear-gradient(135deg, #ffc966, #b87409);
  color: #3a2500;
  box-shadow: 0 0 12px rgba(245, 166, 35, .5);
  position: relative;
}

.card .medal.r2 {
  background: linear-gradient(135deg, #e8e8e8, #9a9aa5);
  color: #333;
}

.card .medal.r3 {
  background: linear-gradient(135deg, #e0a060, #8b5a2b);
  color: #2d1a08;
}

.card .medal.r1::after {
  content: "\1F451";
  position: absolute;
  top: -16.5px;
  left: 50%;
  margin-left: -4px;
  transform: translateX(-50%) rotate(-12deg);
  font-size: 1.4rem;
  line-height: 1;
  filter: drop-shadow(0 0 6px rgba(255, 200, 80, .8));
}

.card tr.mode-head td {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber-lt);
  text-align: left;
  padding: 16px 6px 2px;
  border-top: 1px solid var(--line);
}

/* 2026-10-25: mode headers centered over the score area (Matt) */
.mode-head {
  text-align: center !important;
  justify-content: center !important;
}

/* 2026-10-25: mode name on the divider line, centered (Matt) — replaces the tall header row */
.card tr.mode-head td {
  position: relative;
  text-align: center !important;
  padding: 0 6px;
  height: 1px;
}

.card tr.mode-head .mode-name {
  position: relative;
  top: .55em;
  background: var(--card);
  padding: 0 12px;
}

/* 2026-10-25: no divider line on mode headers; name centered, slim (Matt) */
.card tr.mode-head td {
  border-top: none !important;
  text-align: center !important;
  padding: 9px 6px 1px !important;
  height: auto !important;
}

.card tr.mode-head .mode-name {
  position: static !important;
  top: auto !important;
  background: transparent !important;
  padding: 0 !important;
}

/* 2026-10-25 FINAL: name on the single divider line, no second line, no extra spacing (Matt) */
.card tr.mode-head td {
  border-top: 1px solid var(--line) !important;
  text-align: center !important;
  padding: 0 6px !important;
  height: 1px !important;
}

.card tr.mode-head .mode-name {
  position: relative !important;
  top: .55em !important;
  background: var(--card) !important;
  padding: 0 12px !important;
}

.card tr.mode-head+tr td {
  border-top: none !important;
}

/* 2026-10-25 FINAL 2: mode name alone in the gap — no lines around it (Matt) */
.card tr.mode-head td {
  border-top: none !important;
  text-align: center !important;
  padding: 8px 6px 0 !important;
  height: auto !important;
}

.card tr.mode-head .mode-name {
  position: static !important;
  top: auto !important;
  background: transparent !important;
  padding: 0 !important;
}

.card tr.mode-head+tr td {
  border-top: none !important;
}

/* 2026-10-25: score and its date centered in the right cell (Matt) */
.card td.score {
  text-align: center !important;
}

/* 2026-10-25: the score never wraps — the cell is score line + date line */
.card td.score .score-val {
  white-space: nowrap;
}

/* 2026-10-25: card rows vertically centered (Matt) */
.card td {
  vertical-align: middle;
}

/* 2026-10-25: score + date center as one unit (Matt) */
.card td.score .score-stack {
  display: inline-block;
  text-align: center;
}

.card td.score .score-stack .mode-under {
  letter-spacing: .16em;
  margin-right: -.16em;
}

/* 2026-10-25: optical centering — center the glyphs, not the leading */
.card td.score .score-stack {
  vertical-align: middle;
}

.card td.score .score-stack .score-val {
  display: block;
  line-height: 1.05;
}

.card td.score .score-stack .mode-under {
  margin-bottom: 0;
  line-height: 1.3;
  padding-top: 2px;
}

/* 2026-10-25: the score unit sits right, on the same padding as the
   left side; the score stays centered over the date inside it (Matt) */
.card td.score {
  text-align: right !important;
}

/* 2026-10-25: optical inset match — a circle reads further in than a
   flat edge, so the right side gets 5px more (Matt) */
.card td.score {
  padding-right: 11px;
}

/* 2026-10-25: tighten the header band between tables (Matt) */
.card tr.mode-head td {
  padding-top: 4px !important;
  line-height: 1.15;
}

.card tr.mode-head+tr td {
  padding-top: 5px !important;
}

/* 2026-10-25: header band middle setting — tight was too low (Matt) */
.card tr.mode-head td {
  padding-top: 6px !important;
}

.card tr.mode-head+tr td {
  padding-top: 8px !important;
}

/* 2026-10-25: mode titles wear a small gold pill so they read as titles */
.card tr.mode-head .mode-name {
  display: inline-block !important;
  background: rgba(245, 166, 35, .10) !important;
  border: 1px solid rgba(245, 166, 35, .38);
  border-radius: 999px;
  padding: 3px 12px 4px !important;
  font-size: 11px;
}

/* 2026-10-25: pill rejected — mode titles wear a TAB outline instead */
.card tr.mode-head .mode-name {
  background: rgba(255, 255, 255, .03) !important;
  border: 1px solid rgba(245, 166, 35, .42);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 4px 14px 5px !important;
}

/* 2026-10-25: tab sides fade down, no hard cut-off */
.card tr.mode-head .mode-name {
  position: relative;
  border: none;
  border-top: 1px solid rgba(245, 166, 35, .42);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 88%) !important;
}

.card tr.mode-head .mode-name::before,
.card tr.mode-head .mode-name::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: -12px;
  width: 1px;
  background: linear-gradient(180deg, rgba(245, 166, 35, .42), rgba(245, 166, 35, 0));
  pointer-events: none;
}

.card tr.mode-head .mode-name::before {
  left: 0;
}

.card tr.mode-head .mode-name::after {
  right: 0;
}

/* 2026-10-25: fade glitch fix (position the title itself) + more minimal */
.card tr.mode-head .mode-name {
  position: relative !important;
  border-top: 1px solid rgba(245, 166, 35, .28);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 80%) !important;
}

.card tr.mode-head .mode-name::before,
.card tr.mode-head .mode-name::after {
  top: 6px;
  bottom: -8px;
  background: linear-gradient(180deg, rgba(245, 166, 35, .28), rgba(245, 166, 35, 0));
}

/* 2026-10-25: fade bars removed for good — open tab, top edge only */
.card tr.mode-head .mode-name::before,
.card tr.mode-head .mode-name::after {
  content: none !important;
}

.card tr.mode-head .mode-name {
  border-left: none;
  border-right: none;
  background: none !important;
}

/* 2026-10-31: CHAMP label for CHAMP-slot games (Matt) — floats just above
   the #1 score inside its own stack, centered over score + date, gold glow;
   adds no row height */
.card tr.champ-row td.score .score-stack {
  position: relative;
}

.card .score-stack .champ-name {
  position: absolute;
  width: max-content;
  left: 50%;
  bottom: 100%;
  transform: translateX(calc(-50% + .11em));
  margin-bottom: 2px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--amber-lt);
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 200, 80, .9), 0 0 16px rgba(245, 166, 35, .75), 0 0 28px rgba(245, 166, 35, .45);
}

/* 2026-10-31: while a refresh restore is pending, hold the paint so the
   board never flashes its top (Matt) */
html.fgi-hold {
  background: var(--bg);
}

html.fgi-hold body {
  visibility: hidden;
}