/* =====================================================================================================
   Analytics & Insights: "Liquid Light", for the screen only (index.html loads this file with media="screen",
   so printing keeps the plain white pages). Light frosted glass over the ball hockey photos in bg/ (washed bright
   and soft, faded in by glass.js), Inter type, a floating capsule top bar, a floating glass menu, black for
   what's picked and the ballhockey.com red for links and highlights. Built in by build/build.py step 11.
   ===================================================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
:root{
  color-scheme:light;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ink:#0B0B0F; --ink-2:#3C3C43; --ink-3:#86868B; --line:rgba(60,60,67,.13); --shell:rgba(118,118,128,.09); --paper:#fff;
  --red:#E4002B;
  --lg-fill:linear-gradient(160deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.6) 100%);
  --lg-blur:blur(34px) saturate(190%);
  --lg-edge:rgba(255,255,255,.9);
  --lg-sh:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(0,0,0,.03),0 1px 2px rgba(16,24,40,.04),0 22px 48px -22px rgba(16,24,40,.28);
  --card-sh:var(--lg-sh);
}
html{background:#ECEEF3}
body,body.auth{background:transparent!important;color:var(--ink);font-family:var(--body);letter-spacing:-.011em}
::selection{background:rgba(228,0,43,.16);color:var(--ink)}

/* ---------- the photo background: the hockey photos, washed bright and soft behind the glass ---------- */
.gbg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#ECEEF3}
.gbg i{position:absolute;inset:-8%;background-size:cover;background-position:center;opacity:0;filter:blur(46px) saturate(1.35) brightness(1.3);
  transition:opacity 2.4s ease;animation:gDrift 40s ease-in-out infinite alternate}
.gbg i.on{opacity:.6}
.gbg::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 45% at 12% 8%,rgba(228,0,43,.13),transparent 62%),radial-gradient(50% 45% at 92% 18%,rgba(0,113,227,.12),transparent 62%),linear-gradient(180deg,rgba(246,247,250,.5),rgba(246,247,250,.86))}
@keyframes gDrift{from{transform:scale(1.04) translate3d(-1%,-.6%,0)}to{transform:scale(1.1) translate3d(1%,.6%,0)}}
@media (prefers-reduced-motion:reduce){.gbg i{animation:none;transition:none}}
#sky{display:none!important}
body.auth::before,body.auth::after{display:none!important}

/* ---------- glass surfaces ---------- */
.card,.tile,.game,.tdiv,.series,.hcard,.habout,.todds .tc{background:var(--lg-fill)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:1px solid var(--lg-edge)!important;box-shadow:var(--lg-sh)!important;border-radius:26px;color:var(--ink)}
/* tables and tiles inside a card sit flat in it: one layer of glass, not two */
.card .tbl,.hcard .tbl,.series .tbl,.sheet .tbl,.sgev .tbl,.card .tile,.hcard .tile{background:rgba(255,255,255,.55)!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px solid rgba(60,60,67,.08)!important}
.tbl{background:rgba(255,255,255,.7)!important;border-radius:20px;border:1px solid var(--lg-edge)}
.tscroll{border-radius:20px}
.tbl th{background:transparent!important;color:var(--ink-3);font:600 12px var(--body);letter-spacing:0;text-transform:none}
.tbl td{border-bottom-color:rgba(60,60,67,.08)}
.tbl tbody tr:hover td{background:rgba(0,0,0,.025)}
.trow:hover{background:rgba(0,0,0,.025)}
.series.done{background:rgba(255,255,255,.45)!important}
.habout{border-left:0!important}
/* floating boxes (search results, tips, menus, pop-ups): nearly solid white so they read clearly over the page */
.hres,.sres,.ptip,.ttip,.phmenu,.sheet{background:rgba(255,255,255,.92)!important;-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.9)!important;box-shadow:0 30px 80px -24px rgba(16,24,40,.35)!important;color:var(--ink)}
.sheet{border-radius:28px}
.modal{background:rgba(236,238,243,.45)!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.sheet .x{background:rgba(0,0,0,.06);color:var(--ink);border:1px solid rgba(0,0,0,.06)}
.sres button:hover,.hres a:hover,.hres a[aria-selected=true]{background:rgba(0,0,0,.05)!important}
.toast{background:rgba(11,11,15,.9);color:#fff;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:999px}

/* ---------- top bar: a floating glass capsule ---------- */
.bar{top:12px;margin:12px 16px 0;border-radius:999px;background:rgba(255,255,255,.66)!important;-webkit-backdrop-filter:blur(28px) saturate(190%);backdrop-filter:blur(28px) saturate(190%);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 14px 34px -18px rgba(16,24,40,.35);color:var(--ink)}
.bar::after{display:none}
.bar .in{padding:8px 18px!important}
.bhwm{content:url(/brand/wm-dark.png)}
.appid small,.appid.bh small,.bar .who,.bar .me,.me>span,.me .nm{color:var(--ink-3)!important}
.pillbtn,.bar .btn.q{background:rgba(0,0,0,.05)!important;color:var(--ink)!important;border:1px solid rgba(0,0,0,.08)!important}
.modesw{background:rgba(0,0,0,.05)!important;border-color:rgba(0,0,0,.06)!important}
.modesw button{color:var(--ink-2)!important}.modesw button[aria-pressed=true]{background:#0B0B0F!important;color:#fff!important}

/* ---------- side menu: a floating glass pill ---------- */
.side{top:96px;background:var(--lg-fill)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:1px solid var(--lg-edge)!important;box-shadow:var(--lg-sh)!important;border-radius:30px!important;padding:10px!important}
.tab{color:var(--ink-2)}
.tab:hover{background:rgba(0,0,0,.05);color:var(--ink)}
.tab .ic{background:transparent!important;box-shadow:none!important;color:var(--ink)!important}
.tab[aria-selected=true]{background:#0B0B0F!important;color:#fff!important;box-shadow:0 10px 22px -10px rgba(0,0,0,.55)!important}
.tab[aria-selected=true] .ic{color:#fff!important}
.sfoot{border-top-color:var(--line);color:var(--ink-3)}

/* ---------- type ---------- */
.hero h1{font:700 44px/1.04 var(--display)!important;letter-spacing:-.035em!important;color:var(--ink)}
.hero p,.hhead p{color:var(--ink-3)}
.tile .l{font:600 12.5px/1.3 var(--body)!important;letter-spacing:-.005em!important;text-transform:none!important;color:var(--ink-3)}
.tile b{font:700 40px/1.05 var(--display)!important;letter-spacing:-.04em!important}
h2,h3,.h3,.divh{font-family:var(--display)!important;letter-spacing:-.025em}
.divh{color:var(--ink-3)}
.lnk,.hmore{color:var(--red)}

/* ---------- page tabs, pills, buttons, boxes ---------- */
.subnav a,.seg,.btn.q,.chip,.hpills button{background:rgba(255,255,255,.62)!important;color:var(--ink-2);border:1px solid rgba(255,255,255,.95)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 6px 16px -10px rgba(16,24,40,.35)}
.subnav a:hover,.btn.q:hover,.chip:hover,.hpills button:hover{background:rgba(255,255,255,.9)!important;color:var(--ink)}
.subnav a[aria-current=page],.seg button[aria-pressed=true],.chip.on,.hpills button[aria-pressed=true]{background:#0B0B0F!important;color:#fff!important;border-color:transparent!important}
.seg{border-radius:999px!important;padding:3px!important}.seg button{border-radius:999px}
.btn{background:#0B0B0F;color:#fff;border-radius:999px}.btn:hover{background:#2A2A30}
input[type=email],input[type=password],input[type=search],input[type=text],input[type=date],input[type=number],select,textarea,.hsearch input,.phctl input{background:rgba(255,255,255,.7)!important;border:1px solid rgba(255,255,255,.95)!important;border-radius:16px!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.04),0 8px 22px -16px rgba(16,24,40,.35)!important;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
input:focus,select:focus,textarea:focus,.hsearch input:focus{border-color:rgba(11,11,15,.35)!important;box-shadow:0 0 0 4px rgba(11,11,15,.08)!important}
.hsearch input{border-radius:999px!important;height:52px}
.hsearch svg,.hsearch .ic,.hsearch i{color:var(--ink-3)!important;stroke:currentColor}

/* ---------- the game page scoreboard ---------- */
.sb-board{background:var(--lg-fill)!important;border:1px solid var(--lg-edge)!important;box-shadow:var(--lg-sh)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border-radius:30px}
.sb-score b{font-family:var(--display)!important;font-weight:800!important;letter-spacing:-.05em!important}
.sb-name{font-family:var(--display)!important;font-weight:700!important;letter-spacing:-.03em!important}
.sb-upset span{background:var(--red);color:#fff}

/* ---------- the model page's charts and labels, in a blue that reads on light glass (the ULTRON panel stays dark) ---------- */
.ml-gl{stroke:#0A84FF;filter:none}.ml-gd{fill:#0A84FF;filter:drop-shadow(0 0 5px rgba(10,132,255,.55))}
.ml-gv{fill:#0060DF}.ml-gt{fill:var(--ink-3)}
.card .ml-ps{color:#0060DF}.card .ml-pn{color:#0A84FF}
#mlg stop{stop-color:#0A84FF}
/* Reports: which tab is open */
.rp-tabs button{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.95);color:var(--ink-2)}
.rp-tabs button.on{background:#0B0B0F;color:#fff;border-color:transparent}

/* ---------- sign-in, and the welcome after signing in ---------- */
body.auth .bar{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
body.auth .login{background:var(--lg-fill)!important;border:1px solid var(--lg-edge)!important;color:var(--ink)!important;-webkit-backdrop-filter:var(--lg-blur)!important;backdrop-filter:var(--lg-blur)!important;box-shadow:var(--lg-sh)!important;border-radius:30px!important}
body.auth .login .muted{color:var(--ink-3)!important}
body.auth .login label{color:var(--ink-2)!important}
body.auth .login a{color:var(--ink-2)!important}
.login .kick,.login .bhsub{color:var(--ink-3)!important}
.enterfx{background:rgba(236,238,243,.72)!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%)}
.enterfx .who{color:var(--ink-3)!important}

/* ---------- Tournaments mode (tourney.js adds its own styles after this file, so these use !important) ---------- */
.tev{background:var(--lg-fill)!important;-webkit-backdrop-filter:var(--lg-blur);backdrop-filter:var(--lg-blur);border:1px solid var(--lg-edge)!important;box-shadow:var(--lg-sh)!important;border-radius:26px!important}
.tchips a{background:rgba(255,255,255,.62)!important;color:var(--ink-2)!important;border:1px solid rgba(255,255,255,.95)}
.tchips a:hover{background:rgba(255,255,255,.9)!important;color:var(--ink)!important}
.tchips a[aria-current=page]{background:#0B0B0F!important;color:#fff!important;border-color:transparent}

/* ---------- side menu: a slim icon strip that opens when the cursor is over it (computers only) ---------- */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  #app:not([hidden]){grid-template-columns:72px minmax(0,1fr)!important;column-gap:26px!important}
  .side{width:72px;overflow:hidden;z-index:35;transition:width .28s cubic-bezier(.2,.8,.2,1) .15s,background .28s ease .15s}
  .side:hover,.side:has(:focus-visible){width:236px;transition-delay:.04s;background:rgba(255,255,255,.9)!important}
  .side .tab{position:relative;white-space:nowrap}
  .side .tab > span:not(.ic):not(.badge),.side .sfoot{transition:opacity .15s ease}
  .side .sfoot{min-width:210px}
  .side:not(:hover):not(:has(:focus-visible)) .tab > span:not(.ic):not(.badge),.side:not(:hover):not(:has(:focus-visible)) .sfoot{opacity:0}
  .side:not(:hover):not(:has(:focus-visible)) .tab .badge{position:absolute;top:1px;left:30px;margin:0;font-size:10px;padding:0 5px}
  .side:not(:hover):not(:has(:focus-visible)) .tab[aria-selected=true]{width:48px}
  .side:hover .tab > span,.side:has(:focus-visible) .tab > span,.side:hover .sfoot,.side:has(:focus-visible) .sfoot{opacity:1;transition-delay:.12s}
}
@media (min-width:901px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){.side{transition:none!important}}

/* ---------- phones: the menu is a floating glass dock ---------- */
@media (max-width:900px), (hover:none) and (pointer:coarse) and (max-height:520px){
  .bar{margin:8px 10px 0;top:8px;background:rgba(255,255,255,.82)!important}
  .bar .in{padding:6px 5px 6px 12px!important;gap:6px!important}
  .bhwm{height:13px!important}.bhtag{padding:2px 5px!important}.bhtag i{font-size:9px!important}.bhlock{gap:5px!important}
  .modesw button{padding:5px 9px!important;font-size:12.5px!important}
  #signOut{width:30px;height:30px;min-width:0;padding:0!important}
  .modesw button{padding:5px 8px!important}
  .side{left:10px!important;right:10px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;top:auto!important;border-radius:28px!important;background:rgba(255,255,255,.82)!important;border-width:1px!important;padding:6px 4px!important}
  .tab[aria-selected=true]{background:none!important;color:var(--ink)!important;box-shadow:none!important}
  .tab[aria-selected=true] .ic{background:#0B0B0F!important;color:#fff!important;border-radius:12px}
  .hero h1{font-size:32px!important}
  .tile b{font-size:30px!important}
}

/* the narrowest phones: the app icon stands in for the full logo so everything fits in the bar */
@media (max-width:370px){.appid.bh .picon{display:block!important;--s:30px}.appid.bh .bhid{display:none}}

/* ---------- liquid glass tiles (desktop only: a mouse and a wide screen) ----------
   Clearer than the frosted cards, with bright rims and a soft light that follows the pointer. In Chrome and Edge,
   glass.js adds .lg-lens: what's behind is bent like a lens at the edges and rippled across the middle. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .tiles>.tile:not(.card *):not(.hcard *){
    position:relative;isolation:isolate;overflow:hidden;
    background:linear-gradient(155deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.38) 50%,rgba(255,255,255,.55) 100%)!important;
    -webkit-backdrop-filter:blur(10px) saturate(190%) brightness(1.04);backdrop-filter:blur(10px) saturate(190%) brightness(1.04);
    border:1px solid rgba(255,255,255,.95)!important;
    box-shadow:inset 0 1.5px 0 #fff,inset 1.5px 0 0 rgba(255,255,255,.7),inset 0 -1px 0 rgba(0,0,0,.04),inset 0 0 24px rgba(255,255,255,.45),0 22px 44px -22px rgba(16,24,40,.32)!important;
    transition:transform .35s cubic-bezier(.2,.8,.2,1.2),box-shadow .35s}
  .tiles>.tile:not(.card *):not(.hcard *)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(120% 60% at 12% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 55%),
      radial-gradient(90% 50% at 100% 100%,rgba(255,255,255,.35),rgba(255,255,255,0) 60%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='260'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.016' numOctaves='2' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  2.6 0 0 0 -1.25'/%3E%3CfeGaussianBlur stdDeviation='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29' opacity='.16'/%3E%3C/svg%3E");
    opacity:.8;mix-blend-mode:soft-light;animation:lgDrift 22s ease-in-out infinite alternate}
  @keyframes lgDrift{from{background-position:0 0,0 0,20% 30%}to{background-position:0 0,0 0,80% 70%}}
  .tiles>.tile:not(.card *):not(.hcard *)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
    background:radial-gradient(240px circle at var(--lx,25%) var(--ly,-10%),rgba(255,255,255,.9),rgba(255,255,255,0) 62%);
    opacity:.5;transition:opacity .3s}
  .tiles>.tile:not(.card *):not(.hcard *):hover{transform:translateY(-3px) scale(1.012);box-shadow:inset 0 1.5px 0 #fff,inset 0 0 24px rgba(255,255,255,.5),0 30px 56px -24px rgba(16,24,40,.4)!important}
  .tiles>.tile:not(.card *):not(.hcard *):hover::after{opacity:1}
  .lg-lens .tiles>.tile:not(.card *):not(.hcard *){
    -webkit-backdrop-filter:blur(3px) url(#lgLens) saturate(190%) brightness(1.04);backdrop-filter:blur(3px) url(#lgLens) saturate(190%) brightness(1.04)}
}
@media (min-width:900px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .tiles>.tile:not(.card *):not(.hcard *),.tiles>.tile:not(.card *):not(.hcard *):hover{transition:none;transform:none}
  .tiles>.tile:not(.card *):not(.hcard *)::before{animation:none}}