* {
          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;
        }
        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;
        }
        /* 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:#262019;
          color:#777;
        }
        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; }