* {
    -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                   */
    --card-radius:12px;
    --card-line: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:5px;
    --bar-gap:7px;
}
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: #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="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: #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="theme12"] {
    --mainColor: #b0ad8c;
    --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="theme13"] {
    --mainColor: #35b7ff;
    --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="theme14"] {
    --mainColor: #35b7ff;
    --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="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: #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="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"] {
    --mainColor: #ec671e;
    --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="theme21"] {
    --mainColor: #ec671e;
    --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="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: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: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: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: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: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: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: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:5px}
.p_ga_2_m[demo="1"] .demo a{background:var(--mainColor);color:#000;display:inline-block;padding:3px 30px 3px 10px;border-radius: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:110px;transform:scale(.7);width:auto;padding:10px 40px}
.mediumBox{margin:10px auto;border:2px solid var(--color-3);border-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: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:100px;text-align:center;margin:5px auto;position:relative;cursor:pointer;display:flex;background-image:linear-gradient(135deg,#ffffff4d,#0000004d);width:200px;justify-content:center;align-items:center;max-width:90%;border:none;box-shadow:0 5px 18px 2px var(--color-1),0px 6px 4px -2px var(--color-6),0 5px 5px -3px var(--color-1);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:1px solid var(--color-4);transition:.3s;width:auto;padding:2px 20px;margin:10px auto;border-radius: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: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: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: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}
.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: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;transform:var(--has-multi-tabs,none) scale(1.1);transform: scale(1.11);border-radius: 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)}
.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: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: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: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: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:5px;height:160px;width:100%}
.game-result.game-result-lose{animation-name:zoomIn;animation-duration:1s;background:#030106;border-radius: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: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: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: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: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:5px;display:block;transform:translateX(calc(-50% - 525px));height:100%}
.promoColumnLeft2 img{max-width:100%;float:right;margin:10px auto;border-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:5px;display:block;transform:translateX(calc(50% + 525px))}
.promoColumnRight2 img{max-width:100%;float:right;margin:10px auto;border-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: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: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: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:4px}
.mf_p .nano{width:100%;height:100%;background:var(--color-1);display:block;border-radius: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}

/* 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%);width:max-content;max-width:min(62vw,190px);padding:5px 8px;border-radius: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)}
[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: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 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}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}