/* Maths Jumper: the shared top bar, phone menu and footer, used on every page so they look and sit the same everywhere */
  section[id], div[id] { scroll-margin-top: 72px; }
  /* Header */
  .sx-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 28px;
    background: linear-gradient(100deg, #7a4dff 0%, #a24bff 50%, #ff6fb5 100%); border-bottom: 3px solid #ffd23f; box-shadow: 0 4px 18px rgba(122,77,255,.32); }
  .sx-brand { display: block; line-height: 0; flex: none; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .sx-brand:hover { transform: rotate(-3deg) scale(1.05); }
  .sx-logo { height: 48px; width: auto; filter: drop-shadow(0 3px 4px rgba(45,31,107,.45)); }
  .sx-top { padding-top: 6px; padding-bottom: 6px; }
  .sx-nav { display: flex; align-items: center; gap: 2px; font-family: 'Fredoka', sans-serif; font-weight: 600; }
  .sx-nav a { color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 999px; font-size: 16px; white-space: nowrap; }
  .sx-nav a:hover { background: rgba(255,255,255,.16); }

  /* ═══ Mobile menu ═══ */
  .mm-btn { display: none; position: relative; z-index: 2; width: 50px; height: 46px; border: 0; padding: 0; border-radius: 16px; cursor: pointer;
    background: #ffd23f; box-shadow: 0 4px 0 #d6a400, 0 6px 14px rgba(45,31,107,.35); -webkit-tap-highlight-color: transparent;
    transition: transform .15s, box-shadow .15s, background .3s; animation: mmHello 1s 1.6s cubic-bezier(.34,1.56,.64,1) both; }
  .mm-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #d6a400, 0 3px 8px rgba(45,31,107,.3); }
  @keyframes mmHello { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.15) rotate(-10deg); } 55% { transform: scale(.95) rotate(8deg); } 75% { transform: rotate(-4deg); } 100% { transform: none; } }
  .mm-burger { position: absolute; left: 50%; top: 50%; width: 24px; height: 18px; transform: translate(-50%, -50%); }
  .mm-burger i { position: absolute; left: 0; height: 4px; border-radius: 4px; background: #3d2a00; transition: transform .45s cubic-bezier(.68,-0.6,.32,1.6), opacity .2s, width .3s, top .3s; }
  .mm-burger i:nth-child(1) { top: 0; width: 100%; }
  .mm-burger i:nth-child(2) { top: 7px; width: 70%; }
  .mm-burger i:nth-child(3) { top: 14px; width: 85%; }
  .mm-btn:hover .mm-burger i { width: 100%; }
  .mm-open .mm-btn { background: #fff; box-shadow: 0 4px 0 #c9bdf0, 0 6px 14px rgba(45,31,107,.35); animation: none; }
  .mm-open .mm-burger i { width: 100%; top: 7px; background: #6b4dbf; }
  .mm-open .mm-burger i:nth-child(1) { transform: rotate(225deg); }
  .mm-open .mm-burger i:nth-child(2) { transform: scaleX(0); opacity: 0; }
  .mm-open .mm-burger i:nth-child(3) { transform: rotate(-225deg); }

  .mm { position: fixed; inset: 0; z-index: 45; visibility: hidden; color: #fff; overflow-y: auto; overscroll-behavior: contain;
    background: radial-gradient(120% 70% at 85% 0%, #5b34c9 0%, #2a1f78 45%, #141232 100%);
    clip-path: circle(0 at var(--mx, 92%) var(--my, 32px)); transition: clip-path .6s cubic-bezier(.7,0,.2,1), visibility 0s .6s; }
  .mm-open .mm { visibility: visible; clip-path: circle(150% at var(--mx, 92%) var(--my, 32px)); transition: clip-path .7s cubic-bezier(.7,0,.2,1), visibility 0s; }
  .mm-open { overflow: hidden; }
  .mm-sky span { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255,210,63,.7); opacity: .2; animation: mmTw 2.4s ease-in-out infinite; }
  .mm-sky span:nth-child(1) { left: 8%; top: 18%; } .mm-sky span:nth-child(2) { left: 88%; top: 26%; animation-delay: -.6s; }
  .mm-sky span:nth-child(3) { left: 20%; top: 62%; animation-delay: -1.2s; } .mm-sky span:nth-child(4) { left: 70%; top: 74%; animation-delay: -1.8s; width: 4px; height: 4px; }
  .mm-sky span:nth-child(5) { left: 48%; top: 14%; animation-delay: -.9s; width: 4px; height: 4px; } .mm-sky span:nth-child(6) { left: 92%; top: 88%; animation-delay: -.3s; }
  .mm-sky span:nth-child(7) { left: 4%; top: 90%; animation-delay: -1.5s; width: 4px; height: 4px; } .mm-sky span:nth-child(8) { left: 60%; top: 44%; animation-delay: -2.1s; width: 3px; height: 3px; }
  @keyframes mmTw { 50% { opacity: 1; transform: scale(1.6); } }
  .mm-in { position: relative; max-width: 460px; margin: 0 auto; padding: 92px 18px 36px; }
  .mm-title { margin: 0 0 22px; font: 700 30px/1.05 'Fredoka', sans-serif; padding-right: 86px; }
  .mm-title em { font-style: normal; color: #ffd23f; display: inline-block; }
  .mm-open .mm-title em { animation: mmBoing .9s .55s cubic-bezier(.34,1.56,.64,1) both; }
  @keyframes mmBoing { 0% { transform: translateY(0); } 35% { transform: translateY(-14px) rotate(-6deg); } 60% { transform: translateY(0) scaleY(.85); } 80% { transform: translateY(-4px); } 100% { transform: none; } }
  .mm-hop { position: absolute; z-index: 3; left: 0; top: 0; width: 70px; height: auto; pointer-events: none; filter: drop-shadow(0 8px 8px rgba(0,0,0,.35));
    transform: translate(var(--hx, 0px), var(--hy, 0px)); }
  .mm-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 12px; }
  .mm-li { grid-column: span 2; } .mm-li.big { grid-column: span 3; }
  .mm-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-height: 104px; padding: 14px 8px 12px;
    border-radius: 24px; text-decoration: none; color: #fff; text-align: center; -webkit-tap-highlight-color: transparent;
    box-shadow: 0 6px 0 var(--sh), 0 12px 20px rgba(0,0,0,.25); transition: transform .12s, box-shadow .12s; }
  .mm-tile::after { content: ''; position: absolute; inset: 6px 10px auto; height: 38%; border-radius: 18px 18px 40px 40px; background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
  .mm-tile:active, .mm-tile.press { transform: translateY(5px) scale(.97); box-shadow: 0 1px 0 var(--sh), 0 4px 10px rgba(0,0,0,.25); }
  .mm-tile b { font: 700 18px/1.1 'Fredoka', sans-serif; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
  .mm-tile small { font: 600 13px 'Fredoka', sans-serif; opacity: .9; }
  .mm-li.big .mm-tile { min-height: 150px; }
  .mm-logo { width: 92%; max-width: 150px; height: auto; margin-bottom: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
  .t-tt { background: linear-gradient(#ffcf3a, #f7a700); --sh: #b77a00; color: #4a2e00; } .t-tt b, .t-tt small { text-shadow: none; }
  .t-fr { background: linear-gradient(#a066ff, #6a2fd0); --sh: #44188f; }
  .t-home { background: linear-gradient(to bottom, #3fd6c4, #129e8e); --sh: #0b6b60; --ts: rgba(0,70,60,.45); }
  .t-songs { background: linear-gradient(#ff7cc0, #e8448f); --sh: #a8245f; }
  .t-about { background: linear-gradient(#3fd6c4, #129e8e); --sh: #0b6b60; }
  .t-faq { background: linear-gradient(#58b4ff, #2f74e6); --sh: #1d4ea3; }
  .mm-ic { width: 46px; height: 46px; margin-bottom: auto; border-radius: 15px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
  .mm-ic img { width: 30px; height: 30px; }
  .mm-play { margin: 26px auto 0; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; border-radius: 999px; text-decoration: none;
    background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.3); color: #fff; font: 600 16px 'Fredoka', sans-serif; }
  .mm-play img { width: 22px; height: 22px; }
  /* tiles pop in one after another */
  .mm-li, .mm-play, .mm-title { opacity: 0; transform: translateY(26px) scale(.7) rotate(-6deg); }
  .mm-open .mm-li, .mm-open .mm-play, .mm-open .mm-title { animation: mmPop .6s cubic-bezier(.34,1.56,.64,1) both; }
  .mm-open .mm-title { animation-delay: .18s; }
  .mm-open .mm-li:nth-child(1) { animation-delay: .26s; } .mm-open .mm-li:nth-child(2) { animation-delay: .33s; --r: 6deg; }
  .mm-open .mm-li:nth-child(3) { animation-delay: .40s; } .mm-open .mm-li:nth-child(4) { animation-delay: .46s; --r: 6deg; } .mm-open .mm-li:nth-child(5) { animation-delay: .52s; }
  .mm-open .mm-play { animation-delay: .6s; }
  @keyframes mmPop { from { opacity: 0; transform: translateY(26px) scale(.7) rotate(var(--r, -6deg)); } to { opacity: 1; transform: none; } }
  .mm-crew { display: flex; justify-content: center; align-items: flex-end; gap: 4px; margin-top: 34px; padding-bottom: 10px; border-bottom: 4px solid rgba(255,210,63,.5); }
  .mm-crew img { height: 62px; width: auto; flex: 0 1 auto; min-width: 0; max-width: 16%; object-fit: contain; cursor: pointer; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
  .mm-open .mm-crew img { animation: mmPeek .7s cubic-bezier(.34,1.56,.64,1) both, mmIdle 3s ease-in-out infinite; }
  .mm-open .mm-crew img:nth-child(1) { animation-delay: .7s, 1.4s; } .mm-open .mm-crew img:nth-child(2) { animation-delay: .76s, 1.9s; }
  .mm-open .mm-crew img:nth-child(3) { animation-delay: .82s, 1.6s; } .mm-open .mm-crew img:nth-child(4) { animation-delay: .88s, 2.2s; }
  .mm-open .mm-crew img:nth-child(5) { animation-delay: .94s, 1.7s; } .mm-open .mm-crew img:nth-child(6) { animation-delay: 1s, 2.4s; }
  @keyframes mmPeek { from { opacity: 0; transform: translateY(40px) scaleY(.6); } to { opacity: 1; transform: none; } }
  @keyframes mmIdle { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scaleY(1.03); } }
  /* Menu buttons in the game's own style: candy gradient, solid darker edge, white Nunito label, white icon disc */
  .mm-grid { gap: 14px 12px; }
  .mm-li.wide { grid-column: 1 / -1; }
  .mm-pill[aria-current="page"]::before { top: -9px; right: 22px; }
  .mm-tile::after { display: none; }
  .mm-tile { font-family: 'Nunito', sans-serif; border-radius: 26px; box-shadow: 0 5px 0 var(--sh), 0 10px 18px rgba(0,0,0,.28); }
  .mm-tile:active, .mm-tile.press { transform: translateY(4px); box-shadow: 0 1px 0 var(--sh), 0 3px 8px rgba(0,0,0,.25); }
  .mm-tile b { font: 900 19px/1.1 'Nunito', sans-serif; text-shadow: 0 1px 0 var(--ts, rgba(0,0,0,.3)); }
  .mm-tile small { font: 700 13px 'Nunito', sans-serif; opacity: 1; text-shadow: 0 1px 0 var(--ts, rgba(0,0,0,.3)); }
  .t-tt { background: linear-gradient(to bottom, #ffd84a, #f5a800); --sh: #b26f00; --ts: rgba(255,255,255,.35); color: #4a2a00; }
  .t-tt b, .t-tt small { text-shadow: 0 1px 0 rgba(255,255,255,.35); }
  .t-fr { background: linear-gradient(to bottom, #8a63ff, #6b4dbf); --sh: #3d2778; --ts: rgba(40,20,100,.4); }
  .mm-pill { flex-direction: row; justify-content: flex-start; align-items: center; gap: 12px; min-height: 64px; padding: 8px 18px 8px 10px; border-radius: 999px; text-align: left; }
  .mm-pi { flex: none; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 0 rgba(0,0,0,.15); }
  .mm-pi img { width: 28px; height: 28px; }
  .mm-pt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
  .mm-pill b { font-size: 20px; }
  .mm-go { flex: none; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.24); display: flex; align-items: center; justify-content: center; padding-left: 2px; }
  .t-songs { background: linear-gradient(to bottom, #ffb648, #e96c00); --sh: #a94d00; --ts: rgba(120,50,0,.4); }
  .t-about { background: linear-gradient(to bottom, #22a7ea, #0a7cc4); --sh: #075a91; --ts: rgba(0,60,110,.45); }
  .t-faq { background: linear-gradient(to bottom, #ff6fa8, #e0367a); --sh: #a1194f; --ts: rgba(110,10,50,.4); }
  .mm-in { min-height: 100%; display: flex; flex-direction: column; padding-bottom: 28px; }
  .mm-play { margin-top: auto !important; }
  .mm-grid { margin-bottom: 30px; }
  .mm-in { padding-top: 122px; }
  .mm-title { margin-bottom: 34px; }
  @media (max-height: 700px) { .mm-in { padding-top: 100px; } .mm-title { margin-bottom: 26px; } }
  .mm-play { margin: 22px 0 0; display: flex; align-items: center; justify-content: flex-start; gap: 12px; width: 100%; min-height: 66px; padding: 8px 20px 8px 10px; border: 0; border-radius: 999px;
    background: linear-gradient(to bottom, #8be43c, #4ab915); box-shadow: 0 5px 0 #2e7d32, 0 10px 18px rgba(0,0,0,.28); color: #fff; text-decoration: none; text-align: left;
    -webkit-tap-highlight-color: transparent; transition: transform .12s, box-shadow .12s; }
  .mm-play:active { transform: translateY(4px); box-shadow: 0 1px 0 #2e7d32, 0 3px 8px rgba(0,0,0,.25); }
  .mm-play b { font: 900 19px/1.1 'Nunito', sans-serif; text-shadow: 0 1px 0 rgba(0,80,0,.35); }
  .mm-play small { font: 700 13px 'Nunito', sans-serif; text-shadow: 0 1px 0 rgba(0,80,0,.35); }
  .mm-play .mm-pi svg { margin-left: 3px; }
  .mm-open .mm-li:nth-child(3) { animation-delay: .40s; } .mm-open .mm-li:nth-child(4) { animation-delay: .46s; } .mm-open .mm-li:nth-child(5) { animation-delay: .52s; } .mm-open .mm-li:nth-child(6) { animation-delay: .58s; }
  .mm-open .mm-play { animation-delay: .62s; }
  @media (max-width: 360px) { .mm-pill b { font-size: 18px; } .mm-tile small { font-size: 12px; } .mm-play b { font-size: 17px; } }
  /* Colouring Book and For teachers tiles in the phone menu */
  .t-colour { background: linear-gradient(to bottom, #ff7d7d, #e5484d); --sh: #a3262b; --ts: rgba(110,10,20,.4); }
  .t-teach { background: linear-gradient(to bottom, #8a9bff, #5262e0); --sh: #333f9e; --ts: rgba(20,30,110,.4); }
  .mm-open .mm-li:nth-child(7) { animation-delay: .64s; } .mm-open .mm-li:nth-child(8) { animation-delay: .70s; }
  .mm-open .mm-play { animation-delay: .76s; }
  .mm-spark { position: fixed; z-index: 60; width: 14px; height: 14px; pointer-events: none; background: url(images/fractions/icons/star.svg) center / contain no-repeat; }
  @media (max-width: 760px) { .sx-nav { display: none; } .mm-btn { display: block; } .sx-top { padding: 8px 16px; } .sx-logo { height: 42px; } }
  @media (max-width: 360px) { .mm-title { font-size: 26px; } .mm-tile b { font-size: 16px; } .mm-grid { gap: 12px 10px; } .mm-in { padding-left: 14px; padding-right: 14px; } }
  @media (prefers-reduced-motion: reduce) {
    .mm, .mm-open .mm { transition: visibility 0s; } .mm { clip-path: none; opacity: 0; } .mm-open .mm { opacity: 1; }
    .mm-li, .mm-play, .mm-title, .mm-open .mm-li, .mm-open .mm-play, .mm-open .mm-title { animation: none; opacity: 1; transform: none; }
    .mm-btn, .mm-sky span, .mm-open .mm-title em, .mm-open .mm-crew img { animation: none; } .mm-burger i { transition: none; }
  }


  /* the page you are on */
  .sx-nav a[aria-current="page"] { background: rgba(255,255,255,.18); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
  .mm-tile[aria-current="page"]::before { content: "You're here"; position: absolute; z-index: 2; top: -10px; right: 10px; padding: 3px 9px; border-radius: 999px;
    background: #fff; color: #3d2778; font: 800 11.5px 'Nunito', sans-serif; box-shadow: 0 2px 0 rgba(0,0,0,.15); }

  /* Footer: brand on the left, links grouped in columns */
  .sx-foot { background: #141232; color: #b9b4d8; padding: 56px 24px 32px; font-family: 'Nunito', sans-serif; }
  .sx-foot-in { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; align-items: start; }
  .sx-foot-brand { display: inline-block; line-height: 0; } .sx-foot-brand img { height: 80px; width: auto; transition: transform .25s cubic-bezier(.34,1.56,.64,1); }
  .sx-foot-brand:hover img { transform: rotate(-3deg) scale(1.05); }
  .sx-foot-brandcol p { margin: 14px 0 0; max-width: 260px; font-size: 14.5px; line-height: 1.55; font-weight: 600; color: #9a94c4; }
  .sx-foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .sx-foot-cols > div { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .sx-fh { margin: 0 0 4px; font: 600 13px 'Fredoka', sans-serif; letter-spacing: .8px; text-transform: uppercase; color: #ffd23f; }
  .sx-foot-cols a { color: #c9c3ef; text-decoration: none; font-weight: 700; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
  .sx-foot-cols a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .sx-foot-c { max-width: 1080px; margin: 36px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); text-align: center; font-size: 13px; font-weight: 600; line-height: 1.5; color: #7a7599; }
  @media (max-width: 860px) { .sx-foot-in { grid-template-columns: minmax(0, 1fr); gap: 30px; } }
  @media (max-width: 560px) {
    .sx-foot { padding: 44px 20px 28px; }
    .sx-foot-brandcol { text-align: center; } .sx-foot-brandcol p { margin-left: auto; margin-right: auto; }
    .sx-foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
    .sx-foot-cols > div:last-child { grid-column: 1 / -1; }
  }

  /* ═══ Hero: the Times Tables and Fractions heroes line up with the home page hero ═══
     Same height, same column widths, logo at the top, heading the same size, phone the same size and place. */
  .hx.hx-tt, .hx.hx-fr { min-height: calc(100svh - 64px) !important; box-sizing: border-box; padding: clamp(18px, 4vh, 56px) 40px clamp(22px, 5vh, 64px) !important; }
  .hx .hx-in { max-width: 1140px !important; width: 100%; margin: 0 auto; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(36px, 5vw, 80px) !important; }
  .hx .hx-text { flex: 0 1 560px !important; max-width: 560px !important; min-width: 0 !important; gap: clamp(10px, 1.9vh, 18px) !important; }
  .hx .hx-brand { flex-direction: column !important; align-items: flex-start !important; gap: clamp(10px, 1.9vh, 18px) !important; }
  .hx .hx-logo { display: block !important; height: clamp(90px, 15vh, 150px) !important; width: auto !important; align-self: flex-start; margin: 0 !important; }
  .hx .hx-h { font-size: clamp(30px, min(3.9vw, 5.8vh), 52px) !important; line-height: 1.06 !important; }
  /* the phone column is exactly the phone's width (as on the home page); the tabs underneath hang centred below it */
  .hx { --hx-pw: clamp(170px, calc((100svh - 64px - 210px) * .4621 + 20px), 280px); }
  .hx .hx-stage { flex: none !important; width: var(--hx-pw) !important; align-items: center !important; }
  .hx .hx-stage > * { flex-shrink: 0; }
  .hx .hx-stage .mjh-tabs, .hx .hx-stage .hero-tabs { width: max-content; max-width: 92vw; }
  .hx .hx-phone { width: var(--hx-pw) !important; }
  @media (max-width: 900px) {
    .hx.hx-tt, .hx.hx-fr { min-height: 0 !important; padding: 24px 18px 44px !important; }
    .hx .hx-in { flex-direction: column !important; gap: 14px !important; }
    .hx .hx-text { flex: none !important; width: 100%; max-width: 560px !important; align-items: center !important; text-align: center; gap: 14px !important; }
    .hx .hx-brand { align-items: center !important; gap: 12px !important; }
    .hx .hx-logo { height: 76px !important; align-self: center !important; }
    .hx .hx-h { font-size: clamp(26px, 7.7vw, 34px) !important; text-align: center; margin: 0 !important; }
    .hx { --hx-pw: min(200px, 54vw); }
    .hx .hx-stage { width: 100% !important; }
    .hx .hx-stage .mjh-tabs, .hx .hx-stage .hero-tabs { width: auto; max-width: 100%; }
    .hx .hx-stage { padding-top: 22px !important; }
    /* Fractions: logo, label, heading, then the phone, then the rest, the same order as the other pages */
    .hx-fr .hx-text { display: contents !important; }
    .hx-fr .hx-in > * , .hx-fr .hx-text > * { order: 9; }
    .hx-fr .hx-logo { order: 1; } .hx-fr .pill-label { order: 2; } .hx-fr .hx-h { order: 3; } .hx-fr .hx-stage { order: 4; }
    .hx-fr .hx-text > p:not(.hero-note) { order: 5; text-align: center; } .hx-fr .hero-btns { order: 6; justify-content: center; } .hx-fr .ticks { order: 7; justify-content: center; } .hx-fr .hero-note { order: 8; text-align: center; }
  }

  /* the label under the logo looks the same as on the home page: gold for Times Tables, white for Fractions (coming soon) */
  .hx-tt .hx-brand > div:not(.hx-logo), .hx-fr .pill-label { background: #ffd23f !important; color: #5a3b00 !important; border: 0 !important; box-shadow: 0 3px 0 #d6a400 !important;
    font: 700 15px 'Fredoka', sans-serif !important; padding: 7px 15px !important; border-radius: 999px !important; letter-spacing: 0 !important; }
  .hx-tt .hx-brand > div:not(.hx-logo) img { filter: brightness(0) opacity(.6); }
  .hx-fr .pill-label { background: #fff !important; color: #6b4dbf !important; box-shadow: 0 3px 0 #c9bdf0 !important; }
  @media (max-width: 400px) { .hx-tt .hx-brand > div:not(.hx-logo), .hx-fr .pill-label { font-size: 13.5px !important; padding: 6px 13px !important; } }

  /* ═══ Song videos: a swipeable slider on phones (both pages) ═══ */
  .mjs-nav { display: none; }
  @media (max-width: 640px) {
    #songs .mjs-grid { display: flex !important; gap: 12px !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
      margin: 30px calc(50% - 50vw) 0 !important; padding: 6px 16px 10px !important; scroll-padding: 0 16px; scrollbar-width: none; max-width: none !important; }
    #songs .mjs-grid::-webkit-scrollbar { display: none; }
    #songs .mjs-grid li { flex: 0 0 72%; scroll-snap-align: center; }
    #songs .mjs-grid li:first-child { scroll-snap-align: start; } #songs .mjs-grid li:last-child { scroll-snap-align: end; }
    #songs .mjs-tile { border-radius: 18px; box-shadow: 0 8px 18px rgba(27,24,64,.12); }
    #songs .mjs-tile:hover { transform: none; }
    #songs .mjs-tile-t { padding: 10px 14px 12px; font-size: 15px; }
    #songs .mjs-tile-t b { font-size: 18px; }
    .mjs-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }
    .mjs-nav button { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 0 #e2d8c4, 0 4px 10px rgba(27,24,64,.1); cursor: pointer;
      display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: transform .12s, box-shadow .12s, opacity .2s; }
    .mjs-nav button:active { transform: translateY(3px); box-shadow: 0 0 0 #e2d8c4, 0 2px 6px rgba(27,24,64,.1); }
    .mjs-nav button[disabled] { opacity: .35; cursor: default; }
    .mjs-track { position: relative; flex: 0 1 150px; height: 6px; border-radius: 999px; background: #eadfca; overflow: hidden; }
    .mjs-track i { position: absolute; top: 0; left: 0; height: 100%; width: 30%; border-radius: inherit; background: #6b4dbf; transition: width .2s ease-out; }
    .mjs-count { min-width: 64px; text-align: center; font: 700 14px 'Fredoka', sans-serif; color: #5b5570; }
  }
  @media (max-width: 640px) and (prefers-reduced-motion: reduce) { .mjs-track i { transition: none; } }

  /* ═══ FAQ: the + / − roundel, drawn so the sign sits exactly in the centre (same on every page) ═══ */
  .faq summary::after, .mj-faq-item summary::after {
    content: '' !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; box-sizing: border-box; flex: none;
    font-size: 0 !important; line-height: 0 !important; color: #7a4dff !important;
    background: linear-gradient(currentColor, currentColor) center / 14px 4px no-repeat, linear-gradient(currentColor, currentColor) center / 4px 14px no-repeat, #efe6fd !important;
    transition: background-size .25s ease, background-color .2s ease, color .2s ease !important; }
  .faq summary::after { right: 16px !important; margin-top: 0 !important; }
  .faq summary:hover::after, .mj-faq-item summary:hover::after { background-color: #e2d6fc !important; }
  .faq details[open] summary::after, .mj-faq-item[open] summary::after {
    content: '' !important; color: #fff !important;
    background: linear-gradient(currentColor, currentColor) center / 14px 4px no-repeat, linear-gradient(currentColor, currentColor) center / 4px 0 no-repeat, #7a4dff !important; }
  @media (prefers-reduced-motion: reduce) { .faq summary::after, .mj-faq-item summary::after { transition: none !important; } }

  /* ═══ Scroll progress: a bright line along the bottom of the top bar, with Redy hopping along it ═══ */
  .sx-top { --sx-p: 0; }
  .sx-prog { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; pointer-events: none; z-index: 1; }
  .sx-prog i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: left center; transform: scaleX(var(--sx-p));
    background: linear-gradient(90deg, #fff6c9, #fff); box-shadow: 0 0 8px rgba(255,255,255,.8); }
  .sx-rd { position: absolute; z-index: 2; bottom: 3px; left: 0; width: 30px; transform-origin: 50% 100%; opacity: 0; transition: opacity .3s; will-change: transform; }
  .sx-prog.show .sx-rd { opacity: 1; }
  .sx-rd img { display: block; width: 30px; height: auto; transform-origin: 50% 100%; filter: drop-shadow(0 2px 2px rgba(45,31,107,.45)); }
  .sx-rd img.hop { animation: sxWalkerHop .48s linear; }
  /* the game's own hop (walkerHop), scaled to the little Redy on the line */
  @keyframes sxWalkerHop {
    0%   { transform: translateY(0)     scale(1.12, .88); }
    10%  { transform: translateY(-7px)  scale(.94, 1.08); }
    32%  { transform: translateY(-14px) scale(.99, 1.01); }
    50%  { transform: translateY(-15px) scale(1, 1); }
    68%  { transform: translateY(-14px) scale(.99, 1.01); }
    88%  { transform: translateY(-4px)  scale(.95, 1.06); }
    96%  { transform: translateY(0)     scale(1.12, .88); }
    100% { transform: translateY(0)     scale(1, 1); } }
  .sx-trail { position: absolute; z-index: 1; left: 0; bottom: 3px; width: 100%; height: 32px; overflow: visible; pointer-events: none; }
  .sx-trail path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; stroke-opacity: .75; filter: drop-shadow(0 0 3px rgba(255,255,255,.7)); }
  .sx-brand, .sx-nav, .mm-btn { position: relative; z-index: 2; }
  @media (prefers-reduced-motion: reduce) { .sx-rd, .sx-trail { display: none; } }

  /* ═══ On this page: a slim bar of section links that sticks under the top bar ═══ */
  .sx-sub { position: sticky; top: var(--sx-head, 63px); z-index: 40; background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(27,24,64,.08); box-shadow: 0 6px 16px rgba(27,24,64,.08); }
  .sx-sub-in { max-width: 1140px; margin: 0 auto; display: flex; align-items: center; gap: 4px; padding: 7px 20px; overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; }
  .sx-sub-in::-webkit-scrollbar { display: none; }
  .sx-sub-t { flex: none; margin-right: 8px; font: 700 12px 'Fredoka', sans-serif; letter-spacing: .6px; text-transform: uppercase; color: #9a93b8; }
  .sx-sub a { flex: none; padding: 7px 13px; border-radius: 999px; color: #3d3760; text-decoration: none; font: 600 14.5px 'Fredoka', sans-serif; white-space: nowrap; transition: background .2s, color .2s; }
  .sx-sub a:hover { background: #f1ecfd; }
  .sx-sub a[aria-current="true"] { background: #7a4dff; color: #fff; box-shadow: 0 2px 0 #3d2778; }
  @media (max-width: 760px) {
    .sx-sub-t { display: none; }
    .sx-sub-in { padding: 6px 12px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); }
    .sx-sub a { font-size: 14px; padding: 7px 12px; }
  }
  .sx-subpage section[id], .sx-subpage div[id] { scroll-margin-top: calc(var(--sx-head, 63px) + 58px); }

  /* ═══ Phone action bar on the game pages ═══ */
  .sx-dock { display: none; }
  @media (max-width: 760px) {
    .sx-dock { position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 44; display: flex; align-items: center; gap: 8px; padding: 8px;
      border-radius: 999px; background: rgba(27,24,64,.94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 10px 30px rgba(0,0,0,.35);
      transform: translateY(140%); transition: transform .45s cubic-bezier(.34,1.4,.64,1); }
    .sx-dock.show { transform: none; }
    .mm-open .sx-dock { transform: translateY(140%); }
    .sx-dock-a { flex: 1 1 0; min-width: 0; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 999px; text-decoration: none;
      font: 900 15px 'Nunito', sans-serif; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
    .sx-dock-a.ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
    .sx-dock-a.go { color: #fff; background: linear-gradient(to bottom, #8be43c, #4ab915); box-shadow: 0 3px 0 #2e7d32; text-shadow: 0 1px 0 rgba(0,80,0,.35); }
    .sx-dock-a.go:active { transform: translateY(2px); box-shadow: 0 1px 0 #2e7d32; }
    .sx-dock-soon { flex: 1 1 0; min-width: 0; padding-left: 12px; color: #d9d2ff; font: 700 13px/1.25 'Nunito', sans-serif; }
    .sx-dock-soon b { display: block; color: #fff; font: 600 15px 'Fredoka', sans-serif; }
  }
  @media (max-width: 440px) { .sx-dock-l { display: none; } .sx-dock-a.ghost { flex: 0 1 auto; padding: 0 16px; } }
  @media (max-width: 360px) { .sx-dock-a { font-size: 13.5px; } .sx-dock-a.ghost { padding: 0 12px; } }
  @media (prefers-reduced-motion: reduce) { .sx-dock { transition: none; } }

  /* ═══ Polish: tidy line breaks, matching section labels, gentle scroll-in, buddies you can tap ═══ */
  h1, h2, h3 { text-wrap: balance; }
  .lede, .mjx-lede, .hero p, .hf-p, .yp-lede { text-wrap: pretty; }
  .eyebrow, .mjx-eyebrow { font-family: 'Fredoka', sans-serif !important; font-weight: 600 !important; font-size: 15px !important; letter-spacing: .8px !important; text-transform: uppercase; }
  .sx-rv { opacity: 0; transform: translateY(28px); }
  .sx-rv.in { opacity: 1; transform: none; transition: opacity .7s ease var(--rv-d, 0s), transform .8s cubic-bezier(.2,.8,.2,1) var(--rv-d, 0s); }
  #bd-img, #mj-char-img { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  @media (prefers-reduced-motion: reduce) { .sx-rv { opacity: 1 !important; transform: none !important; } }