@@ -181,7 +181,8 @@ it("previews then links a code, naming both accounts", async () => {
   vi.mocked(previewMinecraftLink).mockResolvedValue({ player_uuid: "u", minecraft_name: "SteveMC", expires_at: "z" });
   vi.mocked(linkMinecraft).mockResolvedValue(null);
   render(<AccountPanel signin={null} />);
-  fireEvent.change(await screen.findByLabelText("Link code"), { target: { value: "abcd1234ef56" } });
+  fireEvent.click(await screen.findByRole("button", { name: "Link with a code from in game" }));
+  fireEvent.change(screen.getByLabelText("Link code"), { target: { value: "abcd1234ef56" } });
   fireEvent.click(screen.getByRole("button", { name: "Continue" }));
   expect((await screen.findByText(/Link Minecraft account/)).textContent).toBe(
     "Link Minecraft account SteveMC to Discord @steve_tfmc?"
@@ -196,7 +197,8 @@ it("asks for a fresh Discord check when the guild check is stale", async () => {
   vi.mocked(previewMinecraftLink).mockResolvedValue({ player_uuid: "u", minecraft_name: "SteveMC", expires_at: "z" });
   vi.mocked(linkMinecraft).mockRejectedValue(new AccountApiError("guild_check_stale", 403));
   render(<AccountPanel signin={null} />);
-  fireEvent.change(await screen.findByLabelText("Link code"), { target: { value: "ABCD-1234-EF56" } });
+  fireEvent.click(await screen.findByRole("button", { name: "Link with a code from in game" }));
+  fireEvent.change(screen.getByLabelText("Link code"), { target: { value: "ABCD-1234-EF56" } });
   fireEvent.click(screen.getByRole("button", { name: "Continue" }));
   fireEvent.click(await screen.findByRole("button", { name: "Link account" }));
   expect((await screen.findByRole("link", { name: "Confirm with Discord" })).getAttribute("href")).toContain(
@@ -208,16 +210,19 @@ it("shows code errors from the server", async () => {
   vi.mocked(getAccount).mockResolvedValue(account());
   vi.mocked(previewMinecraftLink).mockRejectedValue(new AccountApiError("Link code has expired", 400));
   render(<AccountPanel signin={null} />);
-  fireEvent.change(await screen.findByLabelText("Link code"), { target: { value: "ABCD-1234-EF56" } });
+  fireEvent.click(await screen.findByRole("button", { name: "Link with a code from in game" }));
+  fireEvent.change(screen.getByLabelText("Link code"), { target: { value: "ABCD-1234-EF56" } });
   fireEvent.click(screen.getByRole("button", { name: "Continue" }));
   expect((await screen.findByRole("alert")).textContent).toBe("Link code has expired");
 });
 
 it("asks non-members to join the Discord first", async () => {
   vi.mocked(getAccount).mockResolvedValue(account({ guild: { member: false, checked_at: null, fresh: false } }));
   render(<AccountPanel signin={null} />);
-  expect(await screen.findByRole("link", { name: "Join it" })).toBeTruthy();
-  expect(screen.queryByLabelText("Link code")).toBeNull();
+  const row = await screen.findByLabelText("Minecraft account");
+  expect(within(row).getByRole("link", { name: "TFMC Discord" }).getAttribute("href")).toBe("https://discord.gg/tfmc");
+  expect(within(row).getByRole("link", { name: "I’ve joined, check again" })).toBeTruthy();
+  expect(within(row).queryByRole("button", { name: /code/ })).toBeNull();
 });
 
 it("offers Patreon when enabled and unlinked", async () => {
@@ -319,9 +324,11 @@ it("offers Microsoft first, with the in-game code as a fallback", async () => {
   const assign = vi.fn();
   vi.stubGlobal("location", { ...window.location, assign });
   render(<AccountPanel signin={null} />);
-  const section = await screen.findByRole("region", { name: "Link your Minecraft account" });
-  expect(within(section).getByText("Or use a code from in game")).toBeTruthy();
-  fireEvent.click(within(section).getByRole("button", { name: "Sign in with Microsoft" }));
+  const row = await screen.findByLabelText("Minecraft account");
+  expect(within(row).queryByLabelText("Link code")).toBeNull();
+  fireEvent.click(within(row).getByRole("button", { name: "Use a code" }));
+  expect(within(row).getByLabelText("Link code")).toBeTruthy();
+  fireEvent.click(within(row).getByRole("button", { name: "Sign in with Microsoft" }));
   await vi.waitFor(() => expect(assign).toHaveBeenCalledWith(
     "https://login.microsoftonline.com/consumers/oauth2/v2.0/authorize?x=1"
   ));
@@ -331,7 +338,8 @@ it("offers Microsoft first, with the in-game code as a fallback", async () => {
 it("keeps only the code form when Microsoft is not set up", async () => {
   vi.mocked(getAccount).mockResolvedValue(account({ microsoft_link: false }));
   render(<AccountPanel signin={null} />);
-  expect(await screen.findByLabelText("Link code")).toBeTruthy();
+  fireEvent.click(await screen.findByRole("button", { name: "Link with a code from in game" }));
+  expect(screen.getByLabelText("Link code")).toBeTruthy();
   expect(screen.queryByRole("button", { name: "Sign in with Microsoft" })).toBeNull();
 });
 
 
@@ -129,6 +129,7 @@ export default function AccountPanel({
   const [confirmPatreon, setConfirmPatreon] = useState(false);
   const [actionError, setActionError] = useState<string | null>(null);
   const [recheck, setRecheck] = useState(minecraftStatus === "guild_check_stale");
+  const [showCode, setShowCode] = useState(false);
   const notice = signInMessage(signin) || minecraftLinkMessage(minecraftStatus);
 
   const refresh = useCallback(async () => {
@@ -339,27 +340,7 @@ export default function AccountPanel({
         </p>
       ) : null}
 
-      {minecraft ? (
-        dashboard ? (
-          <ProfileTiles dashboard={dashboard} />
-        ) : null
-      ) : (
-        <section className="mt-8" aria-labelledby="link-heading">
-          <h2 id="link-heading" className={`${sectionHeadingClass} mb-3`}>
-            Link your Minecraft account
-          </h2>
-          <div className={`${cardClass} p-5`}>
-            <LinkMinecraft
-              account={account}
-              recheck={recheck}
-              busy={busy}
-              discordHandle={discordHandle}
-              onConnectMicrosoft={() => void onConnectMicrosoft()}
-              onLinked={refresh}
-            />
-          </div>
-        </section>
-      )}
+      {minecraft && dashboard ? <ProfileTiles dashboard={dashboard} /> : null}
 
       <section className="mt-8" aria-labelledby="accounts-heading">
         <h2 id="accounts-heading" className={`${sectionHeadingClass} mb-3`}>
@@ -393,10 +374,26 @@ export default function AccountPanel({
             service="Minecraft"
             icon={minecraft ? <PlayerHead uuid={minecraft.player_uuid} fallback={null} size={32} /> : <EmptyIcon />}
             action={
-              minecraft && !confirmUnlink ? (
-                <button type="button" onClick={() => setConfirmUnlink(true)} className={quietButtonClass}>
-                  Unlink
-                </button>
+              minecraft ? (
+                confirmUnlink ? null : (
+                  <button type="button" onClick={() => setConfirmUnlink(true)} className={quietButtonClass}>
+                    Unlink
+                  </button>
+                )
+              ) : (
+                <LinkActions
+                  account={account}
+                  recheck={recheck}
+                  busy={busy}
+                  showCode={showCode}
+                  onConnectMicrosoft={() => void onConnectMicrosoft()}
+                  onToggleCode={() => setShowCode((open) => !open)}
+                />
+              )
+            }
+            below={
+              !minecraft && showCode && account.guild.member && !recheck ? (
+                <MinecraftLinkForm discordName={discordHandle} onLinked={refresh} />
               ) : null
             }
           >
@@ -419,7 +416,20 @@ export default function AccountPanel({
                 ) : null}
               </>
             ) : (
-              <p className="text-[var(--tfmc-stone)]">Not linked</p>
+              <>
+                <p className="text-[var(--tfmc-stone)]">Not linked</p>
+                {!account.guild.member ? (
+                  <p className="text-sm text-[var(--tfmc-stone)]">
+                    Join the{" "}
+                    <a href={SITE_DISCORD_URL} className={accentLinkClass}>
+                      TFMC Discord
+                    </a>{" "}
+                    to link.
+                  </p>
+                ) : recheck ? (
+                  <p className="text-sm text-[var(--tfmc-stone)]">Confirm your Discord membership to link.</p>
+                ) : null}
+              </>
             )}
           </AccountRow>
 
@@ -437,23 +447,6 @@ export default function AccountPanel({
         </ul>
       </section>
 
-      {minecraft ? (
-        <p className="mt-8 text-sm text-[var(--tfmc-stone)]">
-          Your{" "}
-          <Link href="/profile" className={accentLinkClass}>
-            Profile
-          </Link>{" "}
-          opens straight away now your accounts are linked, with no code from in game.
-        </p>
-      ) : (
-        <p className="mt-8 text-sm text-[var(--tfmc-stone)]">
-          Once linked, your{" "}
-          <Link href="/profile" className={accentLinkClass}>
-            Profile
-          </Link>{" "}
-          opens without a code from in game.
-        </p>
-      )}
     </>
   );
 }
@@ -499,12 +492,15 @@ function AccountRow({
   service,
   icon,
   action,
+  below,
   children,
 }: {
   label: string;
   service: string;
   icon: ReactNode;
   action?: ReactNode;
+  /** Full-width content under the row, such as a form. */
+  below?: ReactNode;
   children: ReactNode;
 }) {
   return (
@@ -518,6 +514,7 @@ function AccountRow({
         {children}
       </div>
       {action ? <div className="ml-auto flex shrink-0 flex-wrap items-center justify-end gap-3">{action}</div> : null}
+      {below ? <div className="basis-full sm:pl-12">{below}</div> : null}
     </li>
   );
 }
@@ -551,7 +548,6 @@ function PatreonRow({
         <PatreonConnectButton onClick={onConnect} disabled={busy} />
       }>
         <p className="text-[var(--tfmc-stone)]">Not connected</p>
-        <p className="text-sm text-[var(--tfmc-stone)]">Supporter perks on Discord and in game.</p>
       </AccountRow>
     );
   }
@@ -566,7 +562,7 @@ function PatreonRow({
           <>
             {!tier ? (
               <a href={PATREON_URL} target="_blank" rel="noopener noreferrer" className={`text-sm ${accentLinkClass}`}>
-                Become a supporter ↗
+                Become a supporter <ExternalArrow />
               </a>
             ) : null}
             <button type="button" onClick={onBegin} className={quietButtonClass}>
@@ -603,82 +599,52 @@ function PatreonRow({
   );
 }
 
-function LinkMinecraft({
+function LinkActions({
   account,
   recheck,
   busy,
-  discordHandle,
+  showCode,
   onConnectMicrosoft,
-  onLinked,
+  onToggleCode,
 }: {
   account: Account;
   recheck: boolean;
   busy: boolean;
-  discordHandle: string;
+  showCode: boolean;
   onConnectMicrosoft: () => void;
-  onLinked: () => void | Promise<void>;
+  onToggleCode: () => void;
 }) {
-  const intro = (
-    <p className="text-sm text-[var(--tfmc-mist)]">
-      Linking opens your characters, skins and drinks here, and brings your Patreon perks into the game.
-    </p>
-  );
   if (!account.guild.member) {
     return (
-      <>
-        {intro}
-        <p className="mt-3 text-sm text-[var(--tfmc-mist)]">
-          Linking needs you to be in the TFMC Discord server.{" "}
-          <a href={SITE_DISCORD_URL} className={accentLinkClass}>
-            Join it
-          </a>
-          , then check again.
-        </p>
-        <a href={discordSignInUrl("/account")} className={`${buttonClass} mt-4`}>
-          I’ve joined, check again
-        </a>
-      </>
-    );
-  }
-  if (recheck) {
-    return (
-      <>
-        <p className="text-sm text-[var(--tfmc-mist)]">Please confirm your Discord membership again before linking.</p>
-        <div className="mt-4 flex">
-          <DiscordSignInLink href={discordSignInUrl("/account")} />
-        </div>
-      </>
-    );
-  }
-  if (!account.microsoft_link) {
-    return (
-      <>
-        {intro}
-        <div className="mt-4">
-          <MinecraftLinkForm discordName={discordHandle} onLinked={onLinked} />
-        </div>
-      </>
+      <a href={discordSignInUrl("/account")} className={quietButtonClass}>
+        I’ve joined, check again
+      </a>
     );
   }
+  if (recheck) return <DiscordSignInLink href={discordSignInUrl("/account")} />;
+  const codeToggle = (
+    <button type="button" onClick={onToggleCode} aria-expanded={showCode} className={quietButtonClass}>
+      {account.microsoft_link ? "Use a code" : "Link with a code from in game"}
+    </button>
+  );
+  if (!account.microsoft_link) return codeToggle;
   return (
     <>
-      {intro}
-      <p className="mt-2 text-sm text-[var(--tfmc-mist)]">
-        Sign in with the Microsoft account you play Minecraft with. We only read your Minecraft name and ID.
-      </p>
-      <div className="mt-4 flex">
-        <MicrosoftSignInButton onClick={onConnectMicrosoft} disabled={busy} />
-      </div>
-      <details className="mt-5">
-        <summary className={`${quietButtonClass} cursor-pointer`}>Or use a code from in game</summary>
-        <div className="mt-3">
-          <MinecraftLinkForm discordName={discordHandle} onLinked={onLinked} />
-        </div>
-      </details>
+      {codeToggle}
+      <MicrosoftSignInButton onClick={onConnectMicrosoft} disabled={busy} />
     </>
   );
 }
 
+/** A text arrow: the ↗ character turns into an emoji on some systems. */
+function ExternalArrow() {
+  return (
+    <svg aria-hidden viewBox="0 0 12 12" width={10} height={10} className="ml-0.5 inline-block align-baseline">
+      <path d="M3.5 2.5h6v6M9.5 2.5l-7 7" fill="none" stroke="currentColor" strokeWidth={1.5} />
+    </svg>
+  );
+}
+
 function waiting(count: number): string | null {
   return count ? `${count} waiting` : null;
 }