/* 📱 PHONES ONLY — an easy, quick top of the hub (index.html + js/mobile-top.js).
   · top bar: one compact row (name chip + 👻 + ⚙️ + ☰ menu) and a sideways strip of status chips (🏅 🎟️ 🔥 🐾) that never wraps;
     🏆 Leaderboards, 👑 Admin and Log out live in the ☰ menu (Log in / Sign up stays in sight when you're logged out)
   · the big COMICAL GAMES banner becomes a slim logo bar (every easter egg on the title still works)
   · the 🎂 Birthday Bash, 💬 WhatsApp channel, 📣 Share and ⭐ Shout-out cards become one swipeable "📰 What's on" strip of compact
     cards; "More" opens a card in place with everything it had (same buttons, same ids). Claimed the channel reward → a small ✅ card.
   Every rule needs html.mt (set by js/mobile-top.js) AND sits inside a phone media query: portrait ≤ 600px wide, or a landscape
   phone (≤ 500px tall, ≤ 899px wide — or up to 932px with a touch screen). Outside them nothing here applies: the wrappers the script
   adds are display:contents and its extra buttons are hidden, so tablets and desktops look exactly as before. */
.mtNews,.mtTrack{display:contents}
.mtHead,.mtEnd,.mtMore{display:none}

@media (max-width:600px), (max-height:500px) and (max-width:899px), (max-height:500px) and (max-width:932px) and (pointer:coarse) {
  html.mt{--mtGut:10px;--mtH:200px}

  /* ---------- top bar: [name 👻 ⚙️ … ☰] then [🏅 🎟️ 🔥 🐾 →] ---------- */
  html.mt .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"me end" "chips chips";align-items:center;gap:5px 6px;margin-bottom:10px;position:relative;z-index:40}
  html.mt .topbar>#meGrp{grid-area:me;justify-self:start}
  html.mt .topbar>.mtEnd{grid-area:end;display:flex;align-items:center;gap:6px;position:relative}
  html.mt .topbar .pill{margin-top:0;margin-bottom:0}
  /* the status chips: one line, sideways scroll, a soft fade on the edge that has more */
  html.mt .topbar>.mtChips{grid-area:chips;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--mtGut));padding:1px var(--mtGut) 2px;scroll-padding:0 var(--mtGut);min-height:40px}
  html.mt .topbar>.mtChips::-webkit-scrollbar{display:none}
  html.mt .topbar>.mtChips>*{flex:0 0 auto;margin:0;white-space:nowrap}
  html.mt:not(.mtIn) .topbar>.mtChips{display:none}   /* logged out: no chips, no empty row */
  html.mt .topbar>.mtChips.mtFadeR{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 38px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 38px),transparent)}
  html.mt .topbar>.mtChips.mtFadeL{-webkit-mask-image:linear-gradient(90deg,transparent,#000 38px);mask-image:linear-gradient(90deg,transparent,#000 38px)}
  html.mt .topbar>.mtChips.mtFadeL.mtFadeR{-webkit-mask-image:linear-gradient(90deg,transparent,#000 38px,#000 calc(100% - 38px),transparent);mask-image:linear-gradient(90deg,transparent,#000 38px,#000 calc(100% - 38px),transparent)}
  /* your name: long names end in "…" (a block, not the phone pills' inline-flex) but the 👻 Ghost Mode mark stays pinned in sight */
  html.mt #meGrp>#whoami{display:block;max-width:100%;line-height:22px;padding-top:7px;padding-bottom:7px}
  html.mt #meGrp>#whoami .tagchip{font-size:12px!important;line-height:16px;padding:0 6px!important;margin:0 0 0 3px;vertical-align:1px!important;border-width:1px}   /* your tag fits the 40px chip (and is 12px+) */
  html.mt #meGrp>#whoami.isGhost{position:relative;padding-right:28px}
  html.mt #meGrp>#whoami.isGhost .ghMark{position:absolute;right:8px;top:50%;margin:-.62em 0 0;line-height:1.25}
  /* ☰ */
  html.mt .mtMenuBtn{width:46px;min-height:40px;padding:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-color:#c9c4e8;color:#fff}
  html.mt .mtMenuBtn i{display:block;width:18px;height:3px;border-radius:2px;background:currentColor;transition:transform .18s,opacity .18s}
  html.mt .mtMenuBtn[aria-expanded="true"]{background:#ffd93d;border-color:#ffd93d;color:#101018}
  html.mt .mtMenuBtn[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  html.mt .mtMenuBtn[aria-expanded="true"] i:nth-child(2){opacity:0}
  html.mt .mtMenuBtn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  html.mt .mtMenuBtn:focus-visible,html.mt .mtDot:focus-visible,html.mt .mtMore:focus-visible{outline:3px solid #7ef2ff;outline-offset:2px}
  html.mt .mtEnd>#authLink{white-space:nowrap;min-height:40px;display:inline-flex;align-items:center}
  html.mt .mtMenu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:max-content;min-width:200px;max-width:calc(100vw - 20px);display:flex;flex-direction:column;gap:7px;padding:10px;background:#181230;border:3px solid #101018;border-radius:18px;box-shadow:0 8px 0 rgba(0,0,0,.35),0 18px 40px rgba(0,0,0,.6);transform-origin:calc(100% - 22px) 0;animation:mtPop .2s cubic-bezier(.2,1.6,.4,1)}
  html.mt .mtMenu[hidden]{display:none}
  html.mt .mtMenu::before{content:'';position:absolute;top:-11px;right:15px;border:9px solid transparent;border-top:0;border-bottom-color:#101018}
  html.mt .mtMenu>.pill{display:flex;align-items:center;gap:8px;min-height:44px;margin:0;padding:8px 16px;font-size:15px;white-space:nowrap;border-radius:14px}
  html.mt .mtMenu>#authLink{margin-top:3px}
  @keyframes mtPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

  /* ---------- the big banner → a slim logo bar ---------- */
  html.mt header.hero{padding:9px 10px 6px;border-width:4px;border-radius:16px;margin:8px 0 10px;box-shadow:0 5px 0 rgba(0,0,0,.35),0 10px 22px rgba(0,0,0,.4)}
  html.mt header.hero h1.title{font-size:33px;line-height:1;letter-spacing:1.5px;-webkit-text-stroke:2px var(--ink);text-shadow:3px 4px 0 var(--ink)}
  html.mt header.hero .sub{display:none}
  html.mt header.hero .sub:first-child{display:block;position:absolute;left:50%;top:-12px;margin:0;padding:2px 11px;font-size:12px;letter-spacing:1.5px;line-height:1.3;white-space:nowrap;transform:translateX(-50%) rotate(-2deg);box-shadow:0 2px 0 rgba(0,0,0,.35)}
  html.mt header.hero h1.title~.sub[style*="background"]{display:inline-block;margin-top:5px;font-size:13px;padding:3px 12px}   /* an admin 📢 banner message still shows */
  html.mt header.hero .egg-dots{position:absolute;left:0;right:0;bottom:-24px;z-index:3;margin:0}

  /* ---------- 📰 What's on: one swipeable strip of compact cards ---------- */
  html.mt .mtNews{display:block;margin:0 0 4px}
  html.mt .mtHead{display:flex;align-items:center;gap:8px;min-height:34px;margin:0 0 2px}
  html.mt .mtTitle{font-family:'Bangers',cursive;font-size:21px;letter-spacing:1.5px;line-height:1;color:#fff;text-shadow:2px 2px 0 var(--ink);white-space:nowrap}
  html.mt .mtHint{font-size:12px;font-weight:800;color:#c9c4e8;white-space:nowrap;display:inline-block;animation:mtHint 1.8s ease-in-out infinite}
  html.mt .mtHint.off{display:none}
  @keyframes mtHint{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  html.mt .mtDots{margin-left:auto;display:flex;gap:2px}
  html.mt .mtDot{width:40px;height:34px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:17px;line-height:1;background:none;border:2px solid transparent;border-radius:18px;color:#fff;cursor:pointer;opacity:.6;filter:saturate(.6)}
  html.mt .mtDot{position:relative;z-index:1}html.mt .mtDot::after{content:'';position:absolute;inset:-5px -2px}   /* a 40px-tall tap area without a taller row (3px past the 2px border, above and below) */
  html.mt .mtDot[aria-current="true"]{opacity:1;filter:none;background:#101018;border-color:#ffd93d;box-shadow:0 3px 0 rgba(0,0,0,.4)}
  html.mt .mtTrack{display:flex;align-items:flex-start;gap:10px;position:relative;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;margin:0 calc(-1 * var(--mtGut));padding:2px var(--mtGut) 8px;scroll-padding:0 var(--mtGut)}
  html.mt .mtTrack::-webkit-scrollbar{display:none}
  html.mt .mtTrack.mtNudge{animation:mtNudge 1.1s ease-in-out}
  @keyframes mtNudge{0%,100%{transform:none}40%{transform:translateX(-34px)}70%{transform:translateX(4px)}}
  /* every card: the same size, the next one peeking in */
  html.mt .mtTrack>*{flex:0 0 86%;min-width:0;height:var(--mtH);margin:0;scroll-snap-align:start;scroll-snap-stop:always;border-width:4px;border-radius:16px;box-shadow:0 5px 0 rgba(0,0,0,.4);overflow:hidden;position:relative}
  html.mt .mtTrack>[hidden]{display:none!important}
  html.mt .mtTrack>.mtOpen{height:auto;min-height:var(--mtH)}
  /* "More ▾" — bottom right of the cards (top right on the ⭐ list) */
  html.mt .mtMore{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;min-height:40px;padding:0 13px;font-family:inherit;font-size:13px;font-weight:900;color:#fff;background:rgba(10,8,24,.55);border:2px solid rgba(255,255,255,.75);border-radius:20px;cursor:pointer;white-space:nowrap;position:relative;z-index:2;animation:none}
  html.mt .mtMore .mtArr{font-size:12px}
  /* the card's own main buttons: full, comfy tap targets */
  html.mt .mtTrack .ccBtns>.pill,html.mt .mtTrack .cBtns>.pill,html.mt .mtTrack .sBtns>.pill{min-height:40px;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;padding:5px 12px}

  html.mt #tabbar .tab{min-height:40px}   /* the tabs: 40px tap targets too */

  /* 🎂 Birthday Bash: kicker, title (+ a little cake), the progress bar, the numbers, you — and 🎁 Rewards */
  html.mt .mtTrack>#ccBox{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:6px;padding:8px 11px 10px}
  html.mt .mtTrack>#ccBox .ccText{flex:1 1 auto;min-height:0;width:auto;overflow:hidden}
  html.mt .mtTrack>#ccBox .ccKicker{font-size:12px;letter-spacing:.2px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.mt .mtTrack>#ccBox .ccTitle{font-size:19.5px;letter-spacing:1px;line-height:1.02;margin:3px 0 5px;padding-right:66px;min-height:2.04em}
  html.mt .mtTrack>#ccBox .ccArt{position:absolute;top:25px;right:8px;width:60px;flex:none;z-index:1;pointer-events:none}
  html.mt .mtTrack>#ccBox .ccBar{height:18px;margin:2px 4px 2px 0}
  html.mt .mtTrack>#ccBox .ccNums{font-size:12.5px;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.mt .mtTrack>#ccBox .ccNums b{font-size:14px}
  html.mt .mtTrack>#ccBox .ccMe{font-size:12.5px;line-height:1.35;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.mt .mtTrack>#ccBox .ccMe br{display:none}
  html.mt .mtTrack>#ccBox .ccTick,html.mt .mtTrack>#ccBox .ccDbl{display:none}
  html.mt .mtTrack>#ccBox .ccBtns{flex:0 0 auto;width:auto;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:8px}
  html.mt .mtTrack>#ccBox .ccBtns>#ccOpen{flex:0 1 auto;min-width:0}
  html.mt .mtTrack>#ccBox.mtOpen .ccArt{position:relative;top:auto;right:auto;width:130px;margin:0 auto -4px}
  html.mt .mtTrack>#ccBox.mtOpen .ccTitle{padding-right:0;min-height:0}
  html.mt .mtTrack>#ccBox.mtOpen .ccKicker,html.mt .mtTrack>#ccBox.mtOpen .ccNums,html.mt .mtTrack>#ccBox.mtOpen .ccMe{white-space:normal}
  html.mt .mtTrack>#ccBox.mtOpen .ccMe br{display:inline}
  html.mt .mtTrack>#ccBox.mtOpen .ccTick,html.mt .mtTrack>#ccBox.mtOpen .ccDbl{display:block}
  html.mt .mtTrack>#ccBox.mtOpen .ccBtns{flex-wrap:wrap}
  html.mt .mtTrack>#ccBox.mtOpen .ccDbl{order:-1;flex:0 1 auto}

  /* 💬 WhatsApp channel + 📣 Share: [icon | title + a little more] then the buttons */
  html.mt .mtTrack>#communityBox,html.mt .mtTrack>#shareBox{display:grid;grid-template-columns:32px minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;grid-template-areas:"icon text" "btns btns";gap:7px 8px;align-items:start;padding:9px 11px 10px}
  html.mt .mtTrack>#communityBox .cIcon,html.mt .mtTrack>#shareBox .sIcon{grid-area:icon;font-size:28px;line-height:1.1;text-align:center}
  html.mt .mtTrack>#communityBox .cText,html.mt .mtTrack>#shareBox .sText{grid-area:text;min-width:0;min-height:0;max-height:100%;overflow:hidden}
  html.mt .mtTrack>#communityBox .cTitle,html.mt .mtTrack>#shareBox .sTitle{font-size:18px;letter-spacing:1px;line-height:1.08}
  html.mt .mtTrack>#communityBox .cBtns,html.mt .mtTrack>#shareBox .sBtns{grid-area:btns;width:auto;display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}

  /* 💬 WhatsApp channel: title, what you get, 📲 Follow + 🎁 Claim */
  html.mt .mtTrack>#communityBox:not(.mtOpen) .cDesc,html.mt .mtTrack>#communityBox:not(.mtOpen) .cSearch{display:none}
  html.mt .mtTrack>#communityBox:not(.mtOpen).mtNoLink #cDescSearch:not([hidden]){display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.3}
  html.mt .mtTrack>#communityBox:not(.mtOpen) .cPrizes{display:flex;flex-wrap:nowrap;overflow:hidden;margin-top:6px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  html.mt .mtTrack>#communityBox:not(.mtOpen) .cPrizes>*{flex:0 0 auto}
  html.mt .mtTrack>#communityBox.mtOpen .cPrizes{margin-top:8px}
  html.mt .mtTrack>#communityBox .cFollow{flex:1 1 100%;width:auto;min-height:42px;padding:6px 12px;font-size:18px;box-shadow:3px 3px 0 rgba(0,0,0,.45)}
  html.mt .mtTrack>#communityBox .cBtns>#communityClaim{flex:1 1 0;min-width:0;white-space:normal;font-size:12.5px}
  /* claimed already: a small "✅ following" card at the end of the strip */
  html.mt .mtTrack>#communityBox.mtDone{order:9;flex-basis:76%}
  html.mt .mtTrack>#communityBox.mtDone:not(.mtOpen) .cPrizes{display:none}
  html.mt .mtTrack>#communityBox.mtDone:not(.mtOpen) .cTitle::after{content:'✅ You follow it — reward claimed';display:block;margin-top:6px;font-family:'Comic Neue',sans-serif;font-size:13px;font-weight:900;letter-spacing:0;color:#c9ffd9;text-shadow:none}
  html.mt .mtTrack>#communityBox.mtDone:not(.mtOpen) .cBtns>#communityClaim{display:none}
  html.mt .mtTrack>#communityBox.mtDone:not(.mtOpen) .cFollow{flex:1 1 0;min-width:0;font-size:15px;letter-spacing:1px;white-space:normal;line-height:1.05;text-align:center}
  /* (js/channel-pop.js folds a claimed card on bigger screens — its ▾ Hide / 📲 Open buttons, one-line title and folded look rest
     inside the strip, where the ✅ card above does that job; its folded rules are !important, so these are too) */
  html.mt .mtTrack>#communityBox .cFold,html.mt .mtTrack>#communityBox .cOpen,html.mt .mtTrack>#communityBox .cMini{display:none!important}
  html.mt .mtTrack>#communityBox.cCompact .cIcon{animation:cBob 2.4s ease-in-out infinite}
  html.mt .mtTrack>#communityBox.cCompact .cTitle{display:block!important}
  html.mt .mtTrack>#communityBox.cCompact #channelFollow:not([hidden]){display:inline-flex!important}
  html.mt .mtTrack>#communityBox.cCompact.mtOpen .cDesc:not([hidden]),html.mt .mtTrack>#communityBox.cCompact.mtOpen .cSearch:not([hidden]){display:block!important}
  html.mt .mtTrack>#communityBox.cCompact.mtOpen .cPrizes,html.mt .mtTrack>#communityBox.cCompact:not(.mtDone) .cPrizes{display:flex!important}
  html.mt .mtTrack>#communityBox.cCompact.mtOpen #communityClaim,html.mt .mtTrack>#communityBox.cCompact:not(.mtDone) #communityClaim{display:inline-flex!important}
  html.mt .mtTrack>#communityBox.cCompact:not(.mtOpen).mtNoLink #cDescSearch:not([hidden]){display:-webkit-box!important}

  /* 📣 Share & earn: title, a little of the how, your progress, 📣 Share my link (the 📣 megaphone easter egg stays tappable) */
  html.mt .mtTrack>#shareBox .sBtns{flex-wrap:nowrap}
  html.mt .mtTrack>#shareBox .sBtns>#shareOpen{flex:1 1 0;min-width:0;width:auto;white-space:nowrap}
  html.mt .mtTrack>#shareBox:not(.mtOpen) .sDesc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.3}
  html.mt .mtTrack>#shareBox:not(.mtOpen) .sProg{flex-wrap:nowrap;overflow:hidden;margin-top:6px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  html.mt .mtTrack>#shareBox:not(.mtOpen) .sProg>*{flex:0 0 auto}

  /* ⭐ Shout-outs: the first rows, "More" opens the rest (the strip does the folding here, so shoutout.js's own fold button and summary rest) */
  html.mt .mtTrack>#shoutBox{padding:8px 10px 10px}
  html.mt .mtTrack>#shoutBox .shoutHead{margin-bottom:2px;flex-wrap:nowrap}
  html.mt .mtTrack>#shoutBox .shoutTitle{font-size:21px;white-space:nowrap}
  html.mt .mtTrack>#shoutBox .shoutHead>.mtMore{margin-left:auto}
  html.mt .mtTrack>#shoutBox .shoutFold,html.mt .mtTrack>#shoutBox .shoutMini{display:none}
  html.mt .mtTrack>#shoutBox.shoutCompact .shoutRow{display:flex}
  html.mt .mtTrack>#shoutBox.shoutCompact .shoutEmpty{display:block}
  html.mt .mtTrack>#shoutBox:not(.mtOpen) .shoutWhen{display:none}
  html.mt .mtTrack>#shoutBox.mtOpen .shoutWhen{display:inline-block}
  html.mt .mtTrack>#shoutBox:not(.mtOpen) .shoutChips{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  html.mt .mtTrack>#shoutBox:not(.mtOpen)::after{content:'';position:absolute;left:0;right:0;bottom:0;height:26px;pointer-events:none;background:linear-gradient(rgba(36,22,86,0),rgba(36,22,86,.9))}
  html.mt .mtTrack>#shoutBox.mtOpen .shoutHead{flex-wrap:wrap}
}

/* ---------- 📱 landscape phones: even flatter — the logo sits in the top row, wider cards, a one-row tab bar ---------- */
@media (min-width:601px) and (max-height:500px) and (max-width:899px), (min-width:601px) and (max-height:500px) and (max-width:932px) and (pointer:coarse) {
  html.mt{--mtGut:14px;--mtH:160px;--mtLogo:170px;--mtRow:52px}
  html.mt body{padding-top:10px}
  /* one row: [logo] [name 👻 ⚙️] [🏅 🎟️ 🔥 🐾 →] [☰] — the logo (the hero, still the same element) slides up into the room left for it */
  html.mt .topbar{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;min-height:var(--mtRow);margin:0;padding-left:calc(var(--mtLogo) + 10px)}
  html.mt .topbar>#meGrp{flex:0 1 auto;min-width:0;max-width:36vw}
  html.mt #meGrp>#ghostPill,html.mt #meGrp>#acctBtn{padding-left:9px;padding-right:9px}
  html.mt .topbar>.mtChips{flex:1 1 0;min-width:0;margin:0;padding:1px 2px 2px;scroll-padding:0}
  html.mt .topbar>.mtEnd{flex:0 0 auto}
  html.mt #ghostPill .gpS{display:none}
  html.mt header.hero{position:relative;z-index:41;width:var(--mtLogo);min-height:var(--mtRow);margin:calc(-1 * var(--mtRow)) 0 10px;padding:2px 6px;border-width:3px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
  html.mt header.hero h1.title{font-size:24px;letter-spacing:1px;white-space:nowrap;-webkit-text-stroke:1.5px var(--ink);text-shadow:2px 3px 0 var(--ink)}
  html.mt header.hero .sub:first-child{position:static;transform:rotate(-2deg);font-size:12px;letter-spacing:1px;line-height:1.3;padding:0 8px;box-shadow:none}
  html.mt header.hero h1.title~.sub[style*="background"]{position:static;margin:1px 0 0;max-width:100%;font-size:12px;padding:1px 8px;white-space:normal;line-height:1.25;text-align:center}   /* an admin 📢 banner: under the logo, it can wrap */
  html.mt header.hero .egg-dots{bottom:-26px}
  /* wider cards (the next one peeks in), one-line titles, the channel's buttons side by side */
  html.mt .mtTrack>*{flex-basis:58%}
  html.mt .mtTrack>#communityBox.mtDone{flex-basis:44%}
  html.mt .mtTrack>#ccBox .ccTitle{min-height:0}
  html.mt .mtTrack>#ccBox:not(.mtOpen) .ccMe{display:none}
  html.mt .mtTrack>#communityBox .cTitle,html.mt .mtTrack>#shareBox .sTitle{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html.mt .mtTrack>#communityBox.mtOpen .cTitle,html.mt .mtTrack>#shareBox.mtOpen .sTitle{white-space:normal}
  html.mt .mtTrack>#shareBox:not(.mtOpen) .sDesc{-webkit-line-clamp:2}
  html.mt .mtTrack>#communityBox .cBtns{flex-wrap:nowrap}
  html.mt .mtTrack>#communityBox .cFollow{flex:0 1 auto;font-size:15px;letter-spacing:1px;padding:6px 10px}
  html.mt .mtTrack>#communityBox .cBtns>#communityClaim{flex:1 1 0;line-height:1.1}
  /* the tab bar: one row that scrolls sideways (like portrait phones) instead of two rows */
  html.mt #tabbar{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:none;padding:5px 8px;gap:4px;top:4px;margin-bottom:12px;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent)}
  html.mt #tabbar::-webkit-scrollbar{display:none}
  html.mt #tabbar .tab{flex:0 0 auto;scroll-snap-align:center;padding:5px 12px;font-size:17px;letter-spacing:1px;min-height:40px}
  /* 💬 the floating Arcade chat pill: a round 💬 in the bottom-right corner here, with the tab bar leaving room for it (so it never sits on a tab) */
  html.mt #tabbar{margin-right:52px}
  html.mt #fxChatPill{left:calc(100% - 34px);bottom:8px;width:46px;height:42px;padding:0;font-size:0;display:flex;align-items:center;justify-content:center}
  html.mt #fxChatPill::before{content:'💬';font-size:21px;line-height:1}
  html.mt #fxChatPill .n{position:absolute;top:-7px;right:-7px;margin:0;font-size:11px;line-height:17px}
}

@media (prefers-reduced-motion:reduce) {
  html.mt .mtHint,html.mt .mtTrack.mtNudge,html.mt .mtMenu{animation:none}
  html.mt .mtMenuBtn i{transition:none}
}