/* ===================================================================
   Mobile and tablet menu: "Explore Zinga".
   A glass panel below the header with Play / Partner / Company tabs,
   one icon row per page and the pilot call to action. The header stays
   sharp above the blurred page, and tapping the header wicket closes
   the menu. Opening the menu bowls a ball at the header wicket (the
   bails fly off), instead of turning the stumps into a cross, so there
   is never a wicket drawn over a wicket.
   Loaded last; everything is scoped to #menu.zm-menu and the toggle.
   =================================================================== */
html body #menu.zh-menu.zm-menu {
  --zm-ease: cubic-bezier(.22, .8, .28, 1);
  --zm-head: 66px;
  position: fixed; inset: 0; box-sizing: border-box; overflow: hidden auto; overscroll-behavior: contain;
  width: min(440px, calc(100% - 24px)); max-width: none; height: max-content;
  max-height: calc(100dvh - var(--zm-head) - 24px);
  margin: calc(var(--zm-head) + 12px) auto auto; padding: 20px 18px 44px;
  border: 1.5px solid #2f8dff; border-radius: 18px; color: #f2f7ff;
  background:
    radial-gradient(120% 70% at 10% 0%, #1a5dc433 0, transparent 60%),
    linear-gradient(165deg, #0b2a50f5 0%, #061b36f7 55%, #04132af8 100%);
  box-shadow: 0 0 0 1px #4fb4ff2e, 0 0 26px #0a6cff59, inset 0 1px 0 #9fd6ff40, 0 24px 60px #000a1fb3;
  scrollbar-width: thin;
}
/* The page dims and blurs below the header only; the header keeps its wicket visible. */
html body #menu.zh-menu.zm-menu::backdrop {
  background: #01081acc; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(transparent 0 66px, #000 66px); mask-image: linear-gradient(transparent 0 66px, #000 66px);
}

/* Head */
html body #menu.zm-menu .zm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 0 0 0 4px; border: 0; background: none; position: static; }
html body #menu.zm-menu .zm-title { margin: 0; font: 600 28px/1.1 var(--ds-ui, "Barlow Condensed", sans-serif); letter-spacing: .01em; color: #fff; text-transform: none; }
html body #menu.zm-menu .menu-close { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; margin: -6px -6px 0 0; border: 0; border-radius: 10px; background: transparent; color: #e8f3ff; box-shadow: none; cursor: pointer; transition: color 180ms ease, background-color 180ms ease; }
html body #menu.zm-menu .zm-close-icon { width: 26px; height: 26px; }

/* Tabs with a gliding active pill */
html body #menu.zm-menu .zm-tabs {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 8px; padding: 3px;
  border: 1px solid #6aa9e038; border-radius: 11px; background: #0a223f99; isolation: isolate;
}
html body #menu.zm-menu .zm-glide {
  position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); border-radius: 8px;
  background: linear-gradient(180deg, #1a8cff, #0059f3); box-shadow: 0 0 14px #0a7cff99, inset 0 1px 0 #cdeaff66;
  transform: translateX(calc(var(--zm-i, 0) * 100%)); transition: transform 240ms var(--zm-ease);
}
html body #menu.zm-menu .zm-tabs [role="tab"] {
  position: relative; z-index: 1; min-height: 50px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent;
  color: #cfe3fa; font: 500 19px/1.1 var(--ds-ui, "Barlow Condensed", sans-serif); letter-spacing: .01em; cursor: pointer;
  transition: color 200ms ease;
}
html body #menu.zm-menu .zm-tabs [role="tab"] + [role="tab"]::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: #6aa9e030; }
html body #menu.zm-menu .zm-tabs [role="tab"][aria-selected="true"] { color: #fff; font-weight: 600; }
html body #menu.zm-menu .zm-tabs [role="tab"][aria-selected="true"]::before,
html body #menu.zm-menu .zm-tabs [role="tab"][aria-selected="true"] + [role="tab"]::before { opacity: 0; }

/* Page rows */
html body #menu.zm-menu .zm-panels { display: block; margin: 0; padding: 0; }
html body #menu.zm-menu .zm-panel-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html body #menu.zm-menu .zm-panel ul { margin: 0; padding: 0; list-style: none; }
html body #menu.zm-menu .zm-panel li { margin: 0 4px; border-bottom: 1px solid #7cb4e626; }
html body #menu.zm-menu .zm-panel a {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 14px; min-height: 62px; padding: 0 6px;
  border-radius: 10px; color: #fff; text-decoration: none; font: 500 20px/1.2 var(--ds-ui, "Barlow Condensed", sans-serif); letter-spacing: .01em;
  transition: background-color 180ms ease, color 180ms ease;
}
html body #menu.zm-menu .zm-icon { width: 28px; height: 28px; color: #d6eaff; transition: color 180ms ease, filter 180ms ease; }
html body #menu.zm-menu .zm-chev { width: 18px; height: 18px; color: #cfe3fa; transition: transform 180ms ease; }
html body #menu.zm-menu .zm-panel a[aria-current="page"] { color: #8fe1ff; }
html body #menu.zm-menu .zm-panel a[aria-current="page"] .zm-icon { color: #57c8ff; filter: drop-shadow(0 0 6px #0a8cff99); }
html.js body #menu.zm-menu [data-zm-hidden] { display: none; }

/* Call to action and the bowled-seam flourish */
html body #menu.zm-menu .zh-menu-action { padding: 20px 0 4px; margin: 0; }
html body #menu.zm-menu .zh-menu-cta {
  display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; min-height: 56px; padding: 12px 18px; box-sizing: border-box;
  border: 1px solid #4cb3ff; border-radius: 11px; background: linear-gradient(180deg, #0b80ff, #0052f0); color: #fff;
  font: 600 20px/1.2 var(--ds-ui, "Barlow Condensed", sans-serif); letter-spacing: .01em;
  box-shadow: 0 0 18px #0a6cff80, inset 0 1px 0 #d0f0ff55, inset 0 -2px 0 #0041b9;
}
html body #menu.zm-menu .zh-menu-cta .zh-arrow { width: 22px; height: 22px; }
html body #menu.zm-menu .zm-seam {
  position: absolute; right: 14px; bottom: 8px; width: 78px; height: 34px; pointer-events: none;
  fill: none; stroke: #5fb6ff; stroke-width: 1; stroke-linecap: round; opacity: .32;
}
html body #menu.zm-menu .zm-seam .zm-stitch { stroke-dasharray: 2 3.5; stroke-width: 1.4; }

@media (hover: hover) {
  html body #menu.zm-menu .menu-close:hover { color: #8fe1ff; background: #1c6dff1f; }
  html body #menu.zm-menu .zm-tabs [role="tab"][aria-selected="false"]:hover { color: #fff; }
  html body #menu.zm-menu .zm-panel a:hover { background: #1c6dff1f; color: #8fe1ff; }
  html body #menu.zm-menu .zm-panel a:hover .zm-icon { color: #57c8ff; }
  html body #menu.zm-menu .zm-panel a:hover .zm-chev { transform: translateX(3px); }
}
html body #menu.zm-menu :is(a, button):focus-visible { outline: 2px solid #a8edff; outline-offset: 2px; }

/* Header wicket: a ball is bowled at it while the menu opens; the stumps stay standing. */
html body #header.zh-header .menu-toggle { position: relative; overflow: visible; }
html body #header.zh-header .menu-toggle[aria-expanded="true"] .zh-wicket .zh-stump { transform: none !important; opacity: 1 !important; }
html body #header.zh-header .menu-toggle .zh-wicket .zh-bail { transition: transform 260ms ease, opacity 200ms ease; }
html body #header.zh-header .menu-toggle[aria-expanded="true"] .zh-wicket .zh-bail { transition-delay: 230ms; }
html body #header.zh-header .menu-toggle[aria-expanded="true"] .zh-wicket .zh-bail-left { transform: translate(-4px, -8px) rotate(-30deg) !important; opacity: 0 !important; }
html body #header.zh-header .menu-toggle[aria-expanded="true"] .zh-wicket .zh-bail-right { transform: translate(4px, -9px) rotate(26deg) !important; opacity: 0 !important; }
html body #header.zh-header .menu-toggle::after {
  content: ""; position: absolute; left: calc(50% - 6px); top: calc(50% + 2px); width: 12px; height: 12px; z-index: 2; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #ff9d8f 0, #e0291d 42%, #8a0f0b 100%);
  box-shadow: 0 0 6px #ff4a3a99; opacity: 0; pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  html body #menu.zh-menu.zm-menu[data-state="open"] { animation: zm-in 240ms var(--zm-ease) both; }
  html body #menu.zh-menu.zm-menu[data-state="closing"] { animation: zm-out 150ms ease both; }
  html body #menu.zm-menu .zm-panel:not([data-zm-hidden]) { animation: zm-panel-in 200ms var(--zm-ease) both; }
  html body #header.zh-header .menu-toggle[aria-expanded="true"]::after { animation: zm-ball 760ms cubic-bezier(.3, .7, .4, 1) both; }
  html body #header.zh-header .menu-toggle[aria-expanded="true"] .zh-wicket { animation: zm-wicket-hit 320ms ease-out 230ms both; }
}
@keyframes zm-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes zm-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes zm-panel-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes zm-ball {
  0%   { opacity: 0; transform: translate(-44px, 7px) scale(.7) rotate(0deg); }
  14%  { opacity: 1; }
  42%  { opacity: 1; transform: translate(-4px, -1px) scale(1) rotate(320deg); }
  58%  { opacity: 1; transform: translate(-12px, -7px) scale(1) rotate(400deg); }
  100% { opacity: 0; transform: translate(-30px, 9px) scale(.85) rotate(540deg); }
}
@keyframes zm-wicket-hit { 0% { transform: rotate(0); } 30% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 100% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  html body #menu.zm-menu .zm-glide, html body #menu.zm-menu .zm-panel { transition: none !important; animation: none !important; }
  html body #header.zh-header .menu-toggle .zh-wicket .zh-bail { transition: none !important; }
}

/* Without script the dialog renders in place as a plain site index: every group shown, tabs hidden. */
html:not(.js) body #menu.zm-menu { position: static; width: calc(100% - 32px); max-height: none; margin: 24px auto; }
html:not(.js) body #menu.zm-menu .zm-tabs, html:not(.js) body #menu.zm-menu .menu-close { display: none; }
html:not(.js) body #menu.zm-menu .zm-panel-title { position: static; width: auto; height: auto; clip-path: none; margin: 18px 4px 4px; font: 600 13px/1.3 var(--ds-ui); letter-spacing: .15em; text-transform: uppercase; color: #77d7ff; }