/* Missions goals list (leaderboard.js _renderMissions, Shaun 2026-10-02: friend invites are goals too, no section
   headers, same feel as the Rewards store). --muck-* tokens only; gold is the one accent. */

#missions-body{row-gap:0!important}
html body #s2-panel #missions-body>.px-head{margin-bottom:0!important}
#missions-body .mg-list{margin:18px 0 0;padding:0;list-style:none;overflow:hidden;border:1px solid var(--muck-line);border-radius:var(--muck-radius-lg);background:var(--muck-surface-1)}
#missions-body .mg-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto 150px;align-items:center;gap:18px;padding:18px 22px;border-top:1px solid var(--muck-line)}
#missions-body .mg-row:first-child{border-top:0}
#missions-body .mg-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:color-mix(in srgb,var(--muck-gold) 11%,var(--muck-surface-2));color:var(--muck-gold)}
#missions-body .mg-icon .material-symbols-rounded{font-size:21px}
#missions-body .mg-main{display:flex;flex-direction:column;gap:3px;min-width:0}
#missions-body .mg-main b{color:var(--muck-text);font:700 15px var(--muck-font);letter-spacing:-.1px}
#missions-body .mg-main span{color:var(--muck-text-2);font-size:13px;line-height:1.5}
#missions-body .mg-reward{display:inline-flex;align-items:center;gap:6px;color:var(--muck-gold);font:800 15px var(--muck-font);font-variant-numeric:tabular-nums;white-space:nowrap}
#missions-body .mg-reward .material-symbols-rounded{font-size:17px}
#missions-body .mg-action{display:flex;justify-content:flex-end}

/* states */
#missions-body .mg-row.is-ready{background:linear-gradient(90deg,color-mix(in srgb,var(--muck-gold) 8%,transparent),transparent 60%);box-shadow:inset 3px 0 0 var(--muck-gold)}
#missions-body .mg-row.is-done .mg-icon{background:color-mix(in srgb,var(--muck-green) 14%,var(--muck-surface-2));color:var(--muck-green)}
#missions-body .mg-row.is-done .mg-main b{color:var(--muck-text-2)}
#missions-body .mg-row.is-done .mg-reward{color:var(--muck-text-3)}

/* actions */
#missions-body .mg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;min-width:120px;padding:0 16px;border:0;border-radius:8px;background:var(--muck-gold-cta);color:var(--muck-gold-ink);font:800 13.5px var(--muck-font);cursor:pointer;transition:filter .15s,transform .15s}
#missions-body .mg-btn .material-symbols-rounded{font-size:17px}
#missions-body .mg-btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
#missions-body .mg-btn--ghost{background:var(--muck-surface-3);color:var(--muck-text);box-shadow:inset 0 0 0 1px var(--muck-line-strong)}
#missions-body .mg-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--muck-gold-muted);color:var(--muck-gold);filter:none}
#missions-body .mg-todo{color:var(--muck-text-3);font:600 13px var(--muck-font)}
#missions-body .mg-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;font:700 12.5px var(--muck-font)}
#missions-body .mg-pill .material-symbols-rounded{font-size:16px}
#missions-body .mg-pill--done{background:color-mix(in srgb,var(--muck-green) 14%,transparent);color:var(--muck-green)}

#missions-body .mg-foot{margin:12px 4px 0;color:var(--muck-text-3);font-size:12.5px;line-height:1.5}
#missions-body .mg-foot code{color:var(--muck-text-2);font:600 12.5px var(--muck-font);word-break:break-all}

@media(max-width:719px){
  #missions-body .mg-row{grid-template-columns:40px minmax(0,1fr) auto;gap:6px 14px;padding:16px}
  #missions-body .mg-icon{width:40px;height:40px}
  #missions-body .mg-action{grid-column:2/-1;justify-content:flex-start;margin-top:6px}
}
/* Desktop: the goals as cards, three to a row, and a short last row shares its width (Shaun, 2026-10-10: "can we make
   these 5 rows a 2,3 or 3/2 2 row set on desktop?"): two leftovers take half each, one takes the row. Icon and text on
   top, the reward and its button along the bottom, level across a row's cards. */
@media(min-width:1024px){
  #missions-body .mg-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;overflow:visible;border:0;border-radius:0;background:none}
  #missions-body .mg-row,#missions-body .mg-row:first-child{grid-column:span 2;grid-template-columns:44px minmax(0,1fr) auto;align-items:start;align-content:space-between;gap:16px;padding:20px 22px;border:1px solid var(--muck-line);border-radius:var(--muck-radius-lg);background:var(--muck-surface-1)}
  #missions-body .mg-row:nth-child(3n+1):nth-last-child(2),#missions-body .mg-row:nth-child(3n+2):last-child{grid-column:span 3}
  #missions-body .mg-row:nth-child(3n+1):last-child{grid-column:1/-1}
  #missions-body .mg-row.is-ready{background:linear-gradient(90deg,color-mix(in srgb,var(--muck-gold) 8%,transparent),transparent 60%),var(--muck-surface-1)}
  #missions-body .mg-main{grid-column:2/-1}
  #missions-body .mg-reward{grid-column:2;grid-row:2;align-self:center}
  #missions-body .mg-action{grid-column:3;grid-row:2;align-self:center}
}

/* Challenges (badges that pay) under the goals list */
#missions-body .mg-claimall{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:18px;padding:16px 22px;border:1px solid color-mix(in srgb,var(--muck-gold) 35%,var(--muck-line));border-radius:var(--muck-radius-lg);background:linear-gradient(100deg,color-mix(in srgb,var(--muck-gold) 10%,var(--muck-surface-1)),var(--muck-surface-1) 65%)}
#missions-body .mg-claimall>.material-symbols-rounded{color:var(--muck-gold);font-size:28px}
#missions-body .mg-claimall div{display:flex;flex-direction:column;gap:2px}
#missions-body .mg-claimall b{color:var(--muck-text);font-size:15px}
#missions-body .mg-claimall span{color:var(--muck-text-2);font-size:13px}
#missions-body .mg-badges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
#missions-body .mg-badge{display:flex;flex-direction:column;gap:6px;min-height:190px;padding:18px;border:1px solid var(--muck-line);border-radius:var(--muck-radius-lg);background:var(--muck-surface-1)}
#missions-body .mg-badge-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
#missions-body .mg-badge-art{display:grid;place-items:center;height:112px;margin:2px 0 10px}
#missions-body .mg-badge-art img{display:block;width:112px;height:112px;object-fit:contain;transition:transform .2s ease}
#missions-body .mg-badge:hover .mg-badge-art img{transform:scale(1.04) rotate(-2deg)}
#missions-body .mg-secret{display:grid;place-items:center;width:96px;height:96px;border-radius:50%;border:1px dashed var(--muck-line);background:var(--muck-surface-2);color:var(--muck-text-3);font:800 40px var(--muck-font)}
#missions-body .mg-tier{color:var(--muck-text-3);font:700 10px var(--muck-font);letter-spacing:.12em;text-transform:uppercase}
#missions-body .mg-badge-top .mg-reward{margin-left:auto;font-size:14px}
#missions-body .mg-badge>b{color:var(--muck-text);font:700 15px var(--muck-font)}
#missions-body .mg-desc{color:var(--muck-text-2);font-size:13px;line-height:1.5}
#missions-body .mg-badge-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:10px}
#missions-body .mg-badge-foot .mg-btn{min-width:0;width:100%;height:36px}
#missions-body .mg-prog{flex:1;height:6px;border-radius:999px;background:var(--muck-surface-3);overflow:hidden}
#missions-body .mg-prog i{display:block;height:100%;border-radius:inherit;background:var(--muck-gold)}
#missions-body .mg-badge-foot .mg-todo{font-size:12px;white-space:nowrap}
#missions-body .mg-badge.is-locked .mg-badge-art img{filter:grayscale(.85);opacity:.6}
#missions-body .mg-badge.is-ready{border-color:color-mix(in srgb,var(--muck-gold) 45%,var(--muck-line));background:linear-gradient(160deg,color-mix(in srgb,var(--muck-gold) 9%,var(--muck-surface-1)),var(--muck-surface-1) 60%)}
#missions-body .mg-badge.is-claimed .mg-reward{color:var(--muck-text-3)}
@media(max-width:1100px){#missions-body .mg-badges{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:719px){
  #missions-body .mg-badges{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #missions-body .mg-badge{min-width:0}
  #missions-body .mg-badge-foot .mg-todo{white-space:normal}
  #missions-body .mg-badge-top .mg-reward{font-size:13px}
  #missions-body .mg-badge{padding:14px;min-height:0}
  #missions-body .mg-badge-art,#missions-body .mg-badge-art img{height:100px}
  #missions-body .mg-badge-art img{width:100px}
  #missions-body .mg-claimall{grid-template-columns:1fr;text-align:left}
}

/* Friend invites card (under the goals) */
#missions-body .mg-invite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:36px;margin-top:18px;padding:28px 30px;border:1px solid var(--muck-line);border-radius:var(--muck-radius-lg);background:radial-gradient(110% 140% at 100% 0%,color-mix(in srgb,var(--muck-gold) 7%,transparent),transparent 55%),var(--muck-surface-1)}
#missions-body .mg-invite h3{margin:0 0 8px;color:var(--muck-text);font:800 24px/1.15 var(--muck-font);letter-spacing:-.5px}
#missions-body .mg-invite p{margin:0 0 18px;max-width:520px;color:var(--muck-text-2);font-size:13.5px;line-height:1.6}
#missions-body .mg-linkrow{display:flex;gap:10px}
#missions-body .mg-linkrow input{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-sm);background:var(--muck-bg);color:var(--muck-text);font:500 13px var(--muck-font)}
#missions-body .mg-linkrow .mg-btn{height:40px}
#missions-body .mg-invite small{display:block;margin-top:10px;color:var(--muck-text-3);font-size:12px}
#missions-body .mg-track{position:relative;display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
#missions-body .mg-track::before{content:"";position:absolute;top:22px;left:16.66%;right:16.66%;height:2px;background:var(--muck-line-strong)}
#missions-body .mg-track li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
#missions-body .mg-node{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:2px solid color-mix(in srgb,var(--muck-gold) 55%,var(--muck-line));background:var(--muck-surface-2);color:var(--muck-gold)}
#missions-body .mg-node .material-symbols-rounded{font-size:20px}
#missions-body .mg-track li.is-done .mg-node{border-color:var(--muck-green);background:color-mix(in srgb,var(--muck-green) 16%,var(--muck-surface-2));color:var(--muck-green)}
#missions-body .mg-track-label{color:var(--muck-text-2);font-size:12.5px}
#missions-body .mg-track .mg-reward{font-size:14px}
@media(max-width:900px){#missions-body .mg-invite{grid-template-columns:1fr;gap:26px;padding:22px 20px}}
@media(max-width:719px){#missions-body .mg-linkrow{flex-direction:column}}

/* Missions are opt-in (includes/MissionSubs.php, leaderboard.js _renderMissions): the subscribe tout under the hero, the
   goals and badges dimmed as a preview until then, and a quiet unsubscribe line at the bottom once subscribed. */
#missions-body .mg-sub{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;margin-top:18px;padding:20px 24px;border:1px solid color-mix(in srgb,var(--muck-gold) 40%,var(--muck-line));border-radius:var(--muck-radius-lg);background:linear-gradient(100deg,color-mix(in srgb,var(--muck-gold) 12%,var(--muck-surface-1)),var(--muck-surface-1) 70%)}
#missions-body .mg-sub-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:color-mix(in srgb,var(--muck-gold) 16%,var(--muck-surface-2));color:var(--muck-gold);font-size:22px}
#missions-body .mg-sub-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
#missions-body .mg-sub-copy b{color:var(--muck-text);font:800 16px var(--muck-font);letter-spacing:-.2px}
#missions-body .mg-sub-copy span{color:var(--muck-text-2);font-size:13.5px;line-height:1.55}
#missions-body .mg-preview{opacity:.5;pointer-events:none;filter:saturate(.6)}
@media (max-width:640px){
  #missions-body .mg-sub{grid-template-columns:auto minmax(0,1fr);padding:18px}
  #missions-body .mg-sub .mk-btn{grid-column:1 / -1;width:100%}
}

/* Missions, locked: the invite is the whole page (leaderboard.js _renderInviteUnlock; Shaun, 2026-10-26: "1 main thing.
   invite a friend to unlock the missions ... make it EASY for them to invite and track"). Larry at the rope over the
   headline, then the link and the ways to send it beside the three-friend track, then who's joined. Tokens and the scale. */
#missions-body .iu{display:flex;flex-direction:column;gap:var(--muck-space-4)}
#missions-body .iu--inline{margin-top:var(--muck-space-6)}   /* unlocked: under the goals, its own heading */
#missions-body .iu-inline-title{margin:0;color:var(--muck-text);font:800 24px/1.15 var(--muck-font);letter-spacing:-.5px}
#missions-body .iu-hero{position:relative;overflow:hidden;min-height:400px;display:flex;align-items:center;border:1px solid var(--muck-line);border-top:0;border-radius:0 0 var(--muck-radius-card) var(--muck-radius-card);background:var(--muck-surface-1)}   /* joined to the navigation, like Tournaments' hero */
#missions-body .iu-art{position:absolute;top:0;right:0;bottom:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 22%);mask-image:linear-gradient(90deg,transparent,#000 22%)}   /* the whole picture at the hero's height, on the right: Larry uncropped (Shaun, 2026-10-26: "hes all cut off"); its dark left wall sits behind the words */
#missions-body .iu-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--muck-bg) 18%,color-mix(in srgb,var(--muck-bg) 60%,transparent) 48%,transparent 70%)}
#missions-body .iu-copy{position:relative;z-index:1;width:52%;max-width:620px;padding:var(--muck-space-7) var(--muck-space-6)}
#missions-body .iu-title{margin:0 0 var(--muck-space-3);color:var(--muck-text);font:800 clamp(32px,4vw,52px)/1.04 var(--muck-font);letter-spacing:-1px}
#missions-body .iu-title span{color:var(--muck-gold)}
#missions-body .iu-sub{margin:0;color:var(--muck-text-2);font-size:16px;line-height:1.55}
#missions-body .iu-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--muck-space-4)}
#missions-body .iu-card{padding:var(--muck-space-5);border:1px solid var(--muck-line);border-radius:var(--muck-radius-card);background:var(--muck-surface-1)}
#missions-body .iu-card h3{margin:0 0 var(--muck-space-4);color:var(--muck-text);font:800 18px var(--muck-font)}
#missions-body .iu-linkrow{display:flex;gap:var(--muck-space-2)}
#missions-body .iu-linkrow input{flex:1;min-width:0;height:44px;padding:0 var(--muck-space-3);border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-field);background:var(--muck-surface-3);color:var(--muck-text);font:600 14px var(--muck-font-mono)}
#missions-body .iu-linkrow input:focus{border-color:var(--muck-gold);outline:none}
#missions-body .iu-linkrow .mk-btn{flex:none;gap:var(--muck-space-2)}
#missions-body .iu-ways{display:flex;flex-wrap:wrap;gap:var(--muck-space-2);margin-top:var(--muck-space-3)}
#missions-body .iu-ways .mk-btn{gap:var(--muck-space-2)}
#missions-body .iu-ways .material-symbols-rounded{font-size:18px}
#missions-body .iu-x{font-weight:800;line-height:1}
#missions-body .iu-fine{margin:var(--muck-space-4) 0 0;color:var(--muck-text-3);font-size:13px;line-height:1.5}
/* Signed out: a picture of the link with "yourname" where their name goes, above Sign in (Shaun, 2026-10-30: "have a visual
   link preview with yourname in the url so its clear what we mean"). Looks like the signed-in link field, isn't one. */
#missions-body .iu-fine--lead{margin:0 0 var(--muck-space-3)}
/* One line of text, not a flex row: as flex items the host and "yourname" couldn't be selected together (Shaun, 2026-10-31:
   "let them select this link if they want to. currently the yourname is preventing this") */
#missions-body .iu-preview{display:block;min-height:44px;margin:0 0 var(--muck-space-4);padding:11px var(--muck-space-3);box-sizing:border-box;
  border:1px dashed var(--muck-line-strong);border-radius:var(--muck-radius-field);background:var(--muck-surface-3);color:var(--muck-text-2);
  font:600 14px/20px var(--muck-font-mono);overflow-wrap:anywhere;cursor:text}
#missions-body .iu-preview b{margin-left:1px;padding:1px 6px;border-radius:4px;color:var(--muck-gold);background:color-mix(in srgb,var(--muck-gold) 14%,transparent);font-weight:700}
#missions-body .iu-gate{color:var(--muck-text-2)}#missions-body .iu-share .iu-ways + .iu-fine.iu-gate:first-of-type{margin:var(--muck-space-4) 0 0}#missions-body .iu-gate b{color:var(--muck-gold)}   /* invites left during the invite-only stretch (includes/InviteGate.php) */
#missions-body .iu-share .iu-fine:first-of-type:not(:last-child){margin:0 0 var(--muck-space-4)}
/* Invite someone on X (assets/leaderboard.js _wireXInvite): two handles and a button on one row, the link below like Your invite link */
#missions-body .iu-xinv-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:var(--muck-space-3);align-items:end}
#missions-body .iu-xinv-field{display:grid;gap:var(--muck-space-2);min-width:0;font-size:12px;font-weight:700;color:var(--muck-text-2)}
#missions-body .iu-xinv-field[hidden]{display:none}   /* Your X, for an account we know the X handle of (leaderboard.js) */
#missions-body .iu-xinv-at{display:flex;align-items:center;height:44px;border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-field);background:var(--muck-surface-3)}
#missions-body .iu-xinv-at:focus-within{border-color:var(--muck-gold)}
#missions-body .iu-xinv-at>span{padding:0 0 0 var(--muck-space-3);color:var(--muck-text-3);font:600 14px var(--muck-font-mono)}
#missions-body .iu-xinv-at input{flex:1;min-width:0;height:100%;padding:0 var(--muck-space-3) 0 2px;border:0;background:none;color:var(--muck-text);font:600 14px var(--muck-font-mono);outline:none}
#missions-body .iu-xinv-form .mk-btn{min-height:44px}
#missions-body .iu-xinv-error{margin:var(--muck-space-3) 0 0;color:var(--muck-red);font-size:13px;text-wrap:balance}
#missions-body .iu-xinv-out{margin-top:var(--muck-space-4)}
#missions-body .iu-xinv-error[hidden],#missions-body .iu-xinv-out[hidden]{display:none}
/* Invite a Friend v2 (assets/leaderboard.js _inviteBlockV2): invites left beside the title, then who you've invited and whether
   they joined */
#missions-body .iu-v2-head{display:flex;align-items:center;justify-content:space-between;gap:var(--muck-space-3);margin-bottom:var(--muck-space-4)}
#missions-body .iu-v2-head h3{margin:0}
#missions-body .iu-v2-left{padding:4px 12px;border:1px solid var(--muck-gold);border-radius:var(--muck-radius-pill);color:var(--muck-gold);font-size:13px;font-weight:800;white-space:nowrap}
#missions-body .iu-v2-left:empty{display:none}
#missions-body .iu-xinv-error.is-note{color:var(--muck-text-2)}
#missions-body .iu-xinv-error.is-warn{color:var(--muck-gold)}   /* "one more shot", "out of tries": a heads-up, not a mistake (2026-11-04) */
#missions-body .iu-v2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--muck-space-6);align-items:start}
#missions-body .iu-v2-grid .iu-xinv-form{grid-template-columns:1fr}   /* the fields stacked in their column */
#missions-body .iu-v2-grid .iu-xinv-form .mk-btn{justify-self:start}
#missions-body .iu-v2-grid .iu-linkrow{flex-wrap:wrap}
#missions-body .iu-v2-grid .iu-xpost{margin-top:0}
#missions-body .iu-v2-left.is-out{border-color:var(--muck-line-strong);color:var(--muck-text-3)}
#missions-body .iu-v2-rows{list-style:none;margin:0;padding:0}
#missions-body .iu-v2-rows li{display:grid;grid-template-columns:40px minmax(0,1fr) auto auto;grid-template-rows:auto auto;column-gap:var(--muck-space-3);align-items:center;padding:var(--muck-space-3) 0;border-top:1px solid var(--muck-line)}
#missions-body .iu-v2-rows li:last-child{border-bottom:1px solid var(--muck-line)}
#missions-body .iu-v2-pfp{grid-row:1/3;position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--muck-surface-3);color:var(--muck-text-2);font-weight:800}
#missions-body .iu-v2-pfp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#missions-body .iu-v2-rows b{grid-column:2;color:var(--muck-text);font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#missions-body .iu-v2-rows small{grid-column:2;color:var(--muck-text-3);font-size:12px}
#missions-body .iu-v2-status{grid-column:3;grid-row:1/3;display:inline-flex;align-items:center;gap:var(--muck-space-1);color:var(--muck-text-3);font-size:13px;font-weight:700}
#missions-body .iu-v2-status.is-joined{grid-column:3/5;justify-self:end;color:var(--muck-gold)}   /* no Post again beside it: to the row's right edge */
#missions-body .iu-v2-status .material-symbols-rounded{font-size:18px}
#missions-body .iu-v2-again{grid-column:4;grid-row:1/3;color:var(--muck-gold-muted);font-size:13px}
#missions-body .iu-v2-sent .iu-empty{margin:0}

/* the post as it'll look on X (assets/leaderboard.js _xPostPreview): an example until they make one */
#missions-body .iu-xpost{margin:var(--muck-space-5) 0 0;max-width:560px}
#missions-body .iu-xpost-label{margin:0 0 var(--muck-space-2);color:var(--muck-text-3);font-size:12px;font-weight:700}
#missions-body .iu-xpost-body{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--muck-space-3);padding:var(--muck-space-4);border:1px solid var(--muck-line);border-radius:var(--muck-radius-card);background:#000}
#missions-body .iu-xpost-pfp{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--muck-surface-3);color:var(--muck-text-2);font-weight:700}
#missions-body .iu-xpost-pfp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#missions-body .iu-xpost-who{display:flex;gap:var(--muck-space-1);align-items:baseline;font-size:14px;line-height:20px}
#missions-body .iu-xpost-who b{color:var(--muck-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#missions-body .iu-xpost-who span{color:var(--muck-text-3)}
#missions-body .iu-xpost-text{margin:var(--muck-space-1) 0 var(--muck-space-3);color:var(--muck-text);font-size:14px;line-height:1.45;overflow-wrap:anywhere}
#missions-body .iu-xpost-at{color:#1d9bf0}   /* X's link blue, as a mention looks there */
/* the picture and @handle on one line, the words and the card full width under them, so the card is bigger (Shaun, 2026-11-03: "make the
   pfp and the @ the same line then the tweet and image below so it can be wider") */
#missions-body .iu-xpost-body{align-items:center;row-gap:0}
#missions-body .iu-xpost-main{display:contents}
#missions-body .iu-xpost-text,#missions-body .iu-xpost-card{grid-column:1 / -1}
#missions-body .iu-xpost-text{margin-top:var(--muck-space-3)}
#missions-body .iu-xpost-card{position:relative;overflow:hidden;border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-card)}
#missions-body .iu-xpost-card img{display:block;width:100%;height:auto;background:var(--muck-surface-3)}
#missions-body .iu-xpost-card span{position:absolute;left:6px;bottom:6px;padding:1px 4px;border-radius:4px;background:rgba(0,0,0,.77);color:#fff;font-size:11px;line-height:14px}   /* X's site label, its size and corner */
/* the card's look, 1/2/3 under the post (Shaun, 2026-11-03: "let invite a friend have a 1/2/3 for the card so they can choose") */
#missions-body .iu-xpost-looks{display:flex;align-items:center;gap:var(--muck-space-2);margin-top:var(--muck-space-3)}
#missions-body .iu-xpost-looks > span{margin-right:var(--muck-space-1);color:var(--muck-text-3);font-size:13px;font-weight:600}
#missions-body .iu-xpost-look{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-field);background:var(--muck-surface-3);color:var(--muck-text-2);font:700 15px/1 var(--muck-font);font-variant-numeric:tabular-nums;cursor:pointer}
#missions-body .iu-xpost-look:hover{color:var(--muck-text)}
#missions-body .iu-xpost-look[aria-pressed="true"]{border-color:var(--muck-gold);background:color-mix(in srgb,var(--muck-gold) 14%,var(--muck-surface-3));color:var(--muck-gold)}
#missions-body .iu-xpost-look:focus-visible{outline:2px solid var(--muck-gold);outline-offset:2px}
#missions-body .iu-track{margin:0;padding:0;list-style:none}
#missions-body .iu-track li{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:var(--muck-space-3);padding:var(--muck-space-2) 0}
#missions-body .iu-track li + li::before{content:'';position:absolute;left:19px;top:-14px;height:20px;width:2px;background:var(--muck-line-strong)}
#missions-body .iu-node{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--muck-line-strong);background:var(--muck-surface-2);color:var(--muck-text-2)}
#missions-body .iu-node .material-symbols-rounded{font-size:20px}
#missions-body .iu-track li.is-key .iu-node{border-color:var(--muck-gold);color:var(--muck-gold)}
#missions-body .iu-track li.is-done .iu-node{border-color:var(--muck-gold);background:var(--muck-gold);color:var(--muck-gold-ink)}
#missions-body .iu-step{display:flex;flex-direction:column;gap:2px;min-width:0}
#missions-body .iu-step b{color:var(--muck-text);font-size:15px}
#missions-body .iu-step small{color:var(--muck-gold);font-size:12px;font-weight:700}
#missions-body .iu-bucks{display:inline-flex;align-items:center;gap:var(--muck-space-1);color:var(--muck-gold);font:800 15px var(--muck-font);font-variant-numeric:tabular-nums}
#missions-body .iu-bucks .material-symbols-rounded{font-size:17px}
#missions-body .iu-friends-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--muck-space-3)}
#missions-body .iu-friends-head h3{margin:0}
#missions-body .iu-friends-head span{color:var(--muck-text-3);font-size:13px;font-weight:700}
#missions-body .iu-list{margin:0;padding:0;list-style:none}
#missions-body .iu-list li{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;align-items:center;gap:var(--muck-space-3);padding:var(--muck-space-2) 0}
#missions-body .iu-list li + li{border-top:1px solid var(--muck-line)}
#missions-body .iu-initial{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--muck-surface-3);color:var(--muck-text);font-weight:800;font-size:14px}
#missions-body .iu-list b{overflow:hidden;color:var(--muck-text);font-size:14px;white-space:nowrap;text-overflow:ellipsis}
#missions-body .iu-list small{color:var(--muck-text-3);font-size:12px}
#missions-body .iu-empty{margin:0;color:var(--muck-text-3);font-size:14px}
@media (max-width:719px){
  #missions-body .iu-hero{min-height:0;flex-direction:column;align-items:stretch}
  #missions-body .iu-art{position:static;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;object-position:right center;-webkit-mask-image:none;mask-image:none}   /* phones: Larry and the empty chair, whole at any width: the picture's right 55% (a fixed 210px cut his face on a zoomed iPhone; Shaun, 2026-11-02) */
  #missions-body .iu-hero::after{display:none}
  #missions-body .iu-copy{width:auto;max-width:none;padding:var(--muck-space-5) var(--muck-space-4)}
  #missions-body .iu-grid{grid-template-columns:1fr}
  #missions-body .iu-card{padding:var(--muck-space-4)}
  #missions-body .iu-linkrow{flex-direction:column}
  #missions-body .iu-linkrow .mk-btn{width:100%;justify-content:center}
  #missions-body .iu-list li{grid-template-columns:32px minmax(0,1fr) auto}
  #missions-body .iu-list li small:first-of-type{display:none}
}

/* Match the existing Cash Games / Tournaments section hero dimensions. */
@media (min-width:720px){
  #missions-body .iu-hero{min-height:461px}
  #missions-body .iu-copy{box-sizing:border-box;width:52%;max-width:760px;padding:26px 40px}
  #missions-body .iu-title{font-size:63.36px;font-weight:750;line-height:.99;letter-spacing:-2px}
  #missions-body .iu-sub{font-size:14px;line-height:1.6;max-width:600px}
}
@media (min-width:720px) and (max-width:1100px){
  #missions-body .iu-title{font-size:48px}
  #missions-body .iu-copy{width:56%;padding:26px 32px}
}
@media (max-width:700px){
  #missions-body .iu-xinv-form{grid-template-columns:1fr}
  #missions-body .iu-xinv-form .mk-btn{width:100%}
}
@media (max-width:480px){
  #missions-body .iu-v2-rows li{grid-template-columns:40px minmax(0,1fr) auto}
  #missions-body .iu-v2-again{grid-column:3;grid-row:2;justify-self:end}
  #missions-body .iu-v2-status{grid-row:1}
}
@media (max-width:900px){
  #missions-body .iu-v2-grid{grid-template-columns:1fr;gap:var(--muck-space-5)}
}
@media (max-width:700px){
  #missions-body .iu-v2-grid .iu-xinv-form .mk-btn{justify-self:stretch}
}
/* Connect your X (Invite a Friend v2): the button and why, under the fields; a connected handle reads as fixed */
#missions-body .iu-xconnect{display:flex;flex-wrap:wrap;align-items:center;gap:var(--muck-space-2) var(--muck-space-3);margin-top:var(--muck-space-3);font-size:13px;color:var(--muck-text-2)}
#missions-body .iu-xconnect[hidden]{display:none}
#missions-body .iu-xinv-at input:read-only{color:var(--muck-text-2);cursor:default}
/* under Make their invite: the link is theirs alone (Shaun, 2026-11-01) */
#missions-body .iu-xinv-sub{margin:var(--muck-space-3) 0 0}
/* Wrong handle? (Your invites): a quiet link in the row's small line; the row turns into the field to fix it, once */
#missions-body .iu-v2-fix{padding:0;border:0;background:none;color:var(--muck-gold-muted);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#missions-body .iu-v2-fix:hover{color:var(--muck-gold)}
#missions-body .iu-v2-rows li.is-fixing{display:block}
#missions-body .iu-v2-fixform{display:flex;flex-wrap:wrap;align-items:center;gap:var(--muck-space-2)}
#missions-body .iu-v2-fixform .iu-xinv-at{flex:1 1 200px;min-height:40px}
#missions-body .iu-v2-fixform small{flex-basis:100%;color:var(--muck-text-3);font-size:12px}
#missions-body .iu-v2-fixform small.is-bad{color:var(--muck-red)}
/* Your post: their own words for X, with what's left of X's 280 (the link takes 24) */
#missions-body .iu-xinv-msg{display:flex;flex-direction:column;gap:var(--muck-space-2);margin-top:var(--muck-space-4)}
#missions-body .iu-xinv-msg>span{display:flex;justify-content:space-between;align-items:baseline}
#missions-body .iu-xinv-count{color:var(--muck-text-3);font-size:12px;font-weight:600}
#missions-body .iu-xinv-count.is-over{color:var(--muck-red)}
#missions-body .iu-xinv-msg textarea{width:100%;box-sizing:border-box;min-height:104px;padding:var(--muck-space-3);border:1px solid var(--muck-line-strong);border-radius:var(--muck-radius-field);background:var(--muck-surface-3);color:var(--muck-text);font:14px/1.5 var(--muck-font);resize:vertical;outline:none}
#missions-body .iu-xinv-msg textarea:focus{border-color:var(--muck-gold)}
/* step two (an invite made): step one's fields, notes and Connect go; who it's for heads the link */
#missions-body .iu-xinv-how{color:var(--muck-text-2);font-size:14px}   /* what to do, above the fields (Shaun, 2026-11-03: a friend didn't see that the card comes from their handle) */
#missions-body .iu-xinv-for{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--muck-space-2) var(--muck-space-3);margin:0 0 var(--muck-space-3);color:var(--muck-text-2);font-size:14px}
#missions-body .iu-xinv-for b{color:var(--muck-text);font-size:16px}
#missions-body .iu-xinv-another{margin-left:auto;padding:0;border:0;background:none;color:var(--muck-gold-muted);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
#missions-body .iu-xinv-another[hidden]{display:none}
#missions-body .iu-xinv-another:hover{color:var(--muck-gold)}
#missions-body .iu-v2-side.is-made .iu-xinv-out{margin-top:0}
/* Connect your X at the card's foot (Shaun, 2026-11-02: "move connect x to bottom"); the link under the post, the way to send it yourself */
#missions-body .iu-xinv>.iu-xconnect{margin-top:var(--muck-space-5);padding-top:var(--muck-space-4);border-top:1px solid var(--muck-line)}
#missions-body .iu-xinv-linklabel{margin:var(--muck-space-5) 0 var(--muck-space-2);color:var(--muck-text-2);font-size:13px;font-weight:700}
/* phones: two names, Make their invite, then the post and one big Post it, each full width (Shaun, 2026-11-02: "make sure the ui/ux is optimized
   for that for mobile so its super clear and easy") */
@media (max-width:719px){
  #missions-body .iu-v2-head{flex-wrap:wrap;row-gap:var(--muck-space-2)}
  #missions-body .iu-v2-head h3{font-size:20px;white-space:nowrap}
  #missions-body .iu-v2-grid .iu-xinv-form .mk-btn,#missions-body .iu-ways .mk-btn{width:100%;height:48px;justify-content:center}
  #missions-body .iu-ways{flex-direction:column}
  #missions-body .iu-v2-grid .iu-linkrow input{display:none}
  #missions-body .iu-xinv>.iu-xconnect{flex-direction:column;align-items:stretch;text-align:center}
  #missions-body .iu-xinv>.iu-xconnect .mk-btn{height:44px;justify-content:center}
}

/* Invite a Friend as a wizard (leaderboard.js _inviteBlockV2; Shaun, 2026-11-04: "i think we need to make it a wizard for them"):
   the three steps up top, one step's controls on the left, the post on the right; step 1 checks who the handle is on X first */
#missions-body .iu-wiz-steps{display:flex;gap:var(--muck-space-2);margin:0 0 var(--muck-space-5);padding:0;list-style:none;counter-reset:none}
#missions-body .iu-wiz-steps li{display:flex;align-items:center;gap:var(--muck-space-2);flex:1 1 0;min-width:0;padding:0 0 var(--muck-space-3);border-bottom:2px solid var(--muck-line-strong);color:var(--muck-text-3);font-size:13px;font-weight:700;white-space:nowrap}
#missions-body .iu-wiz-steps li>span{display:grid;place-items:center;flex:none;width:24px;height:24px;border:1px solid var(--muck-line-strong);border-radius:50%;font-size:12px;font-variant-numeric:tabular-nums}
#missions-body .iu-wiz-steps b{font:inherit}
#missions-body .iu-wiz-short{display:none}
#missions-body .iu-wiz-steps li.is-on{border-color:var(--muck-gold);color:var(--muck-text)}
#missions-body .iu-wiz-steps li.is-on>span{border-color:var(--muck-gold);background:var(--muck-gold);color:var(--muck-gold-ink)}
#missions-body .iu-wiz-steps li.is-done{border-color:var(--muck-gold-muted);color:var(--muck-text-2)}
#missions-body .iu-wiz-steps li.is-done>span{border-color:var(--muck-gold-muted);color:var(--muck-gold-muted)}
#missions-body .iu-wiz[hidden],#missions-body .iu-wiz-found[hidden]{display:none}
#missions-body .iu-wiz-found{margin-top:var(--muck-space-4);padding:var(--muck-space-4);border:1px solid var(--muck-gold-muted);border-radius:var(--muck-radius-card);background:var(--muck-surface-2)}
#missions-body .iu-wiz-id{display:flex;align-items:center;gap:var(--muck-space-3);min-width:0}
#missions-body .iu-wiz-pfp{position:relative;display:grid;place-items:center;flex:none;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--muck-surface-3);color:var(--muck-text-2);font-size:24px;font-weight:800}
#missions-body .iu-wiz-pfp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#missions-body .iu-wiz-who{display:flex;flex-direction:column;gap:2px;min-width:0}
#missions-body .iu-wiz-who b{color:var(--muck-text);font:700 20px/1.25 var(--muck-font-mono);overflow-wrap:anywhere}
#missions-body .iu-wiz-who span{color:var(--muck-text-2);font-size:14px;overflow-wrap:anywhere}
#missions-body .iu-wiz-q{margin:var(--muck-space-4) 0 var(--muck-space-3);color:var(--muck-text);font-size:15px;font-weight:700;text-wrap:balance}
#missions-body .iu-wiz-acts{display:flex;flex-wrap:wrap;gap:var(--muck-space-2)}
#missions-body .iu-wiz-acts .mk-btn,#missions-body .iu-wiz .iu-ways .mk-btn{min-height:48px;margin:0;line-height:1}
#missions-body .iu-wiz-looks{margin-top:0}
#missions-body .iu-wiz .iu-xinv-another{display:block;margin:var(--muck-space-5) 0 0}
#missions-body .iu-wiz .iu-xinv-another[hidden]{display:none}
@media (max-width:900px){
  #missions-body .iu-v2-grid[data-step="3"] .iu-xpost{order:-1}   /* a phone: the post first, then Post it under it */
  #missions-body .iu-v2-grid[data-step="1"] .iu-xpost{display:none}   /* and step 1 is just finding them */
}
@media (max-width:719px){
  #missions-body .iu-wiz-long{display:none}   /* a phone: Friend, Card, Send, each on one line */
  #missions-body .iu-wiz-short{display:inline}
  #missions-body .iu-wiz-acts{flex-direction:column}
  #missions-body .iu-wiz-acts .mk-btn{width:100%;justify-content:center}
}