* {
    -webkit-tap-highlight-color: transparent;
}
select:focus, textarea:focus, input:focus {
    outline: none;
}

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: var(--color-9);
    box-shadow: 0 0 100px 100px inset var(--mainBackground);
}

* :focus {
    outline-width: 0;
}

/* SURFACE TOKENS -- the start of a design system, set 2026-09-10 at the product
   owner's request.

   The colour tokens below are per theme. These are not: a card is the same
   shape in every theme, and only its colours change. They were hand-picked
   per component before this, so the head-to-head card was padded 12px 14px 10px
   and the result table 4px 12px 8px -- close enough to look like a mistake
   rather than a choice, which is exactly how it read.

   Anything that draws a panel spends these instead of inventing its own. New
   components always; existing ones as they are next opened, the same way the
   CSS-in-CSS rule is being applied. */
:root{
    --card-px:14px;          /* a card's left and right padding      */
    --card-py:12px;          /* its top and bottom                   */
    /* THESE TWO PREDATE THE SURFACE TOKENS AND WERE NOT WIRED TO THEM.
       Everything that reads --card-radius -- the match page result and compare
       panels, the standings table, the knockout bracket -- was universal in the
       sense that it read ONE variable, and that variable was a hardcoded 12px.
       So a square theme squared everything around those panels and left them
       round, which is exactly what the owner kept reporting. Universal is not
       the same as themed: the variable has to point AT the theme. */
    --card-radius:var(--surface-radius-lg, 12px);
    --card-line:var(--surface-border-w, 1px);
    --row-py:10px;           /* the breathing room in a table row    */
    --label-fs:12px;         /* a row label, a field name            */
    --figure-fs:15px;        /* a number the reader came for         */
    --eyebrow-fs:10px;       /* the small uppercase caption above it */

    /* A COMPARISON BAR. Two of them, one per side, growing out from a gap in
       the middle -- the gap is what says they are two bars and not one
       measure cut in half. Added 2026-09-11 with the Result tab's statistics;
       anything else that compares two sides spends these. */
    /* RATE MOVEMENT. These were six literals inside one page's stylesheet
       (#7ac201, #ff5050 and four rgba() built from them), which is why a rate
       going up was the one thing on the page that could not follow a theme.
       The soft pair is the wash; it is deliberately more transparent than the
       bar, which is a hairline and has to hold its own against the figure. */
    --rate-up:#7ac201;
    --rate-down:#ff5050;
    --rate-up-soft:rgba(122,194,1,.42);
    --rate-down-soft:rgba(255,80,80,.44);
    --rate-up-haze:rgba(122,194,1,.22);
    --rate-down-haze:rgba(255,80,80,.24);

    --bar-h:9px;
    --bar-radius:var(--surface-radius-sm, 5px);
    --bar-gap:7px;
}
/* ==========================================================================
   THE SURFACE, AS SOMETHING A THEME CAN CHANGE

   A theme can only change what has a name, and until now the only names were
   colours -- which is why 22 themes are one page with the accent swapped. These
   are the decisions that actually make a surface read as charcoal, or paper, or
   flat, or raised.

   Every value here is copied from the rule it replaces, so today's rendering is
   unchanged. A theme that wants a different feel overrides these instead of
   touching components:

       html[main-theme="themeN"]{
           --surface-sheen: none;          a flat theme
           --surface-elevation: none;
           --surface-radius: 4px;
       }

   Declared on bare html so every theme inherits; a theme block carries an
   attribute and outranks this whatever the source order.
   ========================================================================== */
html{
  /* the ground a panel sits on, and the one a raised part sits on */
  --surface-bg: var(--color-2);
  --surface-bg-raised: var(--color-3);

  /* the edge: width and colour separately, so a theme can keep the colour and
     drop the line, or the other way round */
  --surface-border: var(--color-4);
  --surface-border-w: 1px;

  /* HOW ROUND, IN FOUR STEPS.

     One step would flatten the design rather than theme it: a 2px chip and a
     10px panel mean different things. Four keeps the hierarchy and still lets a
     theme square everything -- or round everything -- in four declarations.

     Every site that reads these keeps its own value as a fallback, so a page
     that never sees this block looks exactly as it does today. */
  --surface-radius-xs: 2px;
  --surface-radius-2:  3px;
  --surface-radius-sm: 5px;
  --surface-radius-md: 8px;
  --surface-radius:    10px;
  --surface-radius-lg: 14px;

  /* A CAPSULE IS NOT A CARD WITH A BIG CORNER.
     It has to stay fully round in a round theme and go square in a square one,
     and no single value does both jobs -- so the pills have their own name.
     Circles are not here on purpose: an avatar and a loading ring are shapes,
     and nobody has asked for a square spinner. */
  --surface-radius-pill: 999px;

  /* AND A CIRCLE IS NOT A CAPSULE EITHER.
     A big radius on a box as tall as it is wide draws a circle -- a chip, an
     avatar, the hub in the middle of the wheel. Those are objects in the
     artwork, not surfaces, so every theme keeps them round; squaring one reads
     as a bug rather than as a style. */
  --surface-radius-circle: 50%;

  /* light falling across a surface. Two, because the match row and the page
     panels were drawn with different strengths and both are worth keeping. */
  --surface-sheen: linear-gradient(145deg, rgba(255,255,255, .075), rgba(0, 0, 0, .0));
  --surface-sheen-panel: linear-gradient(145deg, rgba(255,255,255,.08), rgba(0,0,0,.06));

  /* whether it sits above the page or in it */
  --surface-elevation: 0 0 25px var(--color-2), 0px -25px 20px 0px var(--color-3) inset;

  /* CONTROLS, SO THE BUTTONS BELONG TO THE THEME TOO.
     The main button and its quiet twin carried their own wash and their own
     float, written into the component -- which is why they looked like
     themselves in all 22 themes rather than looking like the theme. */
  --surface-sheen-control: linear-gradient(135deg, rgba(255,255,255,.30), rgba(0,0,0,.30));
  --surface-elevation-control: 0 5px 18px 2px var(--color-1), 0px 6px 4px -2px var(--color-6), 0 5px 5px -3px var(--color-1);
}

html[main-theme="theme1"] {
    --mainColor: #ffcc00;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme2"] {
    --mainColor: #ecbb0d;
    --virtualColor: #79b93f;
    --mainBackground: #e5e5e5;
    --color-1: #eee;
    --color-2: #fff;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme3"] {
    --mainColor: #a1ff0a;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme4"] {
    --mainColor: #7dc2ff;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme5"] {
    --mainColor: #ff3636;
    --virtualColor: #79b93f;
    --mainBackground: #fff7f6;
    --color-1: #fffdfc;
    --color-2: #f4eceb;
    --color-3: #e3dbda;
    --color-4: #d2cac9;
    --color-5: #9f9796;
    --color-6: #6b6563;
    --color-7: #5a5452;
    --color-8: #383231;
    --color-9: #080000;

    /* FLAT. Geometric: square corners, a drawn edge, and no gradient anywhere
       -- including the page itself, which is one colour end to end. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: none;
    --surface-border-w: 1px;
    --surface-radius-xs: 0px;
    --surface-radius-2: 0px;
    --surface-radius-sm: 0px;
    --surface-radius-md: 0px;
    --surface-radius: 0px;
    --surface-radius-lg: 0px;
    --surface-radius-pill: 0px;
    --surface-sheen-control: none;
    --surface-elevation-control: none;
}

html[main-theme="theme6"] {
    --mainColor: #00ced1;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme7"] {
    --mainColor: #57ce57;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme8"] {
    --mainColor: #cddc39;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme9"] {
    --mainColor: #00ced1;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme10"] {
    --mainColor: #deb887;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme11"] {
    --mainColor: #b0ad8c;
    --virtualColor: #79b93f;
    --mainBackground: #131104;
    --color-1: #030100;
    --color-2: #131104;
    --color-3: #23221a;
    --color-4: #34332a;
    --color-5: #68665c;
    --color-6: #9b998f;
    --color-7: #acaaa0;
    --color-8: #ceccc1;
    --color-9: #fffff4;
    --mainGlow: rgba(176,173,140,.10);
    --mainGlow2: rgba(176,173,140,.07);

    /* PAPER. Printed rather than lit: a hairline edge, a 2px corner, and one
       dark line under each surface instead of a shadow -- what a printed card
       gives you, not a float. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: 0 1px 0 rgba(0,0,0,.20);
    --surface-border-w: 1px;
    --surface-radius-xs: 2px;
    --surface-radius-2: 2px;
    --surface-radius-sm: 2px;
    --surface-radius-md: 2px;
    --surface-radius: 2px;
    --surface-radius-lg: 2px;
    --surface-radius-pill: 2px;
    --surface-sheen-control: none;
    --surface-elevation-control: 0 1px 0 rgba(0,0,0,.20);
}

html[main-theme="theme12"] {
    --mainColor: #b0ad8c;
    --virtualColor: #79b93f;
    --mainBackground: #fbfaee;
    --color-1: #fffff4;
    --color-2: #f0efe3;
    --color-3: #dfddd2;
    --color-4: #ceccc1;
    --color-5: #9b998f;
    --color-6: #68665c;
    --color-7: #57554c;
    --color-8: #34332a;
    --color-9: #030100;
    --mainGlow: rgba(176,173,140,.10);
    --mainGlow2: rgba(176,173,140,.07);

    /* PAPER. Printed rather than lit: a hairline edge, a 2px corner, and one
       dark line under each surface instead of a shadow -- what a printed card
       gives you, not a float. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: 0 1px 0 rgba(0,0,0,.20);
    --surface-border-w: 1px;
    --surface-radius-xs: 2px;
    --surface-radius-2: 2px;
    --surface-radius-sm: 2px;
    --surface-radius-md: 2px;
    --surface-radius: 2px;
    --surface-radius-lg: 2px;
    --surface-radius-pill: 2px;
    --surface-sheen-control: none;
    --surface-elevation-control: 0 1px 0 rgba(0,0,0,.20);
}

html[main-theme="theme13"] {
    --mainColor: #35b7ff;
    --virtualColor: #79b93f;
    --mainBackground: #0e1114;
    --color-1: #000105;
    --color-2: #0e1114;
    --color-3: #202225;
    --color-4: #313336;
    --color-5: #646669;
    --color-6: #96999c;
    --color-7: #a7aaad;
    --color-8: #c9ccd0;
    --color-9: #fcffff;
    --mainGlow: rgba(53,183,255,.10);
    --mainGlow2: rgba(53,183,255,.05);

    /* CHARCOAL. Matte: no edge, no light across a surface, nothing floating.
       Panels separate by lightness alone. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: none;
    --surface-border-w: 0px;
    --surface-radius-xs: 2px;
    --surface-radius-2: 2px;
    --surface-radius-sm: 3px;
    --surface-radius-md: 4px;
    --surface-radius: 6px;
    --surface-radius-lg: 8px;
    --surface-radius-pill: 999px;
    --surface-sheen-control: none;
    --surface-elevation-control: none;
}

html[main-theme="theme14"] {
    --mainColor: #35b7ff;
    --virtualColor: #79b93f;
    --mainBackground: #f6f9fd;
    --color-1: #fcffff;
    --color-2: #ebeef2;
    --color-3: #dadde1;
    --color-4: #c9ccd0;
    --color-5: #96999c;
    --color-6: #646669;
    --color-7: #535558;
    --color-8: #313336;
    --color-9: #000105;
    --mainGlow: rgba(53,183,255,.10);
    --mainGlow2: rgba(53,183,255,.05);

    /* CHARCOAL. Matte: no edge, no light across a surface, nothing floating.
       Panels separate by lightness alone. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: none;
    --surface-border-w: 0px;
    --surface-radius-xs: 2px;
    --surface-radius-2: 2px;
    --surface-radius-sm: 3px;
    --surface-radius-md: 4px;
    --surface-radius: 6px;
    --surface-radius-lg: 8px;
    --surface-radius-pill: 999px;
    --surface-sheen-control: none;
    --surface-elevation-control: none;
}

html[main-theme="theme15"] {
    --mainColor: #a550a6;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme16"] {
    --mainColor: #e95a5c;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme17"] {
    --mainColor: #ff4040;
    --virtualColor: #79b93f;
    --mainBackground: #160f0e;
    --color-1: #080000;
    --color-2: #160f0e;
    --color-3: #272120;
    --color-4: #383231;
    --color-5: #6c6563;
    --color-6: #9f9796;
    --color-7: #b0a8a7;
    --color-8: #d2cac9;
    --color-9: #fffdfc;

    /* FLAT. Geometric: square corners, a drawn edge, and no gradient anywhere
       -- including the page itself, which is one colour end to end. */
    --surface-sheen: none;
    --surface-sheen-panel: none;
    --surface-elevation: none;
    --surface-border-w: 1px;
    --surface-radius-xs: 0px;
    --surface-radius-2: 0px;
    --surface-radius-sm: 0px;
    --surface-radius-md: 0px;
    --surface-radius: 0px;
    --surface-radius-lg: 0px;
    --surface-radius-pill: 0px;
    --surface-sheen-control: none;
    --surface-elevation-control: none;
}

html[main-theme="theme18"] {
    --mainColor: #8bc34a;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[main-theme="theme19"] {
    --mainColor: #ac284f;
    --virtualColor: #79b93f;
    --mainBackground: #111;
    --color-1: #000;
    --color-2: #111;
    --color-3: #222;
    --color-4: #333;
    --color-5: #666;
    --color-6: #999;
    --color-7: #aaa;
    --color-8: #ccc;
    --color-9: #fff;
}

html[main-theme="theme20"] {
    /* Neutrals carried to the accent's hue at a constant Lab chroma of 3.5,
       every step's lightness untouched. Constant chroma rather than HSL
       saturation because saturation all but vanishes near black, and near
       black is where a dark theme lives: #111 stayed #111 under HSL and
       becomes a warm near-black here. First pair done this way. */
    --mainColor: #ec671e;
    --virtualColor: #79b93f;
    --mainBackground: #fff7f4;
    --mainGlow: rgba(236,103,30,.16);
    --mainGlow2: rgba(236,103,30,.09);
    --mainArc: rgba(236,103,30,.08);
    --color-1: #fffdfa;
    --color-2: #f5ece9;
    --color-3: #e4dbd8;
    --color-4: #d3cbc7;
    --color-5: #9f9894;
    --color-6: #6c6562;
    --color-7: #5a5451;
    --color-8: #38322f;
    --color-9: #090000;
}

html[main-theme="theme21"] {
    /* Neutrals carried to the accent's hue at a constant Lab chroma of 3.5,
       every step's lightness untouched. Constant chroma rather than HSL
       saturation because saturation all but vanishes near black, and near
       black is where a dark theme lives: #111 stayed #111 under HSL and
       becomes a warm near-black here. First pair done this way. */
    --mainColor: #ec671e;
    --virtualColor: #79b93f;
    --mainBackground: #16100c;
    --mainGlow: rgba(236,103,30,.22);
    --mainGlow2: rgba(236,103,30,.13);
    --mainArc: rgba(236,103,30,.10);
    --color-1: #090000;
    --color-2: #16100c;
    --color-3: #27211e;
    --color-4: #38322f;
    --color-5: #6c6562;
    --color-6: #9f9894;
    --color-7: #b0a9a5;
    --color-8: #d3cbc7;
    --color-9: #fffdfa;
}

html[main-theme="theme22"] {
    --mainColor: #d369bb;
    --virtualColor: #79b93f;
    --mainBackground: #f9f9f9;
    --color-1: #fff;
    --color-2: #eee;
    --color-3: #ddd;
    --color-4: #ccc;
    --color-5: #999;
    --color-6: #666;
    --color-7: #555;
    --color-8: #333;
    --color-9: #000;
}

html[sport-theme="ca1"] {
    --sportColor: var(--mainColor);
}

html[sport-theme="ca2"] {
    --sportColor: var(--virtualColor);
}

body {
    background: linear-gradient(45deg , var(--mainBackground) 10%,transparent 11%, transparent 89% , var(--mainBackground) 90%),linear-gradient(135deg , var(--mainBackground) 10%,transparent 11%, transparent 89% , var(--mainBackground) 90%),radial-gradient(circle, transparent 25%, var(--color-1) 26%),linear-gradient(0deg, transparent 44%, var(--mainBackground) 45%, var(--mainBackground) 55%, transparent 56%), linear-gradient(90deg, transparent 44%, var(--mainBackground) 45%, var(--mainBackground) 55%, transparent 56%);
    background-size: 3em 3em;
    background-color: var(--color-1);
    opacity: 1;
    margin: 0 auto;
    font-family: DDIN, aller, ubuntu, tahoma;
    color: var(--color-9);
    cursor: default
}

p{font-family:Aller,tahoma;font-size:12px;padding:0 10px}
strong{color:var(--mainColor);font-weight:400}
a{text-decoration:none;color:var(--color-9)}
h1,h2,h3,h4,h5,h6{font-weight:400;margin:5px auto;text-align:center}
input{padding:10px;font-family:DDIN;border-radius:var(--surface-radius-sm, 5px);width:200px;color:var(--color-9);border:1px solid var(--color-5);font-size:16px;box-shadow:0 0 0 20px inset var(--mainBackground);max-width:90%}
input:disabled{opacity:.5}
textarea{padding:10px;font-family:DDIN;background:var(--mainBackground);border-radius:var(--surface-radius-sm, 5px);width:200px;color:var(--color-9);border:1px solid var(--color-5);font-size:16px}
input[type="radio"]{display:inline-block;accent-color:var(--mainColor);width:auto;box-shadow:none}
label{cursor:pointer;display:table;margin:5px}
section{margin:10px;padding:10px}
select{padding:10px;border-radius:var(--surface-radius-sm, 5px);font-family:DDIN;width:220px;background:var(--mainBackground);color:var(--color-9);border:1px solid var(--color-5);font-size:16px}
select:disabled{opacity:.5}
.header{margin-bottom:60px}
.content{max-width:500px;margin:10px auto;position:relative;padding-bottom:20px}
.center{text-align:center;margin:5px auto 20px;display:block}
.hide{display:none}
.disabled{opacity:.3;filter: grayscale(1);}
.disabled:hover{transform:none!important}
.noCase{display:block;font-size:28px;margin:80px auto 0;text-align:center;font-family:DDIN}
.noCase video{max-width:90%;width:auto;max-height:500px;border:3px solid #fff;border-radius:var(--surface-radius, 10px)}
/* 2026-09-10: the mask runs the whole height of the label, not its bottom
   59%. The border below crosses half a pixel above where the paint used to
   begin, so the line ran through the words instead of stopping either side
   of them. Same two colours; only the geometry changed. Moving the -12px
   pull instead would have shifted the spacing of every field on the site. */
.fieldTitle{margin:0 auto -12px;display:table;border-radius:var(--surface-radius, 10px);z-index:1;position:relative;padding:0 7px;font-size:10px;color:var(--color-6);background-image:linear-gradient(0deg,var(--mainBackground) 0%,var(--color-2) 100%)}
.fieldDescription{width:220px;margin:0 auto 50px;display:table;font-family:'Aller';font-size:10px;color:var(--color-6)}
.icon{display:table;width:128px;margin:10px auto;opacity:0;animation:zoomIn .5s cubic-bezier(0,0,0,1.2) .25s forwards}
.dialog-icon{display:table;width:128px;margin:-10px auto 10px;opacity:0;animation:zoomIn .75s cubic-bezier(0,0,0,2) .25s forwards}
.audio{position:absolute;top:5px;right:5px;width:18px;height:18px;display:table;z-index:101;border-radius:var(--surface-radius-xs, 2px);cursor:pointer}
.audio[au="0"]{background:var(--mainColor) url(/images/sound_off_v1.png) no-repeat center / cover}
.audio[au="1"]{background:var(--mainColor) url(/images/sound_on_v1.png) no-repeat center / cover}
.help{position:absolute;top:5px;right:25px;width:18px;height:18px;background:var(--mainColor) url(/images/question_v1.png) no-repeat center / cover;border-radius:var(--surface-radius-xs, 2px);display:table;cursor:pointer;z-index:101}
.loading{margin:100px auto;display:table}
.main{display:none}
.p_ga_2_m[demo="0"] .demo{display:none}
.p_ga_2_m[demo="1"] .demo{margin:0;display:table;position:sticky;left:0;top:60px;color:var(--mainColor);font-size:22px;z-index:4}
.p_ga_2_m[demo="1"] .demo span{background:#fff;display:inline-block;color:#000;padding:0 10px;transform:scale(.8);margin-right:-13px;border-radius:var(--surface-radius-sm, 5px)}
.p_ga_2_m[demo="1"] .demo a{background:var(--mainColor);color:#000;display:inline-block;padding:3px 30px 3px 10px;border-radius:var(--surface-radius-sm, 5px);position:relative}
.p_ga_2_m[demo="1"] .demo a::before{content:"";position:absolute;width:12px;height:11px;top:50%;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:translateY(-50%) rotate(-90deg) scale(.8)}
.round{background:var(--mainColor);color:#111;position:relative;cursor:pointer;display:table}
.round.dark{background:var(--color-4);border-radius:var(--surface-radius-pill, 110px);transform:scale(.7);width:auto;padding:10px 40px}
.mediumBox{margin:10px auto;border:2px solid var(--color-3);border-radius:var(--surface-radius, 10px);padding:20px;background:var(--color-2);width:calc(90% - 40px);max-width:300px;opacity:0;animation:zoomIn .5s cubic-bezier(0,0,0,1.2) .1s forwards;position:relative;z-index:1;overflow:hidden}
.mediumBox-title{margin:-20px auto 15px;color:var(--color-5);display:table;background:var(--color-3);padding:5px 30px 7px;border-radius:0 0 50% 50%;animation:fromTop 1s cubic-bezier(0,0,0,1) .9s forwards;opacity:0;text-align:center}
body,.promoColumnLeft{scrollbar-color:var(--color-4) var(--color-3);scrollbar-width:thin}
::-webkit-scrollbar{width:5px;height:8px;background:var(--color-4)}
::-webkit-scrollbar-thumb{background:var(--color-5);border-radius:var(--surface-radius-sm, 5px)}
.arrow{border:solid #000;border-width:0 3px 3px 0;display:inline-block;padding:3px}
.arrow.right{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}
.arrow.left{transform:rotate(135deg);-webkit-transform:rotate(135deg)}
.arrow.up{transform:rotate(-135deg);-webkit-transform:rotate(-135deg)}
.arrow.down{transform:rotate(45deg);-webkit-transform:rotate(45deg)}
.button{transition:.3s;background:var(--mainColor);color:#000;padding:10px;border-radius:var(--surface-radius-pill, 100px);text-align:center;margin:5px auto;position:relative;cursor:pointer;display:flex;background-image:var(--surface-sheen-control);width:200px;justify-content:center;align-items:center;max-width:90%;border:none;box-shadow:var(--surface-elevation-control);top:-3px;z-index:1}
.button:active{transition:.3s;box-shadow:0 1px 5px 0 var(--color-1);transform:scale(.95) translate(0px,4px);filter:brightness(.9)}
.button.arrowRight{text-align:left}
.button.arrowRight::before{content:"";position:absolute;width:20px;height:20px;top:13px;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:rotate(-90deg)}
.button.arrowRight::after{content:"";position:absolute;width:20px;height:47px;top:0;right:20px;border-left:5px solid var(--color-2)}
.button.dark{background:var(--mainBackground);transform:scale(.85);color:var(--color-5);border:var(--surface-border-w) solid var(--surface-border);transition:.3s;width:auto;padding:2px 20px;margin:10px auto;border-radius:var(--surface-radius-pill, 100px);max-width:max-content;min-width:auto;box-shadow:none;z-index:0;animation:fadeIn 1s cubic-bezier(0,0,0,1.2) 2s forwards;opacity:0}
.button.dark:active{transform:scale(.8);transition:.3s}
.button.dark.arrowRight::before{content:"";position:absolute;width:20px;height:20px;top:13px;right:10px;background:url(/images/arrow_down_v1.png) no-repeat scroll center / contain;transform:rotate(-90deg) scale(.75)}
.button.dark.arrowRight::after{display:none}
.backSmallButton{background:var(--mainColor);height:30px;width:30px;display:block;margin:10px;cursor:pointer;text-align:center;line-height:30px;color:var(--color-2);opacity:0;animation:fromRight .5s cubic-bezier(0,0,0,1.2) .5s forwards;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);border-radius:var(--surface-radius-2, 3px)}
.backSmallButton::before{content:"Back";color:var(--color-1);width:30px;text-align:center;display:block;padding-top:18px;font-size:9px;font-family:Aller;font-weight:700;display:none}
.button::after{content:'';display:block;width:1.2em;height:1.2em;position:absolute;left:calc(50% - 0.75em);top:calc(50% - 0.75em);border:3px solid transparent;border-right-color:#000;border-radius:50%;animation:none;opacity:0}
@keyframes button-anim {
from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
.button.button-loading{color:transparent!important}
.button.button-loading::after{opacity:1;animation:button-anim .7s linear infinite}
.moreInfo{padding:5px 10px;border:1px solid var(--color-6);display:table;margin:50px auto 0 10px;border-radius:var(--surface-radius-sm, 5px);background:var(--color-1)}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.progressbar{counter-reset:step;padding:0;height:50px;margin-bottom:20px;opacity:0;animation:fromTop 1s cubic-bezier(0,0,0,1.5) .5s forwards}
.progressbar li{list-style-type:none;float:left;font-size:12px;position:relative;text-align:center;color:var(--color-5)}
.progressbar li:before{height:10px;aspect-ratio:1;content:counter(step);counter-increment:step;display:block;text-align:center;margin:5px auto 10px;background:var(--color-5);padding:5px;color:transparent;border-radius:var(--surface-radius-circle, 100px);line-height:11px;position:relative;z-index:2;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);box-shadow:0 0 5px var(--color-1)}
.progressbar li:after{width:100%;height:1px;content:'';position:absolute;background-color:var(--color-5);top:15px;left:-50%;z-index:-1}
.progressbar li:first-child:after{content:none}
.progressbar li.active a{color:#666}
.progressbar li.current{color:var(--color-9)}
.progressbar li.current a{color:var(--mainColor)}
.progressbar li.current:before{background-color:var(--color-9)}
.progressbar-close span{position:absolute;top:0;right:0;width:25px;height:25px;background:var(--mainColor) url(/images/main-close-8625.png) no-repeat scroll center / 40%;display:block}
/* HIDDEN MEANS HIDDEN, ANYWHERE.

   The browser's own rule is (0,1,0) and loses to any component rule that sets
   display, so the attribute only worked on elements nobody had styled -- and
   the tree grew two private copies of this line to get around that
   (.show[hidden] in p-ga-6-main-v2.css, .p_ga_8_post_list_v2[hidden] in its
   own file). Declared once, here, so the next one does not need a third.

   Audited before it was written: six elements in the tree carry the attribute,
   none of them is given a display by CSS while carrying it, and none is shown
   by jQuery. Nothing on screen changes. `type="hidden"` is a value, not this
   attribute, and is unaffected. */
[hidden]{display:none!important}
.tab *{transition:.2s}
.tab{background:var(--color-3);display:flex;padding:0;margin:0;font-size:13px;line-height:20px;opacity:0;animation:fromTop .5s cubic-bezier(0,0,0,1.1) .1s forwards;position:relative;z-index:2;overflow-x: clip;}
.tab ul{background:blue}
.tab li{display:flex;flex-grow:1;text-align:center;justify-content:center;cursor:pointer;padding:5px 0;background: linear-gradient(174deg, var(--color-3),  var(--color-4));overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])){--has-multi-tabs:initial}
.tab li.selected{background:var(--color-1);position:relative;border-radius:var(--surface-radius-sm, 5px);box-shadow: 0 33px 15px -38px inset var(--color-8),0 -33px 15px -38px inset var(--color-8),0 0 10px rgba(0,0,0, .1);border:none;
    /* NO SCALE. A transform moves paint, never layout, so a scaled tab in a flex
       row covers its neighbours -- measured at nine pixels each side -- and takes
       the clicks meant for them. The selected tab is already unmistakable: its
       own background, the inset highlight above and below, the accent underline
       from ::before, and accent text. */
    border-radius: var(--surface-radius-sm, 5px);position: relative;z-index: 2;}
.tab:not(:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"]))) li.selected{transform:none!important;box-shadow:none;border-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):first-child{transform-origin:left;border-bottom-left-radius: 0;border-top-left-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):not(:has(~ li:not([style*="display: none"]))){transform-origin:right;border-bottom-right-radius: 0;border-top-right-radius: 0;}
.tab:has(li:not([style*="display: none"]) ~ li:not([style*="display: none"])) li:not([style*="display: none"]):is(
:nth-child(2),:nth-child(3),:nth-child(4)
){}.tab li.selected::before{content:"";width: 50px;height:1.5px;position:absolute;left:50%;bottom:4px;transform:translateX(-50%);background-image: linear-gradient(135deg,transparent,var(--mainColor),transparent);}
.tab li.selected a{color:var(--color-9)}
/* THE WHOLE TAB IS THE CONTROL, NOT JUST THE WORD.

   Measured on /account/log/list/: the tab is 162x30 and the <a> inside it 34x20,
   because the li is a centring flex container and a block-level child in one
   shrinks to its content. Four fifths of every tab did nothing, which is the
   "only the title works" report.

   The anchor stretches instead, and keeps the li's own truncation so a long
   label still ellipses rather than escaping. Tab strips whose handler sits on
   the li have no anchor and are unaffected. */
.tab li > a{
    flex:1 1 auto;
    align-self:stretch;
    /* The li keeps its 5px of vertical padding because tab strips with no anchor
       -- the match page -- are sized by it. The anchor reaches over that padding
       instead, so the full height of the tab is the link and nothing moves. */
    margin:-5px 0;
    padding:5px 0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.tab li:last-child{}
.table .header{background:var(--mainColor);display:grid;margin-bottom:5px;grid-template-columns:1fr 1fr 1fr auto auto auto auto;position:sticky;top:49px;color:#000;z-index:1;opacity:0;animation:fromTop .5s cubic-bezier(0,0,0,1.1) .25s forwards;background-image:linear-gradient(135deg,#fff3,#0003)}
.table .cell{padding:10px;justify-self:normal;text-align:center}
.table .row{opacity:0;background:var(--color-2);display:grid;margin:2px auto;grid-template-columns:1fr 1fr 1fr auto auto auto auto;align-items:center;justify-content:center;align-content:center;justify-items:start;background-image:linear-gradient(135deg,#ffffff1a,#0000001a);border-radius:var(--surface-radius-sm, 5px)}
.table .row.animated{animation:fromBottom .5s cubic-bezier(0,0,0,1) 0s forwards}
.animated{animation:fromBottom .5s cubic-bezier(0,0,0,1) 0s forwards}
.table .row:nth-child(even){background-color:var(--color-3)}
.table .row.one{background:var(--color-3)}
.table .row.two{background:var(--color-2)}
.animatedRows{opacity:0}
.animatedRows.animated{animation:fromBottom .5s ease-in-out 0s forwards}
.am-bo{display:inline-flex;align-items:center;margin:0 5px}
.am-vc{display:flex;align-items:center}
.am-cus,.am-cut{transform:scale(0.9);opacity:.75;padding-right:2px}
.am-ic.coin{float:left;margin-right:3px;background:url(/images/coin_v1.png) no-repeat scroll center top / contain}
.am-ic.gem{float:left;margin-right:5px;background:url(/images/gem_v3.png) no-repeat scroll center top / contain}
.am-bo[am-ic="12"] .am-ic,.am-in-bo[am-ic="12"] .am-ic{width:12px;height:12px}
.am-bo[am-ic="15"] .am-ic,.am-in-bo[am-ic="15"] .am-ic{width:15px;height:15px}
.am-bo[am-ic="16"] .am-ic,.am-in-bo[am-ic="16"] .am-ic{width:16px;height:16px}
.am-bo[am-ic="18"] .am-ic,.am-in-bo[am-ic="18"] .am-ic{width:18px;height:18px}
.am-bo[am-ic="30"] .am-ic,.am-in-bo[am-ic="30"] .am-ic{width:30px;height:30px}
.am-bo[am-ic="40"] .am-ic,.am-in-bo[am-ic="40"] .am-ic{width:40px;height:40px}
.am-bo[am-ic="80"] .am-ic,.am-in-bo[am-ic="80"] .am-ic{width:80px;height:80px}
.am-in-bo{position:relative;padding:5px 35px 5px 15px;font-size:22px;border-radius:var(--surface-radius-sm, 5px);display:table;cursor:pointer;background:var(--mainColor);color:#000;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);margin:auto}
.am-in-bo.disabled{opacity:0!important}
.am-in-bo .am-vc{display:flex;align-items:center}
.am-in-bo .am-va{width:75px;height:30px;margin-left:10px;padding:0;font-family:DDIN;font-size:21px;background:none;border:none;border-radius:unset;box-shadow:none;text-align:left}
.am-in-bo .am-up{position:absolute;top:3px;right:3px;width:35px;height:calc(50% - 3px);background:url(/images/arrow_up_v1.png) no-repeat scroll center / 15px;transition:.8s}
.am-in-bo .am-up:active{transform:scale(1.5);transition:.2s}
.am-in-bo .am-do{position:absolute;bottom:3px;right:3px;width:35px;height:calc(50% - 3px);background:url(/images/arrow_down_v1.png) no-repeat scroll center / 15px;transition:.8s}
.am-in-bo .am-do:active{transform:scale(1.5);transition:.2s}
.chip{position:relative;display:inline-block;margin:5px;width:40px;height:40px;border-radius:50%;line-height:43px;text-align:center;color:#fff;font-size:14px;cursor:pointer;background-image:url(/images/UI-187WL-min.png);background-size:cover;font-family:DDIN;box-shadow:1px 1px 5px #333;transition:1s;z-index:1;transform:scale(.9);background-color:#673ab7}
.chip:hover{transform:scale(1.6) rotate(10deg);transition:.2s;position:relative;z-index:2}
.chip.selected{box-shadow:0 0 0 2px black,0 0 0 4px var(--mainColor);transform:scale(1.2);z-index:2}
.chip[am="0.10"]{background-color:#3f51b5}
.chip[am="0.1"]{background-color:#3f51b5}
.chip[am="0.50"]{background-color:#388e3c}
.chip[am="0.5"]{background-color:#388e3c}
.chip[am="1"]{background-color:#296821}
.chip[am="5"]{background-color:#4d9ed8}
.chip[am="10"]{background-color:#135f96}
.chip[am="25"]{background-color:#a2574b}
.chip[am="100"]{background-color:#c62828}
.chip[am="200"]{background-color:#5e35b1}
.chip[am="500"]{background-color:#9c27b0}
.game-result{position:absolute;right:0;left:0;width:0;height:0;margin:0 auto;opacity:0;background:#000000e6;text-align:center;display:table;padding-bottom:10px}
.game-result-close{position:absolute;top:5px;right:5px;width:30px;height:30px;background:url(/images/UI-197.png) no-repeat scroll center / cover;z-index:1;border-radius:var(--surface-radius-2, 3px);cursor:pointer}
.game-result-image{position:absolute;top:0;margin:0;z-index:-1}
.game-result-image::before{content:"";width:100%;height:60%;position:absolute;background:linear-gradient(0deg,#000 0%,#3330 100%);bottom:0;left:0}
.game-result-image img{width:100%}
.game-result-text{position:relative;background:var(--mainColor);padding:10px 0;color:#000;margin-bottom:50px}
.game-result-chip{position:relative;background-color:#870284;background-image:url(/images/UI-187-min.png);width:200px;height:200px;line-height:210px;margin:0 auto!important;display:table;font-size:52px;transform:scale(.5)}
.game-result-chip:hover{transform:rotate(5deg)}
.game-result-reward{margin:75px auto 25px;display:table;font-size:69px;color:#fff;transform:scale(.5)}
.game-result-reward:hover{transform:rotate(5deg)}
.game-result.game-result-win{animation-name:zoomOut;animation-duration:1s;background:#030106;border-radius:var(--surface-radius-sm, 5px);box-shadow:0 0 30px 70px #9c27b042}
.game-result.game-result-win .game-result-text{background:none;font-size:72px;margin:10px auto -20px;color:#fff;text-shadow:0 0 10px #aaa;opacity:0}
.game-result.game-result-win .game-result-image{background:url(/images/game-result-win-v297.jpg) no-repeat center / cover;border-radius:var(--surface-radius-sm, 5px);height:160px;width:100%}
.game-result.game-result-lose{animation-name:zoomIn;animation-duration:1s;background:#030106;border-radius:var(--surface-radius-sm, 5px);box-shadow:0 0 10px #000}
.game-result.game-result-lose .game-result-close{background:url(/images/UI-198.png) no-repeat scroll center / cover}
.game-result.game-result-lose .game-result-text{display:flex;align-items:center;justify-content:center;background:none;color:#eee;font-size:27px;top:160px}
.game-result.game-result-lose .game-result-image{background:url(/images/game-result-gameover.jpg) no-repeat center / cover;border-radius:var(--surface-radius-sm, 5px);height:160px;width:100%}
.game-result-inplace{font-size:16px;display:flex}
.game-result-inplace-text{margin-right:2px;color:var(--mainColor)}
.game-result-inplace-reward{color:#fff}
.game-reward{position:absolute;padding:5px 10px!important;background:var(--mainColor);box-shadow:0 0 10px #000;border-radius:var(--surface-radius-pill, 100px)!important;display:flex;z-index:1000;border:2px solid var(--color-4);min-width:30px;text-align:center;justify-content:center;color:#000}
.game-reward-reward{margin-left:2px;font-size:16px;color:#fff}
.game-reward-chip{position:absolute;width:30px;height:30px;line-height:30px;font-size:12px;background:#870284 url(/images/UI-187-min.png) no-repeat scroll center / cover;border-radius:100%!important;text-align:center;z-index:1000}
.copy-notification{position:absolute;background-color:var(--color-9);color:var(--color-1);padding:5px 10px;border-radius:var(--surface-radius-pill, 50px);font-size:12px;z-index:1000;transition:opacity .5s ease,display 0s 2s;transform:translate(10px,-50%);box-shadow:0 0 10px}
@keyframes zoomIn {
0%{opacity:0;transform:scale(0.3)}
100%{opacity:1}
}
@keyframes zoomOut {
0%{opacity:0;transform:scale(2)}
100%{opacity:1}
}
@keyframes fromTop {
0%{opacity:0;transform:translateY(-100%)}
100%{opacity:1}
}
@keyframes fromBottom {
0%{opacity:0;transform:translateY(100%) scale(.75)}
100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes fadeOut {
0%{opacity:1}
100%{opacity:0}
}
@keyframes fadeIn {
0%{opacity:0}
100%{opacity:1}
}
@keyframes fromLeft {
0%{opacity:0;transform:translateX(-100%) scale(.8)}
100%{opacity:1}
}
@keyframes fromRight {
0%{opacity:0;transform:translateX(100%) scale(.8)}
100%{opacity:1}
}
@keyframes pulse {
50%{transform:scale(1.2)}
}
@keyframes pulse-back {
50%{transform:scale(.75)}
}
.promoColumnLeft{width:150px;position:fixed;left:50%;border-radius:var(--surface-radius-sm, 5px);display:block;transform:translateX(calc(-50% - 340px));max-height:calc(100vh - 50px);overflow-y:auto;top:50px}
.promoColumnLeft2{width:200px;position:absolute;left:50%;border-radius:var(--surface-radius-sm, 5px);display:block;transform:translateX(calc(-50% - 525px));height:100%}
.promoColumnLeft2 img{max-width:100%;float:right;margin:10px auto;border-radius:var(--surface-radius, 10px);box-shadow:0 0 3px var(--sportColor);position:sticky;top:10px}
.promoColumnRight{width:150px;position:absolute;right:50%;transform:translateX(calc(50% + 340px));display:block;top:0}
.promoColumnRight2{width:200px;position:absolute;right:50%;border-radius:var(--surface-radius-sm, 5px);display:block;transform:translateX(calc(50% + 525px))}
.promoColumnRight2 img{max-width:100%;float:right;margin:10px auto;border-radius:var(--surface-radius, 10px);box-shadow:0 0 3px var(--sportColor)}
.promoColumnRight2 .indexMoreInfo{float:left;position:sticky;width:100%}
.promoColumnRight2 .indexMoreInfo a{display:block;margin-bottom:5px;transition:1.5s;padding:5px 10px;border:1px solid var(--color-4);border-radius:var(--surface-radius, 10px);background:var(--color-1)}
.promoColumnRight2 .indexMoreInfo a:hover{transition:.5s;color:var(--mainColor)}
.promoColumnRight2 .footer-license{display:table;font-family:aller;font-size:10px;opacity:.5;padding:10px}
.promoColumnRight2 .footer-lgs-main{display:flex;flex-wrap:wrap;padding:0 5px}
.promoColumnRight2 .footer-lgs{height:16px;background:#fff;margin:2px;padding:4px;border-radius:var(--surface-radius-xs, 2px);opacity:.5;transition:.4s;filter:grayscale(1)}
.promoColumnRight2 .footer-lgs:hover{opacity:.95;transition:.4s;transform:scale(1.2);box-shadow:0 0 10px var(--color-3);z-index:2}
.promoColumnRight2 .footer-lgs img{height:100%;margin:0;padding:0;box-shadow:none}
.promoColumnRight2 .official-logos p{opacity:.5;font-size:10px}
@media only screen and (max-width: 820px) {
.promoColumnLeft{position:relative;left:auto;transform:initial;top:auto;width:100%;overflow-x:scroll;padding:0;margin-bottom:-10px;display:none}
.promoColumnRight{right:auto;transform:none;text-align:center;width:100%;overflow:hidden;position:relative;margin-top:-10px;z-index:1;background:var(--color-1)}
}
@media only screen and (max-width: 1240px) {
.promoColumnLeft2{display:none}
.promoColumnRight2{display:none}
}
.ui-dialog .ui-widget-content{border:0}
.ui-dialog .ui-dialog-titlebar{display:none}
.ui-dialog .ui-dialog-content{padding:5px;font-family:Aller;font-size:13px;color:#141414;background:var(--mainColor)}
.ui-dialog .ui-dialog-buttonpane{margin:0;padding:0}
.ui-dialog .ui-dialog-buttonpane button{font-family:Aller;font-size:14px;color:#333;background:var(--mainColor);border-radius:var(--surface-radius-pill, 100px);padding:10px;margin:0 5px;border:none;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);min-width:75px;box-shadow:0 0 30px #eee}
.ui-button .ui-button-text{padding:0!important}
.mf_bg{position:fixed;top:0;left:0;width:100%;height:100%;background:#1b1b1cbf;display:inline-block;z-index:1000}
.mf_p{position:fixed;top:0;left:0;width:100%;height:100%;font-family:DDIN;font-size:16px;display:table;z-index:1000;color:var(--color-9)}
.mf_p .mf_p1{height:100%;vertical-align:middle;display:table-cell}
.mf_p .mf_p2{position:relative;width:70%;max-width:480px;height:80%;margin:0 auto;text-align:center;display:block}
.mf_p .mf_cl{position:absolute;top:-41px;right:0;width:38px;height:38px;background:var(--mainColor) url(/images/main-close-8625.png) no-repeat scroll center / 33%;display:inline-block;cursor:pointer;border-radius:var(--surface-radius-2, 4px)}
.mf_p .nano{width:100%;height:100%;background:var(--color-1);display:block;border-radius:var(--surface-radius-sm, 5px);box-shadow:0 0 30px #000}
.mf_p .nano-content{margin:0;padding:0;overflow-x:hidden;overflow-y:scroll;display:inline-block}
.mf_p .nano-pane{background:#ffffff1a none repeat scroll 0 0!important}
.mf_p .nano-slider{background:#fff3 none repeat scroll 0 0!important}
@media only screen and (max-width: 820px) {
.mf_p .mf_p2{width:90%}
}

/* 2026-09-10: body is a block formatting context so the header's top margin does not collapse through it;
   without this the body box moved 60px when pull-to-refresh prepended its bubble (a 0.07 layout shift on every page). */
body{display:flow-root}

/* A BACKDROP FOR A SITE PEOPLE PLAY ON.

   A tile was one motif and hairline diagonals were another; both are wallpaper,
   and wallpaper is the wrong idea behind dense data. Nothing here repeats.

   Three layers, all curved, all in the theme's own accent:

     - a wide bloom falling from the top left,
     - a second rising from the bottom right,
     - and between them a soft ARC: a radial gradient that is transparent in the
       middle and at the edge, so what is drawn is a band -- a curve sweeping
       across the page rather than a straight edge anywhere.

   Fixed, so they do not travel with the list, and stronger than the first pass:
   a backdrop nobody can see is a backdrop that does not do its job.

   The alphas live in their own tokens because a hex custom property cannot take
   one without color-mix, which this tree avoids -- the app runs on a million
   unaudited devices -- and it means every theme carries its own three. */

/* ==========================================================================
   THREE FEELS, EACH AS A DARK AND LIGHT PAIR

   charcoal  theme13 / theme14   matte, no edges, one fall of light
   paper     theme11 / theme12   printed, hairline edge, fibre mottle
   flat      theme17 / theme5    square, drawn edge, no gradient at all

   The surfaces themselves are set in each theme's own block above, as
   token overrides. These are only the page grounds, which cannot be a
   token because they are whole layer stacks.
   ========================================================================== */
html[main-theme="theme13"] body,
html[main-theme="theme14"] body {
    background:
        linear-gradient(180deg, var(--mainGlow), transparent 42%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--color-1);
}
html[main-theme="theme11"] body,
html[main-theme="theme12"] body {
    background:
        radial-gradient(52% 38% at 18% 12%, var(--mainGlow), transparent 60%),
        radial-gradient(44% 34% at 82% 44%, var(--mainGlow2), transparent 62%),
        radial-gradient(60% 42% at 46% 92%, var(--mainGlow), transparent 64%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-color: var(--color-1);
}
html[main-theme="theme17"] body,
html[main-theme="theme5"] body {
    /* FLAT means flat. One colour, no layers. */
    background: none;
    background-color: var(--color-1);
}

html[main-theme="theme21"] body,
html[main-theme="theme20"] body {
    background:
        radial-gradient(100% 62% at 8% -12%, var(--mainGlow), transparent 56%),
        radial-gradient(78% 130% at 50% 118%, transparent 52%, var(--mainArc) 63%, transparent 74%),
        radial-gradient(90% 58% at 96% 106%, var(--mainGlow2), transparent 58%);
    background-attachment: fixed, fixed, fixed;
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-color: var(--color-1);
}


/* TOOLTIP -- design system, 2026-09-11, at the product owner's request.

   The browser's own title= tooltip is unstyled, about a second late, and does
   not exist at all on a touch screen. This frontend is also a WebView app with
   over a million installs, so most of the people who see it have no pointer to
   hover with. This one shows on hover, on keyboard focus, and on press.

   Anything that wants one carries data-tip="the words"; nothing else changes.
   Add aria-label with the same words and do NOT also set title, or the browser
   draws its own bubble on top of this one.

   A bubble centred on something near the edge of the page hangs past it, and an
   absolutely positioned box that hangs past the edge makes the whole page
   scroll sideways. data-tip-x="start" or "end" aligns the bubble to that edge
   instead of centring it; the arrow stays on the thing it belongs to. */
[data-tip]{position:relative}
[data-tip]:before,[data-tip]:after{opacity:0;pointer-events:none;transition:opacity .12s ease-out;z-index:20}
[data-tip]:after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%)}
/* THE BUBBLE ITSELF, ONCE. The attribute above draws it with ::after, which an
   SVG element does not have -- so a chart dot's name has to be a real element,
   and .xw_tip is that element wearing this same look rather than a second one.
   Anything else that cannot use the attribute joins this list; nothing copies
   the declarations. */
[data-tip]:after,
.xw_tip{width:max-content;max-width:min(62vw,190px);padding:5px 8px;border-radius:var(--surface-radius-sm, 6px);background:var(--color-4);color:var(--color-9);font-size:11px;line-height:1.35;text-align:center;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.xw_tip:after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--color-4)}
[data-tip]:before{content:"";position:absolute;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:4px solid transparent;border-top-color:var(--color-4)}
[data-tip][data-tip-x="start"]:after{left:0;transform:none}
[data-tip][data-tip-x="end"]:after{left:auto;right:0;transform:none}
[data-tip]:hover:before,[data-tip]:hover:after,
[data-tip]:focus-visible:before,[data-tip]:focus-visible:after,
[data-tip]:active:before,[data-tip]:active:after{opacity:1}
@media (prefers-reduced-motion:reduce){[data-tip]:before,[data-tip]:after{transition:none}}

/* PULL TO REFRESH -- an override, so the vendor file stays untouched.

   mk-pullfresh draws its indicator in hard-coded #aaa: a hairline ring, a
   hairline arrow, and -- while it is working -- a single 6px dot orbiting
   inside the ring, which reads as something broken rather than as something
   loading. On the dark themes the whole thing is washed out and on the light
   one it is barely there.

   Rewritten in the tokens, with the ring given the same surface, border and
   shadow as every other chip on the site, and the dot replaced by the arc
   that everybody already recognises as waiting. */
.mk-pullfresh-bubble .mkpf-indicator{box-sizing:border-box;border:1px solid var(--color-4);background:var(--color-2);box-shadow:0 2px 10px rgba(0,0,0,.28)}
/* THE ARROW, redrawn rather than recoloured.

   The vendor draws it as a 1px line twenty pixels tall inside a thirty-pixel
   circle, with a small square rotated onto the end. It reads as a skewer: too
   long, too thin for the weight of everything else on the site, and the head
   too small to be a head. Rebuilt at the same weight as the chevrons on the
   bracket -- a 2px stem twelve pixels long with a proper arrowhead under it --
   and both parts take currentColor, so the state change is one property. */
.mk-pullfresh-bubble .mkpf-indicator{color:var(--color-8)}
.mk-pullfresh-bubble .mkpf-arrow-down{border:0;background:currentColor;width:2px;height:12px;top:7px;left:14px;border-radius:var(--surface-radius-xs, 1px)}
.mk-pullfresh-bubble .mkpf-arrow-down:after{content:"";position:absolute;left:-4px;top:8px;width:9px;height:9px;border:2px solid currentColor;border-width:0 2px 2px 0;border-radius:0 0 var(--surface-radius-xs, 2px) 0;transform:rotate(45deg)}
/* Far enough to let go: the arrow turns the site's colour as well as turning
   over, so the state is not carried by rotation alone. */
[data-mkpf-state=ready] .mk-pullfresh-bubble .mkpf-indicator{color:var(--mainColor)}
/* The arc. The vendor's orbiting dot is switched off rather than restyled. */
.mk-pullfresh-bubble .mkpf-spinner{box-sizing:border-box;border:2px solid var(--color-4);border-top-color:var(--mainColor);background:none}
.mk-pullfresh-bubble .mkpf-spinner:after{display:none}
@media (prefers-reduced-motion:reduce){
    .mk-pullfresh-bubble .mkpf-spinner{animation-duration:2.4s}
    .mk-pullfresh-bubble .mkpf-icon-wrapper{transition:none}
}

/* IN-PAGE JUMPS EASE, AND THEY DO NOT LAND UNDER THE HEADER.
   -------------------------------------------------------------------------
   A link to an anchor on the same page used to teleport, which is the one
   place on this site where something still snapped. Site-wide, so every such
   link gets it without each page remembering to.

   scroll-padding-top is the other half and matters more than the easing: the
   header is position:fixed and 51px tall -- measured on the live country page,
   not guessed -- so without it a jump puts the heading it aimed at UNDER the
   header and the reader lands on the wrong thing. The extra 10px is so the
   target sits clear of the edge rather than flush against it.

   Two places must NOT ease and are handled in their own files: the scroll
   restores in p-ga-6-restore-v2.js and p-ga-8-restore-v2.js, which put the
   reader back where they were. Animating those would scroll the whole page
   down in front of them every time they come back. */
html{scroll-behavior:smooth;scroll-padding-top:61px}
/* ...except while something is driving the scroll itself.

   jQuery's .animate({scrollTop}) writes a new value every frame, and with
   smooth in force the browser answers each write with an eased scroll of its
   own -- two animations chasing each other down the same axis. p-ga-6-custom.js
   puts this on for the length of such an animation and takes it off after; the
   easing is still there, it just belongs to one of them. */
html.xw_scroll_instant{scroll-behavior:auto}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ==========================================================================
   THE PAGE DOES NOT MOVE WHEN A DIALOG OPENS

   A dialog locks the page behind it, the scrollbar goes with the scrolling, and
   the content widens by exactly the bar -- measured here at 15px -- so the text
   under the overlay jumps sideways the moment it appears, and jumps back when it
   closes. It reads as the page flinching.

   Reserving the gutter always means there is nothing to give back. One
   declaration, on the element that owns the scrollbar, for every page.

   Phones are unaffected: their scrollbars are overlays with no width, so no
   gutter is reserved and nothing changes.
   ========================================================================== */
html{scrollbar-gutter:stable}

/* ==========================================================================
   THE TRAIL AT THE TOP OF A SPORT PAGE

   Home > Baseball > United States > Il. Every step that goes somewhere should
   say so on hover; the one naming the page you are already on should not, and
   nor should a step the page rendered as plain text rather than a link.

   a[href] is exactly that test, and it needs no list of which crumb is a link on
   which page -- p-ga-13 renders .le_na as a div and p-ga-14 as an anchor, and
   this is right on both without knowing that.

   Written once for the three pages that carry the trail rather than three times
   in three stylesheets, which is how p-ga-12, p-ga-13 and p-ga-14 already hold
   three identical copies of the .bo_in rule.
   ========================================================================== */
/* THE TRAIL, WRITTEN ONCE.

   Three places print one: the header of the sport, country and league pages
   (.bo_in), the foot of the country page, and the match page's end card. They
   had three separators between them -- "/", ">" and a pill with a chevron -- so
   the same path read as three different things depending where you met it.

   The header is the reference and is not changed: it already starts at Home and
   already separates with "/". These declarations are measured off it -- links in
   --color-9 with no underline, the separator --color-6 with 5px either side,
   hover --mainColor with a 1px underline at 3px offset.

   THE RULES, and they are the same wherever it appears:
     * Home first, always
     * every rung that resolves is a link
     * a rung that will not resolve is left out, never printed dead
     * the page you are on is text, not a link -- the one item a trail must
       never link

   No box of any kind. A border says "these things are separate"; a trail is one
   path and the "/" is what says so.

   Declared here rather than in a page stylesheet for the same reason [hidden]
   is: every page loads this file, and a second copy is how two surfaces drift
   apart. */
.xw_trail{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  font-size:16px;
  color:var(--color-9);
}
.xw_trail a{
  color:var(--color-9);
  text-decoration:none;
  cursor:pointer;
  transition:color .16s ease;
}
.xw_trail a:hover,
.xw_trail a:focus-visible{
  color:var(--mainColor);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.xw_trail a:focus-visible{outline:2px solid var(--mainColor);outline-offset:2px}
.xw_trail [aria-current="page"]{color:var(--color-7)}
.xw_trail .divider{color:var(--color-6);margin:0 5px;user-select:none}

/* THE QUIET VOICE -- the foot of a page rather than the head of one. Loudness is
   the one thing that genuinely differs, so it is the only thing here. */
.xw_trail_q{font-size:11px;color:var(--color-7)}
.xw_trail_q a{color:var(--color-8)}

@media (prefers-reduced-motion:reduce){
  .xw_trail a{transition:none}
}

/* Nothing is declared at rest. A transparent underline waiting to be revealed
   was tried first and did not take -- measured, the colour computed white, so
   the trail would have carried a permanent white underline, worse than before.
   Only the hover state is written, so there is nothing to fail. */
.p_ga_12_m .bo .bo_in a[href],
.p_ga_13_m .bo .bo_in a[href],
.p_ga_14_m .bo .bo_in a[href]{
  transition:color .16s ease;
}
.p_ga_12_m .bo .bo_in a[href]:hover,
.p_ga_13_m .bo .bo_in a[href]:hover,
.p_ga_14_m .bo .bo_in a[href]:hover{
  color:var(--mainColor);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
@media (prefers-reduced-motion:reduce){
.p_ga_12_m .bo .bo_in a[href],
.p_ga_13_m .bo .bo_in a[href],
.p_ga_14_m .bo .bo_in a[href]{transition:none}
}
/* The separator is decoration and used to carry the same weight as the steps:
   measured, #fff at 16px, identical to the links beside it. Muted so the trail
   reads as steps with marks between them rather than one alternating line.
   #999 on this ground is 9.6:1, so it is quiet, not faint.

   Here rather than in the two page stylesheets, for the same reason the hover
   rule above is here. p-ga-12 carries the same trail markup but renders no
   divider at all, so it is not listed. */
.p_ga_12_m .bo .divider,
.p_ga_13_m .bo .divider,
.p_ga_14_m .bo .divider{color:var(--color-6)}


/* ===================== A NOTE IS NOT A DIALOG ===========================

   A message that belongs TO A FIELD stays with the field. "Invalid Current
   Pin" appears under the keypad while the reader's finger is still on it; a
   modal would make them close a window they have already read before they can
   type again, and would cut the sentence loose from the thing it is about.

   So this family exists on purpose and is named on purpose. If it shared the
   dialog's classes, the next person would have no way to tell which messages
   are interruptions and which are captions, and the two would drift into each
   other. .xw_note is the hook for designing inline messages properly when
   there is time: today it does the least that makes them read as one thing.

   THE CLASS IS ON AN INNER SPAN, not on the message div, because these are
   copied with msg.html($('#id').html()) -- which takes the children and leaves
   the div behind. A class on the div would never reach the slot it styles.

   The icon is a 24-grid drawing at 16px, sized with --xi-size as the library
   requires; the 128px spot pictures are for dialogs and only for dialogs. */
.xw_note{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    text-align:start;
}
.xw_note_i{
    --xi-size:16px;
    flex:0 0 auto;
    line-height:0;
}
/* the colour stays with whatever the page already gives the message: a note
   that repainted itself would fight the page it sits in */
.xw_note_bad .xw_note_i{color:var(--rate-down, #ff5050)}