/*
  Grand Slam Bridge - the portal theme (2026-10-20; tuned to the logo 2026-11-22: its gold is the
  accent, Metallic blue is nearer its navy, headings are in a serif like its lettering).

  The four themes of the new look - Mahogany, and Metallic blue, black and silver - as variables,
  for every page that wears the new frame (gsb-frame-v2.css / .js). A theme is ONLY a block of
  variables, switched by data-v2-theme on <html>; no rule anywhere names a theme. The choice is
  the player's, kept in this browser as localStorage "gsb.portal.theme": "mahogany",
  "metallic-blue", "metallic-black" or "metallic-silver". gsb-stage-v2.js puts the attribute on
  <html> before anything is drawn.

  THESE ARE THE TABLE'S VALUES. table-v2.html has the same variables written inside it (its
  <style id="v2Layout">), with the same names and the same values; this file is those, without
  the ones that only a table needs (card sizes, the turn light, the score box). The table does
  not load this file yet - see handover/2026-10-06-home-v2-and-the-frame.md for what it would
  take.

  THE SURFACE. Only Mahogany has felt: the table's photograph of felt under a darkening, lit
  from the middle and dimmed toward its edges. The three metallic themes have a smooth surface
  of one colour (--v2-surface) with a glow, a dimmer edge and a faint sheen.
*/
/*
  THE HEADINGS' SERIF (2026-11-22): Libre Baskerville Bold, self-hosted like Fraunces, Manrope and
  Lato (public/assets/fonts/, its licence beside it). It was chosen for the logo: the sturdy,
  bracketed letters of "bridgeclub" are a bold Baskerville's. One weight is the whole face, so the
  range says every weight is this file and none is thickened by the browser; size-adjust brings
  its wide letters to about the width Fraunces had, so a heading that fitted still fits.

  It reaches a heading through --gsb-display, the variable every heading already reads, and only
  on a page of the new look (html.v2-page). The table does not load this file, so the table's
  own text is what it was.
*/
@font-face{
  font-family:"Libre Baskerville";
  src:url("/assets/fonts/libre-baskerville-latin-700.woff2") format("woff2");
  font-weight:400 900;
  font-style:normal;
  font-display:swap;
  size-adjust:90%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*
  ONE SET OF FONTS (2026-10-11). Two families and nothing else:
      --v2-font-body   Lato - body text, buttons, menus, forms, tables, numbers. The font the table has always used.
      --v2-font-head   Libre Baskerville - page titles and large headings ("Find a Table", "Tournaments").
  TO CHANGE A FONT, CHANGE ONE OF THESE TWO LINES (and give the new family an @font-face). Every page of the new look reads its text font
  through --gsb-ui and its heading font through --gsb-display, and both are pointed here; no page names a family of its own. It was Manrope
  for the text of every page but the table, Lato at the table, and here and there Inter, Georgia, Roboto and a monospace.
  NOT THESE TWO, on purpose: the lettering of a playing card and of a bidding chip, the suit symbols' own stack (which keeps a suit a text
  glyph and not an emoji), the logo, and the Google and Apple sign-in buttons, whose lettering is the provider's.
  The table (table-v2.html) does not load this file; it carries the same two names, pointed at the same families.

  ONE SCALE OF SIZES: 13 small print, 15 body text and button labels, 17 lead text, 20 a panel's heading, 26 a small title, 34 a page's title.
*/
@font-face{font-family:"Lato";src:url("/assets/fonts/lato-latin-ext-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lato";src:url("/assets/fonts/lato-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lato";src:url("/assets/fonts/lato-latin-ext-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lato";src:url("/assets/fonts/lato-latin-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Lato";src:url("/assets/fonts/lato-latin-ext-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Lato";src:url("/assets/fonts/lato-latin-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --v2-font-body:"Lato",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --v2-font-head:"Libre Baskerville",Georgia,"Times New Roman",serif;
  --v2-fs-small:13px; --v2-fs-body:15px; --v2-fs-label:15px; --v2-fs-lead:17px; --v2-fs-panel:20px; --v2-fs-title-s:26px; --v2-fs-title:34px;
}
html.v2-page:root,html.au-page:root{--gsb-ui:var(--v2-font-body);--gsb-display:var(--v2-font-head);--v2-font:var(--v2-font-body);--v2-font-stack:var(--v2-font-body)}
html.v2-page body,html.au-page body{font-family:var(--v2-font-body)}
html.v2-page :is(button,input,select,textarea),html.au-page :is(button,input,select,textarea){font-family:var(--v2-font-body)}

:root{
  --v2-rail:76px; --v2-rail-in:76px; --v2-rail-zoom:1;      /* outside the outer page: the bars as they were. Inside it: see below, and THE SIDE BARS in gsb-frame-v2.css */
  /* A PAGE THAT SHOWS A BOARD INSIDE IT (the Hand Viewer, the Hand Editor's editing stage), 2026-10-29:
     what is behind and round the board, and the board's edge against it. Plain black, so the board's
     own surface - felt, light green, light blue - stands out; Metallic silver's board is black already,
     so there the page is a dark grey. */
  --v2-board-page:#000;
  --v2-on-board-page:#F3EBD8;                      /* text written straight on that page: light in every theme, the page being dark in every theme */
  --v2-board-rim:0 0 0 2px rgba(var(--v2-accent-rgb,214,168,74),.38),0 18px 48px rgba(0,0,0,.65);
  --v2-panel:#0E0D0B;
  --v2-well:#1c1912;
  --v2-line:#2A261C;
  --v2-ink:#F3EBD8;
  --v2-dim:#C9BFA3;
  --v2-accent:#D6A84A;                             /* THE LOGO'S GOLD (2026-11-22), in Mahogany, Metallic blue and Metallic black alike; it was #D4AF5A, #E3BD63 and a copper, #D08A5B */
  --v2-accent-rgb:214,168,74;
  --v2-accent-rgb-s:214 168 74;                    /* the same three numbers, space-separated, for rgb(... / a) */
  --v2-accent-dim:#5C4720;
  --v2-on-accent:var(--v2-panel);
  /* THE BARS ARE A PHOTOGRAPH (2026-10-13): --v2-bar for a bar that stands (the computer's two side bars), --v2-bar-h for one that lies (the phone's
     top and bottom bars, the table's too) - each STRETCHED to fill its bar exactly, never tiled, over the bar as it was drawn before, which is
     what shows until the picture has loaded. */
  --v2-bar:url("/assets/images/bar-mahogany.jpg") center / 100% 100% no-repeat,#6c4630;
  --v2-bar-h:url("/assets/images/bar-mahogany-h.jpg") center / 100% 100% no-repeat,#6c4630;
  --v2-on-bar:var(--v2-ink);
  --v2-on-bar-shadow:var(--v2-felt-shadow);
  --v2-on-felt:var(--v2-ink);
  --v2-on-felt-dim:var(--v2-dim);
  --v2-on-felt-accent:var(--v2-accent);
  --v2-felt-shadow:0 1px 3px #000,0 0 6px #000;
  --v2-felt-under:linear-gradient(145deg,#17684b 0%,#0f5139 42%,#0b412f 100%);
  --v2-felt-blend:normal;
  --v2-felt-dark:.3;      /* (.46 over the old photograph; the new felt is a deeper green already) */
  --v2-felt-photo:url("/assets/images/green-velvet-tile.jpg") top left / 512px 512px repeat;      /* (2026-10-13) the new felt, TILED at 512 px (2026-10-13, later: the tile is the zoomed-out, seamless picture Kas made, 1024 square, shown at half its size; ?v=2 is so that a browser does not show the earlier tile of the same name). It was felt.jpg. */
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,255,255,.13),rgba(255,255,255,0) 60%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 55%,rgba(0,0,0,.32) 100%);
  --v2-felt-rim:.32;
  --v2-felt-sheen:none;
  --v2-engrave-art:url("/assets/brand/engraved-wordmark-dark.svg?v=2026-10-17-1");      /* (2026-10-17) the engraved wordmark: bridgeclub.com pressed into the surface (scripts/make-engraving.js). Dark here; Ivory, Cream and Camel, which are light, have the light one */
  --v2-warn:#E58B84;
  --v2-warn-line:#8A2E27;
  --v2-warn-well:#1a0f0e;
  --v2-online:#5FA463;
  --v2-reserved:#85B2F0;      /* a seat held for somebody - the table page's own variable and value (table-v2.html), one for all four themes */
  --v2-on-reserved:#16306E;   /* and what is written on it */
  --v2-backdrop:rgba(0,0,0,.62);
  --v2-radius:16px;
  --v2-radius-sm:10px;
  --v2-shadow:0 18px 50px rgba(0,0,0,.55);
  --v2-shadow-sm:0 6px 18px rgba(0,0,0,.45);
  --v2-slide:.32s;
  --v2-slide-in:cubic-bezier(.2,.8,.2,1);
  --v2-slide-out:cubic-bezier(.8,0,.8,.2);
  --v2-photo-fade:#0E0D0B;                         /* what a photograph in a panel fades into: the panel */
  --v2-you:#6FB1FF;                                /* "this is you" (or the player looked up), written on a panel: a blue, at least 4.5 to 1 on the panel in every theme */
  /* THE LOGO (2026-11-22). The site's logo is a square picture with its ground painted in, in six
     grounds (public/assets/brand/logo-<ground>.png, 1254 square; the -672.jpg beside each is the copy
     a page shows). A theme names the one that suits it, and the logo's own gold, for the rim of the
     plaque it is shown as - the same gold in every theme, because it is the picture's and not the
     theme's accent. */
  --v2-logo:url("/assets/brand/logo-on-dark.png");      /* (2026-10-10) the logo with a see-through ground, for a dark page: it was the green-ground picture, which stood on the page as a block */
  --v2-gold:#D6A84A;
}
/* (2026-10-31, feature/themes-cleanup) the Blue bar (Metallic blue, then Blue & Ivory) was here: its theme is removed */
:root:is([data-v2-theme="black"],[data-v2-theme$="-black"]){
  --v2-panel:#0B0C0D; --v2-well:#191A1C; --v2-line:#303236; --v2-ink:#ECE8E1; --v2-dim:#B4AFA6;
  /* 2026-11-22: the accent was a copper, #D08A5B. It is the logo's gold now - this theme shows the light blue logo, whose own
     lettering and ring are that gold, and a copper beside it was a second warm metal that matched nothing in the picture. */
  --v2-accent:#D6A84A; --v2-accent-rgb:214,168,74; --v2-accent-rgb-s:214 168 74; --v2-accent-dim:#5C4720; --v2-on-accent:#0B0C0D;
  --v2-bar:url("/assets/images/bar-black.jpg") center / 100% 100% no-repeat,linear-gradient(90deg,#6C6F78 0%,#2C2E34 9%,#1B1C20 24%,#0C0D0F 50%,#1B1C20 76%,#30323A 92%,#575A63 100%);
  --v2-bar-h:url("/assets/images/bar-black-h.jpg") center / 100% 100% no-repeat,linear-gradient(180deg,#6C6F78 0%,#2C2E34 4%,#1B1C20 14%,#0C0D0F 50%,#1B1C20 86%,#30323A 96%,#575A63 100%);
  --v2-on-bar:#ECE8E1; --v2-on-bar-shadow:0 1px 3px #000,0 0 6px #000;
  --v2-warn:#EE938B; --v2-warn-line:#8A2E27; --v2-warn-well:#1E1211;
  /* THE SURFACE: TAN LINEN (2026-10-13; it was a smooth light blue) - a photograph, TILED at 432 px (half the tile's own 864: a weave the size of
     linen's; the tile is tan-linen.jpg with each edge cross-faded into the opposite one, so it repeats without a join), over a drawn colour
     that is what shows until it has loaded. */
  --v2-surface:#C69F72;
  --v2-felt-under:linear-gradient(150deg,#CFA97D 0%,#C69F72 50%,#B88F62 100%);
  --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.26),rgba(255,255,255,0) 66%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 48%,rgba(0,0,0,.2) 100%); --v2-felt-rim:.2;
  --v2-felt-sheen:none;
  --v2-on-felt:#24160A; --v2-on-felt-dim:#4E3A22; --v2-on-felt-accent:#4E3100;
  --v2-felt-shadow:0 0 2px rgba(255,255,255,.9),0 0 5px rgba(255,255,255,.7);
  --v2-photo-fade:#0B0C0D; --v2-you:#6FB1FF;
  --v2-logo:url("/assets/brand/logo-on-dark.png");
}
:root[data-v2-theme="camel-black"]{      /* (2026-10-31, feature/themes-cleanup) DESERT'S BARS ARE A DEEP MAROON: the black bar (Ebony & Ivory keeps it) with each
   pixel's lightness kept - its sheen and grain - and a maroon added (bar-maroon.jpg, -h, from bar-black.jpg); everything else is the Black bar's,
   its light words included */
  --v2-bar:url("/assets/images/bar-maroon.jpg") center / 100% 100% no-repeat,linear-gradient(90deg,#AB555D 0%,#5E0D1F 9%,#370E14 24%,#1A0708 50%,#370E14 76%,#631323 92%,#933F49 100%);
  --v2-bar-h:url("/assets/images/bar-maroon-h.jpg") center / 100% 100% no-repeat,linear-gradient(180deg,#AB555D 0%,#5E0D1F 4%,#370E14 14%,#1A0708 50%,#370E14 86%,#631323 96%,#933F49 100%);
}
:root:is([data-v2-theme="silver"],[data-v2-theme$="-silver"]){
  --v2-board-page:#2B2D31; --v2-board-rim:0 0 0 2px rgba(255,255,255,.30),0 18px 48px rgba(0,0,0,.6);
  --v2-panel:#F2F4F6; --v2-well:#E2E6EB; --v2-line:#B9C0CA; --v2-ink:#17191C; --v2-dim:#474D55;
  /* 2026-11-22: this theme's accent is a blue, not a gold - the logo's gold on a near-white panel is 2.0 to 1, and dark enough to
     read it is a brown. So the accent takes the logo's NAVY (#0C2F50; it was #1F3F7A), and the gold is the plaque's rim only. */
  --v2-accent:#0C2F50; --v2-accent-rgb:12,47,80; --v2-accent-rgb-s:12 47 80; --v2-accent-dim:#8195AB; --v2-on-accent:#F2F4F6;
  --v2-bar:url("/assets/images/bar-silver.jpg") center / 100% 100% no-repeat,linear-gradient(90deg,#FBFCFD 0%,#CDD2D9 9%,#AEB4BD 24%,#858C97 50%,#AEB4BD 76%,#D2D7DE 92%,#F3F5F8 100%);
  --v2-bar-h:url("/assets/images/bar-silver-h.jpg") center / 100% 100% no-repeat,linear-gradient(180deg,#FBFCFD 0%,#CDD2D9 4%,#AEB4BD 14%,#858C97 50%,#AEB4BD 86%,#D2D7DE 96%,#F3F5F8 100%);
  --v2-on-bar:#17191C; --v2-on-bar-shadow:0 1px 0 rgba(255,255,255,.55);
  --v2-warn:#A52A22; --v2-warn-line:#C98A84; --v2-warn-well:#F7E6E4;
  --v2-backdrop:rgba(16,22,30,.55);
  --gsb-suit-spade:#1747B0; --gsb-suit-heart:#B3261E; --gsb-suit-diamond:#775400; --gsb-suit-club:#0F6B34;
  /* THE SURFACE: NAVY LEATHER (2026-10-13; it was a smooth black) - a photograph, TILED at 400 px (half the tile's own 800; the tile is the picture with
     each edge cross-faded into the opposite one, so it repeats without a join. It was laid once over the whole surface, and showed too
     much of the hide), over a drawn colour that is what shows until it has loaded. */
  --v2-surface:#42423E;
  --v2-felt-under:linear-gradient(150deg,#4A4A46 0%,#42423E 50%,#33332F 100%);
  --v2-felt-photo:url("/assets/images/charcoal-leather-tile.jpg") top left / 512px 512px repeat; --v2-felt-blend:normal; --v2-felt-dark:.06;
  --v2-felt-glow:radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.08),rgba(255,255,255,0) 64%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.36) 100%); --v2-felt-rim:.36;
  --v2-felt-sheen:none;
  --v2-on-felt:#F4F6F8; --v2-on-felt-dim:#CDD3DB; --v2-on-felt-accent:#A9C2F0;
  --v2-felt-shadow:0 1px 3px #000,0 0 6px #000;
  --v2-photo-fade:#F2F4F6; --v2-you:#1747B0;
  --v2-logo:url("/assets/brand/logo-on-light.png");      /* Silver's page is light: the logo drawn for a light ground, see-through */
}

/* GOLD (2026-10-13), the fifth theme. THE BARS ARE GOLD, with the metallic sheen the three metallic themes have - a band of light at each edge
   and a deeper gold through the middle - and what is on them is a near-black brown, which reads on every part of that band. THE SURFACE IS RED
   VELVET. PANELS, POPUPS AND CARDS are a very dark red, near black, between the two, with a warm light text; the accent is a gold a little
   lighter than the logo's, so that it is clear on that panel. Cards in a hand are the cards' own and are not touched. */
:root:is([data-v2-theme="gold"],[data-v2-theme="gold2"],[data-v2-theme$="-gold"]){
  --v2-panel:#1A0B0C; --v2-well:#2B1315; --v2-line:#55292C; --v2-ink:#F8EEDA; --v2-dim:#D8C4A8;
  --v2-accent:#E6BC5C; --v2-accent-rgb:230,188,92; --v2-accent-rgb-s:230 188 92; --v2-accent-dim:#6E5422; --v2-on-accent:#1A0B0C;
  --v2-bar:url("/assets/images/bar-gold-v2.jpg") center / 100% 100% no-repeat,linear-gradient(90deg,#FFF0B8 0%,#E8C055 9%,#CFA033 24%,#A97C1C 50%,#CFA033 76%,#EAC45A 92%,#FBE7A6 100%);
  --v2-bar-h:url("/assets/images/bar-gold-v2-h.jpg") center / 100% 100% no-repeat,linear-gradient(180deg,#FFF0B8 0%,#E8C055 4%,#CFA033 14%,#A97C1C 50%,#CFA033 86%,#EAC45A 96%,#FBE7A6 100%);
  --v2-on-bar:#231703; --v2-on-bar-shadow:0 1px 0 rgba(255,255,255,.45);
  --v2-warn:#FFA79F; --v2-warn-line:#A8423B; --v2-warn-well:#2E1011;
  /* the four suit colours where they are written on a panel or straight on the felt: lighter than elsewhere, so that hearts and diamonds are
     clear on the dark red panel AND on the red velvet itself */
  --gsb-suit-spade:#9CC8FF; --gsb-suit-heart:#FFBDBD; --gsb-suit-diamond:#FFE07A; --gsb-suit-club:#7FDB95;
  /* THE SURFACE: CHARCOAL LEATHER (2026-10-13; the red velvet it had is Gold 2's) - a photograph, TILED at 400 px (half the tile's own 800; the tile is the picture with
     each edge cross-faded into the opposite one, so it repeats without a join. It was laid once over the whole surface, and showed too
     much of the hide), over a drawn colour that is what shows until it has loaded. */
  --v2-surface:#42423E;
  --v2-felt-under:linear-gradient(150deg,#4A4A46 0%,#42423E 50%,#33332F 100%);
  --v2-felt-blend:normal; --v2-felt-dark:.06;
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,240,215,.08),rgba(255,255,255,0) 62%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.36) 100%); --v2-felt-rim:.36;
  --v2-felt-sheen:none;
  --v2-on-felt:#FFF5E2; --v2-on-felt-dim:#F0D9C0; --v2-on-felt-accent:#FFDD82;
  --v2-felt-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.9);
  --v2-photo-fade:#1A0B0C; --v2-you:#8FC2FF;
  --v2-logo:url("/assets/brand/logo-on-dark.png");
}
/* GOLD 2 (2026-10-13), the sixth theme: Gold in every particular - its bars, its panels, its text and its suit colours are the rule above - on
   RED VELVET (/assets/images/velvet.jpg), where Gold has charcoal leather. The velvet is tiled at 400 px (velvet-tile.jpg, which repeats without a join);
   under it, and showing only until it has loaded, a deep crimson. */
/* ============ EIGHTEEN MORE THEMES (2026-10-13): A MATERIAL AND A BAR ============
   A theme's id is "<material>-<bar>": ivory-blue, cream-gold, redsuede-silver, greencloth-mahogany. THE BAR'S HALF - the bars themselves, the
   panels, the text, the accent, the suit colours, everything that is not the surface - is the existing theme with that bar, whose rule above is
   written for every id that ends with its name (Mahogany's is the root's, so a "-mahogany" theme needs nothing). THE MATERIAL'S HALF is here: a
   rule for every id that begins with its name - its tile, repeating at 512 px over a drawn colour, the light from the middle and the dimming
   at the edge, and what is written STRAIGHT ON it: dark on Ivory, Cream and Camel, which are light; light on Red Suede and the two greens. */
:root[data-v2-theme^="ivory-"]{      /* Ivory */
  --v2-surface:#EFE9D7;
  --v2-felt-under:linear-gradient(150deg,#FBF5E2 0%,#EFE9D7 50%,#D2CDBD 100%);
  --v2-felt-photo:url("/assets/images/ivory-leather-tile-v2.jpg") top left / 512px 512px repeat; --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.22),rgba(255,255,255,0) 66%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 48%,rgba(0,0,0,.18) 100%); --v2-felt-rim:.18;
  --v2-felt-sheen:none;
  --v2-on-felt:#24160A; --v2-on-felt-dim:#4E3A22; --v2-on-felt-accent:#4E3100;
  --v2-felt-shadow:0 0 2px rgba(255,255,255,.9),0 0 5px rgba(255,255,255,.7);
  --v2-engrave-art:url("/assets/brand/engraved-wordmark-light.svg?v=2026-10-17-1");      /* the engraved wordmark's light tone */
}
:root[data-v2-theme^="cream-"]{      /* Cream */
  --v2-surface:#E8DABF;
  --v2-felt-under:linear-gradient(150deg,#F4E5C9 0%,#E8DABF 50%,#CCC0A8 100%);
  --v2-felt-photo:url("/assets/images/cream-suede-tile-v2.jpg") top left / 512px 512px repeat; --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.22),rgba(255,255,255,0) 66%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 48%,rgba(0,0,0,.18) 100%); --v2-felt-rim:.18;
  --v2-felt-sheen:none;
  --v2-on-felt:#24160A; --v2-on-felt-dim:#4E3A22; --v2-on-felt-accent:#4E3100;
  --v2-felt-shadow:0 0 2px rgba(255,255,255,.9),0 0 5px rgba(255,255,255,.7);
  --v2-engrave-art:url("/assets/brand/engraved-wordmark-light.svg?v=2026-10-17-1");      /* the engraved wordmark's light tone */
}
:root[data-v2-theme^="camel-"]{      /* Camel */
  --v2-surface:#CD9861;
  --v2-felt-under:linear-gradient(150deg,#D7A066 0%,#CD9861 50%,#B48655 100%);
  --v2-felt-photo:url("/assets/images/camel-suede-tile-v2.jpg") top left / 512px 512px repeat; --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.22),rgba(255,255,255,0) 66%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 48%,rgba(0,0,0,.18) 100%); --v2-felt-rim:.18;
  --v2-felt-sheen:none;
  --v2-on-felt:#24160A; --v2-on-felt-dim:#4E3A22; --v2-on-felt-accent:#4E3100;
  --v2-felt-shadow:0 0 2px rgba(255,255,255,.9),0 0 5px rgba(255,255,255,.7);
  --v2-engrave-art:url("/assets/brand/engraved-wordmark-light.svg?v=2026-10-17-1");      /* the engraved wordmark's light tone */
}
:root[data-v2-theme^="redsuede-"]{      /* Red Suede */
  --v2-surface:#791F24;
  --v2-felt-under:linear-gradient(150deg,#7F2126 0%,#791F24 50%,#6A1B20 100%);
  --v2-felt-photo:url("/assets/images/red-suede-tile-v2.jpg") top left / 512px 512px repeat; --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,235,210,.09),rgba(255,255,255,0) 62%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.34) 100%); --v2-felt-rim:.34;
  --v2-felt-sheen:none;
  --v2-on-felt:#FFF4E2; --v2-on-felt-dim:#F0DCC4; --v2-on-felt-accent:#FFDC8C;
  --v2-felt-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.9);
}
/* (2026-10-13, the final list) WOOD & FELT IS THE DEFAULT: the theme of a page with no data-v2-theme - nobody's choice, or a saved one that is
   no longer a theme. The mahogany bars are the variables at the top; this is the green cloth under them. */
:root:not([data-v2-theme]){      /* no theme: Classic Green Felt's look (2026-10-31; it was Wood & Felt, removed) */
  --v2-surface:#2F5033;
  --v2-felt-under:linear-gradient(150deg,#315436 0%,#2F5033 50%,#29462D 100%);
  --v2-felt-photo:url("/assets/images/green-velvet-tile.jpg") top left / 512px 512px repeat; --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,235,210,.09),rgba(255,255,255,0) 62%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.34) 100%); --v2-felt-rim:.34;
  --v2-felt-sheen:none;
  --v2-on-felt:#FFF4E2; --v2-on-felt-dim:#F0DCC4; --v2-on-felt-accent:#FFDC8C;
  --v2-felt-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.9);
}
/* (2026-10-31, feature/velvet-themes) GREEN VELVET & MAHOGANY ("greenvelvet-mahogany"): Wood & Felt in every particular - the mahogany bars are the
   variables at the top, as for every "-mahogany" theme - with the felt's green cloth replaced by VELVET: Gold & Velvet's own red velvet
   (red-suede-tile-v2.jpg) turned to the felt's green (green-velvet-tile.jpg: every pixel's hue turned by one angle, its chroma scaled by one
   ratio and its lightness moved by one offset, so the weave and the sheen are the red one's and the mean is the felt's #2F5033). */
:root[data-v2-theme^="greenvelvet-"]{      /* Green Velvet: Wood & Felt's values, on velvet */
  --v2-surface:#2F5033;
  --v2-felt-under:linear-gradient(150deg,#315436 0%,#2F5033 50%,#29462D 100%);
  --v2-felt-photo:url("/assets/images/green-velvet-tile.jpg") top left / 512px 512px repeat; --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,235,210,.09),rgba(255,255,255,0) 62%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.34) 100%); --v2-felt-rim:.34;
  --v2-felt-sheen:none;
  --v2-on-felt:#FFF4E2; --v2-on-felt-dim:#F0DCC4; --v2-on-felt-accent:#FFDC8C;
  --v2-felt-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.9);
}
/* (2026-10-31, feature/velvet-themes) GOLD & ROYAL BLUE VELVET ("bluevelvet-gold"): Gold & Velvet in every particular, the velvet ROYAL BLUE
   (royal-blue-velvet-tile.jpg: the red velvet's hue turned -95.5 degrees in Lab, its lightness and chroma unchanged). What echoed the red
   velvet - the panels, wells and lines, a very dark red, and the drawn surface - is the same tone turned the same way; warnings, the suit
   colours and the vulnerable red stay red. */
:root[data-v2-theme^="bluevelvet-"]{      /* Royal Blue Velvet: Red Suede's values, turned blue */
  --v2-surface:#283C7F;
  --v2-felt-under:linear-gradient(150deg,#2B3F86 0%,#283C7F 50%,#21346F 100%);
  --v2-felt-photo:url("/assets/images/royal-blue-velvet-tile.jpg") top left / 512px 512px repeat; --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,235,210,.09),rgba(255,255,255,0) 62%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.34) 100%); --v2-felt-rim:.34;
  --v2-felt-sheen:none;
  --v2-on-felt:#FFF4E2; --v2-on-felt-dim:#F0DCC4; --v2-on-felt-accent:#FFDC8C;
  --v2-felt-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.9);
}
:root[data-v2-theme="bluevelvet-gold"]{      /* the Gold panels' dark red, turned blue with the velvet */
  --v2-panel:#0C0F19; --v2-well:#121A2B; --v2-line:#293556; --v2-on-accent:#0C0F19; --v2-photo-fade:#0C0F19;
}
/* (2026-10-31, feature/crystal-themes) TWO CRYSTAL BARS, each a theme's bar half ("<material>-crystal", "<material>-emerald"; the material so far
   is the royal blue velvet: Royal Blue Velvet & Crystal, Royal Blue Velvet & Emerald). EACH SIDE BAR IS ONE LONG CRYSTAL, from the picture Kas
   gave (crystal-clear-original.webp, crystal-emerald-original.webp, kept as they came), cut to the crystal's edges: its two ends at their own
   shape (-top / -foot, each fading out over its inner edge) and its straight middle (-mid) lengthened under them to fill a bar of any length,
   so the ends never stretch. A bar that lies (the phone's top and bottom bars, the table's bar across) is the same crystal turned on its side
   (-h-left / -h-right / -h-mid). What is written on a bar is light, with a dark shadow, over the crystal's middle, which a soft shade (the first layer) darkens a little more; the bright edges are left as they are. THE CLEAR CRYSTAL'S
   colours are silver and white on a cool slate; THE EMERALD'S are emerald on a very dark green. Suit colours and the vulnerable red are the
   site's own. */
:root[data-v2-theme$="-crystal"]{      /* the clear crystal */
  --v2-panel:#0F141C; --v2-well:#18202B; --v2-line:#2F3B4B; --v2-ink:#EEF2F7; --v2-dim:#BFC8D4;
  --v2-accent:#D9E1EA; --v2-accent-rgb:217,225,234; --v2-accent-rgb-s:217 225 234; --v2-accent-dim:#5B6878; --v2-on-accent:#0F141C;
  --v2-bar:linear-gradient(90deg,rgba(0,0,0,0) 10%,rgba(0,0,0,.26) 32%,rgba(0,0,0,.26) 68%,rgba(0,0,0,0) 90%),url("/assets/images/crystal-clear-top.webp") center top / 100% auto no-repeat,url("/assets/images/crystal-clear-foot.webp") center bottom / 100% auto no-repeat,url("/assets/images/crystal-clear-mid.webp") center / 100% 100% no-repeat,#3E5677;
  --v2-bar-h:linear-gradient(180deg,rgba(0,0,0,0) 8%,rgba(0,0,0,.26) 30%,rgba(0,0,0,.26) 70%,rgba(0,0,0,0) 92%),url("/assets/images/crystal-clear-h-left.webp") left center / auto 100% no-repeat,url("/assets/images/crystal-clear-h-right.webp") right center / auto 100% no-repeat,url("/assets/images/crystal-clear-h-mid.webp") center / 100% 100% no-repeat,#3E5677;
  --v2-on-bar:#F6F9FC; --v2-on-bar-shadow:0 1px 2px #000,0 0 6px rgba(0,0,0,.9);
  --v2-warn:#FFA79F; --v2-warn-line:#A8423B; --v2-warn-well:#2E1011;
  --v2-photo-fade:#0F141C; --v2-you:#8FC2FF;
  --v2-logo:url("/assets/brand/logo-on-dark.png");
}
/* (2026-10-31, feature/themes-cleanup) the emerald bar (Royal Blue Velvet & Emerald) was here: its theme is removed; the clear crystal stays (Heavenly) */
/* (2026-10-31, feature/marble-theme) MARBLE & ROYAL BLUE ("marble-royalblue"). THE MATERIAL: white Carrara marble (marble-tile.jpg, from Kas's
   marble-carrara-original.png, kept as it came: each edge cross-faded into the opposite one, 110 px, so it tiles with no join - shown at half its
   1144 px, sharp on a Retina screen); light, so what is written straight on it is dark, as on Ivory, in a cool ink to suit the stone, and the
   engraved wordmark is its light tone. White cards on white stone get a firmer edge and shadow (below). THE BAR: royal blue painted wood
   (royal-blue-wood-tile.jpg, from royal-blue-wood-original.png: its two ends cross-faded so it runs the length of a bar with no join; the bars
   that lie use it turned), the grain along the bar; Blue's navy panels, gold accent and light words. Suit colours and the vulnerable red are the
   site's own. */
:root[data-v2-theme^="marble-"]{      /* Marble */
  --v2-surface:#E3E2E3;
  --v2-felt-under:linear-gradient(150deg,#EEEDEE 0%,#E3E2E3 50%,#CACACC 100%);
  --v2-felt-photo:url("/assets/images/marble-tile.jpg") top left / 572px 572px repeat; --v2-felt-blend:normal; --v2-felt-dark:0;
  --v2-felt-glow:radial-gradient(ellipse at 50% 44%,rgba(255,255,255,.18),rgba(255,255,255,0) 66%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 48%,rgba(0,0,0,.16) 100%); --v2-felt-rim:.16;
  --v2-felt-sheen:none;
  --v2-on-felt:#161B24; --v2-on-felt-dim:#3A4352; --v2-on-felt-accent:#0C2F50;
  --v2-felt-shadow:0 0 2px rgba(255,255,255,.9),0 0 5px rgba(255,255,255,.7);
  --v2-engrave-art:url("/assets/brand/engraved-wordmark-light.svg?v=2026-10-17-1");      /* the engraved wordmark's light tone */
}
:root[data-v2-theme$="-royalblue"]{      /* the royal blue wood bar: Blue's panels, accent and words */
  --v2-panel:#071A36; --v2-well:#102748; --v2-line:#25406B; --v2-ink:#EEF2F8; --v2-dim:#AEB9CC;
  --v2-accent:#D6A84A; --v2-accent-rgb:214,168,74; --v2-accent-rgb-s:214 168 74; --v2-accent-dim:#5C4720; --v2-on-accent:#071A36;
  --v2-bar:url("/assets/images/royal-blue-wood-tile.jpg") center top / 627px 572px repeat-y,#102E59;
  --v2-bar-h:url("/assets/images/royal-blue-wood-tile-h.jpg") left center / 572px 627px repeat-x,#102E59;
  --v2-on-bar:#EEF2F8; --v2-on-bar-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.8);
  --v2-warn:#F0958E; --v2-warn-line:#8A2E27; --v2-warn-well:#22121A;
  --v2-photo-fade:#071A36; --v2-you:#7FBBFF;
  --v2-logo:url("/assets/brand/logo-on-dark.png");
}
/* white cards on the marble: a firmer edge and a little more shadow, on the card pictures themselves (their holders keep their own filters) */
html[data-v2-theme^="marble-"] :is(.cardimg,.ld-img,.hidden-card img,.cb-card img,.br-fan img){filter:drop-shadow(0 0 .7px rgba(0,0,0,.6)) drop-shadow(0 2px 3px rgba(0,0,0,.32))}
html[data-v2-theme^="marble-"] .v2m-c{box-shadow:0 0 0 1px rgba(0,0,0,.26),0 2px 5px rgba(0,0,0,.32)}
/* (2026-10-31, feature/marble-theme) MARBLE & CRYSTAL ("marble-crystal"): the marble above with the clear crystal bars (the same pieces, fitted
   the same way); silver and white as with the crystal, the panels a lighter slate so they sit well on the white stone and still carry light words
   (ink 9.5 to 1). Cards get the marble's firmer edge (the rule above, for every marble theme). */
:root[data-v2-theme="marble-crystal"]{
  --v2-panel:#34404F; --v2-well:#3F4C5D; --v2-line:#5A687C; --v2-on-accent:#1C2430; --v2-photo-fade:#34404F;
}
/* the Silver bar's accent is a navy, not a gold: what is written in the accent straight on the surface follows it */

/* ============ CHRISTMAS (2026-10-31, feature/christmas-theme) ============
   One theme, its own id ("christmas", stored "metallic-christmas"), from Kas's pictures (the design: a mockup of Home). THE SURFACE is a deep
   green velvet with snowflakes (bg-tile.webp, its edges cross-faded so it tiles), THE BARS red velvet with a gold trim (bar.webp, its ends
   cross-faded; bar-h.webp turned for the bars that lie). Panels and cards a dark green with gold edges, the accent gold with dark words on it,
   light words on the velvet and the bars; the suits on a panel the light ones Gold has, so they read on the dark green. */
:root[data-v2-theme="christmas"]{
  --v2-panel:#0C2A18; --v2-well:#123A22; --v2-line:#8E6E2C; --v2-ink:#F7EFDC; --v2-dim:#D9CCAA;
  --v2-accent:#E2B547; --v2-accent-rgb:226,181,71; --v2-accent-rgb-s:226 181 71; --v2-accent-dim:#6E5422; --v2-on-accent:#2A1A04;
  --v2-bar:url("/assets/images/christmas/holly.webp") center 84% / 70% auto no-repeat,url("/assets/images/christmas/bar.webp") center top / 100% auto repeat-y,linear-gradient(90deg,#C9A24B 0%,#7A0F1A 6%,#5E0A14 50%,#7A0F1A 94%,#C9A24B 100%);
  --v2-bar-h:url("/assets/images/christmas/garland.webp") center bottom 1px / auto 16px no-repeat,url("/assets/images/christmas/bar-h.webp") left center / auto 100% repeat-x,linear-gradient(180deg,#C9A24B 0%,#7A0F1A 6%,#5E0A14 50%,#7A0F1A 94%,#C9A24B 100%);
  --v2-on-bar:#FFF4E0; --v2-on-bar-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.8);
  --v2-warn:#FFA79F; --v2-warn-line:#A8423B; --v2-warn-well:#2E1011;
  --gsb-suit-spade:#9CC8FF; --gsb-suit-heart:#FFBDBD; --gsb-suit-diamond:#FFE07A; --gsb-suit-club:#7FDB95;
  --v2-surface:#123B22;
  --v2-felt-under:linear-gradient(150deg,#15452A 0%,#123B22 50%,#0E301B 100%);
  /* (2026-11-01, feature/christmas-bg-cane) THE CHRISTMAS ROOM (room.webp: the fireplace and stockings left, the tree and presents right, the calm green
     wall between) in place of the velvet tile: one picture covering the page, centred - on a phone its calm middle - fixed while the page scrolls (every
     surface that draws it is fixed or its own box), darkened as the pitches are, a little more (the room is busier), so words and cards on it read */
  --v2-felt-photo:url("/assets/images/christmas/room.webp") center / cover no-repeat; --v2-felt-blend:normal; --v2-felt-dark:.42;
  --v2-engrave-art:none;      /* no engraved wordmark over the room */
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,235,210,.08),rgba(255,255,255,0) 62%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,.34) 100%); --v2-felt-rim:.34;
  --v2-felt-sheen:none;
  --v2-on-felt:#FFF4E2; --v2-on-felt-dim:#F0DCC4; --v2-on-felt-accent:#FFDC8C;
  --v2-felt-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.9);
  --v2-photo-fade:#0C2A18; --v2-you:#8FC2FF;
  --v2-logo:url("/assets/brand/logo-on-dark.png");
  /* (2026-10-31, feature/christmas-touches) on every page, the table's included: holly on each side bar, low (84%), in the free space between its last button
     and the foot, and beneath the buttons; a thin garland with its bow along the bottom of every bar that lies (the phone's two, the Bidding Room board's) */
  --xm-garland-w:600px; --xm-garland-h:110px; --xm-snow-h:56px;
}
/* THE POINTER: a candy cane (its tip the hotspot), a mitten over what can be pressed (its fingertip); about 32px, sharper on a dense screen */
html[data-v2-theme="christmas"]{cursor:url("/assets/images/christmas/cursor-cane.png") 1 1,auto;cursor:-webkit-image-set(url("/assets/images/christmas/cursor-cane.png") 1x,url("/assets/images/christmas/cursor-cane@2x.png") 2x) 1 1,auto}
html[data-v2-theme="christmas"] :is(a[href],button:not(:disabled),[role=button],[role=tab],[role=menuitem],summary,select,label[for],.gsb-btn,.brl-row,.hv2-card,.v2-ph-tab,input[type=checkbox],input[type=radio]){cursor:url("/assets/images/christmas/cursor-mitten.png") 2 1,pointer;cursor:-webkit-image-set(url("/assets/images/christmas/cursor-mitten.png") 1x,url("/assets/images/christmas/cursor-mitten@2x.png") 2x) 2 1,pointer}
/* THE DECORATIONS, ON EVERY PAGE OF THE NEW LOOK: the garland across the top, its bow in the middle; holly in the two top corners; snow along
   the bottom. They are the page's own background - beneath everything on it (z-index -1 in the main area's stacking context), never in
   front of a button, a card, a menu or a word, and never in the way of a click (pointer-events none); and fixed, so they stay put while
   the page scrolls. The table, whose hands run along its top and bottom edges, has none of them (gsb-table-v2-layout3.css). */
html.v2-page[data-v2-theme="christmas"] body main.v2-main::before,
html.v2-page[data-v2-theme="christmas"] body main.v2-main::after{content:"";position:fixed;left:inherit;right:inherit;z-index:-1;pointer-events:none}
html.v2-page[data-v2-theme="christmas"] body main.v2-main::before{top:inherit;height:var(--xm-garland-h);
  background:url("/assets/images/christmas/garland.webp") center top / var(--xm-garland-w) auto no-repeat,url("/assets/images/christmas/holly.webp") left 10px top 8px / 88px auto no-repeat,url("/assets/images/christmas/holly.webp") right 10px top 8px / 88px auto no-repeat}
html.v2-page[data-v2-theme="christmas"] body main.v2-main::after{bottom:inherit;height:var(--xm-snow-h);
  background:url("/assets/images/christmas/snow-left.webp") left bottom / auto 100% no-repeat,url("/assets/images/christmas/snow-right.webp") right bottom / auto 100% no-repeat,url("/assets/images/christmas/snow-mid.webp") center bottom / 100% 100% no-repeat}
/* THE PHONE: no garland or snow across the page - on a screen this narrow there is no edge without words on it (the board's top line
   read over the garland in the one look), so it is left out; the phone keeps the velvet, the bars, the colours and Home's own
   touches (the photograph, the icons, the motto's holly) */
html.v2-phone.v2-page[data-v2-theme="christmas"] body main.v2-main::after{display:none}
/* (2026-10-31, feature/christmas-touches) and small holly in the page's two bottom corners, beneath what is on it (the bars carry the garland) */
html.v2-phone.v2-page[data-v2-theme="christmas"] body main.v2-main::before{top:auto;bottom:inherit;height:48px;
  background:url("/assets/images/christmas/holly.webp") left 4px bottom 4px / 52px auto no-repeat,url("/assets/images/christmas/holly.webp") right 4px bottom 4px / 52px auto no-repeat}
/* HOME (home-v2.html), as the mockup: room under the garland and over the snow; the banner's photograph is the Christmas one, across the whole
   banner with the logo and the buttons over its dark left side (a darkening keeps them clear); a poinsettia in its bottom-left corner, under
   the logo; each of the eight cards with its Christmas icon at the top right (the title kept clear of it); holly either side of the motto */
html.v2-page[data-v2-theme="christmas"]:not(.v2-phone) .hv2-banner{margin-top:calc(var(--xm-garland-h) - 12px)}
html.v2-page[data-v2-theme="christmas"]:not(.v2-phone) .hv2-motto{padding-bottom:calc(var(--xm-snow-h) + 12px)}
/* (2026-11-01, fix/christmas-hero-tree) THE WHOLE TREE, STAR TO PRESENTS. Measured in the photograph (banner.webp, 1600 x 900): the tree runs from
   25.4% to 47% across (the star at about 41%), and from 3% to 81% down; the photograph's own dark part is 0 to 25%.
   It was not showing because Home's layout script (layoutHero) moves the photograph's box right of the hero's buttons (an inline left and width),
   and the picture was cut to fill that strip and faded over its first 39.5%: the tree was mostly faded out, and the rest cut off at the top
   and bottom. Laid across the whole banner instead, the picture would be 850px tall in a 400px banner, with the star and the presents cut off.
   So the picture is shown WHOLE IN HEIGHT, at its own shape: as tall as the banner (711px wide at 400), against the banner's right edge (the
   photograph's box made the whole banner, whatever the script says), its dark part under the end of the buttons, faded out; the tree from
   about 982 to 1135 of the banner's 1512. On a phone the logo covers the band's left half, where the tree would be, so the picture stands a
   quarter of the band to the right: the tree just right of the logo, the picture's right edge cut instead. */
html[data-v2-theme="christmas"]:not(.v2-phone) .hv2-photo{left:0!important;width:100%!important}
/* (2026-11-01, fix/christmas-hero-fade) NO BLACK BAND: the photograph's dark left part (near black over its first quarter, dark brown around the
   tree) is the banner's own green in the picture itself - banner-green.webp (replaced by banner-soft.webp, below), made from banner.webp by scripts/xmas-banner-green.js: all green
   over the far left and over the room above-left of the tree's slope, nearer the tree and on the floor under the presents only what is dark,
   blurred, and nothing lit touched (the tree, its lights and the presents whole: 0 of their 53083 lit pixels greened). The green is --v2-panel
   (#0C2A18), the banner's background here, so the picture's left edge meets the banner with no change of colour (within 2 levels). */
/* (2026-11-01, fix/christmas-hero-soft-fade) A REAL FADE, NOT A CUT-OUT: the greening above followed the tree's outline. Now the picture
   (banner-soft.webp, the same script) melts into the green like a soft vignette - all green at 3% of its width, all photograph at 38%
   (about 250 page px, eased at both ends), its two left corners rounded off into the green, the dark parts still greened (so no black) but
   blurred wide, and the tree and presents held clear only softly: the star, the tree's body and the presents clear, its leftmost branches
   softly faded. */
/* (2026-11-01, fix/christmas-banner-2) THE NEW PHOTOGRAPH: Kas's "Cozy Christmas Card Game by the Fireplace" (four friends in Santa hats at the green table,
   the fireplace and the four suit stockings behind them, the tree and presents on the left, a dark left side) - laid out as the old one (the tree 25%
   to 47% across, the four from 38%), so it is made and placed the same way: scripts/xmas-banner-green.js at 1600 x 900, banner-fireplace.webp */
html[data-v2-theme="christmas"] .hv2-photo img{content:url("/assets/images/christmas/banner-fireplace.webp")}
html.v2-page[data-v2-theme="christmas"] .hv2-banner .hv2-photo img{position:absolute;top:0;right:0;left:auto;width:auto;height:100%;max-width:none;object-fit:fill;aspect-ratio:1600 / 900}
html.v2-phone.v2-page[data-v2-theme="christmas"] .hv2-banner .hv2-photo{overflow:hidden}
/* (2026-11-01, fix/christmas-banner-2) ON A PHONE ALL FOUR AND THE TREE: the picture a quarter to the right showed the tree but cut off two of the four. As
   Soccer's (measured there: the picture 32.9% to 100% of the band, the logo to 48%): 66% of the band's height, against its right edge, fading into the
   green above and below - the tree from about 50% across (just right of the logo), the four whole */
html.v2-phone.v2-page[data-v2-theme="christmas"] .hv2-banner .hv2-photo img{top:17%;height:66%;right:0;left:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%)}
/* (2026-10-31, feature/christmas-touches; narrowed by feature/christmas-ornaments, below) NO EDGE: the photograph's left third is near black and its light starts abruptly (about 33% across);
   with a darkening laid over it that read as a hard vertical line. Now nothing is laid over it: the photograph itself fades in - not there at
   all across its dark third, then smoothly to the whole of it - so the banner's own green is what is on the left, and the step in the picture
   falls where the picture is still almost transparent. The same on the phone, over its narrower banner. */
/* (2026-11-01, fix/christmas-hero-tree) the fade is the picture's own (its mask is laid on the picture's box, which is now the picture itself):
   12% to 23% of the photograph's width - inside its own dark part, ending before the tree's left edge at 25.4%, so there is still no line */
/* (2026-11-01, fix/christmas-hero-fade) the green is in the picture now, so the mask is only a short soft start over its first 4% (all green
   there) - the picture's own edge never shows, whatever the browser does with the last level of the colour */
html.v2-page[data-v2-theme="christmas"] .hv2-banner .hv2-photo img{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4%);mask-image:linear-gradient(90deg,transparent 0%,#000 4%)}
html.v2-page[data-v2-theme="christmas"] .hv2-banner .hv2-photo::after{-webkit-mask-image:none;mask-image:none;box-shadow:none;background:none}
html.v2-phone.v2-page[data-v2-theme="christmas"] .hv2-banner .hv2-photo{background:var(--v2-panel)}
/* (2026-10-31, feature/christmas-ornaments) ONLY A NARROW SOFT EDGE: the fade was 26% to 64% across and hid most of the photograph. It is now 29% to
   39.5% - just where the photograph's own dark third ends and its light begins (about 33%), so that step is inside the soft edge and no line
   shows, and everything from 40% on is the whole picture. The welcome stands partly over the lit picture now, so it gets a soft dark shadow. */
html.v2-page[data-v2-theme="christmas"] .hv2-welcome{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.75)}
html[data-v2-theme="christmas"] .hv2-banner::after{content:"";position:absolute;left:-6px;bottom:-8px;width:150px;height:142px;z-index:0;pointer-events:none;background:url("/assets/images/christmas/corner.webp") left bottom / contain no-repeat}
html[data-v2-theme="christmas"]:not(.v2-phone) .hv2-banner > :is(.hv2-logo,.hv2-welcome,.hv2-acts,.hv2-actmsg){z-index:1}      /* over the poinsettia (they are placed already) */
/* (2026-10-31, fix/christmas-logo) Home's banner logo wears a Santa hat (logo.webp, from Kas's picture, trimmed) - here only, computer and phone;
   the site's logo everywhere else (--v2-logo is untouched). Weighed above the phone's own (html.v2-phone .hv2-logo, home-v2.html). */
html.v2-page[data-v2-theme="christmas"] body .hv2-logo{background-image:url("/assets/images/christmas/logo.webp")}
html[data-v2-theme="christmas"] .hv2-card{position:relative;border-color:var(--v2-line)}
html[data-v2-theme="christmas"] .hv2-card::after{content:"";position:absolute;right:14px;top:10px;width:58px;height:58px;pointer-events:none;background:var(--xm-icon) center / contain no-repeat}
html[data-v2-theme="christmas"] .hv2-card h3{padding-right:64px}
html[data-v2-theme="christmas"] .hv2-card .hv2-tag{margin-right:66px}
html[data-v2-theme="christmas"] .hv2-cards > .hv2-card:nth-child(1){--xm-icon:url("/assets/images/christmas/icon-1.webp")}
html[data-v2-theme="christmas"] .hv2-cards > .hv2-card:nth-child(2){--xm-icon:url("/assets/images/christmas/icon-2.webp")}
html[data-v2-theme="christmas"] .hv2-cards > .hv2-card:nth-child(3){--xm-icon:url("/assets/images/christmas/icon-3.webp")}
html[data-v2-theme="christmas"] .hv2-cards > .hv2-card:nth-child(4){--xm-icon:url("/assets/images/christmas/icon-4.webp")}
html[data-v2-theme="christmas"] .hv2-cards > .hv2-card:nth-child(5){--xm-icon:url("/assets/images/christmas/icon-5.webp")}
html[data-v2-theme="christmas"] .hv2-cards > .hv2-card:nth-child(6){--xm-icon:url("/assets/images/christmas/icon-6.webp")}
html[data-v2-theme="christmas"] .hv2-cards > .hv2-card:nth-child(7){--xm-icon:url("/assets/images/christmas/icon-7.webp")}
html[data-v2-theme="christmas"] .hv2-cards > .hv2-card:nth-child(8){--xm-icon:url("/assets/images/christmas/icon-8.webp")}
html.v2-phone[data-v2-theme="christmas"] .hv2-card::after{width:44px;height:44px;top:10px;right:12px}
html.v2-phone[data-v2-theme="christmas"] .hv2-card h3{padding-right:50px}
html.v2-phone[data-v2-theme="christmas"] .hv2-banner::after{display:none}
html[data-v2-theme="christmas"] .hv2-motto{display:flex;align-items:center;justify-content:center;gap:14px}
html[data-v2-theme="christmas"] .hv2-motto::before,html[data-v2-theme="christmas"] .hv2-motto::after{content:"";flex:0 0 auto;width:130px;height:34px;pointer-events:none}
html[data-v2-theme="christmas"] .hv2-motto::before{background:url("/assets/images/christmas/holly-bow.webp") left center / auto 34px no-repeat,linear-gradient(90deg,rgba(226,181,71,0),#E2B547) right center / 86px 1px no-repeat}
html[data-v2-theme="christmas"] .hv2-motto::after{background:url("/assets/images/christmas/holly-bow.webp") right center / auto 34px no-repeat,linear-gradient(90deg,#E2B547,rgba(226,181,71,0)) left center / 86px 1px no-repeat}
html.v2-phone[data-v2-theme="christmas"] .hv2-motto::before,html.v2-phone[data-v2-theme="christmas"] .hv2-motto::after{width:56px;height:26px;background-size:auto 26px,0 0}


/* ============ AMERICAN FOOTBALL (2026-11-01, feature/football-theme) ============
   One theme, its own id ("football", stored "metallic-football"), from Kas's pictures (the design: a mockup of Home), built as Christmas is.
   THE SURFACE is one picture of the whole field (bg.webp), not a tile: it covers the page's area, centred - on a phone the middle of the field.
   THE BARS black with gold edges (bar.webp, its ends cross-faded so it repeats with no join; bar-h.webp for the bars that lie). Panels, cards and
   the banner a dark green with gold edges, gold buttons with dark words, light words. The pictures: public/assets/images/football/, made by
   scripts/football-assets.js. The hanging pieces (a mini football, a foam finger, a whistle) are gsb-theme-ornaments.js's, as Christmas's are. */
:root[data-v2-theme="football"]{
  --v2-panel:#072615; --v2-well:#0D3320; --v2-line:#9A7A30; --v2-ink:#F4EEDC; --v2-dim:#D6CCAE;
  --v2-accent:#E3B243; --v2-accent-rgb:227,178,67; --v2-accent-rgb-s:227 178 67; --v2-accent-dim:#6E5422; --v2-on-accent:#2A1A04;
  --v2-bar:url("/assets/images/football/bar.webp") center top / 100% auto repeat-y,linear-gradient(90deg,#C9A24B 0%,#0E0E0E 6%,#050505 50%,#0E0E0E 94%,#C9A24B 100%);
  --v2-bar-h:url("/assets/images/football/bar-h.webp") left center / auto 100% repeat-x,linear-gradient(180deg,#C9A24B 0%,#0E0E0E 6%,#050505 50%,#0E0E0E 94%,#C9A24B 100%);
  --v2-on-bar:#F4E6C0; --v2-on-bar-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.8);
  --v2-warn:#FFA79F; --v2-warn-line:#A8423B; --v2-warn-well:#2E1011;
  --gsb-suit-spade:#9CC8FF; --gsb-suit-heart:#FFBDBD; --gsb-suit-diamond:#FFE07A; --gsb-suit-club:#7FDB95;
  --v2-surface:#2E6B2A;
  --v2-felt-under:linear-gradient(150deg,#357A30 0%,#2E6B2A 50%,#245A22 100%);
  --v2-felt-photo:url("/assets/images/football/bg.webp") center / cover no-repeat; --v2-felt-blend:normal; --v2-felt-dark:.3;      /* darkened, as the mockup's field: the yard numbers stay behind the words */
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,245,220,.06),rgba(255,255,255,0) 62%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 48%,rgba(0,0,0,.38) 100%); --v2-felt-rim:.38;
  --v2-felt-sheen:none;
  --v2-engrave-art:none;      /* no engraved wordmark on the field's fifty-yard line */
  --v2-on-felt:#FFF6E4; --v2-on-felt-dim:#F0E2C6; --v2-on-felt-accent:#FFDC8C;
  --v2-felt-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.9);
  --v2-photo-fade:#072615; --v2-you:#8FC2FF;
  --v2-logo:url("/assets/brand/logo-on-dark.png");
  --fb-top-w:620px; --fb-top-h:118px; --fb-corner-w:150px; --fb-bottom-h:56px;
}
/* THE POINTER: the football (its top-left tip the hotspot), the foam finger over what can be pressed (its fingertip); 32px, sharper on a dense
   screen; a text box keeps the text cursor */
html[data-v2-theme="football"]{cursor:url("/assets/images/football/cursor-ball.png") 2 1,auto;cursor:-webkit-image-set(url("/assets/images/football/cursor-ball.png") 1x,url("/assets/images/football/cursor-ball@2x.png") 2x) 2 1,auto}
html[data-v2-theme="football"] :is(a[href],button:not(:disabled),[role=button],[role=tab],[role=menuitem],summary,select,label[for],.gsb-btn,.brl-row,.hv2-card,.v2-ph-tab,input[type=checkbox],input[type=radio]){cursor:url("/assets/images/football/cursor-finger.png") 3 1,pointer;cursor:-webkit-image-set(url("/assets/images/football/cursor-finger.png") 1x,url("/assets/images/football/cursor-finger@2x.png") 2x) 3 1,pointer}
html[data-v2-theme="football"] :is(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=range]),textarea,[contenteditable=""],[contenteditable=true]){cursor:text}
/* THE DECORATIONS, ON EVERY PAGE OF THE NEW LOOK, as Christmas's: the pennants and lights across the top, the football in the middle; the
   football, whistle and confetti in the two top corners (the right one mirrored); the turf along the bottom, a football at each end. The page's
   own background - beneath everything (z-index -1), never in the way of a click, fixed while the page scrolls. Not at the table. */
html.v2-page[data-v2-theme="football"] body main.v2-main::before,
html.v2-page[data-v2-theme="football"] body main.v2-main::after{content:"";position:fixed;left:inherit;right:inherit;z-index:-1;pointer-events:none}
html.v2-page[data-v2-theme="football"] body main.v2-main::before{top:inherit;height:var(--fb-top-h);
  background:url("/assets/images/football/top.webp") center top / var(--fb-top-w) auto no-repeat,url("/assets/images/football/corner.webp") left 4px top 4px / var(--fb-corner-w) auto no-repeat,url("/assets/images/football/corner-right.webp") right 4px top 4px / var(--fb-corner-w) auto no-repeat}
/* (2026-11-01, fix/football-goalpost) the turf with the football and whistle at the left and a gold goalpost at the right: drawn at the old strip's scale, so
   the turf is the size it was and the goalpost stands above it - the decoration 126px tall (--fb-bottom-art-h), the page's room over it unchanged (--fb-bottom-h) */
html.v2-page[data-v2-theme="football"] body main.v2-main::after{bottom:inherit;height:var(--fb-bottom-art-h,126px);
  background:url("/assets/images/football/bottom-left.webp?v=2026-11-01-1") left bottom / auto 100% no-repeat,url("/assets/images/football/bottom-right.webp?v=2026-11-01-1") right bottom / auto 100% no-repeat,url("/assets/images/football/bottom-mid.webp?v=2026-11-01-1") center bottom / auto 100% repeat-x}
/* THE PHONE: smaller pieces only where they fit - no pennants or turf across the page (no edge there is without words), a small corner piece
   in each bottom corner, beneath what is on it */
html.v2-phone.v2-page[data-v2-theme="football"] body main.v2-main::after{display:none}
html.v2-phone.v2-page[data-v2-theme="football"] body main.v2-main::before{top:auto;bottom:inherit;height:52px;
  background:url("/assets/images/football/corner.webp") left 4px bottom 4px / 66px auto no-repeat,url("/assets/images/football/corner-right.webp") right 4px bottom 4px / 66px auto no-repeat}
/* HOME (home-v2.html), as the mockup: room under the pennants and over the turf */
html.v2-page[data-v2-theme="football"]:not(.v2-phone) .hv2-banner{margin-top:calc(var(--fb-top-h) - 14px)}
html.v2-page[data-v2-theme="football"]:not(.v2-phone) .hv2-motto{padding-bottom:calc(var(--fb-bottom-h) + 12px)}
/* THE BANNER'S PHOTOGRAPH (banner-soft.webp): the four friends in the stadium suite, its dark left part melting into the banner's green over a wide
   band (all green at 3% of its width, all photograph at 27%, eased; its left corners rounded off; the dark room greened, blurred) - no edge, no
   line, no black. Shown whole in height at its own shape against the banner's right edge, as Christmas's: the four from about 1000 of the
   banner's 1512, right of the buttons. ON A PHONE the logo covers the band's left half and the four take 72% of the picture's width, so the
   picture is 70% of the band's height, against its right edge and fading into the green above and below: the four whole, right of the logo. */
html[data-v2-theme="football"]:not(.v2-phone) .hv2-photo{left:0!important;width:100%!important}
html[data-v2-theme="football"] .hv2-photo img{content:url("/assets/images/football/banner-soft.webp")}
html.v2-page[data-v2-theme="football"] .hv2-banner .hv2-photo img{position:absolute;top:0;right:0;left:auto;width:auto;height:100%;max-width:none;object-fit:fill;aspect-ratio:1600 / 900;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4%);mask-image:linear-gradient(90deg,transparent 0%,#000 4%)}
html.v2-page[data-v2-theme="football"] .hv2-banner .hv2-photo::after{-webkit-mask-image:none;mask-image:none;box-shadow:none;background:none}
html.v2-phone.v2-page[data-v2-theme="football"] .hv2-banner .hv2-photo{overflow:hidden;background:var(--v2-panel)}
html.v2-phone.v2-page[data-v2-theme="football"] .hv2-banner .hv2-photo img{top:15%;height:70%;right:0;left:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%)}
html.v2-page[data-v2-theme="football"] .hv2-welcome{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.75)}
/* the logo wears the gold helmet, tilted on its emblem's top-left (logo.webp: the site's own logo, untouched, with the helmet laid on it) - Home's
   banner only, computer and phone; the site's logo everywhere else */
html.v2-page[data-v2-theme="football"] body .hv2-logo{background-image:url("/assets/images/football/logo.webp")}
/* the eight cards, each with its icon at the top right (the title kept clear of it), in the sheet's order */
html[data-v2-theme="football"] .hv2-card{position:relative;border-color:var(--v2-line)}
html[data-v2-theme="football"] .hv2-card::after{content:"";position:absolute;right:14px;top:10px;width:58px;height:58px;pointer-events:none;background:var(--fb-icon) center / contain no-repeat}
html[data-v2-theme="football"] .hv2-card h3{padding-right:64px}
html[data-v2-theme="football"] .hv2-card .hv2-tag{margin-right:66px}
html[data-v2-theme="football"] .hv2-cards > .hv2-card:nth-child(1){--fb-icon:url("/assets/images/football/icon-1.webp")}
html[data-v2-theme="football"] .hv2-cards > .hv2-card:nth-child(2){--fb-icon:url("/assets/images/football/icon-2.webp")}
html[data-v2-theme="football"] .hv2-cards > .hv2-card:nth-child(3){--fb-icon:url("/assets/images/football/icon-3.webp")}
html[data-v2-theme="football"] .hv2-cards > .hv2-card:nth-child(4){--fb-icon:url("/assets/images/football/icon-4.webp")}
html[data-v2-theme="football"] .hv2-cards > .hv2-card:nth-child(5){--fb-icon:url("/assets/images/football/icon-5.webp")}
html[data-v2-theme="football"] .hv2-cards > .hv2-card:nth-child(6){--fb-icon:url("/assets/images/football/icon-6.webp")}
html[data-v2-theme="football"] .hv2-cards > .hv2-card:nth-child(7){--fb-icon:url("/assets/images/football/icon-7.webp")}
html[data-v2-theme="football"] .hv2-cards > .hv2-card:nth-child(8){--fb-icon:url("/assets/images/football/icon-8.webp")}
html.v2-phone[data-v2-theme="football"] .hv2-card::after{width:44px;height:44px;top:10px;right:12px}
html.v2-phone[data-v2-theme="football"] .hv2-card h3{padding-right:50px}
/* the motto between two gold lines */
html[data-v2-theme="football"] .hv2-motto{display:flex;align-items:center;justify-content:center;gap:14px}
html[data-v2-theme="football"] .hv2-motto::before,html[data-v2-theme="football"] .hv2-motto::after{content:"";flex:0 0 auto;width:110px;height:1px;pointer-events:none}
html[data-v2-theme="football"] .hv2-motto::before{background:linear-gradient(90deg,rgba(227,178,67,0),#E3B243)}
html[data-v2-theme="football"] .hv2-motto::after{background:linear-gradient(90deg,#E3B243,rgba(227,178,67,0))}
html.v2-phone[data-v2-theme="football"] .hv2-motto::before,html.v2-phone[data-v2-theme="football"] .hv2-motto::after{width:44px}

/* ============ SOCCER (2026-11-01, feature/soccer-theme) ============
   One theme, its own id ("soccer", stored "metallic-soccer"), from Kas's pictures (the design: a mockup of Home), built exactly as American
   Football is (above). THE SURFACE is one picture of the whole pitch (bg.webp) covering the page, centred, darkened so a heading on it reads.
   THE BARS the navy stadium seats with gold edges. Panels, cards and the banner dark green with gold edges, gold buttons, light words. The
   pictures: public/assets/images/soccer/, made by scripts/soccer-assets.js. The hanging pieces (a ball, a scarf, a trophy) are
   gsb-theme-ornaments.js's. */
:root[data-v2-theme="soccer"]{
  --v2-panel:#082A18; --v2-well:#0F3822; --v2-line:#9A7A30; --v2-ink:#F4EEDC; --v2-dim:#D6CCAE;
  --v2-accent:#E5AC3D; --v2-accent-rgb:229,172,61; --v2-accent-rgb-s:229 172 61; --v2-accent-dim:#6E5422; --v2-on-accent:#2A1A04;
  --v2-bar:url("/assets/images/soccer/bar.webp") center top / 100% auto repeat-y,linear-gradient(90deg,#C9A24B 0%,#0F2244 6%,#08162E 50%,#0F2244 94%,#C9A24B 100%);
  --v2-bar-h:url("/assets/images/soccer/bar-h.webp") left center / auto 100% repeat-x,linear-gradient(180deg,#C9A24B 0%,#0F2244 6%,#08162E 50%,#0F2244 94%,#C9A24B 100%);
  --v2-on-bar:#F4E6C0; --v2-on-bar-shadow:0 1px 3px #000,0 0 6px rgba(0,0,0,.8);
  --v2-warn:#FFA79F; --v2-warn-line:#A8423B; --v2-warn-well:#2E1011;
  --gsb-suit-spade:#9CC8FF; --gsb-suit-heart:#FFBDBD; --gsb-suit-diamond:#FFE07A; --gsb-suit-club:#7FDB95;
  --v2-surface:#2F7A2A;
  --v2-felt-under:linear-gradient(150deg,#378A31 0%,#2F7A2A 50%,#256622 100%);
  --v2-felt-photo:url("/assets/images/soccer/bg.webp") center / cover no-repeat; --v2-felt-blend:normal; --v2-felt-dark:.38;      /* darkened (American Football's .3 left a heading over a yard number hard to read): the pitch's lines stay behind the words */
  --v2-felt-glow:radial-gradient(ellipse at 50% 42%,rgba(255,245,220,.06),rgba(255,255,255,0) 62%);
  --v2-felt-edge:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 48%,rgba(0,0,0,.38) 100%); --v2-felt-rim:.38;
  --v2-felt-sheen:none;
  --v2-engrave-art:none;      /* no engraved wordmark on the pitch's centre circle */
  --v2-on-felt:#FFF6E4; --v2-on-felt-dim:#F0E2C6; --v2-on-felt-accent:#FFDC8C;
  --v2-felt-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.6);      /* a wider shadow under words written on the pitch itself */
  --v2-photo-fade:#082A18; --v2-you:#8FC2FF;
  --v2-logo:url("/assets/brand/logo-on-dark.png");
  --sc-top-w:480px; --sc-top-h:118px;      /* (2026-11-01, fix/soccer-floodlights) the floodlights (floodlights.webp, 4.5 wide to 1): 480 wide is 106 tall, the ball's foot at 96 - above the banner's top (104) */ --sc-corner-w:75px;      /* (2026-11-01, fix/soccer-floodlights) the corner balls whole: half their size, 4px in from the top and side, so each ends at 79px - inside the page, above the banner's top (104) */ --sc-bottom-h:56px;
}
/* THE POINTER: the ball-pattern arrow (its tip the hotspot), the goalkeeper glove over what can be pressed (its fingertip); 32px, sharper on a
   dense screen; a text box keeps the text cursor */
html[data-v2-theme="soccer"]{cursor:url("/assets/images/soccer/cursor-arrow.png") 1 1,auto;cursor:-webkit-image-set(url("/assets/images/soccer/cursor-arrow.png") 1x,url("/assets/images/soccer/cursor-arrow@2x.png") 2x) 1 1,auto}
html[data-v2-theme="soccer"] :is(a[href],button:not(:disabled),[role=button],[role=tab],[role=menuitem],summary,select,label[for],.gsb-btn,.brl-row,.hv2-card,.v2-ph-tab,input[type=checkbox],input[type=radio]){cursor:url("/assets/images/soccer/cursor-glove.png") 2 1,pointer;cursor:-webkit-image-set(url("/assets/images/soccer/cursor-glove.png") 1x,url("/assets/images/soccer/cursor-glove@2x.png") 2x) 2 1,pointer}
html[data-v2-theme="soccer"] :is(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=range]),textarea,[contenteditable=""],[contenteditable=true]){cursor:text}
/* THE DECORATIONS, ON EVERY PAGE OF THE NEW LOOK, as American Football's: the pennants and floodlights across the top, the ball in the middle;
   the ball in its scarf in the two top corners (the right one mirrored); the grass along the bottom, the corner flag at one end and the goal
   at the other. The page's
   own background - beneath everything (z-index -1), never in the way of a click, fixed while the page scrolls. Not at the table. */
html.v2-page[data-v2-theme="soccer"] body main.v2-main::before,
html.v2-page[data-v2-theme="soccer"] body main.v2-main::after{content:"";position:fixed;left:inherit;right:inherit;z-index:-1;pointer-events:none}
html.v2-page[data-v2-theme="soccer"] body main.v2-main::before{top:inherit;height:var(--sc-top-h);
  background:url("/assets/images/soccer/floodlights.webp?v=2026-11-01-1") center top / var(--sc-top-w) auto no-repeat,url("/assets/images/soccer/corner.webp?v=2026-11-01-1") left 4px top 4px / var(--sc-corner-w) auto no-repeat,url("/assets/images/soccer/corner-right.webp?v=2026-11-01-1") right 4px top 4px / var(--sc-corner-w) auto no-repeat}
/* (2026-11-01, fix/soccer-bottom-pieces) THE FLAG AND THE GOAL THREE TIMES THEIR SIZE, standing on the grass strip and rising above it: the strip keeps its
   height (56px, drawn first, so its grass is in front of their feet - the grass alone, its middle repeated, its small ends no longer drawn); the corner flag with the cleats (end-left.webp) and the goal with its ball (end-right.webp)
   are pieces of their own, 134px tall (they were about 45 in the strip), their feet 11px up - on the strip's white line. The decoration is beneath the page
   (z-index -1, as every theme piece): no card, word or button is ever covered, and clicks go through */
html.v2-page[data-v2-theme="soccer"] body main.v2-main::after{bottom:inherit;height:calc(var(--sc-bottom-h) + 90px);
  background:url("/assets/images/soccer/bottom-mid.webp?v=2026-11-01-1") center bottom / auto var(--sc-bottom-h) repeat-x,      /* the grass only, all the way: the strip's own small flag and goal (its ends) are the big pieces now */
    url("/assets/images/soccer/end-left.webp?v=2026-11-01-1") left 2px bottom 11px / auto 115px no-repeat,url("/assets/images/soccer/end-right.webp?v=2026-11-01-1") right 2px bottom 11px / auto 120px no-repeat}      /* 120 (the goal; the flag in proportion, 115): their tops clear the last row of Home cards (at 1440, 134 reached 5px behind them) */
/* THE PHONE: smaller pieces only where they fit - no pennants or turf across the page (no edge there is without words), a small corner piece
   in each bottom corner, beneath what is on it */
html.v2-phone.v2-page[data-v2-theme="soccer"] body main.v2-main::after{display:none}
html.v2-phone.v2-page[data-v2-theme="soccer"] body main.v2-main::before{top:auto;bottom:inherit;height:52px;
  background:url("/assets/images/soccer/corner.webp?v=2026-11-01-1") left 4px bottom 4px / 44px auto no-repeat,url("/assets/images/soccer/corner-right.webp?v=2026-11-01-1") right 4px bottom 4px / 44px auto no-repeat}      /* (2026-11-01) 44 (was 66): whole inside the 52px strip */
/* HOME (home-v2.html), as the mockup: room under the pennants and over the turf */
html.v2-page[data-v2-theme="soccer"]:not(.v2-phone) .hv2-banner{margin-top:calc(var(--sc-top-h) - 14px)}
html.v2-page[data-v2-theme="soccer"]:not(.v2-phone) .hv2-motto{padding-bottom:calc(var(--sc-bottom-h) + 12px)}
/* THE BANNER'S PHOTOGRAPH (banner-soft.webp): the four friends in the stadium's hospitality box, its dark left part melting into the banner's green over a wide
   band (all green at 3% of its width, all photograph at 27%, eased; its left corners rounded off; the dark room greened, blurred) - no edge, no
   line, no black. Shown whole in height at its own shape against the banner's right edge, as Christmas's: the four from about 1000 of the
   banner's 1512, right of the buttons. ON A PHONE the logo covers the band's left half and the four take about 75% of the picture's width, so
   the picture is 66% of the band's height, against its right edge and fading into the green above and below: the four whole, right of the logo. */
html[data-v2-theme="soccer"]:not(.v2-phone) .hv2-photo{left:0!important;width:100%!important}
html[data-v2-theme="soccer"] .hv2-photo img{content:url("/assets/images/soccer/banner-soft.webp")}
html.v2-page[data-v2-theme="soccer"] .hv2-banner .hv2-photo img{position:absolute;top:0;right:0;left:auto;width:auto;height:100%;max-width:none;object-fit:fill;aspect-ratio:1600 / 900;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 4%);mask-image:linear-gradient(90deg,transparent 0%,#000 4%)}
html.v2-page[data-v2-theme="soccer"] .hv2-banner .hv2-photo::after{-webkit-mask-image:none;mask-image:none;box-shadow:none;background:none}
html.v2-phone.v2-page[data-v2-theme="soccer"] .hv2-banner .hv2-photo{overflow:hidden;background:var(--v2-panel)}
html.v2-phone.v2-page[data-v2-theme="soccer"] .hv2-banner .hv2-photo img{top:17%;height:66%;right:0;left:auto;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%)}
html.v2-page[data-v2-theme="soccer"] .hv2-welcome{text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.75)}
/* the logo with a ball resting against its emblem's top-left, clear of its balls and suits (logo.webp: the site's own logo, untouched) - Home's
   banner only, computer and phone; the site's logo everywhere else */
html.v2-page[data-v2-theme="soccer"] body .hv2-logo{background-image:url("/assets/images/soccer/logo.webp")}
/* the eight cards, each with its icon at the top right (the title kept clear of it), in the sheet's order */
html[data-v2-theme="soccer"] .hv2-card{position:relative;border-color:var(--v2-line)}
html[data-v2-theme="soccer"] .hv2-card::after{content:"";position:absolute;right:14px;top:10px;width:58px;height:58px;pointer-events:none;background:var(--sc-icon) center / contain no-repeat}
html[data-v2-theme="soccer"] .hv2-card h3{padding-right:64px}
html[data-v2-theme="soccer"] .hv2-card .hv2-tag{margin-right:66px}
html[data-v2-theme="soccer"] .hv2-cards > .hv2-card:nth-child(1){--sc-icon:url("/assets/images/soccer/icon-1.webp")}
html[data-v2-theme="soccer"] .hv2-cards > .hv2-card:nth-child(2){--sc-icon:url("/assets/images/soccer/icon-2.webp")}
html[data-v2-theme="soccer"] .hv2-cards > .hv2-card:nth-child(3){--sc-icon:url("/assets/images/soccer/icon-3.webp")}
html[data-v2-theme="soccer"] .hv2-cards > .hv2-card:nth-child(4){--sc-icon:url("/assets/images/soccer/icon-4.webp")}
html[data-v2-theme="soccer"] .hv2-cards > .hv2-card:nth-child(5){--sc-icon:url("/assets/images/soccer/icon-5.webp")}
html[data-v2-theme="soccer"] .hv2-cards > .hv2-card:nth-child(6){--sc-icon:url("/assets/images/soccer/icon-6.webp")}
html[data-v2-theme="soccer"] .hv2-cards > .hv2-card:nth-child(7){--sc-icon:url("/assets/images/soccer/icon-7.webp")}
html[data-v2-theme="soccer"] .hv2-cards > .hv2-card:nth-child(8){--sc-icon:url("/assets/images/soccer/icon-8.webp")}
html.v2-phone[data-v2-theme="soccer"] .hv2-card::after{width:44px;height:44px;top:10px;right:12px}
html.v2-phone[data-v2-theme="soccer"] .hv2-card h3{padding-right:50px}
/* the motto between two gold lines */
html[data-v2-theme="soccer"] .hv2-motto{display:flex;align-items:center;justify-content:center;gap:14px}
html[data-v2-theme="soccer"] .hv2-motto::before,html[data-v2-theme="soccer"] .hv2-motto::after{content:"";flex:0 0 auto;width:110px;height:1px;pointer-events:none}
html[data-v2-theme="soccer"] .hv2-motto::before{background:linear-gradient(90deg,rgba(227,178,67,0),#E3B243)}
html[data-v2-theme="soccer"] .hv2-motto::after{background:linear-gradient(90deg,#E3B243,rgba(227,178,67,0))}
html.v2-phone[data-v2-theme="soccer"] .hv2-motto::before,html.v2-phone[data-v2-theme="soccer"] .hv2-motto::after{width:44px}


/* (2026-11-01, fix/soccer-additions) ON A BIDDING ROOM BOARD (html.brd-board, the computer) THE TOP CORNERS ARE LEFT BARE: the board puts its "Leave"
   button and its name in the top-left corner, right where the corner piece (American Football's football and whistle, Soccer's ball and scarf,
   Christmas's holly) stood behind them, and the top-right holds the notes' panel. The garland across the top stays; the phone has no top corners. */
html.v2-page.brd-board:not(.v2-phone)[data-v2-theme="christmas"] body main.v2-main::before{background:url("/assets/images/christmas/garland.webp") center top / var(--xm-garland-w) auto no-repeat}
html.v2-page.brd-board:not(.v2-phone)[data-v2-theme="football"] body main.v2-main::before{background:url("/assets/images/football/top.webp") center top / var(--fb-top-w) auto no-repeat}
html.v2-page.brd-board:not(.v2-phone)[data-v2-theme="soccer"] body main.v2-main::before{background:url("/assets/images/soccer/floodlights.webp?v=2026-11-01-1") center top / var(--sc-top-w) auto no-repeat}



/* (2026-11-01, fix/christmas-ornaments-size) the ornaments were each item's background here (too small, squeezed inside, sometimes under
   words); they are drawn by gsb-theme-ornaments.js now (it was gsb-xmas-ornaments.js) - over the edges, never over words */

/*
  WHAT THE SHARED MODULES DRAW ON A CONVERTED PAGE - the Friends and Messages panel, the profile
  popup, an invitation, every .gsb-dialog - is styled by gsb-theme.css from the SITE theme's
  tokens (--gsb-*). On a page with the new frame (html.v2-page) those tokens are given the
  portal theme's values, so that those pieces are in the same theme as the page round them. The
  site theme the player chose (gsb.theme) is not written and is as it was on every other page.
*/
html.v2-page:root{
  --gsb-ink:var(--v2-panel);
  --gsb-panel:var(--v2-panel);
  --gsb-panel-2:var(--v2-well);
  --gsb-raise:var(--v2-well);
  --gsb-well:var(--v2-well);
  --gsb-line:var(--v2-line);
  --gsb-line-strong:var(--v2-line);
  --gsb-gold:var(--v2-accent);
  --gsb-gold-bright:var(--v2-accent);
  --gsb-gold-rgb:var(--v2-accent-rgb-s);
  --gsb-gold-edge-rgb:var(--v2-accent-rgb-s);
  --gsb-on-gold:var(--v2-on-accent);
  --gsb-cream:var(--v2-ink);
  --gsb-muted:var(--v2-dim);
  --gsb-green:var(--v2-online);
}

/*
  A SEAT HELD FOR SOMEBODY IS BLUE (2026-10-10), in the seat pickers too. .seat-btn.reserved comes
  from gsb-theme.css, where it is the old look's dark red (--gsb-seat-taken) with the name at 8px;
  the new look never said otherwise, so Create a Table and Create a Team Match kept the red after
  the table's reserved seat went blue. Red is for vulnerability only. The name is 13px, the size
  the Find a Table cards write a name in, and wraps rather than being cut.
*/
.seat-btn.reserved{background:var(--v2-reserved)!important;border-color:var(--v2-reserved)!important;color:var(--v2-on-reserved)!important}
.seat-btn.reserved:hover{border-color:var(--v2-on-reserved)!important}
.seat-btn.reserved .seat-reserve-name{font-size:13px;line-height:1.15;font-weight:700;color:var(--v2-on-reserved);white-space:normal;overflow-wrap:anywhere;padding:0 3px 3px;box-sizing:border-box}
/* inside the outer page, on a computer: the room a side bar takes in the 1872 x 1078 picture, and how much larger it is drawn */
html.v2-staged:root{--v2-rail:148.2px;--v2-rail-zoom:1.95}
/* a phone has no side bars: what is measured from one there is measured as it always was */
html.v2-phone:root{--v2-rail:76px}

/* ====== THE TEXT SIZE, EVERYWHERE (2026-10-14) ====================================================================================
   ONE VALUE: --gsb-ui-scale, put on <html> by gsb-font-size.js from the Font size setting (1 at Normal, 1.26 at Large, 1.52 at Larger).
   Whatever reads it grows with the setting - the words AND what is around them (height, padding, width), so nothing is cut off:
     drawn larger as a whole (`zoom`)   popups and confirmations, the buttons, tabs and switches of the pages, the System Builder's and the
                                        tournaments' panels, the onboarding choices
     words larger (font-size)           Home's hero buttons (they keep their grid and fit their labels), notices and status lines
   NOT SCALED, by design: the playing cards and the table's own layout (they have their own sizes), the logo, pictures and avatars - none of
   them is inside what is zoomed except as part of a popup. The five kinds of text the setting always reached keep --gsb-text-scale. */
html{--gsb-ui-scale:1}
html body :is(.gsb-dialog,.dl-box,.iw-box){zoom:var(--gsb-ui-scale,1);max-width:calc((100vw - 24px) / var(--gsb-ui-scale,1))!important;max-height:calc((100vh - 24px) / var(--gsb-ui-scale,1))!important}
html.v2-page:not(.v2-phone) body .v2-main :is(.gsb-btn,.gsb-tabbar-btn,.gsb-seg-btn,.gsb-pill):not(.hv2-grid > *){zoom:var(--gsb-ui-scale,1)}
/* (2026-10-30, fix/app-polish) ON A PHONE (and in the app) A BUTTON GROWS ONLY A LITTLE: --gsb-ui-scale-soft, 1 / 1.05 / 1.10 (gsb-font-size.js). The words
   people read keep the full size; a button at the full 1.52 pushed the layout about - the Back button half the screen wide, a title onto two lines. */
html.v2-page.v2-phone body .v2-main :is(.gsb-btn,.gsb-tabbar-btn,.gsb-seg-btn,.gsb-pill):not(.hv2-grid > *){zoom:var(--gsb-ui-scale-soft,1)}
html.v2-page body :is(#sbHome,#sbWizard,#sbSummary,.ft-panel){zoom:var(--gsb-ui-scale,1)}
html.v2-page body :is(#sbHome,#sbWizard,#sbSummary,.ft-panel) :is(.gsb-btn,.gsb-tabbar-btn,.gsb-seg-btn,.gsb-pill){zoom:1}
html.au-page body .ob{zoom:var(--gsb-ui-scale,1)}
html body .hv2-acts.hv2-grid > :is(a,button){font-size:calc(16px * var(--gsb-ui-scale,1));height:calc(48px * var(--gsb-ui-scale,1))!important;border-radius:calc(24px * var(--gsb-ui-scale,1))!important}
/* (the hero grid's columns and width are worked out by Home's own script, layoutHero: the longest label decides them; nothing is shrunk) */
html body :is(.hv2-actmsg,.inst-say,.dl-say,.sb-msg){font-size:calc(15px * var(--gsb-ui-scale,1))}
/* the menus by the bars grow from the corner they hang from (the gear's at the foot, the avatar's at the top) - `zoom` would move them too */
html:not(.v2-phone) body .gsb-usermenu{scale:var(--gsb-ui-scale,1);transform-origin:100% 0}      /* `scale`, not `transform`: the menus have a transform of their own (their slide) */
html:not(.v2-phone) body #settingsMenu.gsb-usermenu{transform-origin:100% 100%}
/* Home's cards: the words grow, a little less than the rest, so the longest still fits its card */
html body .hv2-card h3{font-size:calc(21px * min(var(--gsb-ui-scale,1), 1.25))}html body .hv2-card p{font-size:calc(16px * min(var(--gsb-ui-scale,1), 1.18))}