.p_h_m{width:100%;height:50px;font-size:18px;background:var(--color-1);max-width:500px;border-bottom:1px solid var(--color-4);margin:0 auto;display:table;position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:999}
.p_h_m *{-webkit-tap-highlight-color:transparent}
.p_h_m a{color:#000;display:flex}
.p_h_m .logo{float:left;display:flex;margin-left:30px;z-index:2;position:relative;align-items:flex-end;height:48px}
.p_h_m .logo img{height:32px;margin-top:3px;margin-right:-20px;background:#000;border-radius:var(--surface-radius-sm, 5px);padding:5px}
.p_h_m .logo .logoFirstPart{fill:var(--mainColor)!important}
.p_h_m .logo .logoSecondPart{fill:var(--color-9)!important}
.p_h_m .DLAP{position:relative;display:none}
.p_h_m .DLAP a{position:absolute;color:var(--mainColor);right:10px;top:15px;z-index:3}
.p_h_m .DLAP strong{background:var(--color-1) url(/images/main-google-play-v1.png) no-repeat center / 100px;width:120px;height:50px;display:block;margin-top:-15px;margin-right:-10px}
.p_h_m .bo{position:absolute;margin:0;display:inline-block;right:0;overflow:hidden}
.p_h_m .bo .se{float:left;width:2px;height:30px;margin-left:10px;background:#333;display:inline-block}
.p_h_m .bo .se.a{display:none}
.p_h_m .bo .up{float:left;margin-left:10px;width:30px;height:30px;background:url(/images/update_v2.png) no-repeat scroll center / cover;display:none;cursor:pointer}
.p_h_m .bo .lop{position:relative;top:0;right:0;float:left;margin-left:10px;display:none;cursor:pointer;opacity:0;animation:fromRight .5s cubic-bezier(0,0,0,1.2) 1s forwards}
.p_h_m .bo .lop .loi{float:left;width:22px;height:30px;background:url(/images/main-notification-9383626.png) no-repeat scroll center / contain;display:inline-block;margin-top:11px;filter:contrast(0.4)}
.p_h_m .bo .lop .lo{position:absolute;right: 10px;top: 15px;font-size: 14px;color: var(--mainColor);text-align:center;border-radius:var(--surface-radius-pill, 100px);display:none;background: var(--color-1);min-width: 15px;}
.p_h_m .bo .gep{position:relative;top:0;right:0;height:50px;float:left;margin-left:5px;padding:0 15px;color:var(--color-9);background:var(--color-3);display:none;cursor:pointer;background-image:linear-gradient(174deg,#ffffff1a,#0000001a);opacity:0;animation:fromRight .5s cubic-bezier(0,0,0,1.2) .75s forwards}
.p_h_m .bo .gep .get{margin:13px auto 0;font-family:Aller;font-size:8px;display:table}
.p_h_m .bo .pl{right:0;top:0;float:left;width:40px;height:50px;display:inline-block;cursor:pointer;text-align:center;line-height:50px;font-size:32px;background:var(--mainColor);color:#000;position:relative;margin-left:1px;background-image:linear-gradient(174deg,#ffffff1a,#0000001a);font-weight:700;z-index:2;opacity:0;animation:fromRight .5s cubic-bezier(0,0,0,1.2) .5s forwards}
.p_h_m .hrbnr{max-width:100%;box-shadow:0 0 10px #333;max-height:78px;margin:45px auto 0;display:block;position:absolute;left:50%;transform:translateX(-50%)}
.p_h_m .menu{position:fixed;left:0;top:0;width:100%}
.p_h_m .menu .menu-icon{width:30px;height:50px;display:block;filter:invert(1) contrast(0);cursor:pointer;position:absolute;z-index:2;left:0;top:0}
.p_h_m .menu .menu-icon.open{background:url(/images/main-hamburger-menu-2826.png) no-repeat scroll center/ 22px}
.p_h_m .menu .menu-icon.close{background:url(/images/close_v4.png) no-repeat scroll center / 40px}
.p_h_m .menu .menu-box{display:none;margin-top:50px;border-radius:var(--surface-radius-2, 4px);margin-left:5px}
.menuBg{background:var(--color-1);width:100vw;height:100vh;position:fixed;top:0;left:-100%;opacity:1}
.p_h_m .menu ul{width:calc(100% - 20px);background:var(--color-1);color:var(--color-9);list-style:none;padding:10px;margin-inline-start:-15px;max-height:calc(100vh - 120px);overflow-y:auto;overflow-x:hidden;margin:0;font-size:16px;z-index:1;position:relative}
.p_h_m .menu ul ul{margin:-5px -10px -10px;width:calc(100% - 0px);background:initial}
.p_h_m .menu ul .games ul{display:flex;flex-wrap:wrap;justify-content:space-evenly}
.p_h_m .menu ul li{cursor:pointer;margin:5px auto;background:var(--mainColor);padding:10px;max-width:250px;background-image:linear-gradient(150deg,#ffffff4d,#0000004d);border-radius:var(--surface-radius-sm, 5px)}
.p_h_m .menu ul ul li{background:#0003;transition:.4s;margin:5px 10px}
.p_h_m .menu ul ul li:hover{transition:.4s;background:#0000001a}
.p_h_m .menu ul .games ul li{margin:2px 1px;width:calc(50% - 30px);display:flex;justify-content:center;align-content:center;align-items:center;text-align:center}
.p_h_m .menu ul .games ul a{margin:2px 1px;width:calc(50% - 30px);display:flex;justify-content:center;align-content:center;align-items:center;text-align:center;background:#0003;transition:.4s;padding:10px;border-radius:var(--surface-radius-sm, 5px)}
.p_h_m .menu ul .games ul a:hover{transition:.4s;background:#0000001a}
.p_h_m .menu ul li.lightButton{border:1px solid var(--mainColor);background:none;width:max-content;border-radius:var(--surface-radius-pill, 100px);margin:30px auto}
.p_h_m .menu ul li.lightButton a{padding:2px 30px;color:var(--mainColor)}
.p_h_m .menu .translateMenu{background:none;border:1px solid var(--color-5);position:relative;margin:20px auto;padding:20px 10px 10px;border-radius:var(--surface-radius-sm, 5px);max-width:250px}
.p_h_m .menu .translateMenu a{color:var(--color-6);margin:0 10px}
.p_h_m .menu .translateMenu .translateMenuTitle{position:absolute;top:-7px;background:var(--color-1);color:var(--color-5);padding:0 5px;left:50%;transform:translateX(-50%);text-wrap:nowrap;display:ruby}
.p_h_m .menu .translateMenu .translate_m.notranslate{display:flex;width:auto;justify-content:center;align-items:center}
.p_h_m .menu .select-input{width:auto}
.p_h_m .menu ul a{display:block}
.p_h_m .menu .menuProfile a{display:flex;align-items:center}
/* THE MENU CHEVRON IS DRAWN, AND IT TURNS. One PNG used to be rotated by
   CSS wherever an arrow was needed, which means the light and the shadow in
   it were rotated too -- right in one direction and upside down in the
   others. There are four separate drawings; this uses two of them and
   swaps between them, so up really is drawn as up.

   Sized with --xi-size, not width: below 18px the library switches to a
   simpler drawing and it reads that size from the property, not the box. */
.p_h_m .menu .menu-openable > i{--xi-size:12px;float:right;margin:5px;line-height:0}
.p_h_m .menu .menuProfile{background:none;padding:0;margin:0 auto 20px}
.p_h_m .menu .menuProfile .ph{width:70px;height:70px;background:url(/images/user_v1.png) no-repeat scroll center center / cover;display:inline-block;border-radius:var(--surface-radius-circle, 100px)}
.p_h_m .menu .menuProfile .ph::before{content:"";width:102%;height:94px;position:absolute;z-index:2;background:linear-gradient(0deg,#fff 20%,#3330 100%);bottom:0;left:-1%;display:none}
.p_h_m .menu .menuProfile .na{font-size:22px;color:var(--color-9);text-transform:capitalize;padding:0 10px;width:170px}
.p_h_m .menu .sportsSection{display:block;width:280px;margin:0 auto}
.p_h_m .menu .sports{width:calc(50% - 30px);display:inline-block;margin:0 4px}
.p_h_m .menu .icon{width:26px;height:26px;background:#000;filter:brightness(1);float:left;pointer-events:none;margin:-5px 5px -5px -5px}
.p_h_m .menu .sports .icon{-webkit-mask-box-image:url(/images/menu-sneakers-100.png);mask:url(/images/menu-sneakers-100.png);mask-size:cover}
.p_h_m .menu .myTickets .icon{-webkit-mask-box-image:url(/images/menu-ticket-28654.png);mask:url(/images/menu-ticket-28654.png);mask-size:cover}
.p_h_m .menu .games .icon{-webkit-mask-box-image:url(/images/menu-dice-90.png);mask:url(/images/menu-dice-90.png);mask-size:cover}
.p_h_m .menu .wallet .icon{-webkit-mask-box-image:url(/images/menu-wallet-28653.png);mask:url(/images/menu-wallet-28653.png);mask-size:cover}
.p_h_m .menu .profile .icon{-webkit-mask-box-image:url(/images/icons8-person-24.png);mask:url(/images/icons8-person-24.png);mask-size:cover}
.p_h_m .menu .myTickets{width:calc(50% - 30px);display:inline-block;margin:0 4px}
.p_h_m .menu .contactUs{background:var(--color-3) url(/images/main-email-send-60.png) no-repeat center left 20px / 20px;display:table;margin:30px auto 0;padding:10px 30px 10px 60px;border-radius:var(--surface-radius-pill, 100px);color:var(--color-6)}
.p_h_m .menu .logOut{display:table;margin:10px auto;color:var(--color-4);border:1px solid;padding:5px 20px;border-radius:var(--surface-radius-pill, 100px)}
.p_h_m .menu .LogIn{display:table;margin:10px auto -20px;padding:9px 30px;border-radius:var(--surface-radius-pill, 100px);background:var(--mainColor);background-image:linear-gradient(150deg,#ffffff4d,#0000004d);z-index:1;position:relative}
.p_h_m .menu .loginImage{width:100px;display:table;margin:20px auto -10px;position:relative;z-index:3}
.p_h_m .menu .menuAgent{background:none;border-left:3px solid var(--mainColor);border-radius:0;margin-top:30px;display:none}
.p_h_m .menu .menuAgent a{color:var(--color-9)}
.p_h_m .menu .menuAgent span:last-child{display:block;font-family:DDIN;font-size:28px;color:var(--mainColor);font-weight:700}
.p_h_m .menu .menuTheme{background:none;border:1px solid var(--color-5);display:block;position:relative;padding:20px 10px 10px;margin:10px auto;border-radius:var(--surface-radius-sm, 5px);margin-top:30px;max-width:250px}
.p_h_m .menu .menuTheme .tht{position:absolute;top:-7px;background:var(--color-1);color:var(--color-5);padding:0 5px;left:50%;transform:translateX(-50%);text-wrap:nowrap;display:ruby}
.p_h_m .menu .menuTheme a{color:var(--color-9)}
.p_h_m .menu .thp{text-align:center}
.p_h_m .menu .thp .th_te{display:table;text-align:center;border:1px solid;border-radius:var(--surface-radius-pill, 100px);padding:0 20px;margin:0 auto;cursor:pointer}
.p_h_m .menu .thp .th_li{display:flex;justify-content:center;margin-top:5px}
.p_h_m .menu .thp .th{width:13px;height:13px;border-radius:var(--surface-radius-lg, 15px);display:inline-block;cursor:pointer;margin:2px;background-image:linear-gradient(135deg,#0000,#0000004d)}
/* WHICH ONE YOU ARE ON.
   A ring drawn outside the dot rather than a border on it, so the dot keeps its
   size and the row of them does not shift when the choice moves. */
.p_h_m .menu .thp .th{transition:box-shadow .2s, transform .2s}
.p_h_m .menu .thp .th.selected{box-shadow:0 0 0 2px var(--color-1), 0 0 0 3px var(--color-9);transform:scale(1.15)}
.p_h_m .menu .thp .th_na{display:block;margin-top:6px;font-size:11px;color:var(--color-6);letter-spacing:.04em}
.p_h_m .menu .thp .th[th="1"]{background-color:#fc0}
.p_h_m .menu .thp .th[th="2"]{background-color:#FFC800}
.p_h_m .menu .thp .th[th="3"]{background-color:#a1ff0a}
.p_h_m .menu .thp .th[th="4"]{background-color:#7dc2ff}
.p_h_m .menu .thp .th[th="5"]{background-color:#ff3636}
.p_h_m .menu .thp .th[th="6"]{background-color:#00ced1}
.p_h_m .menu .thp .th[th="7"]{background-color:#57ce57}
.p_h_m .menu .thp .th[th="8"]{background-color:#cddc39}
.p_h_m .menu .thp .th[th="9"]{background-color:#00ced1}
.p_h_m .menu .thp .th[th="10"]{background-color:#deb887}
.p_h_m .menu .thp .th[th="11"]{background-color:#b0ad8c}
.p_h_m .menu .thp .th[th="12"]{background-color:#b0ad8c}
.p_h_m .menu .thp .th[th="13"]{background-color:#35b7ff}
.p_h_m .menu .thp .th[th="14"]{background-color:#35b7ff}
.p_h_m .menu .thp .th[th="15"]{background-color:#a550a6}
.p_h_m .menu .thp .th[th="16"]{background-color:#e95a5c}
.p_h_m .menu .thp .th[th="17"]{background-color:#ff4040}
.p_h_m .menu .thp .th[th="18"]{background-color:#8bc34a}
.p_h_m .menu .thp .th[th="19"]{background-color:#ac284f}
.p_h_m .menu .thp .th[th="20"]{background-color:#ec671e}
.p_h_m .menu .thp .th[th="21"]{background-color:#ec671e}
.p_h_m .menu .thp .th[th="22"]{background-color:#d369bb}
.p_h_m .menu .menu-close{display:flex;align-items:center;justify-content:center;border:1px solid;margin:30px auto 0;border-radius:var(--surface-radius-pill, 100px);cursor:pointer;width:max-content;padding:0 10px 0 20px}
.p_h_m .menu .menu-close img{width:30px;filter:invert(1) contrast(0)}
.p_h_fitr{position:relative;display:flex;align-items:center;gap:10px;transition:.6s;
    background:var(--mainColor);margin:60px auto -50px;padding:9px 92px 9px 14px;
    /* where the rings and the light behind the character are centred; the
       gradient itself comes from xs-b-accent in xwin-surfaces.css */
    --xs-x:calc(100% - 44px);--xs-y:70%;
    min-height:60px;box-sizing:border-box;max-width:500px;width:calc(100% - 30px);
    color:#000;cursor:pointer;z-index:3;overflow:visible;
    border-bottom:2px solid var(--mainBackground);border-radius:var(--surface-radius-md, 7px)}
.p_h_fitr:active{transform:scale(.97);transition:.3s}
/* the number and its label are one thing: the label says what the number is */
.p_h_fitrof{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-width:0}
.p_h_fitrnu{font-family:DDIN;font-weight:700;font-size:27px;line-height:1;letter-spacing:-.015em}
/* quiet on purpose: two loud things beside each other means neither is loud */
.p_h_fitrbo{display:grid;gap:1px;min-width:0;line-height:1.15;white-space:nowrap;text-align:left}
.p_h_fitrbo b{font-weight:700;font-size:12px}
.p_h_fitrbo small{font-size:10.5px;opacity:.7}
/* the character, hanging over the top edge. No pointer events, so the strip is
   one tap target and not two */
/* 80 and not 96: measured on the live site at 1440 AND at 390, both the same,
   the 96px drawing rose 22px over a 74px strip with a 9px gap above it and
   crossed 13px into the header. At 80 it clears the bar by 4. */
.p_h_fitrch{position:absolute;right:1px;bottom:-1px;height:80px;width:auto;pointer-events:none;z-index:4}
/* the invitation, for somebody who has not registered */
.p_h_fitrgo{margin:0 auto;flex:none;display:inline-flex;align-items:center;gap:4px;
    padding:8px 13px;background:#111;color:var(--mainColor);font-weight:700;font-size:12px;
    white-space:nowrap;position:relative;z-index:3;border-radius:var(--surface-radius-pill, 100px)}
.p_h_fitrgo::after{content:"\203a ";font-size:15px;line-height:1}
/* the deadline, for a member whose window is open */
/* the clock sits in the space the button vacated rather than against the
   character, and its label sits on top of it, which is what a label is for */
.p_h_fitrcd{display:none;flex-direction:column;align-items:center;gap:3px;margin:0 auto;flex:none;position:relative;z-index:3}
.p_h_fitrcl{font-size:9.5px;font-weight:600;line-height:1;opacity:.7;letter-spacing:.02em}
.p_h_fitrcw{display:flex;align-items:center;gap:2px}
.p_h_fitrcd b{min-width:27px;padding:4px 3px;text-align:center;background:#111;color:var(--mainColor);
    font-family:DDIN;font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;
    border-radius:var(--surface-radius-sm, 5px)}
.p_h_fitrcd i{font-style:normal;font-weight:700;font-size:11px;opacity:.45}
/* THE STATE IS A CLASS, NOT AN INLINE STYLE. p-h.js adds `dl` when the server
   sends a deadline, and everything that differs between the two audiences
   follows from it here. */
.p_h_fitr .lb_dl{display:none}
.p_h_fitr.dl .lb_go{display:none}
.p_h_fitr.dl .lb_dl{display:block}
.p_h_fitr.dl .p_h_fitrgo{display:none}
.p_h_fitr.dl .p_h_fitrcd{display:flex}
/* the element the shared countdown helper owns. It keeps its name and its
   place; the tiles above mirror it. */
.p_h_fitrdl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.p_h_fitrph,.p_h_fitrte{display:none}
.restrict[f="1"]{position:fixed;left:0;top:0;height:100%;background:var(--color-1);z-index:1001;text-align:center;font-size:38px;padding:40vh 20px 0;color:var(--mainColor);width:calc(100% - 40px)}
.restrict[f="2"]{position:fixed;left:0;top:0;z-index:1001;text-align:center;font-size:38px;padding:20px;color:var(--mainColor);width:100%;height:100%;display:flex;flex-direction:column;align-content:center;justify-content:center;}
.restrict[f="2"]::before{content:"";background:var(--color-2);display:block;width:100%;height:100%;position:absolute;left:0;top:0;z-index:-1;background-image:linear-gradient(145deg, rgba(255,255,255, .15), rgba(0, 0, 0, .8));}
.restrict p{max-width:300px;display:table;margin:0 auto;color:var(--color-8)}
.restrict .limit-time{margin-top:50px}
.restrict span:last-child{font-size:12px;display:block;font-family:Aller;padding:20px}
.restrict .close{width:20px;height:20px;position:fixed;top:0;left:0;z-index:1002;display:block;}

/* Public geographic notice: centered modal card.
   The card is deliberately dark in BOTH themes, because the scrim behind it is dark either way. */
.restrict[f="2"][data-public-geo="1"]{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    box-sizing:border-box;
    width:calc(100% - 40px);
    max-width:520px;
    height:-webkit-fit-content;
    height:-moz-fit-content;
    height:fit-content;
    min-height:0;
    z-index:1001;
    display:flex;
    flex-direction:column;
    align-content:stretch;
    justify-content:flex-start;
    gap:14px;
    padding:30px 32px;
    background:#1b1c20;
    border:1px solid rgba(255,255,255,.13);
    border-radius:var(--surface-radius-lg, 14px);
    box-shadow:0 24px 70px rgba(0,0,0,.65);
    color:rgba(255,255,255,.84);
    font-size:15px;
    line-height:1.65;
    text-align:center;
    pointer-events:auto;
}
/* Dim layer. It also blocks clicks on the page behind. Tune the .62 alpha and the 3px blur. */
.restrict[f="2"][data-public-geo="1"]::before{
    content:"";
    display:block;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:-1;
    background:rgba(0,0,0,.62);
    background-image:none;
    -webkit-backdrop-filter:blur(3px);
    backdrop-filter:blur(3px);
    pointer-events:auto;
}
.restrict[f="2"][data-public-geo="1"] h3{
    margin:0;
    font-size:24px;
    font-weight:700;
    line-height:1.3;
    letter-spacing:.2px;
    color:var(--mainColor);
}
.restrict[f="2"][data-public-geo="1"] p{
    display:block;
    max-width:none;
    margin:0;
    font-size:15px;
    line-height:1.65;
    color:rgba(255,255,255,.84);
    text-align:start;
}
.restrict[f="2"][data-public-geo="1"] .limit-time{margin-top:6px}
.restrict[f="2"][data-public-geo="1"] h6{margin:0;font-size:15px;color:var(--mainColor)}
.restrict[f="2"][data-public-geo="1"] span:last-child{font-size:12px;padding:0;opacity:.8}
.restrict[f="2"][data-public-geo="1"] .close{display:none}
.p_h_m .pin-lock{height:24px;cursor:pointer;line-height:24px;text-align:center;color:var(--color-5);display:flex;justify-content:center;overflow:hidden;white-space:nowrap}
.pin-box{position:fixed;left:0;top:0;width:calc(100% - 40px);height:100%;padding:20vh 20px 0;background:var(--mainBackground);z-index:1001;text-align:center}
.p_h_m .pinLiMenu{display:flex;justify-content:center;background:none!important}
.p_h_m .pinLiMenu img{width:25px;height:25px;margin-left:4px;filter:brightness(0.3)}
.p_h_m .pinLiMenu span{float:left}
.p_h_m .pinLiMenu a{display:flex!important;width:100%}
.p_h_m .les li.selected{color:var(--mainColor)!important}
@-webkit-keyframes balance {
0%{right:-100%;opacity:0}
}
@media only screen and (max-width:720px) {
.p_h_m{border-radius:0}
.p_h_m .logo img{height:26px;margin-top:6px;margin-left:5px}
.p_h_m .DLAP{display:block}
.p_h_m .menu{width:calc(100% - 2px)}
.p_h_fitr{width:calc(100% - 20px)}
.menuBg{left:0}
}
@media only screen and (max-width:320px) {
.p_h_m .logo{z-index:1;position:relative}
.p_h_m .logo img{height:24px;margin-top:8px;margin-left:2px}
}