/* The gateway's card-table felt, in the two looks an admin can choose.
   ------------------------------------------------------------------
   `gateway_background_style` + `gateway_background_mode` (see
   server/utils/backgroundStyles.js) put ONE of `gw-bg-felt1` / `gw-bg-felt2`
   on <html>, or NEITHER for the original.

   ⚠️ NOTHING IN THIS FILE APPLIES WITHOUT ONE OF THOSE CLASSES, and that is
   the whole design: with neither, the page falls back to what
   gateway-themes.css already says — the hero photo with its corner props —
   which IS the original look. So "the setting is off", "the server is
   unreachable" and "the admin chose Original" are one state, with no rule of
   its own and nothing to keep in step.

   Still ANDed with the two default themes (`gw-desk-ios-den` / `gw-mob-ios-den`)
   as before: the other twenty gateway themes have backgrounds of their own that
   this setting has no business repainting.

   Twin of html.game-theme-felt's own background block in
   src/styles/gameThemeFelt.css, iOS's TableFeltBackground and Android's
   tableFelt() — keep them in step. felt-texture.svg is duplicated in src/ for
   the React app; this copy is the gateway's, which has no bundler. */

/* ── GREEN FELT 1 — the realistic felt shipped Sep 2026 ──
   Layers, top to bottom: grey fibre/mottle noise (felt-texture.svg) blended
   soft-light into the green, a warm pool of light where the table is lit, a
   vignette falling off to the rails, and the green wash itself. */
html.gw-bg-felt1.gw-desk-ios-den body,
html.gw-bg-felt1.gw-mob-ios-den body {
    background-color: #10361a;
    background-image:
        url('/felt-texture.svg'),
        radial-gradient(ellipse 75% 65% at 50% 38%, rgba(255, 236, 170, 0.10), transparent 70%),
        radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(180deg, #14401f 0%, #10361a 55%, #0c2914 100%);
    background-size: 480px 480px, auto, auto, auto;
    background-attachment: fixed;
    background-blend-mode: soft-light, normal, normal, normal;
}

/* ── GREEN FELT 2 — the felt from the LAUNCH SPLASH ──
   (public/launch-screen-*.jpg), without the sign, the cards or the board.

   ⚠️ THE FOUR STOPS ARE MEASURED OFF THAT IMAGE, NOT DESIGNED. Its felt was
   masked out of the props, its low-frequency field recovered by normalized
   convolution, and a radial fit run against it: centred (50%, 42%), sized to
   the farthest corner, these stops reproduce the field to a mean 1.3/255 per
   channel (p95 3.5). Re-fit rather than nudge — the point of this look is that
   it IS the splash's felt.

   Two things the fit settled: there is NO warm pool and no separate vertical
   wash (the residual after the radial is within ±1.4/255 top to bottom, so the
   splash has neither), and the TEXTURE is the shipped one (the splash's own
   weave was measured against felt-texture.svg across four spatial bands and
   they agree to within ~25%, so this look needed no new tile on any platform).

   Keep in step with html.game-theme-felt.game-bg-felt2 and iOS's
   TableFeltBackground(style: .felt2). */
html.gw-bg-felt2.gw-desk-ios-den body,
html.gw-bg-felt2.gw-mob-ios-den body {
    background-color: #1e3611;
    background-image:
        url('/felt-texture.svg'),
        radial-gradient(ellipse farthest-corner at 50% 42%,
            #2a4315 0%,
            #253f13 35%,
            #182f0d 70%,
            #10230a 100%);
    background-size: 480px 480px, auto;
    background-attachment: fixed;
    background-blend-mode: soft-light, normal;
}

/* ── What both felts do to the hero ──
   One continuous felt: the hero lets the page's felt show through rather than
   drawing its own photo (whose baked-in felt would not match), and the
   corner-prop strips cut from that photo go with it.

   Under ORIGINAL neither class is present, so the photo and its props come
   back on their own — which is exactly what "Original" means here. */
html.gw-bg-felt1.gw-desk-ios-den .hero-section,
html.gw-bg-felt1.gw-mob-ios-den .hero-section,
html.gw-bg-felt2.gw-desk-ios-den .hero-section,
html.gw-bg-felt2.gw-mob-ios-den .hero-section {
    background: transparent !important;
}
html.gw-bg-felt1.gw-desk-ios-den .hero-props,
html.gw-bg-felt1.gw-mob-ios-den .hero-props,
html.gw-bg-felt2.gw-desk-ios-den .hero-props,
html.gw-bg-felt2.gw-mob-ios-den .hero-props {
    display: none !important;
}

/* The gold "lit window" glow behind the sign — what the old hero gradient drew
   at 50% 28% and iOS/Android's FeltBackground still draws (0.22 gold fading to
   clear over ~260px). Anchored to the icon itself rather than to the page, so
   it stays centred on the sign whatever size the single-page ladder gives it.

   A felt-era addition: under ORIGINAL the photo carries its own lighting, so
   this must not apply — which it doesn't, both rules being class-scoped. */
html.gw-bg-felt1.gw-desk-ios-den .hero-image,
html.gw-bg-felt1.gw-mob-ios-den .hero-image,
html.gw-bg-felt2.gw-desk-ios-den .hero-image,
html.gw-bg-felt2.gw-mob-ios-den .hero-image {
    position: relative;
}
html.gw-bg-felt1.gw-desk-ios-den .hero-image::before,
html.gw-bg-felt1.gw-mob-ios-den .hero-image::before,
html.gw-bg-felt2.gw-desk-ios-den .hero-image::before,
html.gw-bg-felt2.gw-mob-ios-den .hero-image::before {
    content: '';
    position: absolute;
    inset: -200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.22) 0%, rgba(255, 215, 0, 0.08) 45%, transparent 70%);
    z-index: -1;
    pointer-events: none;
}